* { box-sizing: border-box; }

:root {
    --bg-0: #040307;
    --bg-1: #090711;
    --panel: rgba(18, 13, 30, 0.72);
    --panel-strong: rgba(18, 13, 30, 0.86);
    --border: rgba(202, 173, 255, 0.22);
    --text: #f5f2ff;
    --muted: #b4abc9;
    --purple-1: #d946ef;
    --purple-2: #7c3aed;
    --purple-3: #5b21b6;
    --site-bg-image: none;
    --site-bg-position-x: 50%;
    --site-bg-position-y: 50%;
}

.studio-ready .studio-app.is-studio-level-beginner .studio-layout-controls button:not([data-layout-home]),
.studio-ready .studio-app.is-studio-level-beginner .studio-view-tabs,
.studio-ready .studio-app.is-studio-level-beginner .studio-low-performance-toggle,
.studio-ready .studio-app.is-studio-level-beginner #studio-add-pattern-clip,
.studio-ready .studio-app.is-studio-level-beginner .studio-toolbar-lanes,
.studio-ready .studio-app.is-studio-level-beginner .studio-toolbar-grid,
.studio-ready .studio-app.is-studio-level-beginner .studio-toolbar-intel,
.studio-ready .studio-app.is-studio-level-beginner .studio-loop-region-controls,
.studio-ready .studio-app.is-studio-level-beginner .studio-project-io,
.studio-ready .studio-app.is-studio-level-beginner .studio-browser-fold,
.studio-ready .studio-app.is-studio-level-beginner .studio-browser-filter-chips,
.studio-ready .studio-app.is-studio-level-beginner .studio-section-navigator,
.studio-ready .studio-app.is-studio-level-beginner .studio-arrangement-coach {
    display: none !important;
}

.studio-ready .studio-app.is-studio-level-beginner .studio-layout-controls {
    gap: 6px;
}

.studio-ready .studio-app.is-studio-level-beginner .studio-layout-preset-wrap {
    border-color: rgba(70, 255, 154, 0.35);
    background: rgba(70, 255, 154, 0.08);
}

.studio-ready .studio-app.is-studio-level-beginner .studio-playlist-toolbar {
    gap: 8px;
}

.studio-ready .studio-app.is-studio-level-advanced .studio-layout-preset-wrap,
.studio-ready .studio-app.is-studio-level-pro .studio-layout-preset-wrap,
.studio-ready .studio-app.is-studio-level-owner .studio-layout-preset-wrap {
    border-color: rgba(33, 212, 253, 0.35);
}

.studio-ready .studio-app.is-studio-level-beginner {
    --studio-level-accent: #46ff9a;
    --studio-level-accent-soft: rgba(70, 255, 154, 0.14);
}

.studio-ready .studio-app.is-studio-level-advanced,
.studio-ready .studio-app.is-studio-level-pro,
.studio-ready .studio-app.is-studio-level-owner {
    --studio-level-accent: #46ff9a;
    --studio-level-accent-soft: rgba(70, 255, 154, 0.14);
}

.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-topbar {
    border-bottom-color: color-mix(in srgb, var(--studio-level-accent, #21d4fd) 45%, rgba(255, 255, 255, 0.16));
    box-shadow: inset 0 -1px 0 var(--studio-level-accent-soft, rgba(33, 212, 253, 0.12));
}

.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-layout-preset-wrap select {
    border-color: color-mix(in srgb, var(--studio-level-accent, #21d4fd) 48%, rgba(255, 255, 255, 0.16));
    background: linear-gradient(180deg, var(--studio-level-accent-soft, rgba(33, 212, 253, 0.12)), rgba(6, 8, 14, 0.96));
    color: #ecfff5;
}

.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-layout-preset-wrap select:hover,
.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-layout-preset-wrap select:focus {
    border-color: rgba(70, 255, 154, 0.72);
    background: linear-gradient(180deg, rgba(70, 255, 154, 0.18), rgba(5, 14, 13, 0.98));
    color: #ffffff;
    outline: none;
}

.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-layout-preset-wrap select option {
    background: #06120d;
    color: #ecfff5;
}

.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-layout-preset-wrap select option:hover,
.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-layout-preset-wrap select option:focus,
.studio-ready .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-layout-preset-wrap select option:checked {
    background: #123426;
    color: #ffffff;
}

.studio-ready .studio-app.is-studio-level-beginner .studio-browser,
.studio-ready .studio-app.is-studio-level-beginner .studio-playlist-panel {
    border-color: rgba(70, 255, 154, 0.24);
}

.studio-ready .studio-app.is-studio-level-beginner .studio-playlist-panel .studio-panel-title small {
    color: #a6ffc6;
}

.studio-ready .studio-app.is-studio-level-advanced .studio-workspace {
    border-color: rgba(70, 255, 154, 0.2);
}

.studio-ready .studio-app.is-studio-level-pro .studio-daw-window {
    border-color: rgba(70, 255, 154, 0.18);
}

.studio-ready .studio-context-menu {
    width: min(280px, calc(100vw - 16px));
    max-height: min(560px, calc(100vh - 16px));
    overflow: auto;
    padding: 8px;
}

.studio-ready .studio-context-menu-section {
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.studio-ready .studio-context-menu-section + .studio-context-menu-section {
    margin-top: 6px;
}

.studio-ready .studio-context-menu-section > strong {
    padding: 2px 5px 4px;
    color: #8fe7ff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.studio-ready .studio-context-menu-section button {
    min-height: 30px;
}

/* PULSATRAX Studio arrangement-first workspace pass. */
@media (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-daw-grid {
        grid-template-columns: var(--studio-browser-width, 300px) minmax(640px, 1fr) var(--studio-project-width, 280px) !important;
        grid-template-rows: minmax(0, calc(100vh - 194px)) !important;
        min-height: 0 !important;
        height: calc(100vh - 194px) !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-browser,
    .studio-ready body.studio-app-body .studio-project-drawer {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-workspace {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 8px !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .studio-ready body.studio-app-body .studio-work-panel {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-work-panel:not(.is-active) {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-work-panel.is-active {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel.is-active {
        min-height: 0 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist {
        min-height: 0 !important;
        height: 100% !important;
        overflow: auto !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-lanes {
        padding-bottom: 18px;
    }

    .studio-ready body.studio-app-body .studio-playlist-toolbar {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px !important;
        max-height: 132px;
        padding: 7px;
        border: 1px solid rgba(130, 157, 190, .14);
        border-radius: 8px;
        background: rgba(4, 8, 13, .42);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .studio-ready body.studio-app-body .studio-toolbar-group,
    .studio-ready body.studio-app-body .studio-loop-region-controls {
        display: inline-flex;
        align-items: end;
        gap: 6px;
        min-width: 0;
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 7px;
        background: rgba(255, 255, 255, .025);
    }

    .studio-ready body.studio-app-body .studio-playlist-toolbar > .studio-secondary-btn,
    .studio-ready body.studio-app-body .studio-playlist-toolbar > .studio-control-label {
        flex: 0 0 auto;
    }

    .studio-ready body.studio-app-body .studio-toolbar-song,
    .studio-ready body.studio-app-body .studio-toolbar-edit,
    .studio-ready body.studio-app-body .studio-toolbar-lanes,
    .studio-ready body.studio-app-body .studio-loop-region-controls {
        flex: 0 0 auto;
    }

    .studio-ready body.studio-app-body .studio-toolbar-grid {
        flex: 1 1 520px;
        flex-wrap: wrap;
    }

    .studio-ready body.studio-app-body .studio-project-io {
        flex: 0 0 auto;
        align-self: center;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 5px 7px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 7px;
        background: rgba(255, 255, 255, .025);
    }

    .studio-ready body.studio-app-body .studio-project-io:not([open]) > :not(summary) {
        display: none;
    }

    .studio-ready body.studio-app-body .studio-project-io summary {
        cursor: pointer;
        color: rgba(228, 246, 255, .78);
        font-size: .68rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .studio-ready body.studio-app-body .studio-project-publish-fields {
        max-height: 72px;
        overflow: auto;
    }

    .studio-ready body.studio-app-body .studio-project-publish-fields:hover,
    .studio-ready body.studio-app-body .studio-project-publish-fields:focus-within {
        max-height: min(40vh, 460px);
    }
}

.studio-ready .studio-clip-inspector {
    display: grid;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(33, 212, 253, .16);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 18, 26, .92), rgba(5, 9, 15, .92));
}

.studio-ready .studio-clip-inspector-head,
.studio-ready .studio-clip-inspector-title,
.studio-ready .studio-clip-inspector-stats,
.studio-ready .studio-clip-inspector-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-ready .studio-clip-inspector-head {
    justify-content: space-between;
    color: #f8fbff;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-clip-inspector-head small {
    color: rgba(228, 246, 255, .5);
    font-size: .62rem;
}

.studio-ready .studio-clip-inspector-body {
    display: grid;
    gap: 9px;
}

.studio-ready .studio-clip-inspector-body p {
    margin: 0;
    color: rgba(228, 246, 255, .64);
    font-size: .78rem;
    line-height: 1.35;
}

.studio-ready .studio-clip-inspector-title {
    align-items: start;
    padding-left: 8px;
    border-left: 3px solid var(--channel-color, #21d4fd);
}

.studio-ready .studio-clip-inspector-title strong,
.studio-ready .studio-clip-inspector-title span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-clip-inspector-title {
    display: grid;
    gap: 2px;
}

.studio-ready .studio-clip-inspector-title span {
    color: rgba(228, 246, 255, .52);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.studio-ready .studio-clip-inspector-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.studio-ready .studio-clip-inspector-stats span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    color: rgba(228, 246, 255, .48);
    background: rgba(255, 255, 255, .025);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-clip-inspector-stats b {
    color: #f8fbff;
    font-size: .68rem;
    font-weight: 900;
    text-transform: none;
}

.studio-ready .studio-clip-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.studio-ready .studio-clip-inspector-grid label {
    display: grid;
    gap: 4px;
    color: rgba(228, 246, 255, .58);
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-clip-inspector-grid input,
.studio-ready .studio-clip-inspector-grid select {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid rgba(130, 157, 190, .25);
    border-radius: 6px;
    color: #f8fbff;
    background: #080d14;
}

.studio-ready .studio-clip-inspector-actions {
    flex-wrap: wrap;
}

.studio-ready .studio-clip-inspector-actions button {
    flex: 1 1 auto;
    min-width: max-content;
    min-height: 31px;
    padding: 6px 9px;
}

.studio-clip-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 328;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(2, 5, 11, .58);
    backdrop-filter: blur(8px);
}

.studio-clip-settings-overlay.is-open {
    display: grid;
}

.studio-clip-settings-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(500px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow: hidden;
    border: 1px solid rgba(117, 159, 255, .28);
    border-radius: 10px;
    color: #eff7ff;
    background:
        radial-gradient(circle at 12% 0%, rgba(67, 129, 255, .18), transparent 36%),
        radial-gradient(circle at 100% 20%, rgba(255, 79, 216, .12), transparent 38%),
        linear-gradient(180deg, rgba(9, 15, 27, .98), rgba(5, 8, 16, .98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .62), 0 0 34px rgba(88, 120, 255, .14);
}

.studio-clip-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px 11px;
    border-bottom: 1px solid rgba(117, 159, 255, .18);
}

.studio-clip-settings-head span {
    display: block;
    margin-bottom: 3px;
    color: rgba(168, 199, 255, .72);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.studio-clip-settings-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.1;
}

.studio-clip-settings-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #f7fbff;
    background: rgba(255, 255, 255, .055);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.studio-clip-settings-close:hover,
.studio-clip-settings-close:focus-visible {
    border-color: rgba(255, 79, 216, .42);
    background: rgba(255, 79, 216, .14);
    outline: none;
}

.studio-clip-settings-body {
    min-height: 0;
    padding: 14px;
    overflow: auto;
    overscroll-behavior: contain;
}

.studio-clip-settings-dialog .studio-clip-inspector-actions {
    position: sticky;
    bottom: 0;
    margin: 4px -14px -14px;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(117, 159, 255, .14);
    background: linear-gradient(180deg, rgba(7, 11, 20, .88), rgba(5, 8, 16, .98));
}

@media (max-width: 1180px) and (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-daw-grid {
        grid-template-columns: minmax(230px, .72fr) minmax(520px, 1.7fr) minmax(230px, .75fr) !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-toolbar {
        max-height: 148px;
    }

    .studio-ready body.studio-app-body .studio-project-io {
        flex: 1 1 auto;
    }
}

@media (max-width: 760px) {
    .studio-clip-settings-overlay {
        padding: 0;
    }

    .studio-clip-settings-dialog {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-width: 0;
        border-radius: 0;
    }

    .studio-ready .studio-clip-inspector-grid,
    .studio-ready .studio-clip-inspector-stats {
        grid-template-columns: 1fr;
    }
}

/* Playlist top-strip stability: no half-clipped controls above the timeline ruler. */
.studio-ready body.studio-app-body .studio-playlist-panel {
    grid-template-rows: auto 54px minmax(220px, 1fr) 20px 46px auto auto !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar {
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    padding: 4px 0 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar > * {
    flex: 0 0 auto !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
    grid-row: 3 !important;
    margin-top: 0 !important;
}

.studio-ready body.studio-app-body :is(
    .studio-toolbar-lanes,
    .studio-toolbar-grid,
    .studio-loop-region-controls,
    .studio-project-io
) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.studio-ready body.studio-app-body :is(
    .studio-arrange-builder.is-hidden,
    .studio-starter-generator.is-hidden,
    .studio-arrangement-coach.is-hidden
) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background:
        radial-gradient(circle at 85% -10%, rgba(130, 54, 255, 0.25), transparent 45%),
        radial-gradient(circle at -10% 5%, rgba(226, 59, 255, 0.14), transparent 35%),
        linear-gradient(rgba(4,3,7,.72), rgba(4,3,7,.82)),
        var(--site-bg-image);
    background-size: auto, auto, auto, cover;
    background-position: center, center, center, var(--site-bg-position-x) var(--site-bg-position-y);
    background-attachment: scroll, scroll, scroll, fixed;
    color: var(--text);
    min-height: 100vh;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.layout, .feed, .post-card, .create-post, .profile-card, .messages-layout {
    max-width: 100%;
    min-width: 0;
}

img, video, iframe {
    max-width: 100%;
}

a { color: inherit; text-decoration: none; }

.auth-page { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 24px; }
.auth-box {
    width: 100%; max-width: 460px; background: var(--panel-strong);
    border: 1px solid var(--border); border-radius: 24px; padding: 40px;
    backdrop-filter: blur(18px); box-shadow: 0 30px 90px rgba(7, 5, 14, 0.85);
}
.auth-box h1 { margin: 0; font-size: 54px; font-weight: 900; letter-spacing: -3px; }
.muted { color: var(--muted); margin-top: 10px; }
.auth-form { display: grid; gap: 16px; margin-top: 32px; }

input, textarea, button { font: inherit; }

.auth-form input,
.create-post textarea,
.edit-profile-form input,
.edit-profile-form textarea {
    width: 100%;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(197, 155, 255, 0.26);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    outline: none;
}

.auth-form input:focus,
.create-post textarea:focus,
.edit-profile-form input:focus,
.edit-profile-form textarea:focus {
    border-color: #ba73ff;
    box-shadow: 0 0 0 3px rgba(167, 91, 255, 0.2);
}

button,
.auth-form button,
.create-post-actions button,
.edit-profile-actions button,
.follow-item button {
    border: 0;
    border-radius: 14px;
    padding: 11px 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-1), var(--purple-2), var(--purple-3));
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(129, 49, 255, 0.35);
}
button:hover { filter: brightness(1.05); }

.auth-link { display: block; margin-top: 22px; color: #d3a6ff; }
.auth-notice {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(230, 169, 255, 0.35);
    background: rgba(191, 80, 255, 0.12);
    color: #f1d7ff;
    line-height: 1.5;
}
.error { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(220, 38, 127, .17); border: 1px solid rgba(255, 117, 190, .4); color: #ffd2ef; }
.small-error { margin: 0; }

.layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 18px;
    padding: 18px;
    align-items: start;
}

.sidebar,
.rightbar,
.hero-card,
.create-post,
.post-card,
.profile-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
}

.sidebar {
    padding: 22px 16px;
    position: sticky;
    top: 18px;
    height: fit-content;
    min-height: 0;
    max-height: none;
}
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 27px;
    font-weight: 900;
    color: #efb6ff;
    margin: 0 8px 22px;
    letter-spacing: 1.3px;
    width: 100%;
    max-width: 100%;
    min-height: var(--site-logo-card-height, 84px);
    max-height: var(--site-logo-card-height, 84px);
    overflow: hidden;
    padding: var(--site-logo-card-padding, 8px);
    border-radius: 14px;
    border: 1px solid rgba(197, 153, 255, 0.25);
    background: linear-gradient(125deg, rgba(255,255,255,0.05), rgba(131,49,255,0.11));
    text-decoration: none;
    cursor: pointer;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, color .24s ease;
}
.logo:hover {
    transform: translateY(-1px);
    color: #ffd6ff;
    border-color: rgba(232, 185, 255, 0.56);
    box-shadow: 0 0 20px rgba(206, 125, 255, 0.36), 0 10px 32px rgba(0, 0, 0, 0.28);
}
.logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #2a113f;
    background: radial-gradient(circle at 30% 25%, #f7d5ff 0%, #bc8dff 45%, #6a35ff 100%);
    box-shadow: 0 5px 18px rgba(139, 71, 255, 0.45);
}
.logo-text { line-height: 1; }

.menu { display: grid; gap: 8px; }
.menu-link { padding: 12px 13px; border-radius: 12px; color: #dfd7f5; border: 1px solid transparent; }
.menu-link.active,
.menu-link:hover { background: rgba(177, 120, 255, 0.2); border-color: rgba(188, 137, 255, 0.35); }

.feed { display: grid; gap: 18px; align-content: start; min-width: 0; }
.hero-card {
    --hero-image: linear-gradient(135deg, #07111a 0%, #05090f 56%, #020408 100%);
    min-height: 220px;
    max-height: 260px;
    overflow: hidden;
    position: relative;
    padding: 36px;
    display: flex;
    align-items: end;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: var(--hero-pos-x, var(--hero-position-x, 50%)) var(--hero-pos-y, var(--hero-position-y, 50%));
    box-shadow: inset 0 0 0 1px rgba(228, 180, 255, 0.16), inset 0 -60px 90px rgba(0,0,0,.4), 0 0 45px rgba(157, 75, 255, 0.2);
}
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(3, 2, 8, 0.82), rgba(48, 14, 76, 0.45) 55%, rgba(5, 4, 10, 0.9));
    pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card h1 { font-size: clamp(2rem, 3.4vw, 3.2rem); margin: 0; line-height: 1.02; }
.hero-card p { color: #d9d1eb; font-size: 1.05rem; max-width: 520px; }

.create-post { padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.create-post-form { display: grid; gap: 10px; flex: 1; min-width: 0; }
.create-post textarea { min-height: 92px; resize: vertical; }
.file-input-wrap { display: grid; gap: 8px; color: #ddd3f2; font-size: .92rem; }
.file-input-wrap input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.file-input-control {
    min-height: 38px;
    border: 1px dashed rgba(197, 155, 255, 0.45);
    border-radius: 12px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.file-input-control:focus-visible {
    border-color: rgba(115, 247, 255, 0.72);
    box-shadow: 0 0 0 3px rgba(115, 247, 255, 0.14);
}
.file-input-btn {
    border-radius: 9px;
    border: 1px solid rgba(214, 162, 255, 0.7);
    background: linear-gradient(135deg, #7a3cff, #4412a7);
    color: #fff;
    padding: 5px 10px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
}
.file-input-name {
    font-size: .78rem;
    color: #b5a9d0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.create-post-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

.site-logo-img {
    display: block;
    width: var(--site-logo-size, 230px);
    height: calc(var(--site-logo-card-height, 84px) - (var(--site-logo-card-padding, 8px) * 2));
    max-width: 100%;
    max-height: 100%;
    object-fit: var(--site-logo-fit, contain);
    object-position: var(--site-logo-x, 50%) var(--site-logo-y, 50%);
    margin: 0 auto;
}

.branding-upload-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(214, 162, 255, 0.7);
    background: linear-gradient(135deg, #7a3cff, #4412a7);
    color: #fff;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
}
.branding-upload-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.branding-preview {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(202, 173, 255, 0.26);
    margin-bottom: 10px;
}
.branding-preview-logo { max-height: 80px; width: auto; object-fit: contain; }
.branding-preview-hero { max-height: 180px; }
.branding-preview-background { max-height: 180px; }


.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(221, 197, 255, 0.6); }
.post-top .avatar { width: 40px; height: 40px; object-fit: cover; }
.post-card { padding: 18px; }
.post-top { display: flex; gap: 12px; align-items: center; }
.post-text { margin: 16px 0; color: #f2edff; white-space: pre-wrap; word-break: break-word; }
.post-content-text {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
}

.post-content-text.collapsed {
    line-height: 1.45;
    max-height: calc(1.45em * 4);
    overflow: hidden;
}

.toggle-post-btn.hidden {
    display: none;
}

.toggle-post-btn {
    margin-top: 8px;
    background: transparent;
    border: none;
    color: #b66cff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    padding: 0;
}
.post-card .post-image-wrap {
    width: min(100%, 680px);
    max-height: 360px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(202, 173, 255, 0.26);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38);
    margin: 12px auto;
    background: rgba(0,0,0,.28);
}

.post-card .post-image-wrap .post-image {
    width: 100%;
    max-height: 360px;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
}
.delete-post-form { display: flex; justify-content: flex-end; }

.danger-btn { background: linear-gradient(135deg, #ff3789, #b30059) !important; box-shadow: 0 8px 24px rgba(196, 17, 106, 0.4); }

.rightbar { padding: 18px; display: grid; gap: 14px; align-content: start; position: sticky; top: 18px; height: fit-content; }
.widget { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px; }
.widget h3 { margin: 0 0 8px; }
.trend-item,.follow-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.trend-item:last-child,.follow-item:last-child { border-bottom: 0; }
.trend-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(173, 108, 255, 0.25); border: 1px solid rgba(201, 159, 255, 0.5); }
.trend-content p,.follow-item p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

.profile-card { padding: 18px; position: relative; }
.profile-cover-wrap { border: 1px solid; border-radius: 18px; overflow: hidden; }
.profile-cover { width: 100%; height: 230px; object-fit: cover; display: block; }
.profile-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 18px;
    margin-top: -24px;
    padding: 0 10px 10px;
    align-items: start;
}
.profile-main-content { min-width: 0; padding-top: 10px; }
.profile-identity-col { display: grid; align-content: start; gap: 10px; width: 100%; max-width: 280px; }
.profile-report-action { position: absolute; top: 18px; right: 18px; z-index: 5; }
.profile-message-wrap { margin: 8px 0; }
.profile-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(24, 16, 36, 0.95); box-shadow: 0 0 0 2px rgba(198, 150, 255, .45); background: #120f1d; margin-top: 10px; }
.profile-name { margin: 0 0 6px; font-size: 2rem; }
.profile-bio { margin: 8px 0; color: #ece6fd; }
.profile-theme { color: var(--muted); }
.edit-profile-btn { display: inline-block; margin-top: 8px; border: 1px solid; border-radius: 12px; padding: 9px 14px; background: rgba(177, 131, 255, 0.16); }
.social-link-icon-text { font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.social-youtube { color: #ff4e6a; border-color: rgba(255,78,106,.45); }
.social-tiktok { color: #86fcff; border-color: rgba(134,252,255,.45); }
.social-soundcloud { color: #ffa24a; border-color: rgba(255,162,74,.45); }
.social-instagram { color: #ff89e7; border-color: rgba(255,137,231,.45); }
.social-facebook { color: #76a2ff; border-color: rgba(118,162,255,.45); }
.social-spotify { color: #74ffb3; border-color: rgba(116,255,179,.45); }
.social-bandcamp { color: #88d8ff; border-color: rgba(136,216,255,.45); }
.social-x { color: #e9e9ff; border-color: rgba(233,233,255,.45); }

.edit-profile-form { display: grid; gap: 12px; margin-top: 12px; }
.edit-profile-form label { display: grid; gap: 8px; color: #e8defe; }
.edit-profile-form .is-disabled-field { opacity: .62; }
.checkbox-row { display: flex !important; align-items: center; gap: 10px; }
.checkbox-row input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 1px solid rgba(204, 153, 255, .7); border-radius: 5px; background: rgba(22, 17, 36, .95); box-shadow: inset 0 0 0 1px rgba(72, 46, 110, .4); margin: 0; flex: 0 0 auto; }
.checkbox-row input[type="checkbox"]:checked { background: linear-gradient(135deg, #d872ff, #7c4dff); border-color: rgba(236, 168, 255, .9); box-shadow: 0 0 0 1px rgba(168, 95, 255, .45), 0 0 12px rgba(170, 68, 255, .45); position: relative; }
.checkbox-row input[type="checkbox"]:checked::after { content: ""; position: absolute; width: 5px; height: 9px; border-right: 2px solid #0f0a1d; border-bottom: 2px solid #0f0a1d; transform: rotate(45deg); left: 6px; top: 2px; }
.checkbox-row span { line-height: 1.35; }
.status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: .78rem; border: 1px solid rgba(171, 142, 210, .4); }
.status-badge-success { color: #79ffbf; border-color: rgba(121, 255, 191, .5); background: rgba(45, 169, 113, .2); box-shadow: 0 0 14px rgba(61, 210, 149, .26); }
.status-badge-pending { color: #e6c2ff; border-color: rgba(186, 119, 255, .54); background: rgba(122, 58, 182, .26); }
.status-badge-muted { color: #cabada; border-color: rgba(153, 130, 182, .38); background: rgba(79, 63, 102, .22); }
.field-helper-text { margin-top: -2px; }
.edit-profile-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.danger-zone { margin-top: 20px; padding: 16px; border: 1px solid rgba(255, 122, 188, 0.36); background: rgba(255, 41, 109, 0.08); border-radius: 16px; }

.confirm-modal { position: fixed; inset: 0; z-index: 30000; display: none; background: rgba(2,2,8,.72); backdrop-filter: blur(3px); padding: 20px; }
.confirm-modal.is-open { display: grid; place-items: center; }
.confirm-dialog { width: min(540px, 100%); background: #161123; border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.confirm-actions { display: flex; justify-content: end; gap: 10px; }
.confirm-cancel { background: rgba(255,255,255,.12); box-shadow: none; }

@media (max-width: 1150px) {
    .layout { grid-template-columns: 88px minmax(0,1fr); }
    .rightbar { grid-column: span 2; position: static; }
    .logo {
        width: 100%;
        justify-content: center;
        margin: 0 0 10px;
        font-size: 12px;
        padding: 8px 6px;
        gap: 6px;
    }
    .logo-mark { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
    .menu-link { text-align: center; padding: 10px 6px; font-size: .82rem; }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 84px;
        background-attachment: scroll, scroll, scroll, scroll;
    }
    .layout { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
    .sidebar {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        top: auto;
        z-index: 1200;
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        border-radius: 16px;
        background: rgba(14, 11, 24, 0.96);
        border: 1px solid rgba(202, 173, 255, 0.32);
        box-shadow: 0 12px 38px rgba(0,0,0,.55);
        backdrop-filter: blur(16px);
    }
    .sidebar .logo { display: none; }
    .sidebar .menu {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
        gap: 6px;
    }
    .sidebar .menu-link {
        position: relative;
        text-align: center;
        min-width: 0;
        font-size: clamp(.62rem, 2.6vw, .76rem);
        padding: 8px 3px;
        border-radius: 10px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
    .sidebar .menu-link .notif-badge[hidden] {
    display: none !important;
}

@media (max-width: 1180px) {
    body.home-page .featured-creator-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.home-page .featured-creator-card .pulse-score-badge {
        grid-column: 1 / -1;
        justify-self: start;
        max-width: 100%;
    }
}

.notif-badge {
        position: absolute;
        top: -6px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin-left: 0;
        font-size: 10px;
        line-height: 18px;
        z-index: 2;
        overflow: visible;
        text-overflow: clip;
    }
    .rightbar { display: none; }
    .feed { gap: 12px; }
    .post-card, .create-post, .profile-card { padding: 14px; border-radius: 16px; }
    .post-top { align-items: flex-start; }
    .post-text { margin: 12px 0; line-height: 1.45; }
    .post-actions-row { gap: 12px; flex-wrap: wrap; font-size: .9rem; }
    .profile-cover { height: 140px; }
    .profile-main { grid-template-columns: 1fr; margin-top: -30px; gap: 10px; padding: 0 4px 8px; }
    .profile-name { font-size: 1.55rem; line-height: 1.15; }
    .profile-bio { line-height: 1.45; }
    .messages-layout { grid-template-columns: 1fr; gap: 12px; min-height: 0; }
    .messages-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
        padding-right: 0;
        padding-bottom: 10px;
        max-height: 220px;
    }
    .conversation-link { padding: 9px; margin-bottom: 8px; }
    .thread-header { padding-bottom: 8px; }
    .message-bubbles { max-height: 54vh; padding-right: 0; }
    .message-bubble { max-width: 92%; padding: 9px 11px; }
    .message-form textarea { min-height: 82px; }
    .message-form-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .message-form-row button { width: 100%; }
    .message-image-thumb {
        width: min(100%, 220px);
        max-width: 100%;
        height: auto;
        max-height: 180px;
        object-fit: contain;
        background: rgba(0,0,0,.25);
    }
    .emoji-picker-wrap { z-index: 30000; }
    .emoji-panel {
        width: min(520px, calc(100vw - 14px));
        max-width: min(520px, calc(100vw - 14px));
        max-height: min(52vh, 360px);
        padding: 10px;
    }
}

.desktop-launch-only {
    display: none;
}

@media (min-width: 761px) {
    .home-feed {
        gap: 16px;
    }

    .home-hero-card {
        min-height: 310px;
        max-height: none;
        padding: 34px;
        align-items: stretch;
        overflow: hidden;
        border-color: rgba(93, 244, 255, 0.34);
        background-blend-mode: normal;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.06),
            inset 0 -80px 120px rgba(0, 0, 0, 0.55),
            0 0 44px rgba(39, 214, 255, 0.16),
            0 18px 55px rgba(0, 0, 0, 0.55);
    }

    .home-hero-card::before {
        background:
            linear-gradient(90deg, rgba(3, 5, 12, 0.95) 0%, rgba(7, 9, 22, 0.78) 42%, rgba(95, 18, 126, 0.34) 68%, rgba(3, 5, 12, 0.9) 100%),
            repeating-linear-gradient(90deg, rgba(119, 245, 255, 0.08) 0 1px, transparent 1px 64px),
            repeating-linear-gradient(0deg, rgba(255, 52, 210, 0.06) 0 1px, transparent 1px 42px);
    }

    .home-hero-card::after {
        content: "";
        position: absolute;
        inset: auto -10% -34% 32%;
        height: 58%;
        background:
            linear-gradient(90deg, transparent, rgba(109, 255, 246, 0.24), transparent),
            radial-gradient(ellipse at center, rgba(255, 39, 213, 0.28), transparent 68%);
        filter: blur(18px);
        pointer-events: none;
    }

    .home-hero-content {
        position: relative;
        z-index: 1;
        width: min(100%, 760px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
    }

    .home-hero-card .mobile-hero-title,
    .home-hero-card .mobile-hero-copy {
        display: none;
    }

    .home-hero-card .desktop-launch-only {
        display: block;
    }

    .home-hero-kicker,
    .launch-empty-kicker,
    .widget-title-row span {
        color: #79f7ff;
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-shadow: 0 0 12px rgba(87, 242, 255, 0.48);
    }

    .home-hero-card h1 {
        max-width: 720px;
        font-size: clamp(2.35rem, 4vw, 4.45rem);
        line-height: .96;
        text-wrap: balance;
        text-shadow: 0 0 28px rgba(236, 68, 255, 0.3);
    }

    .home-hero-card p {
        max-width: 600px;
        margin: 0;
        color: #e3dcf7;
        font-size: 1.02rem;
        line-height: 1.55;
    }

    .home-hero-actions,
    .home-hero-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
    }

    .launch-cta {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 10px 15px;
        font-size: .9rem;
        font-weight: 900;
        border: 1px solid rgba(148, 235, 255, 0.35);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .launch-cta:hover {
        transform: translateY(-1px);
        border-color: rgba(141, 251, 255, 0.76);
        box-shadow: 0 0 22px rgba(69, 230, 255, 0.28);
    }

    .launch-cta-primary {
        color: #071018;
        background: linear-gradient(135deg, #77f7ff, #ff55d8);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 0 28px rgba(255, 55, 219, 0.36), 0 10px 26px rgba(0, 0, 0, 0.32);
    }

    .launch-cta-secondary {
        color: #f3ecff;
        background: rgba(10, 13, 28, 0.66);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .home-hero-chips span {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        border-radius: 999px;
        padding: 6px 10px;
        color: #dffcff;
        font-size: .78rem;
        font-weight: 800;
        border: 1px solid rgba(114, 244, 255, 0.34);
        background: rgba(10, 16, 35, 0.62);
        box-shadow: inset 0 0 14px rgba(84, 240, 255, 0.08), 0 0 16px rgba(255, 48, 210, 0.12);
    }

    .feed-tabs-card {
        border-color: rgba(114, 244, 255, 0.2);
        background: linear-gradient(135deg, rgba(9, 12, 27, 0.82), rgba(26, 12, 45, 0.72));
    }

    .feed-tabs-card .menu-link.active {
        color: #f7fdff;
        border-color: rgba(115, 247, 255, 0.58);
        background: rgba(36, 210, 255, 0.15);
        box-shadow: 0 0 18px rgba(36, 210, 255, 0.18);
    }

    .feed-post-card {
        border-color: rgba(203, 164, 255, 0.24);
        background:
            linear-gradient(145deg, rgba(18, 13, 31, 0.84), rgba(9, 12, 26, 0.78)),
            radial-gradient(circle at 96% 0%, rgba(79, 238, 255, 0.08), transparent 34%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 15px 42px rgba(0, 0, 0, 0.48),
            0 0 0 1px rgba(255, 57, 220, 0.04);
    }

    .feed-post-card:hover {
        border-color: rgba(120, 244, 255, 0.32);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 18px 50px rgba(0, 0, 0, 0.52),
            0 0 28px rgba(255, 55, 210, 0.08);
    }

    .feed-post-card .post-top .avatar,
    .feed-post-card .post-top .avatar-fallback {
        border-color: rgba(120, 244, 255, 0.56);
        box-shadow: 0 0 16px rgba(255, 55, 210, 0.16);
    }

    .feed-post-card .post-action-like,
    .feed-post-card .post-comment-toggle {
        min-height: 34px;
        border: 1px solid rgba(120, 244, 255, 0.18);
        background: rgba(7, 11, 24, 0.48);
        color: #e7faff;
        border-radius: 999px;
        padding: 7px 11px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    .feed-post-card .post-comment-toggle:hover,
    .feed-post-card .post-action-like:hover {
        border-color: rgba(120, 244, 255, 0.48);
        background: rgba(36, 210, 255, 0.1);
        filter: none;
    }

    .feed-post-card .embed-card {
        box-shadow: 0 0 18px rgba(64, 226, 255, 0.1);
    }

    .feed-empty-card {
        padding: 0;
        overflow: hidden;
    }

    .feed-empty-card .legacy-empty-state {
        display: none;
    }

    .launch-empty-state {
        min-height: 220px;
        display: grid;
        align-content: center;
        gap: 12px;
        padding: 28px;
        border: 1px solid rgba(120, 244, 255, 0.26);
        background:
            linear-gradient(125deg, rgba(5, 8, 20, 0.94), rgba(37, 12, 57, 0.78)),
            repeating-linear-gradient(90deg, rgba(120, 244, 255, 0.06) 0 1px, transparent 1px 58px);
    }

    .launch-empty-state h2 {
        margin: 0;
        font-size: 2rem;
        line-height: 1;
    }

    .launch-empty-state p {
        max-width: 520px;
        margin: 0;
        color: #cfc6e5;
        line-height: 1.5;
    }

    .home-rightbar {
        gap: 12px;
    }

    .premium-widget {
        position: relative;
        overflow: hidden;
        padding: 14px;
        border-color: rgba(120, 244, 255, 0.2);
        background:
            linear-gradient(150deg, rgba(8, 11, 25, 0.9), rgba(25, 11, 41, 0.82)),
            radial-gradient(circle at 100% 0%, rgba(255, 61, 213, 0.16), transparent 42%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 34px rgba(0, 0, 0, 0.34);
    }

    .widget-title-row {
        display: grid;
        gap: 3px;
        margin-bottom: 9px;
    }

    .widget-title-row h3 {
        margin: 0;
        font-size: 1rem;
        color: #f7f1ff;
    }

    .premium-widget .trend-item {
        align-items: flex-start;
        padding: 10px;
        margin: 0 -4px;
        border-bottom: 1px solid rgba(120, 244, 255, 0.1);
        border-radius: 12px;
        transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }

    .premium-widget .trend-item:hover {
        transform: translateX(2px);
        background: rgba(120, 244, 255, 0.07);
        border-color: rgba(120, 244, 255, 0.22);
    }

    .premium-widget .trend-rank {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        color: #08111b;
        font-weight: 900;
        background: linear-gradient(135deg, #74f8ff, #ff55d8);
        border-color: rgba(255, 255, 255, 0.38);
        box-shadow: 0 0 16px rgba(96, 240, 255, 0.28);
    }

    .premium-widget .trend-content strong {
        color: #f8f4ff;
        font-size: .92rem;
    }

    .premium-widget .trend-content p {
        font-size: .8rem;
        line-height: 1.35;
    }

    .premium-widget .trend-metrics {
        color: #93f8ff;
    }

    .genre-trend-item {
        min-height: 48px;
    }

    .genre-trend-item .trend-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
    }

    .genre-trend-item .trend-content p {
        flex: 0 0 auto;
        margin: 0;
        color: #ffa8ec;
        font-weight: 800;
    }
}

/* Arcade expansion: brighter game-first visuals that sit inside the current app shell. */
.arcade-header {
    border-color: rgba(37, 213, 239, .2) !important;
    background:
        linear-gradient(135deg, rgba(37, 213, 239, .12), transparent 38%),
        linear-gradient(90deg, rgba(140, 255, 95, .08), rgba(255, 204, 77, .07)),
        rgba(4, 10, 14, .9) !important;
}

.arcade-header h2 {
    color: #f5fbff;
    letter-spacing: 0;
}

.arcade-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 12px !important;
}

.arcade-card {
    position: relative;
    min-height: 156px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--game-a, #25d5ef) 36%, transparent) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--game-a, #25d5ef) 28%, transparent), transparent 34%),
        radial-gradient(circle at 88% 28%, color-mix(in srgb, var(--game-c, #ffcc4d) 22%, transparent), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)),
        rgba(3, 10, 13, .9) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .32) !important;
    color: #f6fbff !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.arcade-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% 12%;
    height: 80%;
    rotate: -8deg;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--game-a, #25d5ef), var(--game-b, #8cff5f), var(--game-c, #ffcc4d));
    opacity: .16;
    pointer-events: none;
}

.arcade-card:hover,
.arcade-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--game-b, #8cff5f) 68%, transparent) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .38), 0 0 0 1px color-mix(in srgb, var(--game-a, #25d5ef) 30%, transparent) !important;
}

.arcade-card > * {
    position: relative;
    z-index: 1;
}

.arcade-card-kind {
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--game-a, #25d5ef) 38%, transparent);
    border-radius: 999px;
    padding: 3px 8px;
    color: color-mix(in srgb, var(--game-a, #25d5ef) 70%, #ffffff);
    background: rgba(255, 255, 255, .055);
    font-size: .68rem !important;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.arcade-card strong {
    color: #f8fcff;
    font-size: 1.02rem;
    line-height: 1.12;
}

.arcade-card em {
    display: -webkit-box;
    min-height: 45px;
    overflow: hidden;
    color: #aebdca;
    font-size: .78rem;
    font-style: normal;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.arcade-card-launch {
    align-self: end;
    color: color-mix(in srgb, var(--game-c, #ffcc4d) 72%, #ffffff) !important;
    font-size: .78rem !important;
    font-weight: 900;
}

.arcade-player {
    border-color: color-mix(in srgb, var(--game-a, #25d5ef) 26%, transparent) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--game-a, #25d5ef) 10%, transparent), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
        rgba(3, 9, 12, .94) !important;
}

.arcade-player-top h3 {
    color: #f8fcff;
}

.arcade-toolbar {
    border: 1px solid rgba(134, 150, 170, .18);
    border-radius: 10px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, .035);
}

.arcade-toolbar select {
    border-color: color-mix(in srgb, var(--game-a, #25d5ef) 42%, transparent) !important;
    background: rgba(3, 9, 12, .78) !important;
}

.game-stage {
    border-color: color-mix(in srgb, var(--game-a, #25d5ef) 34%, transparent) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--game-a, #25d5ef) 16%, transparent), transparent 38%),
        linear-gradient(180deg, #061018, #03070b) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045), 0 18px 40px rgba(0, 0, 0, .34) !important;
}

.game-stage:focus {
    border-color: color-mix(in srgb, var(--game-b, #8cff5f) 72%, transparent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--game-a, #25d5ef) 28%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
}

.game-focus-hint {
    color: #f7fbff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .75) !important;
}

.arcade-side > div {
    border: 1px solid rgba(134, 150, 170, .16);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, .028);
}

.arcade-side h4 {
    color: #f5fbff;
}

.arcade-score {
    border: 1px solid rgba(134, 150, 170, .16);
    border-radius: 10px;
    padding: 9px 11px;
    color: #dce7ee !important;
    background: rgba(255, 255, 255, .028);
}

.arcade-score span {
    color: color-mix(in srgb, var(--game-c, #ffcc4d) 76%, #ffffff);
}

@media (max-width: 760px) {
    .arcade-card {
        min-height: 132px;
    }
}

@media (min-width: 761px) {
    body.games-page#top:not(.studio-app-body) .layout {
        grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) !important;
    }

    body.games-page#top:not(.studio-app-body) .layout > .feed {
        grid-column: 2 !important;
    }

    body.games-page#top:not(.studio-app-body) .layout > .rightbar:empty {
        display: none !important;
    }
}

body.games-page .game-stage canvas {
    max-height: min(var(--arcade-canvas-max-height, 620px), 74vh) !important;
}

@media (max-width: 760px) {
    body.games-page .game-stage canvas {
        max-height: min(var(--arcade-canvas-max-height, 620px), 64vh) !important;
    }
}

/* Launch polish role-aware pass */
.profile-type-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.profile-type-near-name {
    margin: 4px 0 3px;
}

.profile-type-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 59, 214, .42);
    background: linear-gradient(135deg, rgba(255, 43, 214, .15), rgba(115, 247, 255, .1));
    color: #f8e9ff;
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(255, 43, 214, .16);
}

.profile-studio-link {
    border-color: rgba(115, 247, 255, .46) !important;
    background: linear-gradient(135deg, rgba(115, 247, 255, .14), rgba(255, 43, 214, .12));
    color: #e8fbff;
}

/* Launch polish sweep: platform-wide trust, discovery, and mobile tightening */
.launch-trust-strip,
.discovery-quick-strip,
.collab-primer-strip {
    display: grid;
    gap: 10px;
}

.launch-trust-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(130, 157, 190, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(11, 16, 24, .9), rgba(25, 16, 37, .82));
    box-shadow: 0 18px 46px rgba(0,0,0,.34);
}

.launch-trust-strip div,
.launch-trust-strip nav,
.discovery-quick-strip a,
.collab-primer-strip div,
.profile-launch-actions {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

.launch-trust-strip div {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.launch-trust-strip span,
.collab-primer-strip span,
.discovery-quick-strip span {
    color: #9faaba;
    font-size: .74rem;
    line-height: 1.35;
}

.launch-trust-strip strong,
.collab-primer-strip strong,
.discovery-quick-strip strong {
    color: #eef4f8;
    font-size: .92rem;
}

.launch-trust-strip p {
    margin: 0;
    color: #adb7c4;
    font-size: .78rem;
    line-height: 1.45;
}

.launch-trust-strip nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(82px, 1fr));
    gap: 6px;
    min-width: 210px;
    padding: 10px;
}

.launch-trust-strip nav a,
.trust-link-grid a,
.profile-launch-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid rgba(143, 160, 178, .28);
    border-radius: 9px;
    color: #dce7ef;
    background: rgba(12, 17, 24, .62);
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
}

.launch-trust-strip nav a:hover,
.trust-link-grid a:hover,
.profile-launch-actions a:hover {
    border-color: rgba(232, 215, 121, .46);
    background: rgba(232, 215, 121, .1);
}

.trust-link-grid,
.profile-launch-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.trust-link-grid {
    margin-top: 10px;
}

.profile-launch-actions {
    margin: 12px 0 10px;
    padding: 8px;
}

.discovery-quick-strip,
.collab-primer-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collab-primer-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.discovery-quick-strip a,
.collab-primer-strip div {
    display: grid;
    gap: 4px;
    min-height: 78px;
    padding: 12px;
}


.feed-post-card {
    position: relative;
}

.feed-post-card::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,215,121,.28), transparent);
}

.create-post-form textarea::placeholder {
    color: rgba(221, 213, 242, .58);
}

.post-actions-row {
    align-items: center;
}

.post-actions-row .report-pop {
    margin-left: auto;
}

.profile-card {
    overflow: hidden;
}

.profile-cover-wrap {
    background: rgba(0,0,0,.22);
}

.profile-social-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: center;
}

.creator-highlights-card,
.profile-media-player-card,
.profile-media-hub {
    border-color: rgba(130, 157, 190, .22);
}

@media (max-width: 980px) {
    .launch-trust-strip,
    .discovery-quick-strip,
    .collab-primer-strip {
        grid-template-columns: 1fr 1fr;
    }

    .launch-trust-strip nav {
        grid-column: 1 / -1;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .home-hero-actions,
    .hero-inline-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .launch-cta,
    .compact-action-btn,
    .edit-profile-btn,
    .menu-link.discovery-view-btn {
        min-height: 42px;
    }

    .launch-trust-strip,
    .discovery-quick-strip,
    .collab-primer-strip,
    .profile-launch-actions,
    .trust-link-grid {
        grid-template-columns: 1fr;
    }

    .launch-trust-strip {
        padding: 10px;
    }

    .launch-trust-strip nav {
        grid-template-columns: 1fr 1fr;
    }

    .profile-card {
        padding: 12px;
    }

    .profile-cover {
        height: clamp(132px, 42vw, 180px);
    }

    .profile-avatar {
        width: 96px;
        height: 96px;
    }

    .profile-identity-col {
        max-width: none;
    }

    .profile-main-content {
        padding-top: 0;
    }

    .compact-action-group,
    .discovery-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .compact-action-group form,
    .discovery-actions form,
    .compact-action-group button,
    .discovery-actions button,
    .compact-action-link {
        width: 100%;
    }

    .post-actions-row {
        gap: 8px;
    }

    .post-actions-row .report-pop {
        flex-basis: 100%;
        margin-left: 0;
    }

    .feed-tabs-card,
    .video-style-filter-card {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .feed-tabs-card form {
        min-width: 220px;
    }
}

.profile-role-wrap {
    row-gap: 6px;
}

.search-user-card .profile-type-wrap,
.suggested-user-mini .profile-type-wrap,
.discovery-stat-card .profile-type-wrap,
.collab-card .profile-type-wrap,
.follow-item .profile-type-wrap {
    margin-top: 4px;
}

.search-user-card .profile-type-pill,
.suggested-user-mini .profile-type-pill,
.discovery-stat-card .profile-type-pill,
.collab-card .profile-type-pill,
.follow-item .profile-type-pill {
    min-height: 21px;
    padding: 3px 7px;
    font-size: .64rem;
}

@media (min-width: 761px) {
    .hero-card.home-hero-card {
        position: relative;
        border-color: rgba(115, 247, 255, .38);
        box-shadow: 0 0 0 1px rgba(255, 43, 214, .1), 0 26px 70px rgba(3, 5, 14, .62), 0 0 42px rgba(115, 247, 255, .12);
    }

    .hero-card.home-hero-card::after {
        background:
            radial-gradient(circle at 82% 22%, rgba(115, 247, 255, .24), transparent 26%),
            linear-gradient(180deg, transparent 0%, rgba(255, 43, 214, .1) 48%, rgba(3, 5, 12, .58) 100%);
        opacity: 1;
    }

    .home-hero-kicker {
        color: #79f7ff;
        text-shadow: 0 0 18px rgba(115, 247, 255, .44);
    }

    .home-hero-actions {
        gap: 9px;
    }

    .launch-cta {
        min-height: 42px;
        padding: 10px 15px;
        border-radius: 10px;
        letter-spacing: 0;
    }

    .launch-cta-primary {
        border-color: rgba(115, 247, 255, .72);
        background: linear-gradient(135deg, rgba(115, 247, 255, .95), rgba(255, 43, 214, .9));
        color: #070914;
        box-shadow: 0 0 24px rgba(115, 247, 255, .22), 0 0 28px rgba(255, 43, 214, .18);
    }

    .launch-cta-secondary {
        border-color: rgba(202, 173, 255, .38);
        background: rgba(10, 8, 24, .7);
    }

    .home-hero-chips span {
        border-color: rgba(115, 247, 255, .3);
        background: rgba(4, 8, 19, .66);
        color: #e7fbff;
    }

    .feed-post-card {
        border-color: rgba(202, 173, 255, .24);
        background: radial-gradient(circle at 0 0, rgba(115, 247, 255, .06), transparent 30%), rgba(16, 12, 31, .78);
    }
}

.admin-quick-actions .menu-link,
.admin-page .admin-inline-actions .menu-link,
.admin-page button,
.admin-page .admin-filter-bar button,
.branding-upload-btn,
.feed .post-card > form button {
    cursor: pointer;
}

.admin-quick-actions .menu-link {
    min-height: 38px;
    padding: 9px 13px;
    border-color: rgba(115, 247, 255, .34);
    background: rgba(115, 247, 255, .08);
    color: #e7fbff;
    font-weight: 850;
}

.admin-section {
    border-color: rgba(202, 173, 255, .22);
    background: linear-gradient(180deg, rgba(20, 13, 39, .9), rgba(10, 8, 22, .82));
}

.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
}

.admin-filter-bar .form-control {
    flex: 1 1 220px;
}

.admin-table-wrap {
    border-radius: 12px;
    border: 1px solid rgba(202, 173, 255, .16);
    overflow: auto;
}

.admin-table {
    margin: 0;
}

.admin-page button,
.admin-page .admin-inline-actions .menu-link {
    border-color: rgba(202, 173, 255, .32);
    background: rgba(255, 255, 255, .06);
    color: #f5eaff;
}

.admin-page button:hover,
.admin-page .admin-inline-actions .menu-link:hover,
.admin-quick-actions .menu-link:hover,
.branding-upload-btn:hover {
    border-color: rgba(115, 247, 255, .58);
    box-shadow: 0 0 16px rgba(115, 247, 255, .12);
}

.admin-page .danger-btn {
    border-color: rgba(255, 79, 147, .42);
    background: rgba(255, 79, 147, .12);
    color: #ffd9e9;
}

.branding-upload-btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border-color: rgba(115, 247, 255, .38);
    color: #e7fbff;
}

.charts-page .discovery-grid {
    grid-template-columns: 1fr;
}

.charts-page .discovery-stat-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 58px;
    border-radius: 10px;
}

.charts-page .discovery-stat-card strong,
.collabs-page .collab-card strong {
    overflow-wrap: anywhere;
}

.chart-empty-state {
    grid-column: 1 / -1;
    padding: 12px;
    border: 1px dashed rgba(115, 247, 255, .28);
    border-radius: 12px;
    background: rgba(115, 247, 255, .05);
}

.launch-discovery-hero {
    min-height: 210px;
    border-color: rgba(115, 247, 255, .26);
    background:
        linear-gradient(120deg, rgba(7, 9, 22, .96), rgba(24, 9, 42, .82)),
        repeating-linear-gradient(90deg, rgba(115, 247, 255, .055) 0 1px, transparent 1px 58px);
    overflow: hidden;
}

.launch-discovery-hero h1 {
    margin-bottom: 8px;
}

.launch-discovery-hero p {
    max-width: 700px;
}

.collabs-page .collab-card {
    position: relative;
}

.collab-actions-menu {
    position: relative;
}

.collab-actions-menu summary {
    display: grid;
    place-items: center;
    min-width: 30px;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(202, 173, 255, .3);
    background: rgba(255, 255, 255, .05);
    color: #f5eaff;
    cursor: pointer;
    list-style: none;
}

.collab-actions-menu summary::-webkit-details-marker {
    display: none;
}

.collab-actions-menu > div {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    display: grid;
    min-width: 138px;
    padding: 6px;
    border: 1px solid rgba(202, 173, 255, .26);
    border-radius: 10px;
    background: rgba(9, 7, 20, .96);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
}

.collab-actions-menu a {
    padding: 8px 9px;
    border-radius: 7px;
    color: #e7fbff;
    font-size: .78rem;
    font-weight: 800;
}

.collab-actions-menu a:hover {
    background: rgba(115, 247, 255, .1);
}

@media (max-width: 760px) {
    .profile-type-pill {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .charts-page .discovery-stat-card,
    .collabs-page .collab-card-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .collab-actions-menu > div {
        right: auto;
        left: 0;
    }
}
.post-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    margin-bottom: 8px;
    color: #d8cfef;
    font-size: .95rem;
}

.post-like-form {
    margin: 0;
}

.post-action-like {
    border: 1px solid rgba(197, 155, 255, 0.35);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
    color: #efeaff;
    border-radius: 999px;
    padding: 6px 11px;
    font-weight: 700;
}

.post-action-like:hover {
    background: rgba(199, 123, 255, 0.12);
}

.post-action-like.is-liked {
    color: #ff7fc7;
    border-color: rgba(255, 126, 199, 0.65);
    background: rgba(255, 73, 176, 0.12);
}

.post-action-placeholder {
    color: #c4b9dc;
}

.post-comment-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.post-comments-panel {
    display: none;
}

.post-comments-panel.is-open {
    display: block;
    animation: commentPanelFade .16s ease-out;
}

@keyframes commentPanelFade {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

.comment-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
    max-width: 100%;
}

.comment-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: min(100%, 640px);
}

.comment-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(202, 173, 255, 0.42);
    background: rgba(255, 255, 255, 0.05);
}

.comment-avatar-fallback {
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #f5ecff;
    background: radial-gradient(circle at 30% 20%, rgba(235, 114, 255, .5), rgba(98, 54, 214, .6));
}

.comment-body {
    min-width: 0;
    flex: 1;
    background: linear-gradient(135deg, rgba(28, 23, 45, 0.9), rgba(18, 15, 33, 0.78));
    border: 1px solid rgba(202, 173, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 8px 10px;
    backdrop-filter: blur(8px);
}

.comment-head {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .8rem;
    flex-wrap: wrap;
}

.comment-head strong {
    font-weight: 800;
}

.comment-head .muted {
    margin-top: 0;
    font-size: .72rem;
    color: #a9a0bf;
}

.user-link-avatar { display: inline-flex; text-decoration: none; color: inherit; }
.user-link-name, .user-link-handle { color: inherit; text-decoration: none; }
.user-link-name:hover, .user-link-handle:hover { text-decoration: underline; }
.avatar-fallback {
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #f5ecff;
    background: radial-gradient(circle at 30% 20%, rgba(235, 114, 255, .5), rgba(98, 54, 214, .6));
}

.comment-body p {
    margin: 5px 0 0;
    font-size: .88rem;
    line-height: 1.35;
    color: #f0e8ff;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-form {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.comment-form input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px solid rgba(197, 155, 255, 0.3);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
}

.comment-form button {
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .9rem;
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
}

.ptx-project-social {
    display: block;
    margin-top: 6px;
    color: #c9bddf;
    font-size: .78rem;
    font-weight: 700;
}

.report-pop {
    margin-top: 8px;
}

.report-pop > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    user-select: none;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(193, 140, 255, 0.4);
    color: #f2eaff;
    background: linear-gradient(135deg, rgba(66, 27, 120, 0.34), rgba(29, 14, 55, 0.62));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(84, 24, 150, 0.22);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}

.report-pop > summary::-webkit-details-marker {
    display: none;
}

.report-pop > summary::after {
    content: "▾";
    font-size: .78rem;
    color: #d9bbff;
    transform: translateY(-1px);
    transition: transform .2s ease;
}

.report-pop[open] > summary::after {
    transform: rotate(180deg);
}

.report-pop > summary:hover,
.report-pop > summary:focus-visible {
    border-color: rgba(233, 178, 255, 0.88);
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(213, 145, 255, 0.35), 0 0 20px rgba(179, 81, 255, 0.58);
    transform: translateY(-1px);
}

.report-pop > summary:active {
    transform: translateY(0);
    filter: brightness(1.03);
}
.profile-report-pop > summary {
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 600;
    color: #ff95b4;
    border-color: rgba(255, 96, 152, 0.36);
    background: rgba(255, 66, 124, 0.08);
    box-shadow: none;
}
.profile-report-pop > summary:hover,
.profile-report-pop > summary:focus-visible {
    background: rgba(255, 66, 124, 0.16);
    border-color: rgba(255, 112, 165, 0.5);
    box-shadow: none;
}

.profile-status-pill {
    margin: 10px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(206, 146, 255, 0.52);
    background: linear-gradient(135deg, rgba(120, 46, 210, 0.3), rgba(26, 13, 44, 0.75));
    box-shadow: 0 0 16px rgba(176, 90, 255, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}

.profile-status-label {
    font-weight: 700;
    color: #f4ddff;
}

.profile-status-text {
    color: #efe6ff;
}

.search-status {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(193, 142, 255, 0.35);
    background: rgba(117, 54, 196, 0.18);
    color: #e9ddff;
    font-size: .82rem;
    line-height: 1.3;
    display: inline-block;
}

.report-form {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(180px, 1fr) minmax(200px, 1.2fr) auto;
    gap: 10px;
    align-items: center;
    width: min(100%, 680px);
    padding: 12px;
    border: 1px solid rgba(196, 141, 255, 0.35);
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(20, 11, 37, 0.95), rgba(10, 9, 22, 0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(7, 4, 15, 0.5);
    animation: reportFormReveal .2s ease-out;
}

.report-form select,
.report-form input,
.report-form textarea {
    width: 100%;
    font: inherit;
    min-height: 42px;
    padding: 10px 38px 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(197, 155, 255, 0.34);
    background: linear-gradient(135deg, rgba(26, 14, 48, 0.98), rgba(12, 12, 26, 0.95));
    color: #fff;
}

.report-form select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, #cb95ff 50%),
      linear-gradient(135deg, #cb95ff 50%, transparent 50%),
      linear-gradient(135deg, rgba(26, 14, 48, 0.98), rgba(12, 12, 26, 0.95));
    background-position:
      calc(100% - 16px) 52%,
      calc(100% - 11px) 52%,
      center;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
    color-scheme: dark;
}

.report-form textarea {
    resize: vertical;
}

.report-form select option {
    background: #1a0f31;
    color: #fff;
}

.report-form select:focus,
.report-form input:focus,
.report-form textarea:focus {
    outline: none;
    border-color: #cc91ff;
    box-shadow: 0 0 0 3px rgba(162, 92, 255, 0.24), 0 0 16px rgba(159, 72, 255, 0.38);
}

.report-form button {
    min-height: 42px;
    font: inherit;
    cursor: pointer;
    align-self: stretch;
    padding-inline: 16px;
    border: 1px solid rgba(216, 145, 255, 0.68);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(55, 19, 105, 0.98), rgba(23, 12, 45, 0.95));
    color: #fff;
    box-shadow: 0 0 0 1px rgba(191, 122, 255, 0.22), 0 0 18px rgba(136, 57, 235, 0.35);
}

.report-form button:hover,
.report-form button:focus-visible {
    border-color: rgba(233, 178, 255, 0.92);
    box-shadow: 0 0 0 3px rgba(162, 92, 255, 0.3), 0 0 22px rgba(158, 73, 255, 0.5);
}

@keyframes reportFormReveal {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .report-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .report-form button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .comment-item {
        width: 100%;
    }
    .comment-body {
        padding: 8px 9px;
    }
    .user-link-avatar { display: inline-flex; text-decoration: none; color: inherit; }
.user-link-name, .user-link-handle { color: inherit; text-decoration: none; }
.user-link-name:hover, .user-link-handle:hover { text-decoration: underline; }
.avatar-fallback {
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #f5ecff;
    background: radial-gradient(circle at 30% 20%, rgba(235, 114, 255, .5), rgba(98, 54, 214, .6));
}

.comment-body p {
        font-size: .84rem;
    }
}

.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 12px;
    line-height: normal;
    font-weight: 800;
    font-family: Inter, Arial, sans-serif;
    color: #fff;
    background: linear-gradient(135deg, #ff4fc8, #7c3aed);
    box-shadow: 0 6px 18px rgba(159, 80, 255, .45);
    border: 0;
    appearance: none;
    -webkit-appearance: none;
}

.notif-badge[hidden],
.notif-badge:empty {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.notification-item.is-unread {
    border-color: rgba(247, 121, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(230, 122, 255, 0.3), 0 14px 45px rgba(0, 0, 0, 0.5);
}

.notification-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.notification-actions form {
    margin: 0;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    padding: 11px 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-1), var(--purple-2), var(--purple-3));
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(129, 49, 255, 0.35);
}

.button-link:hover {
    filter: brightness(1.05);
}

.repost-meta { color:#9aa3b2; font-size:12px; margin-bottom:8px; letter-spacing:.2px; }

.edit-profile-form select,
.search-form input {
    width: 100%;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(197, 155, 255, 0.26);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.edit-profile-form select,
.search-form select {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, rgba(27, 16, 51, 0.92), rgba(21, 26, 53, 0.88));
    border-color: rgba(190, 120, 255, 0.42);
    color: #f5e9ff;
    color-scheme: dark;
}

.edit-profile-form select:focus,
.search-form select:focus {
    outline: none;
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.28), 0 0 16px rgba(103, 76, 255, 0.32);
}

.search-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid rgba(199, 110, 255, 0.35);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(23, 12, 44, 0.95), rgba(8, 19, 42, 0.9));
    box-shadow: 0 0 0 1px rgba(130, 76, 255, 0.2), 0 12px 35px rgba(74, 20, 140, 0.35);
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-field label {
    font-size: .78rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #c8baff;
    font-weight: 700;
}

.search-form select {
    width: 100%;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(197, 155, 255, 0.26);
    background: linear-gradient(135deg, rgba(27, 16, 51, 0.92), rgba(21, 26, 53, 0.88));
    color: #f5e9ff;
}


.edit-profile-form select[multiple] {
    background: linear-gradient(135deg, rgba(27, 16, 51, 0.97), rgba(21, 26, 53, 0.95));
}

.edit-profile-form select option,
.search-form select option {
    background-color: #151a35 !important;
    color: #f5e9ff !important;
}

.edit-profile-form select option:hover,
.edit-profile-form select option:focus,
.edit-profile-form select option:checked,
.edit-profile-form select option[selected],
.search-form select option:hover,
.search-form select option:focus,
.search-form select option:checked,
.search-form select option[selected] {
    background: linear-gradient(135deg, #4f7cff, #7a4cff);
    background-color: #4f7cff;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    box-shadow: inset 0 0 0 999px rgba(79, 124, 255, 0.6);
}

.search-field-button {
    min-width: 120px;
}

.search-field-button button {
    width: 100%;
}

@media (max-width: 980px) {
    .search-form {
        grid-template-columns: 1fr 1fr;
    }

    .search-field-text,
    .search-field-button {
        grid-column: span 2;
    }
}

@media (max-width: 580px) {
    .search-form {
        grid-template-columns: 1fr;
    }

    .search-field-text,
    .search-field-button {
        grid-column: auto;
    }
}

.search-user-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    margin-bottom: 10px;
}

.genre-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.genre-tag {
    font-size: .75rem;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(147, 252, 255, 0.48);
    background: rgba(34, 214, 255, 0.12);
    color: #dcfdff;
    box-shadow: inset 0 0 0 1px rgba(171, 243, 255, 0.08), 0 0 12px rgba(34, 214, 255, 0.22);
}

.genre-tag-link {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.genre-tag-link:hover {
    transform: translateY(-1px);
    border-color: rgba(173, 250, 255, 0.95);
    background: rgba(34, 214, 255, 0.2);
    box-shadow: 0 0 16px rgba(34, 214, 255, 0.35);
}
.profile-role-wrap { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.profile-role-wrap { flex-wrap: wrap; }
.profile-role-label { color: #d3c8ee; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.profile-role-pill { font-size: .82rem; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(125, 240, 255, 0.52); background: rgba(56, 222, 255, 0.16); color: #dffcff; box-shadow: 0 0 14px rgba(56, 222, 255, 0.25); }
.search-post-card { padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; margin-bottom: 10px; }

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

.choice-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.choice-pill {
    position: relative;
    display: inline-flex;
    max-width: 100%;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-pill span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(134, 150, 170, 0.24);
    background: rgba(255, 255, 255, 0.035);
    color: #dce6ef;
    box-shadow: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.choice-pill input:checked + span {
    border-color: rgba(37, 213, 239, 0.62);
    background: rgba(37, 213, 239, 0.12);
    color: #e7fdff;
    box-shadow: inset 3px 0 0 rgba(37, 213, 239, 0.72);
}

.profile-choice-section {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(134, 150, 170, .16);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(37, 213, 239, .035), transparent 38%),
        rgba(6, 10, 15, .58);
}

.profile-choice-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
    gap: 14px;
    align-items: end;
}

.profile-choice-head h3 {
    margin: 0 0 4px;
    color: #f6fbff;
    font-size: 1rem;
}

.profile-choice-head p {
    margin: 0;
}

.profile-choice-search {
    width: 100%;
    min-width: 0;
}

.profile-choice-groups {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.choice-group {
    display: grid;
    gap: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(134, 150, 170, .14);
    border-radius: 10px;
    background: rgba(2, 7, 12, .36);
    overflow: hidden;
}

.choice-group-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 0;
    padding: 10px 12px;
    color: #e7f5f9;
    background: rgba(255, 255, 255, .025);
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}

.choice-group-toggle:hover,
.choice-group-toggle:focus-visible {
    background: rgba(37, 213, 239, .055);
    box-shadow: none;
}

.choice-group-toggle span {
    min-width: 0;
    overflow: hidden;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choice-group-toggle em {
    color: #8edfed;
    font-size: .72rem;
    font-style: normal;
    font-weight: 760;
    white-space: nowrap;
}

.choice-group-toggle i {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    justify-self: center;
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.choice-group.is-open .choice-group-toggle i {
    transform: rotate(225deg);
}

.choice-group .choice-pill-grid {
    padding: 0 12px 12px;
}

.choice-group .choice-pill-grid[hidden] {
    display: none;
}

.sr-only {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

@media (max-width: 760px) {
    .profile-choice-section {
        padding: 12px;
    }

    .profile-choice-head {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .choice-group {
        border-radius: 9px;
    }

    .choice-group-toggle {
        grid-template-columns: minmax(0, 1fr) auto 16px;
        min-height: 40px;
        padding: 9px 10px;
    }

    .choice-group-toggle em {
        font-size: .68rem;
    }

    .choice-pill-grid {
        gap: 6px;
    }

    .choice-pill span {
        padding: 6px 9px;
        font-size: .82rem;
    }
}

.social-input {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(204, 156, 255, 0.24);
    background: rgba(144, 69, 236, 0.06);
}

.social-label {
    font-size: 0.85rem;
    color: #d8cbf9;
}

.profile-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.social-link-btn {
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(198, 151, 255, 0.45);
    background: rgba(137, 56, 236, 0.18);
    color: #f3e7ff;
    box-shadow: 0 0 14px rgba(187, 102, 255, 0.2);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    font-size: .78rem;
    line-height: 1;
    overflow: hidden;
}

.social-link-icon {
    display: flex;
    width: 18px;
    height: 18px;
    line-height: 0;
    align-items: center;
    justify-content: center;
}
.social-link-icon svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    display: block;
    flex: 0 0 18px;
}

.social-link-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(234, 176, 255, 0.88);
    box-shadow: 0 0 18px rgba(234, 128, 255, 0.5);
}

.social-youtube { border-color: rgba(255, 86, 100, 0.82); background: rgba(255, 32, 54, 0.2); color: #ffeef1; }
.social-tiktok { border-color: rgba(129, 241, 255, 0.88); background: rgba(18, 18, 18, 0.62); color: #e8fdff; }
.social-soundcloud { border-color: rgba(255, 173, 86, 0.82); background: rgba(255, 103, 31, 0.2); color: #fff2e6; }
.social-instagram { border-color: rgba(255, 148, 215, 0.82); background: rgba(204, 64, 255, 0.22); color: #fff0fd; }
.social-facebook { border-color: rgba(137, 189, 255, 0.82); background: rgba(29, 91, 255, 0.24); color: #ecf3ff; }
.social-spotify { border-color: rgba(130, 255, 163, 0.82); background: rgba(25, 189, 98, 0.24); color: #effff2; }
.social-bandcamp { border-color: rgba(152, 236, 255, 0.82); background: rgba(0, 138, 176, 0.24); color: #ecfcff; }
.social-x { border-color: rgba(220, 220, 230, 0.82); background: rgba(41, 41, 52, 0.45); color: #f7f7ff; }
.social-mixcloud { border-color: rgba(255, 179, 109, 0.85); background: rgba(255, 120, 35, 0.22); color: #fff3e8; }
.social-beatport { border-color: rgba(172, 255, 144, 0.85); background: rgba(58, 191, 59, 0.24); color: #efffe7; }
.social-audiomack { border-color: rgba(255, 210, 120, 0.85); background: rgba(255, 165, 34, 0.24); color: #fff8e8; }
.social-apple-music { border-color: rgba(255, 130, 191, 0.85); background: rgba(237, 64, 122, 0.25); color: #fff0f7; }
.social-deezer { border-color: rgba(162, 189, 255, 0.85); background: rgba(92, 118, 255, 0.24); color: #edf0ff; }
.social-tidal { border-color: rgba(227, 227, 227, 0.85); background: rgba(73, 73, 73, 0.35); color: #fcfcfc; }
.social-twitch { border-color: rgba(185, 142, 255, 0.9); background: rgba(123, 57, 239, 0.26); color: #f6ecff; }
.social-website { border-color: rgba(136, 242, 255, 0.85); background: rgba(26, 166, 196, 0.24); color: #ecfdff; }

@media (max-width: 760px) {
    .social-input-grid {
        grid-template-columns: 1fr;
    }
}

.music-upload-form { display: grid; gap: 8px; margin-top: 12px; max-width: 420px; }
.music-upload-form label { display: grid; gap: 8px; color: #e8defe; }
.music-upload-form input[type="text"],
.music-upload-form input[type="url"],
.music-upload-form select { max-width: 360px; width: 100%; }
.music-upload-form .music-upload-file-row { gap: 6px; }
.music-upload-form input[type="file"] { max-width: 360px; width: 100%; }
.music-upload-form button { width: auto; justify-self: start; padding-inline: 16px; }
.rights-confirmation-box {
    display: grid;
    gap: 10px;
    max-width: 520px;
    padding: 12px;
    border: 1px solid rgba(255, 196, 87, .32);
    border-radius: 12px;
    background: rgba(255, 196, 87, .07);
}
.rights-confirmation-box p {
    margin: 0;
    color: #e6d7b8;
    font-size: .9rem;
    line-height: 1.45;
}
.checkbox-line {
    grid-template-columns: auto 1fr !important;
    align-items: center;
}
.upload-success { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(37, 236, 156, .12); border: 1px solid rgba(111, 255, 199, .45); color: #d9ffe9; }
.music-track-list { display: grid; gap: 12px; margin-top: 12px; }
.music-player-card { background: linear-gradient(135deg, rgba(16, 12, 29, 0.95), rgba(10, 8, 20, 0.95)); border: 1px solid rgba(202, 173, 255, 0.25); border-radius: 14px; padding: 12px; box-shadow: inset 0 0 30px rgba(113, 33, 255, 0.12); max-width: 100%; }
.music-player-card audio { width: 100%; margin-top: 8px; filter: hue-rotate(275deg) saturate(1.1); }
.music-meta { display: grid; gap: 4px; }
.intro-player { max-width: 280px; width: 100%; margin-top: 0; }
.intro-track-form { margin-top: 8px; }
.set-intro-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(197, 155, 255, 0.3); box-shadow: none; }
.profile-media-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.profile-media-toggle { width: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(197, 155, 255, 0.35); background: rgba(255, 255, 255, 0.04); color: #efeaff; box-shadow: none; font-weight: 700; }
.profile-media-toggle.is-placeholder { opacity: .65; cursor: not-allowed; }
.profile-media-panel { margin-top: 8px; }
.profile-media-panel[hidden] { display: none !important; }

.success { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(50, 200, 120, .15); border: 1px solid rgba(80, 240, 150, .35); color: #ddffe9; }
.admin-filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px; }
.admin-filter-bar input, .admin-filter-bar select { flex:1; min-width:180px; padding:10px 12px; border-radius:12px; border:1px solid rgba(197,155,255,0.26); background:rgba(255,255,255,0.04); color:var(--text); }
.admin-table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th, .admin-table td { padding:8px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align:top; }
.admin-item { border-top:1px solid #2a2a2a; padding:10px 0; display:grid; gap:6px; }
@media (max-width: 900px) { .admin-filter-bar input { min-width: 100%; } }

@media (max-width: 760px) {
    .music-upload-form { max-width: 100%; }
    .music-upload-form input[type="text"],
    .music-upload-form input[type="url"],
    .music-upload-form input[type="file"],
    .music-upload-form select,
    .music-upload-form button,
    .intro-player, .profile-identity-col { max-width: 100%; width: 100%; justify-self: stretch; }
    .profile-media-toggle { width: 100%; text-align: center; }
}


.genre-tags-wrap{margin-top:6px}
.genre-tags{display:flex;gap:6px;flex-wrap:wrap;max-height:none;overflow:hidden}
.genre-tags.is-collapsed{max-height:60px}
.genre-toggle-btn{margin-top:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(197,155,255,.35);background:rgba(255,255,255,.04);color:#efeaff}
.profile-main-content{min-width:0;padding-top:10px}
.profile-identity-col{max-width:240px}
.intro-player{max-width:240px;width:100%;margin-top:0}
.profile-media-hub{margin-top:10px}
.profile-intro-card{margin-top:10px;padding:14px 16px;border:1px solid rgba(202,173,255,.32);background:radial-gradient(circle at 22% 8%, rgba(205,88,255,.18), transparent 48%),linear-gradient(135deg, rgba(14,10,29,.96), rgba(8,10,23,.96));box-shadow:inset 0 0 30px rgba(136,39,255,.12),0 0 25px rgba(107,35,220,.16)}
.profile-intro-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.profile-intro-head h3{margin:0;color:#f4ecff;font-size:1rem}
.profile-intro-body{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;position:relative}
.profile-intro-player{display:flex;align-items:center;gap:12px;flex:1 1 100%;min-width:260px;position:relative;z-index:2}
.profile-intro-player audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.intro-play-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(225,173,255,.7);background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(141,62,255,.48) 60%, rgba(46,18,92,.95));display:grid;place-items:center;box-shadow:0 0 16px rgba(180,106,255,.42);color:#fff;cursor:pointer;flex:0 0 auto}
.intro-play-icon{position:relative;display:block;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #fff;margin-left:4px}
.intro-play-icon.is-pause{width:14px;height:16px;border:0;margin-left:0;background:linear-gradient(90deg,#fff 0 4px,transparent 4px 8px,#fff 8px 12px)}
.intro-player-details{display:grid;gap:8px;min-width:180px;flex:1 1 auto;align-items:start;justify-items:center}
.intro-time{font-size:.82rem;color:#d8c8f3}

.intro-wave-strip{display:block;width:clamp(70%,80vw,85%);height:84px;border-radius:14px;border:1px solid rgba(96,156,255,.5);background:radial-gradient(circle at 50% 40%, rgba(23,40,81,.78), rgba(5,8,20,.95) 64%),linear-gradient(135deg, rgba(23,10,45,.3), rgba(7,17,44,.2));box-shadow:inset 0 0 25px rgba(66,114,255,.25),0 0 28px rgba(89,169,255,.28),0 0 48px rgba(164,68,255,.2)}
.intro-progress{width:100%;appearance:none;height:6px;border-radius:999px;background:rgba(255,255,255,.16);outline:none}
.intro-progress::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#f3deff;border:1px solid rgba(120,58,255,.9);box-shadow:0 0 10px rgba(182,102,255,.7)}
.intro-progress::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#f3deff;border:1px solid rgba(120,58,255,.9);box-shadow:0 0 10px rgba(182,102,255,.7)}
.neon-orbit-visualizer{position:absolute;left:50%;top:50%;width:clamp(72%,84vw,88%);height:124px;transform:translate(-50%,-50%);margin:0;pointer-events:none;z-index:1;transition:opacity .3s ease, filter .35s ease}
.intro-ambient-glow{position:absolute;left:50%;top:50%;width:88%;height:150%;transform:translate(-50%,-50%) scale(.95);border-radius:50%;opacity:.34;background:radial-gradient(circle at 35% 42%, rgba(166,103,255,.52), rgba(93,148,255,.26) 42%, rgba(35,70,168,.12) 66%, rgba(9,13,33,0) 84%);filter:blur(48px);transition:opacity .3s ease, transform .3s ease, filter .3s ease}
.intro-holo-disc{position:absolute;right:2%;top:50%;width:clamp(76px,8vw,102px);aspect-ratio:1/1;transform:translateY(0) rotate(0deg) scale(1);transform-origin:50% 50%;border-radius:50%;opacity:.56;background:radial-gradient(circle at 28% 24%, rgba(233,251,255,.48), rgba(137,192,255,.22) 34%, rgba(78,80,211,.16) 58%, rgba(27,27,70,.1) 76%, rgba(22,12,42,.34) 100%);border:1px solid rgba(165,213,255,.44);box-shadow:0 0 24px rgba(102,193,255,.26), inset 0 0 24px rgba(187,130,255,.18), inset 0 0 0 1px rgba(229,245,255,.16);backdrop-filter:blur(1.2px)}
.intro-disc-core{position:absolute;left:50%;top:50%;width:27%;height:27%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle, rgba(232,246,255,.62), rgba(153,192,255,.2) 62%, rgba(95,76,201,.24) 100%);box-shadow:0 0 10px rgba(181,228,255,.32)}
.intro-disc-ring{position:absolute;left:50%;top:50%;width:118%;height:118%;transform:translate(-50%,-50%) scale(1);border-radius:50%;border:1px solid rgba(143,213,255,.52);box-shadow:0 0 16px rgba(99,183,255,.32), inset 0 0 14px rgba(156,112,255,.2);opacity:.3;transition:transform .2s linear, opacity .2s linear}
.neon-orbit-visualizer.is-playing{filter:saturate(1.16) brightness(1.05)}
.profile-media-tabs{margin-top:0}
.profile-media-toggle.is-active{background:rgba(175,95,255,.22);border-color:rgba(222,161,255,.75)}
.compact-upload-form input[type="text"],.compact-upload-form input[type="file"],.shared-video-form input[type="text"],.shared-video-form input[type="url"]{max-width:360px;width:100%;padding:10px 12px;border:1px solid rgba(197,155,255,.3);background:linear-gradient(135deg, rgba(27,16,51,.92), rgba(21,26,53,.88));color:#f5e9ff;border-radius:12px}
.compact-upload-form button,.shared-video-form button{width:auto;justify-self:start}
.shared-video-form{display:grid;gap:8px;max-width:420px;margin-bottom:10px}
.shared-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.shared-video-card{padding:10px;border:1px solid rgba(202,173,255,.25);border-radius:12px;background:linear-gradient(135deg, rgba(16,12,29,.95), rgba(10,8,20,.95));display:grid;gap:8px;align-content:start}
.shared-video-card iframe{width:min(100%,520px);aspect-ratio:16/9;border:0;border-radius:10px}
.profile-picture-upload-form{display:grid;gap:8px;max-width:420px;margin-bottom:12px}
.profile-picture-upload-form input[type="text"],.profile-picture-upload-form input[type="file"]{max-width:360px;width:100%;padding:10px 12px;border:1px solid rgba(197,155,255,.3);background:linear-gradient(135deg, rgba(27,16,51,.92), rgba(21,26,53,.88));color:#f5e9ff;border-radius:12px}
.profile-picture-upload-form button{width:auto;justify-self:start}
.profile-picture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,190px));justify-content:start;gap:12px;margin-top:8px}
.profile-picture-card{padding:10px;border:1px solid rgba(202,173,255,.3);border-radius:14px;background:linear-gradient(135deg, rgba(16,12,29,.95), rgba(10,8,20,.95));box-shadow:0 0 0 1px rgba(255,43,214,.12),0 10px 24px rgba(64,20,93,.3);display:grid;gap:8px}
.profile-picture-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid rgba(202,173,255,.28);display:block}
.profile-picture-caption{margin:0;font-size:.9rem;color:#efe6ff;line-height:1.35;word-break:break-word}
.profile-picture-actions{margin-top:2px}
.profile-picture-actions .danger-btn{width:auto}
.profile-picture-lightbox-trigger{display:block}

.picture-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,3,12,.78);backdrop-filter:blur(10px);z-index:1200}
.picture-lightbox.is-open{display:flex}
.picture-lightbox-dialog{position:relative;width:min(96vw,980px);max-height:92vh;border:1px solid rgba(198,155,255,.35);border-radius:20px;background:linear-gradient(160deg,rgba(18,12,33,.95),rgba(7,11,29,.94));box-shadow:0 18px 80px rgba(105,46,150,.45);padding:22px;display:grid;justify-items:center;gap:12px}
.picture-lightbox-image{max-width:100%;max-height:70vh;object-fit:contain;border-radius:12px;border:1px solid rgba(224,181,255,.3);background:rgba(6,6,16,.75)}
.picture-lightbox-close,.picture-lightbox-prev,.picture-lightbox-next{position:absolute;border:1px solid rgba(203,165,255,.5);background:rgba(25,17,45,.82);color:#f5e9ff;width:42px;height:42px;border-radius:999px;display:grid;place-items:center;font-size:1.45rem;line-height:1;cursor:pointer}
.picture-lightbox-close{top:10px;right:10px}
.picture-lightbox-prev{top:50%;left:12px;transform:translateY(-50%)}
.picture-lightbox-next{top:50%;right:12px;transform:translateY(-50%)}
.picture-lightbox-caption{width:100%;padding:0 52px;color:#f6ebff;text-align:center}
.picture-lightbox-caption p{margin:0}
.picture-lightbox-caption p:last-child{margin-top:6px;color:#bca7de;font-size:.92rem}
body.lightbox-open{overflow:hidden}
.video-lightbox-media{width:min(96vw,980px);max-width:100%}
.video-lightbox-frame-wrap{position:relative;width:min(100%,860px);aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid rgba(224,181,255,.3);background:rgba(6,6,16,.75)}
.video-lightbox-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shared-video-card [data-video-trigger]{margin-top:4px}


.profile-intro-upload-card{margin-top:14px;padding:14px;border:1px solid rgba(202,173,255,.3);border-radius:14px;background:linear-gradient(135deg, rgba(14,11,28,.96), rgba(8,10,22,.96));display:grid;gap:8px;max-width:520px;box-shadow:0 0 22px rgba(154,68,255,.16);}
.profile-intro-upload-card h3{margin:0;color:#f2e8ff;}
.profile-intro-upload-card input[type="text"],.profile-intro-upload-card input[type="file"]{max-width:420px;width:100%;padding:10px 12px;border:1px solid rgba(197,155,255,.3);background:linear-gradient(135deg, rgba(27,16,51,.92), rgba(21,26,53,.88));color:#f5e9ff;border-radius:12px;}
.profile-media-player-card{margin-top:12px;padding:10px 12px;border:1px solid rgba(202,173,255,.3);background:radial-gradient(circle at 18% 12%, rgba(149,72,255,.15), transparent 40%),linear-gradient(135deg, rgba(13,10,28,.96), rgba(7,11,24,.95));position:relative;overflow:hidden}
.profile-player-main{display:grid;gap:8px;position:relative;overflow:hidden}
.profile-player-ambient{--ambient-energy:0;position:absolute;left:5%;right:5%;top:34px;height:150px;border-radius:999px;background:radial-gradient(circle, rgba(196,109,255,.58) 0%, rgba(108,224,255,.38) 44%, rgba(13,11,24,0) 78%);filter:blur(20px);opacity:calc(.28 + (var(--ambient-energy) * .72));transform:scale(calc(.94 + (var(--ambient-energy) * .12)));transition:opacity .14s linear, transform .14s linear;pointer-events:none;z-index:0}
.profile-player-ambient.is-playing{opacity:calc(.4 + (var(--ambient-energy) * .72));animation:profilePlayerPulse 1.25s ease-in-out infinite alternate}
@keyframes profilePlayerPulse{from{transform:scale(.93)}to{transform:scale(1.03)}}
.profile-player-controls,.profile-player-title-wrap,.profile-player-progress-wrap,.profile-player-embed,.profile-player-queue-wrap{position:relative;z-index:1}
.profile-player-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.profile-player-btn{border:1px solid rgba(197,155,255,.35);background:rgba(255,255,255,.06);width:31px;height:31px;padding:0;border-radius:50%;font-size:.78rem;line-height:1;box-shadow:none}
.profile-player-btn-main{width:36px;height:36px;font-size:.95rem}
.profile-player-btn.is-active{background:rgba(175,95,255,.25);border-color:rgba(229,187,255,.84)}
.profile-player-title-wrap{display:grid;gap:6px}
.profile-player-title{font-weight:700;color:#f5efff;line-height:1.2;font-size:.88rem}
.profile-player-source{font-size:.78rem;color:#cfbde9;display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:2px 9px;border-radius:999px;border:1px solid rgba(197,155,255,.28);background:rgba(98,57,173,.24)}
.profile-player-progress-wrap{display:grid;gap:6px}
.profile-player-embed{position:relative;width:min(100%,520px);height:0;padding-top:56.25%;border-radius:12px;overflow:hidden;border:1px solid rgba(170,149,255,.32);background:rgba(5,7,18,.92);justify-self:start}
.profile-player-embed iframe,.profile-player-youtube-host{position:absolute;inset:0;width:100%;height:100%;border:0}
.profile-player-queue-wrap{display:grid;gap:8px}
.profile-player-queue{display:flex;flex-wrap:wrap;gap:8px;max-height:220px;overflow:auto;padding-right:2px;transition:max-height .2s ease}
.profile-player-queue.is-collapsed{max-height:88px;overflow:hidden}
.profile-player-queue.is-expanded{max-height:380px;overflow:auto}
.profile-player-queue-item{flex:0 1 min(220px,100%);max-width:220px;display:grid;grid-template-columns:1fr;gap:3px;text-align:left;border:1px solid rgba(197,155,255,.24);background:rgba(255,255,255,.03);border-radius:10px;padding:7px 9px;box-shadow:none}
.profile-player-queue-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;font-size:.77rem;font-weight:700;line-height:1.25;word-break:break-word;color:#f3ebff}
.profile-player-queue-source{display:inline-flex;align-items:center;width:fit-content;padding:1px 7px;border-radius:999px;border:1px solid rgba(197,155,255,.35);color:#dcc7f8;font-size:.64rem;letter-spacing:.02em;justify-self:start}
.profile-player-queue-desc{display:block;color:#bda8d9;font-size:.68rem;line-height:1.22;word-break:break-word}
.profile-player-queue-desc.is-prominent{color:#f0dfff;font-size:.72rem;font-weight:600}
.profile-player-queue-item.is-active{border-color:rgba(227,177,255,.82);background:rgba(166,82,255,.17);box-shadow:0 0 14px rgba(182,90,255,.22)}
.profile-player-queue-toggle{justify-self:start;border:1px solid rgba(197,155,255,.3);background:rgba(255,255,255,.06);color:#f1e6ff;padding:5px 11px;border-radius:999px;font-size:.72rem}
.shared-video-description{margin:2px 0 8px;color:#d9c6f1;font-size:.84rem;line-height:1.35}

@media (max-width:760px){
    .profile-intro-body{justify-content:center}
    .profile-intro-player{min-width:100%;flex:1 1 100%}
    .intro-wave-strip{width:min(92%,520px);height:72px}
    .neon-orbit-visualizer{width:min(94%,520px);height:98px;top:52%}
    .profile-player-controls{justify-content:center}
    .profile-player-queue{justify-content:center}
}

.messages-layout {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    min-height: min(760px, calc(100vh - 118px));
}
.messages-sidebar {
    border-right: 1px solid rgba(255, 255, 255, .1);
    padding-right: 10px;
    overflow: auto;
    max-height: calc(100vh - 260px);
    overscroll-behavior: contain;
}
.conversation-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-width: 0;
    gap: 6px;
    margin-bottom: 6px;
    border: 1px solid rgba(134, 150, 170, .14);
    border-radius: 8px;
    padding: 7px 8px;
    background: rgba(2, 7, 12, .54);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.conversation-link:hover,
.conversation-link.active {
    border-color: rgba(37, 213, 239, .34);
    background: rgba(4, 10, 15, .86);
}
.conversation-link.has-unread {
    border-color: rgba(37, 213, 239, .32);
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .075), rgba(2, 7, 12, .52)),
        rgba(2, 7, 12, .72);
}
.conversation-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}
.conversation-avatar-wrap {
    position: relative;
    width: 34px;
    min-width: 34px;
}
.conversation-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    min-height: 34px;
    max-height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(221, 197, 255, 0.6);
}
.messages-layout img.conversation-avatar,
.thread-header img.conversation-avatar,
.conversation-link img.conversation-avatar {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: cover;
    border-radius: 50%;
}
.conversation-text {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
}
.conversation-topline,
.conversation-subline {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}
.conversation-topline strong {
    min-width: 0;
    overflow: hidden;
    color: #f7fbff;
    font-size: .82rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-time {
    flex: 0 0 auto;
    margin-left: auto;
    color: #788b9e;
    font-size: .62rem;
    font-weight: 750;
    white-space: nowrap;
}
.conversation-handle {
    min-width: 0;
    overflow: hidden;
    color: #8fa2b5;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-preview {
    display: flex;
    align-items: center;
    min-width: 0;
    color: #aebccd;
    font-size: .72rem;
    line-height: 1.25;
}
.conversation-preview span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-preview-call span,
.conversation-preview-image span,
.conversation-preview-scent span {
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(37, 213, 239, .18);
    border-radius: 999px;
    padding: 1px 6px;
    background: rgba(37, 213, 239, .055);
    color: #d8f8ff;
    font-size: .66rem;
    font-weight: 820;
}
.conversation-preview-image span {
    border-color: rgba(166, 255, 122, .22);
    background: rgba(166, 255, 122, .06);
}
.conversation-preview-scent span {
    border-color: rgba(255, 197, 67, .24);
    background: rgba(255, 197, 67, .07);
}
.conversation-unread {
    align-self: start;
    min-width: 20px;
    border-radius: 999px;
    padding: 3px 6px;
    background: #25d5ef;
    color: #001016;
    font-size: .64rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 18px rgba(37, 213, 239, .24);
}
.messages-thread { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.thread-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(37, 213, 239, .14);
    border-radius: 10px;
    padding: 9px 10px;
    min-width: 0;
    background: rgba(3, 8, 13, .94);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
}
.thread-header > div { min-width: 0; }
.thread-peer-summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
}
.thread-peer-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.message-thread-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.thread-header .user-link-name,
.thread-header .user-link-handle { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.message-bubbles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 280px;
    max-height: calc(100vh - 410px);
    overflow: auto;
    padding: 4px 4px 4px 0;
    overscroll-behavior: contain;
}
.message-bubble { max-width: min(78%, 680px); padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(196,149,255,.24); }
.message-bubble.mine { margin-left: auto; background: linear-gradient(145deg, rgba(191, 63, 255, .4), rgba(104, 35, 191, .35)); box-shadow: 0 0 20px rgba(146, 54, 231, .32); }
.message-bubble.theirs { background: linear-gradient(145deg, rgba(39, 29, 66, .9), rgba(22, 16, 38, .95)); }
.message-body { white-space: pre-wrap; word-break: break-word; }
.message-time { margin-top: 8px; font-size: .75rem; }
.message-form { display: grid; gap: 8px; }
.message-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(197,155,255,.3);
    background: linear-gradient(135deg, rgba(27,16,51,.92), rgba(21,26,53,.88));
    color: var(--text);
    outline: none;
}
.message-form textarea:focus {
    border-color: #25d5ef;
    box-shadow: 0 0 0 3px rgba(37, 213, 239, .12);
}
.message-form-row { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 980px) {
    .messages-layout { grid-template-columns: 1fr; }
    .messages-sidebar { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-right: 0; padding-bottom: 8px; max-height: 260px; }
    .messages-sidebar .conversation-link { padding: 7px 8px; margin-bottom: 6px; }
}

body#top:not(.studio-app-body) .messages-command-layout {
    overflow: hidden;
    border-color: rgba(37, 213, 239, .18) !important;
    background:
        linear-gradient(180deg, rgba(37, 213, 239, .035), rgba(255, 255, 255, .006)),
        rgba(3, 8, 13, .88) !important;
}

body#top:not(.studio-app-body) .messages-command-strip,
body#top:not(.studio-app-body) .messages-layout-alert {
    grid-column: 1 / -1;
}

body#top:not(.studio-app-body) .messages-command-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 16px;
    align-items: end;
    padding: 2px 2px 12px;
    border-bottom: 1px solid rgba(37, 213, 239, .14);
}

body#top:not(.studio-app-body) .messages-command-strip h2 {
    margin: 4px 0;
    color: #f7fbff;
    font-size: clamp(1.65rem, 3vw, 2.8rem);
    letter-spacing: 0;
}

body#top:not(.studio-app-body) .messages-command-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: end;
}

body#top:not(.studio-app-body) .messages-command-tools span,
body#top:not(.studio-app-body) .messages-profile-jump,
body#top:not(.studio-app-body) .messages-new-jump,
body#top:not(.studio-app-body) .message-scent-control,
body#top:not(.studio-app-body) .message-file-control {
    border: 1px solid rgba(37, 213, 239, .22);
    border-radius: 8px;
    background: rgba(2, 7, 12, .58);
    color: #d8f8ff;
    box-shadow: none;
}

body#top:not(.studio-app-body) .messages-command-tools span {
    padding: 8px 10px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

body#top:not(.studio-app-body) .messages-command-tools strong {
    color: #fff;
}

body#top:not(.studio-app-body) .messages-search-wrap {
    display: grid;
    gap: 4px;
    color: #8fa2b5;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body#top:not(.studio-app-body) .messages-search-wrap input {
    width: 100%;
    min-height: 38px;
    border-radius: 8px;
}

body#top:not(.studio-app-body) .messages-profile-jump {
    padding: 8px 11px;
    color: #d8f8ff;
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

body#top:not(.studio-app-body) .message-call-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
}

body#top:not(.studio-app-body) .message-call-actions button {
    min-height: 36px;
    border: 1px solid rgba(37, 213, 239, .3);
    border-radius: 8px;
    padding: 8px 12px;
    background:
        linear-gradient(180deg, rgba(37, 213, 239, .14), rgba(255, 255, 255, .02)),
        rgba(2, 7, 12, .72);
    color: #e8fbff;
    font-size: .78rem;
    font-weight: 900;
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
}

body#top:not(.studio-app-body) .message-call-actions button[data-call-start="video"] {
    border-color: rgba(166, 255, 122, .3);
    background:
        linear-gradient(180deg, rgba(166, 255, 122, .11), rgba(255, 255, 255, .02)),
        rgba(2, 7, 12, .72);
}

body#top:not(.studio-app-body) .messages-new-jump {
    align-self: center;
    width: fit-content;
    margin: -44px auto 0;
    padding: 7px 12px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

body#top:not(.studio-app-body) .enhanced-message-form {
    border-top: 1px solid rgba(37, 213, 239, .12);
    padding-top: 9px;
}

body#top:not(.studio-app-body) .message-compose-tools {
    display: grid;
    grid-template-columns: minmax(160px, 210px) auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

body#top:not(.studio-app-body) .message-scent-control,
body#top:not(.studio-app-body) .message-file-control {
    display: grid;
    gap: 4px;
    padding: 7px 9px;
    color: #8edfed;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body#top:not(.studio-app-body) .message-scent-control select {
    min-height: 30px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: .8rem;
    text-transform: none;
    letter-spacing: 0;
}

body#top:not(.studio-app-body) .message-file-control {
    cursor: pointer;
    min-height: 54px;
    place-content: center;
}

body#top:not(.studio-app-body) .message-file-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

body#top:not(.studio-app-body) .message-file-name {
    min-width: 0;
    color: #8fa2b5;
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#top:not(.studio-app-body) .message-char-count {
    color: #8edfed;
    font-size: .78rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

body#top:not(.studio-app-body) .message-char-count.is-near-limit {
    color: #ffc543;
}

body#top:not(.studio-app-body) .message-attachment-preview {
    width: min(170px, 100%);
    overflow: hidden;
    border: 1px solid rgba(37, 213, 239, .18);
    border-radius: 8px;
    background: rgba(2, 7, 12, .58);
}

body#top:not(.studio-app-body) .message-attachment-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

body#top:not(.studio-app-body) .message-scent-badge {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 7px;
    border: 1px solid rgba(37, 213, 239, .3);
    border-radius: 999px;
    padding: 4px 9px;
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .12), rgba(140, 255, 95, .06)),
        rgba(2, 7, 12, .62);
    color: #d8f8ff;
    font-size: .72rem;
    font-weight: 850;
}

body#top:not(.studio-app-body) .message-form button:disabled {
    cursor: wait;
    opacity: .68;
}

body#top:not(.studio-app-body) .messages-layout .avatar-fallback,
body#top:not(.studio-app-body) .messages-layout .conversation-avatar.avatar-fallback {
    border-color: rgba(37, 213, 239, .34);
    background:
        linear-gradient(135deg, rgba(37, 213, 239, .34), rgba(3, 8, 13, .96)),
        #071019;
    color: #f7fdff;
    box-shadow: none;
}

body#top:not(.studio-app-body) .messages-layout .conversation-link.active,
body#top:not(.studio-app-body) .messages-layout .conversation-link:hover {
    border-color: rgba(37, 213, 239, .34) !important;
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .08), transparent 42%),
        rgba(4, 10, 15, .88) !important;
    box-shadow: inset 3px 0 0 rgba(37, 213, 239, .76) !important;
}

body#top:not(.studio-app-body) .messages-layout .message-bubble.mine {
    border-color: rgba(37, 213, 239, .22) !important;
    background:
        linear-gradient(180deg, rgba(37, 213, 239, .1), rgba(255, 255, 255, .01)),
        rgba(8, 17, 24, .94) !important;
    box-shadow: none !important;
}

body#top:not(.studio-app-body) .messages-layout .message-bubble.theirs {
    border-color: rgba(134, 150, 170, .16) !important;
    background: rgba(7, 11, 17, .9) !important;
}

.message-call-dock {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 12000;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 28px));
    border: 1px solid rgba(37, 213, 239, .26);
    border-radius: 10px;
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(37, 213, 239, .055), rgba(255, 255, 255, .01)),
        rgba(1, 5, 9, .96);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .48);
}

.message-call-dock[hidden] {
    display: none;
}

.message-call-dock.is-minimized {
    width: min(300px, calc(100vw - 28px));
    cursor: pointer;
}

.message-call-dock.is-minimized .message-call-stage,
.message-call-dock.is-minimized .message-call-controls,
.message-call-dock.is-minimized .message-call-debug {
    display: none;
}

.message-call-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}

.message-call-head span,
.message-call-head strong {
    display: block;
}

.message-call-head span {
    color: #8edfed;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.message-call-head strong {
    color: #f7fbff;
}

.message-call-head button {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 8px;
}

.message-call-stage {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid rgba(134, 150, 170, .16);
    border-radius: 9px;
    background:
        radial-gradient(circle at 24% 20%, rgba(37, 213, 239, .16), transparent 28%),
        linear-gradient(135deg, #03080d, #08111a);
}

.message-call-stage video {
    background: #02060a;
}

#message-remote-video {
    display: block;
    width: 100%;
    min-height: 190px;
    object-fit: cover;
    transform: none;
}

#message-local-video {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 116px;
    height: 72px;
    border: 1px solid rgba(37, 213, 239, .3);
    border-radius: 8px;
    object-fit: cover;
    transform: none;
}

#message-local-video[hidden],
#message-remote-video[hidden] {
    display: none;
}

.message-call-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.message-call-controls button {
    flex: 1 1 auto;
    min-height: 36px;
    border: 1px solid rgba(37, 213, 239, .24);
    border-radius: 8px;
    background: rgba(2, 7, 12, .62);
    color: #e8fbff;
    box-shadow: none;
}

.message-call-controls button.is-muted {
    border-color: rgba(255, 197, 67, .38);
    color: #ffd86b;
}

.message-call-controls #message-call-end {
    border-color: rgba(255, 77, 109, .42);
    color: #ffd9df;
    background: rgba(68, 10, 22, .72);
}

.message-call-debug {
    min-height: 16px;
    color: #8fa2b5;
    font-size: .72rem;
    line-height: 1.35;
    word-break: break-word;
}

.global-call-toast {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 11990;
    display: grid;
    gap: 14px;
    width: min(390px, calc(100vw - 28px));
    border: 1px solid rgba(37, 213, 239, .34);
    border-radius: 12px;
    padding: 16px;
    background:
        radial-gradient(circle at 14% 0%, rgba(37, 213, 239, .2), transparent 34%),
        linear-gradient(180deg, rgba(14, 24, 34, .98), rgba(1, 5, 9, .98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.global-call-toast[hidden] {
    display: none;
}

.global-call-toast span,
.global-call-toast strong,
.global-call-toast small {
    display: block;
}

.global-call-toast-main {
    display: grid;
    gap: 4px;
}

.global-call-toast span {
    color: #8edfed;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.global-call-toast strong {
    color: #f7fbff;
    font-size: 1.12rem;
}

.global-call-toast small {
    color: #9aabbc;
    font-size: .78rem;
}

.global-call-toast-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.global-call-toast-actions a,
.global-call-toast-actions button {
    min-height: 34px;
    border: 1px solid rgba(37, 213, 239, .24);
    border-radius: 8px;
    padding: 8px 11px;
    background: rgba(2, 7, 12, .68);
    color: #e8fbff;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    box-shadow: none;
}

.global-call-toast-actions a {
    border-color: rgba(37, 213, 239, .48);
    background: rgba(37, 213, 239, .14);
}

.global-call-toast-actions button {
    border-color: rgba(255, 77, 109, .42);
    color: #ffd9df;
}

@media (max-width: 980px) {
    body#top:not(.studio-app-body) .messages-command-strip,
    body#top:not(.studio-app-body) .messages-command-tools,
    body#top:not(.studio-app-body) .message-compose-tools {
        grid-template-columns: 1fr;
    }

    body.messages-page .feed {
        padding-left: 8px;
        padding-right: 8px;
    }

    body#top:not(.studio-app-body) .messages-command-layout {
        gap: 10px;
        padding: 10px !important;
    }

    body#top:not(.studio-app-body) .messages-command-strip {
        gap: 10px;
        padding-bottom: 10px;
    }

    body#top:not(.studio-app-body) .messages-command-strip h2 {
        font-size: 1.45rem;
    }

    .messages-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .messages-sidebar {
        max-height: 30vh;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
        padding-right: 0;
        padding-bottom: 8px;
    }

    .conversation-link {
        min-height: 58px;
    }

    .thread-header {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 9px;
    }

    .message-thread-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 7px;
        width: 100%;
    }

    body#top:not(.studio-app-body) .message-call-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        width: 100%;
    }

    body#top:not(.studio-app-body) .message-call-actions button,
    body#top:not(.studio-app-body) .messages-profile-jump {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .message-bubbles {
        min-height: 42vh;
        max-height: 48vh;
    }

    .message-bubble {
        max-width: 92%;
    }

    .message-form textarea {
        min-height: 74px;
    }

    .message-form-row {
        display: grid;
        gap: 8px;
        align-items: stretch;
    }

    .message-form-row button {
        width: 100%;
        min-height: 42px;
    }

    .message-call-dock {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 20px);
        overflow: auto;
    }

    .message-call-dock.is-minimized {
        left: auto;
        width: min(300px, calc(100vw - 20px));
    }

    .global-call-toast {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
    }

    .message-call-controls #message-call-switch-camera {
        display: inline-flex;
    }
}

.emoji-picker-wrap {
    position: fixed;
    z-index: 20000;
    display: none;
}

.emoji-toggle-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #7a3cff, #4412a7);
    border: 1px solid rgba(126, 232, 255, .85);
    color: #fff;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(126, 232, 255, .35);
}

.emoji-panel {
    display: none;
    width: min(720px, calc(100vw - 24px));
    max-width: min(720px, calc(100vw - 24px));
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(145deg, rgba(18, 10, 34, .98), rgba(7, 12, 28, .98));
    border: 1px solid rgba(255, 43, 214, .65);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 24px rgba(160, 62, 255, .35);
}

.emoji-panel.is-open {
    display: block;
}

.emoji-category-title {
    color: #7ee8ff;
    font-size: 12px;
    margin: 8px 0 6px;
    font-weight: 700;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 6px;
    width: 100%;
}

.emoji-btn {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(99, 55, 180, .18);
    border: 1px solid rgba(188, 137, 255, .22);
    border-radius: 9px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    box-shadow: none;
}

.emoji-btn:hover {
    border-color: rgba(126, 232, 255, .85);
    background: rgba(126, 70, 220, .32);
}

@media (max-width: 760px) {
    .emoji-panel {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: 340px;
    }

    .emoji-grid {
        grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    }

    .emoji-btn {
        min-width: 34px;
        height: 34px;
        font-size: 18px;
    }
}

.message-file-wrap{margin-bottom:6px}
.message-image-thumb {
    max-width: 160px;
    max-height: 120px;
    border-radius: 10px;
    cursor: zoom-in;
    border: 1px solid rgba(202, 173, 255, .35);
    object-fit: cover;
}

.message-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
}

.message-lightbox.is-open {
    display: flex;
}

.message-lightbox-image {
    max-width: 94vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(202, 173, 255, .35);
}

.message-lightbox-close {
    position: absolute;
    top: 16px;
    right: 22px;
    font-size: 36px;
    background: rgba(20, 12, 34, .8);
    color: white;
    border: 1px solid rgba(202, 173, 255, .35);
    border-radius: 999px;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    min-height: 9px;
    border-radius: 999px;
    background: #22ff88 !important;
    box-shadow: 0 0 10px rgba(34, 255, 136, .85);
    border: 1px solid rgba(210, 255, 230, .85);
    vertical-align: middle;
    margin-left: 6px;
}

.online-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7dffb2;
    font-weight: 700;
}

.online-status .online-dot {
    margin-left: 0;
}
.forum-topic-card,.forum-reply-card{border:1px solid rgba(0,255,255,.2)}

.forum-form {
    display: grid;
    gap: 14px;
}

.forum-form label {
    display: grid;
    gap: 7px;
    color: #ddd3f2;
    font-weight: 700;
}

.forum-form input[type="text"],
.forum-form input:not([type]),
.forum-form textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(197, 155, 255, .32);
    background: rgba(255,255,255,.04);
    color: var(--text);
    outline: none;
}

.forum-form textarea {
    min-height: 140px;
    resize: vertical;
}

.forum-reply-form textarea {
    min-height: 160px;
}

.forum-topic-cover {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(202, 173, 255, .25);
    cursor: zoom-in;
    margin-bottom: 16px;
}
.forum-actions{display:flex;gap:8px;flex-wrap:wrap}
.forum-topic-image,
.forum-image-thumb {
    max-width: 220px;
    max-height: 160px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(202, 173, 255, .28);
    cursor: zoom-in;
    display: block;
    margin: 12px 0;
}
.forum-lightbox[hidden] {
    display: none !important;
}
.forum-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.forum-lightbox-image {
    max-width: 94vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(202, 173, 255, .35);
}

.forum-reply-card .forum-image-thumb {
    max-width: 180px;
    max-height: 130px;
}

.forum-search form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.forum-search input { flex:1; min-width:220px; padding:10px 12px; border-radius:12px; border:1px solid rgba(197,155,255,.35); background:rgba(255,255,255,.04); color:var(--text); }
.forum-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.forum-badge { display:inline-block; padding:2px 8px; margin-right:6px; border-radius:999px; font-size:.75rem; border:1px solid rgba(178,115,255,.45); background:rgba(124,58,237,.2); color:#e8dbff; }
.forum-preview { margin:10px 0; color:#d8d0ea; line-height:1.35; }

/* Pulsatrax form polish */
.form-card { background: linear-gradient(135deg, rgba(18,13,30,.82), rgba(11,13,31,.78)); }
.form-grid { display:grid; gap:14px; }
.form-field { display:grid; gap:8px; }
.form-label { color:#e9dfff; font-weight:600; }
.form-control,
.select-control,
.forum-search-form input,
.admin-filter-bar input,
.admin-filter-bar select,
.admin-table select {
  width:100%;
  padding:12px 13px;
  border-radius:12px;
  border:1px solid rgba(197,155,255,.35);
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.form-control:focus,.select-control:focus { border-color:#ba73ff; box-shadow:0 0 0 3px rgba(167,91,255,.2); outline:none; }
.form-actions { display:flex; gap:10px; align-items:center; }
.forum-create-form textarea { min-height:130px; resize:vertical; }
.forum-search-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.forum-search-form .form-control { flex:1; min-width:220px; }
.forum-tabs { display:flex; flex-wrap:wrap; gap:10px; }
.forum-tab { padding:9px 14px; border-radius:999px; border:1px solid rgba(188,137,255,.35); background:rgba(124,58,237,.12); color:#e8defe; }
.forum-tab:hover,.forum-tab.active { background:rgba(177,120,255,.24); border-color:rgba(214,162,255,.62); box-shadow:0 0 18px rgba(147,76,255,.2); }
.forum-pagination { display:flex; gap:8px; align-items:center; }
.admin-filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px; }
.admin-filter-bar .form-control { flex:1; min-width:180px; }
.admin-inline-actions { margin-top:8px; display:flex; gap:8px; align-items:center; }
.admin-inline-actions.wrap { flex-wrap:wrap; gap:6px; }
.inline-form { display:inline; }
.admin-mt-8 { margin-top:8px; }
@media (max-width: 760px){
  .forum-search-form button { width:100%; }
  .forum-tab { flex:1 1 auto; text-align:center; }
}

.profile-media-player-card::before{content:"";position:absolute;left:6%;right:6%;top:28px;height:168px;border-radius:999px;background:radial-gradient(circle, rgba(206,116,255,.45), rgba(122,209,255,.32) 48%, rgba(12,9,23,0) 80%);opacity:0;filter:blur(16px);pointer-events:none;transition:opacity .2s ease;z-index:0}
.profile-media-player-card.is-playing::before{opacity:.95;animation:profilePlayerPulse 1.2s ease-in-out infinite alternate}
.profile-video-refresh-form{margin-top:8px}
.profile-video-refresh-form button{width:auto}
@media (max-width:760px){
    .profile-player-embed{width:100%;height:0;padding-top:56.25%;justify-self:stretch}
    .shared-video-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

.shared-video-thumb{position:relative;border:1px solid rgba(202,173,255,.35);background:rgba(9,8,20,.88);border-radius:10px;overflow:hidden;padding:0;aspect-ratio:16/9;box-shadow:none}
.shared-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shared-video-thumb-fallback{display:grid;place-items:center;height:100%;color:#cdb9ea;font-size:.9rem}
.shared-video-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:rgba(10,8,22,.72);border:1px solid rgba(236,188,255,.65);display:grid;place-items:center;color:#fff;font-size:1.1rem}
.shared-video-actions{display:flex;gap:8px;flex-wrap:wrap}
.profile-media-player-card{--media-energy:0;--media-bass:0}
.profile-media-player-card::before{opacity:calc(.2 + (var(--media-energy) * .95));transform:scale(calc(.94 + (var(--media-bass) * .16)))}
.profile-media-player-card.is-playing::before{opacity:calc(.35 + (var(--media-energy) * 1));animation:profilePlayerPulse 1.2s ease-in-out infinite alternate}
.profile-player-ambient{opacity:calc(.22 + (var(--ambient-energy) * .82));transform:scale(calc(.92 + (var(--ambient-bass,0) * .2)))}

.pinned-post-card {
    border-color: rgba(255, 214, 128, 0.55);
    background: linear-gradient(145deg, rgba(45, 30, 10, 0.42), rgba(22, 14, 34, 0.88));
    box-shadow: 0 0 0 1px rgba(255, 220, 155, 0.25), 0 16px 50px rgba(0, 0, 0, 0.45);
}

.pinned-post-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffe7b5;
    margin-bottom: 10px;
}

.pinned-post-link {
    color: #f8d88e;
    text-decoration: underline;
}

.pin-post-form {
    margin-top: 10px;
}

.pin-post-btn {
    border-radius: 10px;
    padding: 7px 12px;
    font-size: .82rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #d97706, #7c3aed);
    box-shadow: 0 6px 20px rgba(194, 121, 19, 0.3);
}

.search-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.discovery-card {
    background: rgba(255,255,255,.03);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.discovery-card:hover {
    transform: translateY(-2px);
    border-color: rgba(198,151,255,.62);
    box-shadow: 0 0 20px rgba(180, 96, 255, 0.3);
}
.discovery-view-btn { display: inline-block; margin-top: 10px; }
.online-indicator { color: #7cffb8; font-size: .82rem; font-weight: 700; display: inline-block; margin-top: 6px; }
.search-status { margin-top: 8px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(214,162,255,.55); background: rgba(137,56,236,.16); display: inline-flex; }
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; }
.checkbox-row input[type="checkbox"], .search-field input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
@media (max-width: 720px) {
    .search-user-grid { grid-template-columns: 1fr; }
}

.relationship-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin: 14px 0 12px; }
.relationship-search { display:flex; flex-direction:column; gap:8px; flex:1; min-width:220px; }
.relationship-search input { width:100%; border-radius:12px; padding:10px 12px; border:1px solid rgba(214,162,255,.35); background:rgba(8,5,16,.8); color:#f4ebff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.relationship-search input:focus { outline:none; border-color: rgba(198,151,255,.8); box-shadow:0 0 0 3px rgba(171,88,255,.2), 0 0 22px rgba(164,72,255,.28); }
.relationship-results-meta { margin:0; font-size:.82rem; }
.relationship-list-wrap { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:12px; }
.relationship-card { margin-bottom:0; align-items:flex-start; min-height:100%; border:1px solid rgba(198,151,255,.28); border-radius:16px; padding:14px; }
.relationship-card:hover { box-shadow:0 0 26px rgba(176, 89, 255, .24); transform: translateY(-2px); }
.relationship-card .user-link-avatar { flex-shrink:0; }
.relationship-empty-state { min-height: 220px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px dashed rgba(198,151,255,.35); border-radius:16px; background:rgba(255,255,255,.02); padding:28px 18px; }
.relationship-empty-state h3 { margin:0 0 8px; font-size:1.12rem; }
@media (max-width: 900px) { .relationship-list-wrap { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .relationship-actions { gap:6px; } .relationship-list-wrap { grid-template-columns: 1fr; } .relationship-toolbar { align-items:stretch; } }


.compact-action-group { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.compact-action-group form { margin:0; }
.compact-action-btn {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:34px; padding:6px 12px; border-radius:10px; font-size:.86rem; line-height:1.1;
    border:1px solid rgba(214,162,255,.55);
}
.compact-action-btn:hover { box-shadow: 0 0 14px rgba(170,84,255,.4); }
.compact-action-btn-muted { background: rgba(110, 94, 138, 0.35); border-color: rgba(173, 153, 198, 0.4); color: #d4cbe5; box-shadow:none; }
.compact-action-btn:disabled { cursor:not-allowed; opacity:.9; }
.compact-action-link { text-decoration:none; }
.relationship-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.profile-social-counts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 6px; }
.profile-stat-link { color:#dfd7f5; padding:0; border-radius:0; border:0; text-decoration:none; }
.profile-stat-link:hover { color:#f4ddff; text-decoration:underline; text-underline-offset:2px; }
.profile-stat-sep { color: rgba(210, 184, 243, 0.75); }
.profile-image-preview-panel {
    border:1px solid rgba(202,173,255,.24);
    border-radius:14px;
    padding:14px;
    background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(144, 63, 255, .05));
    display:grid;
    gap:12px;
}
.profile-image-preview-panel h3 { margin:0; }
.profile-image-preview-panel [hidden] { display: none !important; }
.profile-image-panel-head {
    display: grid;
    gap: 4px;
}
.profile-image-panel-head .muted {
    margin: 0;
}
.position-preview-grid { display:grid; grid-template-columns: minmax(170px, .38fr) minmax(0, 1fr); gap:12px; align-items: stretch; }
.avatar-position-preview,
.cover-position-preview {
    border:1px solid rgba(202,173,255,.26);
    border-radius:12px;
    padding:10px;
    background: rgba(8, 6, 18, 0.72);
    display:grid;
    gap:10px;
    align-content:start;
}
.avatar-position-preview h4,
.cover-position-preview h4 { margin:0; font-size:.92rem; color:#e8defe; }
.avatar-preview-frame {
    width: min(132px, 100%);
    aspect-ratio: 1;
    border-radius: 24px;
    display: grid;
    place-items: center;
    justify-self: center;
    border: 1px solid rgba(220,185,255,.35);
    background: linear-gradient(145deg, rgba(16,26,38,.94), rgba(9,10,18,.96));
    overflow: hidden;
}
.profile-image-avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-image-avatar-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #e7faff;
    font-weight: 900;
    font-size: 2rem;
    background:
        radial-gradient(circle at 30% 20%, rgba(115, 247, 255, .22), transparent 42%),
        linear-gradient(145deg, rgba(17, 33, 46, .96), rgba(7, 11, 18, .98));
}
.cover-position-preview .profile-cover,
.cover-position-preview .cover-fallback {
    width:100%; height:160px; border-radius:10px; object-fit:cover; display:block;
    border:1px solid rgba(220,185,255,.35);
}
.cover-fallback { display:flex; align-items:center; justify-content:center; color:#d0c4eb; background: linear-gradient(145deg, rgba(56,26,92,.85), rgba(16,12,28,.95)); }
.position-slider-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px 16px; }
@media (max-width: 820px) {
  .position-preview-grid,
  .position-slider-grid { grid-template-columns: 1fr; }
  .avatar-preview-frame { justify-self: start; width: 118px; }
}
.media-position-controls { border:1px solid rgba(202,173,255,.24); border-radius:14px; padding:12px; background: rgba(255,255,255,.02); }
.media-position-controls h3 { margin:0 0 6px; }


.embed-card{margin-top:12px;padding:10px;border:1px solid rgba(0,255,255,.18);background:rgba(5,8,20,.8);border-radius:14px;box-shadow:0 0 0 1px rgba(255,43,214,.08) inset;}
.youtube-embed{position:relative;width:100%;max-width:100%;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16 / 9;}
@supports not (aspect-ratio: 16 / 9){.youtube-embed{height:0;padding-top:56.25%;}}
.youtube-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

.event-inline{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.event-card h3{margin:6px 0}


.public-login-callout {
    border: 1px solid rgba(214, 162, 255, 0.4);
    background: linear-gradient(140deg, rgba(217, 70, 239, 0.12), rgba(91, 33, 182, 0.14));
}

.public-login-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.edit-profile-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(205, 161, 255, 0.45);
}

.share-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(205, 161, 255, 0.38);
    border-radius: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #f5f2ff;
    font-weight: 600;
    cursor: pointer;
}

.share-btn:hover {
    background: rgba(177, 120, 255, 0.2);
}


.embed-card{margin:12px 0 4px;width:100%}.youtube-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(202,173,255,.3);background:rgba(10,8,20,.7)}.youtube-embed iframe{width:100%;height:100%;display:block;border:0;max-height:none}
.event-cover-image{width:100%;max-height:420px;object-fit:cover;object-position:center;border-radius:16px;border:1px solid rgba(202,173,255,.26);display:block;margin:10px 0 14px}.event-card{display:grid;gap:8px}.event-card-thumb-link{display:block}.event-card-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid rgba(202,173,255,.26)}.neon-card{background:rgba(255,255,255,.035);border:1px solid rgba(201,159,255,.28)}.share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.share-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:10px;border:1px solid rgba(190,137,255,.5);background:rgba(122,60,255,.14);color:#f2e9ff;text-decoration:none;font-size:.86rem;font-weight:700;box-shadow:none}.share-btn:hover{background:rgba(122,60,255,.28)}@media (max-width:760px){.event-cover-image{max-height:240px}.share-btn{font-size:.8rem;padding:7px 10px}}

.hero-card {
    min-height: 154px;
    max-height: 170px;
    padding: 20px 24px;
    align-items: center;
    box-shadow: inset 0 0 0 1px rgba(228, 180, 255, 0.14), inset 0 -35px 60px rgba(0,0,0,.36), 0 0 30px rgba(157, 75, 255, 0.15);
}
.hero-card::before {
    background: linear-gradient(130deg, rgba(4,3,9,0.88), rgba(45,16,72,0.34) 58%, rgba(4,3,9,0.92));
}
.hero-card h1 { font-size: clamp(1.2rem, 2.1vw, 1.85rem); line-height: 1.2; }
.hero-card p { margin: 7px 0 0; font-size: .95rem; color: #cec4e2; }

.arcade-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.arcade-card { text-align: left; background: rgba(169, 86, 255, 0.12); border: 1px solid rgba(209, 156, 255, 0.33); border-radius: 14px; padding: 14px; display: grid; gap: 6px; }
.arcade-card span { color: #c9bcdf; font-size: .84rem; }
.arcade-player { display: grid; gap: 12px; }
.arcade-player-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.game-stage-wrap { position: relative; }
.game-stage { min-height: 240px; border: 1px solid rgba(201, 159, 255, 0.28); border-radius: 14px; background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, .22), rgba(8, 6, 14, .95)); padding: 14px; outline: none; display:grid; place-items:center; overflow:hidden; }
.game-focus-hint { position:absolute; inset:0; display:grid; place-items:center; color:#f4d8ff; font-weight:700; pointer-events:none; text-shadow:0 0 12px rgba(210,120,255,.65); }
.arcade-game-inner h4 { margin: 0 0 8px; font-size: 1.1rem; }
.mini-act { margin-right: 8px; margin-bottom: 8px; }
.arcade-score { color:#dccff4; font-weight: 700; }

@media (max-width: 760px) {
    .hero-card { min-height: 118px; max-height: 136px; padding: 14px 16px; }
    .hero-card p { font-size: .86rem; }
    .game-stage { min-height: 210px; }
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: #d9d1eb;
    line-height: 1.45;
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #d946ef;
}

.checkbox-row a,
.legal-card a {
    color: #f0b6ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body#top:not(.studio-app-body) :where(.checkbox-row, .auth-checkbox-row, .checkbox-line, .admin-badge-grid label, .search-field) input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative;
    display: inline-grid;
    place-content: center;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 18px;
    border: 1px solid rgba(134, 150, 170, .46) !important;
    border-radius: 5px;
    background: rgba(3, 8, 13, .9) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
    cursor: pointer;
    accent-color: #25d5ef;
}

body#top:not(.studio-app-body) :where(.checkbox-row, .auth-checkbox-row, .checkbox-line, .admin-badge-grid label, .search-field) input[type="checkbox"]:checked {
    border-color: rgba(37, 213, 239, .86) !important;
    background: #12313a url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.1 7.2 5.7 9.8 10.9 4.2' fill='none' stroke='%23f7fbff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px rgba(37, 213, 239, .24) !important;
}

body#top:not(.studio-app-body) :where(.checkbox-row, .auth-checkbox-row, .checkbox-line, .admin-badge-grid label, .search-field) input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(37, 213, 239, .7);
    outline-offset: 2px;
}

body#top:not(.studio-app-body) :where(.checkbox-row, .auth-checkbox-row, .checkbox-line, .admin-badge-grid label, .search-field) input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.legal-page {
    gap: 14px;
    width: min(100%, 1060px);
    justify-self: center;
}

.legal-hero {
    min-height: 180px;
}

.legal-hero p {
    max-width: 760px;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.legal-toc {
    position: sticky;
    top: 14px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(115, 247, 255, .18);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(9, 15, 30, .86), rgba(23, 9, 39, .84)),
        rgba(255, 255, 255, .04);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .32);
}

.legal-toc strong {
    color: #ffffff;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-toc a {
    color: rgba(233, 242, 255, .78);
    text-decoration: none;
    line-height: 1.3;
    border-left: 2px solid rgba(255, 43, 214, .22);
    padding: 5px 0 5px 10px;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    color: #ffffff;
    border-left-color: #73f7ff;
}

.legal-content {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.legal-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
}

.legal-card.compact {
    padding: 16px;
}

.legal-card h2 {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.legal-card h3 {
    margin: 16px 0 8px;
    font-size: 1rem;
    color: #ffffff;
}

.legal-card p,
.legal-card li {
    color: #dfd7f5;
    line-height: 1.65;
}

.legal-card p:last-child,
.legal-card ul:last-child {
    margin-bottom: 0;
}

.legal-card ul {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 8px;
}

.legal-kicker {
    color: #73f7ff;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-note {
    border-color: rgba(115, 247, 255, .28);
    background:
        linear-gradient(135deg, rgba(115, 247, 255, .08), rgba(255, 43, 214, .08)),
        var(--panel);
}

.legal-callout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.legal-mini-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.legal-mini-panel h3 {
    margin-top: 0;
}

.legal-updated {
    margin: 4px 0 0;
    color: rgba(233, 242, 255, .72);
    font-size: .9rem;
}

.two-col-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.legal-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.legal-inline-links a {
    color: #edb9ff;
    border: 1px solid rgba(207, 150, 255, 0.28);
    background: rgba(206, 106, 255, 0.1);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.84rem;
}

.legal-footer {
    margin: 2px 0 10px;
}

@media (max-width: 860px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-toc {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legal-toc strong {
        grid-column: 1 / -1;
    }

    .two-col-grid {
        grid-template-columns: 1fr;
    }
}

/* Auth refresh */
.auth-page { padding: 24px 16px; }
.auth-box { max-width: 560px; width: min(560px, 100%); padding: clamp(22px, 3.4vw, 36px); }
.auth-intro { margin-bottom: 8px; }
.auth-help-text { margin: 10px 0 0; color: #d6c7f0; line-height: 1.45; }
.auth-form { gap: 12px; margin-top: 20px; width: 100%; }
.auth-form input, .auth-form button { width: 100%; max-width: 100%; box-sizing: border-box; }
.auth-checkbox-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; color: #d9d1eb; line-height: 1.45; font-size: 0.95rem; }
.auth-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; }
.auth-checkbox-row span { min-width: 0; overflow-wrap: anywhere; }
.auth-checkbox-row a { color: #f0b6ff; text-decoration: underline; text-underline-offset: 2px; }
.auth-legal-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.auth-legal-links a { color: #edb9ff; border: 1px solid rgba(207,150,255,.28); background: rgba(206,106,255,.1); padding: 6px 10px; border-radius: 999px; font-size: .84rem; }

.game-stage:focus { border-color: rgba(230, 160, 255, 0.7); box-shadow: 0 0 0 2px rgba(213, 116, 255, 0.35); }
#pulse-dot { font-size: 34px; transition: opacity .2s ease; }

@media (max-width: 760px) {
  .auth-box h1 { font-size: clamp(2rem, 12vw, 3rem); letter-spacing: -1px; }
}

#game-canvas {
  width: min(100%, 800px);
  aspect-ratio: 20 / 9;
  max-height: 360px;
  border-radius: 12px;
  border: 1px solid rgba(143, 205, 255, 0.25);
  box-shadow: inset 0 0 35px rgba(108, 66, 255, 0.24), 0 0 25px rgba(122, 72, 255, 0.35);
  background: #070611;
}
.memory-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; width:min(100%,480px);}
.memory-card { min-height:68px; font-size:1.25rem; background:rgba(139,89,255,0.22); border:1px solid rgba(197,154,255,0.45);}
.memory-card.done { background:rgba(73,255,222,0.18); border-color:rgba(109,255,235,0.6); }
.simon-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; width:min(100%,420px);}
.simon-grid button{ min-height:80px; background:rgba(129,84,255,0.22); border:1px solid rgba(203,160,255,0.44);}
.simon-grid button.on{ filter:brightness(1.35); box-shadow:0 0 18px rgba(108,255,235,0.8);}
.arcade-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.arcade-side{display:grid;gap:12px}
.arcade-side h4{margin:0 0 8px}
.arcade-side ul{margin:0;padding-left:18px;display:grid;gap:6px}
.lb-list{margin:0;padding-left:18px;display:grid;gap:6px}
.lb-list li span{color:#bfb4d6;font-size:.86rem}
.lb-list li b{color:#9ffcff;margin-left:6px}
.arcade-toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.arcade-toolbar select{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(202,173,255,.3);border-radius:10px;padding:6px}
@media (max-width: 980px){.arcade-layout{grid-template-columns:1fr}.arcade-side{order:2}}

/* Launch readiness mobile polish */
html {
    width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    overflow-x: clip;
}

input,
select,
textarea,
button,
.button-link,
.edit-profile-btn,
.share-btn,
.compact-action-btn,
.menu-link {
    max-width: 100%;
}

input,
select,
textarea {
    min-width: 0;
}

button,
.button-link,
.edit-profile-btn,
.share-btn,
.compact-action-btn {
    min-height: 40px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.post-card,
.profile-card,
.create-post,
.legal-card,
.widget,
.message-bubble,
.comment-body,
.discovery-card,
.relationship-card,
.event-card,
.forum-topic-card,
.forum-reply-card,
.shared-video-card,
.profile-picture-card {
    overflow-wrap: anywhere;
}

.post-top > div,
.search-user-card > div,
.relationship-card > div,
.notification-item > div,
.event-card > div,
.forum-topic-card > div,
.profile-main-content,
.profile-identity-col,
.conversation-text,
.message-body,
.comment-body {
    min-width: 0;
}

.post-actions-row,
.notification-actions,
.public-login-actions,
.share-row,
.form-actions,
.confirm-actions,
.forum-pagination,
.admin-inline-actions,
.profile-player-controls,
.profile-media-tabs,
.relationship-actions,
.compact-action-group {
    flex-wrap: wrap;
}

.post-actions-row form,
.notification-actions form,
.public-login-actions a,
.public-login-actions form,
.share-row a,
.share-row button,
.form-actions button,
.confirm-actions button,
.forum-pagination a,
.admin-inline-actions a,
.admin-inline-actions form,
.relationship-actions form,
.compact-action-group form {
    min-width: 0;
}

.post-card img,
.profile-card img,
.legal-card img,
.event-card img,
.forum-topic-card img,
.forum-reply-card img,
.search-user-card img,
.discovery-card img,
.relationship-card img,
.message-bubble img {
    max-width: 100%;
    height: auto;
}

.post-card .post-image-wrap,
.embed-card,
.youtube-embed,
.profile-player-embed,
.video-lightbox-frame-wrap,
.shared-video-thumb,
.game-stage,
.game-stage canvas {
    max-width: 100%;
}

.game-stage canvas {
    height: auto !important;
}

.lb-list {
    width: 100%;
    max-width: 100%;
}

table.lb-list {
    display: table;
    border-collapse: collapse;
    padding-left: 0;
    font-size: .88rem;
}

table.lb-list th,
table.lb-list td {
    padding: 6px 5px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.08);
    vertical-align: top;
}

table.lb-list span {
    display: block;
    color: #bfb4d6;
    font-size: .78rem;
}

@media (max-width: 1150px) {
    .layout {
        grid-template-columns: minmax(74px, 88px) minmax(0, 1fr);
    }

    .rightbar {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 0;
    }

    .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        padding: 10px;
        gap: 12px;
    }

    .sidebar {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 900;
        width: 100%;
        padding: 10px;
        border-radius: 16px;
        max-height: none;
    }

    .sidebar .menu {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sidebar .menu-link {
        flex: 1 1 calc(25% - 6px);
        min-width: 72px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 6px;
        white-space: normal;
        line-height: 1.12;
    }

    .notif-badge {
        position: static;
        margin-left: 4px;
        flex: 0 0 auto;
    }

    .feed,
    .rightbar,
    .post-card,
    .profile-card,
    .create-post,
    .legal-card,
    .messages-layout,
    .arcade-player {
        width: 100%;
        max-width: 100%;
    }

    .hero-card {
        min-height: 128px;
        max-height: none;
        padding: 16px;
        align-items: end;
    }

    .hero-card h1 {
        font-size: clamp(1.35rem, 8vw, 2rem);
    }

    .create-post {
        display: grid;
        grid-template-columns: 1fr;
    }

    .create-post > .avatar,
    .create-post > .avatar-fallback {
        display: none;
    }

    .create-post-actions,
    .comment-form,
    .notifications-header,
    .notification-item,
    .search-user-card,
    .profile-intro-head,
    .message-form-row,
    .forum-search-form,
    .form-actions,
    .confirm-actions {
        align-items: stretch;
    }

    .comment-form,
    .notifications-header,
    .notification-item,
    .search-user-card,
    .message-form-row,
    .forum-search-form {
        flex-direction: column;
    }

    .comment-form button,
    .notifications-header button,
    .notification-actions button,
    .notification-actions .button-link,
    .search-field-button button,
    .forum-search-form button,
    .form-actions button,
    .confirm-actions button,
    .public-login-actions a,
    .public-login-actions button,
    .message-form-row button,
    .share-row .share-btn {
        width: 100%;
    }

    .post-actions-row {
        gap: 8px;
    }

    .post-action-like,
    .post-comment-toggle,
    .report-pop > summary {
        min-height: 36px;
        padding: 7px 10px;
    }

    .post-card .post-image-wrap,
    .post-card .post-image-wrap .post-image {
        max-height: 260px;
    }

    .profile-cover {
        height: 128px;
    }

    .profile-avatar {
        width: 92px;
        height: 92px;
    }

    .profile-report-action {
        position: static;
        margin-bottom: 8px;
        justify-self: start;
    }

    .profile-status-pill {
        border-radius: 14px;
        align-items: flex-start;
    }

    .profile-picture-grid,
    .shared-video-grid,
    .search-user-grid,
    .relationship-list-wrap,
    .arcade-grid {
        grid-template-columns: 1fr;
    }

    .profile-picture-card,
    .shared-video-card {
        max-width: 100%;
    }

    .messages-layout {
        padding: 12px;
    }

    .messages-sidebar {
        max-height: 240px;
    }

    .message-bubbles {
        max-height: 58vh;
    }

    .message-bubble {
        max-width: 94%;
    }

    .message-image-thumb {
        width: min(100%, 260px);
        max-width: 100%;
        max-height: 220px;
        object-fit: contain;
    }

    .event-cover-image,
    .forum-topic-cover {
        max-height: 240px;
    }

    .forum-topic-image,
    .forum-image-thumb,
    .forum-reply-card .forum-image-thumb {
        width: min(100%, 260px);
        max-width: 100%;
        height: auto;
        max-height: 220px;
    }

    .legal-card {
        padding: 16px;
        border-radius: 16px;
    }

    .legal-card p,
    .legal-card li {
        line-height: 1.55;
    }

    .legal-inline-links a,
    .auth-legal-links a {
        flex: 1 1 auto;
        text-align: center;
    }

    .auth-page {
        align-items: flex-start;
        min-height: 100svh;
        padding: 14px 10px;
    }

    .auth-box {
        border-radius: 18px;
        padding: 20px 16px;
    }

    .auth-form {
        gap: 10px;
    }

    .game-stage {
        min-height: 190px;
        padding: 8px;
    }

    .arcade-toolbar,
    .arcade-player-top {
        align-items: stretch;
    }

    .arcade-toolbar label,
    .arcade-toolbar select,
    #exit-game {
        width: 100%;
    }

    .arcade-score {
        line-height: 1.5;
    }

    table.lb-list {
        font-size: .78rem;
    }

    table.lb-list th,
    table.lb-list td {
        padding: 5px 3px;
    }
}

@media (max-width: 420px) {
    .layout {
        padding: 8px;
    }

    .post-card,
    .profile-card,
    .create-post,
    .legal-card,
    .messages-layout {
        padding: 12px;
        border-radius: 14px;
    }

    .sidebar .menu-link {
        flex-basis: calc(33.333% - 6px);
        min-width: 0;
        font-size: .72rem;
    }

    .post-actions-row {
        align-items: stretch;
    }

    .post-actions-row > *,
    .post-actions-row form,
    .post-actions-row button,
    .post-actions-row details {
        flex: 1 1 calc(50% - 8px);
    }

    .report-pop > summary {
        justify-content: center;
    }

    .profile-cover {
        height: 112px;
    }

    .profile-name {
        font-size: 1.35rem;
    }

    .message-bubble {
        max-width: 100%;
    }

    .event-cover-image,
    .post-card .post-image-wrap,
    .post-card .post-image-wrap .post-image {
        max-height: 220px;
    }
}

/* PULSATRAX homepage cinematic redesign */
.home-page {
    --home-bg: #050507;
    --home-ink: #f2eef8;
    --home-muted: #a8a0b4;
    --home-panel: rgba(17, 17, 22, .78);
    --home-panel-strong: rgba(22, 21, 28, .9);
    --home-line: rgba(166, 150, 190, .16);
    --home-purple: #8f63d9;
    --home-purple-soft: rgba(143, 99, 217, .2);
    background:
        radial-gradient(circle at 58% -12%, rgba(109, 73, 168, .2), transparent 32%),
        radial-gradient(circle at 88% 20%, rgba(83, 67, 112, .16), transparent 28%),
        linear-gradient(180deg, #09090d 0%, var(--home-bg) 46%, #020203 100%);
    color: var(--home-ink);
}

.home-page::before {
    opacity: .1;
}

@media (min-width: 761px) {
    .home-page .layout {
        grid-template-columns: 238px minmax(0, 1fr) 342px;
        gap: 20px;
        padding: 20px;
        max-width: 1560px;
        margin: 0 auto;
    }

    .home-page .sidebar {
        padding: 18px 14px;
        border-radius: 18px;
        border-color: var(--home-line);
        background: linear-gradient(180deg, rgba(20, 20, 26, .92), rgba(9, 9, 12, .86));
        box-shadow: 0 22px 56px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .035);
        backdrop-filter: blur(18px);
    }

    .home-page .logo {
        min-height: 74px;
        margin-bottom: 18px;
        border-radius: 12px;
        border-color: rgba(166, 150, 190, .18);
        color: #f3eef9;
        background: rgba(255, 255, 255, .025);
        box-shadow: none;
    }

    .home-page .logo:hover {
        border-color: rgba(169, 137, 219, .42);
        box-shadow: none;
    }

    .home-page .logo-mark {
        color: #ece5f7;
        background: linear-gradient(145deg, rgba(143, 99, 217, .52), rgba(47, 42, 62, .86));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .home-page .menu {
        gap: 6px;
    }

    .home-page .menu-link {
        border-radius: 9px;
        color: #c9c1d2;
        background: transparent;
    }

    .home-page .menu-link.active,
    .home-page .menu-link:hover {
        color: #f6f0ff;
        border-color: rgba(143, 99, 217, .28);
        background: rgba(143, 99, 217, .1);
        box-shadow: none;
    }

    .home-page .home-feed {
        gap: 14px;
    }

    .home-page .home-hero-card.live-experience-hero {
        min-height: 430px;
        padding: 42px;
        border-radius: 20px;
        border-color: rgba(174, 154, 208, .2);
        background-color: #08080b;
        box-shadow: 0 28px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .home-page .home-hero-card.live-experience-hero::before {
        background:
            linear-gradient(90deg, rgba(5, 5, 8, .97) 0%, rgba(8, 8, 12, .88) 43%, rgba(19, 17, 25, .5) 70%, rgba(4, 4, 6, .82) 100%),
            radial-gradient(circle at 76% 36%, rgba(143, 99, 217, .24), transparent 22%),
            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 100%),
            var(--hero-image);
        background-position: center, center, center, var(--hero-position-x) var(--hero-position-y);
        background-size: cover, cover, cover, cover;
        filter: saturate(.78) contrast(1.08) brightness(.78);
    }

    .home-page .home-hero-card.live-experience-hero::after {
        content: "";
        position: absolute;
        width: min(360px, 34vw);
        aspect-ratio: 1;
        right: 7%;
        top: 12%;
        border-radius: 50%;
        opacity: .48;
        background:
            radial-gradient(circle at 38% 40%, rgba(235, 229, 245, .9) 0 3%, transparent 4%),
            radial-gradient(circle at 62% 40%, rgba(235, 229, 245, .9) 0 3%, transparent 4%),
            radial-gradient(ellipse at 50% 67%, rgba(143, 99, 217, .18) 0 18%, transparent 19%),
            radial-gradient(circle at 50% 50%, rgba(143, 99, 217, .2), transparent 62%);
        filter: blur(.2px);
        pointer-events: none;
    }

    .home-page .hero-live-ambient {
        opacity: .32;
    }

    .home-page .hero-particle {
        width: 4px;
        height: 4px;
        background: rgba(168, 137, 219, .82);
        box-shadow: none;
    }

    .home-page .hero-scanline,
    .home-page .hero-pulse-separator span {
        display: none;
    }

    .home-page .home-hero-content {
        width: min(100%, 690px);
        gap: 15px;
    }

    .home-page .home-hero-kicker,
    .home-page .launch-empty-kicker,
    .home-page .widget-title-row span,
    .home-page .launch-command-card span,
    .home-page .live-signal-card span,
    .home-page .live-signal-card em {
        color: #bba8dc;
        letter-spacing: .16em;
        text-shadow: none;
    }

    .home-page .home-hero-card h1 {
        max-width: 660px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3rem, 4.8vw, 5.25rem);
        font-weight: 700;
        line-height: .96;
        letter-spacing: 0;
        text-shadow: none;
    }

    .home-page .home-hero-card p {
        max-width: 560px;
        color: #c9c1cf;
        font-size: 1.04rem;
    }

    .home-page .hero-genre-stack span {
        color: #e6def2;
        text-shadow: none;
    }

    .home-page .hero-pulse-separator::before {
        background: linear-gradient(90deg, rgba(143, 99, 217, .62), rgba(255, 255, 255, .12), transparent);
    }

    .home-page .hero-signal-counters div,
    .home-page .launch-command-card,
    .home-page .community-live-strip,
    .home-page .launch-trust-strip,
    .home-page .home-live-deck,
    .home-page .feed-tabs-card,
    .home-page .video-style-filter-card,
    .home-page .create-post,
    .home-page .post-card,
    .home-page .premium-widget,
    .home-page .rightbar > .widget {
        border-color: var(--home-line);
        background: linear-gradient(180deg, rgba(24, 23, 30, .86), rgba(10, 10, 14, .78));
        box-shadow: 0 18px 48px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .home-page .hero-signal-counters strong {
        color: #f2edf9;
    }

    .home-page .hero-signal-counters span {
        color: #9d94aa;
    }

    .home-page .launch-cta {
        border-radius: 10px;
        border-color: rgba(172, 154, 205, .25);
        box-shadow: none;
    }

    .home-page .launch-cta:hover {
        border-color: rgba(177, 145, 229, .48);
        box-shadow: none;
    }

    .home-page .launch-cta-primary,
    .home-page .launch-cta-studio {
        color: #f8f5fb;
        background: linear-gradient(135deg, #5f3f91, #2b2539);
        border-color: rgba(201, 178, 238, .34);
    }

    .home-page .launch-cta-secondary {
        color: #ddd4e9;
        background: rgba(255, 255, 255, .035);
    }

    .home-page .home-hero-chips span {
        border-radius: 8px;
        border-color: rgba(172, 154, 205, .18);
        color: #beb5ca;
        background: rgba(255, 255, 255, .03);
        box-shadow: none;
    }

    .home-page .launch-command-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-page .launch-command-card {
        border-radius: 12px;
        min-height: 126px;
    }

    .home-page .launch-command-card::after {
        background: linear-gradient(90deg, rgba(143, 99, 217, .58), transparent);
    }

    .home-page .launch-command-card:hover,
    .home-page .feed-post-card:hover,
    .home-page .premium-widget:hover,
    .home-page .post-card:hover {
        transform: translateY(-1px);
        border-color: rgba(164, 134, 212, .32);
        box-shadow: 0 22px 58px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .home-page .home-rightbar {
        gap: 12px;
    }

    .home-page .premium-widget {
        padding: 14px;
        border-radius: 16px;
    }

    .home-page .premium-widget::before,
    .home-page .home-live-deck::before {
        display: none;
    }

    .home-page .widget-title-row {
        margin-bottom: 12px;
    }

    .home-page .widget-title-row h3 {
        color: #f0eaf6;
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
        letter-spacing: 0;
    }

    .home-page .trend-item {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        margin: 0;
        padding: 10px 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(166, 150, 190, .12);
    }

    .home-page .trend-item:hover {
        transform: none;
        background: transparent;
        border-color: rgba(166, 150, 190, .22);
    }

    .home-page .trend-thumb,
    .home-page .trend-avatar {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: rgba(143, 99, 217, .16);
        border: 1px solid rgba(188, 169, 220, .16);
        color: #efe7fa;
        font-size: .75rem;
        font-weight: 900;
    }

    .home-page .trend-avatar img,
    .home-page .trend-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .home-page .premium-widget .trend-rank {
        color: #b9adc8;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .home-page .premium-widget .trend-content strong,
    .home-page .genre-widget .genre-trend-content strong {
        color: #eee8f7;
    }

    .home-page .premium-widget .trend-content p,
    .home-page .genre-widget .genre-trend-content p,
    .home-page .trend-metrics {
        color: #9d94aa;
    }

    .home-page .trend-movement {
        border: 0;
        color: #bba8dc;
        background: rgba(143, 99, 217, .1);
    }

    .home-page .genre-widget .genre-trend-item {
        padding: 10px 0;
    }

    .home-page .genre-widget .genre-signal-bar,
    .home-page .genre-signal-bar {
        height: 6px;
        border: 0;
        box-shadow: none;
        background:
            linear-gradient(90deg, rgba(143, 99, 217, .82), rgba(207, 196, 224, .55)) 0 0 / var(--genre-signal) 100% no-repeat,
            rgba(255, 255, 255, .06);
    }

    .home-page .genre-trend-item:hover .genre-signal-bar {
        animation: none;
        background:
            linear-gradient(90deg, rgba(143, 99, 217, .9), rgba(207, 196, 224, .62)) 0 0 / var(--genre-signal) 100% no-repeat,
            rgba(255, 255, 255, .07);
    }

    .home-page .live-dot {
        background: #9e7be0;
        box-shadow: none;
    }

    .home-page .feed-tabs-card .menu-link.active,
    .home-page .video-style-chip.active {
        border-color: rgba(143, 99, 217, .44);
        background: rgba(143, 99, 217, .14);
        box-shadow: none;
    }

    .home-page .feed-post-card .post-top::after {
        background: linear-gradient(90deg, rgba(143, 99, 217, .34), transparent);
    }

    .home-page .feed-post-card .post-action-like,
    .home-page .feed-post-card .post-comment-toggle {
        border-color: rgba(166, 150, 190, .16);
        color: #d9d0e5;
        background: rgba(255, 255, 255, .03);
        box-shadow: none;
    }
}

@media (max-width: 760px) {
    .home-page {
        background:
            radial-gradient(circle at 50% -10%, rgba(109, 73, 168, .2), transparent 38%),
            linear-gradient(180deg, #08080c, #030304 70%);
    }

    .home-page .layout {
        padding-bottom: calc(var(--mobile-nav-space) + 18px);
    }

    .home-page .home-hero-card.live-experience-hero {
        min-height: 230px;
        padding: 18px;
        border-color: rgba(166, 150, 190, .18);
        background-color: #09090d;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .home-page .home-hero-card.live-experience-hero::before {
        background:
            linear-gradient(180deg, rgba(5, 5, 8, .86), rgba(5, 5, 8, .94)),
            var(--hero-image);
        background-position: center, var(--hero-position-x) var(--hero-position-y);
        background-size: cover, cover;
        filter: saturate(.72) brightness(.78);
    }

    .home-page .hero-live-ambient,
    .home-page .hero-pulse-separator,
    .home-page .hero-genre-rotator,
    .home-page .hero-signal-counters,
    .home-page .home-hero-chips {
        display: none !important;
    }

    .home-page .home-hero-card .desktop-launch-only {
        display: none !important;
    }

    .home-page .home-hero-card .home-hero-actions.desktop-launch-only {
        display: grid !important;
    }

    .home-page .home-hero-card .mobile-hero-title {
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: clamp(1.7rem, 8vw, 2.35rem);
        line-height: 1.04;
    }

    .home-page .home-hero-card .mobile-hero-copy {
        color: #c9c1cf;
    }

    .home-page .home-hero-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 2px;
    }

    .home-page .home-hero-actions .launch-cta,
    .home-page .hero-inline-actions .launch-cta {
        min-height: 42px;
        border-radius: 10px;
        border-color: rgba(172, 154, 205, .22);
        background: rgba(255, 255, 255, .04);
        color: #eee8f7;
        box-shadow: none;
    }

    .home-page .home-hero-actions .launch-cta-primary,
    .home-page .home-hero-actions .launch-cta-studio {
        background: linear-gradient(135deg, #5f3f91, #2b2539);
    }

    .home-page .launch-command-strip {
        grid-template-columns: 1fr;
    }

    .home-page .launch-command-card,
    .home-page .community-live-strip,
    .home-page .launch-trust-strip,
    .home-page .home-live-deck,
    .home-page .post-card,
    .home-page .create-post,
    .home-page .widget {
        border-color: rgba(166, 150, 190, .16);
        background: linear-gradient(180deg, rgba(22, 21, 28, .84), rgba(9, 9, 12, .78));
        box-shadow: 0 14px 38px rgba(0, 0, 0, .36);
    }

    .home-page .launch-command-card::after,
    .home-page .home-live-deck::before {
        display: none;
    }

    .home-page .feed-tabs-card {
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }

    .home-page .feed-tabs-card .menu-link,
    .home-page .video-style-chip {
        white-space: nowrap;
    }
}

@media (max-width: 390px) {
    .home-page .home-hero-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sidebar .menu-link .notif-badge {
        position: static;
        margin-left: 4px;
        flex: 0 0 auto;
    }
}

/* Profile and legal layout hardening */
.profile-card {
    overflow: hidden;
}

.profile-cover-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 240px;
}

.profile-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.profile-card .profile-cover {
    display: block;
    width: 100%;
    height: clamp(150px, 18vw, 230px);
    max-width: 100%;
    max-height: 230px;
    object-fit: cover;
}

.profile-card .profile-avatar {
    width: 110px;
    height: 110px;
    min-width: 110px;
    max-width: 110px;
    min-height: 110px;
    max-height: 110px;
    object-fit: cover;
}

.profile-name,
.profile-bio,
.profile-status-pill,
.profile-social-counts {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .profile-card .profile-cover {
        height: 128px;
        min-height: 128px;
        max-height: 128px;
    }

    .profile-card .profile-avatar {
        width: 92px;
        height: 92px;
        min-width: 92px;
        max-width: 92px;
        min-height: 92px;
        max-height: 92px;
    }
}

@media (max-width: 420px) {
    .profile-card .profile-cover {
        height: 112px;
        min-height: 112px;
        max-height: 112px;
    }
}


.hashtag-link {
    color: #73f7ff;
    font-weight: 800;
    text-shadow: 0 0 14px rgba(115, 247, 255, 0.32);
}
.hashtag-link:hover { color: #f6c8ff; }
.discovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}
.discovery-actions form { margin: 0; min-width: 0; }
.discovery-actions .menu-link,
.discovery-actions button,
.discovery-state-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.1;
    white-space: nowrap;
}
.discovery-actions button { box-shadow: 0 6px 18px rgba(129, 49, 255, 0.28); }
.discovery-state-pill {
    border: 1px solid rgba(125, 240, 255, 0.42);
    background: rgba(56, 222, 255, 0.12);
    color: #dffcff;
    font-weight: 800;
}
.hashtag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hashtag-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(115, 247, 255, 0.36);
    background: rgba(27, 214, 255, 0.1);
    color: #dffcff;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(27, 214, 255, 0.14);
}
.hashtag-chip span {
    color: #c8badf;
    font-size: .78rem;
    font-weight: 700;
}
.suggested-user-mini {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.suggested-user-mini:last-child { border-bottom: 0; }
.suggested-user-mini p { margin: 3px 0 0; color: var(--muted); font-size: .86rem; }
.suggested-user-mini form { margin: 0; min-width: 0; }
.suggested-user-mini button { padding: 8px 10px; border-radius: 10px; font-size: .82rem; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mini-tags span {
    border: 1px solid rgba(230, 169, 255, 0.24);
    background: rgba(255,255,255,.05);
    color: #d9d1eb;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: .74rem;
}
.search-user-card.discovery-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 100%;
    border: 1px solid rgba(198,151,255,.28);
    border-radius: 16px;
    padding: 14px;
}
.search-user-card .avatar,
.search-user-card .avatar-fallback {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
}
@media (max-width: 520px) {
    .discovery-actions .menu-link,
    .discovery-actions button,
    .discovery-state-pill { flex: 1 1 calc(50% - 8px); }
    .suggested-user-mini { grid-template-columns: auto minmax(0, 1fr); }
    .suggested-user-mini form { grid-column: 2; }
    .suggested-user-mini button { width: 100%; }
}


/* Launch bug-fix pass */
.search-result-kicker { color: #73f7ff; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; }
.auth-box { overflow: hidden; }
.auth-form input { min-width: 0; }
.auth-form button:disabled { opacity: .72; cursor: wait; }
.auth-notice { border: 1px solid rgba(115, 247, 255, .22); background: rgba(33, 213, 255, .08); color: #dffcff; border-radius: 12px; padding: 10px 12px; line-height: 1.45; }
.profile-message-wrap, .compact-action-group { max-width: 100%; }
.compact-action-group form { display: inline-flex; min-width: 0; }
.compact-action-group .compact-action-btn, .profile-message-wrap .compact-action-link { width: auto; max-width: 100%; }
.event-cover-image { max-height: 340px; }
.share-row { align-items: stretch; }
.share-row .share-btn { flex: 0 1 auto; min-width: 112px; }
.arcade-player { overflow: hidden; }
.game-stage-wrap, .game-stage { min-width: 0; max-width: 100%; }
.game-stage canvas { max-height: min(360px, 52vh); }
#leaderboard-box { min-width: 0; overflow-x: auto; }
@media (max-width: 760px) {
    .event-cover-image { max-height: 220px; }
    .share-row .share-btn { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .compact-action-group { align-items: stretch; }
    .compact-action-group form, .compact-action-group .compact-action-btn, .profile-message-wrap .compact-action-link { flex: 1 1 calc(50% - 8px); }
    .auth-checkbox-row { grid-template-columns: 18px minmax(0, 1fr); gap: 9px; }
}
@media (max-width: 420px) {
    .share-row .share-btn, .compact-action-group form, .compact-action-group .compact-action-btn, .profile-message-wrap .compact-action-link { flex-basis: 100%; }
}

/* Discovery upgrades */
.discovery-page .hero-card h1 { margin-bottom: 8px; }
.discovery-grid,
.collab-grid,
.chart-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.discovery-stat-card,
.collab-card {
    border: 1px solid rgba(198,151,255,.28);
    background: radial-gradient(circle at 18% 10%, rgba(115,247,255,.1), transparent 44%), rgba(255,255,255,.035);
    border-radius: 16px;
    padding: 14px;
    min-width: 0;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(26, 10, 46, .32);
}
.discovery-stat-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.discovery-stat-card p,
.collab-card p { margin: 3px 0 0; color: var(--muted); font-size: .88rem; }
.chart-score {
    display: grid;
    justify-items: end;
    gap: 1px;
    color: #dffcff;
}
.chart-score strong { font-size: 1.3rem; color: #73f7ff; text-shadow: 0 0 14px rgba(115,247,255,.3); }
.chart-score span { color: var(--muted); font-size: .72rem; text-transform: uppercase; font-weight: 800; }
.collab-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}
.match-reasons,
.event-monetize-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.match-reasons span,
.event-monetize-link {
    border: 1px solid rgba(115,247,255,.34);
    background: rgba(33,213,255,.09);
    color: #dffcff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 800;
}
.profile-status-collab {
    border-color: rgba(115,247,255,.55);
    background: linear-gradient(135deg, rgba(33,213,255,.16), rgba(191,80,255,.14));
    box-shadow: 0 0 20px rgba(115,247,255,.14);
}
.profile-collab-link { margin-left: 6px; }
@media (max-width: 760px) {
    .discovery-grid,
    .collab-grid,
    .chart-chip-grid { grid-template-columns: 1fr; }
    .discovery-stat-card,
    .collab-card-head { grid-template-columns: auto minmax(0, 1fr); }
    .chart-score { grid-column: 1 / -1; justify-items: start; }
    .event-monetize-link { flex: 1 1 calc(50% - 8px); text-align: center; }
}

/* Focused launch UI cleanup */
.sidebar-more {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(202, 173, 255, 0.16);
}

.sidebar-more-link {
    flex: 1 1 auto;
    min-width: 62px;
    padding: 6px 7px;
    border-radius: 9px;
    border: 1px solid rgba(202, 173, 255, 0.16);
    background: rgba(255, 255, 255, 0.025);
    color: #cfc5e4;
    font-size: .72rem;
    line-height: 1.1;
    text-align: center;
}

.sidebar-more-link:hover,
.sidebar-more-link.active {
    border-color: rgba(115, 247, 255, 0.36);
    background: rgba(115, 247, 255, 0.08);
    color: #e8fbff;
}

.sidebar-logout-link {
    border-color: rgba(255, 92, 160, 0.24);
    color: #ffd4e8;
}

.embed-card {
    width: min(100%, 560px);
    max-width: 100%;
    padding: 8px;
    margin: 10px 0 4px;
}

.youtube-embed {
    width: 100%;
    max-width: 560px;
    max-height: 315px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

.youtube-embed iframe {
    width: 100%;
    height: 100%;
    max-height: 315px;
}

.auth-body .auth-page {
    background: transparent;
}

.auth-box {
    background: rgba(15, 10, 28, 0.84);
    border-color: rgba(202, 173, 255, 0.28);
}

.admin-page {
    gap: 12px;
}

.admin-page .post-card {
    padding: 14px;
    border-radius: 16px;
}

.admin-panel-head {
    display: grid;
    gap: 12px;
}

.admin-panel-head h2,
.admin-page h3,
.admin-page h4 {
    margin: 0;
}

.admin-page h3 {
    font-size: 1.08rem;
    color: #f2e8ff;
}

.admin-page h4 {
    margin-top: 14px;
    color: #dffcff;
    font-size: .94rem;
}

.admin-quick-actions,
.admin-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.admin-tab-menu {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    min-width: min(100%, 520px);
}

.admin-tab-menu .menu-link {
    display: grid;
    gap: 2px;
    width: auto;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 12px;
    line-height: 1.1;
}

.admin-tab-menu .menu-link span,
.admin-tab-menu .menu-link em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-tab-menu .menu-link em {
    color: #b7abc9;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-tab-menu .menu-link.active em {
    color: #dffcff;
}

.admin-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 9px;
}

.admin-tool-grid a {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(202, 173, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: #efe8ff;
}

.admin-tool-grid a:hover {
    border-color: rgba(115, 247, 255, 0.34);
    background: rgba(115, 247, 255, 0.07);
}

.admin-tool-grid strong {
    color: #f7efff;
}

.admin-tool-grid span {
    color: #bfb4cf;
    font-size: .84rem;
    line-height: 1.35;
}

.admin-quick-actions .menu-link,
.admin-page .admin-inline-actions .menu-link,
.admin-page button,
.admin-page .admin-filter-bar button {
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: .82rem;
    line-height: 1.1;
}

.admin-page .danger-btn {
    padding-inline: 10px;
}

.admin-filter-bar {
    margin: 9px 0 10px;
    gap: 8px;
    align-items: center;
}

.admin-filter-bar input,
.admin-filter-bar select,
.admin-table select {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: .9rem;
}

.admin-table th,
.admin-table td {
    padding: 7px 8px;
}

.admin-item {
    gap: 5px;
    padding: 10px 0;
    border-color: rgba(202, 173, 255, 0.13);
}

.charts-page {
    gap: 12px;
}

.charts-page .hero-card {
    min-height: 138px;
    max-height: 150px;
}

.charts-page .post-card {
    padding: 14px;
    border-radius: 16px;
}

.charts-page .post-card h2,
.collabs-page .post-card h2 {
    margin: 0 0 10px;
    font-size: 1.08rem;
}

.charts-page .discovery-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

.charts-page .discovery-stat-card {
    padding: 10px 11px;
    border-radius: 12px;
    box-shadow: none;
}

.charts-page .discovery-stat-card .avatar,
.charts-page .discovery-stat-card .avatar-fallback {
    width: 40px;
    height: 40px;
}

.charts-page .chart-score strong {
    font-size: 1.05rem;
}

.charts-page .chart-score span {
    font-size: .66rem;
}

.charts-page .chart-chip-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.charts-page .hashtag-chip {
    justify-content: space-between;
    padding: 7px 9px;
    border-radius: 11px;
    box-shadow: none;
}

.collabs-page {
    gap: 12px;
}

.collabs-page .post-card,
.collabs-page .widget {
    padding: 14px;
    border-radius: 16px;
}

.collabs-page .collab-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.collabs-page .collab-card {
    padding: 12px;
    border-radius: 13px;
    box-shadow: none;
}

.collabs-page .collab-card-head .avatar,
.collabs-page .collab-card-head .avatar-fallback {
    width: 44px;
    height: 44px;
}

.collabs-page .match-reasons {
    gap: 6px;
    margin-top: 9px;
}

.collabs-page .match-reasons span {
    padding: 4px 7px;
    font-size: .72rem;
}

.collabs-page .discovery-actions {
    gap: 6px;
    margin-top: 10px;
}

.collabs-page .discovery-actions .menu-link,
.collabs-page .discovery-actions button,
.collabs-page .discovery-state-pill {
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .76rem;
}

.collabs-page .discovery-actions button {
    box-shadow: none;
}

/* Consistent sidebar/footer polish */
.sidebar {
    overflow: hidden;
}

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

.sidebar .menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

.menu-link-label {
    min-width: 0;
}

.menu-link-studio-wip {
    align-items: flex-start;
}

.ptx-daw-status-badge {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(255, 197, 67, .55);
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(255, 197, 67, .12);
    color: #ffd86b;
    line-height: 1;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 14px rgba(255, 197, 67, .12);
}

.ptx-daw-status-badge b,
.ptx-daw-status-badge em {
    font-style: normal;
    font-weight: 950;
}

.ptx-daw-status-badge b {
    font-size: .58rem;
    letter-spacing: .08em;
}

.ptx-daw-status-badge em {
    color: #ffe5a6;
    font-size: .56rem;
}

.menu-link-build {
    flex: 0 0 auto;
    margin-left: auto;
}

.sidebar-more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(202, 173, 255, 0.16);
}

.sidebar-more-link {
    min-width: 0;
    max-width: 100%;
    padding: 6px 7px;
    border-radius: 9px;
    border: 1px solid rgba(202, 173, 255, 0.16);
    background: rgba(255, 255, 255, 0.025);
    color: #cfc5e4;
    font-size: .72rem;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-more-link:hover,
.sidebar-more-link.active {
    border-color: rgba(115, 247, 255, 0.36);
    background: rgba(115, 247, 255, 0.08);
    color: #e8fbff;
}

.sidebar-logout-link {
    grid-column: 1 / -1;
    border-color: rgba(255, 92, 160, 0.24);
    color: #ffd4e8;
}

.embed-card {
    width: min(100%, 520px);
    max-width: 100%;
    padding: 8px;
    margin: 10px 0 4px;
}

.youtube-embed {
    width: 100%;
    max-width: 520px;
    max-height: 292px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

.youtube-embed iframe {
    width: 100%;
    height: 100%;
    max-height: 292px;
}

.message-bubble .embed-card,
.comment-body .embed-card {
    width: min(100%, 420px);
}

.message-bubble .youtube-embed,
.comment-body .youtube-embed {
    max-width: 420px;
    max-height: 236px;
}

.admin-page {
    gap: 12px;
}

.admin-page .post-card {
    padding: 14px;
    border-radius: 16px;
}

.admin-panel-head,
.admin-section {
    background:
        linear-gradient(135deg, rgba(115, 247, 255, 0.045), rgba(217, 70, 239, 0.035)),
        var(--panel);
}

.admin-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.admin-panel-head h2,
.admin-page h3,
.admin-page h4,
.admin-page p {
    margin-top: 0;
}

.admin-panel-head .muted {
    margin-bottom: 0;
}

.admin-quick-actions,
.admin-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.admin-quick-actions .menu-link,
.admin-page .admin-inline-actions .menu-link,
.admin-page button,
.admin-page .admin-filter-bar button {
    width: auto;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: .8rem;
    line-height: 1.1;
    box-shadow: 0 6px 18px rgba(129, 49, 255, 0.22);
}

.admin-page .danger-btn {
    padding-inline: 10px;
    box-shadow: 0 6px 18px rgba(196, 17, 106, 0.28);
}

.admin-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-section-head h3 {
    margin-bottom: 3px;
    font-size: 1.04rem;
    color: #f5ecff;
}

.admin-section-head .muted {
    margin: 0;
    font-size: .84rem;
}

.admin-section-kicker {
    color: #73f7ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-filter-bar {
    margin: 8px 0 10px;
    gap: 8px;
    align-items: center;
}

.admin-filter-bar input,
.admin-filter-bar select,
.admin-table select {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: .88rem;
}

.admin-table-wrap {
    border: 1px solid rgba(202, 173, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.admin-table th,
.admin-table td {
    padding: 8px 9px;
    border-bottom-color: rgba(202, 173, 255, 0.1);
}

.admin-table form {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-list {
    display: grid;
    gap: 8px;
}

.admin-item {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(202, 173, 255, 0.13);
    border-radius: 12px;
    background: rgba(7, 5, 14, 0.24);
}

.admin-item + .admin-item {
    margin-top: 0;
}

.admin-item strong {
    color: #f7efff;
}

.admin-item .menu-link {
    display: inline-flex;
    width: auto;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: .82rem;
}

.admin-item-preview {
    color: #efe8ff;
    line-height: 1.45;
}

.admin-report-item {
    border-color: rgba(115, 247, 255, 0.2);
    background: linear-gradient(135deg, rgba(115, 247, 255, 0.055), rgba(255, 255, 255, 0.025));
}

.admin-subsection {
    display: grid;
    gap: 8px;
}

.admin-subsection + .admin-subsection {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(202, 173, 255, 0.12);
}

.admin-subsection h4 {
    margin: 0;
    color: #dffcff;
    font-size: .92rem;
}

@media (max-width: 900px) {
    .admin-panel-head {
        grid-template-columns: 1fr;
    }

    .admin-tab-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
    }
}

/* PULSATRAX Studio level polish: Beginner help, Pro MIDI tab, readable right panels, sane center scroll. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
    height: calc(100dvh - 150px) !important;
    min-height: min(560px, calc(100dvh - 120px)) !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    grid-template-rows: 38px minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(250px, 18vw, 320px) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 18vw, 320px) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-columns: clamp(220px, 16vw, 290px) minmax(0, 1fr) clamp(220px, 15vw, 260px) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer {
    display: grid !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    border-color: rgba(255, 91, 224, .24) !important;
}

.studio-ready body.studio-app-body .studio-app:not(.is-studio-level-owner) .studio-project-drawer,
.studio-ready body.studio-app-body .studio-app:not(.is-studio-level-owner) #studio-debug-panel {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.studio-ready body.studio-app-body .studio-beginner-help-panel {
    display: none;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(70, 255, 154, .22) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(6, 18, 18, .97), rgba(5, 9, 18, .97)) !important;
    box-shadow: inset 0 0 0 1px rgba(33, 212, 253, .08), 0 14px 34px rgba(0, 0, 0, .32) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel .studio-panel-title {
    align-items: start !important;
    margin-bottom: 8px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel ol {
    display: grid !important;
    gap: 7px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 2px 0 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel li {
    padding: 6px 7px !important;
    border: 1px solid rgba(124, 247, 255, .12) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .035) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel strong,
.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel span {
    display: block !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel strong {
    color: #eafff6 !important;
    font-size: .72rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel span {
    margin-top: 2px !important;
    color: rgba(232, 238, 247, .72) !important;
    font-size: .63rem !important;
    line-height: 1.28 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-right-panel-tabs,
.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-work-panel:not(.studio-playlist-panel) {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs {
    align-self: stretch !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-right-panel-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    border-color: rgba(255, 91, 224, .28) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-right-panel-tabs [data-right-panel="automation"],
.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-right-panel-tabs [data-right-panel="midi"] {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs [data-right-panel="automation"],
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs [data-right-panel="midi"] {
    display: block !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs button {
    height: 28px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    align-content: start !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(7, 10, 22, .98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active {
    border-color: rgba(255, 91, 224, .24) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 91, 224, .08) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel:not(.studio-playlist-panel):not(.is-right-active) {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-midi-panel-body {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-midi-controls,
.studio-ready body.studio-app-body .studio-midi-grid {
    grid-template-columns: 1fr !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
    min-height: 240px !important;
    overflow: auto !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-section-navigator {
    flex: 0 0 auto !important;
}

@media (max-width: 900px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
        height: auto !important;
        min-height: calc(100dvh - 96px) !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(440px, 62vh) auto minmax(220px, 30vh) !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        min-height: 220px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-playlist-panel {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        min-height: 220px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* PULSATRAX Studio level separation and right-column containment. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
    height: auto !important;
    min-height: 32px !important;
    align-self: start !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sampler-panel,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    background: rgba(7, 10, 22, .96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 0 0 1px rgba(118, 145, 255, .16) !important;
    overflow: auto !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-daw-grid {
    grid-template-columns: clamp(240px, 20vw, 340px) minmax(0, 1fr) 0 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-right-panel-tabs,
.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-work-panel:not(.studio-playlist-panel) {
    display: none !important;
    pointer-events: none !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser,
.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-browser,
.studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-browser,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-browser {
    display: grid !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-sample-list,
.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-sample-list,
.studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-sample-list,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-sample-list {
    display: block !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-daw-grid {
    grid-template-columns: clamp(225px, 16vw, 295px) minmax(0, 1fr) 0 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(230px, 17vw, 310px) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-right-panel-tabs [data-right-panel="automation"] {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-daw-grid,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-columns: clamp(245px, 18vw, 330px) minmax(0, 1fr) 0 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-workspace,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 20vw, 360px) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-right-panel-tabs,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-right-panel-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-layout-controls {
    box-shadow: inset 0 -1px 0 rgba(255, 91, 224, .18) !important;
}

@media (max-width: 900px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(440px, 62vh) auto minmax(220px, 30vh) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
        grid-template-rows: minmax(440px, 68vh) !important;
    }
}

@media (max-width: 560px) {
    .admin-tab-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Messages panel usability pass: keep chat actions visible and touch-friendly. */
body.messages-page .messages-thread {
    min-height: 0;
}

body.messages-page .thread-header {
    isolation: isolate;
}

body.messages-page .message-call-actions button,
body.messages-page .messages-profile-jump {
    touch-action: manipulation;
}

@media (max-width: 760px) {
    body.messages-page .messages-command-layout,
    body.messages-page .messages-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.messages-page .messages-sidebar {
        order: 3 !important;
        max-height: 30vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.1) !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        overscroll-behavior: contain;
    }

    body.messages-page .messages-thread {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.messages-page .thread-header {
        position: sticky !important;
        top: 8px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        padding: 9px !important;
        z-index: 20 !important;
    }

    body.messages-page .thread-peer-summary {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    body.messages-page .message-thread-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 7px !important;
        width: 100% !important;
    }

    body.messages-page .message-call-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        width: 100% !important;
    }

    body.messages-page .message-call-actions button,
    body.messages-page .messages-profile-jump {
        min-height: 42px !important;
        width: 100% !important;
        padding: 8px 9px !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.messages-page .message-bubbles {
        min-height: 42vh !important;
        max-height: 48vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
    }

    body.messages-page .message-bubble {
        max-width: 92% !important;
    }

    body.messages-page .message-compose-tools {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body.messages-page .message-form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

@media (max-width: 420px) {
    body.messages-page .message-thread-actions {
        grid-template-columns: 1fr !important;
    }

    body.messages-page .messages-profile-jump {
        order: 2;
    }
}

/* Final PULSATRAX Studio loop library row flow. Keep last: older DAW blocks define conflicting grids. */
.studio-ready body.studio-app-body .studio-sample-list,
.studio-ready .studio-sample-list {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-sample-item,
.studio-ready .studio-sample-item {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) 64px 28px !important;
    grid-template-rows: 46px 22px 30px minmax(0, auto) !important;
    grid-template-areas:
        "drag main main fav"
        "drag meta meta meta"
        "preview preview add add"
        "error error error error" !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 132px !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.studio-ready .studio-sample-item > * {
    min-width: 0 !important;
}

.studio-ready .studio-sample-item .studio-drag-handle {
    grid-area: drag !important;
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 100% !important;
    min-height: 48px !important;
}

.studio-ready .studio-sample-main {
    grid-area: main !important;
    display: grid !important;
    align-content: center !important;
    min-height: 42px !important;
    max-width: 100% !important;
    padding: 5px 7px 8px !important;
    overflow: hidden !important;
}

.studio-ready .studio-sample-main strong {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready .studio-sample-main .studio-mini-wave {
    height: 14px !important;
    margin-top: 4px !important;
}

.studio-ready .studio-sample-tags,
.studio-ready .studio-sample-category {
    display: none !important;
}

.studio-ready .studio-sample-meta {
    grid-area: meta !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.studio-ready .studio-sample-meta b {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 4px 5px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .52rem !important;
}

.studio-ready .studio-preview-btn {
    grid-area: preview !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 8px !important;
}

.studio-ready .studio-preview-btn .studio-preview-label {
    display: inline !important;
}

.studio-ready .studio-clip-btn {
    grid-area: add !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 8px !important;
}

.studio-ready .studio-fav-btn {
    grid-area: fav !important;
    position: static !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    justify-self: end !important;
}

.studio-ready .studio-sample-error {
    grid-area: error !important;
    min-height: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .studio-ready body.studio-app-body .studio-sample-item,
    .studio-ready .studio-sample-item {
        grid-template-columns: 16px minmax(0, 1fr) 56px 28px !important;
    }

    .studio-ready .studio-sample-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .studio-ready .studio-sample-meta b[data-meta="key"] {
        display: none !important;
    }
}

@media (max-width: 1150px) {
    .sidebar-more {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .sidebar-more-link {
        min-width: 0;
        padding: 6px 3px;
        font-size: .66rem;
    }
}

@media (max-width: 760px) {
    .sidebar-more {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 4px;
        padding-top: 6px;
    }

    .sidebar-more-link {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 4px;
    }

    .sidebar-logout-link {
        grid-column: 1 / -1;
    }

    .embed-card {
        width: min(100%, 520px);
        padding: 6px;
    }

    .youtube-embed,
    .youtube-embed iframe {
        max-height: 292px;
    }

    .admin-page .post-card,
    .charts-page .post-card,
    .collabs-page .post-card {
        padding: 12px;
    }

    .admin-filter-bar button,
    .admin-page button,
    .admin-page .admin-inline-actions .menu-link {
        width: auto;
        flex: 1 1 auto;
    }

    .charts-page .hero-card {
        min-height: 118px;
        max-height: none;
    }

    .charts-page .discovery-grid,
    .charts-page .chart-chip-grid,
    .collabs-page .collab-grid {
        grid-template-columns: 1fr;
    }

    .collabs-page .discovery-actions .menu-link,
    .collabs-page .discovery-actions button,
    .collabs-page .discovery-state-pill {
        flex: 0 1 auto;
    }
}

/* Shared sidebar footer: keep legal/logout links out of the primary app nav. */
.sidebar {
    display: grid;
    gap: 0;
}

.sidebar-footer {
    min-width: 0;
    max-width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(202, 173, 255, 0.16);
}

.sidebar-legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sidebar-legal-link,
.legal-inline-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    min-height: 26px;
    padding: 5px 8px;
    border-radius: 999px;
    line-height: 1.1;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.sidebar-legal-link {
    border: 1px solid rgba(202, 173, 255, 0.18);
    background: rgba(255, 255, 255, 0.026);
    color: #d6cce8;
}

.sidebar-legal-link:hover,
.sidebar-legal-link.active {
    border-color: rgba(115, 247, 255, 0.36);
    background: rgba(115, 247, 255, 0.08);
    color: #e8fbff;
}

.sidebar-logout-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 26px;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 999px;
    line-height: 1.1;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    border-color: rgba(255, 92, 160, 0.28);
    border: 1px solid rgba(255, 92, 160, 0.28);
    background: rgba(255, 92, 160, 0.045);
    color: #ffd4e8;
}

.legal-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 100%;
    min-width: 0;
}

.legal-footer {
    width: 100%;
    margin: 4px 0 10px;
}

.embed-card {
    width: min(100%, 440px);
    max-width: 100%;
    padding: 7px;
}

.youtube-embed {
    max-width: 440px;
    max-height: 248px;
}

.youtube-embed iframe {
    max-height: 248px;
}

.message-bubble .embed-card,
.comment-body .embed-card {
    width: min(100%, 360px);
}

.message-bubble .youtube-embed,
.comment-body .youtube-embed {
    max-width: 360px;
    max-height: 203px;
}

.admin-page {
    gap: 10px;
}

.admin-page .post-card {
    padding: 12px;
    border-radius: 14px;
}

.admin-panel-head,
.admin-section {
    border-color: rgba(202, 173, 255, 0.18);
}

.admin-section-head {
    margin-bottom: 8px;
}

.admin-section-head h3 {
    font-size: 1rem;
}

.admin-section-head .muted {
    font-size: .8rem;
    line-height: 1.35;
}

.admin-filter-bar {
    margin: 7px 0 9px;
}

.admin-filter-bar input,
.admin-filter-bar select,
.admin-table select {
    min-height: 30px;
    padding: 6px 9px;
}

.admin-page button,
.admin-page .admin-filter-bar button,
.admin-page .admin-inline-actions .menu-link,
.admin-quick-actions .menu-link {
    min-height: 28px;
    padding: 5px 9px;
    font-size: .76rem;
    border-radius: 8px;
}

.admin-table th,
.admin-table td {
    padding: 6px 8px;
    font-size: .88rem;
}

.admin-list {
    gap: 7px;
}

.admin-item {
    padding: 9px;
    border-radius: 10px;
}

.admin-item-preview {
    font-size: .9rem;
    line-height: 1.38;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.charts-page,
.collabs-page {
    gap: 10px;
}

.charts-page .hero-card,
.collabs-page .hero-card {
    min-height: 112px;
    max-height: 132px;
    padding: 22px;
}

.charts-page .hero-card h1,
.collabs-page .hero-card h1 {
    font-size: clamp(1.5rem, 2.1vw, 2.05rem);
}

.charts-page .hero-card p,
.collabs-page .hero-card p {
    margin: 6px 0 0;
    font-size: .9rem;
}

.charts-page .post-card,
.collabs-page .post-card,
.collabs-page .widget {
    padding: 12px;
    border-radius: 14px;
}

.charts-page .discovery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 7px;
}

.charts-page .discovery-stat-card {
    padding: 9px;
    gap: 8px;
}

.charts-page .discovery-stat-card .avatar,
.charts-page .discovery-stat-card .avatar-fallback,
.collabs-page .collab-card-head .avatar,
.collabs-page .collab-card-head .avatar-fallback {
    width: 36px;
    height: 36px;
}

.collabs-page .collab-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.collabs-page .collab-card {
    padding: 10px;
}

.collabs-page .collab-card-head {
    gap: 8px;
}

.collabs-page .match-reasons {
    margin-top: 7px;
}

@media (max-width: 1150px) {
    .sidebar-legal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 148px;
    }

    .sidebar {
        gap: 4px;
    }

    .sidebar-footer {
        margin-top: 4px;
        padding-top: 5px;
    }

    .sidebar-legal-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .sidebar-legal-link {
        min-height: 24px;
        padding: 4px 3px;
        font-size: clamp(.56rem, 2.2vw, .66rem);
    }

    .sidebar-logout-link {
        min-height: 24px;
        margin-top: 5px;
        padding: 4px 3px;
        font-size: clamp(.56rem, 2.2vw, .66rem);
    }

    .charts-page .hero-card,
    .collabs-page .hero-card {
        min-height: 104px;
        padding: 18px;
    }

    .charts-page .discovery-grid,
    .collabs-page .collab-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 761px) {
    .hero-card.home-hero-card {
        min-height: 310px;
        max-height: none;
        padding: 34px;
        align-items: stretch;
    }

    .hero-card.home-hero-card::before {
        background:
            linear-gradient(90deg, rgba(3, 5, 12, 0.95) 0%, rgba(7, 9, 22, 0.78) 42%, rgba(95, 18, 126, 0.34) 68%, rgba(3, 5, 12, 0.9) 100%),
            repeating-linear-gradient(90deg, rgba(119, 245, 255, 0.08) 0 1px, transparent 1px 64px),
            repeating-linear-gradient(0deg, rgba(255, 52, 210, 0.06) 0 1px, transparent 1px 42px);
    }

    .hero-card.home-hero-card h1 {
        max-width: 720px;
        font-size: clamp(2.35rem, 4vw, 4.45rem);
        line-height: .96;
    }

    .hero-card.home-hero-card p {
        max-width: 600px;
        margin: 0;
        font-size: 1.02rem;
        line-height: 1.55;
    }
}

/* Final launch polish overrides */
@media (min-width: 761px) {
    .hero-card.home-hero-card {
        min-height: 330px;
        border-color: rgba(115, 247, 255, .38);
        box-shadow: 0 0 0 1px rgba(255, 43, 214, .1), 0 26px 70px rgba(3, 5, 14, .62), 0 0 42px rgba(115, 247, 255, .12);
    }

    .hero-card.home-hero-card::after {
        background:
            radial-gradient(circle at 82% 22%, rgba(115, 247, 255, .24), transparent 26%),
            linear-gradient(180deg, transparent 0%, rgba(255, 43, 214, .1) 48%, rgba(3, 5, 12, .58) 100%);
        opacity: 1;
    }

    .launch-cta {
        min-height: 42px;
        border-radius: 10px;
        letter-spacing: 0;
    }

    .launch-cta-primary {
        border-color: rgba(115, 247, 255, .72);
        background: linear-gradient(135deg, rgba(115, 247, 255, .95), rgba(255, 43, 214, .9));
        color: #070914;
    }
}

.profile-type-pill {
    border-color: rgba(255, 59, 214, .42);
    background: linear-gradient(135deg, rgba(255, 43, 214, .15), rgba(115, 247, 255, .1));
    color: #f8e9ff;
}

.admin-quick-actions .menu-link,
.admin-page button,
.admin-page .admin-inline-actions .menu-link,
.branding-upload-btn {
    cursor: pointer;
    border-color: rgba(115, 247, 255, .34);
}

.charts-page .discovery-grid {
    grid-template-columns: 1fr;
}

.charts-page .discovery-stat-card {
    min-height: 58px;
    border-radius: 10px;
}

.collabs-page .collab-card {
    border-radius: 12px;
}

.collab-actions-menu summary {
    cursor: pointer;
}

/* PULSATRAX live experience pass */
@keyframes ptAuroraDrift {
    0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .55; }
    50% { transform: translate3d(2%, 1%, 0) scale(1.04); opacity: .78; }
    100% { transform: translate3d(-1%, 2%, 0) scale(1.01); opacity: .6; }
}

@keyframes ptPulseLine {
    0% { transform: translateX(-18%); opacity: .28; }
    50% { opacity: .95; }
    100% { transform: translateX(118%); opacity: .22; }
}

@keyframes ptParticleFloat {
    0% { transform: translate3d(0, 0, 0) scale(.85); opacity: .22; }
    45% { opacity: .78; }
    100% { transform: translate3d(var(--particle-x, 34px), var(--particle-y, -28px), 0) scale(1.18); opacity: .12; }
}

@keyframes ptLiveBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(115, 247, 255, .38), 0 0 12px rgba(115, 247, 255, .5); }
    50% { box-shadow: 0 0 0 6px rgba(115, 247, 255, 0), 0 0 22px rgba(255, 43, 214, .5); }
}

@keyframes ptGenreRotate {
    0%, 16% { opacity: 1; transform: translateY(0); }
    20%, 100% { opacity: 0; transform: translateY(-18px); }
}

@keyframes ptBarSweep {
    0% { background-position: 0 0; }
    100% { background-position: 42px 0; }
}

@keyframes ptLiveFlash {
    0% { filter: brightness(1); transform: translateY(0); }
    35% { filter: brightness(1.45); transform: translateY(-1px); }
    100% { filter: brightness(1); transform: translateY(0); }
}

@keyframes ptToastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ptToastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 43, 214, .12), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(115, 247, 255, .12), transparent 30%),
        linear-gradient(115deg, rgba(5, 7, 18, 0), rgba(115, 247, 255, .035), rgba(255, 43, 214, .028), rgba(5, 7, 18, 0));
    background-size: 100% 100%, 100% 100%, 220% 220%;
    animation: ptAuroraDrift 13s ease-in-out infinite alternate;
}

.live-experience-hero {
    isolation: isolate;
    overflow: hidden;
}

.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(2, 4, 12, .98), rgba(6, 9, 22, .78) 42%, rgba(81, 21, 122, .28) 65%, rgba(2, 4, 12, .86)),
        repeating-linear-gradient(90deg, rgba(115, 247, 255, .09) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(255, 43, 214, .06) 0 1px, transparent 1px 42px),
        var(--hero-image);
    background-position: center, center, center, var(--hero-position-x) var(--hero-position-y);
    background-size: cover, auto, auto, cover;
}

.hero-live-ambient,
.hero-live-ambient span {
    position: absolute;
    pointer-events: none;
}

.hero-live-ambient {
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-particle {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #73f7ff;
    box-shadow: 0 0 16px #73f7ff, 0 0 30px rgba(255, 43, 214, .48);
    animation: ptParticleFloat 5.4s ease-in-out infinite alternate;
}

.hero-particle-a { left: 58%; top: 22%; --particle-x: 42px; --particle-y: -18px; }
.hero-particle-b { left: 82%; top: 56%; --particle-x: -36px; --particle-y: 24px; animation-delay: -1.7s; background: #ff5bd6; }
.hero-particle-c { left: 70%; top: 76%; --particle-x: 18px; --particle-y: -44px; animation-delay: -3s; }

.hero-scanline {
    left: -20%;
    right: auto;
    top: 58%;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(115, 247, 255, .9), rgba(255, 43, 214, .8), transparent);
    animation: ptPulseLine 5.8s linear infinite;
}

.home-hero-content {
    position: relative;
    z-index: 1;
}

.hero-genre-rotator {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 31px;
    margin-top: 2px;
}

.hero-genre-label {
    color: #b6a7d5;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hero-genre-stack {
    position: relative;
    min-width: 190px;
    height: 28px;
    overflow: hidden;
}

.hero-genre-stack span {
    position: absolute;
    inset: 0 auto auto 0;
    opacity: 0;
    color: #73f7ff;
    font-size: 1.02rem;
    font-weight: 950;
    text-shadow: 0 0 18px rgba(115, 247, 255, .38);
    animation: ptGenreRotate 15s ease-in-out infinite;
    animation-delay: calc(var(--genre-index) * 3s);
}

.hero-pulse-separator {
    position: relative;
    width: min(520px, 100%);
    height: 14px;
    overflow: hidden;
}

.hero-pulse-separator::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 1px;
    background: linear-gradient(90deg, rgba(115, 247, 255, .7), rgba(255, 43, 214, .78), transparent);
}

.hero-pulse-separator span {
    position: absolute;
    top: 3px;
    left: 0;
    width: 68px;
    height: 7px;
    border-radius: 999px;
    background: rgba(115, 247, 255, .74);
    filter: blur(5px);
    animation: ptPulseLine 4.4s ease-in-out infinite;
}

.hero-signal-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(84px, 1fr));
    gap: 8px;
    width: min(560px, 100%);
}

.hero-signal-counters div {
    padding: 8px 10px;
    border: 1px solid rgba(115, 247, 255, .22);
    border-radius: 10px;
    background: rgba(4, 8, 18, .52);
}

.hero-signal-counters strong {
    display: block;
    color: #f8eaff;
    font-size: 1.15rem;
    line-height: 1;
}

.hero-signal-counters span {
    color: #bda8d9;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-live-deck {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(115, 247, 255, .2);
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(115, 247, 255, .05), rgba(255, 43, 214, .045)),
        rgba(9, 7, 22, .82);
    overflow: hidden;
}

.launch-command-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.launch-command-card {
    position: relative;
    min-width: 0;
    min-height: 118px;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 15px;
    border: 1px solid rgba(202, 173, 255, .2);
    border-radius: 14px;
    color: #f3ecff;
    text-decoration: none;
    background:
        linear-gradient(145deg, rgba(16, 12, 31, .86), rgba(8, 12, 27, .82)),
        radial-gradient(circle at 100% 0%, rgba(115, 247, 255, .1), transparent 38%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.launch-command-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(115, 247, 255, .85), rgba(255, 43, 214, .72), transparent);
    opacity: .68;
}

.launch-command-card:hover {
    transform: translateY(-2px);
    border-color: rgba(115, 247, 255, .42);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .4), 0 0 24px rgba(115, 247, 255, .12);
}

.launch-command-card span {
    color: #79f7ff;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.launch-command-card strong {
    color: #fff;
    font-size: 1rem;
    line-height: 1.15;
}

.launch-command-card p {
    margin: 0;
    color: #cfc6e5;
    font-size: .84rem;
    line-height: 1.45;
}

.ptx-daw-alpha-note {
    display: grid;
    gap: 4px;
    margin: 2px 0;
    max-width: 100%;
}

.ptx-daw-alpha-note b,
.ptx-daw-alpha-note em {
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(255, 197, 67, .5);
    border-radius: 7px;
    background:
        linear-gradient(135deg, rgba(255, 197, 67, .18), rgba(255, 107, 43, .08)),
        rgba(17, 12, 22, .72);
    color: #ffd86b;
    box-shadow: 0 0 16px rgba(255, 197, 67, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ptx-daw-alpha-note b {
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.ptx-daw-alpha-note em {
    padding: 3px 7px;
    color: #ffe6a3;
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
}

.ptx-daw-alpha-note small {
    display: block;
    max-width: 42rem;
    color: #d8cdb0;
    font-size: .76rem;
    line-height: 1.35;
}

.studio-build-badge {
    margin-left: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}

.launch-command-card-primary {
    border-color: rgba(115, 247, 255, .38);
    background:
        linear-gradient(145deg, rgba(20, 16, 43, .9), rgba(5, 14, 27, .88)),
        radial-gradient(circle at 20% 0%, rgba(255, 43, 214, .18), transparent 42%);
}

.hero-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.launch-cta-studio {
    background: linear-gradient(135deg, rgba(255, 240, 108, .95), rgba(115, 247, 255, .95));
    box-shadow: 0 0 24px rgba(255, 240, 108, .18), 0 0 26px rgba(115, 247, 255, .18);
}

.home-live-deck::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(115, 247, 255, .08) 0 1px, transparent 1px 38px);
    opacity: .22;
    pointer-events: none;
}

.live-deck-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f6eaff;
}

.live-deck-head strong {
    text-transform: uppercase;
    font-size: .78rem;
}

.live-deck-head span:last-child {
    color: #a99ac2;
    font-size: .76rem;
}

.live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #73f7ff;
    animation: ptLiveBlink 1.7s ease-in-out infinite;
}

.presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    color: #a99ac2;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.2;
    transition: color .18s ease, opacity .18s ease;
}

.presence-chip .online-dot {
    flex: 0 0 auto;
}

.presence-chip.is-online {
    color: #dfffff;
}

.presence-chip.is-online .online-dot {
    background: #22ff88 !important;
    box-shadow: 0 0 10px rgba(34, 255, 136, .85);
    border-color: rgba(210, 255, 230, .85);
}

.presence-chip.is-offline .online-dot {
    background: #7d738c !important;
    box-shadow: 0 0 0 2px rgba(125, 115, 140, .12);
    border-color: rgba(190, 181, 206, .38);
    animation: none;
}

.profile-presence {
    margin-top: 2px;
}

.card-presence,
.message-presence {
    margin: 4px 0 6px;
}

.message-presence {
    font-size: .68rem;
}

.tiny-dot {
    width: 7px;
    height: 7px;
    margin-right: 5px;
}

.live-signal-rail {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.live-signal-card {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(202, 173, 255, .18);
    border-radius: 11px;
    background: rgba(255, 255, 255, .035);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.live-signal-card:hover {
    transform: translateY(-2px);
    border-color: rgba(115, 247, 255, .45);
    background: rgba(115, 247, 255, .07);
}

.live-signal-card span,
.live-signal-card em {
    color: #a99ac2;
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.live-signal-card strong {
    color: #f7efff;
    font-size: .86rem;
    line-height: 1.25;
}

.is-live-updated {
    animation: ptLiveFlash .85s ease;
}

.live-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 86px;
    z-index: 80;
    display: grid;
    gap: 8px;
    width: min(290px, calc(100vw - 28px));
    pointer-events: none;
}

.live-toast {
    padding: 10px 12px;
    border: 1px solid rgba(115, 247, 255, .32);
    border-radius: 12px;
    color: #f7efff;
    background:
        linear-gradient(110deg, rgba(115, 247, 255, .1), rgba(255, 43, 214, .08)),
        rgba(9, 7, 22, .94);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .34), 0 0 22px rgba(115, 247, 255, .12);
    font-size: .84rem;
    font-weight: 850;
    transform: translateY(8px);
    opacity: 0;
    animation: ptToastIn .22s ease forwards;
}

.live-toast.is-leaving {
    animation: ptToastOut .22s ease forwards;
}

.notification-item {
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.notification-item.is-unread {
    animation: ptLiveFlash .9s ease;
}

.feed-post-card,
.search-user-card,
.discovery-stat-card,
.collab-card,
.search-post-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.feed-post-card:hover,
.search-user-card:hover,
.discovery-stat-card:hover,
.collab-card:hover,
.search-post-card:hover {
    transform: translateY(-2px);
    border-color: rgba(115, 247, 255, .38);
    box-shadow: 0 16px 38px rgba(3, 7, 18, .42), 0 0 24px rgba(115, 247, 255, .09), inset 0 0 0 1px rgba(255, 43, 214, .06);
}

.feed-post-card .post-top {
    position: relative;
}

.feed-post-card .post-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 1px;
    background: linear-gradient(90deg, rgba(115, 247, 255, .38), rgba(255, 43, 214, .34), transparent);
    opacity: .55;
}

.embed-card {
    border-color: rgba(115, 247, 255, .22);
    background: linear-gradient(135deg, rgba(115, 247, 255, .045), rgba(255, 43, 214, .04)), rgba(5, 7, 18, .72);
}

.premium-widget,
.discovery-page .post-card,
.discovery-rightbar .widget {
    position: relative;
    overflow: hidden;
}

.premium-widget::before,
.discovery-page .post-card::before,
.discovery-rightbar .widget::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(115, 247, 255, .06) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .42s ease;
}

.premium-widget:hover::before,
.discovery-page .post-card:hover::before,
.discovery-rightbar .widget:hover::before {
    transform: translateX(120%);
}

.trend-item {
    position: relative;
}

.trend-movement {
    align-self: center;
    padding: 3px 6px;
    border: 1px solid rgba(115, 247, 255, .28);
    border-radius: 999px;
    color: #73f7ff;
    font-size: .66rem;
    font-weight: 950;
}

.genre-signal-bar {
    flex: 1 0 100%;
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(115, 247, 255, .92), rgba(255, 43, 214, .78)) 0 0 / var(--genre-signal) 100% no-repeat,
        rgba(255, 255, 255, .07);
    box-shadow: 0 0 12px rgba(115, 247, 255, .16);
}

.genre-trend-item:hover .genre-signal-bar {
    background-image:
        linear-gradient(90deg, rgba(115, 247, 255, .95), rgba(255, 43, 214, .9)),
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, .16) 8px 10px);
    animation: ptBarSweep 1.2s linear infinite;
}

.genre-widget .genre-trend-item {
    display: block;
    padding: 9px 0;
    margin: 0;
    color: inherit;
    text-decoration: none;
}

.genre-widget .genre-trend-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px 10px;
    align-items: center;
    width: 100%;
}

.genre-widget .genre-trend-content strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #f8f4ff;
    font-size: .9rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.genre-widget .genre-trend-content p {
    margin: 0;
    color: #c9bfdc;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.genre-widget .genre-signal-bar {
    grid-column: 1 / -1;
    height: 7px;
    margin-top: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    background:
        linear-gradient(90deg, rgba(115, 247, 255, .9), rgba(255, 91, 214, .78)) 0 0 / var(--genre-signal) 100% no-repeat,
        rgba(255, 255, 255, .075);
}

.genre-chart-list {
    display: grid;
    gap: 9px;
}

.genre-chart-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) max-content;
    gap: 6px 12px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(115, 247, 255, .16);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, .035);
}

.genre-chart-row:hover {
    border-color: rgba(115, 247, 255, .34);
    background: rgba(115, 247, 255, .065);
}

.genre-chart-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #f8f4ff;
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.genre-chart-meta,
.genre-chart-score {
    color: #c9bfdc;
    font-size: .72rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.genre-chart-bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(115, 247, 255, .92), rgba(255, 91, 214, .72)) 0 0 / var(--genre-chart) 100% no-repeat,
        rgba(255, 255, 255, .075);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
}

.genre-chart-score {
    align-self: center;
}

@media (max-width: 520px) {
    .genre-chart-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .genre-chart-meta,
    .genre-chart-score {
        text-align: left;
    }
}

.top-creator-item,
.event-countdown-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 8px;
    border-radius: 11px;
    color: #f7efff;
    border: 1px solid rgba(202, 173, 255, .14);
    background: rgba(255, 255, 255, .03);
    margin-top: 7px;
}

.top-creator-item:hover,
.event-countdown-item:hover {
    border-color: rgba(115, 247, 255, .36);
    background: rgba(115, 247, 255, .065);
}

.top-creator-item em,
.event-countdown-item em {
    display: block;
    color: #a99ac2;
    font-size: .72rem;
    font-style: normal;
}

.live-mini-link {
    color: #f7efff;
    text-decoration: none;
}

.live-mini-link span {
    min-width: 0;
}

.onboarding-checklist-card,
.profile-completeness-card {
    border-color: rgba(115, 247, 255, .28);
    background:
        linear-gradient(110deg, rgba(115, 247, 255, .08), rgba(255, 43, 214, .07)),
        rgba(12, 10, 27, .86);
}

.onboarding-checklist-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.onboarding-checklist-head h3 {
    margin: 2px 0 4px;
}

.profile-complete-meter {
    display: grid;
    place-items: center;
    min-width: 82px;
    min-height: 62px;
    border: 1px solid rgba(255, 43, 214, .32);
    border-radius: 8px;
    background: rgba(255, 43, 214, .08);
    box-shadow: inset 0 0 22px rgba(115, 247, 255, .07);
}

.profile-complete-meter strong {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
}

.profile-complete-meter span {
    color: #a99ac2;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-meter-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    margin: 8px 0 14px;
}

.profile-meter-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #73f7ff, #ff2bd6);
    box-shadow: 0 0 16px rgba(115, 247, 255, .35);
}

.onboarding-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.onboarding-check-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    color: #f7efff;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 850;
    background: rgba(255, 255, 255, .045);
}

.onboarding-check-item span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #080914;
    background: #73f7ff;
    font-size: .75rem;
}

.onboarding-check-item.is-done {
    color: #b9faff;
    border-color: rgba(115, 247, 255, .24);
    background: rgba(115, 247, 255, .08);
}

.onboarding-check-item.is-done span {
    background: #46f39a;
}

.onboarding-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.onboarding-actions form {
    margin: 0;
}

.alpha-step-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.alpha-step-row a {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(115, 247, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.alpha-step-row strong {
    color: #f8fbff;
    font-size: .82rem;
}

.alpha-step-row span {
    color: var(--muted);
    font-size: .72rem;
}

.studio-template-strip {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    padding: 8px 0 6px;
    scrollbar-width: thin;
}

.studio-template-strip span {
    flex: 0 0 auto;
    color: #9fb1bf;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.studio-template-strip button {
    flex: 0 0 auto;
    min-height: 30px;
    border: 1px solid rgba(33, 212, 253, .18);
    border-radius: 999px;
    color: #eafaff;
    background: rgba(33, 212, 253, .08);
    font-size: .68rem;
    font-weight: 850;
}

.studio-mobile-beta-note {
    border-color: rgba(244, 212, 126, .22);
    background: rgba(244, 212, 126, .08);
}

.project-detail-page {
    gap: 18px;
}

.project-detail-hero {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    gap: 18px;
    align-items: stretch;
}

.project-detail-wave {
    min-height: 260px;
}

.project-detail-copy {
    display: grid;
    gap: 10px;
    align-content: center;
}

.project-detail-copy h1 {
    margin: 0;
    color: #f8fbff;
    font-size: clamp(1.8rem, 4vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.project-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-detail-meta span {
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    color: #dbe7ee;
    background: rgba(255, 255, 255, .035);
    font-size: .78rem;
    font-weight: 800;
}

.project-trust-card {
    border-color: rgba(244, 212, 126, .16);
}

.alpha-readiness-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.alpha-readiness-grid div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.alpha-readiness-grid strong {
    color: #f8fbff;
    font-size: 1.35rem;
}

.alpha-readiness-grid span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.profile-suggestion-tags {
    margin-top: 10px;
}

.action-empty-state {
    display: grid;
    gap: 6px;
}

.action-empty-state h3 {
    margin: 0;
}

.action-empty-state p {
    margin: 0;
}

.pulse-stories-card {
    overflow: hidden;
    border-color: rgba(115, 247, 255, .18);
    background: rgba(11, 10, 18, .94);
}

.pulse-stories-head,
.pulse-story-create-row,
.pulse-story-form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pulse-stories-head {
    justify-content: space-between;
    margin-bottom: 10px;
}

.pulse-stories-head h3 {
    margin: 2px 0 0;
    font-size: 1rem;
    letter-spacing: 0;
}

.pulse-story-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pulse-story-tabs button {
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(247, 239, 255, .74);
    background: rgba(255, 255, 255, .045);
    font-size: .72rem;
    line-height: 1;
}

.pulse-story-tabs button.active {
    border-color: rgba(115, 247, 255, .58);
    color: #fff;
    background: rgba(115, 247, 255, .13);
    box-shadow: 0 0 14px rgba(115, 247, 255, .13);
}

.pulse-story-create-row {
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pulse-story-form {
    flex: 1 1 360px;
}

.pulse-story-file {
    flex: 0 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(115, 247, 255, .58);
    color: #07101a;
    background: linear-gradient(135deg, #73f7ff, #ff2bd6);
    font-size: 1.25rem;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(115, 247, 255, .18);
}

.pulse-story-file input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.pulse-story-form input[type="text"] {
    min-width: 0;
    flex: 1 1 180px;
    min-height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
}

.pulse-story-form button {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 12px;
}

.pulse-story-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 3px 2px 9px;
    scroll-snap-type: x proximity;
}

.pulse-story-preview {
    flex: 0 0 116px;
    display: grid;
    gap: 6px;
    min-width: 0;
    border: 0;
    color: #f7efff;
    background: transparent;
    cursor: pointer;
    text-align: left;
    scroll-snap-align: start;
}

.pulse-story-thumb {
    position: relative;
    display: block;
    aspect-ratio: 9 / 13;
    overflow: hidden;
    border: 1px solid rgba(115, 247, 255, .42);
    border-radius: 8px;
    background: #070812;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 18px rgba(115, 247, 255, .08);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pulse-story-preview:hover .pulse-story-thumb,
.pulse-story-preview:focus-visible .pulse-story-thumb {
    border-color: rgba(255, 43, 214, .54);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 0 20px rgba(255, 43, 214, .12);
    transform: translateY(-2px);
}

.pulse-story-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pulse-story-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 42%, rgba(0, 0, 0, .78));
    pointer-events: none;
}

.pulse-story-avatar-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 2px;
    border-radius: 50%;
    background: rgba(5, 4, 12, .72);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.pulse-story-avatar {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    object-fit: cover;
    background: rgba(12, 10, 27, .96);
}

.pulse-story-label {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.pulse-story-name,
.pulse-story-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulse-story-name {
    color: #fff;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}

.pulse-story-role {
    color: rgba(255, 255, 255, .7);
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pulse-story-tease {
    display: block;
    max-width: 112px;
    overflow: hidden;
    color: rgba(247, 239, 255, .68);
    font-size: .68rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulse-story-empty {
    padding: 8px 0 2px;
}

.pulse-story-viewer[hidden] {
    display: none;
}

.story-viewer-open {
    overflow: hidden;
}

.pulse-story-viewer {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 0;
}

.pulse-story-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(10px);
}

.pulse-story-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(470px, 100vw);
    height: min(850px, 100dvh);
    max-height: 100vh;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: #020206;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .72);
}

.pulse-story-viewer.is-opening .pulse-story-stage {
    animation: storyOpen .18s ease-out both;
}

.pulse-story-media-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    background: #020206;
}

.pulse-story-stage img[data-story-image] {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    background: #020206;
}

.pulse-story-progress {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    gap: 4px;
    height: 3px;
}

.pulse-story-progress span {
    flex: 1;
    height: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
}

.pulse-story-progress span.active {
    background: rgba(255, 255, 255, .88);
}

.pulse-story-viewer-head {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 18px 12px 10px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .04));
}

.pulse-story-viewer-head img,
.pulse-story-viewer-initial {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.pulse-story-viewer-initial {
    display: grid;
    place-items: center;
    background: rgba(115, 247, 255, .14);
    color: #73f7ff;
    font-weight: 900;
    font-size: .78rem;
}

.pulse-story-person {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.pulse-story-person a {
    color: #fff;
    text-decoration: none;
}

.pulse-story-person strong {
    display: block;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulse-story-person span {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, .7);
    font-size: .7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulse-story-person em {
    margin-left: 7px;
    color: rgba(255, 255, 255, .62);
    font-style: normal;
}

.pulse-story-profile-link {
    color: #73f7ff;
    font-size: .76rem;
    font-weight: 900;
    text-decoration: none;
}

.pulse-story-caption {
    position: relative;
    z-index: 2;
    padding: 9px 12px 6px;
    color: #f7efff;
    background: rgba(0, 0, 0, .78);
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.3;
}

.pulse-story-viewer-actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 7px;
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .86);
}

.pulse-story-reactors,
.pulse-story-viewer-actions form[data-story-reply] {
    display: flex;
    gap: 7px;
    min-width: 0;
}

.pulse-story-reactors button {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .065);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 8px;
    font-size: .9rem;
}

.pulse-story-reactors button small {
    overflow: hidden;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulse-story-reactors button.pulse-react-burst span {
    animation: storyReaction .28s ease-out both;
}

.pulse-story-viewer-actions form[data-story-reply] input {
    min-width: 0;
    flex: 1;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    padding: 0 13px;
}

.pulse-story-viewer-actions form[data-story-reply] button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(115, 247, 255, .36);
    color: #061018;
    background: linear-gradient(135deg, #73f7ff, #ff2bd6);
    box-shadow: 0 0 16px rgba(115, 247, 255, .14);
    font-size: .78rem;
    font-weight: 950;
}

.pulse-story-report {
    justify-self: start;
    font-size: .74rem;
}

.pulse-story-close,
.pulse-story-tap-zone {
    border: 0;
    background: transparent;
}

.pulse-story-close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    background: rgba(0, 0, 0, .42);
}

.pulse-story-tap-zone {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 34%;
    min-height: 100%;
    cursor: pointer;
}

.pulse-story-tap-zone.prev {
    left: 0;
}

.pulse-story-tap-zone.next {
    right: 0;
}

@keyframes storyOpen {
    from { opacity: .5; transform: scale(.965); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes storyReaction {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-7px) scale(1.24); }
    100% { transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .pulse-stories-head,
    .pulse-story-form {
        align-items: stretch;
        flex-direction: column;
    }

    .pulse-story-tabs {
        justify-content: flex-start;
    }

    .pulse-story-form button {
        width: 100%;
    }

    .pulse-story-preview {
        flex-basis: 104px;
    }

    .pulse-story-viewer {
        padding: 0;
    }

    .pulse-story-stage {
        width: 100vw;
        height: 100dvh;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .pulse-story-viewer-head {
        padding-top: max(18px, env(safe-area-inset-top));
    }

    .pulse-story-reactors button {
        padding-inline: 5px;
    }

    .pulse-story-reactors button small {
        display: none;
    }
}

.event-countdown-item {
    grid-template-columns: auto minmax(0, 1fr);
}

.event-countdown-item > span:first-child {
    display: grid;
    place-items: center;
    min-width: 38px;
    min-height: 34px;
    border-radius: 9px;
    color: #07101a;
    background: linear-gradient(135deg, #73f7ff, #ff5bd6);
    font-weight: 950;
}

.auth-secondary-form {
    margin-top: 8px;
}

.auth-secondary-form button {
    background: rgba(255, 255, 255, .08);
    color: #f7efff;
    box-shadow: none;
}

.security-page {
    gap: 16px;
}

.security-card {
    display: grid;
    gap: 14px;
}

.security-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.security-card-head h2 {
    margin: 2px 0 4px;
    font-size: 1.1rem;
}

.security-status {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 5px 9px;
    color: rgba(247, 239, 255, .78);
    background: rgba(255, 255, 255, .06);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.security-status.is-on {
    border-color: rgba(70, 243, 154, .45);
    color: #46f39a;
    background: rgba(70, 243, 154, .1);
}

.security-inline-form,
.security-form-grid {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.security-form-grid input {
    min-width: min(260px, 100%);
    flex: 1 1 240px;
}

.security-secret-box {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(115, 247, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.security-secret-box code,
.security-recovery-grid code {
    overflow-wrap: anywhere;
    border-radius: 8px;
    padding: 8px 10px;
    color: #d9fbff;
    background: rgba(0, 0, 0, .28);
}

.security-secret-box textarea {
    width: 100%;
    resize: vertical;
}

.security-recovery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.security-device-list {
    display: grid;
    gap: 10px;
}

.security-device-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.security-device-item div {
    min-width: 0;
}

.security-device-item strong,
.security-device-item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .security-card-head,
    .security-device-item {
        align-items: stretch;
        flex-direction: column;
    }

    .security-inline-form button,
    .security-form-grid button,
    .security-device-item button {
        width: 100%;
    }
}

.discovery-page .hero-card {
    border-color: rgba(115, 247, 255, .28);
    background:
        radial-gradient(circle at 85% 10%, rgba(115, 247, 255, .16), transparent 30%),
        linear-gradient(135deg, rgba(12, 8, 31, .94), rgba(21, 10, 40, .82));
}

.discovery-page .hero-card h1::after {
    content: "";
    display: block;
    width: 112px;
    height: 2px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #73f7ff, #ff5bd6, transparent);
    box-shadow: 0 0 18px rgba(115, 247, 255, .3);
}

.charts-page .discovery-stat-card,
.collabs-page .collab-card,
.search-user-card {
    background:
        linear-gradient(135deg, rgba(115, 247, 255, .045), rgba(255, 43, 214, .035)),
        rgba(12, 9, 27, .86);
}

.chart-score.match-score strong {
    font-size: 1.08rem;
}

.match-reasons span,
.profile-type-pill,
.genre-tag,
.mini-tags span {
    backdrop-filter: blur(8px);
}

.feed-empty-card {
    border-style: solid;
    border-color: rgba(115, 247, 255, .2);
    background:
        repeating-linear-gradient(90deg, rgba(115, 247, 255, .05) 0 1px, transparent 1px 46px),
        rgba(12, 9, 27, .72);
}

@media (max-width: 760px) {
    body::before,
    .hero-live-ambient,
    .premium-widget::before,
    .discovery-page .post-card::before,
    .discovery-rightbar .widget::before {
        animation: none;
    }

    .home-live-deck {
        padding: 9px;
    }

    .live-signal-rail {
        grid-template-columns: 1fr;
    }

    .hero-signal-counters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feed-post-card:hover,
    .search-user-card:hover,
    .discovery-stat-card:hover,
    .collab-card:hover,
    .search-post-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

.mobile-bottom-nav {
    display: none;
}

.video-style-field {
    display: grid;
    gap: 6px;
    font-size: .78rem;
    color: rgba(234, 246, 255, .72);
}

.video-style-field select,
.video-style-filter-card select {
    min-height: 38px;
    border: 1px solid rgba(115, 247, 255, .24);
    border-radius: 10px;
    background: rgba(7, 10, 24, .92);
    color: #f6fbff;
    padding: 8px 10px;
}

.video-style-row {
    display: flex;
    margin: 8px 0 2px;
}

.video-style-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(115, 247, 255, .34);
    background: linear-gradient(135deg, rgba(0, 229, 255, .13), rgba(255, 43, 214, .11));
    color: #dffbff;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 0 16px rgba(0, 229, 255, .12);
}

.video-style-filter-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}

.video-filter-label {
    color: rgba(234, 246, 255, .72);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.video-style-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .045);
    color: rgba(240, 248, 255, .82);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 750;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.video-style-chip:hover,
.video-style-chip.active {
    border-color: rgba(115, 247, 255, .52);
    background: rgba(0, 229, 255, .12);
    box-shadow: 0 0 18px rgba(0, 229, 255, .14);
}

@media (max-width: 760px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .layout {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        overflow-x: hidden;
    }

    .sidebar {
        display: none !important;
    }

    .rightbar {
        display: none;
    }

    .feed,
    .admin-page,
    .legal-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        margin: 0 auto;
        gap: 10px;
    }

    .post-card,
    .create-post,
    .profile-card,
    .search-post-card,
    .collab-card,
    .chart-row,
    .chart-card {
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
    }

    .post-card,
    .feed-post-card {
        padding: 12px;
    }

    .live-experience-hero {
        min-height: 155px;
        padding: 16px 14px;
        border-radius: 16px;
    }

    .hero-launch-title {
        font-size: clamp(1.45rem, 9vw, 2.25rem);
        line-height: 1;
    }

    .hero-launch-copy,
    .hero-copy {
        font-size: .9rem;
    }

    .hero-cta-row,
    .hero-feature-chips,
    .hero-signal-counters {
        gap: 7px;
    }

    .hero-cta {
        min-height: 38px;
        padding: 9px 11px;
        font-size: .82rem;
    }

    .home-live-deck,
    .hero-signal-counters,
    .hero-genre-rotator {
        display: none;
    }

    .launch-command-strip {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .launch-command-card {
        min-height: auto;
        padding: 12px;
        border-radius: 13px;
    }

    .launch-command-card strong {
        font-size: .95rem;
    }

    .launch-command-card p {
        font-size: .8rem;
    }

    .hero-inline-actions {
        gap: 7px;
    }

    .hero-inline-actions .launch-cta {
        width: 100%;
        min-height: 38px;
    }

    .create-post {
        gap: 9px;
        padding: 10px;
        align-items: flex-start;
    }

    .create-post > .avatar,
    .create-post > .avatar-fallback {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .create-post-form {
        gap: 8px;
    }

    .create-post textarea {
        min-height: 64px;
        max-height: 150px;
        font-size: .95rem;
    }

    .file-input-wrap,
    .video-style-field {
        font-size: .74rem;
    }

    .file-input-control {
        flex-wrap: wrap;
    }

    .create-post-actions {
        align-items: stretch;
    }

    .create-post-actions button {
        min-height: 40px;
        width: 100%;
    }

    .feed-tabs-card,
    .video-style-filter-card {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }

    .feed-tabs-card::-webkit-scrollbar,
    .video-style-filter-card::-webkit-scrollbar {
        display: none;
    }

    .feed-tabs-card .menu-link,
    .video-style-chip {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .post-top {
        gap: 9px;
        min-width: 0;
    }

    .post-content-text,
    .post-text,
    .comment-body,
    .message-bubble {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .post-actions-row {
        gap: 7px;
        justify-content: space-between;
    }

    .post-actions-row button,
    .post-actions-row .post-action-placeholder,
    .post-actions-row .post-action-like,
    .report-pop > summary {
        min-height: 36px;
        padding: 7px 9px;
    }

    .embed-card {
        width: 100%;
        max-width: 100%;
        margin: 10px 0 4px;
        padding: 6px;
        border-radius: 12px;
        overflow: hidden;
    }

    .youtube-embed {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
    }

    .youtube-embed iframe {
        width: 100%;
        height: 100%;
        max-width: 100%;
        display: block;
    }

    .video-style-filter-card {
        padding: 10px;
    }

    .video-style-pill {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
        font-size: .7rem;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3000;
        display: block;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background:
            linear-gradient(180deg, rgba(7, 6, 18, .72), rgba(7, 6, 18, .98)),
            radial-gradient(circle at 20% 0%, rgba(0, 229, 255, .18), transparent 36%),
            radial-gradient(circle at 80% 0%, rgba(255, 43, 214, .18), transparent 36%);
        border-top: 1px solid rgba(115, 247, 255, .24);
        box-shadow: 0 -12px 34px rgba(0, 0, 0, .55), 0 0 22px rgba(0, 229, 255, .12);
        backdrop-filter: blur(16px);
    }

    .mobile-nav-shell {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 4px;
        max-width: 560px;
        margin: 0 auto;
    }

    .mobile-nav-item,
    .mobile-more-menu > summary.mobile-nav-item {
        position: relative;
        display: grid;
        place-items: center;
        gap: 3px;
        min-height: 54px;
        padding: 5px 2px;
        border: 0;
        border-radius: 12px;
        color: rgba(235, 247, 255, .76);
        background: transparent;
        text-decoration: none;
        font-size: .66rem;
        font-weight: 800;
        list-style: none;
        cursor: pointer;
    }

    .mobile-more-menu > summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-item.active,
    .mobile-more-menu[open] > summary.mobile-nav-item {
        color: #ffffff;
        background: rgba(115, 247, 255, .11);
        box-shadow: inset 0 0 0 1px rgba(115, 247, 255, .22), 0 0 16px rgba(0, 229, 255, .1);
    }

    .mobile-nav-icon {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .16);
        color: #75f7ff;
        background: rgba(255, 255, 255, .055);
        font-size: .78rem;
        font-weight: 950;
    }

    .mobile-nav-badge,
    .mobile-more-badge {
        position: absolute;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        display: inline-grid;
        place-items: center;
        background: #ff2bd6;
        color: #fff;
        font-size: .62rem;
        font-weight: 900;
        box-shadow: 0 0 14px rgba(255, 43, 214, .58);
    }

    .mobile-nav-badge {
        top: 3px;
        right: 10px;
    }

    .mobile-nav-wip {
        position: absolute;
        top: 2px;
        right: 6px;
        display: inline-grid;
        place-items: center;
        min-width: 24px;
        height: 14px;
        padding: 0 4px;
        border: 1px solid rgba(255, 197, 67, .55);
        border-radius: 999px;
        background: rgba(255, 197, 67, .14);
        color: #ffd86b;
        font-size: .48rem;
        font-weight: 950;
        letter-spacing: .06em;
        line-height: 1;
    }

    .mobile-more-badge {
        top: 8px;
        right: 8px;
    }

    .mobile-more-menu {
        position: static;
    }

    .mobile-more-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        max-height: 42vh;
        overflow: auto;
        padding: 12px;
        border: 1px solid rgba(115, 247, 255, .28);
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(11, 10, 27, .98), rgba(8, 7, 21, .98)),
            radial-gradient(circle at 15% 0%, rgba(0, 229, 255, .18), transparent 34%);
        box-shadow: 0 -18px 44px rgba(0, 0, 0, .62), 0 0 26px rgba(0, 229, 255, .16);
        animation: mobileMoreRise .16s ease-out;
    }

    .mobile-more-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        color: #fff;
        font-size: .78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .mobile-more-head .site-logo-img {
        max-height: 30px;
        width: auto;
    }

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

    .mobile-more-link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .055);
        color: rgba(242, 248, 255, .86);
        text-decoration: none;
        font-size: .82rem;
        font-weight: 850;
    }

    .mobile-more-link.active,
    .mobile-more-link:hover {
        border-color: rgba(255, 43, 214, .46);
        background: rgba(255, 43, 214, .12);
        color: #fff;
        box-shadow: 0 0 16px rgba(255, 43, 214, .12);
    }
}

@keyframes mobileMoreRise {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.push-permission-card {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2400;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: min(430px, calc(100vw - 32px));
    padding: 13px;
    border: 1px solid rgba(115, 247, 255, .24);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(0, 229, 255, .08), rgba(255, 43, 214, .07)),
        rgba(8, 7, 20, .94);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 22px rgba(0, 229, 255, .12);
    backdrop-filter: blur(14px);
}

.push-permission-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.push-permission-copy strong {
    color: #f8fbff;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.push-permission-copy span,
.push-permission-copy small {
    color: rgba(234, 246, 255, .74);
    font-size: .78rem;
    line-height: 1.3;
}

.push-permission-copy small {
    color: rgba(189, 168, 217, .8);
}

.push-permission-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.push-permission-actions button {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: .76rem;
}

body.studio-app-body .push-permission-card {
    display: none !important;
}

@media (max-width: 760px) {
    .push-permission-card {
        left: 8px;
        right: 8px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        grid-template-columns: 1fr;
        width: auto;
        padding: 10px;
    }

    .push-permission-actions {
        justify-content: stretch;
    }

    .push-permission-actions button {
        flex: 1 1 130px;
    }
}

.creator-identity-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.creator-identity-row.compact-identity {
    margin-top: 7px;
}

.reputation-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.reputation-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .055);
    color: rgba(245, 250, 255, .88);
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.reputation-badge-verified { border-color: rgba(89, 217, 255, .48); background: rgba(89, 217, 255, .12); color: #dff9ff; }
.reputation-badge-rising { border-color: rgba(255, 43, 214, .42); background: rgba(255, 43, 214, .12); color: #ffd9f7; }
.reputation-badge-legend { border-color: rgba(255, 215, 98, .45); background: rgba(255, 215, 98, .12); color: #fff1b8; }
.reputation-badge-active { border-color: rgba(84, 255, 172, .42); background: rgba(84, 255, 172, .11); color: #dcffe9; }
.reputation-badge-event { border-color: rgba(155, 116, 255, .42); background: rgba(155, 116, 255, .12); color: #eee5ff; }
.reputation-badge-industry { border-color: rgba(255, 126, 88, .4); background: rgba(255, 126, 88, .1); color: #ffe0d5; }
.reputation-badge-collab { border-color: rgba(0, 229, 255, .38); background: rgba(0, 229, 255, .1); color: #d9fbff; }
.reputation-badge-early,
.reputation-badge-og,
.reputation-badge-founder { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .08); color: #fff; }

.pulse-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, .28);
    background: linear-gradient(135deg, rgba(0, 229, 255, .11), rgba(255, 43, 214, .08));
    color: #edfaff;
    white-space: nowrap;
}

.pulse-score-badge strong {
    font-size: .86rem;
    line-height: 1;
}

.pulse-score-badge span {
    color: rgba(220, 237, 255, .72);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.creator-card-upgraded {
    position: relative;
    overflow: hidden;
}

.creator-card-upgraded::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(115, 247, 255, .06);
}

.chart-score em {
    display: block;
    margin-top: 3px;
    color: rgba(219, 232, 255, .58);
    font-size: .66rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.creator-signal-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.creator-signal-strip span {
    display: grid;
    gap: 3px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: rgba(220, 234, 255, .62);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.creator-signal-strip strong {
    color: #fff;
    font-size: 1rem;
}

.creator-highlights-card {
    display: grid;
    gap: 13px;
}

.creator-highlights-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.creator-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.creator-highlight-item {
    display: grid;
    gap: 6px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
}

.creator-highlight-item strong {
    color: #fff;
}

.creator-highlight-item p {
    margin: 0;
    color: rgba(221, 234, 255, .72);
    font-size: .84rem;
}

.featured-creator-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.featured-creator-card > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.featured-creator-card strong,
.top-creator-item strong,
.compact-creator-item strong {
    color: #fff;
}

.featured-creator-card em,
.compact-creator-item em {
    color: rgba(219, 232, 255, .62);
    font-size: .74rem;
    font-style: normal;
}

.compact-creator-item {
    grid-template-columns: auto minmax(0, 1fr);
}

.live-creator-item .comment-avatar,
.live-creator-item .avatar-fallback {
    box-shadow: 0 0 0 2px rgba(84, 255, 172, .38), 0 0 18px rgba(84, 255, 172, .14);
}

.admin-badge-form {
    display: grid;
    gap: 8px;
}

.admin-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 260px;
}

.admin-badge-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(232, 242, 255, .78);
    font-size: .76rem;
}

@media (max-width: 760px) {
    .creator-signal-strip,
    .creator-highlights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-creator-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .featured-creator-card .pulse-score-badge {
        grid-column: 1 / -1;
        width: fit-content;
    }

    .admin-badge-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}

.studio-shell {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 12px;
}

.studio-app {
    display: grid;
    gap: 10px;
    min-width: 0;
    color: #e8eef7;
}

.studio-topbar,
.studio-browser,
.studio-workspace,
.studio-pattern-panel,
.studio-playlist-panel,
.studio-piano-panel,
.studio-automation-panel,
.studio-project-drawer,
.studio-mixer-panel,
.studio-mobile-note {
    border: 1px solid rgba(130, 157, 190, .18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(21, 28, 40, .96), rgba(12, 16, 24, .96));
    box-shadow: 0 14px 38px rgba(0, 0, 0, .38);
}

.studio-topbar {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(520px, 1fr) minmax(280px, 460px);
    gap: 10px;
    align-items: center;
    min-height: 72px;
    padding: 10px;
    position: sticky;
    top: 10px;
    z-index: 6;
    background: linear-gradient(180deg, rgba(30, 39, 56, .98), rgba(10, 14, 22, .98));
    box-shadow: 0 16px 42px rgba(0, 0, 0, .52), inset 0 -1px 0 rgba(33, 212, 253, .16);
}

.studio-brand-lockup,
.studio-transport,
.studio-project-tools,
.studio-panel-title,
.studio-track,
.studio-project-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-app-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 7px;
    border: 1px solid rgba(33, 212, 253, .45);
    color: #21d4fd;
    background: rgba(33, 212, 253, .08);
    font-size: .72rem;
    font-weight: 900;
}

.studio-kicker {
    margin: 0;
    color: rgba(232, 238, 247, .54);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.studio-brand-lockup h1 {
    margin: 2px 0 0;
    font-size: 1.22rem;
    line-height: 1.1;
}

.studio-transport,
.studio-project-tools {
    flex-wrap: wrap;
}

.studio-transport {
    padding: 8px;
    border: 1px solid rgba(33, 212, 253, .14);
    border-radius: 8px;
    background: rgba(2, 6, 12, .36);
}

.studio-project-tools {
    justify-content: flex-end;
}

.studio-control-label {
    display: grid;
    gap: 3px;
    color: rgba(232, 238, 247, .58);
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-control-label input,
.studio-control-label select,
.studio-project-tools input {
    min-height: 34px;
    border: 1px solid rgba(130, 157, 190, .26);
    border-radius: 6px;
    background: #090d14;
    color: #f8fbff;
    outline: none;
}

.studio-control-label input,
.studio-control-label select {
    width: 86px;
    padding: 6px 8px;
}

.studio-master-control input {
    width: 120px;
    padding: 0;
    accent-color: #21d4fd;
}

.studio-time-display {
    min-width: 76px;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid rgba(33, 212, 253, .32);
    border-radius: 6px;
    color: #fff06c;
    background: #05080d;
    font-size: .86rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 18px rgba(33, 212, 253, .08);
}

.studio-project-tools input {
    width: min(100%, 210px);
    padding: 7px 9px;
}

.studio-transport-btn,
.studio-secondary-btn,
.studio-delete-project,
.studio-load-project,
.studio-browser-tabs button,
.studio-sample-item,
.studio-pad,
.studio-strip-buttons button {
    border: 1px solid rgba(130, 157, 190, .24);
    border-radius: 6px;
    background: #101723;
    color: #e8eef7;
    box-shadow: none;
}

.studio-transport-btn,
.studio-secondary-btn {
    min-height: 34px;
    padding: 8px 12px;
}

.studio-play-btn,
#studio-save {
    border-color: rgba(33, 212, 253, .5);
    background: linear-gradient(180deg, rgba(33, 212, 253, .28), rgba(33, 212, 253, .1));
    color: #f8feff;
}

.studio-play-btn {
    min-width: 70px;
}

.studio-toggle-btn.is-active {
    border-color: rgba(70, 243, 154, .5);
    background: rgba(70, 243, 154, .13);
    color: #eafff4;
}

.studio-project-tools span {
    color: #21d4fd;
}

.studio-mobile-note {
    display: none;
    padding: 10px 12px;
    color: rgba(232, 238, 247, .7);
    font-size: .86rem;
}

.studio-daw-grid {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 240px;
    gap: 10px;
    min-height: 500px;
}

.studio-browser,
.studio-workspace,
.studio-pattern-panel,
.studio-playlist-panel,
.studio-piano-panel,
.studio-automation-panel,
.studio-project-drawer,
.studio-mixer-panel {
    min-width: 0;
    padding: 10px;
}

.studio-workspace {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.studio-view-tabs {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 6px;
    border: 1px solid rgba(130, 157, 190, .18);
    border-radius: 8px;
    background: rgba(2, 6, 12, .42);
}

.studio-view-tabs button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(130, 157, 190, .22);
    border-radius: 6px;
    color: rgba(232, 238, 247, .72);
    background: #101723;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-view-tabs button.is-active {
    border-color: rgba(33, 212, 253, .55);
    color: #fff;
    background: rgba(33, 212, 253, .14);
}

.studio-work-panel {
    display: none;
}

.studio-work-panel.is-active {
    display: grid;
}

.studio-work-panel:not(.is-active) {
    display: none !important;
}

.studio-browser-controls,
.studio-loop-upload,
.studio-pattern-toolbar {
    display: grid;
    gap: 8px;
    margin: 10px 0;
}

.studio-browser-controls input,
.studio-browser-controls select,
.studio-loop-upload input,
.studio-loop-upload select,
.studio-pattern-toolbar input {
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(130, 157, 190, .26);
    border-radius: 6px;
    background: #090d14;
    color: #f8fbff;
    padding: 7px 9px;
    outline: none;
}

.studio-loop-upload {
    padding: 8px;
    border: 1px solid rgba(33, 212, 253, .14);
    border-radius: 7px;
    background: rgba(2, 6, 12, .28);
}

.studio-loop-upload-row {
    display: grid;
    grid-template-columns: .7fr .7fr 1.2fr auto;
    gap: 6px;
}

.studio-loop-rights-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    color: #d9e6f7;
    font-size: .72rem;
}

.studio-pattern-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(130px, 200px) auto;
    align-items: end;
}

.studio-pattern-tabs {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
}

.studio-pattern-tabs button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(130, 157, 190, .24);
    border-radius: 6px;
    background: #101723;
    color: rgba(232, 238, 247, .72);
    box-shadow: none;
}

.studio-pattern-tabs button.is-active {
    border-color: rgba(33, 212, 253, .58);
    background: rgba(33, 212, 253, .14);
    color: #fff;
}

.studio-section-label {
    margin: 4px 0 0;
    color: rgba(232, 238, 247, .5);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.studio-panel-title {
    justify-content: space-between;
    min-height: 30px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(130, 157, 190, .14);
    color: #f8fbff;
    font-weight: 900;
}

.studio-panel-title small {
    color: rgba(232, 238, 247, .48);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.studio-browser-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0;
}

.studio-browser-tabs button {
    padding: 8px;
    color: rgba(232, 238, 247, .74);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-browser-tabs button.is-active,
.studio-browser-tabs button:hover,
.studio-sample-item:hover,
.studio-pad:hover {
    border-color: rgba(33, 212, 253, .48);
    background: rgba(33, 212, 253, .1);
}

.studio-sample-list,
.studio-project-list {
    display: grid;
    gap: 5px;
    max-height: calc(100vh - 330px);
    min-height: 220px;
    overflow: auto;
}

.studio-sample-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    gap: 6px;
    width: 100%;
    padding: 6px;
    text-align: left;
}

.studio-sample-item strong,
.studio-sample-item em,
.studio-load-project {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-sample-item span {
    display: block;
    color: rgba(232, 238, 247, .5);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.studio-sample-item em {
    display: block;
    color: rgba(70, 243, 154, .64);
    font-size: .58rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-browser-more {
    margin: 4px 0;
    padding: 8px;
    border: 1px solid rgba(130, 157, 190, .18);
    border-radius: 6px;
    color: rgba(232, 238, 247, .62);
    background: rgba(255, 255, 255, .035);
    font-size: .72rem;
    font-weight: 800;
}

.studio-drag-handle {
    display: grid;
    place-items: center;
    width: 18px;
    min-height: 42px;
    border: 1px solid rgba(130, 157, 190, .18);
    border-radius: 5px;
    color: rgba(232, 238, 247, .42);
    background: rgba(255, 255, 255, .035);
    font-weight: 900;
    cursor: grab;
}

.studio-sample-item strong {
    color: #fff;
}

.studio-sample-main,
.studio-preview-btn {
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.studio-sample-main {
    min-width: 0;
}

.studio-preview-btn,
.studio-clip-btn {
    align-self: center;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid rgba(33, 212, 253, .28);
    border-radius: 5px;
    color: #9df6ff;
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-preview-btn {
    grid-column: auto;
    justify-self: auto;
}

.studio-clip-btn {
    grid-column: auto;
    justify-self: auto;
    border-color: rgba(70, 243, 154, .26);
    color: #a9ffcd;
}

.studio-pad-bank {
    display: grid;
    grid-template-columns: repeat(4, minmax(96px, 1fr));
    gap: 7px;
    padding: 10px 0;
}

.studio-pad {
    min-height: 56px;
    padding: 7px;
    text-align: left;
    border-left: 3px solid var(--channel-color);
}

.studio-pad.is-selected,
.studio-track.is-selected .studio-track-label {
    border-color: color-mix(in srgb, var(--channel-color) 70%, white 12%);
    background: color-mix(in srgb, var(--channel-color) 12%, #101723 88%);
}

.studio-pad strong,
.studio-pad span,
.studio-pad em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-pad strong {
    font-size: .78rem;
}

.studio-pad span {
    color: rgba(232, 238, 247, .56);
    font-size: .66rem;
}

.studio-pad em {
    margin-top: 3px;
    color: rgba(70, 243, 154, .58);
    font-size: .58rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-step-ruler,
.studio-track {
    display: grid;
    grid-template-columns: 148px minmax(960px, 1fr);
    gap: 8px;
}

.studio-step-ruler {
    margin-bottom: 6px;
    color: rgba(232, 238, 247, .66);
    font-size: .74rem;
    font-weight: 900;
}

.studio-ruler-spacer {
    padding: 0 8px;
}

.studio-ruler-grid,
.studio-grid {
    display: grid;
    grid-template-columns: repeat(var(--steps, 128), minmax(10px, 1fr));
    gap: 2px;
}

.studio-ruler-grid {
    grid-template-columns: repeat(var(--bars, 8), minmax(90px, 1fr));
    min-width: 960px;
    gap: 0;
    border: 1px solid rgba(130, 157, 190, .12);
    border-radius: 5px;
    overflow: hidden;
    background: rgba(3, 7, 12, .58);
}

.studio-ruler-grid span {
    padding: 4px 8px;
    border-left: 1px solid rgba(33, 212, 253, .18);
    color: #21d4fd;
    font-size: .66rem;
    text-align: left;
}

.studio-step-ruler .is-current {
    color: #fff;
    background: rgba(33, 212, 253, .16);
}

.studio-tracks {
    display: grid;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.studio-track-label {
    min-width: 0;
    min-height: 42px;
    padding: 7px 8px;
    border-left: 3px solid var(--channel-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, .045);
}

.studio-track-label strong,
.studio-track-label span,
.studio-track-label em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-track-label span {
    color: rgba(232, 238, 247, .5);
    font-size: .68rem;
}

.studio-track-label em {
    margin-top: 2px;
    color: rgba(33, 212, 253, .64);
    font-size: .6rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-grid {
    min-width: 960px;
}

.studio-cell {
    height: 28px;
    padding: 0;
    border: 1px solid rgba(130, 157, 190, .16);
    border-radius: 4px;
    background: #0a0f18;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.studio-cell:nth-child(4n + 1) {
    border-left-color: rgba(232, 238, 247, .42);
}

.studio-cell:nth-child(16n + 1) {
    border-left-color: rgba(33, 212, 253, .72);
}

.studio-cell:hover {
    border-color: rgba(232, 238, 247, .38);
    background: #121b29;
}

.studio-cell.is-on {
    border-color: color-mix(in srgb, var(--channel-color) 80%, white 12%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--channel-color) 58%, #111827 42%), color-mix(in srgb, var(--channel-color) 28%, #0a0f18 72%));
    box-shadow: 0 0 10px color-mix(in srgb, var(--channel-color) 28%, transparent);
}

.studio-cell.is-current {
    outline: 2px solid rgba(255, 255, 255, .78);
    outline-offset: -2px;
    transform: translateY(-1px);
}

@keyframes studio-midi-record-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 240, 108, .9), 0 0 18px rgba(255, 240, 108, .6);
        transform: translateY(-2px) scale(1.08);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 240, 108, 0);
        transform: translateY(0) scale(1);
    }
}

.studio-cell.is-midi-recorded,
.studio-note-clip.is-midi-recorded {
    animation: studio-midi-record-flash .72s ease-out;
}

.studio-playlist-panel,
.studio-piano-panel {
    display: grid;
    gap: 10px;
}

.studio-playlist-toolbar,
.studio-piano-toolbar {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-wrap: wrap;
}

.studio-playlist {
    position: relative;
    min-height: 414px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(130, 157, 190, .16);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .08) 1px, transparent 1px) 0 0 / 6.25% 100%,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 1.5625% 100%,
        rgba(3, 7, 12, .68);
}

.studio-playlist-ruler {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 96px repeat(16, minmax(68px, 1fr));
    min-width: 1184px;
    height: 28px;
    border-bottom: 1px solid rgba(130, 157, 190, .16);
    background: rgba(8, 12, 18, .92);
}

.studio-playlist-ruler::before {
    content: "Track";
    position: sticky;
    left: 0;
    z-index: 4;
    padding: 6px 8px;
    border-right: 1px solid rgba(130, 157, 190, .16);
    color: rgba(232, 238, 247, .5);
    background: rgba(8, 12, 18, .98);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-playlist-ruler span {
    padding: 6px 8px;
    color: rgba(232, 238, 247, .68);
    font-size: .68rem;
    font-weight: 900;
}

.studio-playlist-lanes {
    position: relative;
    min-width: 1184px;
}

.studio-playlist-lane {
    position: relative;
    height: 40px;
    border-bottom: 1px solid rgba(130, 157, 190, .09);
}

.studio-playlist-lane-label {
    position: sticky;
    left: 0;
    z-index: 2;
    display: inline-grid;
    place-items: center start;
    width: 96px;
    height: 100%;
    padding-left: 8px;
    border-right: 1px solid rgba(130, 157, 190, .14);
    color: rgba(232, 238, 247, .7);
    background: rgba(8, 12, 18, .9);
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-clip {
    position: absolute;
    top: 4px;
    z-index: 1;
    display: grid;
    align-content: center;
    min-width: 36px;
    height: 31px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--channel-color) 70%, white 10%);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--channel-color) 24%, #101723 76%), rgba(7, 10, 17, .95));
    box-shadow: 0 0 14px color-mix(in srgb, var(--channel-color) 18%, transparent);
    cursor: grab;
    text-align: left;
}

.studio-clip.is-selected {
    outline: 2px solid rgba(255, 240, 108, .85);
    outline-offset: -2px;
    box-shadow: 0 0 0 1px rgba(255, 240, 108, .28), 0 0 16px color-mix(in srgb, var(--channel-color) 28%, transparent);
}

.studio-clip strong,
.studio-clip span {
    display: block;
    overflow: hidden;
    padding: 0 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-clip strong {
    font-size: .66rem;
    line-height: 1.05;
}

.studio-clip span {
    color: rgba(232, 238, 247, .58);
    font-size: .56rem;
}

.studio-clip i {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
}

.studio-playlist-playhead {
    position: absolute;
    top: 28px;
    bottom: 0;
    z-index: 4;
    display: none;
    width: 2px;
    min-height: 356px;
    background: #fff06c;
    box-shadow: 0 0 12px rgba(255, 240, 108, .45);
    pointer-events: none;
}

.studio-piano-roll {
    max-height: calc(100vh - 300px);
    min-height: 360px;
    overflow: auto;
    border: 1px solid rgba(130, 157, 190, .16);
    border-radius: 7px;
    background: rgba(3, 7, 12, .68);
}

.studio-piano-ruler {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 56px var(--piano-width, 1180px);
    min-width: calc(56px + var(--piano-width, 1180px));
    height: 28px;
    border-bottom: 1px solid rgba(130, 157, 190, .2);
    background: rgba(8, 12, 18, .98);
}

.studio-piano-ruler-label {
    display: grid;
    place-items: center end;
    padding-right: 8px;
    color: rgba(232, 238, 247, .5);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-piano-ruler-grid {
    position: relative;
    width: var(--piano-width, 1180px);
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .2) 1px, transparent 1px) 0 0 / 25% 100%,
        linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px) 0 0 / 6.25% 100%;
}

.studio-piano-ruler-marker {
    position: absolute;
    top: 6px;
    transform: translateX(4px);
    color: rgba(232, 238, 247, .42);
    font-size: .55rem;
    font-weight: 800;
    pointer-events: none;
}

.studio-piano-ruler-marker.is-bar {
    color: rgba(33, 212, 253, .82);
}

.studio-automation-panel {
    display: grid;
    gap: 10px;
}

.studio-automation-lane {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(130, 157, 190, .16);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .11) 1px, transparent 1px) 0 0 / 6.25% 100%,
        linear-gradient(0deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 100% 25%,
        rgba(3, 7, 12, .74);
    cursor: crosshair;
}

.studio-automation-marker {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    color: rgba(232, 238, 247, .48);
    font-size: .62rem;
    font-weight: 900;
    pointer-events: none;
}

.studio-automation-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.studio-automation-line polyline {
    fill: none;
    stroke: #46ff9a;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.studio-automation-point {
    position: absolute;
    width: 10px;
    height: 10px;
    padding: 0;
    transform: translate(-50%, 50%);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 2px;
    background: #46ff9a;
    box-shadow: 0 0 10px rgba(70, 255, 154, .28);
}

.studio-piano-row {
    display: grid;
    grid-template-columns: 56px minmax(720px, 1fr);
    min-width: 780px;
    min-height: 26px;
    border-bottom: 1px solid rgba(130, 157, 190, .08);
}

.studio-piano-key {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border-right: 1px solid rgba(130, 157, 190, .14);
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    color: rgba(232, 238, 247, .72);
    background: rgba(8, 12, 18, .92);
    font-size: .66rem;
    font-weight: 900;
    box-shadow: none;
}

.studio-piano-row.is-black-key .studio-piano-key {
    color: rgba(232, 238, 247, .58);
    background: #070a0f;
}

.studio-piano-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--piano-steps, 64), minmax(12px, 1fr));
    gap: 1px;
}

.studio-piano-cell {
    min-height: 25px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    border-left: 1px solid rgba(255, 255, 255, .035);
    background: transparent;
    box-shadow: none;
}

.studio-piano-cell:nth-child(4n + 1) {
    background: rgba(255, 255, 255, .025);
}

.studio-piano-cell:nth-child(16n + 1) {
    border-left-color: rgba(33, 212, 253, .32);
}

.studio-piano-cell.is-current {
    box-shadow: inset 0 0 0 2px rgba(255, 240, 108, .8), 0 0 10px rgba(255, 240, 108, .2);
}

.studio-note-clip {
    position: absolute;
    top: 4px;
    bottom: 4px;
    min-width: 34px;
    overflow: hidden;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 4px;
    color: #06110d;
    background: linear-gradient(180deg, #7dffba, #21d4fd);
    opacity: var(--note-velocity, 1);
    box-shadow: 0 0 10px rgba(33, 212, 253, .24);
    font-size: .6rem;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

.studio-note-clip small {
    display: block;
    overflow: hidden;
    color: rgba(3, 16, 22, .68);
    font-size: .48rem;
    font-weight: 900;
    text-overflow: ellipsis;
}

.studio-project-drawer {
    display: grid;
    align-content: start;
    gap: 10px;
}

.studio-project-meta {
    padding: 8px;
    border: 1px solid rgba(130, 157, 190, .16);
    border-radius: 6px;
    color: rgba(232, 238, 247, .6);
    background: rgba(255, 255, 255, .035);
    font-size: .78rem;
}

.studio-project-item {
    gap: 6px;
}

.studio-load-project {
    display: grid;
    gap: 3px;
    flex: 1;
    min-width: 0;
    padding: 9px;
    text-align: left;
}

.studio-load-project strong,
.studio-load-project span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-load-project span {
    color: rgba(232, 238, 247, .48);
    font-size: .68rem;
}

.studio-delete-project {
    padding: 9px;
    color: #ffb4c2;
}

.studio-share-placeholder {
    margin-top: 6px;
    padding: 10px;
    border: 1px dashed rgba(130, 157, 190, .28);
    border-radius: 6px;
    color: rgba(232, 238, 247, .62);
}

.studio-share-placeholder p {
    margin: 6px 0 0;
    font-size: .82rem;
}

.studio-mixer-panel {
    display: grid;
    gap: 10px;
}

.studio-mixer {
    display: grid;
    grid-template-columns: repeat(9, minmax(104px, 1fr));
    gap: 8px;
    overflow-x: auto;
}

.studio-channel-strip {
    display: grid;
    grid-template-rows: 48px 96px repeat(4, auto) auto;
    gap: 6px;
    min-width: 104px;
    padding: 8px;
    border: 1px solid rgba(130, 157, 190, .16);
    border-top: 3px solid var(--channel-color);
    border-radius: 7px;
    background: rgba(8, 12, 18, .76);
}

.studio-master-strip {
    border-top-color: #fff06c;
    background: linear-gradient(180deg, rgba(255, 240, 108, .1), rgba(8, 12, 18, .84));
}

.studio-channel-strip.is-muted {
    opacity: .58;
}

.studio-channel-strip.is-solo {
    box-shadow: inset 0 0 0 1px var(--channel-color), 0 0 16px color-mix(in srgb, var(--channel-color) 22%, transparent);
}

.studio-strip-name {
    min-width: 0;
}

.studio-strip-name strong,
.studio-strip-name span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-strip-name span {
    color: rgba(232, 238, 247, .46);
    font-size: .66rem;
}

.studio-meter {
    position: relative;
    align-self: stretch;
    width: 18px;
    margin: 0 auto;
    border-radius: 99px;
    background: #080c12;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(130, 157, 190, .16);
}

.studio-meter-fill {
    position: absolute;
    inset: auto 0 0;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
    background: linear-gradient(180deg, #fff06c, var(--channel-color));
}

.studio-fader {
    width: 100%;
    accent-color: var(--channel-color);
}

.studio-channel-strip label {
    display: grid;
    gap: 2px;
    color: rgba(232, 238, 247, .48);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-channel-strip input[type="range"] {
    width: 100%;
    accent-color: var(--channel-color);
}

.studio-strip-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.studio-strip-buttons button {
    min-height: 30px;
    padding: 6px;
    font-size: .72rem;
    font-weight: 900;
}

.studio-strip-buttons button.is-active {
    border-color: var(--channel-color);
    background: color-mix(in srgb, var(--channel-color) 20%, #101723 80%);
    color: #fff;
}

.studio-strip-buttons button[data-mode="muted"].is-active {
    border-color: #ff5b7f;
    background: rgba(255, 91, 127, .24);
}

.studio-strip-buttons button[data-mode="solo"].is-active {
    border-color: #faff72;
    background: rgba(250, 255, 114, .16);
}

@media (max-width: 1280px) {
    .studio-topbar {
        grid-template-columns: 1fr;
    }

    .studio-project-tools {
        justify-content: flex-start;
    }

    .studio-daw-grid {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .studio-project-drawer {
        display: none;
        grid-column: 1 / -1;
    }

    .studio-project-drawer.is-open {
        display: grid;
    }
}

@media (max-width: 760px) {
    .studio-shell {
        grid-template-columns: 1fr;
    }

    .studio-mobile-note {
        display: block;
    }

    .studio-topbar,
    .studio-browser,
    .studio-workspace,
    .studio-pattern-panel,
    .studio-playlist-panel,
    .studio-piano-panel,
    .studio-automation-panel,
    .studio-project-drawer,
    .studio-mixer-panel {
        padding: 8px;
    }

    .studio-daw-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .studio-topbar {
        position: static;
    }

    .studio-browser-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .studio-pattern-toolbar {
        grid-template-columns: 1fr;
    }

    .studio-sample-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .studio-pad-bank {
        grid-template-columns: repeat(4, minmax(68px, 1fr));
    }

    .studio-step-ruler,
    .studio-track {
        grid-template-columns: 112px minmax(920px, 1fr);
    }

    .studio-grid,
    .studio-ruler-grid {
        min-width: 920px;
    }

    .studio-cell {
        height: 28px;
    }

    .studio-mixer {
        grid-template-columns: repeat(9, 104px);
    }
}

/* PULSATRAX Studio professional DAW layer */
.studio-ready .studio-shell {
    grid-template-columns: 260px minmax(0, 1fr);
}

.studio-ready .studio-app {
    --ptx-bg: #05070c;
    --ptx-panel: #0b111a;
    --ptx-panel-2: #101725;
    --ptx-line: rgba(121, 155, 190, .22);
    --ptx-cyan: #21d4fd;
    --ptx-green: #46ff9a;
    --ptx-pink: #ff4fd8;
    --ptx-yellow: #fff06c;
    gap: 8px;
    min-height: calc(100vh - 20px);
    color: #edf6ff;
}

.studio-ready .studio-topbar {
    top: 6px;
    min-height: 58px;
    grid-template-columns: minmax(170px, 230px) minmax(620px, 1fr) minmax(310px, 430px);
    padding: 7px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(17, 24, 36, .99), rgba(5, 8, 14, .99));
    box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 -1px 0 rgba(33,212,253,.2);
}

.studio-ready .studio-brand-lockup h1 {
    font-size: 1rem;
}

.studio-ready .studio-app-mark {
    width: 34px;
    height: 34px;
    border-radius: 4px;
}

.studio-ready .studio-transport,
.studio-ready .studio-project-tools {
    gap: 5px;
}

.studio-ready .studio-transport {
    padding: 5px;
}

.studio-ready .studio-control-label {
    font-size: .56rem;
}

.studio-ready .studio-control-label input,
.studio-ready .studio-control-label select,
.studio-ready .studio-project-tools input,
.studio-ready .studio-transport-btn,
.studio-ready .studio-secondary-btn,
.studio-ready #studio-save {
    min-height: 27px;
    height: 27px;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: .66rem;
}

.studio-ready .studio-control-label input,
.studio-ready .studio-control-label select {
    width: 72px;
}

.studio-ready .studio-time-display {
    min-height: 28px;
    min-width: 78px;
    border-radius: 4px;
    font-size: .78rem;
}

.studio-ready .studio-daw-grid {
    display: grid;
    grid-template-columns: 285px minmax(740px, 1fr) 255px;
    align-items: start;
    gap: 8px;
}

.studio-ready .studio-workspace {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(240px, 1fr));
    grid-auto-rows: minmax(210px, auto);
    gap: 8px;
    min-height: 760px;
}

.studio-ready .studio-view-tabs {
    grid-column: 1 / -1;
    order: -10;
    padding: 4px;
    border-radius: 5px;
}

.studio-ready .studio-view-tabs button {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: .62rem;
}

.studio-ready .studio-daw-window,
.studio-ready .studio-topbar {
    border-color: var(--ptx-line);
}

.studio-ready .studio-daw-window {
    position: relative;
    min-width: 0;
    min-height: 165px;
    padding: 7px;
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(22, 31, 45, .98), rgba(7, 10, 16, .98)),
        var(--ptx-panel);
    box-shadow: 0 10px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
    resize: both;
    overflow: auto;
}

.studio-ready .studio-browser {
    min-height: 740px;
}

.studio-ready .studio-project-drawer {
    min-height: 320px;
}

.studio-ready .studio-work-panel {
    display: grid !important;
    align-content: start;
}

.studio-ready .studio-work-panel:not(.is-active) {
    display: grid !important;
}

.studio-ready .studio-pattern-panel {
    grid-column: span 3;
    min-height: 310px;
}

.studio-ready .studio-playlist-panel {
    grid-column: 1 / -1;
    min-height: 360px;
}

.studio-ready .studio-piano-panel {
    grid-column: span 3;
    min-height: 330px;
}

.studio-ready .studio-mixer-panel {
    grid-column: 1 / -1;
    min-height: 330px;
}

.studio-ready .studio-automation-panel,
.studio-ready .studio-sampler-panel {
    grid-column: span 3;
}

.studio-ready .studio-daw-window.is-floating {
    position: fixed;
    z-index: calc(40 + var(--window-order, 1));
    width: min(760px, 82vw);
    height: min(520px, 72vh);
}

.studio-ready .studio-daw-window.is-maximized {
    position: fixed;
    inset: 74px 12px 12px 272px;
    z-index: 70;
    width: auto !important;
    height: auto !important;
}

.studio-ready .studio-daw-window.is-collapsed {
    min-height: 38px;
    height: 38px !important;
    overflow: hidden;
}

.studio-ready .studio-window-titlebar {
    min-height: 25px;
    padding-bottom: 5px;
    cursor: move;
    user-select: none;
}

.studio-ready .studio-window-titlebar > span:first-child {
    color: #fff;
    font-size: .78rem;
    letter-spacing: .02em;
}

.studio-ready .studio-window-tools {
    display: inline-flex;
    gap: 3px;
    margin-left: auto;
}

.studio-ready .studio-window-tools button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(130,157,190,.24);
    border-radius: 3px;
    color: rgba(237,246,255,.75);
    background: rgba(255,255,255,.035);
    font-size: .6rem;
}

.studio-ready .studio-window-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 13px;
    height: 13px;
    border-right: 2px solid rgba(33,212,253,.55);
    border-bottom: 2px solid rgba(33,212,253,.55);
    cursor: nwse-resize;
}

.studio-ready .studio-browser-tabs {
    grid-template-columns: 1fr;
    max-height: 245px;
    overflow: auto;
}

.studio-ready .studio-browser-tabs button {
    padding: 5px 7px;
    text-align: left;
    border-radius: 4px;
    font-size: .62rem;
}

.studio-ready .studio-sample-list {
    gap: 4px;
    max-height: calc(100vh - 395px);
}

.studio-ready .studio-sample-item {
    grid-template-columns: 16px minmax(0, 1fr) 24px auto auto;
    padding: 5px;
    border-radius: 4px;
    background: rgba(8,13,20,.8);
}

.studio-ready .studio-sample-item.is-dragging {
    opacity: .55;
}

.studio-ready .studio-mini-wave {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 1px;
    height: 13px;
    margin-top: 3px;
}

.studio-ready .studio-mini-wave i,
.studio-ready .studio-waveform-large i,
.studio-ready .studio-velocity-lane i {
    display: block;
    background: linear-gradient(180deg, var(--ptx-cyan), var(--ptx-pink));
}

.studio-ready .studio-mini-wave i:nth-child(odd) { height: 35%; }
.studio-ready .studio-mini-wave i:nth-child(even) { height: 75%; }
.studio-ready .studio-fav-btn {
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: 1px solid rgba(255,240,108,.28);
    border-radius: 4px;
    color: var(--ptx-yellow);
    background: rgba(255,240,108,.06);
}

.studio-ready .studio-pad-bank {
    grid-template-columns: repeat(8, minmax(70px, 1fr));
    gap: 4px;
    padding: 6px 0;
}

.studio-ready .studio-pad {
    min-height: 46px;
    padding: 5px;
    border-radius: 4px;
}

.studio-ready .studio-step-ruler,
.studio-ready .studio-track {
    grid-template-columns: 220px minmax(1320px, 1fr);
    gap: 5px;
}

.studio-ready .studio-track {
    align-items: stretch;
}

.studio-ready .studio-track-label {
    min-height: 34px;
    padding: 5px;
    border-radius: 4px;
}

.studio-ready .studio-track-label strong {
    font-size: .68rem;
}

.studio-ready .studio-rack-controls {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}

.studio-ready .studio-rack-controls button {
    width: 22px;
    height: 19px;
    padding: 0;
    border: 1px solid rgba(130,157,190,.24);
    border-radius: 3px;
    color: rgba(237,246,255,.75);
    background: #0b111a;
    font-size: .57rem;
    font-weight: 900;
}

.studio-ready .studio-rack-controls button.is-active {
    border-color: var(--channel-color);
    color: #fff;
}

.studio-ready .studio-mini-slider {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    color: rgba(237,246,255,.45);
    font-size: .54rem;
    text-transform: uppercase;
}

.studio-ready .studio-mini-slider input {
    min-height: 10px;
    accent-color: var(--channel-color);
}

.studio-ready .studio-grid {
    min-width: 1320px;
}

.studio-ready .studio-cell {
    height: 20px;
    border-radius: 2px;
}

.studio-ready .studio-playlist {
    min-height: 318px;
    overflow: auto;
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(33,212,253,.16) 1px, transparent 1px) 122px 0 / calc(var(--playlist-width, 1450px) / 32) 100%,
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 122px 0 / calc(var(--playlist-width, 1450px) / 128) 100%,
        #05080e;
}

.studio-ready .studio-playlist-ruler,
.studio-ready .studio-playlist-lanes {
    min-width: calc(122px + var(--playlist-width, 1450px));
}

.studio-ready .studio-playlist-ruler {
    grid-template-columns: 122px repeat(32, minmax(30px, 1fr));
    height: 25px;
}

.studio-ready .studio-playlist-ruler::before {
    padding: 5px 7px;
}

.studio-ready .studio-playlist-lane {
    height: 38px;
}

.studio-ready .studio-playlist-lane.is-drop-target {
    background: rgba(33,212,253,.045);
}

.studio-ready .studio-playlist-lane-label {
    width: 122px;
    font-size: .6rem;
    letter-spacing: .04em;
}

.studio-ready .studio-drop-ghost {
    position: absolute;
    top: 5px;
    display: none;
    height: 28px;
    border: 1px dashed rgba(255,255,255,.52);
    background: rgba(33,212,253,.14);
    pointer-events: none;
}

.studio-ready .studio-playlist-lane.is-drop-target .studio-drop-ghost {
    display: block;
}

.studio-ready .studio-clip {
    top: 5px;
    height: 28px;
    border-radius: 3px;
}

.studio-ready .studio-clip:hover {
    transform: translateY(-1px);
}

.studio-ready .studio-loop-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.07) 11px 12px);
    pointer-events: none;
}

.studio-ready .studio-playlist-playhead {
    top: 25px;
    min-height: 270px;
}

.studio-ready .studio-piano-roll {
    min-height: 294px;
    max-height: 390px;
    border-radius: 4px;
}

.studio-ready .studio-piano-ruler {
    grid-template-columns: 68px var(--piano-width, 1180px);
    min-width: calc(68px + var(--piano-width, 1180px));
    height: 24px;
}

.studio-ready .studio-piano-ruler-label {
    padding-right: 8px;
    font-size: .54rem;
}

.studio-ready .studio-piano-row {
    grid-template-columns: 68px var(--piano-width, 1180px);
    min-width: calc(68px + var(--piano-width, 1180px));
    min-height: 22px;
}

.studio-ready .studio-piano-grid {
    grid-template-columns: repeat(var(--piano-steps, 64), minmax(12px, 1fr));
}

.studio-ready .studio-piano-key {
    justify-content: end;
    padding-right: 8px;
    font-size: .58rem;
}

.studio-ready .studio-piano-cell {
    min-height: 21px;
}

.studio-ready .studio-piano-cell.is-ghost-note {
    background: rgba(70,255,154,.07);
}

.studio-ready .studio-note-clip {
    top: 3px;
    bottom: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #92ffd0, #21d4fd 70%, #1694b8);
    color: #031016;
}

.studio-ready .studio-note-clip small {
    display: none;
}

.studio-ready .studio-note-clip.is-selected {
    outline: 2px solid var(--ptx-yellow);
}

.studio-ready .studio-velocity-lane {
    display: grid;
    grid-template-columns: 68px repeat(var(--piano-steps, 64), minmax(12px, 1fr));
    align-items: end;
    min-width: calc(68px + var(--piano-width, 1180px));
    height: 58px;
    border-top: 1px solid rgba(130,157,190,.18);
    background: rgba(4,7,12,.92);
}

.studio-ready .studio-velocity-lane span {
    align-self: center;
    padding-right: 8px;
    color: rgba(237,246,255,.5);
    font-size: .56rem;
    font-weight: 900;
    text-align: right;
    text-transform: uppercase;
}

.studio-ready .studio-velocity-lane i {
    width: 70%;
    justify-self: center;
    opacity: .28;
}

.studio-ready .studio-velocity-lane i.has-note {
    opacity: .8;
}

.studio-ready .studio-mixer {
    grid-template-columns: repeat(9, minmax(92px, 1fr));
    gap: 6px;
}

.studio-ready .studio-channel-strip {
    grid-template-rows: 40px 120px repeat(4, auto) auto auto;
    min-width: 92px;
    padding: 6px;
    border-radius: 4px;
}

.studio-ready .studio-meter {
    width: 20px;
    border-radius: 3px;
}

.studio-ready .studio-meter::after {
    content: "";
    position: absolute;
    inset: 20% 0 auto;
    height: 2px;
    background: rgba(255,91,127,.75);
}

.studio-ready .studio-insert-slots {
    display: grid;
    gap: 3px;
}

.studio-ready .studio-insert-slots button {
    min-height: 19px;
    padding: 2px 3px;
    border: 1px solid rgba(130,157,190,.16);
    border-radius: 3px;
    color: rgba(237,246,255,.58);
    background: rgba(255,255,255,.035);
    font-size: .52rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-sampler {
    display: grid;
    gap: 8px;
}

.studio-ready .studio-sampler-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px;
    border-left: 3px solid var(--channel-color);
    background: rgba(255,255,255,.04);
}

.studio-ready .studio-sampler-head span {
    color: rgba(237,246,255,.58);
    font-size: .68rem;
}

.studio-ready .studio-waveform-large {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: end;
    gap: 3px;
    height: 84px;
    padding: 9px;
    border: 1px solid rgba(130,157,190,.16);
    background: #05080e;
}

.studio-ready .studio-waveform-large i:nth-child(1) { height: 38%; }
.studio-ready .studio-waveform-large i:nth-child(2) { height: 82%; }
.studio-ready .studio-waveform-large i:nth-child(3) { height: 55%; }
.studio-ready .studio-waveform-large i:nth-child(4) { height: 92%; }
.studio-ready .studio-waveform-large i:nth-child(5) { height: 62%; }
.studio-ready .studio-waveform-large i:nth-child(6) { height: 74%; }
.studio-ready .studio-waveform-large i:nth-child(7) { height: 44%; }
.studio-ready .studio-waveform-large i:nth-child(8) { height: 69%; }

.studio-ready .studio-waveform-large b {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ptx-yellow);
}

.studio-ready .studio-sampler-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.studio-ready .studio-sampler-grid label {
    display: grid;
    gap: 3px;
    color: rgba(237,246,255,.55);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-sampler-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.studio-ready .studio-sampler-actions button {
    min-height: 26px;
    padding: 5px 7px;
    border: 1px solid rgba(33,212,253,.25);
    border-radius: 4px;
    color: #dffbff;
    background: #0b111a;
    font-size: .62rem;
    font-weight: 900;
}

.studio-ready .studio-sampler-actions button.is-active {
    border-color: var(--ptx-green);
    background: rgba(70,255,154,.12);
}

@media (max-width: 1280px) {
    .studio-ready .studio-daw-grid {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .studio-ready .studio-workspace {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .studio-ready .studio-pattern-panel,
    .studio-ready .studio-playlist-panel,
    .studio-ready .studio-piano-panel,
    .studio-ready .studio-mixer-panel,
    .studio-ready .studio-automation-panel,
    .studio-ready .studio-sampler-panel {
        grid-column: 1;
    }

    .studio-ready .studio-daw-window.is-maximized {
        inset: 70px 8px 8px 8px;
    }
}

@media (max-width: 760px) {
    .studio-ready .studio-daw-grid {
        grid-template-columns: 1fr;
    }

    .studio-ready .studio-browser {
        min-height: 0;
    }

    .studio-ready .studio-daw-window.is-floating,
    .studio-ready .studio-daw-window.is-maximized {
        position: relative;
        inset: auto;
        width: auto !important;
        height: auto !important;
    }

    .studio-ready .studio-pad-bank {
        grid-template-columns: repeat(4, minmax(64px, 1fr));
    }

    .studio-ready .studio-step-ruler,
    .studio-ready .studio-track {
        grid-template-columns: 178px minmax(1120px, 1fr);
    }
}

/* Studio visual correction: muted professional DAW workspace */
.studio-ready .studio-app {
    --ptx-bg: #111418;
    --ptx-panel: #1b2027;
    --ptx-panel-2: #242a32;
    --ptx-panel-3: #2c333d;
    --ptx-line: rgba(200, 208, 218, .16);
    --ptx-text: #d9dee6;
    --ptx-muted: #8c96a4;
    --ptx-accent: #7f9dbb;
    --ptx-cyan: #6e93b8;
    --ptx-green: #75a887;
    --ptx-pink: #a77b94;
    --ptx-yellow: #b8ad72;
    gap: 6px;
    color: var(--ptx-text);
}

.studio-ready .studio-topbar,
.studio-ready .studio-daw-window {
    border: 1px solid #363d47;
    border-radius: 3px;
    background: linear-gradient(180deg, #2a3038, #1b2027);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.34);
}

.studio-ready .studio-topbar {
    grid-template-columns: 180px minmax(620px, 1fr) 360px;
    min-height: 48px;
    padding: 5px;
}

.studio-ready .studio-app-mark {
    border-color: #464f5b;
    color: #cdd5de;
    background: #20262e;
    box-shadow: none;
}

.studio-ready .studio-kicker,
.studio-ready .studio-panel-title small,
.studio-ready .studio-control-label,
.studio-ready .studio-sample-item span,
.studio-ready .studio-strip-name span {
    color: var(--ptx-muted);
}

.studio-ready .studio-brand-lockup h1 {
    color: #f0f2f5;
    font-size: .95rem;
}

.studio-ready button,
.studio-ready .studio-transport-btn,
.studio-ready .studio-secondary-btn,
.studio-ready #studio-save,
.studio-ready .studio-browser-tabs button,
.studio-ready .studio-preview-btn,
.studio-ready .studio-clip-btn,
.studio-ready .studio-fav-btn,
.studio-ready .studio-window-tools button,
.studio-ready .studio-sampler-actions button,
.studio-ready .studio-insert-slots button,
.studio-ready .studio-strip-buttons button,
.studio-ready .studio-rack-controls button {
    border: 1px solid #464f5b;
    border-radius: 3px;
    color: #d7dde5;
    background: linear-gradient(180deg, #343b45, #242a32);
    box-shadow: none;
    filter: none;
    text-shadow: none;
}

.studio-ready button:hover,
.studio-ready .studio-browser-tabs button:hover,
.studio-ready .studio-preview-btn:hover,
.studio-ready .studio-clip-btn:hover {
    border-color: #5b6674;
    background: linear-gradient(180deg, #3a424d, #29303a);
    filter: none;
}

.studio-ready .studio-play-btn,
.studio-ready #studio-save,
.studio-ready .studio-toggle-btn.is-active,
.studio-ready .studio-preview-btn.is-active,
.studio-ready .studio-browser-tabs button.is-active,
.studio-ready .studio-view-tabs button.is-active,
.studio-ready .studio-strip-buttons button.is-active,
.studio-ready .studio-rack-controls button.is-active {
    border-color: #69788a;
    color: #f2f4f6;
    background: linear-gradient(180deg, #46515e, #303842);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.studio-ready .studio-control-label input,
.studio-ready .studio-control-label select,
.studio-ready .studio-project-tools input,
.studio-ready .studio-browser-controls input,
.studio-ready .studio-browser-controls select,
.studio-ready .studio-loop-upload input,
.studio-ready .studio-pattern-toolbar input {
    border-color: #3b434e;
    border-radius: 2px;
    color: #e3e7ec;
    background: #151a20;
}

.studio-ready .studio-time-display {
    border-color: #464f5b;
    color: #d9dee6;
    background: #14191f;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.studio-ready .studio-daw-grid {
    grid-template-columns: 245px minmax(860px, 1fr) 220px;
    gap: 6px;
    min-height: 0;
}

.studio-ready .studio-browser,
.studio-ready .studio-project-drawer {
    min-height: calc(100vh - 82px);
    max-height: calc(100vh - 82px);
    overflow: hidden;
}

.studio-ready .studio-workspace {
    grid-template-columns: repeat(12, minmax(58px, 1fr));
    grid-template-rows: 360px 265px 224px;
    grid-auto-rows: minmax(160px, auto);
    gap: 6px;
    min-height: 0;
}

.studio-ready .studio-view-tabs {
    position: sticky;
    top: 0;
    z-index: 18;
    display: flex;
    align-items: center;
    min-height: 34px;
    background: #10151b;
}

.studio-ready .studio-layout-controls button.studio-layout-primary {
    border-color: rgba(33, 212, 253, .45);
    color: #effcff;
    background: linear-gradient(180deg, rgba(33, 212, 253, .24), rgba(12, 70, 88, .54));
}

.studio-ready .studio-playlist-panel {
    grid-column: 1 / 10;
    grid-row: 1;
    min-height: 0;
}

.studio-ready .studio-pattern-panel {
    grid-column: 10 / 13;
    grid-row: 1;
    min-height: 0;
}

.studio-ready .studio-piano-panel {
    grid-column: 1 / 10;
    grid-row: 2;
    min-height: 0;
}

.studio-ready .studio-sampler-panel {
    grid-column: 10 / 13;
    grid-row: 2;
    min-height: 0;
}

.studio-ready .studio-voice-panel {
    grid-column: 10 / 13;
    grid-row: 2;
    min-height: 0;
    margin-top: 136px;
    max-height: 129px;
}

.studio-ready .studio-mixer-panel {
    grid-column: 1 / 13;
    grid-row: 3;
    min-height: 0;
}

.studio-ready .studio-automation-panel {
    grid-column: 10 / 13;
    grid-row: 3;
    min-height: 0;
}

.studio-ready .studio-daw-window {
    padding: 5px;
    resize: none;
}

.studio-ready .studio-window-titlebar {
    min-height: 22px;
    padding-bottom: 4px;
    border-bottom-color: #343b45;
    cursor: default;
}

.studio-ready .studio-window-titlebar > span:first-child {
    color: #e1e5ea;
    font-size: .68rem;
    letter-spacing: 0;
}

.studio-ready .studio-window-resize {
    border-color: #5d6875;
    opacity: .55;
}

.studio-ready .studio-browser-tabs {
    display: grid;
    gap: 2px;
    max-height: 310px;
    margin: 6px 0;
    padding: 3px;
    border: 1px solid #313843;
    background: #151a20;
}

.studio-ready .studio-browser-tabs button {
    position: relative;
    min-height: 22px;
    padding: 3px 6px 3px 18px;
    border-color: transparent;
    background: transparent;
    text-align: left;
    font-size: .58rem;
    text-transform: none;
}

.studio-ready .studio-browser-tabs button::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 7px;
    height: 5px;
    border: 1px solid #77808c;
    border-top-width: 3px;
    opacity: .75;
}

.studio-ready .studio-sample-list {
    min-height: 0;
    max-height: calc(100vh - 478px);
    gap: 2px;
}

.studio-ready .studio-sample-item {
    grid-template-columns: 12px minmax(0, 1fr) 22px 44px 34px;
    min-height: 34px;
    padding: 3px 4px;
    border-color: transparent;
    background: #171c23;
}

.studio-ready .studio-sample-item strong {
    color: #dfe3e8;
    font-size: .68rem;
}

.studio-ready .studio-sample-item em {
    color: #9aa4b1;
    font-size: .52rem;
}

.studio-ready .studio-drag-handle {
    width: 12px;
    min-height: 28px;
    border-color: #39414c;
    background: #20262e;
}

.studio-ready .studio-mini-wave {
    height: 8px;
    opacity: .72;
}

.studio-ready .studio-mini-wave i,
.studio-ready .studio-waveform-large i,
.studio-ready .studio-velocity-lane i {
    background: #7e8da0;
}

.studio-ready .studio-playlist {
    min-height: 296px;
    height: 296px;
    border-color: #363d47;
    background:
        linear-gradient(90deg, rgba(210,218,228,.16) 1px, transparent 1px) 122px 0 / calc(var(--playlist-width, 1450px) / 32) 100%,
        linear-gradient(90deg, rgba(210,218,228,.055) 1px, transparent 1px) 122px 0 / calc(var(--playlist-width, 1450px) / 128) 100%,
        linear-gradient(0deg, rgba(210,218,228,.07) 1px, transparent 1px) 0 25px / 100% 38px,
        #131820;
}

.studio-ready .studio-playlist-ruler {
    height: 24px;
    border-color: #363d47;
    background: #232a33;
}

.studio-ready .studio-playlist-ruler::before,
.studio-ready .studio-playlist-lane-label,
.studio-ready .studio-piano-key,
.studio-ready .studio-velocity-lane span {
    color: #aeb6c1;
    background: #20262e;
}

.studio-ready .studio-playlist-lane {
    height: 38px;
    border-bottom-color: rgba(210,218,228,.09);
}

.studio-ready .studio-clip {
    top: 5px;
    height: 27px;
    border-radius: 2px;
    border-color: rgba(235,239,244,.32);
    background: linear-gradient(180deg, color-mix(in srgb, var(--channel-color) 46%, #46505c 54%), color-mix(in srgb, var(--channel-color) 20%, #252b33 80%));
    box-shadow: none;
}

.studio-ready .studio-clip.is-selected {
    outline: 2px solid #e1d48d;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

.studio-ready .studio-clip strong {
    font-size: .6rem;
}

.studio-ready .studio-clip span {
    color: rgba(242,244,246,.68);
    font-size: .5rem;
}

.studio-ready .studio-drop-ghost {
    border-color: rgba(230,235,242,.55);
    background: rgba(150,162,176,.18);
}

.studio-ready .studio-playlist-playhead {
    width: 1px;
    background: #e0d27d;
    box-shadow: none;
}

.studio-ready .studio-pad-bank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 4px 0;
}

.studio-ready .studio-pad {
    min-height: 36px;
    padding: 4px;
    border-radius: 2px;
    background: #1a2027;
}

.studio-ready .studio-step-ruler,
.studio-ready .studio-track {
    grid-template-columns: 118px minmax(720px, 1fr);
    gap: 3px;
}

.studio-ready .studio-ruler-grid,
.studio-ready .studio-grid {
    min-width: 720px;
}

.studio-ready .studio-track-label {
    min-height: 30px;
    padding: 4px;
    background: #1a2027;
}

.studio-ready .studio-rack-controls,
.studio-ready .studio-mini-slider {
    display: none;
}

.studio-ready .studio-cell {
    height: 17px;
    border-radius: 1px;
    border-color: rgba(210,218,228,.12);
    background: #11161d;
}

.studio-ready .studio-cell.is-on {
    background: color-mix(in srgb, var(--channel-color) 42%, #303944 58%);
    box-shadow: none;
}

.studio-ready .studio-piano-roll {
    min-height: 245px;
    height: 245px;
    max-height: 245px;
    border-color: #363d47;
    background: #12171e;
}

.studio-ready .studio-piano-ruler {
    height: 24px;
    border-color: #363d47;
    background: #10151b;
}

.studio-ready .studio-piano-ruler-grid {
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .16) 1px, transparent 1px) 0 0 / 25% 100%,
        linear-gradient(90deg, rgba(210,218,228,.08) 1px, transparent 1px) 0 0 / 6.25% 100%;
}

.studio-ready .studio-piano-row {
    min-height: 18px;
}

.studio-ready .studio-piano-cell {
    min-height: 17px;
    border-left-color: rgba(210,218,228,.055);
}

.studio-ready .studio-piano-cell:nth-child(4n + 1) {
    background: rgba(255,255,255,.025);
}

.studio-ready .studio-piano-cell:nth-child(16n + 1) {
    border-left-color: rgba(210,218,228,.18);
}

.studio-ready .studio-note-clip {
    top: 2px;
    bottom: 2px;
    border-radius: 1px;
    color: #111820;
    background: linear-gradient(180deg, #b8f7c2, #7fbf9d);
    box-shadow: none;
    font-size: .52rem;
}

.studio-ready .studio-velocity-lane {
    height: 40px;
    background: #151a20;
}

.studio-ready .studio-mixer {
    grid-template-columns: repeat(9, minmax(82px, 1fr));
    gap: 4px;
}

.studio-ready .studio-channel-strip {
    grid-template-rows: 34px 86px repeat(4, auto) auto auto;
    min-width: 82px;
    padding: 4px;
    border-color: #363d47;
    border-top-width: 2px;
    border-radius: 2px;
    background: #1a2027;
}

.studio-ready .studio-meter {
    width: 14px;
    border-radius: 1px;
    background: #10151b;
}

.studio-ready .studio-meter-fill {
    background: linear-gradient(180deg, #b9b16f, #7aa085 55%, #5f7c6c);
}

.studio-ready .studio-channel-strip label {
    color: #8f98a5;
    font-size: .5rem;
}

.studio-ready .studio-channel-strip input[type="range"],
.studio-ready .studio-master-control input,
.studio-ready .studio-mini-slider input,
.studio-ready .studio-fader {
    accent-color: #8a96a5;
}

.studio-ready .studio-insert-slots {
    gap: 2px;
}

.studio-ready .studio-insert-slots button {
    min-height: 16px;
    font-size: .48rem;
    color: #9ea7b2;
}

.studio-ready .studio-sampler,
.studio-ready .studio-voice-editor,
.studio-ready .studio-automation-lane {
    max-height: 210px;
    overflow: auto;
}

.studio-ready .studio-recording-tools {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 56px 56px minmax(74px, .7fr);
    gap: 4px;
    margin: 5px 0;
}

.studio-ready .studio-recording-tools input,
.studio-ready .studio-recording-tools select,
.studio-ready .studio-recording-tools label,
.studio-ready .studio-recording-tools span {
    min-height: 24px;
    border: 1px solid #3b434e;
    border-radius: 2px;
    color: #e3e7ec;
    background: #151a20;
    padding: 3px 5px;
    font-size: .62rem;
}

.studio-ready .studio-recording-tools label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #aeb7c3;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-recording-tools span {
    grid-column: span 2;
    color: #9aa4b1;
    font-size: .55rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-browser-more {
    min-height: 26px;
    margin-top: 3px;
    border-color: #4c5663;
    color: #cbd2dc;
    background: #20262e;
    font-size: .6rem;
    font-weight: 900;
}

.studio-ready .studio-voice-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    margin-bottom: 4px;
}

.studio-ready .studio-voice-meta input {
    min-height: 23px;
    border: 1px solid #3b434e;
    border-radius: 2px;
    color: #e3e7ec;
    background: #151a20;
    padding: 3px 5px;
    font-size: .62rem;
}

.studio-ready .studio-voice-meta button {
    min-height: 23px;
    padding: 3px 6px;
    font-size: .56rem;
}

.studio-ready .studio-voice-meta span {
    color: #8c96a4;
    font-size: .5rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-empty-editor {
    padding: 8px;
    color: #8c96a4;
    font-size: .65rem;
}

.studio-ready .studio-voice-panel .studio-waveform-large {
    display: none;
}

.studio-ready .studio-voice-panel .studio-sampler-head,
.studio-ready .studio-voice-panel .studio-sampler-actions {
    display: none;
}

.studio-ready .studio-voice-grid {
    grid-template-columns: 1fr;
}

.studio-ready .studio-waveform-large {
    height: 58px;
    border-color: #363d47;
    background: #12171e;
}

.studio-ready .studio-sampler-grid {
    grid-template-columns: 1fr;
    gap: 4px;
}

.studio-ready .studio-sampler-grid label {
    font-size: .52rem;
}

.studio-ready .studio-automation-lane {
    min-height: 150px;
    background:
        linear-gradient(90deg, rgba(210,218,228,.12) 1px, transparent 1px) 0 0 / 12.5% 100%,
        linear-gradient(0deg, rgba(210,218,228,.06) 1px, transparent 1px) 0 0 / 100% 25%,
        #12171e;
}

@media (max-width: 1280px) {
    .studio-ready .studio-daw-grid {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .studio-ready .studio-workspace {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .studio-ready .studio-playlist-panel,
    .studio-ready .studio-pattern-panel,
    .studio-ready .studio-piano-panel,
    .studio-ready .studio-sampler-panel,
    .studio-ready .studio-mixer-panel,
    .studio-ready .studio-automation-panel {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Studio full-screen app mode */
body.studio-app-body {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #111418;
}

body.studio-app-body::before {
    display: none;
}

.studio-app-body .studio-shell {
    display: block;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.studio-app-body .studio-app {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    min-height: 0;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.studio-app-body .studio-mobile-note {
    display: none;
}

.studio-ready .studio-topbar {
    position: relative;
    top: auto;
    z-index: 20;
    grid-template-columns: 170px minmax(600px, 1fr) minmax(390px, 520px);
    border-width: 0 0 1px;
    border-radius: 0;
}

.studio-ready .studio-exit-btn {
    min-height: 27px;
    height: 27px;
    padding: 3px 10px;
    border: 1px solid #5b6674;
    border-radius: 3px;
    color: #eef1f4;
    background: linear-gradient(180deg, #3e4651, #252b33);
    font-size: .66rem;
    font-weight: 900;
}

.studio-ready .studio-exit-btn:hover {
    border-color: #737f8e;
    background: linear-gradient(180deg, #48515d, #2d343e);
}

.studio-ready .studio-daw-grid {
    grid-template-columns: 260px minmax(900px, 1fr) 230px;
    height: calc(100vh - 59px);
    min-height: 0;
    padding: 6px;
    overflow: hidden;
}

.studio-ready .studio-browser,
.studio-ready .studio-project-drawer {
    min-height: 0;
    max-height: none;
    height: 100%;
}

.studio-ready .studio-workspace {
    height: 100%;
    grid-template-rows: minmax(340px, 1.25fr) minmax(220px, .85fr) minmax(170px, .6fr);
    overflow: hidden;
}

.studio-ready .studio-daw-window {
    min-height: 0;
    overflow: hidden;
}

.studio-ready .studio-playlist-panel,
.studio-ready .studio-pattern-panel,
.studio-ready .studio-piano-panel,
.studio-ready .studio-sampler-panel,
.studio-ready .studio-voice-panel,
.studio-ready .studio-mixer-panel,
.studio-ready .studio-automation-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
}

.studio-ready .studio-playlist-panel {
    grid-column: 1 / 10;
    grid-row: 1;
}

.studio-ready .studio-playlist {
    height: 100%;
    min-height: 0;
    overflow: auto;
}

.studio-ready .studio-pattern-panel {
    overflow: auto;
}

.studio-ready .studio-tracks,
.studio-ready .studio-piano-roll,
.studio-ready .studio-mixer,
.studio-ready .studio-sampler,
.studio-ready .studio-voice-editor,
.studio-ready .studio-automation-lane,
.studio-ready .studio-sample-list,
.studio-ready .studio-project-list {
    min-height: 0;
    overflow: auto;
}

.studio-ready .studio-sample-list {
    max-height: none;
}

.studio-ready .studio-piano-roll {
    height: 100%;
    max-height: none;
}

.studio-ready .studio-mixer {
    height: 100%;
}

.studio-ready .studio-sample-error {
    display: block;
    min-height: 11px;
    color: #d7a0a0;
    font-size: .5rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.studio-ready .studio-sample-item.has-audio-error {
    border-color: rgba(196, 118, 118, .36);
}

.studio-ready .studio-sample-item.has-audio-error .studio-preview-btn {
    border-color: #7b5559;
    color: #f0c5c5;
}

.studio-ready .studio-daw-window.is-maximized {
    inset: 58px 8px 8px 8px;
}

@media (max-width: 1280px) {
    body.studio-app-body {
        overflow: auto;
    }

    .studio-app-body .studio-shell,
    .studio-app-body .studio-app {
        min-height: 100vh;
        height: auto;
    }

    .studio-ready .studio-topbar,
    .studio-ready .studio-daw-grid {
        grid-template-columns: 1fr;
    }

    .studio-ready .studio-daw-grid {
        height: auto;
        overflow: visible;
    }

    .studio-ready .studio-workspace {
        height: auto;
        overflow: visible;
    }
}

/* PULSATRAX Studio retained mechanics: layout, drag targets, meters, and modal states. */
.studio-ready .studio-daw-grid {
    position: relative;
    overflow: hidden;
}

.studio-ready .studio-workspace {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 0;
    overflow: hidden;
}

.studio-ready .studio-work-panel:not(.is-active):not(.is-hidden-by-layout) {
    display: grid !important;
}

.studio-ready .studio-playlist-panel { grid-column: 1 / 11; grid-row: 1 / 3; min-height: 0; }
.studio-ready .studio-pattern-panel { grid-column: 11 / 13; grid-row: 1; min-height: 0; }
.studio-ready .studio-sampler-panel,
.studio-ready .studio-voice-panel,
.studio-ready .studio-automation-panel { grid-column: 11 / 13; grid-row: 2; min-height: 0; }
.studio-ready .studio-piano-panel { grid-column: 1 / 11; grid-row: 2; min-height: 0; }
.studio-ready .studio-mixer-panel { grid-column: 1 / 13; grid-row: 3; min-height: 0; }

.studio-ready .studio-app.is-piano-hidden .studio-playlist-panel,
.studio-ready .studio-app.is-rack-hidden.is-sampler-hidden .studio-playlist-panel {
    grid-column: 1 / 13;
}

.studio-ready .studio-app.is-mixer-hidden .studio-workspace {
    grid-template-rows: minmax(0, 1fr) minmax(112px, .24fr) 0;
}

.studio-ready .studio-app.is-piano-hidden.is-mixer-hidden .studio-workspace {
    grid-template-rows: minmax(0, 1fr) minmax(96px, .2fr) 0;
}

.studio-ready .studio-work-panel.is-hidden-by-layout,
.studio-ready .studio-project-drawer.is-hidden-by-layout,
.studio-ready .studio-browser.is-hidden-by-layout {
    display: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.studio-ready .studio-app.is-browser-hidden .studio-daw-grid {
    grid-template-columns: 0 minmax(0, 1fr) minmax(180px, var(--studio-project-width, 216px));
}

.studio-ready .studio-app.is-projects-hidden .studio-daw-grid {
    grid-template-columns: minmax(280px, var(--studio-browser-width, 328px)) minmax(0, 1fr) 0;
}

.studio-ready .studio-app.is-browser-hidden.is-projects-hidden .studio-daw-grid {
    grid-template-columns: 0 minmax(0, 1fr) 0;
}

.studio-ready .studio-daw-splitter {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 35;
    width: 4px;
    transform: translateX(-2px);
    border-left: 1px solid rgba(33, 212, 253, .24);
    border-right: 1px solid rgba(0, 0, 0, .45);
    background: rgba(33, 212, 253, .08);
    cursor: col-resize;
}

.studio-ready .studio-daw-splitter-left { left: var(--studio-browser-width, 328px); }
.studio-ready .studio-daw-splitter-right { right: var(--studio-project-width, 216px); }
.studio-ready .studio-app.is-browser-hidden .studio-daw-splitter-left,
.studio-ready .studio-app.is-projects-hidden .studio-daw-splitter-right { display: none; }

.studio-ready .studio-playlist {
    min-height: 0;
    height: 100%;
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-color: #59636f #14191f;
    scrollbar-width: thin;
}

.studio-ready .studio-playlist-ruler,
.studio-ready .studio-playlist-lanes {
    min-width: calc(var(--studio-gutter) + var(--playlist-width, 1472px));
}

.studio-ready .studio-playlist-ruler {
    grid-template-columns: var(--studio-gutter) repeat(var(--song-bars, 32), minmax(22px, 1fr));
    cursor: pointer;
    user-select: none;
}

.studio-ready .studio-playlist-lanes {
    position: relative;
}

.studio-ready .studio-playlist-lane {
    background-size: calc(var(--playlist-width, 1472px) / var(--song-bars, 32)) 100%, calc(var(--playlist-width, 1472px) / var(--song-steps, 512)) 100%;
    background-position: var(--studio-gutter) 0, var(--studio-gutter) 0;
}

.studio-ready .studio-playlist-lane.is-drop-target {
    outline: 1px solid rgba(33, 212, 253, .5);
    outline-offset: -1px;
}

.studio-ready .studio-drop-ghost {
    top: 6px;
    display: none;
    height: 30px;
    padding: 6px 8px;
    color: #f4f8fb;
    border-style: solid;
    border-color: rgba(33, 212, 253, .5);
    background: rgba(33, 212, 253, .16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22);
    font-size: .58rem;
    font-weight: 900;
    pointer-events: none;
}

.studio-ready .studio-playlist-lane.is-drop-target .studio-drop-ghost {
    display: block;
}

.studio-ready .studio-box-select {
    position: absolute;
    z-index: 8;
    border: 1px solid #c8d0da;
    background: rgba(143, 160, 178, .18);
    pointer-events: none;
}

.studio-ready .studio-box-select.is-subtracting {
    border-color: rgba(255, 91, 127, .82);
    background: rgba(255, 91, 127, .14);
}

.studio-ready .studio-clip {
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease, filter .12s ease, transform .1s ease;
    touch-action: none;
    user-select: none;
}

.studio-ready .studio-clip-delete {
    position: absolute;
    top: 4px;
    right: 14px;
    width: 13px;
    height: 13px;
    min-height: 13px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 3px;
    color: #dfe5eb;
    background: rgba(0,0,0,.3);
    font-size: .55rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

.studio-ready .studio-clip.is-selected .studio-clip-delete,
.studio-ready .studio-clip:focus-within .studio-clip-delete {
    opacity: .9;
    pointer-events: auto;
}

.studio-ready .studio-clip.is-compact-clip .studio-clip-delete {
    opacity: 0;
    pointer-events: none;
}

.studio-ready .studio-clip .studio-clip-resize-left,
.studio-ready .studio-clip .studio-clip-resize-right {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.05));
    cursor: ew-resize;
    touch-action: none;
}

.studio-ready .studio-clip .studio-clip-resize-left {
    left: 0;
    border-right: 1px solid rgba(255,255,255,.16);
}

.studio-ready .studio-clip .studio-clip-resize-right {
    right: 0;
}

.studio-ready .studio-clip:hover,
.studio-ready .studio-clip.is-under-playhead,
.studio-ready .studio-clip.is-playing {
    filter: brightness(1.08);
}

.studio-ready .studio-clip.is-vocal-clip {
    border-color: rgba(255, 196, 87, .72);
}

.studio-ready .studio-playlist-playhead {
    transition-property: left;
    transition-timing-function: linear;
    will-change: left;
}

.studio-ready .studio-sample-main strong,
.studio-ready .studio-sample-category,
.studio-ready .studio-sample-meta,
.studio-ready .studio-clip strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.studio-ready .studio-drag-handle {
    display: grid;
    place-items: center;
    width: 16px;
    min-height: 28px;
    color: #788390;
    cursor: grab;
    font-size: .62rem;
}

.studio-ready .studio-preview-btn.is-loading {
    color: #f4d47e;
    border-color: rgba(244, 212, 126, .45);
}

.studio-ready .studio-preview-btn.has-error,
.studio-ready .studio-sample-item.has-audio-error .studio-preview-btn {
    color: #ffc7c7;
    border-color: rgba(255, 98, 98, .45);
}

.studio-ready .studio-sample-error {
    grid-column: 2 / -1;
    min-height: 0;
    color: #ffc7c7;
    font-size: .52rem;
}

.studio-ready .studio-sample-item.is-dragging {
    opacity: .68;
}

.studio-ready .studio-sample-item.is-broken-loop {
    opacity: .72;
    border-color: rgba(255, 98, 98, .34);
    background: rgba(56, 21, 25, .5);
}

.studio-ready .studio-sample-item.is-broken-loop .studio-sample-main strong::after {
    content: " !";
    color: #ffc7c7;
}

.studio-ready .studio-sample-item.is-recent .studio-sample-meta::after {
    content: " recent";
    color: #aeb7c2;
}

.studio-ready .studio-app.is-compact-mode .studio-daw-grid {
    min-height: 0;
    padding: 4px;
    gap: 4px;
}

.studio-ready .studio-app.is-compact-mode .studio-work-panel,
.studio-ready .studio-app.is-compact-mode .studio-browser,
.studio-ready .studio-app.is-compact-mode .studio-project-drawer {
    padding: 5px;
}

.studio-ready .studio-app.is-compact-mode .studio-playlist-lane {
    height: 30px;
}

.studio-ready .studio-app.is-compact-mode .studio-clip,
.studio-ready .studio-app.is-compact-mode .studio-drop-ghost {
    top: 4px;
    height: 22px;
}

.studio-ready .studio-browser-extra-filters,
.studio-ready .studio-recording-tools {
    display: grid;
    gap: 6px;
    padding: 7px;
}

.studio-ready .studio-recording-tools input,
.studio-ready .studio-recording-tools select,
.studio-ready .studio-recording-tools label,
.studio-ready .studio-recording-tools span {
    min-height: 30px;
}

.studio-ready .studio-record-voice-btn.is-armed {
    border-color: rgba(244, 212, 126, .62);
    color: #fff1bd;
    background: linear-gradient(180deg, rgba(244, 212, 126, .22), rgba(58, 45, 23, .62));
}

.studio-ready .studio-piano-roll,
.studio-ready .studio-mixer,
.studio-ready .studio-sampler,
.studio-ready .studio-voice-editor,
.studio-ready .studio-automation-lane,
.studio-ready .studio-sample-list,
.studio-ready .studio-project-list {
    min-height: 0;
    max-height: none;
    scrollbar-color: #59636f #14191f;
    scrollbar-width: thin;
}

.studio-ready .studio-channel-strip,
.studio-ready .studio-meter-fill,
.studio-ready .studio-sample-item {
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, filter .12s ease;
}

.studio-ready .studio-meter-fill {
    transition: transform .06s linear, filter .08s ease;
    will-change: transform;
}

.studio-ready .studio-meter-fill.is-clipping {
    filter: brightness(1.28) saturate(1.1);
}

.studio-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 260;
    max-width: min(360px, calc(100vw - 36px));
    padding: 9px 12px;
    border: 1px solid rgba(33, 212, 253, .38);
    border-radius: 6px;
    color: #f4f6f8;
    background: rgba(16, 22, 30, .96);
    box-shadow: 0 12px 30px rgba(0,0,0,.42);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.studio-toast.is-open {
    opacity: 1;
    transform: translateY(0);
}

.studio-help-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(9, 12, 16, .72);
}

.studio-help-modal.is-open {
    display: grid;
}

.studio-help-dialog {
    width: min(860px, 94vw);
    max-height: min(680px, 90vh);
    overflow: auto;
    border: 1px solid #4b5563;
    border-radius: 4px;
    color: #dde2e8;
    background: #1b2027;
    box-shadow: 0 18px 48px rgba(0,0,0,.48);
}

.studio-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #343b45;
    background: #242a32;
}

.studio-help-head h2 {
    margin: 0;
    font-size: 1rem;
}

.studio-help-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.studio-help-block {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(130, 157, 190, .17);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(33, 212, 253, .055), transparent 54%),
        rgba(255, 255, 255, .025);
}

.studio-help-block span,
.studio-help-subtitle {
    display: block;
    margin: 0 0 8px;
    color: #f2f7fb;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.studio-help-subtitle {
    padding: 0 14px;
}

.studio-help-dialog ol {
    margin: 0;
    padding: 0 0 0 18px;
}

.studio-help-dialog ul {
    margin: 0;
    padding: 0 0 0 17px;
}

.studio-help-dialog li {
    margin: 0 0 8px;
    color: #cbd3dc;
    font-size: .86rem;
    line-height: 1.35;
}

.studio-help-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px 14px;
    color: #aeb7c2;
    font-size: .8rem;
}

.studio-voice-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(9, 12, 16, .72);
}
.studio-voice-modal.is-open {
    display: grid;
}
.studio-voice-dialog {
    width: min(520px, 94vw);
    border: 1px solid #4b5563;
    border-radius: 4px;
    color: #dde2e8;
    background: #1b2027;
    box-shadow: 0 18px 48px rgba(0,0,0,.48);
}
.studio-voice-modal-body {
    display: grid;
    gap: 8px;
    padding: 14px;
}
.studio-voice-modal-body p {
    margin: 0;
    color: #aeb7c2;
    font-size: .82rem;
}
.studio-voice-modal-body input {
    min-height: 30px;
    padding: 5px 7px;
    border: 1px solid #3b434e;
    border-radius: 2px;
    color: #dde2e8;
    background: #10151b;
}
.studio-voice-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 14px;
}
@media (max-width: 1280px) {
    .studio-ready .studio-daw-grid,
    .studio-ready .studio-app.is-browser-hidden .studio-daw-grid,
    .studio-ready .studio-app.is-projects-hidden .studio-daw-grid {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
}

/* Future-of-creation polish: Studio cockpit, PTX signals, ecosystem rails */
.studio-ready .studio-future-rail,
.studio-future-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border-bottom: 1px solid #303741;
    color: #dfe5ec;
    background: linear-gradient(180deg, #191f26, #12171d);
}

.studio-ready .studio-future-rail div,
.studio-future-card {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #303741;
    border-radius: 2px;
    background: rgba(255, 255, 255, .025);
}

.studio-ready .studio-future-rail span,
.studio-future-rail span,
.studio-future-card p {
    display: block;
    margin: 0;
    color: #8f9aa7;
    font-size: .56rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready .studio-future-rail strong,
.studio-future-rail strong,
.studio-future-card strong {
    display: block;
    overflow: hidden;
    color: #eef2f6;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-app.is-playing .studio-future-rail {
    border-bottom-color: rgba(232, 215, 121, .36);
    background: linear-gradient(180deg, #20242a, #151a20);
}

.studio-ready .studio-app.is-playing .studio-future-rail div:first-child {
    border-color: rgba(232, 215, 121, .44);
    box-shadow: inset 0 0 0 1px rgba(232, 215, 121, .08);
}

.studio-ready .studio-sample-main .studio-mini-wave {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    align-items: end;
    gap: 1px;
    height: 8px;
    margin-top: 3px;
    opacity: .62;
}

.studio-ready .studio-waveform-large {
    grid-template-columns: repeat(auto-fit, minmax(3px, 1fr));
}

.studio-ready .studio-waveform-large i {
    min-height: 6px;
}

.studio-ready .studio-app {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

html.studio-ready body.studio-app-body .studio-app {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.studio-ready .studio-daw-grid {
    height: calc(100vh - 196px);
}

.ptx-project-widget,
.creator-workbench-card,
.future-rooms-strip {
    border-color: rgba(33, 212, 253, .18);
    background:
        linear-gradient(135deg, rgba(33, 212, 253, .055), transparent 36%),
        linear-gradient(180deg, rgba(15, 19, 31, .96), rgba(8, 10, 18, .96));
}

.ptx-project-item,
.creator-project-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, .035);
}

.ptx-project-item + .ptx-project-item,
.creator-project-list a + a {
    margin-top: 7px;
}

.ptx-project-item:hover,
.creator-project-list a:hover,
.ptx-project-card:hover {
    border-color: rgba(33, 212, 253, .34);
    background: rgba(33, 212, 253, .065);
}

.ptx-project-item strong,
.creator-project-list strong,
.ptx-project-card strong {
    display: block;
    overflow: hidden;
    color: #f6fbff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptx-project-item em,
.creator-project-list span,
.ptx-project-card p {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
}

.ptx-project-open {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

.creator-workbench-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.creator-workbench-grid div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    background: rgba(255, 255, 255, .035);
}

.creator-workbench-grid strong {
    display: block;
    color: #f6fbff;
    font-size: 1.35rem;
    line-height: 1;
}

.creator-workbench-grid span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.creator-project-list {
    display: grid;
    gap: 7px;
}

.ptx-project-grid .discovery-stat-card {
    min-height: 92px;
}

.loop-radar-grid {
    align-items: stretch;
}

.loop-radar-chip {
    display: grid;
    gap: 3px;
    min-height: 58px;
    align-content: center;
}

.loop-radar-chip em {
    color: var(--muted);
    font-size: .72rem;
    font-style: normal;
}

.future-rooms-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(33, 212, 253, .18);
    border-radius: 8px;
}

.future-rooms-strip div {
    min-width: 0;
}

.future-rooms-strip span {
    color: #21d4fd;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.future-rooms-strip strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1.02rem;
}

.future-rooms-strip p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 1280px) {
    .studio-ready .studio-daw-grid {
        height: auto;
    }
}

@media (max-width: 760px) {
    .studio-ready .studio-future-rail,
    .studio-future-rail,
    .creator-workbench-grid {
        grid-template-columns: 1fr;
    }

    .future-rooms-strip {
        align-items: stretch;
        flex-direction: column;
    }

.future-rooms-strip .launch-cta {
        width: 100%;
    }
}

/* Creator economy foundation: PTX project publishing cards */
.ptx-project-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(33, 212, 253, .16);
    border-radius: 8px;
    color: inherit;
    background: linear-gradient(135deg, rgba(33, 212, 253, .055), transparent 42%), rgba(255, 255, 255, .035);
}

.ptx-project-card h3 {
    margin: 5px 0 2px;
    color: #f7fbff;
    font-size: .98rem;
    letter-spacing: 0;
}

.ptx-project-card p,
.ptx-project-card em,
.ptx-project-card small {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
    line-height: 1.35;
}

.ptx-project-preview {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 86px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    color: #10141c;
    background:
        linear-gradient(135deg, rgba(33, 212, 253, .72), rgba(217, 70, 239, .42)),
        #111722;
    font-size: .9rem;
    font-weight: 950;
    overflow: hidden;
    text-align: center;
}

.ptx-project-preview em {
    display: inline-flex;
    min-height: 18px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #eafbff;
    background: rgba(5, 9, 16, .55);
    font-size: .56rem;
    font-style: normal;
    text-transform: uppercase;
}

.ptx-project-preview i {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 72%;
    height: 24px;
    opacity: .82;
}

.ptx-project-preview i b {
    display: block;
    width: 3px;
    min-height: 5px;
    border-radius: 999px;
    background: rgba(10, 14, 20, .72);
}

.ptx-project-badges,
.ptx-project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.ptx-project-actions {
    margin-top: 8px;
}

.ptx-project-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid rgba(33, 212, 253, .2);
    border-radius: 999px;
    color: #dff8ff;
    background: rgba(33, 212, 253, .08);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ptx-project-badge-remix {
    border-color: rgba(217, 70, 239, .25);
    color: #f6dcff;
    background: rgba(217, 70, 239, .09);
}

.ptx-project-badge-collab {
    border-color: rgba(70, 255, 154, .22);
    color: #dcffe9;
    background: rgba(70, 255, 154, .075);
}

.ptx-project-badge-muted {
    border-color: rgba(255, 255, 255, .12);
    color: #aeb7c3;
    background: rgba(255, 255, 255, .045);
}

.ptx-project-badge-starter {
    border-color: rgba(244, 212, 126, .32);
    color: #fff1bc;
    background: rgba(244, 212, 126, .1);
}

.ptx-project-card-list {
    display: grid;
    gap: 9px;
}

.alpha-project-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.studio-ready .studio-project-publish-fields {
    display: grid;
    gap: 6px;
    margin: 7px 0;
    padding: 7px;
    border: 1px solid #303741;
    border-radius: 3px;
    background: rgba(255, 255, 255, .025);
}

.studio-ready .studio-project-publish-fields label {
    display: grid;
    gap: 3px;
    color: #9fa9b5;
    font-size: .56rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-publish-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #f2f7fb;
    font-size: .64rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.made-in-ptx-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(33, 212, 253, .22);
    border-radius: 999px;
    color: #dff8ff;
    background: rgba(33, 212, 253, .08);
    font-size: .56rem;
}

.studio-ready .studio-project-publish-fields input,
.studio-ready .studio-project-publish-fields textarea,
.studio-ready .studio-project-publish-fields select {
    width: 100%;
    min-height: 25px;
    border: 1px solid #3b434e;
    border-radius: 2px;
    color: #e3e7ec;
    background: #10151b;
    padding: 4px 6px;
    font-size: .65rem;
}

.studio-ready .studio-project-toggle {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.studio-project-rights-note {
    margin: 4px 0 0;
    color: #9fa9b5;
    font-size: .68rem;
    line-height: 1.35;
}

.studio-ready .studio-load-project em {
    display: block;
    color: #8f9aa7;
    font-size: .56rem;
    font-style: normal;
}

.studio-first-run-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #303741;
    color: #dfe5ec;
    background:
        linear-gradient(135deg, rgba(33, 212, 253, .08), transparent 42%),
        linear-gradient(180deg, #171d24, #10151b);
}

.studio-first-run-guide.is-hidden {
    display: none;
}

.studio-first-run-guide span,
.studio-context-hint {
    color: #9fa9b5;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-first-run-guide strong {
    display: block;
    margin-top: 2px;
    color: #f1f4f7;
    font-size: .86rem;
    letter-spacing: 0;
}

.studio-first-run-guide p {
    margin: 3px 0 0;
    color: #aeb7c2;
    font-size: .72rem;
    line-height: 1.35;
}

.studio-first-run-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.studio-context-hint {
    padding: 6px 7px;
    border: 1px solid #303741;
    border-radius: 3px;
    background: rgba(255, 255, 255, .025);
    line-height: 1.35;
    text-transform: none;
}

.studio-playlist-hint {
    margin: 0 6px 6px;
}

.studio-playlist-empty button,
.studio-project-empty {
    border: 1px solid #3b434e;
    border-radius: 3px;
    color: #e8edf3;
    background: #202731;
}

.studio-playlist-empty button {
    width: fit-content;
    min-height: 26px;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

.studio-project-empty {
    display: grid;
    gap: 4px;
    padding: 9px;
}

.studio-project-empty strong {
    color: #eef2f6;
    font-size: .72rem;
}

.studio-project-empty span {
    color: #9fa9b5;
    font-size: .65rem;
    line-height: 1.35;
}

.studio-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 0 0;
}

.studio-shortcut-grid span {
    padding: 7px;
    border: 1px solid #303741;
    border-radius: 3px;
    color: #aeb7c2;
    background: rgba(255, 255, 255, .025);
    font-size: .72rem;
}

.studio-shortcut-grid strong {
    display: block;
    color: #eef2f6;
    font-size: .78rem;
}

/* Community immersion and creator ecosystem polish */
.community-live-strip,
.creator-signal-panel,
.discovery-culture-panel {
    border: 1px solid rgba(33, 212, 253, .16);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(33, 212, 253, .055), transparent 40%),
        linear-gradient(315deg, rgba(217, 70, 239, .045), transparent 48%),
        rgba(255, 255, 255, .028);
}

.community-live-strip {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.community-live-head span,
.creator-signal-grid span {
    color: #21d4fd;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.community-live-head strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1.15rem;
}

.community-live-head p,
.creator-signal-grid p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.community-live-grid,
.creator-signal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.community-live-grid a,
.creator-signal-grid > div {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 8px;
    color: inherit;
    background: rgba(6, 9, 15, .52);
}

.community-live-grid a:hover {
    border-color: rgba(33, 212, 253, .28);
    transform: translateY(-1px);
}

.community-live-grid strong,
.creator-signal-grid strong {
    display: block;
    margin-top: 4px;
    color: #f8fbff;
    font-size: .95rem;
    letter-spacing: 0;
}

.community-live-grid em {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .76rem;
    font-style: normal;
    line-height: 1.35;
}

.creator-vibe-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.creator-vibe-chips span {
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: #dfe7ef;
    background: rgba(255, 255, 255, .045);
    font-size: .66rem;
    text-transform: none;
}

.ptx-project-card.is-recent {
    border-color: rgba(70, 255, 154, .2);
}

.ptx-project-badge-live {
    border-color: rgba(70, 255, 154, .25);
    color: #dfffea;
    background: rgba(70, 255, 154, .09);
}

.ptx-project-description {
    margin-top: 4px !important;
    color: #c8d1dc !important;
}

.ptx-project-chain {
    display: inline-flex;
    margin-top: 5px;
    color: #bcd9ff;
    font-size: .68rem;
    font-weight: 800;
}

.collab-project-shell {
    display: grid;
    gap: 8px;
    align-content: start;
}

.collab-request-form {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid rgba(70, 255, 154, .16);
    border-radius: 8px;
    background: rgba(6, 9, 15, .5);
}

.collab-request-form label {
    display: grid;
    gap: 4px;
    color: #9fa9b5;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.collab-request-form input,
.collab-request-form select {
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #e9f2f8;
    background: rgba(12, 17, 24, .92);
    padding: 7px 9px;
    font-size: .82rem;
}

.collab-request-state {
    padding: 8px 10px;
    border: 1px solid rgba(33, 212, 253, .18);
    border-radius: 8px;
    color: #dff8ff;
    background: rgba(33, 212, 253, .07);
    font-size: .78rem;
    font-weight: 850;
}

.collab-request-state.is-accepted,
.collab-request-state.is-owner-alert {
    border-color: rgba(70, 255, 154, .22);
    color: #dcffe9;
    background: rgba(70, 255, 154, .075);
}

.collab-request-state a {
    color: inherit;
    text-decoration: underline;
}

.collab-request-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.collab-request-dashboard h3 {
    margin: 0 0 8px;
    color: #f7fbff;
    font-size: .9rem;
}

.collab-request-list {
    display: grid;
    gap: 8px;
}

.collab-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 8px;
    background: rgba(6, 9, 15, .54);
}

.collab-request-card strong,
.collab-request-card span,
.collab-request-card p {
    display: block;
}

.collab-request-card strong {
    color: #f7fbff;
    font-size: .9rem;
}

.collab-request-card span,
.collab-request-card p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.35;
}

.collab-request-card-pending {
    border-color: rgba(33, 212, 253, .16);
}

.collab-request-card-accepted {
    border-color: rgba(70, 255, 154, .2);
}

.collab-request-card-declined {
    border-color: rgba(255, 255, 255, .1);
    opacity: .82;
}

.collab-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.inhabited-feed-panel,
.active-creator-widget {
    border-color: rgba(70, 255, 154, .14);
}

.studio-activity-list,
.creator-presence-grid {
    display: grid;
    gap: 9px;
}

.studio-activity-list {
    margin-bottom: 10px;
}

.studio-activity-item,
.creator-presence-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 8px;
    color: inherit;
    background: rgba(6, 9, 15, .52);
}

.studio-activity-item {
    display: grid;
    gap: 3px;
    padding: 10px;
}

.studio-activity-item:hover,
.creator-presence-card:hover {
    border-color: rgba(33, 212, 253, .28);
    background: rgba(33, 212, 253, .05);
}

.studio-activity-item span {
    color: #21d4fd;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-activity-item strong {
    color: #f6fbff;
    font-size: .9rem;
}

.studio-activity-item em,
.creator-presence-card em {
    color: var(--muted);
    font-size: .74rem;
    font-style: normal;
    line-height: 1.35;
}

.creator-presence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-presence-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
}

.creator-presence-compact {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 8px;
}

.creator-presence-avatar {
    align-self: start;
}

.creator-presence-avatar .avatar,
.creator-presence-avatar .avatar-fallback {
    width: 44px;
    height: 44px;
}

.creator-presence-compact .creator-presence-avatar .avatar,
.creator-presence-compact .creator-presence-avatar .avatar-fallback {
    width: 34px;
    height: 34px;
}

.creator-presence-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.creator-presence-top strong {
    overflow: hidden;
    color: #f6fbff;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-presence-body p {
    margin: 1px 0 5px;
    color: var(--muted);
    font-size: .76rem;
}

.creator-status-badges,
.creator-presence-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0;
}

.creator-status-badges span,
.creator-presence-stats span {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: #dfe7ef;
    background: rgba(255, 255, 255, .045);
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.creator-status-online,
.creator-status-studio {
    border-color: rgba(70, 255, 154, .24) !important;
    color: #dfffea !important;
    background: rgba(70, 255, 154, .075) !important;
}

.creator-status-collab,
.creator-status-need {
    border-color: rgba(217, 70, 239, .25) !important;
    color: #f6dcff !important;
    background: rgba(217, 70, 239, .08) !important;
}

.creator-presence-stats strong {
    margin-right: 3px;
    color: #fff;
}

@media (max-width: 720px) {
    .ptx-project-card {
        grid-template-columns: 1fr;
    }

    .ptx-project-preview {
        min-height: 54px;
    }

    .community-live-grid,
    .creator-signal-grid,
    .creator-presence-grid,
    .collab-request-dashboard {
        grid-template-columns: 1fr;
    }

    .collab-request-card {
        align-items: stretch;
        flex-direction: column;
    }

    .collab-request-actions {
        justify-content: stretch;
    }

    .community-live-strip {
        padding: 12px;
    }

    .studio-first-run-guide {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-first-run-actions {
        justify-content: stretch;
    }

    .studio-first-run-actions .studio-secondary-btn {
        flex: 1 1 140px;
    }

    .studio-help-body {
        grid-template-columns: 1fr;
    }

    .studio-shortcut-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile layout stabilization pass */
@media (max-width: 760px) {
    :root {
        --mobile-nav-space: calc(74px + env(safe-area-inset-bottom));
    }

    body {
        padding-bottom: calc(var(--mobile-nav-space) + 18px);
    }

    .layout {
        padding: 8px 8px calc(var(--mobile-nav-space) + 14px);
    }

    .feed,
    .home-feed,
    .discovery-page,
    .collabs-page,
    .charts-page,
    .profile-feed {
        min-width: 0;
        gap: 9px;
    }

    .post-card,
    .feed-post-card,
    .create-post,
    .profile-card,
    .search-user-card,
    .discovery-stat-card,
    .creator-presence-card,
    .collab-card,
    .widget {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .home-hero-card.live-experience-hero {
        display: block;
        min-height: 0;
        max-height: none;
        padding: 14px;
        border-radius: 15px;
        overflow: hidden;
    }

    .home-hero-card .home-hero-content {
        width: 100%;
        max-width: none;
        display: grid;
        gap: 10px;
        min-width: 0;
    }

    .home-hero-card .desktop-launch-only {
        display: none !important;
    }

    .home-hero-card .home-hero-actions.desktop-launch-only {
        display: grid !important;
    }

    .home-hero-card .mobile-hero-title,
    .home-hero-card .mobile-hero-copy {
        display: block;
    }

    .home-hero-card .mobile-hero-title {
        margin: 0;
        max-width: 100%;
        color: #f8fbff;
        font-size: clamp(1.55rem, 8vw, 2.15rem);
        line-height: 1.02;
        letter-spacing: 0;
        overflow-wrap: normal;
        word-break: normal;
    }

    .home-hero-card .mobile-hero-copy {
        margin: 0;
        max-width: 28rem;
        color: #e3dcf7;
        font-size: .92rem;
        line-height: 1.42;
    }

    .home-hero-actions,
    .hero-inline-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .home-hero-actions .launch-cta-studio,
    .hero-inline-actions .launch-cta-studio {
        grid-column: 1 / -1;
    }

    .home-hero-actions .invite-friends-form,
    .home-hero-actions .invite-friends-button,
    .home-hero-actions [data-invite-share],
    .hero-inline-actions .invite-friends-form,
    .hero-inline-actions .invite-friends-button,
    .hero-inline-actions [data-invite-share] {
        grid-column: 1 / -1;
        width: 100%;
    }

    .launch-cta,
    .hero-inline-actions .launch-cta,
    .home-hero-actions .launch-cta {
        position: static;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: .82rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .launch-cta-studio {
        min-height: 46px;
        font-size: .88rem;
    }

    .launch-command-strip,
    .community-live-grid,
    .creator-presence-grid,
    .discovery-grid,
    .collab-grid,
    .ptx-project-grid,
    .alpha-step-row,
    .alpha-project-list {
        grid-template-columns: 1fr;
    }

    .project-detail-hero {
        grid-template-columns: 1fr;
    }

    .project-detail-wave {
        min-height: 190px;
    }

    .alpha-readiness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .launch-command-card,
    .community-live-grid a,
    .creator-presence-card,
    .discovery-stat-card,
    .search-user-card,
    .collab-card,
    .ptx-project-card {
        padding: 10px;
        border-radius: 11px;
    }

    .feed-post-card {
        padding: 11px;
        border-radius: 13px;
    }

    .post-top,
    .collab-card-head,
    .discovery-stat-card,
    .search-user-card.discovery-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .chart-score,
    .match-score {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .post-top .avatar,
    .post-top .avatar-fallback,
    .search-user-card .avatar,
    .search-user-card .avatar-fallback,
    .discovery-stat-card .avatar,
    .discovery-stat-card .avatar-fallback,
    .creator-presence-avatar .avatar,
    .creator-presence-avatar .avatar-fallback {
        width: 38px;
        height: 38px;
    }

    .feed-tabs-card,
    .video-style-filter-card,
    .hashtag-cloud,
    .chart-chip-grid,
    .genre-tags,
    .mini-tags,
    .pulse-story-tabs {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .feed-tabs-card::-webkit-scrollbar,
    .video-style-filter-card::-webkit-scrollbar,
    .hashtag-cloud::-webkit-scrollbar,
    .chart-chip-grid::-webkit-scrollbar,
    .genre-tags::-webkit-scrollbar,
    .mini-tags::-webkit-scrollbar,
    .pulse-story-tabs::-webkit-scrollbar {
        display: none;
    }

    .video-style-filter-card {
        align-items: center;
        padding: 9px 10px;
    }

    .video-filter-label,
    .admin-section-kicker,
    .widget-title-row span,
    .video-style-field > span {
        display: inline-flex;
        flex: 0 0 auto;
        min-width: max-content;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        letter-spacing: .04em;
    }

    .video-style-chip,
    .video-style-pill,
    .genre-tag,
    .mini-tags span,
    .hashtag-chip,
    .pulse-story-tabs button,
    .feed-tabs-card .menu-link {
        flex: 0 0 auto;
        max-width: min(76vw, 260px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
    }

    .video-style-pill {
        font-size: .68rem;
        line-height: 1.1;
    }

    .mobile-bottom-nav {
        padding: 5px 7px calc(5px + env(safe-area-inset-bottom));
    }

    .mobile-nav-shell {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 3px;
    }

    .mobile-nav-item,
    .mobile-more-menu > summary.mobile-nav-item {
        min-height: 48px;
        padding: 4px 1px;
        border-radius: 10px;
        font-size: .61rem;
        line-height: 1.05;
    }

    .mobile-nav-icon {
        width: 22px;
        height: 22px;
        font-size: .72rem;
    }

    .mobile-more-panel {
        bottom: calc(var(--mobile-nav-space) + 8px);
        max-height: min(48vh, 360px);
    }

    .push-permission-card {
        left: 10px;
        right: 10px;
        bottom: calc(var(--mobile-nav-space) + 8px);
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px;
        width: auto;
        border-radius: 12px;
    }

    .push-permission-copy {
        gap: 2px;
    }

    .push-permission-copy strong {
        font-size: .72rem;
        letter-spacing: .04em;
    }

    .push-permission-copy span {
        font-size: .72rem;
        line-height: 1.22;
    }

    .push-permission-copy small {
        display: none;
    }

    .push-permission-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        min-width: 104px;
    }

    .push-permission-actions button {
        min-height: 30px;
        padding: 5px 8px;
        border-radius: 8px;
        font-size: .68rem;
        white-space: nowrap;
    }
}

@media (max-width: 390px) {
    .home-hero-actions,
    .hero-inline-actions {
        grid-template-columns: 1fr;
    }

    .home-hero-actions .launch-cta-studio,
    .hero-inline-actions .launch-cta-studio,
    .home-hero-actions .invite-friends-form,
    .home-hero-actions .invite-friends-button,
    .home-hero-actions [data-invite-share],
    .hero-inline-actions .invite-friends-form,
    .hero-inline-actions .invite-friends-button,
    .hero-inline-actions [data-invite-share] {
        grid-column: auto;
    }

    .mobile-nav-item,
    .mobile-more-menu > summary.mobile-nav-item {
        font-size: .58rem;
    }
}

/* PULSATRAX Studio coherence pass: unified workstation proportions and controls */
.studio-ready .studio-app {
    --ptx-bg: #0c1015;
    --ptx-surface: #151a21;
    --ptx-surface-2: #1b222b;
    --ptx-surface-3: #232b35;
    --ptx-border: rgba(176, 190, 204, .18);
    --ptx-border-strong: rgba(198, 211, 225, .28);
    --ptx-text: #edf3f8;
    --ptx-muted: #98a5b3;
    --ptx-soft: #c8d2dc;
    --ptx-accent: #21d4fd;
    --ptx-accent-2: #d946ef;
    --ptx-green: #46ff9a;
    --ptx-warn: #f4d47e;
    --ptx-red: #ff6262;
    --studio-gutter: 112px;
    color: var(--ptx-text);
    background:
        radial-gradient(circle at 28% -18%, rgba(33, 212, 253, .12), transparent 32%),
        linear-gradient(180deg, #10161d 0, var(--ptx-bg) 42%, #080b10 100%);
}

.studio-ready .studio-topbar {
    grid-template-columns: 132px minmax(620px, 1.45fr) minmax(420px, .95fr) minmax(280px, .7fr);
    align-items: stretch;
    gap: 8px;
    min-height: 66px;
    padding: 8px;
    border-bottom: 1px solid rgba(33, 212, 253, .14);
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .08), transparent 38%),
        linear-gradient(180deg, #202832, #121820);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.studio-ready .studio-brand-lockup,
.studio-ready .studio-transport,
.studio-ready .studio-project-tools,
.studio-ready .studio-layout-controls {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
}

.studio-ready .studio-brand-lockup {
    padding: 7px 8px;
}

.studio-ready .studio-app-mark {
    width: 40px;
    height: 34px;
    border-radius: 5px;
    color: #061018;
    background: linear-gradient(135deg, var(--ptx-accent), var(--ptx-accent-2));
    box-shadow: 0 0 22px rgba(33, 212, 253, .22);
    font-size: .75rem;
}

.studio-ready .studio-kicker,
.studio-ready .studio-control-label,
.studio-ready .studio-panel-title small,
.studio-ready .studio-window-titlebar small,
.studio-ready .studio-sample-category,
.studio-ready .studio-sample-meta,
.studio-ready .studio-context-hint,
.studio-ready .studio-playlist-empty span {
    color: var(--ptx-muted);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: 0;
}

.studio-ready .studio-brand-lockup h1 {
    color: var(--ptx-text);
    font-size: .92rem;
    letter-spacing: 0;
}

.studio-ready .studio-transport {
    display: grid;
    grid-template-columns: auto auto 112px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 6px;
}

.studio-ready .studio-transport-group,
.studio-ready .studio-project-action-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.studio-ready .studio-transport-actions,
.studio-ready .studio-transport-toggles {
    padding-right: 6px;
    border-right: 1px solid rgba(255, 255, 255, .09);
}

.studio-ready .studio-transport-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(72px, auto)) minmax(112px, 1fr) minmax(132px, 1.05fr);
    gap: 5px;
}

.studio-ready .studio-time-display {
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid rgba(33, 212, 253, .22);
    border-radius: 5px;
    color: #eafbff;
    background: linear-gradient(180deg, rgba(33, 212, 253, .09), rgba(8, 13, 18, .72));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.studio-ready .studio-project-tools {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    padding: 6px;
}

.studio-ready .studio-layout-controls {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 6px;
    border-left: 1px solid rgba(255, 255, 255, .075);
}

.studio-ready :where(.studio-transport-btn, .studio-secondary-btn, .studio-primary-btn, #studio-save, .studio-project-tools button, .studio-layout-controls button, .studio-browser-tabs button, .studio-clip-btn, .studio-preview-btn, .studio-fav-btn, .studio-window-tools button, .studio-sampler-actions button) {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--ptx-border);
    border-radius: 5px;
    color: var(--ptx-soft);
    background: linear-gradient(180deg, #27313c, #171e27);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.studio-ready :where(.studio-transport-btn, .studio-secondary-btn, .studio-primary-btn, #studio-save, .studio-project-tools button, .studio-layout-controls button, .studio-browser-tabs button, .studio-clip-btn, .studio-preview-btn, .studio-fav-btn, .studio-window-tools button, .studio-sampler-actions button):hover {
    border-color: var(--ptx-border-strong);
    color: #fff;
    background: linear-gradient(180deg, #303b47, #1b2430);
}

.studio-ready :where(.studio-transport-btn, .studio-secondary-btn, .studio-primary-btn, #studio-save, .studio-project-tools button, .studio-layout-controls button, .studio-browser-tabs button, .studio-clip-btn, .studio-preview-btn, .studio-fav-btn):disabled {
    cursor: not-allowed;
    opacity: .46;
}

.studio-ready .studio-play-btn,
.studio-ready .studio-primary-btn,
.studio-ready #studio-save {
    border-color: rgba(33, 212, 253, .38);
    color: #ecfbff;
    background: linear-gradient(180deg, rgba(33, 212, 253, .28), rgba(15, 78, 96, .42));
}

.studio-ready .studio-transport-btn.is-active,
.studio-ready .studio-toggle-btn[aria-pressed="true"],
.studio-ready .studio-layout-controls button.is-active,
.studio-ready .studio-browser-tabs button.is-active,
.studio-ready .studio-view-tabs button.is-active,
.studio-ready .studio-app.is-playing #studio-play {
    border-color: rgba(70, 255, 154, .38);
    color: #effff6;
    background: linear-gradient(180deg, rgba(70, 255, 154, .23), rgba(21, 72, 48, .5));
}

.studio-ready .studio-record-voice-btn {
    border-color: rgba(255, 98, 98, .42);
    color: #ffe9e9;
    background: linear-gradient(180deg, rgba(255, 98, 98, .24), rgba(74, 24, 30, .58));
}

.studio-ready .studio-record-voice-btn.is-active {
    border-color: rgba(255, 98, 98, .78);
    background: linear-gradient(180deg, #7b3036, #35171d);
    box-shadow: 0 0 18px rgba(255, 98, 98, .2), inset 0 1px 0 rgba(255,255,255,.08);
}

.studio-ready .studio-record-dot {
    width: 8px;
    height: 8px;
    margin-right: 6px;
    background: #ff6262;
    box-shadow: 0 0 12px rgba(255, 98, 98, .55);
}

.studio-ready .studio-control-label,
.studio-ready .studio-layout-preset-wrap,
.studio-ready .studio-browser-check,
.studio-ready .studio-loop-region-controls {
    min-height: 32px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 5px;
    background: rgba(8, 12, 17, .52);
    text-transform: uppercase;
}

.studio-ready .studio-control-label {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

.studio-ready .studio-master-control {
    grid-template-columns: auto minmax(78px, 1fr);
}

.studio-ready .studio-control-label input,
.studio-ready .studio-control-label select,
.studio-ready .studio-project-tools input,
.studio-ready .studio-browser-controls input,
.studio-ready .studio-browser-controls select,
.studio-ready .studio-loop-region-controls input[type="number"],
.studio-ready .studio-layout-preset-wrap select {
    min-height: 24px;
    border: 1px solid rgba(255, 255, 255, .105);
    border-radius: 4px;
    color: #f0f6fb;
    background: #090d13;
    font-size: .68rem;
    font-weight: 800;
}

.studio-ready .studio-project-tools input {
    width: 100%;
    min-height: 34px;
    padding: 5px 9px;
    color: #fff;
    font-size: .78rem;
}

.studio-ready .studio-daw-grid {
    grid-template-columns: minmax(280px, var(--studio-browser-width, 328px)) minmax(0, 1fr) minmax(180px, var(--studio-project-width, 216px));
    gap: 8px;
    height: calc(100vh - 164px);
    min-height: 560px;
    padding: 8px;
}

.studio-ready .studio-workspace {
    grid-template-rows: minmax(0, 1fr) minmax(126px, .28fr) minmax(118px, .2fr);
    gap: 8px;
}

.studio-ready .studio-daw-window,
.studio-ready .studio-browser,
.studio-ready .studio-work-panel,
.studio-ready .studio-project-drawer {
    border: 1px solid var(--ptx-border);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(28, 36, 45, .96), rgba(13, 18, 24, .98));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.studio-ready .studio-daw-window,
.studio-ready .studio-browser,
.studio-ready .studio-work-panel,
.studio-ready .studio-project-drawer {
    padding: 8px;
}

.studio-ready .studio-panel-title,
.studio-ready .studio-window-titlebar {
    min-height: 30px;
    padding: 0 0 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.studio-ready .studio-panel-title span,
.studio-ready .studio-window-titlebar > span:first-child {
    color: #f4f8fb;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.studio-ready .studio-future-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: #0d1218;
}

.studio-ready .studio-future-rail div {
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .022);
}

.studio-ready .studio-first-run-guide {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(90deg, rgba(33, 212, 253, .08), rgba(217, 70, 239, .035) 54%, transparent);
}

.studio-ready .studio-browser {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.studio-ready .studio-browser-controls {
    gap: 6px;
    margin: 8px 0;
}

.studio-ready .studio-browser-controls input[type="search"] {
    min-height: 36px;
    padding: 7px 10px;
    border-color: rgba(33, 212, 253, .18);
    color: #f8fbff;
    background: rgba(5, 9, 13, .78);
}

.studio-ready .studio-browser-fold {
    margin: 7px 0;
    border-color: rgba(255, 255, 255, .08);
    border-radius: 6px;
    background: rgba(8, 12, 17, .54);
}

.studio-ready .studio-browser-fold summary {
    min-height: 30px;
    padding: 7px 9px;
    color: var(--ptx-soft);
    font-size: .64rem;
}

.studio-ready .studio-browser-tabs {
    display: flex;
    gap: 5px;
    max-height: 104px;
    margin: 8px 0;
    padding-right: 2px;
}

.studio-ready .studio-browser-tabs button {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: .58rem;
}

.studio-ready .studio-sample-list {
    gap: 4px;
    padding-right: 2px;
}

.studio-ready .studio-sample-item {
    grid-template-columns: 16px minmax(98px, 1.4fr) minmax(62px, .68fr) minmax(70px, .75fr) 70px 42px;
    min-height: 42px;
    padding: 5px;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 6px;
    background: rgba(12, 17, 23, .86);
}

.studio-ready .studio-sample-item:nth-child(even) {
    background: rgba(16, 22, 29, .9);
}

.studio-ready .studio-sample-item:hover,
.studio-ready .studio-sample-item.is-selected {
    border-color: rgba(33, 212, 253, .26);
    background: rgba(29, 39, 50, .96);
}

.studio-ready .studio-sample-main {
    min-height: 30px;
    padding: 0 5px;
}

.studio-ready .studio-sample-main strong {
    color: #f4f8fb;
    font-size: .7rem;
    line-height: 1.12;
}

.studio-ready .studio-sample-main .studio-mini-wave {
    height: 7px;
    margin-top: 4px;
    opacity: .48;
}

.studio-ready .studio-preview-btn,
.studio-ready .studio-clip-btn,
.studio-ready .studio-fav-btn {
    min-height: 30px;
    padding: 0 8px;
    font-size: .58rem;
}

.studio-ready .studio-playlist-toolbar,
.studio-ready .studio-piano-toolbar,
.studio-ready .studio-pattern-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 7px 0;
}

.studio-ready .studio-playlist {
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 6px;
    background: #090d12;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .24);
}

.studio-ready .studio-playlist-ruler {
    height: 28px;
    color: #b9c5d0;
    background: linear-gradient(180deg, #18202a, #10161d);
}

.studio-ready .studio-playlist-ruler::before {
    color: #d9e3ec;
    background: #121922;
    font-size: .58rem;
    text-transform: uppercase;
}

.studio-ready .studio-playlist-ruler span {
    padding: 6px 7px;
    border-left: 1px solid rgba(255, 255, 255, .075);
    font-size: .58rem;
    font-weight: 900;
}

.studio-ready .studio-playlist-lane {
    height: 42px;
    border-top: 1px solid rgba(255, 255, 255, .055);
    background-color: #0c1117;
    background-image:
        linear-gradient(90deg, rgba(33, 212, 253, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .015));
}

.studio-ready .studio-playlist-lane-label {
    width: var(--studio-gutter);
    padding: 0 8px;
    border-right: 1px solid rgba(255, 255, 255, .085);
    color: #c7d3de;
    background: linear-gradient(180deg, #151c25, #111820);
    font-size: .62rem;
    font-weight: 900;
}

.studio-ready .studio-playlist-lane.is-selected-lane {
    background-color: rgba(33, 212, 253, .055);
    box-shadow: inset 3px 0 0 var(--channel-color);
}

.studio-ready .studio-clip {
    top: 6px;
    height: 30px;
    min-width: 36px;
    padding: 4px 22px 3px 8px;
    border: 1px solid color-mix(in srgb, var(--channel-color) 56%, rgba(255,255,255,.32));
    border-radius: 5px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--channel-color) 28%, transparent), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.16)),
        color-mix(in srgb, var(--channel-color) 36%, #18212b 64%);
    box-shadow: 0 7px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.studio-ready .studio-clip strong {
    color: #fff;
    font-size: .68rem;
    line-height: 1.05;
}

.studio-ready .studio-clip span {
    color: rgba(255, 255, 255, .72);
    font-size: .54rem;
}

.studio-ready .studio-clip.is-selected {
    outline: 2px solid rgba(244, 212, 126, .95);
    outline-offset: -2px;
}

.studio-ready .studio-playlist-playhead {
    width: 3px;
    background: linear-gradient(180deg, #fff7b8, #21d4fd);
    box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 18px rgba(33, 212, 253, .4);
}

.studio-ready .studio-playlist-empty {
    left: calc(var(--studio-gutter) + 18px);
    top: 56px;
    max-width: 390px;
    padding: 12px 14px;
    border-color: rgba(33, 212, 253, .28);
    border-radius: 7px;
    background: rgba(10, 15, 21, .82);
    box-shadow: 0 14px 34px rgba(0,0,0,.3);
}

.studio-ready .studio-playlist-empty strong {
    color: #f6fbff;
    font-size: .82rem;
}

.studio-ready .studio-mixer {
    gap: 6px;
    padding: 1px;
}

.studio-ready .studio-channel-strip {
    min-width: 74px;
    padding: 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #19212a, #10161d);
}

.studio-ready .studio-meter {
    border-radius: 999px;
    background: #070b10;
}

.studio-ready .studio-project-drawer {
    color: var(--ptx-soft);
}

.studio-ready .studio-project-publish-fields,
.studio-ready .studio-project-item,
.studio-ready .studio-project-empty,
.studio-ready .studio-future-card {
    border-radius: 6px;
    border-color: rgba(255, 255, 255, .08);
    background: rgba(8, 12, 17, .48);
}

@media (max-width: 1560px) {
    .studio-ready .studio-topbar {
        grid-template-columns: 126px minmax(560px, 1fr) minmax(340px, .85fr);
    }

    .studio-ready .studio-layout-controls {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .studio-ready .studio-daw-grid {
        height: calc(100vh - 202px);
    }
}

@media (max-width: 1280px) {
    .studio-ready .studio-topbar {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .studio-ready .studio-transport,
    .studio-ready .studio-project-tools {
        grid-template-columns: 1fr;
    }

    .studio-ready .studio-transport-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-ready .studio-daw-grid {
        min-height: 0;
        height: auto;
    }

    .studio-ready .studio-sample-item {
        grid-template-columns: 16px minmax(120px, 1fr) 68px 44px;
    }

    .studio-ready .studio-sample-category,
    .studio-ready .studio-sample-meta {
        display: none;
    }
}

/* Cross-browser Studio toolbar fallback: keep transport, Save, Projects, and Exit visible. */
.studio-ready .studio-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.studio-ready .studio-brand-lockup {
    flex: 0 0 132px;
}

.studio-ready .studio-transport {
    flex: 1 1 620px;
    min-width: 0;
}

.studio-ready .studio-project-tools {
    flex: 1 1 420px;
    min-width: 0;
}

.studio-ready .studio-layout-controls {
    flex: 1 1 280px;
    min-width: 0;
}

.studio-ready .studio-transport,
.studio-ready .studio-project-tools,
.studio-ready .studio-transport-fields {
    overflow: visible;
}

.studio-ready .studio-transport-fields {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
}

.studio-ready .studio-transport-fields .studio-control-label {
    flex: 1 1 92px;
}

.studio-ready .studio-pattern-control,
.studio-ready .studio-master-control {
    flex-basis: 150px;
}

.studio-ready .studio-project-action-group {
    flex-wrap: nowrap;
}

.studio-ready .studio-project-action-group-muted {
    justify-content: flex-end;
}

.studio-ready .studio-export-audio-btn {
    white-space: nowrap;
}

.studio-ready .studio-export-progress-inline {
    min-width: 92px;
    text-align: left;
}

.studio-ready .studio-exit-btn {
    position: sticky;
    right: 0;
    z-index: 30;
    border-color: rgba(255, 98, 98, .42) !important;
    color: #ffe9e9 !important;
    background: linear-gradient(180deg, rgba(255, 98, 98, .24), rgba(74, 24, 30, .7)) !important;
}

.studio-ready .studio-transport-btn,
.studio-ready .studio-secondary-btn,
.studio-ready .studio-primary-btn,
.studio-ready #studio-save,
.studio-ready .studio-project-tools button,
.studio-ready .studio-layout-controls button,
.studio-ready .studio-browser-tabs button,
.studio-ready .studio-clip-btn,
.studio-ready .studio-preview-btn,
.studio-ready .studio-fav-btn,
.studio-ready .studio-window-tools button,
.studio-ready .studio-sampler-actions button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--ptx-border);
    border-radius: 5px;
    color: var(--ptx-soft);
    background: linear-gradient(180deg, #27313c, #171e27);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.studio-ready .studio-clip {
    border-color: rgba(255, 255, 255, .22);
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .18), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.16)),
        #18212b;
}

.studio-ready .studio-clip.is-selected {
    border-color: rgba(244, 212, 126, .75);
}

.auth-checkbox-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    color: #dffcff;
    font-size: .86rem;
    line-height: 1.35;
}

.auth-checkbox-row input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.auth-form.is-submitting {
    opacity: .86;
}

@media (max-width: 860px) {
    .studio-ready .studio-brand-lockup,
    .studio-ready .studio-transport,
    .studio-ready .studio-project-tools,
    .studio-ready .studio-layout-controls {
        flex-basis: 100%;
        min-width: 0;
    }

    .studio-ready .studio-project-tools {
        grid-template-columns: 1fr;
    }

    .studio-ready .studio-project-action-group,
    .studio-ready .studio-project-action-group-muted {
        justify-content: flex-start;
        overflow-x: auto;
    }
}

/* Creator alpha finishing polish */
html {
    scrollbar-color: rgba(115, 247, 255, .42) rgba(7, 5, 14, .86);
    scrollbar-width: thin;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(115, 247, 255, .05), transparent 30%, rgba(255, 43, 214, .045) 70%, transparent),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0, rgba(255, 255, 255, .018) 1px, transparent 1px, transparent 5px);
    opacity: .55;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(7, 5, 14, .82); }
::-webkit-scrollbar-thumb {
    border: 2px solid rgba(7, 5, 14, .82);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(115, 247, 255, .55), rgba(217, 70, 239, .48));
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(115, 247, 255, .78), rgba(217, 70, 239, .68)); }

:where(a, button, summary, input, textarea, select, .menu-link, .compact-action-btn, .launch-cta, .launch-command-card, .ptx-project-card, .discovery-stat-card, .collab-card, .creator-presence-card, .studio-activity-item) {
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease;
}

:where(button, .button-link, .compact-action-btn, .launch-cta, .menu-link, .discovery-view-btn, .edit-profile-btn):focus-visible,
:where(input, textarea, select, summary):focus-visible {
    outline: 2px solid rgba(115, 247, 255, .82);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(115, 247, 255, .14);
}

:where(button, .button-link, .compact-action-btn, .launch-cta, .menu-link, .discovery-view-btn, .edit-profile-btn):active {
    transform: translateY(1px) scale(.99);
}

.sidebar,
.rightbar,
.hero-card,
.create-post,
.post-card,
.profile-card,
.premium-widget,
.discovery-stat-card,
.collab-card,
.ptx-project-card,
.creator-presence-card,
.studio-activity-item {
    border-color: rgba(202, 173, 255, .2);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

.post-card,
.profile-card,
.widget,
.premium-widget,
.discovery-stat-card,
.collab-card,
.ptx-project-card,
.community-live-strip,
.launch-trust-strip,
.collab-primer-strip,
.discovery-quick-strip {
    background:
        linear-gradient(145deg, rgba(115, 247, 255, .035), transparent 34%),
        linear-gradient(315deg, rgba(217, 70, 239, .035), transparent 46%),
        rgba(18, 13, 30, .72);
}

.post-card:hover,
.profile-card:hover,
.widget:hover,
.premium-widget:hover,
.discovery-stat-card:hover,
.collab-card:hover,
.ptx-project-card:hover,
.creator-presence-card:hover,
.studio-activity-item:hover,
.launch-command-card:hover {
    border-color: rgba(115, 247, 255, .32);
    box-shadow:
        0 20px 58px rgba(0, 0, 0, .46),
        0 0 24px rgba(115, 247, 255, .08),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.menu-link,
.compact-action-btn,
.launch-cta,
.discovery-actions .menu-link,
.discovery-actions button,
.profile-launch-actions a,
.profile-studio-link,
.edit-profile-btn,
.share-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.15;
}

.compact-action-btn,
.launch-cta,
.edit-profile-btn,
.profile-launch-actions a,
.discovery-actions button,
.discovery-actions .menu-link {
    border: 1px solid rgba(197, 155, 255, .34);
    background:
        linear-gradient(135deg, rgba(217, 70, 239, .28), rgba(124, 58, 237, .34)),
        rgba(255, 255, 255, .035);
    box-shadow: 0 10px 28px rgba(129, 49, 255, .22);
}

.compact-action-btn:hover,
.launch-cta:hover,
.edit-profile-btn:hover,
.profile-launch-actions a:hover,
.discovery-actions button:hover,
.discovery-actions .menu-link:hover {
    border-color: rgba(115, 247, 255, .48);
    box-shadow: 0 12px 30px rgba(115, 247, 255, .14), 0 0 18px rgba(217, 70, 239, .12);
    filter: none;
}

.action-empty-state,
.feed-empty-card,
.launch-empty-state,
.relationship-empty-state,
.pulse-story-empty,
.studio-project-empty,
.studio-playlist-empty {
    border: 1px dashed rgba(115, 247, 255, .28);
    background:
        linear-gradient(135deg, rgba(115, 247, 255, .06), transparent 45%),
        rgba(8, 9, 18, .56);
    box-shadow: inset 0 0 30px rgba(115, 247, 255, .035);
}

.action-empty-state h3,
.launch-empty-state h2,
.relationship-empty-state h3,
.studio-project-empty strong,
.studio-playlist-empty strong {
    color: #f8fbff;
}

.genre-tag,
.mini-tags span,
.ptx-project-badge,
.reputation-badge,
.profile-type-pill,
.creator-status-badges span,
.creator-presence-stats span,
.discovery-state-pill,
.status-badge {
    border-color: rgba(115, 247, 255, .24);
    background: rgba(115, 247, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.ptx-project-badge-starter {
    border-color: rgba(244, 212, 126, .34);
    color: #fff1bc;
    background: rgba(244, 212, 126, .1);
}

.genre-tag:hover,
.mini-tags span:hover,
.profile-type-pill:hover {
    border-color: rgba(217, 70, 239, .4);
    background: rgba(217, 70, 239, .1);
}

.creator-highlights-head,
.pulse-stories-head,
.community-live-head,
.live-deck-head,
.widget-title-row,
.collab-card-head {
    gap: 12px;
}

.creator-highlights-head h2,
.creator-highlights-head h3,
.post-card h2,
.post-card h3,
.widget h3 {
    letter-spacing: 0;
}

.ptx-project-card {
    position: relative;
    overflow: hidden;
}

.ptx-project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(115, 247, 255, .07), transparent);
    opacity: 0;
    transform: translateX(-36%);
    transition: opacity .2s ease, transform .42s ease;
}

.ptx-project-card:hover::after {
    opacity: 1;
    transform: translateX(36%);
}

.ptx-project-preview {
    box-shadow: inset 0 0 34px rgba(255, 255, 255, .12), 0 0 22px rgba(115, 247, 255, .08);
}

.ptx-project-preview i b {
    background: rgba(6, 13, 19, .78);
    box-shadow: 0 0 8px rgba(255, 255, 255, .12);
}

.profile-card .profile-main,
.creator-workbench-card,
.creator-signal-panel {
    min-width: 0;
}

.profile-name,
.ptx-project-card h3,
.creator-presence-top strong,
.studio-activity-item strong {
    overflow-wrap: anywhere;
}

.profile-status-pill,
.creator-signal-strip,
.profile-launch-actions,
.creator-workbench-grid div {
    border-color: rgba(115, 247, 255, .18);
    background:
        linear-gradient(135deg, rgba(115, 247, 255, .045), transparent 44%),
        rgba(255, 255, 255, .035);
}

.project-detail-hero {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.project-detail-copy {
    display: grid;
    gap: 10px;
    align-content: center;
    min-width: 0;
}

.project-detail-copy h1 {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 3.2rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.project-creator-line {
    display: inline-grid;
    grid-template-columns: auto minmax(0, max-content);
    gap: 9px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 7px 9px;
    border: 1px solid rgba(115, 247, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
}

.project-creator-line strong,
.project-creator-line em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-creator-line em {
    color: var(--muted);
    font-size: .76rem;
    font-style: normal;
}

.project-starter-note {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 212, 126, .24);
    border-radius: 10px;
    color: #fff1bc;
    background: rgba(244, 212, 126, .075);
}

.project-starter-note strong {
    font-size: .78rem;
    text-transform: uppercase;
}

.project-starter-note span {
    color: #e6d9aa;
    font-size: .86rem;
    line-height: 1.4;
}

.studio-ready .studio-app {
    background:
        radial-gradient(circle at 24% -16%, rgba(33, 212, 253, .16), transparent 32%),
        radial-gradient(circle at 88% 0%, rgba(217, 70, 239, .11), transparent 34%),
        linear-gradient(180deg, #10161d 0, var(--ptx-bg) 42%, #080b10 100%);
}

.studio-ready .studio-topbar,
.studio-ready .studio-daw-window,
.studio-ready .studio-browser,
.studio-ready .studio-work-panel,
.studio-ready .studio-project-drawer {
    border-color: rgba(115, 247, 255, .16);
}

.studio-ready .studio-topbar {
    scrollbar-color: rgba(33, 212, 253, .44) rgba(8, 12, 17, .7);
}

.studio-ready .studio-daw-splitter {
    opacity: .72;
    transition: opacity .18s ease, box-shadow .18s ease, background .18s ease;
}

.studio-ready .studio-daw-splitter:hover,
.studio-ready .studio-daw-splitter.is-dragging {
    opacity: 1;
    background: rgba(33, 212, 253, .24);
    box-shadow: 0 0 18px rgba(33, 212, 253, .22);
}

.studio-ready .studio-transport {
    box-shadow: inset 0 0 0 1px rgba(33, 212, 253, .04);
}

.studio-ready .studio-app.is-playing .studio-time-display {
    border-color: rgba(70, 255, 154, .46);
    color: #effff6;
    box-shadow: 0 0 20px rgba(70, 255, 154, .12), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.studio-ready .studio-app.is-playing .studio-playlist-playhead {
    animation: ptx-playhead-glow 1.2s ease-in-out infinite;
}

@keyframes ptx-playhead-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 14px rgba(33, 212, 253, .36); }
    50% { box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 24px rgba(70, 255, 154, .34); }
}

.studio-ready .studio-playlist-ruler span:not(.studio-ruler-cue-marker):nth-child(4n + 1) {
    color: #f4f8fb;
    background: rgba(33, 212, 253, .045);
}

.studio-ready .studio-playlist-lane:hover {
    background-color: rgba(15, 24, 31, .98);
}

.studio-ready .studio-clip {
    overflow: hidden;
}

.studio-ready .studio-clip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 30%, rgba(255, 255, 255, .08));
    opacity: .42;
}

.studio-ready .studio-clip:hover,
.studio-ready .studio-clip.is-playing,
.studio-ready .studio-clip.is-under-playhead {
    transform: translateY(-1px);
    border-color: rgba(244, 212, 126, .56);
    box-shadow: 0 9px 18px rgba(0, 0, 0, .28), 0 0 18px rgba(33, 212, 253, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.studio-ready .studio-clip.is-slipping {
    cursor: ew-resize;
    border-color: rgba(250, 255, 114, .72);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .34), 0 0 22px rgba(250, 255, 114, .18), inset 0 0 0 1px rgba(255,255,255,.16);
}

.studio-ready .studio-clip .studio-clip-resize-left,
.studio-ready .studio-clip .studio-clip-resize-right {
    width: 10px;
    opacity: .72;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(33, 212, 253, .18));
}

.studio-ready .studio-clip .studio-clip-fade-shade,
.studio-ready .studio-clip .studio-clip-fade-handle {
    position: absolute;
    z-index: 3;
    display: block;
    pointer-events: none;
}

.studio-ready .studio-clip .studio-clip-fade-shade {
    top: 0;
    bottom: 0;
    opacity: .28;
}

.studio-ready .studio-clip .studio-clip-fade-shade-in {
    left: 10px;
    width: var(--fade-in-width, 0px);
    background: linear-gradient(90deg, rgba(255,255,255,.55), transparent);
}

.studio-ready .studio-clip .studio-clip-fade-shade-out {
    right: 10px;
    width: var(--fade-out-width, 0px);
    background: linear-gradient(270deg, rgba(255,255,255,.55), transparent);
}

.studio-ready .studio-clip .studio-clip-fade-handle {
    top: 3px;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 3px;
    background: color-mix(in srgb, var(--channel-color) 45%, #f7fbff 55%);
    box-shadow: 0 2px 8px rgba(0,0,0,.32);
    cursor: ew-resize;
    opacity: 0;
    pointer-events: auto;
    touch-action: none;
    transform: translateX(-50%) rotate(45deg);
    transition: opacity .12s ease, transform .12s ease;
}

.studio-ready .studio-clip .studio-clip-fade-in {
    left: clamp(14px, var(--fade-in-width, 0px), calc(100% - 24px));
}

.studio-ready .studio-clip .studio-clip-fade-out {
    left: calc(100% - clamp(14px, var(--fade-out-width, 0px), calc(100% - 24px)));
    top: auto;
    bottom: 3px;
}

.studio-ready .studio-clip:hover .studio-clip-fade-handle,
.studio-ready .studio-clip.is-selected .studio-clip-fade-handle {
    opacity: .92;
}

.studio-ready .studio-clip:hover .studio-clip-resize-left,
.studio-ready .studio-clip:hover .studio-clip-resize-right {
    opacity: 1;
}

.studio-ready .studio-sample-item,
.studio-ready .studio-project-item,
.studio-ready .studio-channel-strip {
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.studio-ready .studio-sample-item:hover,
.studio-ready .studio-sample-item.is-selected {
    transform: translateX(1px);
    box-shadow: inset 3px 0 0 rgba(33, 212, 253, .42);
}

.studio-ready .studio-preview-btn.is-loading {
    position: relative;
    color: transparent !important;
}

.studio-ready .studio-preview-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .22);
    border-top-color: rgba(115, 247, 255, .9);
    border-radius: 50%;
    animation: ptx-spin .7s linear infinite;
}

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

/* PTX realism pass: calmer industrial DAW surfaces, usable scroll regions, and native-feeling menus. */
body::before {
    opacity: .18;
}

html {
    scrollbar-color: rgba(107, 119, 132, .72) rgba(8, 10, 13, .9);
}

::-webkit-scrollbar-thumb {
    background: #59636f;
}

::-webkit-scrollbar-thumb:hover {
    background: #76818d;
}

.studio-ready .studio-app {
    --ptx-bg: #090c10;
    --ptx-surface: #11161c;
    --ptx-surface-2: #171d24;
    --ptx-surface-3: #202731;
    --ptx-border: rgba(143, 154, 166, .2);
    --ptx-border-strong: rgba(188, 197, 206, .34);
    --ptx-accent: #6fb7c9;
    --ptx-accent-2: #8b768f;
    --ptx-green: #74c891;
    background: linear-gradient(180deg, #10151b 0, #090c10 52%, #07090c 100%);
}

.studio-ready .studio-topbar,
.studio-ready .studio-daw-window,
.studio-ready .studio-browser,
.studio-ready .studio-work-panel,
.studio-ready .studio-project-drawer {
    border-color: rgba(143, 154, 166, .18);
    background: linear-gradient(180deg, rgba(24, 30, 37, .98), rgba(10, 13, 17, .99));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .028);
}

.studio-ready .studio-topbar {
    background: linear-gradient(180deg, #1a2028, #10151b);
}

.studio-ready .studio-app-mark {
    color: #e9eef1;
    background: #1a222b;
    box-shadow: none;
}

.studio-ready :where(.studio-transport-btn, .studio-secondary-btn, .studio-primary-btn, #studio-save, .studio-project-tools button, .studio-layout-controls button, .studio-browser-tabs button, .studio-clip-btn, .studio-preview-btn, .studio-fav-btn, .studio-window-tools button, .studio-sampler-actions button) {
    background: #1a222b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.studio-ready :where(.studio-transport-btn, .studio-secondary-btn, .studio-primary-btn, #studio-save, .studio-project-tools button, .studio-layout-controls button, .studio-browser-tabs button, .studio-clip-btn, .studio-preview-btn, .studio-fav-btn, .studio-window-tools button, .studio-sampler-actions button):hover {
    background: #222b35;
    box-shadow: none;
}

.studio-ready .studio-play-btn,
.studio-ready .studio-primary-btn,
.studio-ready #studio-save,
.studio-ready .studio-transport-btn.is-active,
.studio-ready .studio-toggle-btn[aria-pressed="true"],
.studio-ready .studio-layout-controls button.is-active,
.studio-ready .studio-browser-tabs button.is-active,
.studio-ready .studio-view-tabs button.is-active,
.studio-ready .studio-app.is-playing #studio-play {
    background: #20313a;
    border-color: rgba(111, 183, 201, .44);
    box-shadow: none;
}

.studio-ready .studio-record-voice-btn,
.studio-ready .studio-record-voice-btn.is-active {
    background: #342023;
    box-shadow: none;
}

.studio-ready .studio-record-dot {
    box-shadow: none;
}

.studio-ready .studio-first-run-guide {
    background: #10151b;
}

.studio-ready .studio-browser,
.studio-ready .studio-sample-list,
.studio-ready .studio-browser-tabs,
.studio-ready .studio-playlist {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.studio-ready .studio-sample-list {
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    padding-right: 6px;
}

.studio-ready .studio-playlist {
    overflow: auto;
    touch-action: pan-x pan-y;
}

.studio-ready .studio-playlist-lane {
    background-color: #0b1015;
    background-image:
        linear-gradient(90deg, rgba(111, 183, 201, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(0, 0, 0, .018));
}

.studio-ready .studio-clip {
    box-shadow: 0 6px 12px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.studio-ready .studio-clip::before {
    opacity: .18;
}

.studio-ready .studio-clip:hover,
.studio-ready .studio-clip.is-playing,
.studio-ready .studio-clip.is-under-playhead {
    transform: none;
    box-shadow: 0 7px 14px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.studio-ready .studio-clip.is-muted {
    filter: saturate(.45) brightness(.62);
}

.studio-ready .studio-clip.is-muted strong,
.studio-ready .studio-clip.is-muted span {
    color: rgba(236, 241, 245, .58);
}

.studio-ready .studio-playlist-playhead,
.studio-ready .studio-app.is-playing .studio-playlist-playhead {
    animation: none;
    background: #d6cf99;
    box-shadow: 0 0 0 1px rgba(0,0,0,.55);
}

.studio-clip-context-menu {
    position: fixed;
    z-index: 329;
    display: grid;
    width: min(238px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 6px;
    border: 1px solid rgba(116, 143, 255, .28);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(67, 129, 255, .16), transparent 34%),
        radial-gradient(circle at 100% 18%, rgba(255, 79, 216, .11), transparent 35%),
        linear-gradient(180deg, rgba(10, 17, 28, .98), rgba(6, 9, 16, .98));
    box-shadow: 0 16px 34px rgba(0, 0, 0, .58), 0 0 22px rgba(88, 120, 255, .12);
}

.studio-context-menu-section {
    display: grid;
    gap: 2px;
    padding: 5px;
    border: 1px solid rgba(133, 156, 255, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .022);
}

.studio-context-menu-section + .studio-context-menu-section {
    margin-top: 4px;
}

.studio-context-menu-section > strong {
    padding: 1px 4px 3px;
    color: #a8c7ff;
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.studio-clip-context-menu button {
    min-height: 26px;
    padding: 3px 7px;
    border: 0;
    border-radius: 3px;
    color: #dfe5eb;
    background: transparent;
    font-size: .67rem;
    font-weight: 800;
    text-align: left;
}

.studio-clip-context-menu button:hover {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(72, 124, 255, .24), rgba(255, 79, 216, .13));
}

.studio-clip-context-menu button:disabled {
    color: #707985;
}

.studio-clip-context-menu button.is-danger {
    color: #ffb7b7;
}

.studio-clip-bpm-modal {
    position: fixed;
    inset: 0;
    z-index: 330;
    display: none;
    place-items: center;
    padding: 8px;
    overflow: auto;
    color: #e6edf4;
    background:
        radial-gradient(circle at 50% 28%, rgba(37, 213, 239, .11), transparent 34%),
        rgba(5, 8, 11, .82);
    backdrop-filter: blur(6px);
}

.studio-clip-bpm-modal.is-open {
    display: grid;
}

.studio-clip-bpm-dialog {
    display: grid;
    width: min(380px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    overflow: auto;
    border: 1px solid rgba(100, 116, 139, .54);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(30, 38, 47, .98), rgba(15, 20, 26, .98));
    box-shadow: 0 24px 64px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .055);
}

.studio-clip-bpm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.studio-clip-bpm-head span {
    display: block;
    margin-bottom: 3px;
    color: #76dff1;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.studio-clip-bpm-head h2 {
    margin: 0;
    color: #f4f8fb;
    font-size: 1.02rem;
    line-height: 1.1;
}

.studio-clip-bpm-body {
    display: grid;
    gap: 11px;
    padding: 15px 16px;
}

.studio-clip-bpm-body strong {
    color: #f7fbff;
    font-size: .92rem;
    line-height: 1.2;
}

.studio-clip-bpm-body p {
    margin: -5px 0 0;
    color: #97a6b7;
    font-size: .76rem;
}

.studio-clip-bpm-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.studio-clip-bpm-range span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: 6px;
    color: #91a3b5;
    background: rgba(255, 255, 255, .035);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.studio-clip-bpm-range b {
    color: #dff8ff;
    font-size: .86rem;
}

.studio-clip-bpm-body label {
    display: grid;
    gap: 7px;
    color: #c8d3de;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-clip-bpm-body input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(100, 116, 139, .58);
    border-radius: 6px;
    color: #f6fbff;
    background: #0b1117;
    font-size: 1.08rem;
    font-weight: 900;
    outline: none;
}

.studio-clip-bpm-body input[type="range"] {
    min-height: 28px;
    padding: 0;
    accent-color: #25d5ef;
    background: transparent;
}

.studio-clip-bpm-body input:focus {
    border-color: rgba(37, 213, 239, .75);
    box-shadow: 0 0 0 3px rgba(37, 213, 239, .13);
}

.studio-clip-bpm-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.studio-clip-bpm-presets button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(100, 116, 139, .42);
    border-radius: 5px;
    color: #cbd7e3;
    background: rgba(255, 255, 255, .04);
    font-size: .74rem;
    font-weight: 850;
}

.studio-clip-bpm-presets button:hover {
    border-color: rgba(37, 213, 239, .5);
    color: #eefbff;
    background: rgba(37, 213, 239, .09);
}

.studio-clip-bpm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 15px;
    border-top: 1px solid rgba(148, 163, 184, .14);
    background: rgba(0, 0, 0, .16);
}

@media (max-width: 520px) {
    .studio-clip-bpm-modal {
        padding: 12px;
    }

    .studio-clip-bpm-head,
    .studio-clip-bpm-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-clip-bpm-actions button {
        width: 100%;
        justify-content: center;
    }
}

.studio-exit-modal {
    position: fixed;
    inset: 0;
    z-index: 215;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(7, 9, 12, .78);
}

.studio-exit-modal.is-open {
    display: grid;
}

.studio-exit-dialog {
    width: min(520px, 94vw);
    border: 1px solid #4b5563;
    border-radius: 5px;
    color: #dde2e8;
    background: #1b2027;
    box-shadow: 0 18px 48px rgba(0,0,0,.48);
}

.studio-exit-modal-body {
    padding: 14px;
}

.studio-exit-modal-body p {
    margin: 0;
    color: #aeb7c2;
}

.studio-exit-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 14px 14px;
}

.studio-danger-action {
    border-color: rgba(255, 98, 98, .36) !important;
    color: #ffd3d3 !important;
    background: #2b171a !important;
}

.post-card,
.profile-card,
.widget,
.premium-widget,
.discovery-stat-card,
.collab-card,
.ptx-project-card,
.community-live-strip,
.launch-trust-strip,
.collab-primer-strip,
.discovery-quick-strip {
    background: rgba(18, 20, 26, .78);
}

.post-card:hover,
.profile-card:hover,
.widget:hover,
.premium-widget:hover,
.discovery-stat-card:hover,
.collab-card:hover,
.ptx-project-card:hover,
.creator-presence-card:hover,
.studio-activity-item:hover,
.launch-command-card:hover {
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 760px) {
    .layout {
        gap: 12px;
    }

    .feed,
    .home-feed,
    .profile-feed,
    .discovery-page,
    .collabs-page {
        gap: 13px;
    }

    .post-card,
    .feed-post-card,
    .profile-card,
    .create-post,
    .widget,
    .premium-widget,
    .discovery-stat-card,
    .collab-card,
    .ptx-project-card {
        border-radius: 14px;
    }

    .hero-card,
    .home-hero-card.live-experience-hero {
        min-height: 132px;
        max-height: none;
    }

    .home-hero-card .mobile-hero-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .creator-highlights-head,
    .pulse-stories-head,
    .community-live-head,
    .project-detail-hero,
    .collab-card-head {
        align-items: stretch;
    }

    .project-detail-hero {
        grid-template-columns: 1fr;
    }

    .project-detail-wave {
        min-height: 110px;
    }

    .project-creator-line {
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr);
        border-radius: 12px;
    }

    .creator-highlights-head,
    .pulse-stories-head,
    .community-live-head {
        flex-direction: column;
    }

    .compact-action-group,
    .discovery-actions,
    .onboarding-actions,
    .ptx-project-actions,
    .profile-launch-actions {
        gap: 8px;
    }

    .compact-action-group form,
    .compact-action-group .compact-action-btn,
    .profile-message-wrap .compact-action-link,
    .discovery-actions form,
    .discovery-actions button,
    .discovery-actions .menu-link,
    .ptx-project-actions .compact-action-btn,
    .onboarding-actions .compact-action-btn {
        min-width: 0;
        flex: 1 1 calc(50% - 8px);
    }

    .profile-status-pill {
        display: grid;
        gap: 6px;
    }

    .profile-collab-link {
        margin-left: 0;
        width: 100%;
    }

    .genre-tags,
    .mini-tags,
    .ptx-project-badges,
    .creator-status-badges {
        gap: 7px;
    }

    .studio-ready .studio-daw-grid {
        padding: 6px;
    }

    .studio-ready .studio-transport-actions,
    .studio-ready .studio-transport-toggles {
        border-right: 0;
        padding-right: 0;
    }

    .studio-ready .studio-transport-btn,
    .studio-ready .studio-secondary-btn,
    .studio-ready .studio-primary-btn,
    .studio-ready #studio-save,
    .studio-ready .studio-project-tools button,
    .studio-ready .studio-layout-controls button,
    .studio-ready .studio-browser-tabs button {
        min-height: 36px;
    }

    .studio-ready .studio-sample-item {
        min-height: 46px;
    }
}

@media (max-width: 420px) {
    .compact-action-group form,
    .compact-action-group .compact-action-btn,
    .profile-message-wrap .compact-action-link,
    .discovery-actions form,
    .discovery-actions button,
    .discovery-actions .menu-link,
    .ptx-project-actions .compact-action-btn,
    .onboarding-actions .compact-action-btn {
        flex-basis: 100%;
    }

    .mobile-nav-item,
    .mobile-more-menu > summary.mobile-nav-item {
        min-width: 0;
    }
}

/* Final homepage cascade guard */
body.home-page .home-hero-card.live-experience-hero {
    border-color: rgba(174, 154, 208, .2);
    background-color: #08080b;
}

body.home-page .premium-widget,
body.home-page .rightbar > .widget,
body.home-page .post-card,
body.home-page .create-post,
body.home-page .launch-command-card,
body.home-page .community-live-strip,
body.home-page .launch-trust-strip,
body.home-page .home-live-deck {
    border-color: rgba(166, 150, 190, .16);
    background: linear-gradient(180deg, rgba(24, 23, 30, .86), rgba(10, 10, 14, .78));
    box-shadow: 0 18px 48px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.home-page .premium-widget::before,
body.home-page .home-live-deck::before {
    display: none;
}

body.home-page .premium-widget .trend-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(166, 150, 190, .12);
}

body.home-page .premium-widget .trend-item:hover {
    transform: none;
    border-color: rgba(166, 150, 190, .22);
    background: transparent;
}

body.home-page .trending-widget .trend-thumb,
body.home-page .trending-widget .trend-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(143, 99, 217, .16);
    border: 1px solid rgba(188, 169, 220, .16);
    color: #efe7fa;
    font-size: .75rem;
    font-weight: 900;
}

body.home-page .trending-widget .trend-avatar {
    object-fit: cover;
}

body.home-page .premium-widget .trend-rank {
    color: #b9adc8;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.home-page .trend-movement {
    border: 0;
    color: #bba8dc;
    background: rgba(143, 99, 217, .1);
    box-shadow: none;
}

body.home-page .genre-widget .genre-trend-item {
    display: block;
}

body.home-page .genre-widget .genre-signal-bar,
body.home-page .genre-signal-bar {
    background:
        linear-gradient(90deg, rgba(143, 99, 217, .82), rgba(207, 196, 224, .55)) 0 0 / var(--genre-signal) 100% no-repeat,
        rgba(255, 255, 255, .06);
    box-shadow: none;
}

body.home-page .launch-cta-primary,
body.home-page .launch-cta-studio {
    color: #f8f5fb;
    background: linear-gradient(135deg, #5f3f91, #2b2539);
    border-color: rgba(201, 178, 238, .34);
    box-shadow: none;
}

body.home-page .launch-cta-secondary {
    color: #ddd4e9;
    background: rgba(255, 255, 255, .035);
    box-shadow: none;
}

/* Homepage reference correction: calmer premium surfaces and safe right-column sizing. */
body.home-page {
    --home-bg: #030406;
    --home-ink: #f3f0f7;
    --home-muted: #9b95a6;
    --home-panel: rgba(17, 18, 23, .86);
    --home-panel-strong: rgba(21, 22, 28, .94);
    --home-line: rgba(176, 168, 190, .14);
    --home-purple: #74608f;
    --home-purple-soft: rgba(116, 96, 143, .14);
    background:
        radial-gradient(circle at 48% -18%, rgba(92, 82, 110, .14), transparent 34%),
        linear-gradient(180deg, #07080b 0%, #030406 56%, #010102 100%);
}

body.home-page :where(.home-feed, .rightbar, .widget, .premium-widget, .trend-item, .trend-content, .top-creator-item, .featured-creator-card, .event-countdown-item, .creator-presence-card, .ptx-project-card) {
    min-width: 0;
}

body.home-page :where(.trend-content strong, .trend-content p, .trend-metrics, .top-creator-item strong, .top-creator-item em, .featured-creator-card strong, .featured-creator-card em, .event-countdown-item strong, .event-countdown-item em, .ptx-project-card strong, .ptx-project-card p, .creator-presence-card strong, .creator-presence-card span, .widget-title-row h3, .widget-title-row span) {
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

body.home-page .layout {
    align-items: start;
}

body.home-page .home-hero-card.live-experience-hero {
    border-color: rgba(188, 178, 204, .16);
    background-color: #050608;
    box-shadow: 0 26px 74px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.home-page .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 4, 6, .98) 0%, rgba(5, 6, 9, .92) 43%, rgba(10, 10, 14, .62) 70%, rgba(3, 3, 5, .9) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .64)),
        var(--hero-image);
    background-position: center, center, var(--hero-position-x) var(--hero-position-y);
    background-size: cover, cover, cover;
    filter: saturate(.48) contrast(1.04) brightness(.58);
}

body.home-page .home-hero-card.live-experience-hero::after,
body.home-page .hero-live-ambient,
body.home-page .hero-particle,
body.home-page .hero-scanline {
    display: none;
}

body.home-page .home-hero-kicker,
body.home-page .widget-title-row span,
body.home-page .launch-empty-kicker {
    color: #aaa2b4;
    text-shadow: none;
}

body.home-page .home-hero-card h1 {
    color: #f4f1f7;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
}

body.home-page .home-hero-card p {
    color: #c2bdc9;
}

body.home-page .launch-cta,
body.home-page .home-hero-actions .launch-cta,
body.home-page .hero-inline-actions .launch-cta {
    border-color: rgba(196, 188, 208, .18);
    color: #ede9f2;
    background: rgba(20, 21, 27, .68);
    box-shadow: none;
}

body.home-page .launch-cta-primary,
body.home-page .launch-cta-studio,
body.home-page .home-hero-actions .launch-cta-primary,
body.home-page .home-hero-actions .launch-cta-studio {
    background: linear-gradient(180deg, rgba(45, 43, 54, .84), rgba(17, 18, 23, .92));
    border-color: rgba(211, 202, 222, .24);
    color: #f5f2f8;
}

body.home-page .launch-cta:hover,
body.home-page .home-hero-actions .launch-cta:hover,
body.home-page .hero-inline-actions .launch-cta:hover {
    border-color: rgba(215, 207, 226, .34);
    background: rgba(31, 32, 39, .78);
    box-shadow: none;
    filter: none;
}

body.home-page .premium-widget,
body.home-page .rightbar > .widget,
body.home-page .post-card,
body.home-page .create-post,
body.home-page .launch-command-card,
body.home-page .community-live-strip,
body.home-page .launch-trust-strip,
body.home-page .home-live-deck {
    border-color: rgba(176, 168, 190, .13);
    background: rgba(17, 18, 23, .84);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.home-page .premium-widget,
body.home-page .rightbar > .widget {
    padding: 15px;
    border-radius: 14px;
}

body.home-page .premium-widget:hover,
body.home-page .rightbar > .widget:hover,
body.home-page .post-card:hover,
body.home-page .launch-command-card:hover {
    transform: none;
    border-color: rgba(190, 181, 204, .2);
    box-shadow: 0 17px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.home-page .home-rightbar {
    gap: 13px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.home-page .widget-title-row {
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
}

body.home-page .widget-title-row h3 {
    color: #eeebf2;
    font-family: Inter, Arial, sans-serif;
    font-size: .98rem;
    font-weight: 800;
}

body.home-page .premium-widget .trend-item,
body.home-page .trending-widget .trend-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(176, 168, 190, .1);
}

body.home-page .trending-widget .trend-thumb,
body.home-page .trending-widget .trend-avatar {
    display: none;
}

body.home-page .premium-widget .trend-content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

body.home-page .premium-widget .trend-content strong {
    color: #edeaf2;
    font-size: .88rem;
    line-height: 1.2;
}

body.home-page .premium-widget .trend-content p {
    color: #9d96a8;
    font-size: .78rem;
    line-height: 1.25;
    margin: 0;
}

body.home-page .premium-widget .trend-metrics {
    color: #7f7889;
    font-size: .72rem;
}

body.home-page .trend-movement,
body.home-page .premium-widget .trend-rank {
    min-width: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #81798d;
    background: transparent;
    box-shadow: none;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-align: right;
}

body.home-page .top-creator-item,
body.home-page .event-countdown-item {
    border-color: rgba(176, 168, 190, .11);
    background: rgba(255, 255, 255, .025);
}

body.home-page .top-creator-item {
    grid-template-columns: auto auto minmax(0, 1fr);
}

body.home-page .compact-creator-item,
body.home-page .event-countdown-item {
    grid-template-columns: auto minmax(0, 1fr);
}

body.home-page .top-creator-item > span,
body.home-page .featured-creator-card > span {
    min-width: 0;
}

body.home-page .event-countdown-item em {
    grid-column: 2;
}

body.home-page .top-creator-item .trend-rank {
    align-self: center;
}

body.home-page .featured-creator-card {
    grid-template-columns: auto minmax(0, 1fr);
}

body.home-page .featured-creator-card .pulse-score-badge {
    display: none;
}

body.home-page .genre-widget .genre-signal-bar,
body.home-page .genre-signal-bar {
    height: 4px;
    background:
        linear-gradient(90deg, rgba(140, 126, 158, .72), rgba(198, 190, 208, .46)) 0 0 / var(--genre-signal) 100% no-repeat,
        rgba(255, 255, 255, .055);
}

body.home-page .trust-link-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

body.home-page .trust-link-grid a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1240px) {
    body.home-page .layout {
        grid-template-columns: 236px minmax(620px, 1fr) 380px;
        gap: 22px;
        max-width: 1640px;
    }
}

@media (min-width: 1021px) and (max-width: 1239px) {
    body.home-page .layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 18px;
        max-width: 1180px;
    }

    body.home-page .home-rightbar {
        grid-column: 2;
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (min-width: 761px) and (max-width: 1020px) {
    body.home-page .layout {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
        max-width: 920px;
    }

    body.home-page .home-rightbar {
        grid-column: 1 / -1;
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.home-page :where(.post-card, .feed-post-card, .create-post, .profile-card, .search-user-card, .discovery-stat-card, .creator-presence-card, .collab-card, .widget, .premium-widget) {
        overflow-wrap: normal;
        word-break: normal;
    }

    body.home-page .home-hero-card .mobile-hero-title {
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* Global visual identity correction: premium black base with controlled music-platform color. */
:root {
    --identity-bg: #050407;
    --identity-panel: rgba(20, 16, 29, .84);
    --identity-panel-strong: rgba(28, 22, 39, .9);
    --identity-border: rgba(191, 153, 255, .2);
    --identity-border-soft: rgba(191, 153, 255, .13);
    --identity-purple: #8c5cf6;
    --identity-purple-deep: #3b1e67;
    --identity-magenta: #d64fbf;
    --identity-cyan: #58d4e8;
    --identity-ink: #f6f0ff;
    --identity-muted: #aaa0bb;
}

html {
    scrollbar-color: rgba(141, 93, 246, .54) rgba(8, 7, 13, .92);
}

body {
    background:
        radial-gradient(circle at 18% -14%, rgba(124, 58, 237, .2), transparent 34%),
        radial-gradient(circle at 82% 8%, rgba(214, 79, 191, .11), transparent 30%),
        linear-gradient(180deg, #0a0810 0%, #050407 48%, #020203 100%);
    color: var(--identity-ink);
}

body::before {
    background:
        linear-gradient(115deg, rgba(88, 212, 232, .035), transparent 32%, rgba(214, 79, 191, .04) 72%, transparent),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0, rgba(255, 255, 255, .012) 1px, transparent 1px, transparent 6px);
    opacity: .28;
}

::-webkit-scrollbar-track {
    background: rgba(8, 7, 13, .92);
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
    border: 2px solid rgba(8, 7, 13, .92);
    background: linear-gradient(180deg, rgba(140, 92, 246, .74), rgba(88, 212, 232, .38));
}

.sidebar,
.rightbar,
.hero-card,
.create-post,
.post-card,
.feed-post-card,
.profile-card,
.search-user-card,
.widget,
.premium-widget,
.discovery-stat-card,
.collab-card,
.ptx-project-card,
.creator-presence-card,
.studio-activity-item,
.messages-layout,
.conversation-link,
.notification-item,
.discovery-quick-strip,
.collab-primer-strip,
.launch-trust-strip,
.community-live-strip {
    border-color: var(--identity-border-soft);
    background:
        linear-gradient(145deg, rgba(140, 92, 246, .075), transparent 38%),
        linear-gradient(315deg, rgba(88, 212, 232, .035), transparent 48%),
        var(--identity-panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.post-card:hover,
.feed-post-card:hover,
.profile-card:hover,
.search-user-card:hover,
.widget:hover,
.premium-widget:hover,
.discovery-stat-card:hover,
.collab-card:hover,
.ptx-project-card:hover,
.creator-presence-card:hover,
.studio-activity-item:hover {
    border-color: rgba(191, 153, 255, .28);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .055);
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(22, 17, 32, .94), rgba(8, 7, 13, .9)),
        radial-gradient(circle at 30% 0%, rgba(140, 92, 246, .16), transparent 34%);
}

.menu-link.active,
.sidebar-more-link.active,
.feed-tabs-card .menu-link.active,
.video-style-chip.active,
.profile-media-toggle.is-active,
.conversation-link.active {
    color: #fff;
    border-color: rgba(165, 122, 255, .44);
    background:
        linear-gradient(135deg, rgba(140, 92, 246, .18), rgba(88, 212, 232, .06)),
        rgba(255, 255, 255, .035);
    box-shadow: inset 3px 0 0 rgba(140, 92, 246, .74), 0 0 18px rgba(140, 92, 246, .1);
}

.compact-action-btn,
.button-link,
.launch-cta,
.edit-profile-btn,
.profile-studio-link,
.profile-launch-actions a,
.discovery-actions button,
.discovery-actions .menu-link,
.create-post-actions button,
.comment-form button,
.message-form-row button {
    border-color: rgba(191, 153, 255, .34);
    background:
        linear-gradient(135deg, rgba(140, 92, 246, .45), rgba(59, 30, 103, .62)),
        rgba(255, 255, 255, .035);
    color: #f8f3ff;
    box-shadow: 0 12px 28px rgba(80, 38, 145, .24);
}

.compact-action-btn:hover,
.button-link:hover,
.launch-cta:hover,
.edit-profile-btn:hover,
.profile-studio-link:hover,
.profile-launch-actions a:hover,
.discovery-actions button:hover,
.discovery-actions .menu-link:hover,
.create-post-actions button:hover,
.comment-form button:hover,
.message-form-row button:hover {
    border-color: rgba(88, 212, 232, .38);
    box-shadow: 0 14px 32px rgba(80, 38, 145, .28), 0 0 16px rgba(88, 212, 232, .08);
    filter: none;
}

.launch-cta-secondary,
.compact-action-btn-muted,
.discovery-actions .menu-link,
.profile-launch-actions a:not(:first-child) {
    background: rgba(255, 255, 255, .045);
    box-shadow: none;
}

.genre-tag,
.mini-tags span,
.ptx-project-badge,
.reputation-badge,
.profile-type-pill,
.creator-status-badges span,
.creator-presence-stats span,
.discovery-state-pill,
.status-badge,
.notif-badge {
    border-color: rgba(191, 153, 255, .24);
    background: rgba(140, 92, 246, .1);
    color: #eee7ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.notif-badge,
.mobile-nav-badge,
.mobile-more-badge {
    background: linear-gradient(135deg, #a855f7, #d64fbf);
    box-shadow: 0 0 14px rgba(168, 85, 247, .32);
}

.post-action-like.is-liked,
.live-dot,
.tiny-dot,
.profile-player-btn.is-active {
    color: #f7f2ff;
    border-color: rgba(214, 79, 191, .38);
    background: rgba(214, 79, 191, .14);
    box-shadow: 0 0 14px rgba(214, 79, 191, .12);
}

.genre-signal-bar,
.pulse-story-progress span.active,
.intro-progress::-webkit-slider-thumb,
.intro-progress::-moz-range-thumb {
    background: linear-gradient(90deg, rgba(140, 92, 246, .9), rgba(88, 212, 232, .7));
}

.profile-intro-card,
.music-player-card,
.profile-media-player-card,
.profile-media-hub {
    border-color: rgba(191, 153, 255, .22);
    background:
        radial-gradient(circle at 18% 0%, rgba(140, 92, 246, .14), transparent 42%),
        linear-gradient(135deg, rgba(18, 14, 30, .96), rgba(8, 9, 17, .96));
    box-shadow: inset 0 0 28px rgba(140, 92, 246, .08), 0 16px 38px rgba(0, 0, 0, .38);
}

.message-bubble.mine {
    border-color: rgba(191, 153, 255, .35);
    background: linear-gradient(145deg, rgba(129, 74, 215, .54), rgba(63, 33, 111, .64));
    box-shadow: 0 12px 28px rgba(80, 38, 145, .22);
}

.message-bubble.theirs {
    border-color: rgba(191, 153, 255, .16);
    background: rgba(24, 19, 35, .92);
}

.notification-item.is-unread {
    border-color: rgba(140, 92, 246, .34);
    background:
        linear-gradient(90deg, rgba(140, 92, 246, .13), transparent 36%),
        var(--identity-panel);
}

body.home-page {
    --home-purple: #8c5cf6;
    --home-purple-soft: rgba(140, 92, 246, .18);
    background:
        radial-gradient(circle at 42% -18%, rgba(140, 92, 246, .28), transparent 34%),
        radial-gradient(circle at 88% 14%, rgba(214, 79, 191, .12), transparent 30%),
        linear-gradient(180deg, #0a0710 0%, #040306 58%, #010102 100%);
}

body.home-page .home-hero-card.live-experience-hero {
    min-height: 430px;
    border-color: rgba(191, 153, 255, .24);
    background-color: #060409;
    box-shadow: 0 30px 84px rgba(0, 0, 0, .62), 0 0 44px rgba(80, 38, 145, .16), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.home-page .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(4, 3, 7, .96) 0%, rgba(7, 5, 12, .9) 42%, rgba(32, 19, 48, .46) 72%, rgba(4, 3, 7, .86) 100%),
        radial-gradient(circle at 74% 32%, rgba(140, 92, 246, .28), transparent 26%),
        linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .58)),
        var(--hero-image);
    background-position: center, center, center, var(--hero-position-x) var(--hero-position-y);
    background-size: cover, cover, cover, cover;
    filter: saturate(.82) contrast(1.08) brightness(.7);
}

body.home-page .hero-live-ambient,
body.home-page .hero-particle {
    display: block;
    opacity: .22;
}

body.home-page .hero-particle {
    background: rgba(168, 85, 247, .74);
    box-shadow: 0 0 10px rgba(168, 85, 247, .28);
}

body.home-page .home-hero-kicker,
body.home-page .widget-title-row span,
body.home-page .launch-empty-kicker {
    color: #c4a9ff;
}

body.home-page .home-hero-card h1 {
    color: #fbf8ff;
    text-shadow: 0 4px 28px rgba(0, 0, 0, .58);
}

body.home-page .launch-cta-primary,
body.home-page .launch-cta-studio,
body.home-page .home-hero-actions .launch-cta-primary,
body.home-page .home-hero-actions .launch-cta-studio {
    border-color: rgba(191, 153, 255, .44);
    background: linear-gradient(135deg, #8c5cf6, #4b267b 72%);
    box-shadow: 0 14px 34px rgba(80, 38, 145, .34);
}

body.home-page .premium-widget,
body.home-page .rightbar > .widget,
body.home-page .post-card,
body.home-page .create-post,
body.home-page .launch-command-card,
body.home-page .community-live-strip,
body.home-page .launch-trust-strip,
body.home-page .home-live-deck {
    border-color: rgba(191, 153, 255, .18);
    background:
        linear-gradient(145deg, rgba(140, 92, 246, .1), transparent 38%),
        linear-gradient(315deg, rgba(88, 212, 232, .035), transparent 48%),
        rgba(18, 14, 27, .86);
}

body.home-page .premium-widget {
    border-radius: 14px;
}

body.home-page .trending-widget .trend-thumb,
body.home-page .trending-widget .trend-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

body.home-page .premium-widget .trend-item,
body.home-page .trending-widget .trend-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border-bottom-color: rgba(191, 153, 255, .11);
}

body.home-page .trend-movement,
body.home-page .premium-widget .trend-rank {
    color: #c4a9ff;
}

body.home-page .genre-widget .genre-signal-bar,
body.home-page .genre-signal-bar {
    height: 5px;
    background:
        linear-gradient(90deg, rgba(140, 92, 246, .9), rgba(88, 212, 232, .58)) 0 0 / var(--genre-signal) 100% no-repeat,
        rgba(255, 255, 255, .06);
}

.discovery-page .hero-card,
.charts-page .hero-card,
.collabs-page .hero-card {
    background:
        linear-gradient(90deg, rgba(7, 5, 12, .94), rgba(20, 13, 35, .78)),
        radial-gradient(circle at 88% 18%, rgba(140, 92, 246, .22), transparent 34%),
        var(--hero-image);
    border-color: rgba(191, 153, 255, .2);
}

.discovery-quick-strip a,
.collab-primer-strip div,
.community-live-grid a,
.creator-signal-strip,
.creator-workbench-grid div,
.profile-status-pill,
.top-creator-item,
.event-countdown-item,
.featured-creator-card {
    border-color: rgba(191, 153, 255, .14);
    background: rgba(255, 255, 255, .035);
}

.ptx-project-preview {
    border-color: rgba(88, 212, 232, .24);
    background:
        radial-gradient(circle at 28% 20%, rgba(140, 92, 246, .2), transparent 42%),
        linear-gradient(135deg, rgba(12, 17, 28, .96), rgba(18, 11, 30, .96));
    box-shadow: inset 0 0 30px rgba(140, 92, 246, .1);
}

@media (max-width: 760px) {
    .mobile-nav-shell {
        gap: 3px;
    }

    .mobile-nav-item,
    .mobile-more-menu > summary.mobile-nav-item {
        min-height: 52px;
        color: rgba(238, 232, 248, .78);
    }

    .mobile-nav-item.active,
    .mobile-more-menu[open] > summary.mobile-nav-item {
        background: rgba(140, 92, 246, .14);
        box-shadow: inset 0 0 0 1px rgba(191, 153, 255, .22);
    }

    .mobile-nav-icon {
        color: #c4a9ff;
        border-color: rgba(191, 153, 255, .18);
        background: rgba(140, 92, 246, .09);
    }

    .mobile-more-panel {
        border-color: rgba(191, 153, 255, .24);
        background:
            linear-gradient(180deg, rgba(14, 10, 24, .98), rgba(7, 6, 14, .98)),
            radial-gradient(circle at 18% 0%, rgba(140, 92, 246, .18), transparent 34%);
        box-shadow: 0 -18px 44px rgba(0, 0, 0, .62), 0 0 22px rgba(140, 92, 246, .12);
    }

    body.home-page .home-hero-card.live-experience-hero {
        min-height: 250px;
    }

    body.home-page .home-hero-card.live-experience-hero::before {
        background:
            linear-gradient(180deg, rgba(5, 4, 8, .78), rgba(5, 4, 8, .94)),
            radial-gradient(circle at 70% 10%, rgba(140, 92, 246, .18), transparent 36%),
            var(--hero-image);
        background-position: center, center, var(--hero-position-x) var(--hero-position-y);
        background-size: cover, cover, cover;
        filter: saturate(.82) brightness(.72);
    }

    body.home-page .premium-widget .trend-item,
    body.home-page .trending-widget .trend-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .compact-action-group .compact-action-btn,
    .profile-message-wrap .compact-action-link,
    .discovery-actions form,
    .discovery-actions button,
    .discovery-actions .menu-link,
    .ptx-project-actions .compact-action-btn,
    .onboarding-actions .compact-action-btn {
        min-height: 42px;
    }
}

.studio-ready .studio-app {
    --ptx-accent: #8c5cf6;
    --ptx-accent-2: #58d4e8;
    background:
        radial-gradient(circle at 20% -18%, rgba(140, 92, 246, .12), transparent 30%),
        linear-gradient(180deg, #10131a 0, #090b10 52%, #07080c 100%);
}

.studio-ready .studio-topbar,
.studio-ready .studio-daw-window,
.studio-ready .studio-browser,
.studio-ready .studio-work-panel,
.studio-ready .studio-project-drawer {
    border-color: rgba(191, 153, 255, .14);
}

.studio-ready .studio-play-btn,
.studio-ready .studio-primary-btn,
.studio-ready #studio-save,
.studio-ready .studio-transport-btn.is-active,
.studio-ready .studio-toggle-btn[aria-pressed="true"],
.studio-ready .studio-layout-controls button.is-active,
.studio-ready .studio-browser-tabs button.is-active,
.studio-ready .studio-view-tabs button.is-active,
.studio-ready .studio-app.is-playing #studio-play {
    border-color: rgba(140, 92, 246, .38);
    background: #251d36;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.studio-ready .studio-record-voice-btn.is-active,
.studio-ready .studio-record-dot {
    border-color: rgba(214, 79, 191, .42);
    background: #3a1d2e;
    box-shadow: 0 0 12px rgba(214, 79, 191, .18);
}

.studio-ready .studio-playlist-lane {
    background-image:
        linear-gradient(90deg, rgba(140, 92, 246, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(0, 0, 0, .018));
}

.studio-ready .studio-playlist-lane.is-selected-lane {
    box-shadow: inset 3px 0 0 rgba(140, 92, 246, .64);
}

.studio-ready .studio-clip.is-selected {
    border-color: rgba(191, 153, 255, .62);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .28), 0 0 14px rgba(140, 92, 246, .16), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.studio-ready .studio-playlist-playhead,
.studio-ready .studio-app.is-playing .studio-playlist-playhead {
    background: #bfa3ff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 12px rgba(140, 92, 246, .2);
}

/* Homepage premium underground correction */
body.home-page {
    --home-bg: #05030a;
    --home-panel: rgba(19, 14, 30, .82);
    --home-panel-strong: rgba(24, 17, 39, .92);
    --home-line: rgba(192, 156, 255, .18);
    --home-purple: #8c5cf6;
    --home-magenta: #cf4fbd;
    --home-cyan: #58d4e8;
    background:
        radial-gradient(circle at 27% -10%, rgba(140, 92, 246, .34), transparent 34%),
        radial-gradient(circle at 82% 2%, rgba(88, 212, 232, .13), transparent 28%),
        radial-gradient(circle at 70% 34%, rgba(207, 79, 189, .11), transparent 30%),
        linear-gradient(180deg, #0c0715 0%, #05030a 48%, #020105 100%);
}

body.home-page .layout {
    align-items: start;
}

@media (min-width: 1240px) {
    body.home-page .layout {
        grid-template-columns: 214px minmax(760px, 1fr) 354px;
        gap: 18px;
        max-width: 1660px;
        padding-inline: 18px;
    }
}

@media (min-width: 761px) and (max-width: 1239px) {
    body.home-page .layout {
        grid-template-columns: 206px minmax(0, 1fr);
    }
}

body.home-page .sidebar {
    border-color: rgba(192, 156, 255, .16);
    background:
        radial-gradient(circle at 24% 0%, rgba(140, 92, 246, .2), transparent 38%),
        linear-gradient(180deg, rgba(22, 16, 34, .94), rgba(7, 6, 13, .9));
}

body.home-page .logo {
    min-height: 64px;
    margin-inline: 0;
    border-color: rgba(192, 156, 255, .2);
    background:
        linear-gradient(135deg, rgba(140, 92, 246, .14), rgba(88, 212, 232, .045)),
        rgba(255, 255, 255, .035);
}

body.home-page .site-logo-img {
    max-width: min(100%, var(--site-logo-size, 188px));
}

body.home-page .menu-link {
    padding: 11px 12px;
}

body.home-page .home-feed {
    gap: 16px;
}

body.home-page .home-hero-card.live-experience-hero {
    min-height: clamp(390px, 39vw, 520px);
    max-height: none;
    padding: clamp(30px, 4vw, 52px);
    border-radius: 22px;
    border-color: rgba(205, 174, 255, .28);
    background-color: #08040d;
    box-shadow:
        0 32px 90px rgba(0, 0, 0, .64),
        0 0 54px rgba(140, 92, 246, .17),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.home-page .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(5, 3, 10, .9) 0%, rgba(7, 4, 14, .7) 42%, rgba(8, 5, 13, .25) 68%, rgba(4, 2, 8, .62) 100%),
        radial-gradient(circle at 76% 28%, rgba(88, 212, 232, .18), transparent 21%),
        radial-gradient(circle at 58% 72%, rgba(207, 79, 189, .16), transparent 24%),
        linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .48)),
        var(--hero-image);
    background-position: center, center, center, center, var(--hero-position-x) var(--hero-position-y);
    background-size: cover, cover, cover, cover, cover;
    filter: saturate(1.08) contrast(1.08) brightness(.88);
}

body.home-page .home-hero-card.live-experience-hero::after {
    right: 5%;
    top: 8%;
    width: min(430px, 38vw);
    opacity: .38;
    background:
        radial-gradient(circle at 36% 40%, rgba(255, 244, 255, .75) 0 2.8%, transparent 3.8%),
        radial-gradient(circle at 62% 39%, rgba(255, 244, 255, .72) 0 2.8%, transparent 3.8%),
        radial-gradient(circle at 52% 52%, rgba(88, 212, 232, .12), transparent 31%),
        radial-gradient(circle at 50% 50%, rgba(140, 92, 246, .19), transparent 64%);
}

body.home-page .hero-live-ambient,
body.home-page .hero-particle {
    opacity: .42;
}

body.home-page .hero-particle {
    background: rgba(88, 212, 232, .72);
    box-shadow: 0 0 14px rgba(88, 212, 232, .22);
}

body.home-page .hero-particle-b {
    background: rgba(207, 79, 189, .74);
    box-shadow: 0 0 14px rgba(207, 79, 189, .2);
}

body.home-page .home-hero-content {
    width: min(100%, 720px);
    gap: 14px;
}

body.home-page .home-hero-card h1 {
    max-width: 720px;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(2.65rem, 4.15vw, 4.65rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: 0;
}

body.home-page .home-hero-card p {
    max-width: 610px;
    color: #ded5ee;
    font-size: clamp(.98rem, 1.05vw, 1.12rem);
    line-height: 1.56;
}

body.home-page .home-hero-kicker,
body.home-page .widget-title-row span,
body.home-page .launch-command-card span {
    color: #cab1ff;
}

body.home-page .hero-signal-counters div {
    background:
        linear-gradient(135deg, rgba(88, 212, 232, .075), transparent 48%),
        rgba(16, 11, 25, .62);
}

body.home-page .launch-cta {
    border-radius: 12px;
    min-height: 44px;
    padding-inline: 16px;
    border: 1px solid rgba(210, 180, 255, .32);
    background: rgba(13, 10, 21, .72);
    color: #f5efff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 32px rgba(0, 0, 0, .28);
}

body.home-page .launch-cta-primary,
body.home-page .launch-cta-studio,
body.home-page .home-hero-actions .launch-cta-primary,
body.home-page .home-hero-actions .launch-cta-studio {
    border-color: rgba(218, 188, 255, .48);
    background:
        linear-gradient(135deg, rgba(178, 104, 255, .95), rgba(106, 52, 190, .88) 52%, rgba(48, 23, 82, .94));
    box-shadow: 0 16px 36px rgba(98, 45, 178, .34), 0 0 20px rgba(207, 79, 189, .12);
}

body.home-page .launch-cta-secondary {
    border-color: rgba(158, 226, 238, .2);
    background:
        linear-gradient(135deg, rgba(88, 212, 232, .08), rgba(140, 92, 246, .08)),
        rgba(9, 8, 16, .78);
}

body.home-page .launch-cta:hover {
    transform: translateY(-1px);
    border-color: rgba(88, 212, 232, .4);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .34), 0 0 20px rgba(88, 212, 232, .1);
}

body.home-page .hero-alpha-notice {
    position: relative;
    display: grid;
    gap: 8px;
    max-width: 650px;
    margin-top: 2px;
    padding: 14px 16px 15px;
    border: 1px solid rgba(192, 156, 255, .2);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(88, 212, 232, .075), transparent 44%),
        linear-gradient(315deg, rgba(207, 79, 189, .065), transparent 52%),
        rgba(8, 6, 15, .66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 16px 38px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
}

body.home-page .hero-alpha-notice::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, rgba(88, 212, 232, .46), rgba(140, 92, 246, .58), transparent);
}

body.home-page .hero-alpha-notice span {
    width: fit-content;
    border: 1px solid rgba(192, 156, 255, .22);
    border-radius: 999px;
    padding: 5px 9px;
    color: #d7c6ff;
    background: rgba(140, 92, 246, .11);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
}

body.home-page .hero-alpha-notice p {
    margin: 0;
    max-width: none;
    color: #e2d9ee;
    font-size: .91rem;
    line-height: 1.5;
}

body.home-page .home-hero-chips span {
    border-color: rgba(192, 156, 255, .2);
    background: rgba(15, 11, 24, .62);
    color: #d6ccef;
}

body.home-page .launch-command-card,
body.home-page .community-live-strip,
body.home-page .launch-trust-strip,
body.home-page .home-live-deck,
body.home-page .premium-widget,
body.home-page .rightbar > .widget,
body.home-page .post-card,
body.home-page .create-post {
    border-color: rgba(192, 156, 255, .18);
    background:
        linear-gradient(145deg, rgba(140, 92, 246, .105), transparent 38%),
        linear-gradient(315deg, rgba(88, 212, 232, .045), transparent 50%),
        rgba(16, 11, 25, .84);
}

body.home-page .launch-command-strip {
    gap: 12px;
}

body.home-page .launch-command-card {
    position: relative;
    min-height: 142px;
    padding: 18px 16px 16px;
    overflow: hidden;
}

body.home-page .launch-command-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(88, 212, 232, .72), rgba(140, 92, 246, .78), rgba(207, 79, 189, .56));
}

body.home-page .launch-command-card::after {
    display: block;
    width: 120px;
    height: 120px;
    right: -44px;
    top: -46px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 92, 246, .2), transparent 66%);
}

body.home-page .module-glyph {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid rgba(192, 156, 255, .22);
    background:
        linear-gradient(135deg, rgba(88, 212, 232, .12), rgba(140, 92, 246, .18)),
        rgba(255, 255, 255, .035);
    color: #efe7ff;
    font-style: normal;
    font-weight: 900;
    font-size: .72rem;
}

body.home-page .module-glyph::before { content: "PTX"; }
body.home-page .module-glyph-discover::before { content: "CH"; }
body.home-page .module-glyph-collab::before { content: "CL"; }
body.home-page .module-glyph-trust::before { content: "OK"; }

body.home-page .launch-command-card strong {
    color: #fbf8ff;
}

body.home-page .launch-command-card p,
body.home-page .community-live-strip p,
body.home-page .launch-trust-strip p {
    color: #b8aec8;
}

body.home-page .home-rightbar {
    gap: 12px;
}

body.home-page .premium-widget {
    border-radius: 15px;
    padding: 14px;
}

body.home-page .premium-widget::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    display: block;
    height: 1px;
    opacity: .72;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(88, 212, 232, .42), rgba(140, 92, 246, .54), transparent);
    transform: none;
    transition: none;
}

body.home-page .widget-title-row {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(192, 156, 255, .1);
}

body.home-page .widget-title-row h3 {
    font-family: Inter, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 850;
}

body.home-page .premium-widget .trend-item,
body.home-page .trending-widget .trend-item {
    min-height: 58px;
    padding: 11px 0;
    border-bottom-color: rgba(192, 156, 255, .1);
}

body.home-page .trend-movement,
body.home-page .genre-rank,
body.home-page .premium-widget .trend-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(192, 156, 255, .16);
    background: rgba(255, 255, 255, .035);
    color: #cdb8ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
}

body.home-page .genre-widget .genre-trend-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
}

body.home-page .genre-widget .genre-signal-bar,
body.home-page .genre-signal-bar {
    height: 5px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(88, 212, 232, .88), rgba(140, 92, 246, .82), rgba(207, 79, 189, .48)) 0 0 / var(--genre-signal) 100% no-repeat,
        rgba(255, 255, 255, .06);
}

body.home-page .trend-thumb,
body.home-page .trend-avatar {
    background:
        linear-gradient(135deg, rgba(88, 212, 232, .12), rgba(140, 92, 246, .18)),
        rgba(255, 255, 255, .035);
}

body.home-page .top-creator-item,
body.home-page .event-countdown-item,
body.home-page .featured-creator-card,
body.home-page .community-live-grid a,
body.home-page .studio-activity-item {
    border-color: rgba(192, 156, 255, .14);
    background: rgba(255, 255, 255, .035);
}

@media (max-width: 760px) {
    body.home-page {
        background:
            radial-gradient(circle at 46% -8%, rgba(140, 92, 246, .28), transparent 38%),
            radial-gradient(circle at 88% 12%, rgba(88, 212, 232, .12), transparent 30%),
            linear-gradient(180deg, #0b0713 0%, #040309 70%, #020105 100%);
    }

    body.home-page .home-hero-card.live-experience-hero {
        min-height: 286px;
        padding: 18px;
        border-radius: 17px;
    }

    body.home-page .home-hero-card.live-experience-hero::before {
        background:
            linear-gradient(180deg, rgba(5, 3, 10, .66), rgba(5, 3, 10, .9)),
            radial-gradient(circle at 78% 8%, rgba(88, 212, 232, .14), transparent 34%),
            var(--hero-image);
        background-position: center, center, var(--hero-position-x) var(--hero-position-y);
        background-size: cover, cover, cover;
        filter: saturate(1.02) contrast(1.04) brightness(.84);
    }

    body.home-page .home-hero-card.live-experience-hero::after {
        width: 210px;
        right: -34px;
        top: 8px;
        opacity: .24;
    }

    body.home-page .home-hero-card .mobile-hero-title {
        font-family: Inter, Arial, sans-serif;
        font-size: clamp(1.72rem, 8.4vw, 2.34rem);
        font-weight: 900;
        line-height: 1.04;
    }

    body.home-page .home-hero-card .mobile-hero-copy {
        max-width: 22rem;
        color: #ddd5ee;
    }

    body.home-page .hero-alpha-notice {
        gap: 7px;
        margin-top: 0;
        padding: 12px;
        border-radius: 13px;
    }

    body.home-page .hero-alpha-notice span {
        padding: 5px 8px;
        font-size: .64rem;
        letter-spacing: .1em;
    }

    body.home-page .hero-alpha-notice p {
        font-size: .82rem;
        line-height: 1.42;
    }

    body.home-page .home-hero-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.home-page .home-hero-actions .launch-cta,
    body.home-page .hero-inline-actions .launch-cta {
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 11px;
        font-size: .8rem;
    }

    body.home-page .home-hero-actions .launch-cta-studio,
    body.home-page .hero-inline-actions .launch-cta-studio,
    body.home-page .home-hero-actions .invite-friends-form,
    body.home-page .home-hero-actions .invite-friends-button,
    body.home-page .home-hero-actions [data-invite-share] {
        grid-column: 1 / -1;
    }

    body.home-page .launch-command-card {
        min-height: 124px;
        padding: 16px;
    }

    body.home-page .module-glyph {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }

    body.home-page .premium-widget .trend-item,
    body.home-page .trending-widget .trend-item,
    body.home-page .genre-widget .genre-trend-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 9px;
    }

    body.home-page .genre-widget .genre-trend-item {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (max-width: 390px) {
    body.home-page .home-hero-actions {
        grid-template-columns: 1fr;
    }
}

/* Shared app-page premium pass: bring non-home tabs into the same visual system. */
body[style*="--site-bg-image"]:not(.studio-app-body) {
    background:
        radial-gradient(circle at 24% -10%, rgba(140, 92, 246, .32), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(88, 212, 232, .13), transparent 30%),
        radial-gradient(circle at 64% 42%, rgba(207, 79, 189, .09), transparent 32%),
        linear-gradient(180deg, rgba(8, 5, 15, .82) 0%, rgba(5, 3, 10, .9) 54%, rgba(2, 1, 5, .94) 100%),
        var(--site-bg-image);
    background-size: auto, auto, auto, auto, cover;
    background-position: center, center, center, center, var(--site-bg-position-x) var(--site-bg-position-y);
    background-attachment: scroll, scroll, scroll, scroll, fixed;
}

body[id="top"]:not(.home-page):not(.studio-app-body)::before {
    background:
        linear-gradient(115deg, rgba(88, 212, 232, .04), transparent 34%, rgba(207, 79, 189, .045) 72%, transparent),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0, rgba(255, 255, 255, .014) 1px, transparent 1px, transparent 7px);
    opacity: .32;
}

@media (min-width: 761px) {
    body[id="top"]:not(.home-page):not(.studio-app-body) .layout {
        grid-template-columns: 214px minmax(0, 1fr) 334px;
        gap: 18px;
        max-width: 1600px;
        margin: 0 auto;
        padding: 18px;
    }
}

body[id="top"]:not(.home-page):not(.studio-app-body) .sidebar {
    border-color: rgba(192, 156, 255, .16);
    background:
        radial-gradient(circle at 24% 0%, rgba(140, 92, 246, .2), transparent 38%),
        linear-gradient(180deg, rgba(22, 16, 34, .94), rgba(7, 6, 13, .9));
    box-shadow: 0 22px 58px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .logo {
    min-height: 64px;
    margin-inline: 0;
    border-color: rgba(192, 156, 255, .2);
    background:
        linear-gradient(135deg, rgba(140, 92, 246, .14), rgba(88, 212, 232, .045)),
        rgba(255, 255, 255, .035);
    box-shadow: none;
}

body[id="top"]:not(.home-page):not(.studio-app-body) .site-logo-img {
    max-width: min(100%, var(--site-logo-size, 188px));
}

body[id="top"]:not(.home-page):not(.studio-app-body) .menu-link {
    border-radius: 10px;
}

body[id="top"]:not(.home-page):not(.studio-app-body) .menu-link.active,
body[id="top"]:not(.home-page):not(.studio-app-body) .menu-link:hover {
    border-color: rgba(192, 156, 255, .36);
    background:
        linear-gradient(135deg, rgba(140, 92, 246, .18), rgba(88, 212, 232, .055)),
        rgba(255, 255, 255, .035);
    box-shadow: inset 3px 0 0 rgba(140, 92, 246, .72), 0 0 18px rgba(140, 92, 246, .1);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .feed {
    gap: 16px;
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.post-card, .feed-post-card, .profile-card, .create-post, .widget, .premium-widget, .search-user-card, .discovery-stat-card, .collab-card, .creator-presence-card, .ptx-project-card, .messages-layout, .notification-item, .conversation-link, .profile-intro-card, .music-player-card, .profile-media-hub, .profile-media-player-card, .event-card) {
    border-color: rgba(192, 156, 255, .18);
    background:
        linear-gradient(145deg, rgba(140, 92, 246, .105), transparent 38%),
        linear-gradient(315deg, rgba(88, 212, 232, .045), transparent 50%),
        rgba(16, 11, 25, .84);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.post-card, .feed-post-card, .profile-card, .widget, .premium-widget, .search-user-card, .discovery-stat-card, .collab-card, .creator-presence-card, .ptx-project-card, .conversation-link, .notification-item):hover {
    border-color: rgba(192, 156, 255, .3);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .5), 0 0 22px rgba(140, 92, 246, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .hero-card,
body[id="top"]:not(.home-page):not(.studio-app-body) .legal-hero,
body[id="top"]:not(.home-page):not(.studio-app-body) .launch-discovery-hero {
    min-height: 260px;
    max-height: none;
    align-items: end;
    padding: clamp(26px, 4vw, 44px);
    border-radius: 22px;
    border-color: rgba(205, 174, 255, .25);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(5, 3, 10, .92) 0%, rgba(9, 5, 17, .72) 50%, rgba(6, 3, 11, .52) 100%),
        radial-gradient(circle at 78% 22%, rgba(88, 212, 232, .16), transparent 26%),
        radial-gradient(circle at 60% 82%, rgba(207, 79, 189, .13), transparent 30%),
        var(--hero-image),
        var(--site-bg-image);
    background-size: cover, cover, cover, cover, cover;
    background-position: center, center, center, var(--hero-position-x, 50%) var(--hero-position-y, 50%), var(--site-bg-position-x) var(--site-bg-position-y);
    box-shadow: 0 30px 84px rgba(0, 0, 0, .58), 0 0 42px rgba(140, 92, 246, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .hero-card::before,
body[id="top"]:not(.home-page):not(.studio-app-body) .legal-hero::before,
body[id="top"]:not(.home-page):not(.studio-app-body) .launch-discovery-hero::before {
    background:
        linear-gradient(90deg, rgba(4, 2, 8, .28), rgba(140, 92, 246, .08), transparent),
        linear-gradient(180deg, transparent, rgba(0, 0, 0, .34));
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.hero-card h1, .legal-hero h1, .launch-discovery-hero h1, .profile-name) {
    color: #fbf8ff;
    font-family: Inter, Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 4px 28px rgba(0, 0, 0, .55);
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.legal-kicker, .admin-section-kicker, .widget-title-row span) {
    color: #cab1ff;
    letter-spacing: .13em;
}

body[id="top"]:not(.home-page):not(.studio-app-body) .hero-inline-actions {
    gap: 9px;
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.launch-cta, .compact-action-btn, .button-link, .edit-profile-btn, .profile-studio-link, .profile-launch-actions a, .create-post-actions button, .comment-form button, .message-form-row button) {
    border-color: rgba(210, 180, 255, .32);
    background:
        linear-gradient(135deg, rgba(140, 92, 246, .4), rgba(59, 30, 103, .62)),
        rgba(10, 8, 17, .78);
    color: #f8f3ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px rgba(0, 0, 0, .25);
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.launch-cta-primary, .compact-action-btn:not(.compact-action-btn-muted), .edit-profile-btn:first-of-type) {
    border-color: rgba(218, 188, 255, .46);
    background:
        linear-gradient(135deg, rgba(178, 104, 255, .9), rgba(106, 52, 190, .86) 54%, rgba(48, 23, 82, .94));
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.launch-cta-secondary, .compact-action-btn-muted, .profile-launch-actions a:not(:first-child)) {
    border-color: rgba(158, 226, 238, .18);
    background:
        linear-gradient(135deg, rgba(88, 212, 232, .07), rgba(140, 92, 246, .075)),
        rgba(9, 8, 16, .76);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .profile-card {
    overflow: hidden;
}

body[id="top"]:not(.home-page):not(.studio-app-body) .profile-cover-wrap {
    border-color: rgba(192, 156, 255, .22) !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(140, 92, 246, .16), transparent 42%),
        linear-gradient(135deg, rgba(8, 12, 24, .96), rgba(19, 10, 31, .96));
}

body[id="top"]:not(.home-page):not(.studio-app-body) .profile-cover {
    filter: saturate(1.05) contrast(1.04) brightness(.84);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .profile-avatar,
body[id="top"]:not(.home-page):not(.studio-app-body) .avatar,
body[id="top"]:not(.home-page):not(.studio-app-body) .comment-avatar,
body[id="top"]:not(.home-page):not(.studio-app-body) .conversation-avatar {
    border-color: rgba(210, 180, 255, .54);
    box-shadow: 0 0 0 3px rgba(9, 6, 17, .72), 0 0 24px rgba(140, 92, 246, .18);
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.profile-type-pill, .profile-role-pill, .genre-tag, .mini-tags span, .reputation-badge, .ptx-project-badge, .status-badge, .hashtag-chip) {
    border-color: rgba(192, 156, 255, .24);
    background:
        linear-gradient(135deg, rgba(140, 92, 246, .12), rgba(88, 212, 232, .045)),
        rgba(255, 255, 255, .035);
    color: #eee7ff;
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(.creator-signal-strip, .creator-workbench-grid div, .community-live-grid a, .discovery-quick-strip a, .collab-primer-strip div, .top-creator-item, .event-countdown-item, .featured-creator-card, .studio-activity-item, .collab-request-card, .event-inline) {
    border-color: rgba(192, 156, 255, .14);
    background: rgba(255, 255, 255, .035);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .genre-chart-bar,
body[id="top"]:not(.home-page):not(.studio-app-body) .genre-signal-bar {
    background:
        linear-gradient(90deg, rgba(88, 212, 232, .88), rgba(140, 92, 246, .82), rgba(207, 79, 189, .48)) 0 0 / var(--genre-chart, var(--genre-signal, 100%)) 100% no-repeat,
        rgba(255, 255, 255, .06);
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(input, textarea, select, .form-control) {
    border-color: rgba(192, 156, 255, .22);
    background: rgba(8, 6, 15, .62);
    color: #f4efff;
}

body[id="top"]:not(.home-page):not(.studio-app-body) :where(input, textarea, select, .form-control):focus {
    border-color: rgba(88, 212, 232, .42);
    box-shadow: 0 0 0 3px rgba(88, 212, 232, .09);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .rightbar {
    gap: 12px;
}

@media (max-width: 760px) {
    body[style*="--site-bg-image"]:not(.studio-app-body) {
        background:
            radial-gradient(circle at 45% -8%, rgba(140, 92, 246, .28), transparent 38%),
            radial-gradient(circle at 92% 12%, rgba(88, 212, 232, .11), transparent 30%),
            linear-gradient(180deg, rgba(8, 5, 15, .83) 0%, rgba(4, 3, 9, .94) 72%),
            var(--site-bg-image);
        background-size: auto, auto, auto, cover;
        background-position: center, center, center, var(--site-bg-position-x) var(--site-bg-position-y);
        background-attachment: scroll;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .layout {
        padding-inline: 8px;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .hero-card,
    body[id="top"]:not(.home-page):not(.studio-app-body) .legal-hero,
    body[id="top"]:not(.home-page):not(.studio-app-body) .launch-discovery-hero {
        min-height: 210px;
        padding: 18px;
        border-radius: 17px;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .hero-inline-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .hero-inline-actions .launch-cta {
        width: 100%;
        min-height: 42px;
        white-space: normal;
    }
}

/* Final homepage layout override: keeps the repaired PULSATRAX homepage as the winning cascade layer. */
body.home-page {
    --home-line: rgba(202, 168, 255, .22);
    --home-purple: #9b5cff;
    --home-magenta: #f04cc8;
    --home-cyan: #59d8ee;
    background:
        radial-gradient(circle at 16% -8%, rgba(155, 92, 255, .36), transparent 32%),
        radial-gradient(circle at 86% 4%, rgba(89, 216, 238, .18), transparent 30%),
        radial-gradient(circle at 62% 24%, rgba(240, 76, 200, .13), transparent 36%),
        linear-gradient(180deg, #0d0717 0%, #06030b 54%, #030105 100%);
}

@media (min-width: 1240px) {
    body.home-page .layout {
        grid-template-columns: 206px minmax(760px, 1fr) 336px;
        gap: 20px;
        width: min(100%, 1620px);
        max-width: 1620px;
        margin: 0 auto;
        padding: 20px;
    }
}

@media (min-width: 761px) and (max-width: 1239px) {
    body.home-page .layout {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }

    body.home-page .home-rightbar {
        grid-column: 1 / -1;
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.home-page .sidebar,
body.home-page .rightbar,
body.home-page .hero-card,
body.home-page .post-card,
body.home-page .create-post,
body.home-page .widget,
body.home-page .premium-widget,
body.home-page .launch-command-card,
body.home-page .community-live-strip,
body.home-page .launch-trust-strip,
body.home-page .home-live-deck {
    border-color: rgba(202, 168, 255, .22);
    background:
        linear-gradient(145deg, rgba(155, 92, 255, .12), transparent 42%),
        linear-gradient(315deg, rgba(89, 216, 238, .055), transparent 48%),
        rgba(16, 11, 26, .86);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .055);
}

body.home-page .sidebar {
    padding: 16px 12px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(155, 92, 255, .22), transparent 34%),
        linear-gradient(180deg, rgba(21, 14, 34, .96), rgba(8, 6, 14, .92));
}

body.home-page .logo {
    min-height: 56px;
    margin: 0 0 14px;
    padding: 8px 10px;
    border-radius: 13px;
}

body.home-page .menu {
    gap: 7px;
}

body.home-page .menu-link,
body.home-page .sidebar-more-link,
body.home-page .sidebar-legal-link,
body.home-page .trust-link-grid a,
body.home-page .ptx-project-open {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.home-page .menu-link,
body.home-page .sidebar-more-link,
body.home-page .sidebar-legal-link {
    padding: 10px 11px;
    border-radius: 11px;
    color: #dcd2ef;
}

body.home-page .menu-link.active,
body.home-page .menu-link:hover,
body.home-page .sidebar-more-link.active,
body.home-page .sidebar-more-link:hover {
    border-color: rgba(89, 216, 238, .32);
    background: linear-gradient(135deg, rgba(155, 92, 255, .22), rgba(89, 216, 238, .08));
    color: #fff;
}

body.home-page .home-feed {
    gap: 18px;
}

body.home-page .home-hero-card.live-experience-hero {
    min-height: clamp(440px, 42vw, 560px);
    padding: clamp(30px, 4.2vw, 56px);
    border-radius: 24px;
    overflow: hidden;
    background-color: #0b0612;
    box-shadow:
        0 34px 95px rgba(0, 0, 0, .62),
        0 0 58px rgba(155, 92, 255, .22),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.home-page .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(5, 3, 10, .76) 0%, rgba(7, 4, 14, .54) 42%, rgba(9, 5, 15, .22) 70%, rgba(4, 2, 8, .54) 100%),
        radial-gradient(circle at 75% 30%, rgba(89, 216, 238, .24), transparent 24%),
        radial-gradient(circle at 58% 75%, rgba(240, 76, 200, .22), transparent 25%),
        linear-gradient(180deg, rgba(3, 1, 8, .08), rgba(3, 1, 8, .34)),
        var(--hero-image);
    background-position: center, center, center, center, var(--hero-position-x) var(--hero-position-y);
    background-size: cover, cover, cover, cover, cover;
    filter: saturate(1.18) contrast(1.05) brightness(1);
}

body.home-page .home-hero-card.live-experience-hero::after {
    width: min(460px, 40vw);
    right: 3%;
    top: 4%;
    opacity: .46;
    filter: blur(2px);
}

body.home-page .hero-live-ambient,
body.home-page .hero-particle {
    opacity: .55;
}

body.home-page .home-hero-content {
    width: min(100%, 700px);
    gap: 13px;
}

body.home-page .home-hero-card h1 {
    max-width: 700px;
    color: #fffaff;
    font-size: clamp(2.7rem, 4.2vw, 4.7rem);
    line-height: .98;
    text-shadow: 0 0 34px rgba(155, 92, 255, .3), 0 0 18px rgba(240, 76, 200, .14);
}

body.home-page .home-hero-card p {
    max-width: 610px;
    color: #e5dcef;
}

body.home-page .home-hero-kicker,
body.home-page .widget-title-row span,
body.home-page .launch-command-card span {
    color: #d8c4ff;
    text-shadow: 0 0 13px rgba(155, 92, 255, .32);
}

body.home-page .hero-alpha-notice {
    max-width: 640px;
    background:
        linear-gradient(135deg, rgba(89, 216, 238, .095), transparent 46%),
        linear-gradient(315deg, rgba(240, 76, 200, .08), transparent 54%),
        rgba(9, 6, 16, .62);
}

body.home-page .launch-cta,
body.home-page .home-hero-actions .launch-cta,
body.home-page .hero-inline-actions .launch-cta {
    border-radius: 13px;
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
}

body.home-page .launch-cta-primary,
body.home-page .launch-cta-studio,
body.home-page .home-hero-actions .launch-cta-primary,
body.home-page .home-hero-actions .launch-cta-studio {
    background: linear-gradient(135deg, #b56cff 0%, #8b4df2 45%, #f04cc8 100%);
    border-color: rgba(255, 221, 255, .46);
    color: #fff;
    box-shadow: 0 16px 38px rgba(155, 92, 255, .34), 0 0 22px rgba(240, 76, 200, .18);
}

body.home-page .launch-cta-secondary,
body.home-page .home-hero-actions .launch-cta-secondary {
    background: linear-gradient(135deg, rgba(89, 216, 238, .105), rgba(155, 92, 255, .105)), rgba(9, 7, 17, .78);
    border-color: rgba(89, 216, 238, .24);
}

body.home-page .hero-signal-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-width: 620px;
}

body.home-page .hero-signal-counters div {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 13px;
    border: 1px solid rgba(202, 168, 255, .18);
}

body.home-page .home-rightbar {
    padding: 0;
    gap: 12px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 92, 255, .38) transparent;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.home-page .premium-widget,
body.home-page .rightbar > .widget {
    position: relative;
    padding: 13px;
    border-radius: 16px;
    overflow: hidden;
}

body.home-page .widget-title-row {
    display: grid;
    gap: 3px;
    padding-bottom: 9px;
    margin-bottom: 4px;
}

body.home-page .widget-title-row h3 {
    margin: 0;
    font-size: .98rem;
    line-height: 1.18;
}

body.home-page .premium-widget .trend-item,
body.home-page .trending-widget .trend-item,
body.home-page .top-creator-item,
body.home-page .compact-creator-item,
body.home-page .event-countdown-item,
body.home-page .featured-creator-card,
body.home-page .follow-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(202, 168, 255, .105);
}

body.home-page .compact-creator-item,
body.home-page .event-countdown-item {
    grid-template-columns: auto minmax(0, 1fr);
}

body.home-page .follow-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

body.home-page .trend-thumb,
body.home-page .trend-avatar,
body.home-page .trending-widget .trend-thumb,
body.home-page .trending-widget .trend-avatar,
body.home-page .top-creator-item .comment-avatar,
body.home-page .top-creator-item .avatar-fallback {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    overflow: hidden;
}

body.home-page .premium-widget .trend-content,
body.home-page .top-creator-item > span,
body.home-page .featured-creator-card > span,
body.home-page .follow-item > div {
    min-width: 0;
}

body.home-page .premium-widget .trend-content strong,
body.home-page .top-creator-item strong,
body.home-page .featured-creator-card strong,
body.home-page .follow-item strong,
body.home-page .event-countdown-item strong,
body.home-page .premium-widget .trend-content p,
body.home-page .trend-metrics,
body.home-page .top-creator-item em,
body.home-page .featured-creator-card em,
body.home-page .event-countdown-item em,
body.home-page .follow-item p {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.home-page .premium-widget .trend-content strong,
body.home-page .top-creator-item strong,
body.home-page .featured-creator-card strong,
body.home-page .follow-item strong,
body.home-page .event-countdown-item strong {
    color: #fbf7ff;
}

body.home-page .premium-widget .trend-content p,
body.home-page .trend-metrics,
body.home-page .top-creator-item em,
body.home-page .featured-creator-card em,
body.home-page .event-countdown-item em,
body.home-page .follow-item p {
    margin: 3px 0 0;
    color: #b8afc8;
    font-size: .78rem;
    line-height: 1.25;
}

body.home-page .trend-movement,
body.home-page .genre-rank,
body.home-page .premium-widget .trend-rank {
    width: auto;
    min-width: 30px;
    height: 24px;
    border-radius: 999px;
    background: rgba(155, 92, 255, .12);
    border-color: rgba(202, 168, 255, .18);
    box-shadow: none;
}

body.home-page .genre-widget .genre-trend-item {
    grid-template-columns: auto minmax(0, 1fr);
}

body.home-page .genre-widget .genre-trend-content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.home-page .genre-widget .genre-signal-bar,
body.home-page .genre-signal-bar {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(89, 216, 238, .95), rgba(155, 92, 255, .9), rgba(240, 76, 200, .65)) 0 0 / var(--genre-signal) 100% no-repeat,
        rgba(255, 255, 255, .065);
}

body.home-page .featured-creator-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px;
    border-radius: 14px;
}

body.home-page .featured-creator-card,
body.home-page .top-creator-item,
body.home-page .compact-creator-item {
    overflow: hidden;
}

body.home-page .top-creator-item {
    grid-template-columns: minmax(28px, auto) 38px minmax(0, 1fr);
}

body.home-page .top-creator-item.compact-creator-item,
body.home-page .top-creator-item.live-creator-item {
    grid-template-columns: 38px minmax(0, 1fr);
}

body.home-page .top-creator-item > span,
body.home-page .featured-creator-card > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

body.home-page .featured-creator-card strong,
body.home-page .top-creator-item strong {
    line-height: 1.15;
}

body.home-page .featured-creator-card em,
body.home-page .top-creator-item em,
body.home-page .compact-creator-item em {
    line-height: 1.2;
}

body.home-page .top-creator-item .reputation-badge-row,
body.home-page .featured-creator-card .reputation-badge-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

body.home-page .top-creator-item .reputation-badge,
body.home-page .featured-creator-card .reputation-badge {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 3px 6px;
    font-size: .6rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.home-page .featured-creator-card .avatar,
body.home-page .featured-creator-card .avatar-fallback {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

body.home-page .featured-creator-card .pulse-score-badge {
    flex: 0 0 auto;
    max-width: 68px;
    min-width: 0;
    padding: 4px 6px;
    overflow: hidden;
}

body.home-page .featured-creator-card .pulse-score-badge strong,
body.home-page .featured-creator-card .pulse-score-badge span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.home-page .trust-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 760px) {
    body.home-page {
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
        background:
            radial-gradient(circle at 48% -6%, rgba(155, 92, 255, .34), transparent 42%),
            radial-gradient(circle at 96% 10%, rgba(89, 216, 238, .14), transparent 34%),
            linear-gradient(180deg, #0c0716 0%, #05030a 70%, #020105 100%);
    }

    body.home-page .layout {
        display: block;
        width: 100%;
        padding: 8px;
    }

    body.home-page .home-feed {
        display: grid;
        gap: 10px;
        width: 100%;
    }

    body.home-page .home-hero-card.live-experience-hero {
        min-height: auto;
        padding: 18px;
        border-radius: 18px;
        align-items: stretch;
    }

    body.home-page .home-hero-card.live-experience-hero::before {
        background:
            linear-gradient(180deg, rgba(5, 3, 10, .54), rgba(5, 3, 10, .86)),
            radial-gradient(circle at 82% 12%, rgba(89, 216, 238, .18), transparent 36%),
            radial-gradient(circle at 14% 82%, rgba(240, 76, 200, .13), transparent 36%),
            var(--hero-image);
        background-position: center, center, center, var(--hero-position-x) var(--hero-position-y);
        background-size: cover, cover, cover, cover;
        filter: saturate(1.12) contrast(1.04) brightness(.94);
    }

    body.home-page .home-hero-card .mobile-hero-title {
        max-width: 100%;
        font-size: clamp(1.8rem, 8vw, 2.32rem);
        line-height: 1.04;
        overflow-wrap: anywhere;
    }

    body.home-page .home-hero-card .mobile-hero-copy,
    body.home-page .hero-alpha-notice p {
        max-width: 100%;
        line-height: 1.42;
        overflow-wrap: anywhere;
    }

    body.home-page .hero-alpha-notice {
        max-width: 100%;
        padding: 12px;
    }

    body.home-page .home-hero-actions,
    body.home-page .hero-inline-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.home-page .home-hero-actions .launch-cta,
    body.home-page .hero-inline-actions .launch-cta {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 9px 10px;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    body.home-page .home-hero-actions .launch-cta-studio,
    body.home-page .hero-inline-actions .launch-cta-studio,
    body.home-page .home-hero-actions .invite-friends-form,
    body.home-page .home-hero-actions .invite-friends-button,
    body.home-page .home-hero-actions [data-invite-share] {
        grid-column: 1 / -1;
    }

    body.home-page .launch-command-strip,
    body.home-page .community-live-grid,
    body.home-page .creator-presence-grid,
    body.home-page .trust-link-grid {
        grid-template-columns: 1fr;
    }

    body.home-page .launch-command-strip {
        gap: 9px;
    }

    body.home-page .launch-command-card {
        min-height: auto;
        padding: 14px;
        border-radius: 15px;
    }

    body.home-page .post-card,
    body.home-page .create-post,
    body.home-page .widget,
    body.home-page .premium-widget,
    body.home-page .community-live-strip,
    body.home-page .home-live-deck {
        border-radius: 15px;
    }

    body.home-page .feed-tabs-card,
    body.home-page .video-style-filter-card {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px;
        overflow-x: auto;
        padding: 10px;
    }

    body.home-page .feed-tabs-card .menu-link,
    body.home-page .video-style-chip {
        flex: 0 0 auto;
        min-height: 36px;
        white-space: nowrap;
    }

    body.home-page .mobile-nav-shell {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 3px;
    }

    body.home-page .mobile-nav-item,
    body.home-page .mobile-more-menu > summary.mobile-nav-item {
        min-width: 0;
        min-height: 52px;
        padding-inline: 1px;
        font-size: clamp(.58rem, 2.45vw, .66rem);
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 390px) {
    body.home-page .home-hero-actions,
    body.home-page .hero-inline-actions {
        grid-template-columns: 1fr;
    }

    body.home-page .mobile-nav-icon {
        width: 22px;
        height: 22px;
    }
}

/* Global layout + identity correction: keep app pages wide, consistent, and controlled. */
:root {
    --app-panel-bg: rgba(17, 13, 27, .88);
    --app-panel-bg-soft: rgba(20, 15, 32, .72);
    --app-border: rgba(190, 158, 255, .24);
    --app-border-strong: rgba(190, 158, 255, .42);
    --app-cyan: #63d8eb;
    --app-magenta: #e35acb;
    --app-purple: #9b6cff;
    --app-radius: 14px;
}

body:not(.studio-app-body) {
    background:
        radial-gradient(circle at 18% -8%, rgba(155, 108, 255, .28), transparent 34%),
        radial-gradient(circle at 88% 2%, rgba(99, 216, 235, .15), transparent 32%),
        radial-gradient(circle at 64% 34%, rgba(227, 90, 203, .08), transparent 38%),
        linear-gradient(180deg, rgba(9, 6, 16, .96) 0%, rgba(5, 4, 10, .98) 64%, #030207 100%),
        var(--site-bg-image);
    background-size: auto, auto, auto, auto, cover;
    background-position: center, center, center, center, var(--site-bg-position-x) var(--site-bg-position-y);
}

body.home-page:not(.studio-app-body) {
    background:
        radial-gradient(circle at 16% -8%, rgba(155, 108, 255, .38), transparent 34%),
        radial-gradient(circle at 86% 4%, rgba(99, 216, 235, .2), transparent 32%),
        radial-gradient(circle at 62% 24%, rgba(227, 90, 203, .14), transparent 38%),
        linear-gradient(180deg, rgba(13, 7, 23, .9) 0%, rgba(6, 3, 11, .94) 56%, rgba(3, 1, 5, .98) 100%),
        var(--site-bg-image);
    background-size: auto, auto, auto, auto, cover;
    background-position: center, center, center, center, var(--site-bg-position-x) var(--site-bg-position-y);
}

@media (min-width: 761px) {
    body[id="top"]:not(.studio-app-body) .layout {
        width: min(100%, 1760px);
        max-width: 1760px;
        margin-inline: auto;
        grid-template-columns: minmax(198px, 228px) minmax(0, 1fr) minmax(280px, 330px);
        gap: clamp(16px, 1.3vw, 24px);
        padding: clamp(16px, 1.4vw, 24px);
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .layout:has(> .rightbar:empty) {
        grid-template-columns: minmax(198px, 228px) minmax(0, 1fr);
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .layout:has(> .rightbar:empty) > .feed {
        max-width: none;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .rightbar:empty {
        display: none;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .feed {
        width: 100%;
    }

    body[id="top"].home-page:not(.studio-app-body) .sidebar {
        padding: 22px 16px;
    }

    body[id="top"].home-page:not(.studio-app-body) .logo {
        min-height: calc(var(--site-logo-size, 210px) * 0.42 + 18px);
        max-height: calc(var(--site-logo-size, 210px) * 0.42 + 26px);
        margin: 0 8px 22px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    body[id="top"].home-page:not(.studio-app-body) .menu {
        gap: 8px;
    }

    body[id="top"].home-page:not(.studio-app-body) .menu-link,
    body[id="top"].home-page:not(.studio-app-body) .sidebar-more-link,
    body[id="top"].home-page:not(.studio-app-body) .sidebar-legal-link {
        min-height: 42px;
        padding: 12px 13px;
        border-radius: var(--app-radius);
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-actions.desktop-launch-only {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 9px;
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-actions .launch-cta,
    body[id="top"].home-page:not(.studio-app-body) .home-hero-actions .invite-friends-button,
    body[id="top"].home-page:not(.studio-app-body) .home-hero-actions [data-invite-share] {
        min-height: 44px;
        flex: 0 1 auto;
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-actions .invite-friends-form {
        display: inline-flex;
        margin: 0;
    }

    body[id="top"].home-page:not(.studio-app-body) .launch-command-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
    }
}

body[id="top"]:not(.studio-app-body) :where(.sidebar, .rightbar, .hero-card, .post-card, .create-post, .profile-card, .widget, .premium-widget, .search-user-card, .discovery-stat-card, .collab-card, .creator-presence-card, .ptx-project-card, .messages-layout, .legal-card, .event-card) {
    border-color: var(--app-border);
    background:
        linear-gradient(145deg, rgba(155, 108, 255, .105), transparent 42%),
        linear-gradient(315deg, rgba(99, 216, 235, .055), transparent 48%),
        var(--app-panel-bg);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .055);
}

body[id="top"]:not(.studio-app-body) .menu-link,
body[id="top"]:not(.studio-app-body) .sidebar-more-link,
body[id="top"]:not(.studio-app-body) .sidebar-legal-link,
body[id="top"]:not(.studio-app-body) :where(
    .discovery-quick-strip a,
    .collab-role-strip a,
    .remix-entry-sort-tabs a,
    .feed-tabs-card .menu-link,
    .video-style-chip,
    .profile-media-tabs button,
    .pulse-story-tabs button,
    .forum-tab,
    .forum-pagination a,
    .legal-inline-links a,
    .smart-match-tabs a,
    .loop-genre-links a
) {
    border-radius: var(--app-radius);
    border: 1px solid rgba(190, 158, 255, .2);
    background: rgba(255, 255, 255, .025);
    color: #e6ddf6;
    box-shadow: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

body[id="top"]:not(.studio-app-body) .menu-link.active,
body[id="top"]:not(.studio-app-body) .menu-link:hover,
body[id="top"]:not(.studio-app-body) .sidebar-more-link.active,
body[id="top"]:not(.studio-app-body) .sidebar-more-link:hover,
body[id="top"]:not(.studio-app-body) .sidebar-legal-link.active,
body[id="top"]:not(.studio-app-body) .sidebar-legal-link:hover,
body[id="top"]:not(.studio-app-body) :where(
    .discovery-quick-strip a:hover,
    .discovery-quick-strip a.active,
    .discovery-quick-strip a:active,
    .discovery-quick-strip a:focus-visible,
    .collab-role-strip a:hover,
    .collab-role-strip a.active,
    .collab-role-strip a:active,
    .collab-role-strip a:focus-visible,
    .remix-entry-sort-tabs a:hover,
    .remix-entry-sort-tabs a.active,
    .remix-entry-sort-tabs a:active,
    .remix-entry-sort-tabs a:focus-visible,
    .smart-match-tabs a:hover,
    .smart-match-tabs a.active,
    .smart-match-tabs a:active,
    .smart-match-tabs a:focus-visible,
    .loop-genre-links a:hover,
    .loop-genre-links a.active,
    .loop-genre-links a:active,
    .loop-genre-links a:focus-visible,
    .feed-tabs-card .menu-link.active,
    .feed-tabs-card .menu-link:hover,
    .video-style-chip.active,
    .video-style-chip:hover,
    .profile-media-tabs button.active,
    .profile-media-tabs button:hover,
    .pulse-story-tabs button.active,
    .pulse-story-tabs button:hover,
    .forum-tab.active,
    .forum-tab:hover,
    .legal-inline-links a:hover
) {
    border-color: rgba(99, 216, 235, .38);
    background:
        linear-gradient(135deg, rgba(155, 108, 255, .22), rgba(99, 216, 235, .085)),
        rgba(255, 255, 255, .035);
    color: #fff;
    filter: none;
    box-shadow: inset 3px 0 0 rgba(155, 108, 255, .72), 0 0 18px rgba(99, 216, 235, .08);
}

body[id="top"]:not(.studio-app-body) :where(.feed-tabs-card, .video-style-filter-card, .profile-media-tabs, .pulse-story-tabs, .forum-tabs, .forum-pagination, .legal-inline-links, .sidebar-legal-grid) {
    gap: 8px;
}

body[id="top"]:not(.studio-app-body) :where(.feed-tabs-card, .video-style-filter-card, .profile-media-tabs, .pulse-story-tabs, .forum-tabs) {
    align-items: center;
}

body[id="top"]:not(.studio-app-body) :where(
    .remix-entry-sort-tabs a,
    .feed-tabs-card .menu-link,
    .video-style-chip,
    .profile-media-tabs button,
    .pulse-story-tabs button,
    .forum-tab,
    .discovery-quick-strip a,
    .collab-role-strip a,
    .smart-match-tabs a,
    .loop-genre-links a
) {
    min-height: 38px;
    padding: 8px 12px;
    font-size: .88rem;
    font-weight: 800;
}

body[id="top"]:not(.studio-app-body) :where(.smart-match-tabs a, .loop-genre-links a, .remix-entry-sort-tabs a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[id="top"]:not(.studio-app-body) :where(.discovery-quick-strip a, .collab-role-strip a) {
    display: grid;
    gap: 4px;
    align-content: center;
}

body[id="top"]:not(.studio-app-body) :where(.smart-match-tabs, .loop-genre-links, .remix-entry-sort-tabs, .discovery-quick-strip, .collab-role-strip) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

body[id="top"]:not(.studio-app-body) .smart-match-tab-panel.is-hidden {
    display: none;
}

body.home-page .home-hero-card.live-experience-hero {
    min-height: clamp(430px, 40vw, 550px);
    background-color: #10091b;
}

body.home-page .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(6, 3, 12, .7) 0%, rgba(14, 7, 25, .48) 44%, rgba(19, 8, 28, .18) 72%, rgba(5, 2, 10, .48) 100%),
        radial-gradient(circle at 72% 22%, rgba(99, 216, 235, .3), transparent 28%),
        radial-gradient(circle at 55% 76%, rgba(227, 90, 203, .24), transparent 28%),
        radial-gradient(circle at 28% 16%, rgba(155, 108, 255, .24), transparent 34%),
        var(--hero-image);
    background-position: center, center, center, center, var(--hero-position-x) var(--hero-position-y);
    background-size: cover, cover, cover, cover, cover;
    filter: saturate(1.16) contrast(1.04) brightness(1.02);
}

body.home-page .home-hero-card h1 {
    max-width: 760px;
    color: #fff;
    text-shadow: 0 8px 34px rgba(0, 0, 0, .62), 0 0 22px rgba(155, 108, 255, .24);
}

.hero-gradient-word {
    color: #fff;
    background: linear-gradient(100deg, #ffffff 0%, #d8c4ff 24%, var(--app-cyan) 58%, var(--app-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

body.home-page .home-hero-card p {
    color: #e9e2f4;
    max-width: 650px;
}

body.home-page .launch-cta-primary,
body.home-page .launch-cta-studio,
body.home-page .home-hero-actions .launch-cta-primary,
body.home-page .home-hero-actions .launch-cta-studio {
    background: linear-gradient(135deg, #a977ff 0%, #7f55e8 44%, #de58c9 100%);
    border-color: rgba(229, 208, 255, .5);
    box-shadow: 0 16px 38px rgba(122, 87, 220, .32), 0 0 18px rgba(227, 90, 203, .16);
}

body.home-page .launch-cta-secondary,
body.home-page .home-hero-actions .launch-cta-secondary {
    background:
        linear-gradient(135deg, rgba(99, 216, 235, .12), rgba(155, 108, 255, .12)),
        rgba(10, 8, 18, .82);
    border-color: rgba(99, 216, 235, .3);
    color: #f3eefc;
}

body[id="top"]:not(.home-page):not(.studio-app-body) .profile-card {
    padding: clamp(18px, 1.8vw, 28px);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .profile-cover {
    height: clamp(260px, 24vw, 390px);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .profile-main {
    grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
    padding-inline: clamp(8px, 1.4vw, 22px);
}

body[id="top"]:not(.home-page):not(.studio-app-body) .event-card {
    grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

body[id="top"]:not(.home-page):not(.studio-app-body) .event-card-thumb-link {
    grid-row: span 4;
}

body[id="top"]:not(.home-page):not(.studio-app-body) .event-card-thumb {
    height: 100%;
    min-height: 160px;
}

@media (max-width: 760px) {
    body[id="top"]:not(.studio-app-body) .layout {
        width: 100%;
        padding-inline: 8px;
    }

    body[id="top"]:not(.studio-app-body) :where(.feed-tabs-card, .video-style-filter-card, .profile-media-tabs, .pulse-story-tabs, .forum-tabs, .smart-match-tabs, .loop-genre-links, .remix-entry-sort-tabs, .discovery-quick-strip, .collab-role-strip) {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    body[id="top"]:not(.studio-app-body) :where(.feed-tabs-card, .video-style-filter-card, .profile-media-tabs, .pulse-story-tabs, .forum-tabs)::-webkit-scrollbar {
        display: none;
    }

    body[id="top"]:not(.studio-app-body) :where(.feed-tabs-card .menu-link, .video-style-chip, .profile-media-tabs button, .pulse-story-tabs button, .forum-tab, .smart-match-tabs a, .loop-genre-links a, .remix-entry-sort-tabs a, .discovery-quick-strip a, .collab-role-strip a) {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body.home-page .home-hero-card.live-experience-hero {
        min-height: 360px;
        padding: 18px;
    }

    body.home-page .home-hero-card .mobile-hero-title {
        color: #fff;
        text-shadow: 0 8px 28px rgba(0, 0, 0, .6);
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .profile-cover {
        height: clamp(170px, 45vw, 230px);
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .profile-main {
        grid-template-columns: 1fr;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .event-card {
        grid-template-columns: 1fr;
    }

    body[id="top"]:not(.home-page):not(.studio-app-body) .event-card-thumb {
        min-height: 0;
    }
}

/* PULSATRAX Studio browser and arrangement UX pass */
.studio-ready .studio-app {
    --ptx-accent: #21d4fd;
    --ptx-accent-2: #d946ef;
    --ptx-green: #46ff9a;
    --ptx-amber: #f4d47e;
    background:
        radial-gradient(circle at 16% -18%, rgba(33, 212, 253, .16), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(217, 70, 239, .13), transparent 32%),
        linear-gradient(180deg, #10151b 0, #070a0f 56%, #05070b 100%);
}

.studio-ready .studio-daw-grid {
    gap: 10px;
    height: calc(100vh - 154px);
    min-height: 620px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(9, 14, 20, .64), rgba(5, 7, 11, .82));
}

.studio-ready .studio-browser {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    border-color: rgba(33, 212, 253, .22);
    background: linear-gradient(180deg, rgba(20, 27, 36, .98), rgba(7, 10, 15, .99));
}

.studio-ready .studio-browser-tabs,
.studio-ready .studio-browser-filter-chips {
    position: sticky;
    z-index: 12;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px 2px 8px;
    background: linear-gradient(180deg, rgba(15, 22, 31, .98), rgba(9, 13, 19, .98));
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 212, 253, .7) rgba(7, 10, 14, .88);
}

.studio-ready .studio-browser-filter-chips {
    top: 0;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.studio-ready .studio-browser-tabs {
    top: 42px;
    margin: 0 0 7px;
    max-height: none;
    border-bottom: 1px solid rgba(33, 212, 253, .14);
}

.studio-ready .studio-browser-tabs::-webkit-scrollbar,
.studio-ready .studio-browser-filter-chips::-webkit-scrollbar,
.studio-ready .studio-sample-list::-webkit-scrollbar,
.studio-ready .studio-playlist::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.studio-ready .studio-browser-tabs::-webkit-scrollbar-track,
.studio-ready .studio-browser-filter-chips::-webkit-scrollbar-track,
.studio-ready .studio-sample-list::-webkit-scrollbar-track,
.studio-ready .studio-playlist::-webkit-scrollbar-track {
    background: rgba(5, 8, 12, .9);
}

.studio-ready .studio-browser-tabs::-webkit-scrollbar-thumb,
.studio-ready .studio-browser-filter-chips::-webkit-scrollbar-thumb,
.studio-ready .studio-sample-list::-webkit-scrollbar-thumb,
.studio-ready .studio-playlist::-webkit-scrollbar-thumb {
    border: 2px solid rgba(5, 8, 12, .9);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(33, 212, 253, .82), rgba(217, 70, 239, .72));
    box-shadow: 0 0 10px rgba(33, 212, 253, .22);
}

.studio-ready .studio-browser-filter-chips button,
.studio-ready .studio-browser-tabs button {
    flex: 0 0 auto;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(115, 247, 255, .2);
    border-radius: 999px;
    color: #cdd8e5;
    background: rgba(17, 24, 33, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    font-size: .62rem;
    font-weight: 950;
    text-transform: uppercase;
}

.studio-ready .studio-browser-filter-chips button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.studio-ready .studio-browser-filter-chips button b {
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    color: #071016;
    background: rgba(124, 247, 255, .86);
    font-size: .55rem;
    line-height: 1;
}

.studio-ready .studio-browser-filter-chips button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.studio-ready .studio-browser-filter-chips button:disabled b {
    color: #8b96a3;
    background: rgba(255, 255, 255, .12);
}

.studio-ready .studio-browser-filter-chips button.is-active,
.studio-ready .studio-browser-tabs button.is-active {
    color: #f7fdff;
    border-color: rgba(70, 255, 154, .5);
    background: linear-gradient(135deg, rgba(33, 212, 253, .28), rgba(217, 70, 239, .16)), #14212b;
    box-shadow: 0 0 20px rgba(33, 212, 253, .13), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.studio-ready .studio-browser-filter-chips button.is-active b {
    color: #061015;
    background: #46ff9a;
}

.studio-ready .studio-sample-list {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 8px 12px 0;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-color: rgba(33, 212, 253, .7) rgba(5, 8, 12, .9);
}

.studio-ready .studio-sample-item {
    position: relative;
    grid-template-columns: 20px minmax(150px, 1.35fr) minmax(74px, .55fr) minmax(86px, .6fr) 76px 42px;
    min-height: 74px;
    gap: 7px;
    padding: 7px;
    border-color: rgba(255, 255, 255, .085);
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .06), transparent 34%),
        rgba(10, 15, 22, .94);
}

.studio-ready .studio-sample-item:hover,
.studio-ready .studio-sample-item.is-selected,
.studio-ready .studio-sample-item.is-previewing {
    border-color: rgba(33, 212, 253, .45);
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .12), transparent 44%),
        linear-gradient(180deg, rgba(29, 38, 50, .98), rgba(12, 18, 26, .98));
    box-shadow: 0 0 22px rgba(33, 212, 253, .12), inset 3px 0 0 rgba(70, 255, 154, .48);
}

.studio-ready .studio-sample-item.is-previewing::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 6px;
    box-shadow: inset 0 0 28px rgba(70, 255, 154, .12);
    animation: ptx-preview-glow 1s ease-in-out infinite;
}

@keyframes ptx-preview-glow {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.studio-ready .studio-drag-handle {
    width: 20px;
    color: rgba(115, 247, 255, .75);
    font-size: .8rem;
}

.studio-ready .studio-sample-main {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 58px;
    overflow: hidden;
    padding: 4px 7px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .16);
}

.studio-ready .studio-sample-main strong {
    font-size: .76rem;
}

.studio-ready .studio-sample-main .studio-mini-wave {
    display: flex;
    align-items: end;
    gap: 2px;
    height: 22px;
    margin-top: 6px;
    opacity: .92;
}

.studio-ready .studio-sample-main .studio-mini-wave i {
    flex: 1 1 2px;
    min-width: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, rgba(70, 255, 154, .9), rgba(33, 212, 253, .7));
    box-shadow: 0 0 8px rgba(33, 212, 253, .16);
}

.studio-ready .studio-sample-tags {
    display: flex;
    gap: 4px;
    min-width: 0;
    margin-top: 5px;
    font-style: normal;
}

.studio-ready .studio-sample-tags span {
    overflow: hidden;
    max-width: 72px;
    padding: 2px 5px;
    border: 1px solid rgba(217, 70, 239, .25);
    border-radius: 999px;
    color: #e9d7ff;
    background: rgba(217, 70, 239, .09);
    font-size: .5rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-preview-progress {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 3px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.studio-ready .studio-preview-progress::before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ptx-green), var(--ptx-accent), var(--ptx-accent-2));
}

.studio-ready .studio-sample-item.is-previewing .studio-preview-progress::before {
    animation: ptx-preview-progress var(--preview-duration, 2.5s) linear forwards;
}

@keyframes ptx-preview-progress {
    from { width: 0; }
    to { width: 100%; }
}

.studio-ready .studio-sample-meta {
    display: grid;
    gap: 4px;
    color: #d9e6f2;
    font-size: .56rem;
    font-weight: 900;
}

.studio-ready .studio-sample-meta b {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 3px 5px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 4px;
    background: rgba(255, 255, 255, .035);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-sample-meta b[data-meta="bpm"] {
    cursor: pointer;
}

.studio-ready .studio-sample-meta b[data-meta="bpm"]:hover,
.studio-ready .studio-sample-meta b[data-meta="bpm"]:focus-visible {
    border-color: rgba(70, 255, 154, .44);
    color: #eafff2;
}

.studio-ready .studio-preview-btn.is-active {
    color: #04100a;
    border-color: rgba(70, 255, 154, .66);
    background: linear-gradient(180deg, #7cffb1, #21d4fd);
}

.studio-ready .studio-fav-btn.is-active {
    color: #141006;
    border-color: rgba(244, 212, 126, .72);
    background: linear-gradient(180deg, #ffe599, #d5a642);
}

.studio-drag-ghost-preview {
    position: fixed;
    z-index: 9999;
    width: 210px;
    padding: 9px 11px;
    border: 1px solid rgba(33, 212, 253, .58);
    border-radius: 6px;
    color: #f8fdff;
    background: linear-gradient(135deg, rgba(33, 212, 253, .28), rgba(217, 70, 239, .18)), rgba(8, 12, 18, .96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .48), 0 0 24px rgba(33, 212, 253, .22);
    font-size: .74rem;
    pointer-events: none;
}

.studio-drag-ghost-preview strong,
.studio-drag-ghost-preview span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-drag-ghost-preview span {
    margin-top: 3px;
    color: #b8e9f3;
    font-size: .62rem;
}

.studio-pointer-drag-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 210px;
    padding: 9px 11px;
    border: 1px solid rgba(33, 212, 253, .58);
    border-radius: 6px;
    color: #f8fdff;
    background: rgba(8, 12, 18, .96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .42);
    font-size: .74rem;
    pointer-events: none;
    will-change: transform;
    contain: layout paint style;
}

.studio-pointer-drag-preview strong,
.studio-pointer-drag-preview span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-pointer-drag-preview span {
    margin-top: 3px;
    color: #b8e9f3;
    font-size: .62rem;
}

body.studio-is-sample-dragging,
body.studio-is-sample-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.studio-is-sample-dragging .studio-app *,
body.studio-is-sample-dragging .studio-app *::before,
body.studio-is-sample-dragging .studio-app *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
}

body.studio-is-sample-dragging .studio-clip,
body.studio-is-sample-dragging .studio-sample-item,
body.studio-is-sample-dragging .studio-drop-ghost,
body.studio-is-sample-dragging .studio-snap-cursor {
    filter: none !important;
    backdrop-filter: none !important;
}

.studio-ready .studio-browser .studio-sample-item,
.studio-ready .studio-browser .studio-sample-item *,
.studio-pointer-drag-preview,
.studio-pointer-drag-preview * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.studio-ready .studio-playlist-ruler {
    position: sticky;
    top: 0;
    z-index: 18;
    height: 34px;
    background: linear-gradient(180deg, #1a2530, #0d131a);
}

.studio-ready .studio-playlist-lane {
    height: var(--lane-height, 52px);
    min-height: var(--lane-height, 52px);
    overflow: hidden;
    transition: background-color .16s ease, border-color .16s ease;
}

.studio-ready .studio-playlist-lane-label {
    display: grid;
    place-items: center start;
    box-shadow: inset -3px 0 0 var(--channel-color);
    position: sticky;
    left: 0;
    z-index: 8;
}

.studio-ready .studio-playlist-lane-label em,
.studio-ready .studio-playlist-lane-label b {
    display: block;
    max-width: 92px;
    overflow: hidden;
    color: rgba(215, 245, 255, .52);
    font-size: .56rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-playlist-lane-label b {
    color: #ffe0a3;
}

.studio-ready .studio-playlist-lane.is-collapsed-track {
    opacity: .82;
}

.studio-ready .studio-playlist-lane.is-locked-track .studio-playlist-lane-label {
    border-right: 1px solid rgba(255, 224, 163, .28);
}

.studio-ready .studio-playlist-lane-label [data-lane-resize] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 8px;
    cursor: ns-resize;
    opacity: 0;
}

.studio-ready .studio-playlist-lane-label:hover [data-lane-resize] {
    opacity: 1;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--channel-color) 56%, transparent), transparent);
}

.studio-ready .studio-section-band {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    border-left: 1px solid color-mix(in srgb, var(--section-color) 42%, transparent);
    border-right: 1px solid rgba(255, 255, 255, .025);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--section-color) 14%, transparent), transparent 74%),
        linear-gradient(90deg, color-mix(in srgb, var(--section-color) 11%, transparent), transparent 82%);
    pointer-events: none;
}

.studio-ready .studio-section-band b {
    position: absolute;
    top: 4px;
    left: 8px;
    max-width: calc(100% - 14px);
    overflow: hidden;
    color: color-mix(in srgb, var(--section-color) 76%, #ffffff);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    opacity: .78;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.studio-ready .studio-clip {
    top: 7px;
    z-index: 2;
    height: 38px;
}

.studio-ready .studio-playlist-lane[style*="--lane-height"] .studio-clip {
    height: min(52px, calc(var(--lane-height, 52px) - 14px));
}

.studio-ready .studio-clip::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 20px;
    bottom: 5px;
    height: 8px;
    opacity: .34;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.72) 0 2px, transparent 2px 5px);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
}

.studio-ready .studio-playlist-playhead {
    width: 3px;
    background: linear-gradient(180deg, #fff7b8, #46ff9a 44%, #21d4fd);
    box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 22px rgba(70, 255, 154, .32);
    cursor: ew-resize;
    pointer-events: none;
}

.studio-ready .studio-playlist-playhead::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #f8fbff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 14px rgba(33, 212, 253, .42);
    transform: translate(-50%, -1px) rotate(45deg);
}

.studio-ready .studio-playlist-playhead.is-cue-marker {
    top: 0;
    bottom: auto;
    height: 34px;
    min-height: 34px;
    width: 2px;
    z-index: 19;
    background: linear-gradient(180deg, #f8fbff, #21d4fd);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 14px rgba(33, 212, 253, .35);
}

.studio-ready .studio-playlist.is-panning {
    cursor: grabbing;
    user-select: none;
}

.studio-ready .studio-loop-region-band {
    cursor: grab;
    border: 1px solid rgba(70, 255, 154, .38);
    background: linear-gradient(90deg, rgba(70,255,154,.12), rgba(33,212,253,.08));
    box-shadow: inset 0 0 18px rgba(70, 255, 154, .08);
}

.studio-ready .studio-loop-region-band span {
    pointer-events: none;
}

.studio-ready .studio-loop-region-band [data-loop-edge] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    background: rgba(70, 255, 154, .32);
    box-shadow: 0 0 14px rgba(70, 255, 154, .28);
}

.studio-ready .studio-loop-region-band [data-loop-edge="start"] {
    left: 0;
}

.studio-ready .studio-loop-region-band [data-loop-edge="end"] {
    right: 0;
}

.studio-ready .studio-playlist-minimap {
    position: relative;
    height: 42px;
    margin-top: 8px;
    border: 1px solid rgba(33, 212, 253, .16);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(33,212,253,.08), rgba(255,79,216,.06)),
        #070b12;
    cursor: crosshair;
}

.studio-ready .studio-playlist-minimap-clips span {
    position: absolute;
    height: 6px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: var(--channel-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--channel-color) 55%, transparent);
    opacity: .72;
}

.studio-ready .studio-playlist-minimap-clips span.is-selected {
    height: 8px;
    opacity: 1;
}

.studio-ready .studio-playlist-minimap-viewport {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 16px rgba(33, 212, 253, .22);
}

.studio-ready .studio-energy-map {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(132, 148, 169, .16);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
        rgba(5, 9, 14, .82);
}

.studio-ready .studio-energy-map.is-hidden {
    display: none;
}

.studio-ready .studio-energy-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.studio-ready .studio-energy-map-head strong {
    color: #eef7fb;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-ready .studio-energy-map-head span {
    overflow: hidden;
    color: rgba(215, 232, 240, .62);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-energy-map-bars {
    display: grid;
    grid-template-columns: repeat(var(--song-bars, 32), minmax(4px, 1fr));
    align-items: end;
    gap: 2px;
    height: 44px;
}

.studio-ready .studio-energy-map-bars span {
    display: block;
    height: var(--energy-height, 6px);
    min-height: 4px;
    border-radius: 3px 3px 1px 1px;
    background: rgba(132, 148, 169, .18);
    opacity: .78;
}

.studio-ready .studio-energy-map-bars span.is-low {
    background: linear-gradient(180deg, #46ff9a, #1e7d54);
}

.studio-ready .studio-energy-map-bars span.is-mid {
    background: linear-gradient(180deg, #21d4fd, #226fb0);
}

.studio-ready .studio-energy-map-bars span.is-hot {
    background: linear-gradient(180deg, #ffdd78, #ff5b7f);
    box-shadow: 0 0 10px rgba(255, 111, 122, calc(.12 + var(--energy) * .24));
}

.studio-ready .studio-arrangement-coach {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(132, 148, 169, .16);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(33, 212, 253, .055), transparent 46%),
        rgba(5, 9, 14, .86);
}

.studio-ready .studio-arrangement-coach.is-hidden {
    display: none;
}

.studio-ready .studio-arrangement-coach-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.studio-ready .studio-arrangement-coach-head strong {
    color: #eef7fb;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-ready .studio-arrangement-coach-head span {
    color: #8edfed;
    font-size: .72rem;
    font-weight: 800;
}

.studio-ready .studio-arrangement-coach-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.studio-ready .studio-arrangement-coach-actions .studio-secondary-btn {
    min-height: 28px;
    padding: 5px 9px;
    white-space: nowrap;
}

.studio-ready .studio-arrangement-coach-actions .studio-icon-btn {
    width: 28px;
    height: 28px;
    min-height: 28px;
    border-radius: 7px;
    color: #d7e8f0;
    font-size: .8rem;
}

.studio-ready #studio-arrangement-analyze.is-active {
    border-color: rgba(33, 212, 253, .38);
    color: #eafbff;
    background: rgba(33, 212, 253, .1);
}

.studio-ready .studio-arrangement-coach-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 7px;
}

.studio-ready .studio-arrangement-coach-body article {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(132, 148, 169, .14);
    border-radius: 7px;
    background: rgba(255, 255, 255, .028);
}

.studio-ready .studio-arrangement-coach-body article.is-good {
    border-color: rgba(70, 255, 154, .22);
    background: rgba(70, 255, 154, .045);
}

.studio-ready .studio-arrangement-coach-body article.is-tip {
    border-color: rgba(33, 212, 253, .22);
    background: rgba(33, 212, 253, .045);
}

.studio-ready .studio-arrangement-coach-body article.is-warn {
    border-color: rgba(255, 184, 77, .28);
    background: rgba(255, 184, 77, .055);
}

.studio-ready .studio-arrangement-coach-body strong {
    color: #f3f8fb;
    font-size: .78rem;
}

.studio-ready .studio-arrangement-coach-body span {
    color: rgba(215, 232, 240, .68);
    font-size: .72rem;
    line-height: 1.35;
}

.studio-ready .studio-arrange-builder {
    position: relative;
    z-index: 42;
    isolation: isolate;
    display: grid;
    gap: 8px;
    margin: 7px 0 8px;
    padding: 9px;
    border: 1px solid rgba(33, 212, 253, .26);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(33, 212, 253, .1), transparent 36%),
        linear-gradient(90deg, rgba(70, 255, 154, .07), rgba(255, 184, 77, .04)),
        rgba(5, 9, 14, .96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

.studio-ready .studio-arrange-builder.is-hidden {
    display: none;
}

.studio-ready .studio-arrange-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.studio-ready .studio-arrange-builder-head > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.studio-ready .studio-arrange-builder-head strong {
    color: #eef7fb;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-ready .studio-arrange-builder-head span {
    color: rgba(215, 232, 240, .62);
    font-size: .7rem;
    font-weight: 800;
}

.studio-ready .studio-arrange-builder-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.studio-ready .studio-arrange-builder-actions .studio-primary-btn {
    min-height: 30px;
    padding: 6px 12px;
    border: 1px solid rgba(70, 255, 154, .5);
    border-radius: 8px;
    color: #03120a;
    background: linear-gradient(180deg, #7cffb1, #21d4fd);
    box-shadow: 0 8px 18px rgba(33, 212, 253, .16);
    font-size: .72rem;
    font-weight: 950;
    white-space: nowrap;
    cursor: pointer;
}

.studio-ready .studio-arrange-builder-actions .studio-secondary-btn {
    min-height: 30px;
    padding: 6px 10px;
}

.studio-ready .studio-arrange-builder-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.studio-ready .studio-arrange-builder-controls label {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(132, 148, 169, .14);
    border-radius: 8px;
    color: rgba(215, 232, 240, .66);
    background: rgba(255, 255, 255, .026);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.studio-ready .studio-arrange-builder-controls label:nth-child(1) {
    border-color: rgba(33, 212, 253, .28);
    color: #9debf5;
    background:
        linear-gradient(135deg, rgba(33, 212, 253, .14), rgba(47, 140, 255, .045)),
        rgba(255, 255, 255, .026);
}

.studio-ready .studio-arrange-builder-controls label:nth-child(2) {
    border-color: rgba(70, 255, 154, .24);
    color: #a8ffc8;
    background:
        linear-gradient(135deg, rgba(70, 255, 154, .12), rgba(33, 212, 253, .04)),
        rgba(255, 255, 255, .026);
}

.studio-ready .studio-arrange-builder-controls label:nth-child(3) {
    border-color: rgba(255, 184, 77, .28);
    color: #ffd889;
    background:
        linear-gradient(135deg, rgba(255, 184, 77, .13), rgba(255, 91, 127, .045)),
        rgba(255, 255, 255, .026);
}

.studio-ready .studio-arrange-builder-controls label:nth-child(4) {
    border-color: rgba(184, 132, 255, .24);
    color: #d8c3ff;
    background:
        linear-gradient(135deg, rgba(184, 132, 255, .12), rgba(33, 212, 253, .035)),
        rgba(255, 255, 255, .026);
}

.studio-ready .studio-arrange-builder-controls select {
    min-height: 30px;
    min-width: 0;
    width: 100%;
    padding: 5px 28px 5px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    color: #f4fbfd;
    background-color: rgba(5, 10, 15, .92);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .018));
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%,
        0 0;
    background-size: 5px 5px, 5px 5px, 100% 100%;
    background-repeat: no-repeat;
    font-size: .72rem;
    font-weight: 900;
    appearance: none;
}

.studio-ready .studio-arrange-builder-controls label:nth-child(1) select {
    border-color: rgba(33, 212, 253, .34);
    color: #d9fbff;
    box-shadow: inset 3px 0 0 rgba(33, 212, 253, .48);
}

.studio-ready .studio-arrange-builder-controls label:nth-child(2) select {
    border-color: rgba(70, 255, 154, .3);
    color: #e1ffec;
    box-shadow: inset 3px 0 0 rgba(70, 255, 154, .48);
}

.studio-ready .studio-arrange-builder-controls label:nth-child(3) select {
    border-color: rgba(255, 184, 77, .34);
    color: #fff1cf;
    box-shadow: inset 3px 0 0 rgba(255, 184, 77, .5);
}

.studio-ready .studio-arrange-builder-controls select option {
    color: #f4fbfd;
    background: #071018;
}

.studio-ready .studio-arrange-builder-controls .studio-browser-check {
    align-content: center;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 100%;
    text-transform: none;
}

.studio-ready .studio-arrange-builder-controls .studio-browser-check input {
    accent-color: #b884ff;
}

.studio-ready .studio-arrange-summary {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(118px, 1fr);
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.studio-ready .studio-arrange-summary article {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(132, 148, 169, .14);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
        rgba(255, 255, 255, .028);
}

.studio-ready .studio-arrange-summary article:nth-child(3n + 1) {
    border-color: rgba(33, 212, 253, .22);
}

.studio-ready .studio-arrange-summary article:nth-child(3n + 2) {
    border-color: rgba(70, 255, 154, .2);
}

.studio-ready .studio-arrange-summary article:nth-child(3n) {
    border-color: rgba(255, 184, 77, .22);
}

.studio-ready .studio-arrange-summary article.studio-arrange-source-card {
    min-width: 220px;
    border-color: rgba(33, 212, 253, .32);
    background:
        linear-gradient(180deg, rgba(33, 212, 253, .085), rgba(255, 255, 255, .018)),
        rgba(8, 13, 20, .82);
}

.studio-ready .studio-arrange-summary article.is-muted {
    opacity: .58;
}

.studio-ready .studio-arrange-summary strong,
.studio-ready .studio-arrange-summary span,
.studio-ready .studio-arrange-summary em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-arrange-summary strong {
    color: #f4fbfd;
    font-size: .76rem;
}

.studio-ready .studio-arrange-summary span {
    color: #8edfed;
    font-size: .66rem;
    font-weight: 900;
}

.studio-ready .studio-arrange-summary em {
    color: rgba(215, 232, 240, .58);
    font-size: .62rem;
    font-style: normal;
}

/* PULSATRAX Studio project drawer flow: saved projects and publishing must never overlap. */
.studio-ready body.studio-app-body .studio-project-drawer,
.studio-ready .studio-project-drawer {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.studio-ready .studio-saved-projects-fold,
.studio-ready .studio-project-publish-fold {
    flex: none !important;
    width: 100% !important;
    min-width: 0;
    min-height: 42px !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    background: rgba(8, 12, 17, .48);
}

.studio-ready .studio-saved-projects-fold summary,
.studio-ready .studio-project-publish-fold summary {
    display: list-item !important;
    min-height: 34px;
    padding: 8px 10px;
    cursor: pointer;
    color: #e7f5fb;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.studio-ready .studio-saved-projects-fold summary small {
    float: right;
    margin-top: 1px;
    color: rgba(215, 232, 240, .62);
    font-size: .6rem;
    font-weight: 900;
    text-transform: none;
    white-space: nowrap;
}

.studio-ready .studio-project-publish-fold summary .made-in-ptx-badge {
    float: right;
    margin-left: 8px;
}

.studio-ready .studio-saved-projects-fold[open] {
    flex: none !important;
}

.studio-ready .studio-saved-projects-fold[open] .studio-project-list {
    max-height: min(34vh, 310px);
    min-height: 0;
    overflow: auto;
    padding: 0 7px 7px;
}

.studio-ready .studio-project-publish-fold[open] .studio-project-publish-fields {
    max-height: none !important;
    overflow: visible !important;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-radius: 0 0 7px 7px;
    background: transparent;
}

.studio-ready .studio-project-publish-fields:hover,
.studio-ready .studio-project-publish-fields:focus-within {
    max-height: none !important;
}

/* PULSATRAX Studio library/project drawer polish */
.studio-ready .studio-browser,
.studio-ready .studio-project-drawer {
    min-width: 0;
    overflow: hidden;
}

.studio-ready .studio-browser-controls {
    grid-template-columns: 1fr;
}

.studio-ready .studio-template-strip {
    max-height: 58px;
    overflow: auto;
}

.studio-ready .studio-browser-tabs,
.studio-ready .studio-browser-filter-chips {
    max-height: 92px;
}

.studio-ready .studio-sample-list {
    gap: 6px;
    padding-right: 3px;
}

.studio-ready .studio-sample-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 74px;
    grid-template-areas:
        "drag main preview"
        "drag meta add"
        "error error error";
    align-items: center;
    min-height: 66px;
    padding: 7px;
    gap: 6px 8px;
    border-radius: 7px;
}

.studio-ready .studio-sample-item:hover,
.studio-ready .studio-sample-item.is-selected,
.studio-ready .studio-sample-item.is-previewing {
    transform: none;
}

.studio-ready .studio-drag-handle {
    grid-area: drag;
}

.studio-ready .studio-sample-main {
    grid-area: main;
    min-height: 40px;
    padding: 4px 6px 7px;
}

.studio-ready .studio-sample-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-sample-main .studio-mini-wave {
    height: 13px;
    margin-top: 4px;
}

.studio-ready .studio-sample-tags,
.studio-ready .studio-sample-category {
    display: none;
}

.studio-ready .studio-sample-meta {
    grid-area: meta;
    display: flex;
    min-width: 0;
    gap: 4px;
}

.studio-ready .studio-sample-meta b {
    min-width: 0;
    flex: 1 1 0;
    padding: 3px 5px;
    font-size: .52rem;
}

.studio-ready .studio-preview-btn {
    grid-area: preview;
    min-width: 0;
    width: 100%;
    padding: 0 7px;
}

.studio-ready .studio-preview-btn .studio-preview-label {
    display: none;
}

.studio-ready .studio-clip-btn {
    grid-area: add;
    min-width: 0;
    width: 100%;
    padding: 0 8px;
}

.studio-ready .studio-fav-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
}

.studio-ready .studio-sample-error {
    grid-area: error;
    min-height: 0;
}

.studio-ready .studio-project-list {
    gap: 7px;
    padding-right: 3px;
}

.studio-ready .studio-project-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    background: rgba(10, 15, 22, .82);
}

.studio-ready .studio-project-item.is-deleting {
    opacity: .48;
    pointer-events: none;
}

.studio-ready .studio-project-item .studio-load-project {
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
}

.studio-ready .studio-project-item .studio-load-project strong,
.studio-ready .studio-project-item .studio-load-project span,
.studio-ready .studio-project-item .studio-load-project em,
.studio-ready .studio-project-item .studio-load-project small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-project-thumb {
    width: 48px;
    height: 34px;
}

.studio-ready .studio-delete-project {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 0 6px;
    border-color: rgba(255, 95, 95, .28);
    color: #ffb5b5;
    background: rgba(255, 95, 95, .07);
    font-size: .58rem;
}

.studio-ready .studio-delete-project:hover {
    border-color: rgba(255, 95, 95, .48);
    color: #fff;
    background: rgba(255, 95, 95, .18);
}

.studio-ready .studio-project-empty {
    padding: 10px;
}

@media (max-width: 760px) {
    .studio-ready .studio-sample-item {
        grid-template-columns: 16px minmax(0, 1fr) 58px;
        min-height: 62px;
    }

    .studio-ready .studio-sample-meta b[data-meta="key"] {
        display: none;
    }

    .studio-ready .studio-project-item {
        grid-template-columns: minmax(0, 1fr) 54px;
    }
}

.studio-ready .studio-section-navigator {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(132, 148, 169, .14);
    border-radius: 8px;
    background: rgba(5, 9, 14, .78);
}

.studio-ready .studio-section-navigator.is-hidden {
    display: none;
}

.studio-ready .studio-section-navigator-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.studio-ready .studio-section-navigator-head strong {
    color: #eef7fb;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-ready .studio-section-navigator-head span {
    color: rgba(215, 232, 240, .58);
    font-size: .68rem;
    font-weight: 800;
}

.studio-ready .studio-section-navigator-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 7px;
}

.studio-ready .studio-section-nav-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(132, 148, 169, .14);
    border-left: 3px solid var(--section-color, #21d4fd);
    border-radius: 7px;
    background: rgba(255, 255, 255, .026);
}

.studio-ready .studio-section-nav-card.is-active {
    border-color: rgba(33, 212, 253, .28);
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .08), transparent 54%),
        rgba(255, 255, 255, .035);
}

.studio-ready .studio-section-nav-main,
.studio-ready .studio-section-nav-actions button {
    border: 1px solid rgba(132, 148, 169, .14);
    border-radius: 6px;
    color: #eaf7fb;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
}

.studio-ready .studio-section-nav-main {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 7px;
    text-align: left;
}

.studio-ready .studio-section-nav-main strong,
.studio-ready .studio-section-nav-main span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-section-nav-main strong {
    color: #f4fbfd;
    font-size: .78rem;
}

.studio-ready .studio-section-nav-main span {
    color: rgba(215, 232, 240, .58);
    font-size: .66rem;
    font-weight: 800;
}

.studio-ready .studio-section-nav-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.studio-ready .studio-section-nav-actions button {
    min-height: 24px;
    padding: 4px 6px;
    color: #9debf5;
    font-size: .66rem;
    font-weight: 900;
}

.studio-ready .studio-section-nav-main:hover,
.studio-ready .studio-section-nav-main:focus-visible,
.studio-ready .studio-section-nav-actions button:hover,
.studio-ready .studio-section-nav-actions button:focus-visible {
    border-color: rgba(33, 212, 253, .34);
    background: rgba(33, 212, 253, .07);
    outline: none;
}

.studio-ready .studio-playlist-empty {
    position: absolute;
    pointer-events: none;
    z-index: 22;
}

.studio-ready .studio-playlist-empty button {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.studio-ready .studio-playlist-empty .studio-playlist-empty-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 50%;
    font-size: .78rem;
    line-height: 1;
}

.studio-ready .studio-loop-region-band,
.studio-ready .studio-playlist-playhead,
.studio-ready .studio-playlist-minimap {
    z-index: 12;
}

.studio-ready .studio-export-progress {
    position: relative;
    min-width: 92px;
    min-height: 20px;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    color: rgba(235, 248, 255, .82);
    font-size: .68rem;
    overflow: hidden;
}

.studio-ready .studio-export-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--export-progress, 0%);
    background: linear-gradient(90deg, rgba(70,255,154,.25), rgba(33,212,253,.2));
    z-index: -1;
}

.studio-ready .studio-project-item .studio-load-project {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
}

.studio-ready .studio-project-item .studio-load-project strong,
.studio-ready .studio-project-item .studio-load-project span,
.studio-ready .studio-project-item .studio-load-project em,
.studio-ready .studio-project-item .studio-load-project small {
    grid-column: 2;
}

.studio-ready .studio-project-thumb {
    grid-row: 1 / span 4;
    position: relative;
    width: 54px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(33,212,253,.12), rgba(255,79,216,.08)), #080d14;
    overflow: hidden;
}

.studio-ready .studio-project-thumb b {
    position: absolute;
    height: 6px;
    top: calc(8px + (var(--i, 0) * 4px));
    border-radius: 999px;
    background: var(--thumb-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--thumb-color) 56%, transparent);
}

.studio-ready .studio-project-thumb b:nth-child(1) { top: 7px; }
.studio-ready .studio-project-thumb b:nth-child(2) { top: 15px; }
.studio-ready .studio-project-thumb b:nth-child(3) { top: 23px; }
.studio-ready .studio-project-thumb b:nth-child(4) { top: 11px; }
.studio-ready .studio-project-thumb b:nth-child(5) { top: 19px; }
.studio-ready .studio-project-thumb b:nth-child(6) { top: 27px; }

.studio-ready .studio-project-item.is-local-project {
    border-color: rgba(70, 255, 154, .16);
}

.studio-ready .studio-project-cleanup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
}

.studio-ready .studio-cpu-meter {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(228, 246, 255, .76);
    background: rgba(4, 9, 15, .38);
    font-size: .68rem;
    font-weight: 900;
    white-space: nowrap;
}

.studio-ready .studio-cpu-meter.is-hot {
    border-color: rgba(255, 91, 127, .48);
    color: #ffe3e9;
    background: rgba(255, 91, 127, .12);
}

.studio-ready .studio-channel-strip {
    border-color: rgba(255, 255, 255, .09);
    background: linear-gradient(180deg, #202934, #0f151d);
}

.studio-ready .studio-channel-strip input[type="range"] {
    accent-color: var(--ptx-accent);
}

@media (max-width: 1280px) {
    .studio-ready .studio-daw-grid {
        min-height: 0;
    }

    .studio-ready .studio-browser {
        max-height: 72vh;
    }
}

@media (max-width: 760px) {
    .studio-ready .studio-sample-item {
        grid-template-columns: 18px minmax(0, 1fr) 66px 38px;
        min-height: 76px;
    }

    .studio-ready .studio-sample-category,
    .studio-ready .studio-sample-meta {
        display: none;
    }

    .studio-ready .studio-browser-tabs {
        top: 40px;
    }

    .studio-ready .studio-browser {
        max-height: 78vh;
    }
}

/* PULSATRAX Studio next-phase arrangement and mixer polish */
.studio-ready .studio-playlist-ruler {
    display: flex;
    align-items: stretch;
    position: sticky;
    width: calc(var(--studio-gutter) + var(--playlist-width));
    min-width: calc(var(--studio-gutter) + var(--playlist-width));
    overflow: hidden;
    cursor: ew-resize;
    background:
        linear-gradient(180deg, rgba(33, 212, 253, .13), transparent 42%),
        linear-gradient(180deg, #18202a, #0f151c);
    box-shadow: inset 0 -1px 0 rgba(33, 212, 253, .26), inset 0 1px 0 rgba(255,255,255,.06);
    touch-action: none;
}

.studio-ready .studio-playlist-ruler > span:not(.studio-end-marker):not(.studio-ruler-cue-marker) {
    flex: 0 0 calc(var(--playlist-width) / max(1, var(--ruler-divisions)));
    min-width: calc(var(--playlist-width) / max(1, var(--ruler-divisions)));
    font-size: .62rem;
    color: rgba(215, 245, 255, .58);
    border-left: 1px solid rgba(255, 255, 255, .055);
    display: inline-flex;
    align-items: center;
    padding-left: 5px;
}

.studio-ready .studio-playlist-ruler > span.is-bar {
    color: #f5fbff;
    font-size: .72rem;
    font-weight: 800;
    border-left-color: rgba(33, 212, 253, .42);
    text-shadow: 0 0 10px rgba(33, 212, 253, .55);
    background: rgba(33, 212, 253, .075);
}

.studio-ready .studio-playlist-ruler > span.is-beat {
    opacity: .72;
}

.studio-ready .studio-playlist-ruler::before {
    flex: 0 0 var(--studio-gutter);
}

.studio-ready .studio-playlist-ruler > .studio-end-marker {
    flex: 0 0 44px;
}

.studio-ready .studio-ruler-cue-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 30;
    display: none;
    width: 2px;
    padding: 0;
    border: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #f8fbff, #21d4fd);
    box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 14px rgba(33, 212, 253, .42);
    transform: translateX(-1px);
}

.studio-ready .studio-ruler-cue-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #f8fbff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 12px rgba(33, 212, 253, .4);
    transform: translateX(-50%) rotate(45deg);
}

.studio-ready .studio-ruler-cue-marker.is-visible {
    display: block;
}

.studio-ready .studio-section-marker {
    position: absolute;
    top: 3px;
    z-index: 24;
    display: grid;
    min-width: 54px;
    max-width: 110px;
    height: 25px;
    place-items: center;
    padding: 0 7px 0 10px;
    border: 1px solid color-mix(in srgb, var(--section-color) 58%, rgba(255,255,255,.18));
    border-left-width: 4px;
    border-radius: 6px;
    color: #f7fbff;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--section-color) 18%, rgba(12, 18, 25, .94)), rgba(6, 10, 15, .94));
    box-shadow: 0 5px 12px rgba(0,0,0,.28), 0 0 12px color-mix(in srgb, var(--section-color) 18%, transparent);
    cursor: grab;
    font: inherit;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
    text-align: left;
    transform: translateX(-4px);
}

.studio-ready .studio-section-marker::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 100%;
    width: 2px;
    height: 8px;
    background: color-mix(in srgb, var(--section-color) 72%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--section-color) 48%, transparent);
}

.studio-ready .studio-section-marker span {
    display: block;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-section-marker:hover,
.studio-ready .studio-section-marker:focus-visible,
.studio-ready .studio-section-marker.is-dragging {
    border-color: color-mix(in srgb, var(--section-color) 78%, white);
    outline: none;
    transform: translateX(-4px) translateY(-1px);
}

.studio-ready .studio-section-marker.is-dragging {
    cursor: grabbing;
    box-shadow: 0 8px 18px rgba(0,0,0,.34), 0 0 18px color-mix(in srgb, var(--section-color) 28%, transparent);
}

.studio-ready .studio-clip {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--channel-color) 34%, rgba(255,255,255,.16));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--channel-color) 26%, #253040), #111821 78%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.studio-ready .studio-clip:hover,
.studio-ready .studio-clip.is-selected,
.studio-ready .studio-clip.is-playing {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        0 0 18px color-mix(in srgb, var(--channel-color) 44%, transparent);
}

.studio-ready .studio-clip::after {
    display: none;
}

.studio-ready .studio-clip .studio-loop-lines {
    position: absolute;
    left: 9px;
    right: 22px;
    bottom: 4px;
    height: 10px;
    display: flex;
    gap: 2px;
    align-items: end;
    opacity: .62;
    pointer-events: none;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--channel-color) 70%, transparent));
}

.studio-ready .studio-clip .studio-loop-lines i {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #fff, var(--channel-color));
}

.studio-ready .studio-clip.is-playing .studio-loop-lines {
    opacity: .95;
    animation: ptxClipPulse .62s linear infinite;
}

@keyframes ptxClipPulse {
    0%, 100% { transform: scaleY(.82); }
    50% { transform: scaleY(1.12); }
}

.studio-ready .studio-project-io {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.studio-ready .studio-project-io .studio-secondary-btn {
    min-height: 30px;
    padding-inline: 10px;
}

.studio-ready .studio-channel-strip {
    gap: 8px;
}

.studio-ready .studio-channel-strip label {
    color: rgba(224, 242, 255, .72);
}

.studio-ready .studio-insert-slots button {
    border-color: rgba(33, 212, 253, .16);
    background: rgba(5, 10, 18, .42);
}

.studio-ready .studio-insert-slots button:hover {
    border-color: rgba(255, 79, 216, .4);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 79, 216, .16);
}

.studio-ready .studio-insert-slots button.is-active {
    border-color: rgba(70, 255, 154, .44);
    color: #eafff2;
    background: rgba(70, 255, 154, .1);
}

.studio-ready .studio-sample-pack-rail,
.studio-ready .studio-project-comments,
.studio-ready .studio-project-activity,
.studio-ready .studio-debug-body {
    display: grid;
    gap: 8px;
}

.studio-ready .studio-pack-card,
.studio-ready .studio-project-comment,
.studio-ready .studio-project-activity-item,
.studio-ready .studio-debug-event {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 6px;
    background: rgba(4, 9, 15, .36);
}

.studio-ready .studio-pack-card span,
.studio-ready .studio-project-activity-item em,
.studio-ready .studio-project-comment em,
.studio-ready .studio-debug-event em {
    color: rgba(215, 245, 255, .54);
    font-size: .62rem;
    font-style: normal;
}

.studio-ready .studio-project-share-tools,
.studio-ready .studio-project-comment-form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.studio-ready .studio-project-share-tools input,
.studio-ready .studio-project-comment-form input,
.studio-ready .studio-zip-import input {
    min-width: 0;
}

.studio-ready .studio-debug-panel {
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 8px;
}

.studio-ready .studio-debug-copy {
    justify-self: start;
}

.studio-ready .studio-debug-copy-text {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    padding: 8px;
    background: rgba(3, 7, 12, .74);
    color: rgba(228, 246, 255, .82);
    font: 0.68rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    user-select: text;
}

/* Owner diagnostics drawer: compact dropdown console, no overlapping right-panel controls. */
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-panel-title {
    min-width: 0 !important;
    gap: 4px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-panel-title small {
    display: block !important;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-window-tools {
    gap: 2px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-window-tools button {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    font-size: .58rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-meta {
    overflow: hidden !important;
    padding: 5px 7px !important;
    border: 1px solid rgba(70, 255, 154, .14) !important;
    border-radius: 6px !important;
    color: rgba(236, 255, 245, .76) !important;
    background: rgba(5, 14, 13, .68) !important;
    font-size: .62rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-owner-fold,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-saved-projects-fold,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-publish-fold,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-debug-panel {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(70, 255, 154, .14) !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(7, 18, 16, .86), rgba(3, 9, 11, .82)) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-owner-fold > summary,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-saved-projects-fold > summary,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-publish-fold > summary,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-debug-panel > summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    color: #ecfff5 !important;
    background: linear-gradient(90deg, rgba(70, 255, 154, .11), rgba(124, 247, 255, .045)) !important;
    font-size: .66rem !important;
    font-weight: 900 !important;
    list-style: none !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-owner-fold > summary::-webkit-details-marker,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-saved-projects-fold > summary::-webkit-details-marker,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-publish-fold > summary::-webkit-details-marker,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-debug-panel > summary::-webkit-details-marker {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-owner-fold > summary::after,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-saved-projects-fold > summary::after,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-publish-fold > summary::after,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-debug-panel > summary::after {
    content: "+" !important;
    color: #46ff9a !important;
    font-size: .8rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-owner-fold[open] > summary::after,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-saved-projects-fold[open] > summary::after,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-publish-fold[open] > summary::after,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-debug-panel[open] > summary::after {
    content: "-" !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer summary span,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer summary small,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer summary strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer summary small,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer summary strong {
    color: rgba(189, 233, 219, .72) !important;
    font-size: .52rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-list,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-publish-fields,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-clip-inspector-body,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-owner-training-body,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-debug-body,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-share-placeholder {
    min-width: 0 !important;
    max-height: min(54vh, 520px) !important;
    overflow: auto !important;
    padding: 8px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-project-publish-fields,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-clip-inspector-body,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-owner-training-body,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer .studio-debug-body {
    display: grid !important;
    gap: 7px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-selected {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
    border: 1px solid rgba(70, 255, 154, .18) !important;
    border-radius: 7px !important;
    background: rgba(70, 255, 154, .055) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-selected strong,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-selected span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-selected strong {
    color: #f2fff8 !important;
    font-size: .72rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-selected span {
    color: rgba(202, 231, 222, .72) !important;
    font-size: .58rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-selected b {
    padding: 4px 6px !important;
    border: 1px solid rgba(124, 247, 255, .2) !important;
    border-radius: 999px !important;
    color: #7cf7ff !important;
    background: rgba(124, 247, 255, .065) !important;
    font-size: .54rem !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-grid span {
    min-width: 0 !important;
    padding: 6px !important;
    border-radius: 6px !important;
    color: rgba(202, 231, 222, .7) !important;
    background: rgba(255, 255, 255, .035) !important;
    font-size: .55rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-grid b {
    display: block !important;
    overflow: hidden !important;
    color: #f2fff8 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-actions,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-reasons div,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-queue-row > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-actions button,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-reasons button,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-queue-row button {
    min-height: 28px !important;
    padding: 5px 7px !important;
    border: 1px solid rgba(118, 146, 184, .24) !important;
    border-radius: 6px !important;
    color: rgba(238, 246, 255, .86) !important;
    background: rgba(255, 255, 255, .045) !important;
    font-size: .56rem !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-actions button:hover,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-reasons button:hover,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-queue-row button:hover {
    border-color: rgba(70, 255, 154, .42) !important;
    color: #f6fff9 !important;
    background: rgba(70, 255, 154, .09) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-reasons {
    display: grid !important;
    gap: 5px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-reasons strong,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-head strong {
    color: #ecfff5 !important;
    font-size: .62rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-queue {
    display: grid !important;
    gap: 7px !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    align-items: center !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-head span {
    overflow: hidden !important;
    color: rgba(202, 231, 222, .62) !important;
    font-size: .52rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-queue-row {
    display: grid !important;
    gap: 5px !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 7px !important;
    background: rgba(0, 0, 0, .16) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-pick {
    display: grid !important;
    width: 100% !important;
    text-align: left !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-pick strong,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-training-pick span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer label,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer input,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer textarea,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer select,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer button {
    max-width: 100% !important;
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-share-tools,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-comment-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-diagnostics-actions {
    display: flex !important;
    justify-content: flex-start !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-debug-fold {
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(124, 247, 255, .1) !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, .14) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-debug-fold > summary {
    min-height: 28px !important;
    padding: 6px 8px !important;
    color: #dfffee !important;
    background: rgba(70, 255, 154, .055) !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-metrics {
    display: grid !important;
    gap: 5px !important;
    padding: 7px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-metric {
    display: grid !important;
    grid-template-columns: minmax(78px, .42fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 5px 6px !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, .035) !important;
    font-size: .55rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-metric span {
    color: rgba(189, 233, 219, .66) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-metric strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #f2fff8 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-debug-copy-text {
    box-sizing: border-box !important;
    min-height: 118px !important;
    max-height: 240px !important;
    resize: vertical !important;
    font-size: .6rem !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-owner-debug-events {
    display: grid !important;
    gap: 5px !important;
    max-height: 260px !important;
    overflow: auto !important;
    padding: 7px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-debug-event {
    min-width: 0 !important;
    padding: 6px !important;
    font-size: .58rem !important;
}

.studio-ready .studio-drag-ghost-preview .studio-waveform,
.studio-ready .studio-drag-ghost-preview .studio-waveform-mini {
    width: 140px;
}

@media (max-width: 760px) {
    .studio-ready .studio-project-io {
        width: 100%;
        padding-left: 0;
        border-left: 0;
        flex-wrap: wrap;
    }

    .studio-ready .studio-playlist-ruler > span:not(.studio-end-marker):not(.studio-ruler-cue-marker) {
        font-size: .55rem;
        padding-left: 3px;
    }
}

/* Low Performance Mode: prioritize audio timing by reducing paint/composite cost. */
.studio-low-performance *,
.studio-low-performance *::before,
.studio-low-performance *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

.studio-low-performance .studio-app,
.studio-low-performance .studio-daw-window,
.studio-low-performance .studio-browser,
.studio-low-performance .studio-work-panel,
.studio-low-performance .studio-project-drawer,
.studio-low-performance .studio-clip,
.studio-low-performance .studio-sample-item,
.studio-low-performance .studio-channel-strip,
.studio-low-performance .studio-pad,
.studio-low-performance .studio-transport-btn,
.studio-low-performance .studio-playlist-playhead,
.studio-low-performance .studio-playlist-minimap,
.studio-low-performance .studio-project-thumb,
.studio-low-performance .studio-loop-region-band,
.studio-low-performance .studio-meter-fill,
.studio-low-performance .studio-preview-btn,
.studio-low-performance .studio-primary-btn,
.studio-low-performance .studio-secondary-btn {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
}

.studio-low-performance .studio-clip .studio-loop-lines,
.studio-low-performance .studio-mini-wave,
.studio-low-performance .studio-waveform-large,
.studio-low-performance .studio-project-thumb b,
.studio-low-performance .studio-playlist-minimap-clips span {
    filter: none !important;
}

.studio-low-performance .studio-clip.is-playing .studio-loop-lines,
.studio-low-performance .studio-sample-item.is-previewing .studio-mini-wave,
.studio-low-performance .studio-preview-progress,
.studio-low-performance .studio-meter-fill {
    animation: none !important;
}

.studio-low-performance .studio-sample-item:hover,
.studio-low-performance .studio-clip:hover,
.studio-low-performance .studio-channel-strip:hover {
    transform: none !important;
}

.studio-low-performance .studio-meter,
.studio-low-performance .studio-playlist-minimap,
.studio-low-performance .studio-preview-progress {
    display: none !important;
}

.studio-low-performance .studio-app,
.studio-low-performance .studio-topbar,
.studio-low-performance .studio-daw-window,
.studio-low-performance .studio-sample-item,
.studio-low-performance .studio-clip {
    background-image: none !important;
}

.studio-low-performance .studio-low-performance-toggle {
    border-color: rgba(70, 255, 154, .35);
    color: #dfffee;
}

.studio-low-performance .studio-low-performance-toggle.is-auto::after {
    content: "Auto";
    margin-left: 6px;
    color: rgba(70, 255, 154, .9);
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.studio-toast[data-toast-type="error"] {
    border-color: rgba(255, 91, 127, .55);
    color: #fff3f6;
    background: linear-gradient(135deg, rgba(255, 91, 127, .2), rgba(15, 7, 14, .95));
}

.is-loading {
    position: relative;
    cursor: progress !important;
}

.is-loading::after {
    content: attr(data-loading-label);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(245, 252, 255, .86);
    background: rgba(5, 8, 14, .5);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 20;
}

button.is-loading::after,
form.is-loading::after,
.studio-sample-list.is-loading::after {
    border-radius: inherit;
}

/* PULSATRAX Studio user-experience polish */
.studio-ready .studio-playlist.is-moving-clips {
    cursor: grabbing;
    user-select: none;
}

.studio-ready .studio-playlist.is-snapping .studio-playlist-ruler {
    box-shadow: inset 0 -1px 0 rgba(70, 255, 154, .24);
}

.studio-ready .studio-snap-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 14;
    width: 2px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.92), #46ff9a 46%, #21d4fd);
    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 18px rgba(70, 255, 154, .52);
    transform: translateX(-1px);
    transition: opacity .08s linear;
}

.studio-ready .studio-snap-cursor.is-visible {
    opacity: 1;
}

.studio-ready .studio-playlist.is-moving-clips .studio-snap-cursor {
    display: none;
}

.studio-ready .studio-playlist-lane.is-snap-target {
    background-color: #101a20;
    border-color: color-mix(in srgb, var(--channel-color) 46%, rgba(255,255,255,.12));
}

.studio-ready .studio-playlist-lane.is-selected-lane .studio-playlist-lane-label {
    color: #f7fbff;
    background: linear-gradient(90deg, color-mix(in srgb, var(--channel-color) 20%, #151d27), #111821);
}

.studio-ready .studio-playlist-lane-label {
    cursor: pointer;
}

.studio-ready .studio-playlist-lane-label::after {
    content: "dbl-click rename";
    margin-top: 2px;
    color: rgba(215, 245, 255, .42);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .12s ease;
}

.studio-ready .studio-playlist-lane-label:hover::after,
.studio-ready .studio-playlist-lane.is-selected-lane .studio-playlist-lane-label::after {
    opacity: 1;
}

.studio-ready .studio-clip {
    transition: left .08s linear, top .08s linear, width .08s linear, border-color .12s ease, box-shadow .12s ease, filter .12s ease;
    will-change: left, width;
}

.studio-ready .studio-playlist.is-moving-clips .studio-clip {
    transition: left .04s linear, width .04s linear;
}

.studio-ready .studio-clip:hover {
    filter: saturate(1.08) brightness(1.04);
}

.studio-ready .studio-clip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--channel-color) 72%, #ffffff);
    outline-offset: 2px;
}

.studio-ready .studio-app.is-playing .studio-workspace {
    box-shadow: inset 0 0 32px rgba(33, 212, 253, .035), inset 0 0 54px rgba(255, 79, 216, .025);
}

.studio-ready .studio-app.is-playing .studio-playlist-panel {
    border-color: rgba(70, 255, 154, .2);
}

.studio-lane-context-menu button:nth-child(2) { color: #9beeff; }
.studio-lane-context-menu button:nth-child(3) { color: #a6ffc6; }
.studio-lane-context-menu button:nth-child(4) { color: #ffc0f2; }
.studio-lane-context-menu button:nth-child(5) { color: #ffe0a3; }

.studio-low-performance .studio-snap-cursor,
.studio-low-performance .studio-clip {
    transition: none;
}

/* PULSATRAX Studio v1 rebuild: isolated simple frontend. */
.ptx-studio-v1-body {
    min-height: 100vh;
    background: #070812;
    color: #f3ecff;
}

.ptx-v1-shell {
    min-height: 100vh;
    padding: 18px;
    background:
        radial-gradient(circle at 18% 0%, rgba(45, 212, 255, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(8, 9, 20, 0.96), rgba(17, 10, 31, 0.98));
}

.ptx-v1-topbar,
.ptx-v1-browser,
.ptx-v1-arrange,
.ptx-v1-projects {
    border: 1px solid rgba(166, 132, 255, 0.26);
    background: rgba(10, 12, 25, 0.88);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.ptx-v1-topbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(280px, 1fr);
    gap: 16px;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
}

.ptx-v1-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ptx-v1-brand > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2dd4ff, #ff4fd8);
    color: #050712;
    font-weight: 900;
}

.ptx-v1-brand p,
.ptx-v1-brand h1 {
    margin: 0;
}

.ptx-v1-brand p,
.ptx-v1-panel-head span,
.ptx-sample-meta,
.ptx-v1-status {
    color: #b9aecf;
    font-size: 0.82rem;
}

.ptx-v1-brand h1 {
    font-size: 1.35rem;
}

.ptx-daw-alpha-note-header {
    margin-top: 7px;
}

.ptx-daw-alpha-note-header small {
    max-width: 34rem;
}

.ptx-audio-build-marker {
    display: inline-flex;
    width: fit-content;
    margin-top: 7px;
    border: 1px solid rgba(45, 212, 255, .42);
    border-radius: 6px;
    padding: 3px 7px;
    background: rgba(45, 212, 255, .08);
    color: #8af4ff;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.ptx-v1-transport,
.ptx-v1-project-tools,
.ptx-v1-browser-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ptx-v1-clip-tools {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 4px;
}

.ptx-v1-clip-tools label {
    color: #ffd86b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ptx-v1-clip-tools input {
    width: 58px;
}

.ptx-debug-toast {
    display: none;
    border: 1px solid rgba(255, 216, 107, .62);
    border-radius: 7px;
    padding: 6px 9px;
    background: rgba(255, 216, 107, .12);
    color: #ffe6a3;
    font-size: .78rem;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(255, 216, 107, .14);
}

.ptx-debug-toast.is-visible {
    display: inline-flex;
}

.ptx-v1-topbar button,
.ptx-v1-topbar a,
.ptx-preview-btn,
.ptx-add-btn,
.ptx-project-row {
    border: 1px solid rgba(182, 151, 255, 0.36);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #f3ecff;
    min-height: 34px;
    padding: 8px 11px;
    text-decoration: none;
    box-shadow: none;
}

.ptx-v1-topbar button:hover,
.ptx-v1-topbar a:hover,
.ptx-preview-btn:hover,
.ptx-add-btn:hover,
.ptx-project-row:hover {
    background: rgba(45, 212, 255, 0.12);
    border-color: rgba(45, 212, 255, 0.48);
}

#ptx-play,
#ptx-save,
.ptx-add-btn {
    background: linear-gradient(135deg, rgba(45, 212, 255, 0.24), rgba(255, 79, 216, 0.2));
    border-color: rgba(45, 212, 255, 0.62);
}

.ptx-v1-topbar input,
.ptx-v1-topbar select,
.ptx-v1-browser-controls input,
.ptx-v1-browser-controls select {
    border: 1px solid rgba(182, 151, 255, 0.32);
    border-radius: 7px;
    background: rgba(3, 5, 13, 0.78);
    color: #f3ecff;
    min-height: 34px;
    padding: 8px 10px;
}

#ptx-title {
    min-width: 220px;
}

.ptx-v1-grid {
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(620px, 1fr) minmax(230px, 280px);
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}

.ptx-v1-browser,
.ptx-v1-arrange,
.ptx-v1-projects {
    min-height: 640px;
    border-radius: 8px;
    overflow: hidden;
}

.ptx-v1-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid rgba(166, 132, 255, 0.18);
}

.ptx-v1-browser-controls {
    padding: 12px;
}

.ptx-v1-browser-controls input {
    flex: 1 1 160px;
}

.ptx-v1-sample-list,
.ptx-v1-project-list {
    display: grid;
    gap: 8px;
    padding: 12px;
    max-height: 560px;
    overflow: auto;
}

.ptx-sample-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.ptx-sample-row.is-selected {
    border-color: rgba(45, 212, 255, 0.58);
    background: rgba(45, 212, 255, 0.08);
}

.ptx-sample-main {
    grid-column: 1 / 2;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptx-sample-meta {
    grid-column: 1 / 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptx-preview-btn {
    grid-column: 2;
    grid-row: 1 / 3;
}

.ptx-add-btn {
    grid-column: 3;
    grid-row: 1 / 3;
}

.ptx-v1-playlist-scroll {
    position: relative;
    height: 600px;
    overflow: auto;
    background:
        linear-gradient(90deg, rgba(45, 212, 255, 0.1) 1px, transparent 1px) 104px 0 / 288px 100%,
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 104px 0 / 72px 100%,
        rgba(3, 5, 13, 0.62);
}

.ptx-v1-ruler {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 34px;
    margin-left: 104px;
    background: rgba(10, 12, 25, 0.96);
    border-bottom: 1px solid rgba(166, 132, 255, 0.2);
}

.ptx-ruler-mark {
    position: absolute;
    top: 0;
    width: 58px;
    height: 34px;
    border: 0;
    border-left: 1px solid rgba(45, 212, 255, 0.24);
    background: transparent;
    color: #cfc3ea;
    text-align: left;
    padding-left: 6px;
}

.ptx-v1-lane-wrap {
    position: relative;
}

.ptx-v1-lanes {
    position: relative;
    min-width: 920px;
}

.ptx-lane {
    position: relative;
    display: grid;
    grid-template-columns: 104px 1fr;
    min-height: 72px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ptx-lane-label {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: rgba(10, 12, 25, 0.96);
    color: #cfc3ea;
    border-right: 1px solid rgba(166, 132, 255, 0.18);
    font-weight: 800;
}

.ptx-lane-clips {
    position: relative;
    min-height: 72px;
}

.ptx-clip {
    position: absolute;
    top: 12px;
    height: 48px;
    border: 1px solid rgba(45, 212, 255, 0.48);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(45, 212, 255, 0.2), rgba(255, 79, 216, 0.16));
    color: #fff;
    padding: 0 10px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    touch-action: none;
    cursor: grab;
}

.ptx-clip-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 46px;
    pointer-events: none;
}

.ptx-clip.is-selected {
    border-color: rgba(255, 240, 108, 0.8);
    box-shadow: 0 0 0 1px rgba(255, 240, 108, 0.22);
}

.ptx-v1-playhead {
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 104px;
    z-index: 4;
    width: 2px;
    background: #fff06c;
    pointer-events: none;
}

.ptx-project-row {
    display: grid;
    gap: 3px;
    text-align: left;
}

.ptx-project-row span,
.ptx-empty {
    color: #b9aecf;
    font-size: 0.82rem;
}

@media (max-width: 1120px) {
    .ptx-v1-topbar,
    .ptx-v1-grid {
        grid-template-columns: 1fr;
    }

    .ptx-v1-browser,
    .ptx-v1-arrange,
    .ptx-v1-projects {
        min-height: auto;
    }
}

/* Homepage app-shell alignment: keep home modules, but use the same page frame as the rest of the app. */
body[id="top"].home-page:not(.studio-app-body) {
    background:
        radial-gradient(circle at 18% -8%, rgba(155, 108, 255, .28), transparent 34%),
        radial-gradient(circle at 88% 2%, rgba(99, 216, 235, .15), transparent 32%),
        radial-gradient(circle at 64% 34%, rgba(227, 90, 203, .08), transparent 38%),
        linear-gradient(180deg, rgba(9, 6, 16, .96) 0%, rgba(5, 4, 10, .98) 64%, #030207 100%),
        var(--site-bg-image);
    background-size: auto, auto, auto, auto, cover;
    background-position: center, center, center, center, var(--site-bg-position-x) var(--site-bg-position-y);
}

@media (min-width: 761px) {
    body[id="top"].home-page:not(.studio-app-body) .layout {
        display: grid;
        width: min(100%, 1760px);
        max-width: 1760px;
        margin-inline: auto;
        grid-template-columns: minmax(198px, 228px) minmax(0, 1fr) minmax(280px, 330px);
        gap: clamp(16px, 1.3vw, 24px);
        padding: clamp(16px, 1.4vw, 24px);
    }

    body[id="top"].home-page:not(.studio-app-body) .home-feed {
        gap: 16px;
        width: 100%;
    }

    body[id="top"].home-page:not(.studio-app-body) .home-rightbar {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 14px;
        position: sticky;
        top: 18px;
        height: fit-content;
        max-height: none;
        overflow: visible;
        border: 1px solid var(--app-border);
        border-radius: 20px;
        background:
            linear-gradient(145deg, rgba(155, 108, 255, .105), transparent 42%),
            linear-gradient(315deg, rgba(99, 216, 235, .055), transparent 48%),
            var(--app-panel-bg);
        box-shadow: 0 18px 52px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .055);
        backdrop-filter: blur(14px);
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-card.live-experience-hero {
        min-height: 260px;
        max-height: none;
        padding: clamp(26px, 4vw, 44px);
        border-radius: 22px;
        align-items: end;
        box-shadow: 0 30px 84px rgba(0, 0, 0, .58), 0 0 42px rgba(140, 92, 246, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-content {
        width: min(100%, 680px);
        justify-content: flex-end;
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-card h1 {
        font-size: clamp(2rem, 3.4vw, 3.2rem);
        line-height: 1.02;
    }
}

@media (max-width: 760px) {
    body[id="top"].home-page:not(.studio-app-body) .layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        padding: 10px 8px;
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-card.live-experience-hero {
        min-height: 210px;
        padding: 18px;
        border-radius: 17px;
    }

    body[id="top"].home-page:not(.studio-app-body) .home-hero-card .mobile-hero-title {
        font-size: clamp(1.45rem, 7vw, 2rem);
        line-height: 1.08;
    }
}

/* Mobile repair pass: containment, bottom-safe UI, embeds, and PTX project cards. */
@media (max-width: 760px) {
    :root {
        --mobile-nav-space: calc(70px + env(safe-area-inset-bottom));
        --mobile-page-gutter: 8px;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body:not(.studio-app-body) {
        padding-bottom: calc(var(--mobile-nav-space) + 28px);
    }

    body[id="top"]:not(.studio-app-body) .layout {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: var(--mobile-page-gutter) var(--mobile-page-gutter) calc(var(--mobile-nav-space) + 24px);
        overflow-x: clip;
    }

    body[id="top"]:not(.studio-app-body) :where(.feed, .home-feed, .profile-feed, .discovery-page, .charts-page, .collabs-page) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 10px;
    }

    body[id="top"]:not(.studio-app-body) :where(.post-card, .feed-post-card, .create-post, .profile-card, .widget, .premium-widget, .search-user-card, .discovery-stat-card, .collab-card, .creator-presence-card, .ptx-project-card, .community-live-strip, .launch-command-card, .home-live-deck) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
        overflow-y: visible;
        padding: 11px;
        border-radius: 13px;
        overflow-wrap: anywhere;
    }

    body[id="top"]:not(.studio-app-body) :where(.post-card h2, .post-card h3, .widget-title-row h3, .creator-highlights-head h2, .creator-highlights-head h3, .ptx-project-card h3) {
        font-size: clamp(.98rem, 4.6vw, 1.18rem);
        line-height: 1.18;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    body[id="top"]:not(.studio-app-body) :where(.post-card p, .post-card em, .post-card small, .muted, .ptx-project-card p, .ptx-project-card em, .ptx-project-card small, .ptx-project-social, .ptx-project-chain, .community-live-grid em, .community-live-grid p, .launch-command-card p) {
        max-width: 100%;
        font-size: .82rem;
        line-height: 1.38;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mobile-bottom-nav {
        bottom: 0;
        padding: 5px 7px calc(5px + env(safe-area-inset-bottom));
        min-height: var(--mobile-nav-space);
        max-width: 100vw;
    }

    .mobile-nav-shell {
        max-width: min(560px, 100%);
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 3px;
    }

    .mobile-nav-item,
    .mobile-more-menu > summary.mobile-nav-item {
        min-width: 0;
        min-height: 48px;
        padding: 4px 1px;
        font-size: clamp(.56rem, 2.35vw, .66rem);
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mobile-more-panel {
        bottom: calc(var(--mobile-nav-space) + 8px);
        max-height: min(46vh, 350px);
    }

    .push-permission-card {
        left: 10px;
        right: 10px;
        bottom: calc(var(--mobile-nav-space) + 10px);
        z-index: 2500;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
        width: auto;
        max-width: calc(100vw - 20px);
        max-height: min(34vh, 188px);
        padding: 8px;
        border-radius: 12px;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .push-permission-copy {
        gap: 2px;
        min-width: 0;
    }

    .push-permission-copy strong {
        font-size: .7rem;
        letter-spacing: .04em;
        line-height: 1.1;
    }

    .push-permission-copy span {
        font-size: .7rem;
        line-height: 1.2;
    }

    .push-permission-copy small {
        display: none;
    }

    .push-permission-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        min-width: 92px;
        justify-content: stretch;
    }

    .push-permission-actions button {
        min-height: 28px;
        padding: 5px 7px;
        border-radius: 8px;
        font-size: .66rem;
        line-height: 1.05;
        white-space: normal;
        box-shadow: none;
    }

    .push-permission-actions [data-push-dismiss] {
        background: rgba(255, 255, 255, .08);
    }

    .post-top {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 9px;
        align-items: start;
    }

    .post-top > div,
    .comment-body,
    .post-content-text,
    .post-text {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .post-actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        align-items: center;
    }

    .post-actions-row form,
    .post-actions-row details,
    .post-actions-row button {
        min-width: 0;
    }

    .post-actions-row :where(button, .post-action-placeholder, .post-action-like, .report-pop > summary) {
        min-height: 34px;
        padding: 7px 9px;
        font-size: .78rem;
        line-height: 1.1;
    }

    .embed-card,
    .message-bubble .embed-card,
    .comment-body .embed-card {
        width: 100%;
        max-width: 100%;
        margin: 10px 0 4px;
        padding: 6px;
        border-radius: 11px;
        overflow: hidden;
    }

    .youtube-embed,
    .message-bubble .youtube-embed,
    .comment-body .youtube-embed {
        position: relative;
        width: 100%;
        max-width: 100%;
        max-height: none;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
    }

    .youtube-embed iframe,
    .message-bubble .youtube-embed iframe,
    .comment-body .youtube-embed iframe {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: none;
        border: 0;
    }

    .ptx-project-card-list,
    .ptx-project-grid,
    .alpha-project-list,
    .discovery-grid:has(.ptx-project-card) {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ptx-project-card {
        grid-template-columns: 1fr;
        gap: 9px;
        align-items: stretch;
    }

    .ptx-project-body {
        min-width: 0;
        max-width: 100%;
    }

    .ptx-project-preview {
        width: 100%;
        min-height: 72px;
        max-width: 100%;
        border-radius: 10px;
    }

    .ptx-project-card h3 {
        margin: 5px 0 3px;
        white-space: normal;
    }

    .ptx-project-badges,
    .ptx-project-actions {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 6px;
    }

    .ptx-project-badge {
        max-width: 100%;
        min-height: 19px;
        font-size: .54rem;
        line-height: 1.1;
        white-space: normal;
    }

    .ptx-project-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .ptx-project-actions form,
    .ptx-project-actions .inline-action-form,
    .ptx-project-actions .compact-action-btn,
    .ptx-project-actions .compact-action-link {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ptx-project-actions .compact-action-btn,
    .ptx-project-actions .compact-action-link {
        justify-content: center;
        min-height: 38px;
        padding: 8px 10px;
        font-size: .78rem;
        white-space: normal;
        text-align: center;
    }

    .alpha-project-rail,
    .inhabited-feed-panel,
    .creator-workbench-card {
        display: grid;
        gap: 10px;
    }

    .creator-highlights-head,
    .community-live-head,
    .pulse-stories-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
    }

    .creator-highlights-head .compact-action-btn,
    .creator-highlights-head .compact-action-link {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 390px) {
    .push-permission-card {
        grid-template-columns: 1fr;
        max-height: min(38vh, 210px);
    }

    .push-permission-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .push-permission-actions [data-push-enable] {
        grid-column: 1 / -1;
    }
}

/* PTX visual polish pass: industrial dark controls, restrained neon accents. */
:root {
    --control-bg: rgba(10, 13, 18, .82);
    --control-bg-hover: rgba(15, 20, 27, .94);
    --control-bg-active: rgba(18, 24, 31, .98);
    --control-border: rgba(151, 166, 184, .24);
    --control-border-hover: rgba(83, 214, 230, .48);
    --control-text: #edf3f7;
    --control-muted: #aeb8c4;
    --control-cyan: #53d6e6;
    --control-purple: #8d64d8;
    --control-red: #ff5e73;
}

body:not(.studio-app-body) :where(
    button,
    .button-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .feed-tabs-card .menu-link,
    .ptx-project-open
) {
    border: 1px solid var(--control-border);
    border-radius: 9px;
    color: var(--control-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
        var(--control-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 6px 16px rgba(0, 0, 0, .22);
    filter: none;
    text-shadow: none;
    letter-spacing: 0;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body:not(.studio-app-body) :where(
    button,
    .button-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .feed-tabs-card .menu-link,
    .ptx-project-open
):hover,
body:not(.studio-app-body) :where(
    button,
    .button-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .feed-tabs-card .menu-link,
    .ptx-project-open
):focus-visible {
    border-color: var(--control-border-hover);
    color: #f8fcff;
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .085), rgba(255, 255, 255, .018)),
        var(--control-bg-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 18px rgba(0, 0, 0, .26);
    filter: none;
}

body:not(.studio-app-body) :where(button, .button-link, .launch-cta, .compact-action-btn, .compact-action-link):active {
    transform: translateY(1px);
    background: var(--control-bg-active);
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, .34);
}

body:not(.studio-app-body) :where(
    .launch-cta-primary,
    .launch-cta-studio,
    .home-hero-actions .launch-cta-primary,
    .home-hero-actions .launch-cta-studio,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .edit-profile-actions button,
    .profile-studio-link,
    .branding-upload-btn
) {
    border-color: rgba(141, 100, 216, .5);
    color: #f4f1ff;
    background:
        linear-gradient(90deg, rgba(141, 100, 216, .34), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
        rgba(11, 14, 20, .9);
    box-shadow: inset 3px 0 0 rgba(141, 100, 216, .72), inset 0 1px 0 rgba(255, 255, 255, .06), 0 7px 18px rgba(0, 0, 0, .24);
}

body:not(.studio-app-body) :where(
    .launch-cta-primary,
    .launch-cta-studio,
    .home-hero-actions .launch-cta-primary,
    .home-hero-actions .launch-cta-studio,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .edit-profile-actions button,
    .profile-studio-link,
    .branding-upload-btn
):hover,
body:not(.studio-app-body) :where(
    .launch-cta-primary,
    .launch-cta-studio,
    .home-hero-actions .launch-cta-primary,
    .home-hero-actions .launch-cta-studio,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .edit-profile-actions button,
    .profile-studio-link,
    .branding-upload-btn
):focus-visible {
    border-color: rgba(83, 214, 230, .58);
    background:
        linear-gradient(90deg, rgba(141, 100, 216, .38), transparent 32%),
        linear-gradient(180deg, rgba(83, 214, 230, .08), rgba(255, 255, 255, .012)),
        rgba(13, 17, 23, .96);
    box-shadow: inset 3px 0 0 rgba(141, 100, 216, .78), inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 18px rgba(0, 0, 0, .28);
}

body:not(.studio-app-body) :where(
    .launch-cta-secondary,
    .compact-action-btn-muted,
    .profile-launch-actions a:not(:first-child),
    .feed-tabs-card .menu-link,
    .video-style-chip,
    .forum-tab,
    .share-btn,
    .confirm-cancel
) {
    border-color: rgba(151, 166, 184, .2);
    color: var(--control-muted);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .006)),
        rgba(8, 11, 16, .74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body:not(.studio-app-body) :where(
    .feed-tabs-card .menu-link.active,
    .video-style-chip.active,
    .forum-tab.active,
    .menu-link.active
) {
    border-color: rgba(83, 214, 230, .42);
    color: #f4fbff;
    background:
        linear-gradient(90deg, rgba(83, 214, 230, .16), transparent 46%),
        rgba(11, 15, 21, .88);
    box-shadow: inset 3px 0 0 rgba(83, 214, 230, .58), inset 0 1px 0 rgba(255, 255, 255, .055);
}

body:not(.studio-app-body) :where(.danger-btn, button.danger-btn, .delete-post-form button, .admin-page .danger-btn) {
    border-color: rgba(255, 94, 115, .48) !important;
    color: #ffecef !important;
    background:
        linear-gradient(90deg, rgba(255, 94, 115, .24), transparent 42%),
        rgba(17, 8, 11, .88) !important;
    box-shadow: inset 3px 0 0 rgba(255, 94, 115, .68), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

body:not(.studio-app-body) :where(.danger-btn, button.danger-btn, .delete-post-form button, .admin-page .danger-btn):hover,
body:not(.studio-app-body) :where(.danger-btn, button.danger-btn, .delete-post-form button, .admin-page .danger-btn):focus-visible {
    border-color: rgba(255, 115, 132, .72) !important;
    background:
        linear-gradient(90deg, rgba(255, 94, 115, .3), transparent 42%),
        rgba(22, 9, 13, .96) !important;
    box-shadow: inset 3px 0 0 rgba(255, 94, 115, .8), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

body:not(.studio-app-body) :where(.launch-cta, .compact-action-btn, .button-link, .edit-profile-btn, .profile-studio-link) {
    min-height: 38px;
    padding: 9px 13px;
    font-size: .84rem;
    font-weight: 850;
}

body:not(.studio-app-body) :where(.home-hero-actions .launch-cta, .hero-inline-actions .launch-cta) {
    border-radius: 10px;
}

body:not(.studio-app-body) :where(.ptx-daw-status-badge, .mobile-nav-wip) {
    border-color: rgba(185, 160, 92, .45);
    background: rgba(185, 160, 92, .1);
    color: #e7cf8b;
    box-shadow: none;
}

/* Declutter pass: keep secondary actions present without making every link read as a CTA. */
.inline-action-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
}

body:not(.studio-app-body) :where(.text-action-link, button.text-action-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--control-muted, #aeb8c4);
    background: transparent;
    box-shadow: none;
    filter: none;
    font: inherit;
    font-size: .84rem;
    font-weight: 760;
    line-height: 1.35;
    letter-spacing: 0;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
}

body:not(.studio-app-body) :where(.text-action-link, button.text-action-link):hover,
body:not(.studio-app-body) :where(.text-action-link, button.text-action-link):focus-visible {
    border: 0;
    color: #f8fcff;
    background: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: rgba(83, 214, 230, .56);
    text-underline-offset: 4px;
    outline: none;
}

body:not(.studio-app-body) :where(.text-action-link, button.text-action-link):focus-visible {
    outline: 1px solid rgba(83, 214, 230, .45);
    outline-offset: 4px;
}

body:not(.studio-app-body) :where(.section-action-link, .hero-text-link, .launch-empty-link, .ptx-project-text-link) {
    white-space: normal;
}

.section-action-link {
    align-self: center;
    justify-self: end;
}

.home-hero-actions {
    align-items: center;
}

.home-hero-actions .inline-action-links {
    max-width: 100%;
}

.launch-empty-state .launch-empty-link {
    margin-top: 2px;
}

.ptx-project-actions {
    gap: 8px 12px;
}

.ptx-project-actions .ptx-project-text-link {
    align-self: center;
}

.ptx-project-badges,
.creator-status-badges,
.creator-vibe-chips,
.mini-tags {
    gap: 5px;
}

.ptx-project-badge,
.creator-status-badges span,
.profile-role-pill,
.genre-tag,
.creator-vibe-chips span,
.mini-tags span {
    box-shadow: none;
}

.profile-inline-action {
    margin-left: 12px;
    vertical-align: middle;
}

.pulse-story-tabs button {
    min-height: 30px;
    padding: 6px 9px;
    font-size: .74rem;
}

@media (max-width: 760px) {
    .inline-action-links {
        width: 100%;
        gap: 9px 12px;
    }

    .home-hero-actions {
        gap: 12px;
    }

    .home-hero-actions .launch-cta-primary {
        width: 100%;
    }

    .section-action-link {
        justify-self: start;
    }

    .creator-highlights-head {
        gap: 10px;
    }

    .profile-inline-action {
        display: inline-flex;
        margin: 10px 0 0;
    }

    .ptx-project-actions {
        align-items: flex-start;
    }

    .ptx-project-actions .compact-action-btn,
    .ptx-project-actions .compact-action-link {
        width: 100%;
    }

    .pulse-story-tabs {
        gap: 6px;
    }
}

/* Live push prompt: persistent dismiss + compact mobile row. */
.push-permission-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    width: min(390px, calc(100vw - 32px));
    min-height: 0;
    padding: 10px 34px 10px 10px;
}

.push-permission-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(83, 214, 230, .34);
    border-radius: 999px;
    color: #d9fbff;
    background: rgba(83, 214, 230, .1);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
}

.push-permission-close {
    position: absolute;
    top: 6px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
}

.push-permission-copy {
    gap: 1px;
}

.push-permission-copy strong {
    font-size: .76rem;
    line-height: 1.05;
}

.push-permission-copy span,
.push-permission-copy small {
    font-size: .72rem;
    line-height: 1.18;
}

.push-permission-actions {
    flex-wrap: nowrap;
    gap: 5px;
}

.push-permission-actions button {
    min-height: 28px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .68rem;
    white-space: nowrap;
}

@media (max-width: 760px) {
    body:not(.studio-app-body) {
        padding-bottom: calc(var(--mobile-nav-space) + 18px);
    }

    .push-permission-card {
        position: relative;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
        width: auto;
        max-width: none;
        max-height: none;
        margin: 6px 8px calc(var(--mobile-nav-space) + 8px);
        padding: 7px 30px 7px 7px;
        border-radius: 11px;
        overflow: visible;
    }

    .push-permission-icon {
        width: 22px;
        height: 22px;
        font-size: .7rem;
    }

    .push-permission-close {
        top: 4px;
        right: 5px;
        width: 20px;
        height: 20px;
        min-height: 20px;
        font-size: .92rem;
    }

    .push-permission-copy strong {
        font-size: .66rem;
        letter-spacing: .035em;
    }

    .push-permission-copy span {
        display: -webkit-box;
        max-width: 100%;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: .66rem;
        line-height: 1.12;
    }

    .push-permission-copy small {
        display: none;
    }

    .push-permission-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        min-width: 0;
        justify-content: flex-end;
    }

    .push-permission-actions button {
        min-height: 24px;
        padding: 4px 6px;
        border-radius: 7px;
        font-size: .6rem;
        line-height: 1;
    }
}

@media (max-width: 390px) {
    .push-permission-card {
        grid-template-columns: 20px minmax(0, 1fr) auto;
        gap: 5px;
    }

    .push-permission-actions {
        display: flex;
        flex-wrap: nowrap;
    }

    .push-permission-actions button {
        min-width: 48px;
        padding-inline: 5px;
    }
}

/* Shared platform cleanup: professional dark glass system, DAW excluded. */
body:not(.studio-app-body) {
    --platform-bg: #05090f;
    --platform-panel: rgba(12, 17, 25, .88);
    --platform-panel-strong: rgba(15, 22, 32, .96);
    --platform-line: rgba(137, 153, 174, .16);
    --platform-line-strong: rgba(83, 214, 230, .34);
    --platform-cyan: #53d6e6;
    --platform-purple: #7661b7;
    --platform-text: #eef4f8;
    --platform-muted: #a7b2bf;
    background:
        radial-gradient(circle at 18% -14%, rgba(83, 214, 230, .08), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(118, 97, 183, .055), transparent 28%),
        linear-gradient(180deg, #07101a 0%, #05090f 58%, #03060a 100%);
}

body[id="top"]:not(.studio-app-body) :where(
    .post-card,
    .feed-post-card,
    .create-post,
    .profile-card,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-stat-card,
    .collab-card,
    .creator-presence-card,
    .ptx-project-card,
    .community-live-strip,
    .launch-command-card,
    .home-live-deck,
    .messages-layout,
    .notification-item,
    .conversation-link,
    .event-card,
    .neon-card,
    .public-login-callout
) {
    border-color: var(--platform-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
        var(--platform-panel);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    filter: none;
}

body[id="top"]:not(.studio-app-body) :where(
    .post-card,
    .feed-post-card,
    .profile-card,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-stat-card,
    .collab-card,
    .creator-presence-card,
    .ptx-project-card,
    .event-card,
    .notification-item
):hover {
    border-color: rgba(83, 214, 230, .24);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

body:not(.studio-app-body) :where(
    button,
    .button-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .feed-tabs-card .menu-link,
    .ptx-project-open,
    .notifications-header button,
    .notification-actions button,
    .public-login-actions a,
    .admin-filter-bar button
) {
    border-color: rgba(137, 153, 174, .22);
    color: var(--platform-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
        rgba(9, 13, 19, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 5px 14px rgba(0, 0, 0, .22);
    text-shadow: none;
    filter: none;
}

body:not(.studio-app-body) :where(
    button,
    .button-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .feed-tabs-card .menu-link,
    .ptx-project-open,
    .notifications-header button,
    .notification-actions button,
    .public-login-actions a,
    .admin-filter-bar button
):hover,
body:not(.studio-app-body) :where(
    button,
    .button-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .feed-tabs-card .menu-link,
    .ptx-project-open,
    .notifications-header button,
    .notification-actions button,
    .public-login-actions a,
    .admin-filter-bar button
):focus-visible {
    border-color: var(--platform-line-strong);
    color: #f7fcff;
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .075), rgba(255, 255, 255, .012)),
        rgba(12, 18, 26, .94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 7px 18px rgba(0, 0, 0, .26);
}

body:not(.studio-app-body) :where(
    .launch-cta-primary,
    .launch-cta-studio,
    .home-hero-actions .launch-cta-primary,
    .home-hero-actions .launch-cta-studio,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .edit-profile-actions button,
    .profile-studio-link,
    .branding-upload-btn,
    .message-form-row button,
    .comment-form button[type="submit"],
    .public-login-actions .edit-profile-btn:not(.secondary),
    .admin-filter-bar button
) {
    border-color: rgba(83, 214, 230, .4);
    color: #f5fbff;
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .11), rgba(255, 255, 255, .012)),
        rgba(11, 16, 23, .94);
    box-shadow: inset 3px 0 0 rgba(83, 214, 230, .52), inset 0 1px 0 rgba(255, 255, 255, .055), 0 6px 16px rgba(0, 0, 0, .24);
}

body:not(.studio-app-body) :where(
    .launch-cta-primary,
    .launch-cta-studio,
    .home-hero-actions .launch-cta-primary,
    .home-hero-actions .launch-cta-studio,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .edit-profile-actions button,
    .profile-studio-link,
    .branding-upload-btn,
    .message-form-row button,
    .comment-form button[type="submit"],
    .public-login-actions .edit-profile-btn:not(.secondary),
    .admin-filter-bar button
):hover,
body:not(.studio-app-body) :where(
    .launch-cta-primary,
    .launch-cta-studio,
    .home-hero-actions .launch-cta-primary,
    .home-hero-actions .launch-cta-studio,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .edit-profile-actions button,
    .profile-studio-link,
    .branding-upload-btn,
    .message-form-row button,
    .comment-form button[type="submit"],
    .public-login-actions .edit-profile-btn:not(.secondary),
    .admin-filter-bar button
):focus-visible {
    border-color: rgba(83, 214, 230, .62);
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .15), rgba(255, 255, 255, .014)),
        rgba(13, 20, 29, .98);
    box-shadow: inset 3px 0 0 rgba(83, 214, 230, .68), inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px rgba(0, 0, 0, .28);
}

body:not(.studio-app-body) :where(
    .launch-cta-secondary,
    .compact-action-btn-muted,
    .edit-profile-btn.secondary,
    .profile-launch-actions a:not(:first-child),
    .feed-tabs-card .menu-link,
    .video-style-chip,
    .forum-tab,
    .share-btn,
    .confirm-cancel,
    .notification-actions .button-link,
    .public-login-actions .secondary
) {
    border-color: rgba(137, 153, 174, .18);
    color: var(--platform-muted);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .006)),
        rgba(7, 11, 17, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body:not(.studio-app-body) :where(
    .notif-badge,
    .mobile-nav-badge,
    .ptx-project-badge,
    .profile-role-pill,
    .reputation-badge,
    .status-badge,
    .creator-status-badges span,
    .creator-vibe-chips span,
    .genre-tag,
    .mini-tags span,
    .pinned-post-badge
) {
    border-color: rgba(83, 214, 230, .22);
    color: #cfeef4;
    background: rgba(83, 214, 230, .075);
    box-shadow: none;
    text-shadow: none;
}

body:not(.studio-app-body) :where(.message-bubble.mine, .message-bubble.theirs) {
    border-color: rgba(137, 153, 174, .18);
    box-shadow: none;
}

body:not(.studio-app-body) .message-bubble.mine {
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .11), rgba(255, 255, 255, .012)),
        rgba(12, 18, 26, .92);
}

body:not(.studio-app-body) .message-bubble.theirs {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .008)),
        rgba(9, 13, 19, .9);
}

body:not(.studio-app-body) :where(input, textarea, select, .form-control) {
    border-color: rgba(137, 153, 174, .2);
    background: rgba(5, 9, 15, .72);
    color: var(--platform-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body:not(.studio-app-body) :where(input, textarea, select, .form-control):focus {
    border-color: rgba(83, 214, 230, .48);
    box-shadow: 0 0 0 2px rgba(83, 214, 230, .1);
    outline: none;
}

body:not(.studio-app-body) :where(.home-hero-card, .profile-hero, .artist-hero, .event-cover-image) {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
    filter: none;
}

body:not(.studio-app-body) :where(.neon-card, .premium-widget, .home-live-deck) {
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .04), rgba(255, 255, 255, .012)),
        var(--platform-panel);
}

/* PULSATRAX identity rebuild: unified professional music-platform system. */
body#top:not(.studio-app-body),
body#top.home-page:not(.studio-app-body),
body#top:not(.home-page):not(.studio-app-body) {
    color: #eef4f8;
    background-color: #05090f;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 12px),
        radial-gradient(circle at 20% -10%, rgba(83, 214, 230, .1), transparent 32%),
        radial-gradient(circle at 92% 0%, rgba(118, 97, 183, .055), transparent 30%),
        linear-gradient(180deg, #07111b 0%, #05090f 54%, #03060a 100%);
    background-size: 12px 12px, auto, auto, auto;
    background-attachment: fixed;
}

body#top:not(.studio-app-body)::before,
body#top.home-page:not(.studio-app-body)::before {
    opacity: .22;
    filter: grayscale(.35);
}

body#top:not(.studio-app-body) :where(.hero-card, .legal-hero, .launch-discovery-hero) {
    border: 1px solid rgba(137, 153, 174, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
        rgba(11, 16, 23, .9);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
}

body#top:not(.studio-app-body) :where(
    .post-card,
    .feed-post-card,
    .profile-card,
    .create-post,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-card,
    .discovery-stat-card,
    .collab-card,
    .event-card,
    .messages-layout,
    .notification-item,
    .conversation-link,
    .ptx-project-card,
    .creator-presence-card,
    .community-live-strip,
    .home-live-deck,
    .launch-command-card,
    .public-login-callout,
    .collab-request-card,
    .event-inline
) {
    border: 1px solid rgba(137, 153, 174, .15);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .01)),
        rgba(10, 15, 22, .88);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
}

body#top:not(.studio-app-body) :where(
    .post-card,
    .feed-post-card,
    .profile-card,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-card,
    .discovery-stat-card,
    .collab-card,
    .event-card,
    .notification-item,
    .ptx-project-card
):hover {
    border-color: rgba(83, 214, 230, .22);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    transform: none;
}

body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button
) {
    border-color: rgba(137, 153, 174, .2);
    color: #f4f8fb;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .008)),
        rgba(8, 12, 18, .82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 4px 12px rgba(0, 0, 0, .2);
    filter: none;
    text-shadow: none;
}

body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button
):hover,
body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button
):focus-visible {
    border-color: rgba(83, 214, 230, .4);
    color: #fff;
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .07), rgba(255, 255, 255, .01)),
        rgba(11, 17, 25, .94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 7px 18px rgba(0, 0, 0, .25);
}

body#top:not(.studio-app-body) :where(
    .launch-cta-primary,
    .home-hero-actions .launch-cta-primary,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .profile-studio-link,
    .branding-upload-btn,
    .message-form-row button,
    .comment-form button[type="submit"],
    .public-login-actions .edit-profile-btn:not(.secondary),
    .admin-filter-bar button
) {
    border-color: rgba(83, 214, 230, .38);
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .105), rgba(255, 255, 255, .01)),
        rgba(10, 16, 24, .94);
    box-shadow: inset 3px 0 0 rgba(83, 214, 230, .52), inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 16px rgba(0, 0, 0, .22);
}

body#top:not(.studio-app-body) :where(
    .launch-cta-secondary,
    .launch-cta-studio,
    .compact-action-btn-muted,
    .edit-profile-btn.secondary,
    .profile-launch-actions a:not(:first-child),
    .share-btn,
    .confirm-cancel,
    .notification-actions .button-link,
    .public-login-actions .secondary,
    .discovery-actions .menu-link,
    .collab-actions-menu summary
) {
    border-color: rgba(137, 153, 174, .16);
    color: #aab5c2;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .024), rgba(255, 255, 255, .005)),
        rgba(6, 10, 15, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .032);
}

body#top:not(.studio-app-body) :where(
    .menu-link.active,
    .feed-tabs-card .menu-link.active,
    .forum-tab.active,
    .video-style-chip.active
) {
    border-color: rgba(83, 214, 230, .42);
    color: #f6fcff;
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .1), rgba(255, 255, 255, .01)),
        rgba(10, 16, 24, .9);
    box-shadow: inset 3px 0 0 rgba(83, 214, 230, .58);
}

body#top:not(.studio-app-body) :where(
    .reputation-badge,
    .profile-type-pill,
    .profile-role-pill,
    .genre-tag,
    .video-style-pill,
    .status-badge,
    .discovery-state-pill,
    .ptx-project-badge,
    .creator-status-badges span,
    .creator-vibe-chips span,
    .mini-tags span,
    .notif-badge,
    .mobile-nav-badge,
    .mobile-more-badge,
    .pinned-post-badge,
    .pulse-score-badge
) {
    border-color: rgba(137, 153, 174, .18);
    color: #c6d1dc;
    background: rgba(255, 255, 255, .045);
    box-shadow: none;
    text-shadow: none;
}

body#top:not(.studio-app-body) :where(.profile-type-pill, .menu-link.active, .notif-badge) {
    border-color: rgba(83, 214, 230, .28);
    color: #d9f8ff;
    background: rgba(83, 214, 230, .075);
}

body#top:not(.studio-app-body) .reputation-badge-row .reputation-badge:nth-child(n+3),
body#top:not(.studio-app-body) .creator-status-badges span:nth-child(n+3),
body#top:not(.studio-app-body) .profile-role-wrap .profile-role-pill:nth-of-type(n+4),
body#top:not(.studio-app-body) .genre-tags .genre-tag:nth-of-type(n+7),
body#top:not(.studio-app-body) .mini-tags span:nth-child(n+5) {
    display: none;
}

body#top:not(.studio-app-body) .profile-card {
    padding-bottom: 28px;
}

body#top:not(.studio-app-body) .profile-main {
    gap: 22px;
    padding: 0 24px 22px;
}

body#top:not(.studio-app-body) .profile-main-content {
    display: grid;
    gap: 10px;
}

body#top:not(.studio-app-body) .creator-identity-row,
body#top:not(.studio-app-body) .profile-role-wrap,
body#top:not(.studio-app-body) .genre-tags,
body#top:not(.studio-app-body) .discovery-actions,
body#top:not(.studio-app-body) .compact-action-group {
    gap: 8px;
}

body#top:not(.studio-app-body) .profile-status-pill {
    max-width: 760px;
    border-color: rgba(83, 214, 230, .2);
    background: rgba(83, 214, 230, .055);
}

body#top:not(.studio-app-body) .profile-cover-wrap {
    border-color: rgba(137, 153, 174, .16) !important;
    background: #070d14;
    overflow: hidden;
}

body#top:not(.studio-app-body) .profile-cover,
body#top:not(.studio-app-body) .ptx-cover-theme {
    width: 100%;
    min-height: 220px;
    border-radius: inherit;
    object-fit: cover;
    filter: saturate(.82) contrast(1.04) brightness(.82);
}

body#top:not(.studio-app-body) .ptx-cover-theme {
    position: relative;
    display: grid;
    place-items: end start;
    padding: 18px;
    color: rgba(239, 248, 252, .72);
    isolation: isolate;
}

body#top:not(.studio-app-body) .ptx-cover-theme::before,
body#top:not(.studio-app-body) .ptx-cover-theme::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

body#top:not(.studio-app-body) .ptx-cover-theme::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .52;
}

body#top:not(.studio-app-body) .ptx-cover-theme::after {
    background: linear-gradient(180deg, transparent 42%, rgba(3, 6, 10, .62));
}

body#top:not(.studio-app-body) .ptx-cover-theme span {
    border: 1px solid rgba(137, 153, 174, .2);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(3, 7, 11, .54);
    color: rgba(239, 248, 252, .82);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body#top:not(.studio-app-body) .ptx-cover-dj-booth {
    background:
        radial-gradient(circle at 28% 54%, rgba(83, 214, 230, .22), transparent 8%),
        radial-gradient(circle at 66% 56%, rgba(83, 214, 230, .16), transparent 9%),
        linear-gradient(120deg, #080d12, #111821 48%, #05080d);
}

body#top:not(.studio-app-body) .ptx-cover-mixing-desk {
    background:
        repeating-linear-gradient(90deg, rgba(83, 214, 230, .18) 0 2px, transparent 2px 24px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 18px),
        linear-gradient(135deg, #070c12, #131b24);
}

body#top:not(.studio-app-body) .ptx-cover-studio-equipment {
    background:
        radial-gradient(circle at 18% 38%, rgba(255, 255, 255, .14), transparent 10%),
        radial-gradient(circle at 58% 48%, rgba(83, 214, 230, .14), transparent 12%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 54px),
        linear-gradient(135deg, #070b10, #141b23);
}

body#top:not(.studio-app-body) .ptx-cover-neon-city {
    background:
        linear-gradient(90deg, transparent 0 11%, rgba(83, 214, 230, .2) 11% 12%, transparent 12% 28%, rgba(118, 97, 183, .18) 28% 29%, transparent 29%),
        linear-gradient(180deg, #07101a, #101826 54%, #05070b);
}

body#top:not(.studio-app-body) .ptx-cover-underground-club {
    background:
        radial-gradient(circle at 46% 0%, rgba(83, 214, 230, .2), transparent 18%),
        linear-gradient(110deg, rgba(118, 97, 183, .12), transparent 34%),
        linear-gradient(180deg, #0a0d11, #121822 58%, #030507);
}

body#top:not(.studio-app-body) .ptx-cover-vinyl-collection {
    background:
        repeating-radial-gradient(circle at 26% 56%, rgba(255, 255, 255, .08) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 32px),
        linear-gradient(135deg, #060a0f, #15191d);
}

body#top:not(.studio-app-body) .ptx-cover-festival-stage {
    background:
        linear-gradient(20deg, transparent 0 42%, rgba(83, 214, 230, .18) 42% 44%, transparent 44%),
        linear-gradient(160deg, transparent 0 38%, rgba(255, 255, 255, .12) 38% 40%, transparent 40%),
        linear-gradient(180deg, #07111b, #101722 62%, #030507);
}

body#top:not(.studio-app-body) .ptx-cover-audio-waveforms {
    background:
        repeating-linear-gradient(90deg, rgba(83, 214, 230, .26) 0 3px, transparent 3px 15px),
        linear-gradient(180deg, #07101a 0%, #101722 50%, #05090f 100%);
}

body#top:not(.studio-app-body) .ptx-cover-modular-synths {
    background:
        radial-gradient(circle at 18% 40%, rgba(83, 214, 230, .18), transparent 5%),
        radial-gradient(circle at 42% 58%, rgba(255, 255, 255, .11), transparent 5%),
        radial-gradient(circle at 72% 38%, rgba(118, 97, 183, .16), transparent 6%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 68px),
        linear-gradient(135deg, #070b10, #121b25);
}

body#top:not(.studio-app-body) .ptx-cover-ptx-abstract {
    background:
        linear-gradient(120deg, transparent 0 36%, rgba(83, 214, 230, .18) 36% 37%, transparent 37%),
        linear-gradient(30deg, transparent 0 58%, rgba(118, 97, 183, .12) 58% 59%, transparent 59%),
        linear-gradient(135deg, #060b11, #111923 52%, #04070c);
}

body#top:not(.studio-app-body) .message-bubble.mine,
body#top:not(.studio-app-body) .message-bubble.theirs {
    border-color: rgba(137, 153, 174, .16);
    box-shadow: none;
}

body#top:not(.studio-app-body) .message-bubble.mine {
    background:
        linear-gradient(180deg, rgba(83, 214, 230, .09), rgba(255, 255, 255, .01)),
        rgba(10, 16, 24, .92);
}

body#top:not(.studio-app-body) .message-bubble.theirs {
    background: rgba(8, 12, 18, .86);
}

@media (max-width: 760px) {
    body#top:not(.studio-app-body) .profile-main {
        padding: 0 16px 18px;
    }

    body#top:not(.studio-app-body) .profile-cover,
    body#top:not(.studio-app-body) .ptx-cover-theme {
        min-height: 170px;
    }
}

/* PULSATRAX color system rebuild: graphite/cyan platform palette, DAW excluded. */
body#top:not(.studio-app-body),
body#top.home-page:not(.studio-app-body),
body#top:not(.home-page):not(.studio-app-body) {
    --control-bg: rgba(8, 12, 18, .88);
    --control-bg-hover: rgba(11, 17, 24, .96);
    --control-bg-active: rgba(13, 21, 30, .98);
    --control-border: rgba(132, 148, 169, .2);
    --control-border-hover: rgba(49, 215, 242, .44);
    --control-text: #f4f7fa;
    --control-muted: #a7b1bd;
    --control-cyan: #31d7f2;
    --control-purple: #4b3f65;
    --platform-bg: #04070b;
    --platform-panel: rgba(10, 15, 22, .9);
    --platform-panel-strong: rgba(13, 19, 28, .96);
    --platform-line: rgba(132, 148, 169, .15);
    --platform-line-strong: rgba(49, 215, 242, .32);
    --platform-cyan: #31d7f2;
    --platform-blue: #2f8cff;
    --platform-purple: #4b3f65;
    --platform-amber: #f2c14e;
    --platform-green: #b6f36b;
    --platform-text: #f3f7fa;
    --platform-muted: #a7b1bd;
    --app-panel-bg: rgba(10, 15, 22, .9);
    --app-panel-bg-soft: rgba(12, 18, 26, .72);
    --app-border: rgba(132, 148, 169, .16);
    --app-border-strong: rgba(49, 215, 242, .34);
    --app-cyan: #31d7f2;
    --app-magenta: #4b3f65;
    --app-purple: #4b3f65;
    --home-line: rgba(132, 148, 169, .17);
    --home-purple: #4b3f65;
    --home-magenta: #4b3f65;
    --home-cyan: #31d7f2;
    color: var(--platform-text);
    background-color: var(--platform-bg);
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 18% -12%, rgba(49, 215, 242, .075), transparent 30%),
        radial-gradient(circle at 92% 0%, rgba(47, 140, 255, .035), transparent 28%),
        linear-gradient(180deg, #07101a 0%, #04070b 58%, #020408 100%);
    background-size: 14px 14px, auto, auto, auto;
    background-attachment: fixed;
}

body#top:not(.studio-app-body)::before,
body#top.home-page:not(.studio-app-body)::before,
body#top:not(.home-page):not(.studio-app-body)::before {
    opacity: .16;
    filter: grayscale(.72) saturate(.7);
}

body#top:not(.studio-app-body) :where(
    .sidebar,
    .rightbar,
    .hero-card,
    .legal-hero,
    .launch-discovery-hero,
    .post-card,
    .feed-post-card,
    .profile-card,
    .create-post,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-card,
    .discovery-stat-card,
    .collab-card,
    .event-card,
    .messages-layout,
    .notification-item,
    .conversation-link,
    .ptx-project-card,
    .creator-presence-card,
    .community-live-strip,
    .home-live-deck,
    .launch-command-card,
    .launch-trust-strip,
    .public-login-callout,
    .collab-request-card,
    .event-inline,
    .profile-intro-card,
    .music-player-card,
    .profile-media-hub,
    .profile-media-player-card,
    .shared-video-card,
    .profile-picture-card
),
body#top.home-page:not(.studio-app-body) :where(
    .sidebar,
    .rightbar,
    .hero-card,
    .post-card,
    .create-post,
    .widget,
    .premium-widget,
    .launch-command-card,
    .community-live-strip,
    .launch-trust-strip,
    .home-live-deck
) {
    border-color: var(--platform-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)),
        var(--platform-panel);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

body#top:not(.studio-app-body) :where(
    .post-card,
    .feed-post-card,
    .profile-card,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-card,
    .discovery-stat-card,
    .collab-card,
    .event-card,
    .notification-item,
    .ptx-project-card,
    .conversation-link
):hover {
    border-color: rgba(49, 215, 242, .22);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
    transform: none;
}

body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .sidebar-more-link,
    .sidebar-legal-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button,
    .notification-actions button,
    .notification-actions .button-link
) {
    border-color: var(--control-border);
    color: var(--control-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .006)),
        var(--control-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 12px rgba(0, 0, 0, .2);
    filter: none;
    text-shadow: none;
}

body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .sidebar-more-link,
    .sidebar-legal-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button,
    .notification-actions button,
    .notification-actions .button-link
):hover,
body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .sidebar-more-link,
    .sidebar-legal-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button,
    .notification-actions button,
    .notification-actions .button-link
):focus-visible {
    border-color: var(--control-border-hover);
    color: #fff;
    background:
        linear-gradient(180deg, rgba(49, 215, 242, .065), rgba(255, 255, 255, .008)),
        var(--control-bg-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 7px 18px rgba(0, 0, 0, .24);
}

body#top:not(.studio-app-body) :where(
    .menu-link.active,
    .sidebar-more-link.active,
    .feed-tabs-card .menu-link.active,
    .forum-tab.active,
    .video-style-chip.active,
    .launch-cta-primary,
    .home-hero-actions .launch-cta-primary,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .profile-studio-link,
    .branding-upload-btn,
    .message-form-row button,
    .comment-form button[type="submit"],
    .public-login-actions .edit-profile-btn:not(.secondary),
    .admin-filter-bar button
) {
    border-color: rgba(49, 215, 242, .38);
    color: #f7fcff;
    background:
        linear-gradient(180deg, rgba(49, 215, 242, .09), rgba(255, 255, 255, .008)),
        rgba(10, 16, 24, .94);
    box-shadow: inset 3px 0 0 rgba(49, 215, 242, .56), inset 0 1px 0 rgba(255, 255, 255, .045), 0 6px 16px rgba(0, 0, 0, .22);
}

body#top:not(.studio-app-body) :where(
    .launch-cta-secondary,
    .launch-cta-studio,
    .compact-action-btn-muted,
    .edit-profile-btn.secondary,
    .profile-launch-actions a:not(:first-child),
    .share-btn,
    .confirm-cancel,
    .public-login-actions .secondary,
    .discovery-actions .menu-link,
    .collab-actions-menu summary
) {
    border-color: rgba(132, 148, 169, .16);
    color: var(--platform-muted);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .024), rgba(255, 255, 255, .005)),
        rgba(6, 10, 15, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body#top:not(.studio-app-body) :where(
    .hero-card,
    .legal-hero,
    .launch-discovery-hero,
    .home-hero-card.live-experience-hero
) {
    border-color: var(--platform-line);
    background-color: #070d14;
    background-image:
        linear-gradient(90deg, rgba(3, 7, 11, .86), rgba(5, 10, 16, .5) 58%, rgba(3, 7, 11, .64)),
        radial-gradient(circle at 74% 22%, rgba(49, 215, 242, .12), transparent 28%),
        var(--hero-image),
        var(--site-bg-image);
    box-shadow: 0 24px 62px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .055);
}

body#top:not(.studio-app-body) .hero-card::before,
body#top:not(.studio-app-body) .legal-hero::before,
body#top:not(.studio-app-body) .launch-discovery-hero::before,
body#top.home-page:not(.studio-app-body) .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 7, 11, .72), rgba(5, 10, 16, .34) 58%, rgba(3, 7, 11, .58)),
        radial-gradient(circle at 76% 28%, rgba(49, 215, 242, .16), transparent 26%),
        var(--hero-image);
    filter: saturate(.8) contrast(1.04) brightness(.88);
}

body#top:not(.studio-app-body) :where(.home-hero-card h1, .hero-card h1, .legal-hero h1, .launch-discovery-hero h1, .profile-name) {
    color: #f8fbfd;
    text-shadow: 0 4px 28px rgba(0, 0, 0, .58);
}

body#top:not(.studio-app-body) :where(.legal-kicker, .admin-section-kicker, .widget-title-row span, .home-hero-kicker, .launch-command-card span) {
    color: #8edfed;
    text-shadow: none;
}

body#top:not(.studio-app-body) :where(
    .reputation-badge,
    .profile-type-pill,
    .profile-role-pill,
    .genre-tag,
    .video-style-pill,
    .status-badge,
    .discovery-state-pill,
    .ptx-project-badge,
    .creator-status-badges span,
    .creator-vibe-chips span,
    .mini-tags span,
    .hashtag-chip,
    .notif-badge,
    .mobile-nav-badge,
    .mobile-more-badge,
    .pinned-post-badge,
    .pulse-score-badge,
    .trend-movement,
    .trend-rank,
    .genre-rank,
    .forum-badge
) {
    border-color: rgba(132, 148, 169, .18);
    color: #c8d2dd;
    background: rgba(255, 255, 255, .042);
    box-shadow: none;
    text-shadow: none;
}

body#top:not(.studio-app-body) :where(.profile-type-pill, .menu-link.active, .notif-badge, .mobile-nav-badge) {
    border-color: rgba(49, 215, 242, .28);
    color: #d8f8ff;
    background: rgba(49, 215, 242, .07);
}

body#top:not(.studio-app-body) :where(.ptx-project-badge-starter, .status-badge-pending, .mobile-nav-wip, .ptx-daw-status-badge) {
    border-color: rgba(242, 193, 78, .34);
    color: #f4d27a;
    background: rgba(242, 193, 78, .08);
}

body#top:not(.studio-app-body) :where(.presence-chip.is-online, .reputation-badge-active) {
    border-color: rgba(182, 243, 107, .32);
    color: #d7f7a8;
    background: rgba(182, 243, 107, .075);
}

body#top:not(.studio-app-body) :where(
    .genre-signal-bar,
    .genre-widget .genre-signal-bar,
    .genre-chart-bar
) {
    background:
        linear-gradient(90deg, rgba(49, 215, 242, .94), rgba(47, 140, 255, .78)) 0 0 / var(--genre-chart, var(--genre-signal, 100%)) 100% no-repeat,
        rgba(255, 255, 255, .065);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

body#top:not(.studio-app-body) .genre-trend-item:hover .genre-signal-bar {
    background-image:
        linear-gradient(90deg, rgba(49, 215, 242, .96), rgba(47, 140, 255, .82)),
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, .13) 8px 10px);
}

body#top:not(.studio-app-body) :where(.profile-complete-meter) {
    border-color: rgba(49, 215, 242, .24);
    background: rgba(49, 215, 242, .055);
    box-shadow: none;
}

body#top:not(.studio-app-body) .profile-meter-bar span,
body#top:not(.studio-app-body) .pulse-story-progress span.active,
body#top:not(.studio-app-body) .intro-progress::-webkit-slider-thumb,
body#top:not(.studio-app-body) .intro-progress::-moz-range-thumb {
    background: linear-gradient(90deg, #31d7f2, #2f8cff);
    border-color: rgba(49, 215, 242, .65);
    box-shadow: 0 0 10px rgba(49, 215, 242, .24);
}

body#top:not(.studio-app-body) :where(.chart-score strong, .genre-chart-score, .trend-movement) {
    color: #7ee7f6;
    text-shadow: none;
}

body#top:not(.studio-app-body) :where(input, textarea, select, .form-control) {
    border-color: rgba(132, 148, 169, .2);
    background: rgba(5, 9, 15, .76);
    color: var(--platform-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body#top:not(.studio-app-body) :where(input, textarea, select, .form-control):focus {
    border-color: rgba(49, 215, 242, .42);
    box-shadow: 0 0 0 2px rgba(49, 215, 242, .09);
    outline: none;
}

body#top:not(.studio-app-body) :where(.profile-cover-wrap, .event-cover-image, .event-card-thumb, .shared-video-thumb, .youtube-embed, .profile-player-embed) {
    border-color: rgba(132, 148, 169, .17) !important;
    box-shadow: none;
}

body#top:not(.studio-app-body) :where(.profile-avatar, .avatar, .comment-avatar, .conversation-avatar) {
    border-color: rgba(49, 215, 242, .26);
    box-shadow: 0 0 0 3px rgba(4, 7, 11, .72);
}

body#top:not(.studio-app-body) .profile-player-ambient,
body#top:not(.studio-app-body) .profile-media-player-card::before,
body#top:not(.studio-app-body) .hero-live-ambient,
body#top:not(.studio-app-body) .hero-particle {
    opacity: .18;
    filter: grayscale(.65) saturate(.7) blur(16px);
}

body#top:not(.studio-app-body) .ptx-cover-neon-city {
    background:
        linear-gradient(90deg, transparent 0 11%, rgba(49, 215, 242, .18) 11% 12%, transparent 12% 28%, rgba(47, 140, 255, .12) 28% 29%, transparent 29%),
        linear-gradient(180deg, #07101a, #101826 54%, #05070b);
}

body#top:not(.studio-app-body) .ptx-cover-underground-club,
body#top:not(.studio-app-body) .ptx-cover-modular-synths,
body#top:not(.studio-app-body) .ptx-cover-ptx-abstract {
    filter: saturate(.78) contrast(1.04) brightness(.82);
}

@media (max-width: 760px) {
    body#top:not(.studio-app-body),
    body#top.home-page:not(.studio-app-body),
    body#top:not(.home-page):not(.studio-app-body),
    body#top[style*="--site-bg-image"]:not(.studio-app-body) {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 14px),
            radial-gradient(circle at 44% -8%, rgba(49, 215, 242, .075), transparent 34%),
            linear-gradient(180deg, rgba(7, 16, 26, .92) 0%, rgba(4, 7, 11, .97) 72%),
            var(--site-bg-image);
        background-size: 14px 14px, auto, auto, cover;
        background-position: center, center, center, var(--site-bg-position-x) var(--site-bg-position-y);
        background-attachment: scroll;
    }
}

/* PULSATRAX hard color reset: remove visible purple dominance from platform UI. */
body#top:not(.studio-app-body),
body#top.home-page:not(.studio-app-body),
body#top:not(.home-page):not(.studio-app-body) {
    --ptx-black: #020408;
    --ptx-charcoal: #070b10;
    --ptx-graphite: #0b1118;
    --ptx-graphite-2: #101821;
    --ptx-slate: rgba(134, 150, 170, .18);
    --ptx-slate-strong: rgba(134, 150, 170, .28);
    --ptx-cyan: #25d5ef;
    --ptx-blue: #287dff;
    --ptx-amber: #f1bf4a;
    --ptx-green: #b8f36e;
    --ptx-text: #f5f8fb;
    --ptx-muted: #a9b3bf;
    background-color: var(--ptx-black) !important;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 16px),
        radial-gradient(circle at 18% -10%, rgba(37, 213, 239, .065), transparent 26%),
        linear-gradient(180deg, #07111a 0%, #03070b 62%, #010306 100%) !important;
    background-size: 16px 16px, auto, auto !important;
    color: var(--ptx-text) !important;
}

body#top:not(.studio-app-body)::before,
body#top.home-page:not(.studio-app-body)::before,
body#top:not(.home-page):not(.studio-app-body)::before,
body#top:not(.studio-app-body)::after,
body#top.home-page:not(.studio-app-body)::after,
body#top:not(.home-page):not(.studio-app-body)::after {
    opacity: .1 !important;
    filter: grayscale(1) saturate(.45) brightness(.72) !important;
}

body#top:not(.studio-app-body) :where(
    .sidebar,
    .rightbar,
    .hero-card,
    .legal-hero,
    .launch-discovery-hero,
    .post-card,
    .feed-post-card,
    .profile-card,
    .create-post,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-card,
    .discovery-stat-card,
    .collab-card,
    .event-card,
    .messages-layout,
    .notification-item,
    .conversation-link,
    .ptx-project-card,
    .creator-presence-card,
    .community-live-strip,
    .home-live-deck,
    .launch-command-card,
    .launch-trust-strip,
    .public-login-callout,
    .collab-request-card,
    .event-inline,
    .profile-intro-card,
    .music-player-card,
    .profile-media-hub,
    .profile-media-player-card,
    .shared-video-card,
    .profile-picture-card,
    .action-empty-state,
    .feed-empty-card,
    .launch-empty-state,
    .relationship-empty-state
),
body#top.home-page:not(.studio-app-body) :where(
    .sidebar,
    .rightbar,
    .hero-card,
    .post-card,
    .create-post,
    .widget,
    .premium-widget,
    .launch-command-card,
    .community-live-strip,
    .launch-trust-strip,
    .home-live-deck
) {
    border-color: var(--ptx-slate) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, .006)),
        rgba(8, 13, 19, .92) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34) !important;
    filter: none !important;
}

body#top:not(.studio-app-body) :where(
    .post-card,
    .feed-post-card,
    .profile-card,
    .widget,
    .premium-widget,
    .search-user-card,
    .discovery-card,
    .discovery-stat-card,
    .collab-card,
    .event-card,
    .notification-item,
    .ptx-project-card,
    .conversation-link
):hover {
    border-color: rgba(37, 213, 239, .24) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .38) !important;
    transform: none !important;
}

body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .sidebar-more-link,
    .sidebar-legal-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button,
    .notification-actions button,
    .notification-actions .button-link
) {
    border-color: var(--ptx-slate-strong) !important;
    color: var(--ptx-text) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .006)),
        rgba(5, 9, 14, .92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 3px 10px rgba(0, 0, 0, .22) !important;
    filter: none !important;
    text-shadow: none !important;
}

body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .sidebar-more-link,
    .sidebar-legal-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button,
    .notification-actions button,
    .notification-actions .button-link
):hover,
body#top:not(.studio-app-body) :where(
    button,
    .button-link,
    .menu-link,
    .sidebar-more-link,
    .sidebar-legal-link,
    .launch-cta,
    .compact-action-btn,
    .compact-action-link,
    .edit-profile-btn,
    .profile-studio-link,
    .profile-launch-actions a,
    .create-post-actions button,
    .comment-form button,
    .message-form-row button,
    .auth-form button,
    .follow-item button,
    .branding-upload-btn,
    .share-btn,
    .forum-tab,
    .video-style-chip,
    .discovery-view-btn,
    .ptx-project-open,
    .public-login-actions a,
    .admin-filter-bar button,
    .notification-actions button,
    .notification-actions .button-link
):focus-visible {
    border-color: rgba(37, 213, 239, .58) !important;
    background:
        linear-gradient(180deg, rgba(37, 213, 239, .07), rgba(255, 255, 255, .006)),
        rgba(8, 14, 21, .98) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 5px 15px rgba(0, 0, 0, .26) !important;
}

body#top:not(.studio-app-body) :where(
    .menu-link.active,
    .sidebar-more-link.active,
    .feed-tabs-card .menu-link.active,
    .forum-tab.active,
    .video-style-chip.active,
    .launch-cta-primary,
    .home-hero-actions .launch-cta-primary,
    .compact-action-btn:not(.compact-action-btn-muted),
    .create-post-actions button,
    .auth-form button,
    .button-link,
    .profile-studio-link,
    .branding-upload-btn,
    .message-form-row button,
    .comment-form button[type="submit"],
    .public-login-actions .edit-profile-btn:not(.secondary),
    .admin-filter-bar button
) {
    border-color: rgba(37, 213, 239, .56) !important;
    background:
        linear-gradient(180deg, rgba(37, 213, 239, .095), rgba(255, 255, 255, .006)),
        rgba(7, 13, 20, .96) !important;
    box-shadow: inset 3px 0 0 rgba(37, 213, 239, .72), inset 0 1px 0 rgba(255, 255, 255, .05), 0 5px 15px rgba(0, 0, 0, .24) !important;
}

body#top:not(.studio-app-body) :where(.hero-inline-actions, .home-hero-actions, .profile-launch-actions, .discovery-actions, .compact-action-group) :where(.launch-cta-primary, .compact-action-btn:not(.compact-action-btn-muted)):not(:first-child) {
    border-color: var(--ptx-slate-strong) !important;
    color: var(--ptx-muted) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, .005)),
        rgba(5, 9, 14, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 3px 10px rgba(0, 0, 0, .2) !important;
}

body#top:not(.studio-app-body) :where(
    .launch-cta-secondary,
    .launch-cta-studio,
    .compact-action-btn-muted,
    .edit-profile-btn.secondary,
    .profile-launch-actions a:not(:first-child),
    .share-btn,
    .confirm-cancel,
    .public-login-actions .secondary,
    .discovery-actions .menu-link,
    .collab-actions-menu summary
) {
    border-color: var(--ptx-slate) !important;
    color: var(--ptx-muted) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .004)),
        rgba(4, 8, 12, .74) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .026) !important;
}

body#top:not(.studio-app-body) :where(
    .hero-card,
    .legal-hero,
    .launch-discovery-hero,
    .home-hero-card.live-experience-hero
) {
    border-color: rgba(134, 150, 170, .16) !important;
    background-color: #05090e !important;
    background-image:
        linear-gradient(90deg, rgba(1, 4, 7, .94), rgba(3, 8, 13, .78) 56%, rgba(1, 4, 7, .9)),
        linear-gradient(180deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .72)),
        var(--hero-image),
        var(--site-bg-image) !important;
    box-shadow: 0 20px 58px rgba(0, 0, 0, .58) !important;
    filter: grayscale(.3) saturate(.55) contrast(1.06) brightness(.74) !important;
}

body#top:not(.studio-app-body) .hero-card::before,
body#top:not(.studio-app-body) .legal-hero::before,
body#top:not(.studio-app-body) .launch-discovery-hero::before,
body#top.home-page:not(.studio-app-body) .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgba(1, 4, 7, .88), rgba(3, 8, 13, .62) 58%, rgba(1, 4, 7, .86)),
        linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .64)),
        var(--hero-image) !important;
    filter: grayscale(.55) saturate(.42) contrast(1.08) brightness(.64) !important;
}

body#top.home-page:not(.studio-app-body) .home-hero-card.live-experience-hero::after,
body#top:not(.studio-app-body) :where(.hero-live-ambient, .hero-particle, .profile-player-ambient),
body#top:not(.studio-app-body) .profile-media-player-card::before {
    opacity: .08 !important;
    filter: grayscale(1) saturate(.25) blur(18px) !important;
}

body#top:not(.studio-app-body) :where(
    .reputation-badge,
    .profile-type-pill,
    .profile-role-pill,
    .genre-tag,
    .video-style-pill,
    .status-badge,
    .discovery-state-pill,
    .ptx-project-badge,
    .creator-status-badges span,
    .creator-vibe-chips span,
    .mini-tags span,
    .hashtag-chip,
    .notif-badge,
    .mobile-nav-badge,
    .mobile-more-badge,
    .pinned-post-badge,
    .pulse-score-badge,
    .trend-movement,
    .trend-rank,
    .genre-rank,
    .forum-badge,
    .profile-status-pill
) {
    border-color: rgba(134, 150, 170, .18) !important;
    color: #c7d1dc !important;
    background: rgba(255, 255, 255, .04) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body#top:not(.studio-app-body) :where(.profile-type-pill, .menu-link.active, .notif-badge, .mobile-nav-badge) {
    border-color: rgba(37, 213, 239, .32) !important;
    color: #d8f8ff !important;
    background: rgba(37, 213, 239, .07) !important;
}

body#top:not(.studio-app-body) :where(
    .genre-signal-bar,
    .genre-widget .genre-signal-bar,
    .genre-chart-bar,
    .profile-meter-bar span,
    .pulse-story-progress span.active
) {
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .96), rgba(40, 125, 255, .82)) 0 0 / var(--genre-chart, var(--genre-signal, 100%)) 100% no-repeat,
        rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
}

body#top:not(.studio-app-body) :where(.chart-score strong, .genre-chart-score, .trend-movement) {
    color: #72e7f7 !important;
    text-shadow: none !important;
}

body#top:not(.studio-app-body) :where(.profile-avatar, .avatar, .comment-avatar, .conversation-avatar, .profile-cover-wrap, .event-cover-image, .event-card-thumb, .shared-video-thumb, .youtube-embed, .profile-player-embed) {
    border-color: rgba(134, 150, 170, .18) !important;
    box-shadow: none !important;
}

body#top:not(.studio-app-body) :where(.ptx-cover-theme, .profile-cover) {
    filter: grayscale(.18) saturate(.62) contrast(1.06) brightness(.74) !important;
}

body#top:not(.studio-app-body) :where(.ptx-cover-neon-city, .ptx-cover-underground-club, .ptx-cover-modular-synths, .ptx-cover-ptx-abstract) {
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .12), transparent 34%),
        linear-gradient(180deg, #07101a, #0b121b 54%, #03070b) !important;
}

/* Admin visual tuning controls: saved site_settings values become CSS vars on body. */
body#top:not(.studio-app-body)::before,
body#top.home-page:not(.studio-app-body)::before,
body#top:not(.home-page):not(.studio-app-body)::before {
    opacity: var(--background-haze-opacity, .06) !important;
}

body#top:not(.studio-app-body) :where(
    .hero-card,
    .legal-hero,
    .launch-discovery-hero,
    .home-hero-card.live-experience-hero
) {
    filter: grayscale(.12) saturate(.76) contrast(1.04) brightness(.96) !important;
}

body#top:not(.studio-app-body) .hero-card::before,
body#top:not(.studio-app-body) .legal-hero::before,
body#top:not(.studio-app-body) .launch-discovery-hero::before,
body#top.home-page:not(.studio-app-body) .home-hero-card.live-experience-hero::before {
    background:
        linear-gradient(90deg, rgb(1 4 7 / var(--hero-overlay-opacity, .42)), rgb(3 8 13 / calc(var(--hero-overlay-opacity, .42) * .72)) 58%, rgb(1 4 7 / var(--hero-overlay-opacity, .42))),
        linear-gradient(180deg, rgb(0 0 0 / calc(var(--hero-overlay-opacity, .42) * .35)), rgb(0 0 0 / var(--hero-overlay-opacity, .42))),
        var(--hero-image) !important;
    background-position: center, center, var(--hero-position-x, 50%) var(--hero-position-y, 50%) !important;
    background-size: cover, cover, var(--site-hero-size, 100%) !important;
    filter: grayscale(.3) saturate(.62) contrast(1.05) brightness(.9) !important;
    backdrop-filter: blur(var(--site-hero-blur, 0));
}

body#top.home-page:not(.studio-app-body) .home-hero-card.live-experience-hero {
    min-height: var(--site-hero-desktop-height, 430px) !important;
    border-radius: var(--site-border-radius, 8px) !important;
}

body#top:not(.studio-app-body) :where(button, .button-link, .launch-cta, .compact-action-btn, .menu-link.active, .edit-profile-btn, .profile-studio-link) {
    border-radius: var(--site-border-radius, 8px) !important;
    border-color: color-mix(in srgb, var(--site-primary-accent, #25d5ef) 34%, rgba(134, 150, 170, .24)) !important;
}

body#top:not(.studio-app-body) :where(.launch-cta-primary, .compact-action-btn:not(.compact-action-btn-muted), .button-link) {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--site-primary-accent, #25d5ef) calc(var(--site-button-alpha, .06) * 100%), transparent), rgba(255, 255, 255, .006)),
        rgba(5, 9, 14, .92) !important;
    box-shadow: inset 3px 0 0 var(--site-primary-accent, #25d5ef), 0 8px 24px rgb(37 213 239 / var(--site-glow-alpha, .12)) !important;
}

body#top:not(.studio-app-body) :where(.hero-gradient-word, .home-hero-kicker, .hero-genre-label, .chart-score strong) {
    color: var(--site-primary-accent, #25d5ef) !important;
}

@media (max-width: 760px) {
    body#top.home-page:not(.studio-app-body) .home-hero-card.live-experience-hero {
        min-height: var(--site-hero-mobile-height, 520px) !important;
    }
}

body#top:not(.studio-app-body) .profile-cover-wrap {
    position: relative;
}

body#top:not(.studio-app-body) .profile-cover-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: rgb(0 0 0 / var(--profile-cover-overlay-opacity, .28));
    pointer-events: none;
}

body#top:not(.studio-app-body) .profile-cover-wrap .profile-cover,
body#top:not(.studio-app-body) .profile-cover-wrap .ptx-cover-theme {
    position: relative;
    z-index: 0;
}

.visual-tuning-form {
    display: grid;
    gap: 16px;
}

.visual-tuning-row {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(180px, 1fr) 56px;
    gap: 14px;
    align-items: center;
}

.visual-tuning-row span {
    color: #f5f8fb;
    font-weight: 800;
}

.visual-tuning-row output {
    justify-self: end;
    color: #8edfed;
    font-style: normal;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.visual-tuning-row input[type="range"] {
    width: 100%;
    accent-color: #25d5ef;
}

.visual-live-values {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(37, 213, 239, .16);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(2, 7, 12, .44);
}

.visual-live-values code {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #9aa8b9;
    font-size: .84rem;
}

.visual-live-values strong {
    color: #8edfed;
    font-weight: 850;
}

.visual-tuning-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.visual-preview-card {
    display: grid;
    gap: 8px;
}

.visual-preview-card > strong {
    color: #f5f8fb;
    font-size: .88rem;
}

.visual-preview-hero,
.visual-preview-cover {
    --visual-preview-hero-image: linear-gradient(135deg, #07111a 0%, #05090f 56%, #020408 100%);
    --visual-preview-cover-image: linear-gradient(135deg, #07111a 0%, #05090f 56%, #020408 100%);
    position: relative;
    display: grid;
    align-items: end;
    min-height: 170px;
    overflow: hidden;
    border: 1px solid rgba(134, 150, 170, .18);
    border-radius: 10px;
    padding: 12px;
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .08), transparent 38%),
        var(--visual-preview-hero-image),
        #111923;
    background-position: center, var(--visual-preview-position-x, 50%) var(--visual-preview-position-y, 50%), center;
    background-size: cover, cover, cover;
}

.visual-preview-cover {
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .08), transparent 38%),
        var(--visual-preview-cover-image),
        #111923;
    background-position: center;
    background-size: cover;
}

.visual-preview-hero::before,
.visual-preview-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / var(--hero-overlay-opacity, .42));
}

.visual-preview-cover::before {
    background: rgb(0 0 0 / var(--profile-cover-overlay-opacity, .28));
}

.visual-preview-hero span,
.visual-preview-cover span {
    position: relative;
    z-index: 1;
    color: #f5f8fb;
    font-weight: 850;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .75);
}

.visual-tuning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.visual-tuning-reset-form {
    margin-top: 12px;
}

body#top:not(.studio-app-body) .admin-page {
    position: relative;
}

body#top:not(.studio-app-body) .admin-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 8%, rgba(37, 213, 239, .13), transparent 28%),
        radial-gradient(circle at 84% 16%, rgba(140, 255, 95, .08), transparent 24%),
        repeating-linear-gradient(90deg, rgba(37, 213, 239, .035) 0 1px, transparent 1px 78px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 54px);
    pointer-events: none;
}

body#top:not(.studio-app-body) :where(.admin-panel-head, .admin-section, .admin-page > .post-card, .branding-control-panel, .branding-console-hero) {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(37, 213, 239, .18) !important;
    background:
        linear-gradient(135deg, rgba(37, 213, 239, .045), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)),
        rgba(3, 8, 13, .88) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body#top:not(.studio-app-body) :where(.admin-panel-head, .admin-section, .admin-page > .post-card, .branding-control-panel, .branding-console-hero)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(142, 223, 237, .16);
    background: linear-gradient(90deg, transparent, rgba(37, 213, 239, .045), transparent);
    pointer-events: none;
}

body#top:not(.studio-app-body) :where(.admin-panel-head, .admin-section, .admin-page > .post-card, .branding-control-panel, .branding-console-hero) > * {
    position: relative;
    z-index: 1;
}

body#top:not(.studio-app-body) .admin-tab-menu .menu-link,
body#top:not(.studio-app-body) .admin-tool-grid a,
body#top:not(.studio-app-body) .branding-cover-card,
body#top:not(.studio-app-body) .visual-live-values {
    border-color: rgba(37, 213, 239, .2) !important;
    background:
        linear-gradient(180deg, rgba(37, 213, 239, .035), rgba(255, 255, 255, .006)),
        rgba(0, 4, 8, .56) !important;
}

.branding-console-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    min-height: 170px;
}

.branding-console-hero h2 {
    margin: 4px 0 8px;
    color: #f7fbff;
    font-size: clamp(2rem, 4vw, 3.8rem);
    letter-spacing: 0;
}

.branding-console-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: min(360px, 100%);
}

.branding-console-status span {
    border: 1px solid rgba(37, 213, 239, .2);
    border-radius: 8px;
    padding: 10px 12px;
    color: #d8f8ff;
    background: rgba(0, 4, 8, .62);
    font-size: .82rem;
    font-weight: 850;
    text-align: center;
}

.branding-control-panel {
    display: grid;
    gap: 14px;
    overflow: visible !important;
}

.branding-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.branding-grid-form {
    display: grid;
    gap: 12px;
}

.branding-section-form,
.branding-fields {
    display: grid;
    gap: 14px;
}

.branding-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.branding-wide-field {
    grid-column: 1 / -1;
}

.branding-logo-workflow {
    display: grid;
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.branding-logo-preview,
.branding-empty-preview {
    display: grid;
    place-items: center;
    min-height: 132px;
    border: 1px solid rgba(37, 213, 239, .18);
    border-radius: 10px;
    background: rgba(0, 4, 8, .46);
}

.branding-sidebar-logo-preview {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: var(--site-logo-card-height, 84px);
    max-height: var(--site-logo-card-height, 84px);
    overflow: hidden;
    padding: var(--site-logo-card-padding, 8px);
    border: 1px solid rgba(197, 153, 255, .25);
    border-radius: 14px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .05), rgba(131, 49, 255, .11)),
        rgba(0, 4, 8, .46);
    box-sizing: border-box;
}

.branding-sidebar-logo-preview .site-logo-img {
    width: var(--site-logo-size, 230px);
    height: calc(var(--site-logo-card-height, 84px) - (var(--site-logo-card-padding, 8px) * 2));
    max-width: 100%;
    max-height: 100%;
    object-fit: var(--site-logo-fit, contain);
    object-position: var(--site-logo-x, 50%) var(--site-logo-y, 50%);
}

.branding-empty-preview {
    color: #d8f8ff;
    font-weight: 900;
    letter-spacing: .08em;
}

.branding-section-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.branding-grid-form label {
    display: grid;
    gap: 6px;
    color: #dce6f0;
    font-weight: 750;
}

.branding-section-form label {
    display: grid;
    gap: 6px;
    color: #dce6f0;
    font-weight: 750;
}

.branding-upload-field {
    display: grid;
    gap: 6px;
    color: #dce6f0;
}

.branding-upload-field > strong {
    color: #dce6f0;
    font-size: .92rem;
}

.branding-field-help {
    display: block;
    color: #8fa2b5;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.35;
}

.branding-grid-form input:not([type="range"]):not([type="checkbox"]),
.branding-section-form input:not([type="range"]):not([type="checkbox"]):not([type="file"]),
.branding-grid-form textarea,
.branding-section-form textarea,
.branding-grid-form select,
.branding-section-form select {
    width: 100%;
    border: 1px solid rgba(134, 150, 170, .22);
    border-radius: 8px;
    padding: 10px 12px;
    color: #f6f8fb;
    background: rgba(2, 7, 12, .58);
}

.branding-slider-row {
    display: grid !important;
    grid-template-columns: minmax(170px, 240px) minmax(180px, 1fr) 58px;
    gap: 12px;
    align-items: center;
}

.branding-slider-row output {
    justify-self: end;
    color: #8edfed;
    font-variant-numeric: tabular-nums;
}

.branding-check-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.branding-hero-preview {
    --preview-hero-image: linear-gradient(135deg, #07111a 0%, #05090f 56%, #020408 100%);
    position: relative;
    display: grid;
    align-content: end;
    gap: 8px;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid rgba(37, 213, 239, .28);
    border-radius: 10px;
    padding: 24px;
    background:
        linear-gradient(90deg, rgb(1 4 7 / var(--preview-hero-overlay, .42)), rgb(3 8 13 / calc(var(--preview-hero-overlay, .42) * .72))),
        var(--preview-hero-image),
        #071019;
    background-position: center, var(--preview-hero-x, 50%) var(--preview-hero-y, 50%), center;
    background-size: cover, var(--preview-hero-size, 100%), cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 18px 44px rgba(0, 0, 0, .38);
}

.branding-hero-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(var(--preview-hero-blur, 0));
    pointer-events: none;
}

.branding-hero-preview > * {
    position: relative;
    z-index: 1;
}

.branding-hero-preview span {
    color: #8edfed;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.branding-hero-preview strong {
    max-width: 620px;
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.04;
}

.branding-hero-preview em {
    max-width: 540px;
    color: #c9d3df;
    font-style: normal;
}

.branding-cover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 14px;
}

.branding-control-panel:has(.branding-cover-grid) {
    container-type: inline-size;
}

@container (min-width: 960px) {
    .branding-cover-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) and (min-width: 561px) {
    .branding-cover-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.branding-cover-card {
    display: grid;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    contain: layout paint;
    border: 1px solid rgba(134, 150, 170, .18);
    border-radius: 8px;
    padding: 9px;
    background: rgba(2, 7, 12, .36);
}

.branding-cover-card > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.branding-cover-title {
    min-width: 0;
    color: #f5f8fb;
    font-size: .88rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branding-cover-thumb {
    position: relative;
    display: grid;
    align-items: end;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 7px;
    padding: 8px;
    background:
        linear-gradient(90deg, rgba(37, 213, 239, .14), transparent),
        linear-gradient(180deg, #07101a, #03070b);
    background-size: cover;
    background-position: center;
}

.branding-cover-thumb.is-empty {
    background:
        repeating-linear-gradient(90deg, rgba(142, 223, 237, .14) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 24% 46%, rgba(37, 213, 239, .18), transparent 24%),
        linear-gradient(180deg, #101a24, #04080d);
}

.branding-cover-thumb.is-empty span {
    color: #9fb2c4;
    text-shadow: none;
}

.branding-background-thumb {
    min-height: 170px;
}

.branding-cover-thumb span {
    color: #f5f8fb;
    font-size: .82rem;
    font-weight: 850;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}

.branding-cover-card .branding-upload-field {
    width: 100%;
    max-width: 100%;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.branding-cover-card .branding-upload-field > strong {
    display: none;
}

.branding-cover-card .branding-upload-btn {
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

.branding-cover-card .file-input-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
}

.branding-cover-card .branding-slider-row {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.branding-cover-card .branding-slider-row span {
    min-width: 0;
    font-size: .78rem;
}

.branding-cover-card .branding-slider-row input[type="range"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.branding-cover-card .branding-slider-row output {
    justify-self: start;
    font-size: .76rem;
}

@media (max-width: 760px) {
    .branding-console-hero {
        grid-template-columns: 1fr;
    }

    .branding-console-status {
        grid-template-columns: 1fr;
    }

    .branding-two-col,
    .branding-logo-workflow {
        grid-template-columns: 1fr;
    }

    .visual-tuning-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .visual-tuning-row output {
        justify-self: start;
    }

    .visual-tuning-preview {
        grid-template-columns: 1fr;
    }

    .branding-slider-row {
        grid-template-columns: 1fr;
    }

    .branding-slider-row output {
        justify-self: start;
    }

}

/* PULSATRAX Studio layout stability pass: stack right-side tools instead of overlaying panels. */
@media (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-daw-grid {
        align-items: stretch;
        overflow: hidden;
    }

    .studio-ready body.studio-app-body .studio-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(248px, 320px);
        grid-template-rows: minmax(330px, 1.15fr) minmax(250px, .85fr) minmax(190px, .65fr) minmax(170px, .58fr);
        grid-auto-rows: minmax(170px, auto);
        gap: 10px;
        min-height: 0;
        height: 100%;
        overflow: auto;
        align-content: start;
        padding-right: 2px;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .studio-ready body.studio-app-body .studio-piano-panel {
        grid-column: 1;
        grid-row: 3;
    }

    .studio-ready body.studio-app-body .studio-mixer-panel {
        grid-column: 1;
        grid-row: 4;
    }

    .studio-ready body.studio-app-body .studio-pattern-panel {
        grid-column: 2;
        grid-row: 1;
    }

    .studio-ready body.studio-app-body .studio-sampler-panel {
        grid-column: 2;
        grid-row: 2;
    }

    .studio-ready body.studio-app-body .studio-voice-panel {
        grid-column: 2;
        grid-row: 3;
        margin-top: 0;
        max-height: none;
    }

    .studio-ready body.studio-app-body .studio-automation-panel {
        grid-column: 2;
        grid-row: 4;
    }

    .studio-ready body.studio-app-body .studio-project-drawer {
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .studio-ready body.studio-app-body .studio-work-panel,
    .studio-ready body.studio-app-body .studio-project-drawer {
        min-height: 0;
        overflow: hidden;
    }

    .studio-ready body.studio-app-body .studio-workspace .studio-daw-window.is-floating,
    .studio-ready body.studio-app-body .studio-workspace .studio-daw-window.is-maximized,
    .studio-ready body.studio-app-body .studio-project-drawer.is-floating,
    .studio-ready body.studio-app-body .studio-project-drawer.is-maximized {
        position: relative;
        inset: auto;
        z-index: auto;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
    }

    .studio-ready body.studio-app-body .studio-window-titlebar,
    .studio-ready body.studio-app-body .studio-panel-title {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    .studio-ready body.studio-app-body .studio-window-titlebar > span:first-child,
    .studio-ready body.studio-app-body .studio-panel-title > span:first-child,
    .studio-ready body.studio-app-body .studio-window-titlebar small,
    .studio-ready body.studio-app-body .studio-panel-title small {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .studio-ready body.studio-app-body .studio-window-tools {
        justify-self: end;
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 3px;
        max-width: 82px;
        margin-left: 0;
    }

    .studio-ready body.studio-app-body .studio-window-tools button {
        flex: 0 0 22px;
        width: 22px;
        min-width: 22px;
        height: 20px;
        min-height: 20px;
        padding: 0;
    }

    .studio-ready body.studio-app-body .studio-project-publish-fields {
        max-height: 76px;
        overflow: auto;
    }

    .studio-ready body.studio-app-body .studio-project-publish-fields:hover,
    .studio-ready body.studio-app-body .studio-project-publish-fields:focus-within {
        max-height: min(52vh, 560px);
    }

    .studio-ready body.studio-app-body .studio-project-publish-fields .studio-publish-heading {
        position: sticky;
        top: 0;
        z-index: 1;
        background: rgba(8, 12, 17, .96);
    }
}

/* Final homepage rightbar overflow guard: keep creator cards from colliding in narrow sidebars. */
body.home-page .home-rightbar :where(.featured-creator-card, .top-creator-item, .compact-creator-item) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body.home-page .home-rightbar .top-creator-item {
    display: grid !important;
    grid-template-columns: 26px 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
}

body.home-page .home-rightbar .top-creator-item.compact-creator-item,
body.home-page .home-rightbar .top-creator-item.live-creator-item {
    grid-template-columns: 34px minmax(0, 1fr) !important;
}

body.home-page .home-rightbar .featured-creator-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
}

body.home-page .home-rightbar .featured-creator-card > .avatar,
body.home-page .home-rightbar .featured-creator-card > .avatar-fallback {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

body.home-page .home-rightbar .top-creator-item .comment-avatar,
body.home-page .home-rightbar .top-creator-item .avatar-fallback {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
}

body.home-page .home-rightbar .top-creator-item > span:not(.trend-rank),
body.home-page .home-rightbar .featured-creator-card > span {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body.home-page .home-rightbar .top-creator-item strong,
body.home-page .home-rightbar .top-creator-item em,
body.home-page .home-rightbar .featured-creator-card strong,
body.home-page .home-rightbar .featured-creator-card em {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
}

body.home-page .home-rightbar .top-creator-item .reputation-badge-row,
body.home-page .home-rightbar .featured-creator-card .reputation-badge-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body.home-page .home-rightbar .top-creator-item .reputation-badge,
body.home-page .home-rightbar .featured-creator-card .reputation-badge {
    min-width: 0 !important;
    max-width: 72px !important;
    overflow: hidden !important;
    padding: 2px 5px !important;
    font-size: .56rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.home-page .home-rightbar .featured-creator-card .pulse-score-badge {
    display: none !important;
}

body.home-page .home-rightbar :where(.top-creator-widget, .featured-creator-widget) .reputation-badge-row {
    display: none !important;
}

@media (min-width: 981px) {
    html,
    body#top:not(.studio-app-body) {
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body#top:not(.studio-app-body) .layout {
        height: auto !important;
        min-height: 100vh !important;
        align-items: start !important;
        overflow: visible !important;
    }

    body#top.home-page:not(.studio-app-body) .layout {
        position: relative !important;
        grid-template-columns: minmax(198px, 228px) minmax(0, 1fr) minmax(280px, 330px) !important;
    }

    body#top:not(.studio-app-body) .layout > .sidebar,
    body#top:not(.studio-app-body) .layout > .feed,
    body#top:not(.studio-app-body) .layout > .rightbar {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
    }

    body#top:not(.studio-app-body) .layout > .sidebar,
    body#top:not(.studio-app-body) .layout > .rightbar {
        position: sticky !important;
        top: 18px !important;
        max-height: calc(100vh - 36px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        align-content: start;
    }

    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar {
        display: block !important;
        grid-column: 3 !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        align-self: start !important;
        position: sticky !important;
        top: 18px !important;
        z-index: 30 !important;
        height: auto !important;
        max-height: calc(100vh - 36px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        pointer-events: auto !important;
        touch-action: pan-y !important;
        isolation: isolate !important;
        contain: none !important;
    }

    body#top.home-page:not(.studio-app-body) .layout > .home-feed {
        grid-column: 2 !important;
        grid-row: auto !important;
    }

    body#top:not(.studio-app-body) .layout > .feed {
        min-width: 0 !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
        padding-right: 2px;
        align-content: start;
        overflow: visible !important;
        contain: none !important;
    }

    body#top:not(.studio-app-body) .layout > .sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        z-index: 20 !important;
        padding-bottom: 14px !important;
    }

    body#top:not(.studio-app-body) .layout > .sidebar .menu,
    body#top:not(.studio-app-body) .layout > .sidebar .sidebar-more,
    body#top:not(.studio-app-body) .layout > .sidebar .sidebar-footer {
        flex: 0 0 auto;
    }

    body#top:not(.studio-app-body) .layout > .sidebar :where(.menu-link, .sidebar-more-link, .sidebar-legal-link, .sidebar-logout-link) {
        max-width: 100%;
        min-width: 0;
    }

    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar {
        pointer-events: auto !important;
    }

    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar > .widget {
        position: relative !important;
        z-index: 1 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 14px !important;
        border-radius: 12px !important;
        border-color: rgba(99, 216, 235, .16) !important;
        background:
            linear-gradient(135deg, rgba(99, 216, 235, .055), transparent 38%),
            linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .014)),
            rgba(10, 9, 18, .9) !important;
    }

    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar > .widget:last-child {
        margin-bottom: 0 !important;
    }

    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar > .widget::before,
    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar > .widget::after {
        pointer-events: none !important;
    }

    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar :where(a, button, input, select, textarea, summary, form, details) {
        position: relative !important;
        z-index: 3 !important;
        pointer-events: auto !important;
    }

    body#top:not(.studio-app-body) .layout > .sidebar::-webkit-scrollbar,
    body#top:not(.studio-app-body) .layout > .feed::-webkit-scrollbar,
    body#top:not(.studio-app-body) .layout > .rightbar::-webkit-scrollbar {
        width: 8px;
    }

    body#top:not(.studio-app-body) .layout > .sidebar::-webkit-scrollbar-thumb,
    body#top:not(.studio-app-body) .layout > .feed::-webkit-scrollbar-thumb,
    body#top:not(.studio-app-body) .layout > .rightbar::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(155, 92, 255, .3);
    }
}

body#top[style*="--site-bg-image"]:not(.studio-app-body) {
    background-color: #020408 !important;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 16px),
        radial-gradient(circle at 18% -10%, rgba(37, 213, 239, .065), transparent 26%),
        linear-gradient(180deg, rgba(7, 17, 26, .86) 0%, rgba(3, 7, 11, .94) 62%, rgba(1, 3, 6, .98) 100%),
        var(--site-bg-image) !important;
    background-size: 16px 16px, auto, auto, cover !important;
    background-position: center, center, center, var(--site-bg-position-x) var(--site-bg-position-y) !important;
    background-attachment: fixed !important;
}

body#top:not(.studio-app-body) .profile-main-content .profile-role-wrap .profile-role-pill:nth-of-type(n+4),
body#top:not(.studio-app-body) .profile-main-content .genre-tags .genre-tag:nth-of-type(n+7) {
    display: inline-flex !important;
}

/* Profile page professional polish: compact creator profile layout. */
body.profile-page .feed {
    gap: 14px !important;
}

body.profile-page .profile-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .008)),
        rgba(6, 10, 16, .95) !important;
}

body.profile-page .profile-cover-wrap {
    height: 188px !important;
    border: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #07121d, #101721 58%, #05080d) !important;
}

body.profile-page .profile-cover {
    height: 188px !important;
    border-radius: 0 !important;
    filter: saturate(.9) contrast(1.04) brightness(.82);
}

body.profile-page .profile-main {
    display: grid !important;
    grid-template-columns: 126px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 18px !important;
    margin-top: -48px !important;
    padding: 0 22px 20px !important;
    position: relative;
    z-index: 2;
}

body.profile-page .profile-identity-col {
    display: flex !important;
    justify-content: center !important;
    min-width: 0 !important;
}

body.profile-page .profile-avatar {
    width: 118px !important;
    height: 118px !important;
    border: 4px solid rgba(6, 10, 16, .96) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45) !important;
    background: #070b10;
}

body.profile-page .profile-main-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 12px !important;
    min-width: 0 !important;
    padding-top: 56px !important;
}

body.profile-page .profile-name {
    grid-column: 1;
    margin: 0 !important;
    color: #f7fbff !important;
    font-size: clamp(1.55rem, 2vw, 2.05rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

body.profile-page .profile-type-near-name,
body.profile-page .creator-identity-row {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    margin: 0 !important;
}

body.profile-page .creator-identity-row {
    grid-row: 2;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
}

body.profile-page .profile-main-content > .muted {
    margin: 0 !important;
    min-width: 0;
    color: #9eacba !important;
}

body.profile-page .profile-main-content > .muted:nth-of-type(1),
body.profile-page .profile-main-content > .muted:nth-of-type(2) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.profile-page .profile-meta-label {
    color: #788a9b;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.profile-page .profile-message-wrap,
body.profile-page .profile-social-counts,
body.profile-page .profile-status-pill,
body.profile-page .profile-bio,
body.profile-page .profile-role-wrap,
body.profile-page .genre-tags-wrap,
body.profile-page .creator-signal-strip,
body.profile-page .profile-launch-actions,
body.profile-page .profile-social-links {
    grid-column: 1 / -1;
}

body.profile-page .profile-owner-actions {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    align-items: center !important;
}

body.profile-page .profile-message-wrap {
    margin: 4px 0 0 !important;
}

body.profile-page .compact-action-group,
body.profile-page .profile-launch-actions,
body.profile-page .profile-social-links,
body.profile-page .profile-owner-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    align-items: center !important;
}

body.profile-page .profile-launch-actions {
    margin-top: 4px !important;
}

body.profile-page .profile-launch-actions a,
body.profile-page .compact-action-btn,
body.profile-page .edit-profile-btn,
body.profile-page .profile-inline-action {
    width: auto !important;
    max-width: 100% !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    padding: 7px 11px !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
}

body.profile-page .profile-social-counts {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content;
    max-width: 100%;
    margin: 4px 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(134, 150, 170, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

body.profile-page .profile-stat-sep {
    color: rgba(134, 150, 170, .45);
}

body.profile-page .profile-status-pill,
body.profile-page .profile-bio,
body.profile-page .profile-role-wrap,
body.profile-page .genre-tags-wrap,
body.profile-page .creator-signal-strip {
    margin: 2px 0 0 !important;
}

body.profile-page .profile-bio {
    max-width: 74ch;
    padding: 11px 12px !important;
    border: 1px solid rgba(134, 150, 170, .15);
    border-radius: 10px;
    background: rgba(255, 255, 255, .026);
    color: #d7e0ea;
    line-height: 1.48;
}

body.profile-page .profile-role-wrap,
body.profile-page .genre-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
}

body.profile-page .profile-role-label {
    color: #95a5b5 !important;
    font-size: .68rem !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    align-self: center;
}

body.profile-page :where(.profile-role-pill, .genre-tag, .profile-type-pill, .reputation-badge, .pulse-score-badge, .ptx-project-badge, .creator-vibe-chips span) {
    border-radius: 999px !important;
    padding: 4px 8px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
}

body.profile-page .creator-signal-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.profile-page .creator-signal-strip span {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(134, 150, 170, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .026);
    color: #9eacba;
}

body.profile-page .creator-signal-strip strong {
    display: block;
    color: #f3f8fb;
    font-size: 1rem;
}

body.profile-page .post-card,
body.profile-page .create-post,
body.profile-page .profile-media-hub,
body.profile-page .profile-media-player-card {
    border-radius: 12px !important;
    padding: 14px !important;
}

body.profile-page .creator-highlights-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 11px !important;
}

body.profile-page .creator-highlights-head h3,
body.profile-page .profile-intro-head h3,
body.profile-page .post-card h2 {
    margin: 0 !important;
    color: #f3f8fb !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

body.profile-page .admin-section-kicker {
    color: #7ee7f6 !important;
    font-size: .66rem !important;
    letter-spacing: .08em !important;
}

body.profile-page .creator-signal-panel,
body.profile-page .creator-workbench-card,
body.profile-page .creator-highlights-card,
body.profile-page .profile-events-card,
body.profile-page .profile-media-player-card,
body.profile-page .profile-media-hub {
    margin-top: 0 !important;
}

body.profile-page .creator-signal-grid,
body.profile-page .creator-highlights-grid,
body.profile-page .creator-workbench-grid {
    gap: 9px !important;
}

body.profile-page .creator-signal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

body.profile-page .creator-signal-grid > div,
body.profile-page .creator-workbench-grid > div,
body.profile-page .creator-highlights-grid > div {
    min-height: 0 !important;
    padding: 11px !important;
    border: 1px solid rgba(134, 150, 170, .14) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .026) !important;
    box-shadow: none !important;
}

body.profile-page .creator-signal-grid > div {
    display: grid;
    align-content: start;
    gap: 5px;
}

body.profile-page .creator-signal-grid p,
body.profile-page .creator-signal-grid span,
body.profile-page .creator-signal-grid strong,
body.profile-page .creator-workbench-grid span {
    margin: 0 !important;
}

body.profile-page .ptx-project-card-list {
    display: grid !important;
    gap: 9px !important;
}

body.profile-page .ptx-project-card {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
}

body.profile-page .ptx-project-preview {
    width: 104px !important;
    min-height: 104px !important;
    height: 100% !important;
    border-radius: 10px !important;
}

body.profile-page .ptx-project-body {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

body.profile-page .ptx-project-body h3 {
    margin: 0 !important;
    font-size: .98rem !important;
    line-height: 1.2 !important;
}

body.profile-page .ptx-project-body p,
body.profile-page .ptx-project-body em,
body.profile-page .ptx-project-body small,
body.profile-page .ptx-project-social,
body.profile-page .ptx-project-chain,
body.profile-page .studio-project-rights-note {
    margin: 0 !important;
    color: #9daab7 !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
}

body.profile-page .ptx-project-badges,
body.profile-page .ptx-project-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

body.profile-page .ptx-project-actions {
    margin-top: 4px !important;
}

body.profile-page .profile-media-player-card {
    overflow: hidden !important;
}

body.profile-page .profile-media-player-card::before {
    opacity: .06 !important;
    filter: grayscale(1) saturate(.25) blur(18px) !important;
}

body.profile-page .profile-player-main {
    grid-template-columns: auto minmax(0, 1fr) minmax(190px, .65fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

body.profile-page .profile-player-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.profile-page .profile-player-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    padding: 0 !important;
}

body.profile-page .profile-player-btn-main {
    width: 40px !important;
    min-width: 40px !important;
}

body.profile-page .profile-player-title-wrap,
body.profile-page .profile-player-progress-wrap {
    min-width: 0 !important;
}

body.profile-page .profile-player-queue-wrap {
    grid-column: 1 / -1 !important;
}

body.profile-page .profile-media-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.profile-page .create-post {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
}

body.profile-page .create-post > .avatar,
body.profile-page .create-post > .avatar-fallback {
    width: 42px !important;
    height: 42px !important;
}

body.profile-page .create-post textarea {
    min-height: 78px !important;
    border-radius: 10px !important;
}

body.profile-page .file-input-wrap,
body.profile-page .video-style-field {
    padding: 9px 10px !important;
    border-radius: 10px !important;
}

body.profile-page .pinned-post-card,
body.profile-page .post-card[id^="post-"] {
    padding: 14px !important;
}

body.profile-page .post-content-text {
    margin-bottom: 9px !important;
    color: #dce5ef;
    line-height: 1.5;
}

body.profile-page .youtube-embed,
body.profile-page .embed-card {
    margin-top: 9px !important;
    border-radius: 10px !important;
}

body.profile-page .post-actions-row {
    margin-top: 10px !important;
    gap: 7px !important;
}

@media (max-width: 980px) {
    body.profile-page .profile-main {
        grid-template-columns: 106px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding-inline: 16px !important;
    }

    body.profile-page .profile-avatar {
        width: 100px !important;
        height: 100px !important;
        border-radius: 20px !important;
    }

    body.profile-page .creator-signal-strip,
    body.profile-page .creator-signal-grid,
    body.profile-page .creator-workbench-grid,
    body.profile-page .creator-highlights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.profile-page .profile-player-main {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }
}

@media (max-width: 640px) {
    body.profile-page .profile-cover-wrap,
    body.profile-page .profile-cover {
        height: 132px !important;
    }

    body.profile-page .profile-main {
        grid-template-columns: 1fr !important;
        margin-top: -42px !important;
        padding: 0 12px 14px !important;
    }

    body.profile-page .profile-identity-col {
        justify-content: flex-start !important;
    }

    body.profile-page .profile-avatar {
        width: 92px !important;
        height: 92px !important;
        border-radius: 18px !important;
    }

    body.profile-page .profile-main-content {
        grid-template-columns: 1fr !important;
        padding-top: 0 !important;
    }

    body.profile-page .profile-name,
    body.profile-page .profile-type-near-name,
    body.profile-page .creator-identity-row {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: start !important;
    }

    body.profile-page .creator-signal-strip,
    body.profile-page .creator-signal-grid,
    body.profile-page .creator-workbench-grid,
    body.profile-page .creator-highlights-grid {
        grid-template-columns: 1fr !important;
    }

    body.profile-page .ptx-project-card {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.profile-page .ptx-project-preview {
        width: 76px !important;
        min-height: 76px !important;
    }

    body.profile-page .ptx-project-actions .compact-action-btn,
    body.profile-page .ptx-project-actions .compact-action-link,
    body.profile-page .profile-launch-actions a,
    body.profile-page .compact-action-btn,
    body.profile-page .edit-profile-btn,
    body.profile-page .profile-inline-action {
        width: auto !important;
        max-width: 100% !important;
        min-height: 32px !important;
        padding: 7px 9px !important;
        white-space: normal !important;
    }

    body.profile-page .create-post {
        grid-template-columns: 1fr !important;
    }
}

/* Profile module polish follow-up: highlights, media player, and PTX cards. */
body.profile-page .creator-workbench-card,
body.profile-page .creator-highlights-card,
body.profile-page .profile-media-player-card {
    padding: 12px !important;
}

body.profile-page .creator-workbench-card + .creator-highlights-card,
body.profile-page .creator-highlights-card + .profile-media-player-card,
body.profile-page .profile-media-player-card + .profile-media-hub {
    margin-top: -3px !important;
}

body.profile-page .creator-highlights-card .creator-highlights-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 9px !important;
}

body.profile-page .creator-highlights-card .creator-highlights-grid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 136px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.profile-page .creator-highlights-card h4 {
    margin: 0 !important;
    padding: 10px 12px 8px !important;
    border-bottom: 1px solid rgba(134, 150, 170, .14);
    color: #f3f8fb;
    font-size: .78rem !important;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.profile-page .creator-highlights-card .creator-highlight-item {
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(134, 150, 170, .11) !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    color: inherit;
    text-decoration: none;
}

body.profile-page .creator-highlights-card .creator-highlight-item:last-child {
    border-bottom: 0 !important;
}

body.profile-page .creator-highlights-card .creator-highlight-item:hover,
body.profile-page .creator-highlights-card a.creator-highlight-item:focus-visible {
    background: rgba(37, 213, 239, .045) !important;
}

body.profile-page .creator-highlights-card .creator-highlight-item strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #e9f2f7;
    font-size: .84rem;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.profile-page .creator-highlights-card .creator-highlight-item span {
    color: #8e9ead;
    font-size: .72rem;
    line-height: 1.2;
}

body.profile-page .creator-highlights-card .muted {
    margin: 0 !important;
    padding: 10px 12px !important;
}

body.profile-page .profile-media-player-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .006)),
        rgba(6, 10, 15, .94) !important;
}

body.profile-page .profile-media-player-card::before,
body.profile-page .profile-player-ambient {
    opacity: .035 !important;
    filter: grayscale(1) saturate(.2) blur(12px) !important;
}

body.profile-page .profile-player-main {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
        "controls title time"
        "progress progress progress"
        "queue queue queue"
        "embed embed embed" !important;
    align-items: center !important;
    gap: 9px 12px !important;
    overflow: visible !important;
}

body.profile-page .profile-player-controls {
    grid-area: controls;
    flex-wrap: nowrap !important;
}

body.profile-page .profile-player-title-wrap {
    grid-area: title;
    gap: 3px !important;
}

body.profile-page .profile-player-title {
    min-width: 0;
    overflow: hidden;
    color: #f0f7fb !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.profile-page .profile-player-source {
    padding: 2px 7px !important;
    border-color: rgba(37, 213, 239, .22) !important;
    background: rgba(37, 213, 239, .055) !important;
    color: #b8eaf2 !important;
    font-size: .64rem !important;
}

body.profile-page .profile-player-progress-wrap {
    display: contents !important;
}

body.profile-page .profile-player-progress-wrap .intro-time {
    grid-area: time;
    justify-self: end;
    color: #94a6b7;
    font-size: .72rem;
    font-weight: 760;
    white-space: nowrap;
}

body.profile-page .profile-player-progress-wrap .intro-progress {
    grid-area: progress;
    width: 100% !important;
    height: 6px !important;
    margin: 1px 0 2px !important;
    background: rgba(255, 255, 255, .11) !important;
}

body.profile-page .profile-player-queue-wrap {
    grid-area: queue !important;
    display: grid !important;
    gap: 7px !important;
}

body.profile-page .profile-player-queue {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
    gap: 7px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.profile-page .profile-player-queue.is-collapsed,
body.profile-page .profile-player-queue.is-expanded {
    max-height: none !important;
    overflow: visible !important;
}

body.profile-page .profile-player-queue-item {
    display: grid !important;
    align-content: start !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 72px !important;
    max-height: 92px !important;
    padding: 8px 9px !important;
    border-radius: 9px !important;
    border-color: rgba(134, 150, 170, .16) !important;
    background: rgba(255, 255, 255, .024) !important;
}

body.profile-page .profile-player-queue-item.is-active {
    border-color: rgba(37, 213, 239, .44) !important;
    background: rgba(37, 213, 239, .065) !important;
    box-shadow: inset 3px 0 0 rgba(37, 213, 239, .65) !important;
}

body.profile-page .profile-player-queue-title {
    -webkit-line-clamp: 1 !important;
    color: #e9f2f7 !important;
    font-size: .76rem !important;
}

body.profile-page .profile-player-queue-source,
body.profile-page .profile-player-queue-desc {
    font-size: .64rem !important;
    line-height: 1.16 !important;
}

body.profile-page .profile-player-queue-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #91a4b5 !important;
}

body.profile-page .profile-player-queue-toggle {
    display: none !important;
}

body.profile-page .profile-player-embed {
    grid-area: embed !important;
    max-width: 520px !important;
}

body.profile-page .creator-workbench-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

body.profile-page .creator-workbench-grid > div {
    min-height: 54px !important;
    padding: 8px 10px !important;
    align-content: center !important;
}

body.profile-page .creator-workbench-grid strong {
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

body.profile-page .creator-workbench-grid span {
    margin-top: 3px !important;
    font-size: .64rem !important;
    letter-spacing: .055em !important;
    text-transform: uppercase;
}

body.profile-page .creator-workbench-card .ptx-project-card-list {
    gap: 7px !important;
    margin-top: 8px !important;
}

body.profile-page .creator-workbench-card .ptx-project-card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 9px !important;
    border-radius: 10px !important;
}

body.profile-page .creator-workbench-card .ptx-project-preview {
    width: 82px !important;
    min-height: 82px !important;
    height: 82px !important;
    align-self: start !important;
    border-radius: 9px !important;
    background:
        linear-gradient(135deg, rgba(37, 213, 239, .12), rgba(255, 255, 255, .02)),
        #05090e !important;
}

body.profile-page .creator-workbench-card .ptx-project-preview span {
    font-size: .66rem !important;
    letter-spacing: .08em !important;
}

body.profile-page .creator-workbench-card .ptx-project-preview em {
    padding: 2px 6px !important;
    font-size: .56rem !important;
}

body.profile-page .creator-workbench-card .ptx-project-preview i {
    min-height: 28px !important;
    opacity: .78 !important;
}

body.profile-page .creator-workbench-card .ptx-project-body {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-content: start !important;
    gap: 4px 8px !important;
}

body.profile-page .creator-workbench-card .ptx-project-badges,
body.profile-page .creator-workbench-card .ptx-project-body h3,
body.profile-page .creator-workbench-card .ptx-project-body > p,
body.profile-page .creator-workbench-card .ptx-project-description,
body.profile-page .creator-workbench-card .ptx-project-body > em,
body.profile-page .creator-workbench-card .ptx-project-body > small,
body.profile-page .creator-workbench-card .ptx-project-chain,
body.profile-page .creator-workbench-card .ptx-project-social {
    grid-column: 1;
}

body.profile-page .creator-workbench-card .ptx-project-actions {
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: end !important;
    justify-self: end !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    min-width: 128px !important;
    margin-top: 0 !important;
}

body.profile-page .creator-workbench-card .ptx-project-actions .compact-action-btn,
body.profile-page .creator-workbench-card .ptx-project-actions .compact-action-link,
body.profile-page .creator-workbench-card .ptx-project-actions .ptx-project-text-link {
    width: 100% !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    font-size: .72rem !important;
}

body.profile-page .creator-workbench-card .ptx-project-actions .ptx-project-text-link,
body.profile-page .creator-workbench-card .ptx-project-actions .compact-action-btn-muted {
    border: 1px solid rgba(134, 150, 170, .18) !important;
    color: #aebdca !important;
    background: rgba(255, 255, 255, .024) !important;
}

body.profile-page .creator-workbench-card .ptx-project-badges {
    gap: 4px !important;
}

body.profile-page .creator-workbench-card .ptx-project-badge {
    padding: 3px 6px !important;
    font-size: .58rem !important;
}

body.profile-page .creator-workbench-card .ptx-project-body h3 {
    font-size: .92rem !important;
}

body.profile-page .creator-workbench-card .ptx-project-body p,
body.profile-page .creator-workbench-card .ptx-project-body em,
body.profile-page .creator-workbench-card .ptx-project-body small,
body.profile-page .creator-workbench-card .ptx-project-social,
body.profile-page .creator-workbench-card .ptx-project-chain {
    font-size: .72rem !important;
}

body.profile-page .creator-workbench-card .ptx-project-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    body.profile-page .creator-workbench-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.profile-page .creator-workbench-card .ptx-project-body {
        grid-template-columns: 1fr !important;
    }

    body.profile-page .creator-workbench-card .ptx-project-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    body.profile-page .creator-workbench-card .ptx-project-actions .compact-action-btn,
    body.profile-page .creator-workbench-card .ptx-project-actions .compact-action-link,
    body.profile-page .creator-workbench-card .ptx-project-actions .ptx-project-text-link {
        width: auto !important;
        flex: 1 1 132px !important;
    }
}

@media (max-width: 640px) {
    body.profile-page .creator-highlights-card .creator-highlights-grid,
    body.profile-page .creator-workbench-grid {
        grid-template-columns: 1fr !important;
    }

    body.profile-page .profile-player-main {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "controls time"
            "title title"
            "progress progress"
            "queue queue"
            "embed embed" !important;
        gap: 8px !important;
    }

    body.profile-page .profile-player-controls {
        overflow-x: auto;
        padding-bottom: 1px;
    }

    body.profile-page .profile-player-queue {
        grid-template-columns: 1fr !important;
    }

    body.profile-page .profile-player-queue-item {
        min-height: 62px !important;
    }

    body.profile-page .creator-workbench-card .ptx-project-card {
        grid-template-columns: 66px minmax(0, 1fr) !important;
    }

    body.profile-page .creator-workbench-card .ptx-project-preview {
        width: 66px !important;
        height: 66px !important;
        min-height: 66px !important;
    }
}

/* Shared app shell consistency: one desktop sidebar/main/rightbar geometry across tabs. */
@media (min-width: 761px) {
    body#top:not(.studio-app-body) {
        --app-sidebar-width: 228px;
        --app-rightbar-width: 320px;
        --app-shell-gap: 18px;
        --app-shell-pad: 18px;
    }

    body#top:not(.studio-app-body) .layout,
    body#top.home-page:not(.studio-app-body) .layout,
    body#top:not(.home-page):not(.studio-app-body) .layout,
    body#top:not(.home-page):not(.studio-app-body) .layout:has(> .rightbar:empty) {
        display: grid !important;
        grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) var(--app-rightbar-width) !important;
        gap: var(--app-shell-gap) !important;
        width: min(100%, 1760px) !important;
        max-width: 1760px !important;
        min-height: 100vh !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: var(--app-shell-pad) !important;
        align-items: start !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body#top:not(.studio-app-body) .layout > .sidebar {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: var(--app-sidebar-width) !important;
        min-width: var(--app-sidebar-width) !important;
        max-width: var(--app-sidebar-width) !important;
        box-sizing: border-box !important;
        position: sticky !important;
        top: var(--app-shell-pad) !important;
        max-height: calc(100vh - (var(--app-shell-pad) * 2)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 20px 16px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-content: start !important;
        z-index: 20 !important;
        scrollbar-width: thin;
    }

    body#top:not(.studio-app-body) .layout > .feed,
    body#top.home-page:not(.studio-app-body) .layout > .home-feed,
    body#top:not(.home-page):not(.studio-app-body) .layout:has(> .rightbar:empty) > .feed {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-content: start !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
        contain: none !important;
        box-sizing: border-box !important;
    }

    body#top:not(.studio-app-body) .layout > .rightbar,
    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar,
    body#top:not(.home-page):not(.studio-app-body) .rightbar:empty {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: var(--app-rightbar-width) !important;
        min-width: var(--app-rightbar-width) !important;
        max-width: var(--app-rightbar-width) !important;
        justify-self: stretch !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }

    body#top:not(.studio-app-body) .layout > .rightbar,
    body#top.home-page:not(.studio-app-body) .layout > .home-rightbar {
        display: grid !important;
        position: sticky !important;
        top: var(--app-shell-pad) !important;
        max-height: calc(100vh - (var(--app-shell-pad) * 2)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        pointer-events: auto !important;
        touch-action: pan-y !important;
        isolation: isolate !important;
        contain: none !important;
        z-index: 10 !important;
        scrollbar-width: thin;
    }

    body#top:not(.home-page):not(.studio-app-body) .rightbar:empty {
        display: block !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    body#top:not(.studio-app-body) .sidebar .logo,
    body#top.home-page:not(.studio-app-body) .sidebar .logo,
    body#top:not(.home-page):not(.studio-app-body) .logo {
        width: 100% !important;
        min-height: var(--site-logo-card-height, 84px) !important;
        max-height: var(--site-logo-card-height, 84px) !important;
        margin: 0 0 18px !important;
        padding: var(--site-logo-card-padding, 8px) !important;
        box-sizing: border-box !important;
    }

    body#top:not(.studio-app-body) .sidebar .site-logo-img,
    body#top.home-page:not(.studio-app-body) .site-logo-img,
    body#top:not(.home-page):not(.studio-app-body) .site-logo-img {
        width: var(--site-logo-size, 230px) !important;
        height: calc(var(--site-logo-card-height, 84px) - (var(--site-logo-card-padding, 8px) * 2)) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: var(--site-logo-fit, contain) !important;
        object-position: var(--site-logo-x, 50%) var(--site-logo-y, 50%) !important;
    }

    body#top:not(.studio-app-body) .sidebar .menu {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    body#top:not(.studio-app-body) .sidebar .menu-link {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 43px !important;
        padding: 9px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        overflow-wrap: normal !important;
    }

    body#top:not(.studio-app-body) .sidebar .menu-link-label {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.14 !important;
    }

    body#top:not(.studio-app-body) .sidebar .menu-link-studio-wip {
        align-items: center !important;
        grid-template-columns: minmax(112px, 1fr) auto !important;
        min-height: 54px !important;
    }

    body#top:not(.studio-app-body) .sidebar .menu-link-studio-wip .menu-link-label {
        white-space: normal !important;
    }

    body#top:not(.studio-app-body) .sidebar .menu-link-studio-label {
        display: inline-grid !important;
        grid-template-columns: 1fr !important;
        gap: 1px !important;
        min-width: 112px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        line-height: 1.02 !important;
        letter-spacing: 0 !important;
    }

    body#top:not(.studio-app-body) .sidebar .menu-link-studio-label span {
        display: block !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    body#top:not(.studio-app-body) .sidebar:is(.collapsed, .is-collapsed, .sidebar-collapsed) .menu-link-studio-wip,
    body#top:not(.studio-app-body) .layout.is-sidebar-collapsed .sidebar .menu-link-studio-wip,
    body#top:not(.studio-app-body).sidebar-collapsed .sidebar .menu-link-studio-wip {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 43px !important;
        justify-items: center !important;
    }

    body#top:not(.studio-app-body) .sidebar:is(.collapsed, .is-collapsed, .sidebar-collapsed) .menu-link-studio-label,
    body#top:not(.studio-app-body) .layout.is-sidebar-collapsed .sidebar .menu-link-studio-label,
    body#top:not(.studio-app-body).sidebar-collapsed .sidebar .menu-link-studio-label {
        min-width: 0 !important;
        text-align: center !important;
    }

    body#top:not(.studio-app-body) .sidebar:is(.collapsed, .is-collapsed, .sidebar-collapsed) .menu-link-studio-label span:first-child,
    body#top:not(.studio-app-body) .layout.is-sidebar-collapsed .sidebar .menu-link-studio-label span:first-child,
    body#top:not(.studio-app-body).sidebar-collapsed .sidebar .menu-link-studio-label span:first-child,
    body#top:not(.studio-app-body) .sidebar:is(.collapsed, .is-collapsed, .sidebar-collapsed) .ptx-daw-status-badge.menu-link-build,
    body#top:not(.studio-app-body) .layout.is-sidebar-collapsed .sidebar .ptx-daw-status-badge.menu-link-build,
    body#top:not(.studio-app-body).sidebar-collapsed .sidebar .ptx-daw-status-badge.menu-link-build {
        display: none !important;
    }

    body#top:not(.studio-app-body) .sidebar .ptx-daw-status-badge.menu-link-build {
        justify-self: end !important;
        margin-left: 0 !important;
        max-width: 78px !important;
        grid-auto-flow: row !important;
        gap: 1px !important;
        padding: 3px 6px !important;
        text-align: center !important;
    }

    body#top:not(.studio-app-body) .sidebar .ptx-daw-status-badge.menu-link-build b,
    body#top:not(.studio-app-body) .sidebar .ptx-daw-status-badge.menu-link-build em {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body#top:not(.studio-app-body) .sidebar .ptx-daw-status-badge.menu-link-build em {
        font-size: .5rem !important;
    }

    body#top:not(.studio-app-body) .sidebar .sidebar-footer {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: auto !important;
        flex: 0 0 auto !important;
    }

    body#top:not(.studio-app-body) .layout > .sidebar::-webkit-scrollbar,
    body#top:not(.studio-app-body) .layout > .rightbar::-webkit-scrollbar {
        width: 8px;
    }
}

/* Games need the full stage width; the empty rightbar column is intentionally removed here. */
@media (min-width: 761px) {
    body#top.games-page:not(.studio-app-body) .layout,
    body#top.games-page:not(.home-page):not(.studio-app-body) .layout:has(> .rightbar:empty) {
        grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) !important;
    }

    body#top.games-page:not(.studio-app-body) .layout > .feed {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body#top.games-page:not(.studio-app-body) .layout > .rightbar:empty {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }
}

/* Controlled ad placeholders. Rendered only through server-side allowlisted slots. */
.ad-slot {
    display: grid;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    border-style: dashed !important;
    border-color: rgba(134, 150, 170, .28) !important;
    background:
        linear-gradient(135deg, rgba(37, 213, 239, .055), transparent 40%),
        rgba(5, 12, 17, .68) !important;
}

.ad-slot-label {
    color: rgba(220, 231, 238, .62);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ad-slot-code,
.ad-slot-placeholder {
    min-width: 0;
}

.ad-slot-placeholder {
    display: grid;
    place-items: center;
    min-height: 92px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    color: rgba(220, 231, 238, .74);
    text-align: center;
    background: rgba(255, 255, 255, .028);
}

.ad-slot-placeholder strong {
    color: #f5fbff;
}

.ad-slot-placeholder span {
    max-width: 260px;
    color: rgba(220, 231, 238, .58);
    font-size: .82rem;
}

.ad-slot-sidebar .ad-slot-placeholder {
    min-height: 180px;
}

.ad-slot-feed .ad-slot-placeholder,
.ad-slot-profile .ad-slot-placeholder,
.ad-slot-footer .ad-slot-placeholder {
    min-height: 110px;
}

.ad-slot iframe,
.ad-slot img,
.ad-slot ins {
    max-width: 100%;
}

.ad-admin-slot {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(134, 150, 170, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .026);
}

.ad-admin-slot textarea {
    min-height: 138px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
}

/* Launch readiness polish: collabs, charts, profile modules. */
.collab-command-panel,
.chart-command-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.chart-command-panel {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.collab-command-panel > div,
.chart-command-panel > div,
.collab-shortlist-card,
.chart-spotlight-grid a,
.collab-role-focus-list span,
.chart-grow-list a {
    min-width: 0;
    border: 1px solid rgba(132, 148, 169, .16);
    border-radius: 10px;
    background: rgba(8, 13, 20, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.collab-command-panel > div,
.chart-command-panel > div {
    display: grid;
    gap: 3px;
    padding: 12px;
}

.collab-command-panel span,
.chart-command-panel span,
.chart-spotlight-grid span,
.collab-shortlist-card span {
    color: #8edfed;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.collab-command-panel strong,
.chart-command-panel strong {
    color: #f4f8fb;
    font-size: 1.42rem;
    line-height: 1;
}

.collab-command-panel em,
.chart-command-panel em,
.chart-spotlight-grid em,
.collab-shortlist-card em {
    color: #98a8b7;
    font-size: .74rem;
    font-style: normal;
    line-height: 1.3;
}

.collab-shortlist-grid,
.chart-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.chart-spotlight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collab-shortlist-card,
.chart-spotlight-grid a {
    display: grid;
    gap: 5px;
    padding: 12px;
    color: inherit;
    text-decoration: none;
}

.collab-shortlist-card {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
}

.collab-shortlist-card .avatar,
.collab-shortlist-card .avatar-fallback {
    grid-row: span 3;
    width: 46px;
    height: 46px;
}

.collab-shortlist-card strong,
.chart-spotlight-grid strong {
    overflow: hidden;
    color: #f4f8fb;
    font-size: .96rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collab-shortlist-card:hover,
.chart-spotlight-grid a:hover,
.chart-grow-list a:hover {
    border-color: rgba(49, 215, 242, .3);
    background: rgba(49, 215, 242, .055);
}

.collab-role-focus-list,
.chart-grow-list {
    display: grid;
    gap: 7px;
}

.collab-role-focus-list span,
.chart-grow-list a {
    display: grid;
    gap: 2px;
    padding: 9px;
    text-decoration: none;
}

.collab-role-focus-list strong,
.chart-grow-list strong {
    overflow: hidden;
    color: #eef5f8;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collab-role-focus-list em,
.chart-grow-list span {
    color: #9aa9b7;
    font-size: .7rem;
    font-style: normal;
}

.collabs-page .collab-grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.collabs-page .collab-card {
    display: grid;
    gap: 10px;
    align-content: start;
        min-height: 0;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-view-tabs {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-daw-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-browser,
    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-project-drawer,
    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-daw-splitter {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-work-panel:not(.studio-playlist-panel) {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-playlist-panel.is-maximized {
        display: grid;
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 6px;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-playlist-panel > .studio-panel-title {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-playlist {
        min-height: 0;
        height: 100%;
        max-height: none;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-playlist-lanes {
        min-height: calc(100% - 34px);
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-playlist-toolbar {
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 5px !important;
        max-height: 42px;
        margin: 2px 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized :where(
        .studio-playlist-hint,
        .studio-arrange-builder,
        .studio-starter-generator,
        .studio-playlist-minimap,
        .studio-energy-map,
        .studio-arrangement-coach,
        .studio-section-navigator,
        .studio-toolbar-intel,
        .studio-toolbar-song,
        .studio-toolbar-edit,
        .studio-toolbar-lanes,
        .studio-loop-region-controls,
        .studio-project-io
    ) {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-playlist-maximized .studio-toolbar-grid {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

.collabs-page .collab-card-head {
    align-items: start;
}

.collabs-page .match-reasons {
    margin-top: 0;
}

.charts-page .discovery-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.charts-page .discovery-stat-card {
    min-height: 0;
}

body#top:not(.studio-app-body) .charts-page .chart-ranked-card,
body#top:not(.studio-app-body) .charts-page .chart-post-card,
body#top:not(.studio-app-body) .charts-page .chart-track-card {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding-top: 16px;
}

body#top:not(.studio-app-body) .charts-page .chart-rank-number {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(49, 215, 242, .26);
    border-radius: 999px;
    background: rgba(49, 215, 242, .08);
    color: #dffbff;
    font-size: .78rem;
    font-weight: 950;
    line-height: 1;
}

body#top:not(.studio-app-body) .charts-page .chart-ranked-main,
body#top:not(.studio-app-body) .charts-page .chart-post-card > div,
body#top:not(.studio-app-body) .charts-page .chart-track-card > div {
    min-width: 0;
}

body#top:not(.studio-app-body) .charts-page .chart-ranked-main small,
body#top:not(.studio-app-body) .charts-page .chart-post-card p,
body#top:not(.studio-app-body) .charts-page .chart-track-card p {
    display: block;
    margin-top: 6px;
    color: rgba(226, 238, 247, .68);
    font-size: .76rem;
    line-height: 1.35;
}

body#top:not(.studio-app-body) .charts-page .chart-profile-link {
    display: inline-flex;
    margin-top: 7px;
    font-size: .78rem;
    font-weight: 900;
}

body#top:not(.studio-app-body) .charts-page .chart-score {
    min-width: 72px;
}

body#top:not(.studio-app-body) .charts-page .chart-score em {
    display: block;
    color: rgba(226, 238, 247, .62);
    font-size: .7rem;
    font-style: normal;
    line-height: 1.25;
}

body#top:not(.studio-app-body) .charts-page .chart-command-panel strong {
    overflow-wrap: anywhere;
}

body.profile-page .profile-posts-heading-card {
    padding-block: 12px !important;
}

body.profile-page .profile-posts-heading-card .creator-highlights-head {
    margin-bottom: 0 !important;
}

body.profile-page .creator-highlights-card .creator-highlights-grid > div,
body.profile-page .profile-media-player-card,
body.profile-page .creator-workbench-card {
    border-color: rgba(132, 148, 169, .14) !important;
}

body.profile-page .creator-highlights-card .creator-highlight-item strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.profile-page .creator-workbench-card .ptx-project-card {
    background: rgba(8, 13, 20, .72) !important;
}

body.profile-page .creator-workbench-card .ptx-project-preview {
    background:
        linear-gradient(135deg, rgba(49, 215, 242, .1), rgba(47, 140, 255, .06)),
        #050a10 !important;
}

body.profile-page .profile-player-queue-item {
    cursor: pointer;
}

@media (max-width: 980px) {
    .collab-command-panel,
    .chart-command-panel,
    .chart-spotlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collab-shortlist-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .collab-command-panel,
    .chart-command-panel,
    .chart-spotlight-grid,
    .collab-shortlist-grid {
        grid-template-columns: 1fr;
    }

    body#top:not(.studio-app-body) .charts-page .chart-ranked-card,
    body#top:not(.studio-app-body) .charts-page .chart-post-card,
    body#top:not(.studio-app-body) .charts-page .chart-track-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body#top:not(.studio-app-body) .charts-page .chart-ranked-card .chart-score,
    body#top:not(.studio-app-body) .charts-page .chart-post-card .chart-score,
    body#top:not(.studio-app-body) .charts-page .chart-track-card .chart-score {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

/* Final mobile launch polish: phone-first layout, controls, and Studio desktop guard. */
.studio-mobile-block-feed {
    align-content: center;
    min-height: calc(100vh - 36px);
}

.studio-mobile-block-card {
    display: grid;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}

.studio-mobile-block-card h1 {
    margin: 0;
    color: #f4f8fb;
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.02;
}

.studio-mobile-block-card p {
    margin: 0;
    color: #aebdca;
    line-height: 1.5;
}

.studio-mobile-device-card {
    display: grid;
    gap: 5px;
    padding: 13px;
    border: 1px solid rgba(49, 215, 242, .22);
    border-radius: 12px;
    background: rgba(49, 215, 242, .06);
}

.studio-mobile-device-card strong {
    color: #eff9fc;
}

.studio-mobile-device-card span {
    color: #aebdca;
    font-size: .9rem;
    line-height: 1.4;
}

.studio-mobile-block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 760px) {
    body#top:not(.studio-app-body) {
        min-width: 0 !important;
    }

    body#top:not(.studio-app-body) .layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 8px 8px calc(var(--mobile-nav-space, 74px) + 16px) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body#top:not(.studio-app-body) .layout > .sidebar {
        display: none !important;
    }

    body#top:not(.studio-app-body) .layout > .rightbar {
        display: none !important;
    }

    body#top:not(.studio-app-body) :where(.feed, .home-feed, .profile-feed, .discovery-page, .charts-page, .collabs-page, .admin-page) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 10px !important;
    }

    body#top:not(.studio-app-body) :where(.hero-card, .legal-hero, .launch-discovery-hero, .home-hero-card.live-experience-hero) {
        min-height: 184px !important;
        max-height: none !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    body#top:not(.studio-app-body) :where(.hero-card h1, .legal-hero h1, .launch-discovery-hero h1, .home-hero-card h1) {
        max-width: 100% !important;
        font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
        line-height: 1.04 !important;
        letter-spacing: 0 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    body#top:not(.studio-app-body) :where(.hero-card p, .legal-hero p, .launch-discovery-hero p, .home-hero-card p) {
        max-width: 100% !important;
        font-size: .9rem !important;
        line-height: 1.42 !important;
    }

    body#top:not(.studio-app-body) :where(.hero-inline-actions, .home-hero-actions, .profile-launch-actions, .discovery-actions, .onboarding-actions, .studio-mobile-block-actions) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    body#top:not(.studio-app-body) :where(.hero-inline-actions > *, .home-hero-actions > *, .profile-launch-actions > *, .discovery-actions > *, .onboarding-actions > *, .studio-mobile-block-actions > *) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body#top:not(.studio-app-body) :where(.launch-cta, .compact-action-btn, .compact-action-link, .menu-link, .edit-profile-btn, button) {
        min-height: 40px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    body#top:not(.studio-app-body) :where(.post-card, .feed-post-card, .create-post, .profile-card, .search-user-card, .discovery-stat-card, .collab-card, .creator-presence-card, .ptx-project-card, .widget, .premium-widget, .event-card, .messages-layout, .notification-item, .conversation-link, .legal-card) {
        padding: 12px !important;
        border-radius: 13px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body#top:not(.studio-app-body) :where(.discovery-grid, .collab-grid, .ptx-project-grid, .creator-presence-grid, .community-live-grid, .chart-command-panel, .collab-command-panel, .chart-spotlight-grid, .collab-shortlist-grid, .creator-highlights-grid, .creator-workbench-grid) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body#top:not(.studio-app-body) :where(.feed-tabs-card, .discovery-quick-strip, .chart-chip-grid, .genre-tags, .mini-tags, .profile-media-tabs) {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body#top:not(.studio-app-body) :where(.feed-tabs-card, .discovery-quick-strip, .chart-chip-grid, .genre-tags, .mini-tags, .profile-media-tabs)::-webkit-scrollbar {
        display: none;
    }

    body#top:not(.studio-app-body) :where(.genre-tag, .mini-tags span, .hashtag-chip, .feed-tabs-card .menu-link, .discovery-quick-strip a, .profile-media-toggle) {
        flex: 0 0 auto !important;
        max-width: min(78vw, 260px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.profile-page .profile-main {
        padding-inline: 12px !important;
    }

    body.profile-page .profile-social-counts {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
    }

    body.profile-page .profile-player-main {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "controls"
            "title"
            "time"
            "progress"
            "queue"
            "embed" !important;
    }

    body.profile-page .profile-player-controls {
        justify-content: stretch !important;
    }

    body.profile-page .profile-player-controls .profile-player-btn {
        flex: 1 1 0 !important;
    }

    .messages-command-layout,
    .messages-layout {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .messages-sidebar,
    .messages-thread {
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .messages-list {
        max-height: 38vh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .messages-thread-body,
    .message-list,
    .messages-scroll {
        max-height: 52vh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .message-form-row,
    .comment-form,
    .create-post-form,
    .form-grid {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }

    body#top:not(.studio-app-body) :where(input, textarea, select, .form-control) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    .mobile-more-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        border-radius: 14px !important;
    }

    .mobile-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .studio-mobile-block-feed {
        min-height: calc(100vh - var(--mobile-nav-space, 74px) - 24px);
        align-content: center !important;
    }

    .studio-mobile-block-actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 420px) {
    body#top:not(.studio-app-body) :where(.hero-inline-actions, .home-hero-actions, .profile-launch-actions, .discovery-actions, .onboarding-actions, .studio-mobile-block-actions) {
        grid-template-columns: 1fr !important;
    }

    .mobile-more-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Final mobile nav guard: keep the persistent bottom menu visible above page-specific panels. */
@media (max-width: 760px) {
    :root {
        --mobile-nav-space: max(74px, calc(70px + env(safe-area-inset-bottom)));
    }

    body#top:not(.studio-app-body) {
        padding-bottom: calc(var(--mobile-nav-space) + 20px) !important;
    }

    body#top:not(.studio-app-body) .layout {
        padding-bottom: calc(var(--mobile-nav-space) + 18px) !important;
    }

    body#top:not(.studio-app-body) .mobile-bottom-nav,
    body#top:not(.studio-app-body) > .mobile-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 50000 !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        min-height: var(--mobile-nav-space) !important;
        max-width: 100vw !important;
        padding: 5px 7px calc(5px + env(safe-area-inset-bottom)) !important;
        transform: translateZ(0) !important;
        pointer-events: auto !important;
    }

    body#top:not(.studio-app-body) .mobile-nav-shell,
    body#top:not(.studio-app-body) > .mobile-bottom-nav .mobile-nav-shell {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        max-width: min(560px, 100%) !important;
        margin: 0 auto !important;
    }

    body#top:not(.studio-app-body) .mobile-more-panel,
    body#top:not(.studio-app-body) > .mobile-bottom-nav .mobile-more-panel {
        z-index: 50001 !important;
        bottom: calc(var(--mobile-nav-space) + 8px) !important;
    }
}

/* Final DAW topbar fit override. Markup has three columns: brand, transport, project tools. */
/* Final DAW topbar fit override. Keep controls compact without clipping. */
.studio-ready body.studio-app-body .studio-topbar,
.studio-ready .studio-topbar {
    display: grid !important;
    grid-template-columns: minmax(132px, 170px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(56px, auto) minmax(40px, auto) minmax(42px, auto) !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-height: 156px !important;
    max-height: none !important;
    overflow: visible !important;
}

.studio-ready .studio-brand-lockup {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    padding: 5px 6px !important;
    overflow: hidden !important;
}

.studio-ready .studio-brand-lockup h1 {
    display: grid !important;
    gap: 2px !important;
    overflow: hidden !important;
    font-size: .78rem !important;
    line-height: 1.08 !important;
}

.studio-ready .studio-build-badge {
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: none !important;
}

.studio-ready .studio-transport,
.studio-ready .studio-project-tools,
.studio-ready .studio-layout-controls {
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

.studio-ready .studio-transport {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
}

.studio-ready .studio-transport-fields {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

.studio-ready .studio-transport-fields .studio-control-label {
    min-width: 0 !important;
}

.studio-ready .studio-project-tools {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 4px !important;
}

.studio-ready .studio-project-action-group {
    flex-wrap: nowrap !important;
}

.studio-ready .studio-layout-controls {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    flex-wrap: wrap !important;
    align-content: start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    min-height: 46px !important;
}

.studio-ready .studio-cpu-meter {
    flex: 0 0 auto !important;
    min-width: 82px !important;
    white-space: nowrap !important;
}

.studio-ready .studio-record-voice-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.studio-ready .studio-project-tools input {
    min-width: 0 !important;
}

.studio-ready .studio-project-tools button,
.studio-ready .studio-layout-controls button {
    min-height: 30px !important;
    white-space: nowrap !important;
}

.studio-ready .studio-layout-controls > * {
    flex: 0 0 auto !important;
}

@media (max-width: 1560px) and (min-width: 1281px) {
    .studio-ready body.studio-app-body .studio-topbar,
    .studio-ready .studio-topbar {
        grid-template-columns: minmax(150px, 190px) minmax(460px, 1fr) minmax(230px, 340px) !important;
    }
}

/* Final DAW publishing controls flow override. Keep this after legacy studio media rules. */
.studio-ready body.studio-app-body .studio-project-publish-fold[open] .studio-project-publish-fields,
.studio-ready .studio-project-publish-fold[open] .studio-project-publish-fields {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: min(56vh, 620px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 0 0 7px 7px !important;
    background: transparent !important;
}

.studio-ready body.studio-app-body .studio-project-publish-fields:hover,
.studio-ready body.studio-app-body .studio-project-publish-fields:focus-within {
    max-height: min(56vh, 620px) !important;
}

.studio-ready .studio-project-publish-fields label {
    min-width: 0 !important;
    line-height: 1.25 !important;
}

.studio-ready .studio-project-publish-fields :where(input, textarea, select) {
    min-width: 0 !important;
    max-width: 100% !important;
}

.studio-ready .studio-project-publish-fields select,
.studio-ready .studio-project-publish-fields select option {
    background: #06120d !important;
    color: #f4fff8 !important;
}

.studio-ready .studio-project-publish-fields select {
    border-color: rgba(70, 255, 154, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.studio-ready .studio-project-publish-fields select:hover,
.studio-ready .studio-project-publish-fields select:focus {
    border-color: rgba(70, 255, 154, .48) !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(12, 36, 27, .98), rgba(5, 15, 14, .98)) !important;
    box-shadow: 0 0 0 2px rgba(70, 255, 154, .1), 0 0 16px rgba(70, 255, 154, .12) !important;
}

.studio-ready .studio-project-publish-fields select option:hover,
.studio-ready .studio-project-publish-fields select option:focus,
.studio-ready .studio-project-publish-fields select option:checked {
    background: #123426 !important;
    color: #ffffff !important;
}

.studio-ready .studio-project-publish-fields textarea {
    min-height: 62px !important;
    resize: vertical;
}

.studio-ready .studio-project-publish-fields .studio-project-toggle {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 7px !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

.studio-ready .studio-project-publish-fields .studio-project-toggle input {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    margin: 1px 0 0 !important;
}

.studio-ready .studio-project-rights-note {
    margin: 0 !important;
    line-height: 1.32 !important;
}

.studio-ready .studio-project-source-warning {
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(250, 255, 114, .26) !important;
    border-radius: 6px !important;
    color: #fff8bd !important;
    background: linear-gradient(90deg, rgba(250, 255, 114, .11), rgba(70, 255, 154, .045)) !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.studio-ready .studio-project-source-warning[hidden] {
    display: none !important;
}

.studio-ready .studio-project-publish-fold summary .made-in-ptx-badge {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Launch auth front door. */
.auth-launch-page {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 520px);
    gap: clamp(18px, 4vw, 44px);
    align-items: center;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.auth-launch-panel {
    display: grid;
    gap: 18px;
    min-width: 0;
    color: #f4f8fb;
}

.auth-launch-kicker {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(49, 215, 242, .28);
    border-radius: 999px;
    color: #8edfed;
    background: rgba(49, 215, 242, .07);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-launch-brand h1 {
    margin: 12px 0 0;
    max-width: 12ch;
    color: #f7fbfd;
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    line-height: .94;
    letter-spacing: 0;
}

.auth-launch-brand p {
    max-width: 680px;
    margin: 16px 0 0;
    color: #aebdca;
    font-size: clamp(.98rem, 1.6vw, 1.1rem);
    line-height: 1.55;
}

.auth-launch-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.auth-launch-cta-row .launch-cta {
    min-width: 164px;
}

.auth-community-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.auth-community-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(132, 148, 169, .18);
    border-radius: 999px;
    color: #d5e3ea;
    background: rgba(255, 255, 255, .045);
    font-size: .76rem;
    font-weight: 850;
}

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

.auth-launch-grid a,
.auth-launch-note,
.auth-login-preview,
.auth-join-reasons > div {
    min-width: 0;
    border: 1px solid rgba(132, 148, 169, .16);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)),
        rgba(8, 13, 20, .78);
}

.auth-launch-grid a {
    display: grid;
    gap: 4px;
    padding: 13px;
    color: inherit;
    text-decoration: none;
}

.auth-launch-grid a:hover {
    border-color: rgba(49, 215, 242, .32);
    background: rgba(49, 215, 242, .055);
}

.auth-launch-grid strong,
.auth-launch-note strong,
.auth-login-preview strong {
    color: #f2f8fb;
    font-size: .92rem;
    line-height: 1.25;
}

.auth-launch-grid span,
.auth-launch-note span,
.auth-login-preview span {
    color: #9aa9b7;
    font-size: .78rem;
    line-height: 1.35;
}

.auth-launch-note,
.auth-login-preview {
    display: grid;
    gap: 4px;
    padding: 12px 13px;
}

.auth-launch-note {
    border-color: rgba(242, 193, 78, .24);
    background: rgba(242, 193, 78, .055);
}

.auth-join-reasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.auth-join-reasons > div {
    display: grid;
    gap: 5px;
    padding: 12px;
}

.auth-join-reasons strong {
    color: #f2f8fb;
    font-size: .9rem;
}

.auth-join-reasons span {
    color: #9aa9b7;
    font-size: .76rem;
    line-height: 1.35;
}

.auth-launch-box {
    max-width: 520px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
        rgba(9, 14, 21, .92);
    border-color: rgba(132, 148, 169, .2);
    box-shadow: 0 28px 72px rgba(0, 0, 0, .46);
}

.auth-launch-box .auth-intro h1 {
    font-size: clamp(2rem, 5vw, 3.1rem);
    letter-spacing: 0;
}

.auth-login-preview {
    margin-top: 14px;
}

.auth-login-preview span {
    color: #8edfed;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.auth-login-preview em {
    color: #aebdca;
    font-size: .78rem;
    font-style: normal;
    line-height: 1.35;
}

.auth-join-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 12px;
    border: 1px solid rgba(49, 215, 242, .36);
    border-radius: 12px;
    color: #f8fdff;
    background:
        linear-gradient(180deg, rgba(49, 215, 242, .11), rgba(255, 255, 255, .01)),
        rgba(10, 16, 24, .96);
    font-weight: 900;
    text-decoration: none;
    box-shadow: inset 3px 0 0 rgba(49, 215, 242, .56), 0 8px 20px rgba(0, 0, 0, .22);
}

.auth-join-main:hover {
    border-color: rgba(49, 215, 242, .54);
    background: rgba(49, 215, 242, .09);
}

@media (max-width: 900px) {
    .auth-launch-page {
        grid-template-columns: 1fr;
        align-items: start;
        padding-block: 16px;
    }

    .auth-launch-brand h1 {
        max-width: 14ch;
        font-size: clamp(2.1rem, 10vw, 3.4rem);
    }

    .auth-launch-box {
        max-width: none;
    }

    .auth-join-reasons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .auth-page.auth-launch-page {
        padding: 12px;
    }

    .auth-launch-panel {
        gap: 12px;
    }

    .auth-launch-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .auth-launch-cta-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .auth-launch-cta-row .launch-cta {
        width: 100%;
        min-width: 0;
    }

    .auth-community-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .auth-community-strip::-webkit-scrollbar {
        display: none;
    }

    .auth-community-strip span {
        flex: 0 0 auto;
    }

    .auth-launch-brand h1 {
        max-width: none;
        font-size: clamp(1.9rem, 11vw, 2.65rem);
    }

    .auth-launch-brand p {
        font-size: .9rem;
        line-height: 1.43;
    }

    .auth-launch-grid a,
    .auth-launch-note,
    .auth-login-preview {
        padding: 10px;
        border-radius: 10px;
    }
}

/* Homepage action buttons polish: keep behavior, make the launch actions read as a stable control row. */
body.home-page .home-hero-actions.desktop-launch-only {
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

body.home-page .home-hero-actions .launch-cta-primary {
    min-height: 36px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(49, 215, 242, .34) !important;
    background: rgba(5, 12, 18, .54) !important;
    color: #dffbff !important;
    box-shadow: none !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}

body#top.home-page:not(.studio-app-body) .home-hero-actions .launch-cta-primary {
    border-color: rgba(160, 182, 196, .16) !important;
    background: rgba(5, 12, 18, .48) !important;
    color: #dce9ef !important;
    box-shadow: none !important;
    filter: none !important;
}

body.home-page .home-hero-actions .launch-cta-primary:hover,
body.home-page .home-hero-actions .launch-cta-primary:focus-visible,
body#top.home-page:not(.studio-app-body) .home-hero-actions .launch-cta-primary:hover,
body#top.home-page:not(.studio-app-body) .home-hero-actions .launch-cta-primary:focus-visible {
    border-color: rgba(49, 215, 242, .48) !important;
    background: rgba(49, 215, 242, .13) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

.message-request-pill {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border: 1px solid rgba(49, 215, 242, .28);
    border-radius: 999px;
    background: rgba(49, 215, 242, .1);
    color: #a8f4ff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.conversation-link.is-message-request {
    border-color: rgba(49, 215, 242, .24);
}

.message-request-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0;
    padding: 12px;
    border: 1px solid rgba(49, 215, 242, .22);
    border-radius: 12px;
    background: rgba(49, 215, 242, .075);
}

.message-request-banner strong {
    display: block;
    color: #effcff;
    margin-bottom: 3px;
}

.message-request-banner p {
    margin: 0;
}

.message-request-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 0 0 auto;
}

.message-request-locked {
    justify-content: center;
    text-align: center;
}

@media (max-width: 720px) {
    .message-request-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .message-request-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

body.home-page .home-hero-actions .inline-action-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
}

body.home-page .home-hero-actions .text-action-link,
body.home-page .home-hero-actions button.text-action-link {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 11px !important;
    border: 1px solid rgba(160, 182, 196, .16) !important;
    border-radius: 10px !important;
    background: rgba(5, 12, 18, .48) !important;
    color: #dce9ef !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.home-page .home-hero-actions .text-action-link:hover,
body.home-page .home-hero-actions button.text-action-link:hover,
body.home-page .home-hero-actions .text-action-link:focus-visible,
body.home-page .home-hero-actions button.text-action-link:focus-visible {
    border-color: rgba(49, 215, 242, .32) !important;
    background: rgba(49, 215, 242, .12) !important;
    color: #ffffff !important;
}

body.home-page .launch-command-strip {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: 10px !important;
}

body.home-page .launch-command-card {
    min-height: 116px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto 1fr !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    align-content: start !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border-color: rgba(157, 178, 194, .18) !important;
    background:
        linear-gradient(135deg, rgba(13, 26, 34, .9), rgba(6, 12, 18, .92)),
        rgba(8, 15, 22, .9) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.home-page .launch-command-card::before,
body.home-page .launch-command-card::after {
    display: none !important;
}

body.home-page .launch-command-card:hover,
body.home-page .launch-command-card:focus-visible {
    transform: translateY(-1px) !important;
    border-color: rgba(49, 215, 242, .38) !important;
    background:
        linear-gradient(135deg, rgba(18, 38, 48, .94), rgba(7, 15, 22, .94)),
        rgba(8, 15, 22, .94) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .3), 0 0 0 1px rgba(49, 215, 242, .12) inset !important;
}

body.home-page .launch-command-card-primary {
    border-color: rgba(49, 215, 242, .4) !important;
    background:
        linear-gradient(135deg, rgba(18, 50, 62, .95), rgba(7, 17, 24, .95)),
        rgba(8, 15, 22, .95) !important;
}

body.home-page .launch-command-card .module-glyph {
    grid-row: 1 / 4 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border-color: rgba(49, 215, 242, .26) !important;
    background: rgba(49, 215, 242, .1) !important;
    color: #a9f6ff !important;
}

body.home-page .launch-command-card span,
body.home-page .launch-command-card strong,
body.home-page .launch-command-card p,
body.home-page .launch-command-card .ptx-daw-alpha-note {
    grid-column: 2 !important;
    min-width: 0 !important;
}

body.home-page .launch-command-card span {
    color: #8ae8f4 !important;
    font-size: .68rem !important;
    letter-spacing: .08em !important;
}

body.home-page .launch-command-card strong {
    color: #f5fbff !important;
    font-size: .95rem !important;
    line-height: 1.18 !important;
}

body.home-page .launch-command-card p {
    color: #aebdc7 !important;
    font-size: .78rem !important;
    line-height: 1.38 !important;
}

body.home-page .launch-command-card .ptx-daw-alpha-note {
    margin: 2px 0 !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
}

@media (max-width: 1180px) {
    body.home-page .home-hero-actions.desktop-launch-only,
    body.home-page .home-hero-actions .inline-action-links {
        flex-wrap: wrap !important;
    }

    body.home-page .launch-command-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.home-page .home-hero-actions.desktop-launch-only {
        display: none !important;
    }

    body.home-page .launch-command-strip {
        grid-template-columns: 1fr !important;
    }

    body.home-page .launch-command-card {
        min-height: 0 !important;
    }
}
/* PULSATRAX Studio MIDI hardware alpha */
.studio-ready .studio-midi-panel {
    min-height: 260px;
}

.studio-ready .studio-midi-panel-body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.studio-ready .studio-midi-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(124, 247, 255, 0.18);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(33, 212, 253, 0.12), rgba(70, 255, 154, 0.08));
}

.studio-ready .studio-midi-hero div,
.studio-ready .studio-midi-device,
.studio-ready .studio-midi-event {
    display: grid;
    gap: 4px;
}

.studio-ready .studio-midi-hero strong,
.studio-ready .studio-midi-grid strong {
    color: #f3fbff;
}

.studio-ready .studio-midi-hero span,
.studio-ready .studio-midi-device span,
.studio-ready .studio-midi-event span,
.studio-ready .studio-midi-warning {
    color: rgba(226, 241, 247, 0.72);
    font-size: 0.82rem;
}

.studio-ready .studio-midi-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.studio-ready .studio-midi-controls label:not(.studio-browser-check) {
    display: grid;
    gap: 4px;
    color: rgba(226, 241, 247, 0.78);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.studio-ready .studio-midi-controls select {
    min-width: 190px;
}

.studio-ready .studio-midi-level-control input {
    width: 160px;
}

.studio-ready .studio-midi-level-control span {
    color: rgba(226, 241, 247, 0.72);
    font-size: 0.78rem;
    font-weight: 800;
}

.studio-ready .studio-midi-record-btn {
    align-self: stretch;
    min-height: 42px;
}

.studio-ready .studio-midi-record-btn.is-active {
    border-color: rgba(255, 91, 127, 0.78);
    background: linear-gradient(135deg, #ff5b7f, #ffbf47);
    color: #17070b;
    box-shadow: 0 0 18px rgba(255, 91, 127, 0.28);
}

.studio-ready .studio-midi-capture-summary {
    align-self: center;
    max-width: 360px;
    color: rgba(226, 241, 247, 0.72);
    font-size: 0.78rem;
    line-height: 1.35;
}

.studio-ready .studio-midi-grid {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(180px, 0.75fr) minmax(300px, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 12px;
}

.studio-ready .studio-midi-grid section {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 120px;
    max-height: 280px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(5, 12, 18, 0.58);
}

.studio-ready .studio-midi-events,
.studio-ready .studio-midi-devices {
    max-height: 214px;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.studio-ready .studio-midi-pad-rack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    max-height: 214px;
    overflow: auto;
    padding-right: 2px;
    overscroll-behavior: contain;
}

.studio-ready .studio-midi-pad-slot {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas:
        "num label"
        "num channel";
    align-items: center;
    gap: 1px 6px;
    min-height: 44px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
}

.studio-ready .studio-midi-pad-slot strong {
    grid-area: num;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #061116;
    background: #7cf7ff;
    font-size: 0.72rem;
}

.studio-ready .studio-midi-pad-slot span {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    color: #f3fbff;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-midi-pad-slot small {
    grid-area: channel;
    min-width: 0;
    overflow: hidden;
    color: rgba(226, 241, 247, 0.58);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready .studio-midi-pad-slot.is-active {
    border-color: rgba(70, 255, 154, 0.8);
    background: rgba(70, 255, 154, 0.16);
    box-shadow: inset 0 0 0 1px rgba(70, 255, 154, 0.28), 0 0 18px rgba(70, 255, 154, 0.14);
}

.studio-ready .studio-midi-device,
.studio-ready .studio-midi-event {
    padding: 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
}

.studio-ready .studio-midi-event.is-on {
    border-left: 3px solid #46ff9a;
}

.studio-ready .studio-midi-event.is-off {
    border-left: 3px solid rgba(255, 255, 255, 0.24);
}

.studio-ready .studio-midi-event.is-ignored {
    opacity: 0.62;
    border-left: 3px solid rgba(255, 184, 77, 0.68);
}

.studio-ready .studio-midi-performance {
    display: grid;
    gap: 8px;
}

.studio-ready .studio-midi-meter {
    display: grid;
    gap: 5px;
    padding: 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
}

.studio-ready .studio-midi-meter div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.studio-ready .studio-midi-meter span {
    color: rgba(226, 241, 247, 0.72);
    font-size: 0.78rem;
}

.studio-ready .studio-midi-meter-track {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 241, 247, 0.12);
}

.studio-ready .studio-midi-meter-track i {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    border-radius: inherit;
    background: linear-gradient(90deg, #46ff9a, #7cf7ff);
}

@media (max-width: 900px) {
    .studio-ready .studio-midi-hero,
    .studio-ready .studio-midi-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-ready .studio-midi-grid {
        grid-template-columns: 1fr;
    }

    .studio-ready .studio-midi-pad-rack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Studio level final layout pass. Keep this late so it wins over legacy DAW overrides. */
.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner {
    background:
        radial-gradient(circle at 18% 8%, rgba(70, 255, 154, 0.12), transparent 34%),
        linear-gradient(180deg, #06120d 0%, #05080a 58%, #07100e 100%);
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced,
.studio-ready body.studio-app-body .studio-app.is-studio-level-pro {
    background:
        radial-gradient(circle at 18% 8%, rgba(70, 255, 154, 0.12), transparent 34%),
        linear-gradient(180deg, #06120d 0%, #05080a 58%, #07100e 100%);
}

@media (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-daw-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) minmax(190px, 30vh) !important;
        grid-template-areas:
            "playlist"
            "library" !important;
        gap: 10px !important;
        height: calc(100vh - 194px) !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser {
        grid-area: library !important;
        display: grid !important;
        grid-template-columns: minmax(240px, 0.32fr) minmax(0, 0.68fr) !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        border-color: rgba(70, 255, 154, 0.26) !important;
        background: linear-gradient(180deg, rgba(8, 24, 18, 0.98), rgba(5, 12, 12, 0.98)) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-panel-title,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-browser-controls,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-context-hint {
        grid-column: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-template-strip,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-browser-tabs,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-list {
        grid-column: 2 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-list {
        grid-row: 1 / span 3 !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
        align-content: start !important;
        gap: 6px !important;
        padding: 6px !important;
        min-height: 0 !important;
        overflow: auto !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-item {
        grid-template-columns: 16px minmax(0, 1fr) 28px 30px !important;
        grid-template-rows: 34px 18px !important;
        grid-template-areas:
            "drag main preview add"
            "drag meta fav fav" !important;
        min-height: 58px !important;
        max-height: 70px !important;
        padding: 5px 6px !important;
        gap: 4px !important;
        border-radius: 7px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-main {
        min-height: 0 !important;
        padding: 3px 5px !important;
        gap: 2px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-main strong {
        font-size: .68rem !important;
        line-height: 1.05 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-main .studio-mini-wave {
        height: 16px !important;
        margin-top: 2px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-drag-handle {
        width: 16px !important;
        min-height: 0 !important;
        font-size: .7rem !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
        line-height: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-meta b {
        padding: 2px 3px !important;
        font-size: .48rem !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-preview-btn,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-clip-btn,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-fav-btn {
        width: 28px !important;
        min-width: 28px !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: .62rem !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-preview-btn .studio-preview-label,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser .studio-sample-error {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
        grid-area: playlist !important;
        height: 100% !important;
        min-height: 0 !important;
        border-color: rgba(70, 255, 154, 0.2) !important;
        background: linear-gradient(180deg, rgba(7, 14, 12, 0.98), rgba(4, 8, 9, 0.98)) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-playlist-panel {
        height: 100% !important;
        min-height: 0 !important;
        border-color: rgba(70, 255, 154, 0.24) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-project-drawer {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-daw-grid {
        grid-template-columns: minmax(270px, 300px) minmax(0, 1fr) 0 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-project-drawer {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-daw-grid {
        grid-template-columns: minmax(280px, var(--studio-browser-width, 328px)) minmax(0, 1fr) minmax(220px, var(--studio-project-width, 280px)) !important;
    }
}

/* Studio tier architecture pass: shared dark-neon DAW language, different complexity by level. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro) {
    --studio-panel-radius: 8px;
    --studio-panel-border: rgba(124, 247, 255, 0.13);
    --studio-panel-surface: rgba(5, 10, 14, 0.94);
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner {
    --studio-browser-width: clamp(230px, 20vw, 300px);
    --studio-project-width: clamp(210px, 18vw, 280px);
    --studio-level-accent: #46ff9a;
    background:
        radial-gradient(circle at 12% 12%, rgba(70, 255, 154, 0.13), transparent 28%),
        radial-gradient(circle at 85% 8%, rgba(124, 247, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #06120d 0%, #05080a 58%, #07100e 100%);
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced {
    --studio-level-accent: #46ff9a;
    background:
        radial-gradient(circle at 12% 12%, rgba(70, 255, 154, 0.13), transparent 28%),
        radial-gradient(circle at 85% 8%, rgba(124, 247, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #06120d 0%, #05080a 58%, #07100e 100%);
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-pro {
    --studio-level-accent: #46ff9a;
    background:
        radial-gradient(circle at 12% 12%, rgba(70, 255, 154, 0.13), transparent 28%),
        radial-gradient(circle at 85% 8%, rgba(124, 247, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #06120d 0%, #05080a 58%, #07100e 100%);
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner {
    --studio-level-accent: #46ff9a;
    background:
        radial-gradient(circle at 12% 12%, rgba(70, 255, 154, 0.13), transparent 28%),
        radial-gradient(circle at 85% 8%, rgba(124, 247, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #06120d 0%, #05080a 58%, #07100e 100%);
}

@media (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-daw-grid {
        display: grid !important;
        grid-template-columns: minmax(230px, var(--studio-browser-width, 285px)) minmax(0, 1fr) minmax(210px, var(--studio-project-width, 245px)) !important;
        grid-template-rows: minmax(0, 1fr) minmax(92px, 18vh) !important;
        grid-template-areas:
            "browser workspace projects"
            "browser workspace projects" !important;
        gap: 8px !important;
        height: calc(100vh - 188px) !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-browser {
        grid-area: browser !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto minmax(0, .24fr) minmax(0, 1fr) !important;
        gap: 6px !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        border-color: rgba(70, 255, 154, 0.24) !important;
        background: linear-gradient(180deg, rgba(7, 20, 15, 0.98), rgba(4, 10, 11, 0.98)) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
        grid-area: workspace !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) minmax(96px, 18vh) !important;
        gap: 8px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-color: rgba(70, 255, 154, 0.18) !important;
        background: linear-gradient(180deg, rgba(5, 12, 14, 0.96), rgba(3, 7, 9, 0.96)) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-playlist-panel {
        display: grid !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 0 !important;
        height: 100% !important;
        border-color: rgba(70, 255, 154, 0.24) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-mixer-panel {
        display: grid !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        border-color: rgba(124, 247, 255, 0.18) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-project-drawer {
        grid-area: projects !important;
        display: grid !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: auto !important;
        border-color: rgba(70, 255, 154, 0.22) !important;
        background: linear-gradient(180deg, rgba(6, 16, 15, 0.98), rgba(4, 8, 10, 0.98)) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-sample-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 5px !important;
        min-height: 0 !important;
        padding: 4px !important;
        overflow: auto !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-sample-item {
        grid-template-columns: 14px minmax(0, 1fr) 28px !important;
        grid-template-rows: 34px 18px 26px !important;
        grid-template-areas:
            "drag main fav"
            "drag meta meta"
            "preview preview add" !important;
        min-height: 82px !important;
        max-height: 92px !important;
        padding: 5px !important;
        gap: 4px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-mixer {
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(112px, 1fr) !important;
        grid-template-columns: none !important;
        gap: 6px !important;
        height: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-channel-strip {
        min-width: 112px !important;
        min-height: 0 !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-channel-strip label {
        font-size: .58rem !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-channel-strip input[type="range"] {
        height: 14px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-project-drawer .studio-saved-projects-fold,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-project-drawer .studio-share-placeholder {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-daw-grid {
        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) 0 !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(240px, .32fr) !important;
        grid-template-rows: minmax(0, 1fr) minmax(92px, 16vh) !important;
        gap: 8px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-playlist-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-pattern-panel,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-sampler-panel,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-midi-panel {
        display: grid !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-pattern-panel:not(.is-active) {
        opacity: .96 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-sampler-panel:not(.is-active),
    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-midi-panel:not(.is-active) {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-mixer-panel {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-mixer,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-mixer,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-mixer {
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(128px, 1fr) !important;
        grid-template-columns: none !important;
        gap: 6px !important;
        height: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-channel-strip,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-channel-strip,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-channel-strip {
        min-width: 128px !important;
        min-height: 0 !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-channel-strip label,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-channel-strip label,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-channel-strip label {
        font-size: .58rem !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-project-drawer {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-daw-grid {
        grid-template-columns: minmax(280px, var(--studio-browser-width, 328px)) minmax(0, 1fr) minmax(240px, var(--studio-project-width, 300px)) !important;
        gap: 8px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
        grid-template-columns: minmax(260px, var(--studio-browser-width, 285px)) minmax(0, 1fr) minmax(300px, var(--studio-project-width, 330px)) !important;
        gap: 8px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer {
        display: grid !important;
        border-color: rgba(70, 255, 154, 0.26) !important;
        background: linear-gradient(180deg, rgba(7, 20, 15, 0.98), rgba(4, 10, 11, 0.98)) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser {
        gap: 6px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-color: rgba(70, 255, 154, 0.24) !important;
        background: linear-gradient(180deg, rgba(7, 20, 15, 0.98), rgba(4, 10, 11, 0.98)) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-template-strip,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser-tabs,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser-filter-chips {
        gap: 5px !important;
        min-height: 0 !important;
        padding: 2px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser-tabs button,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser-filter-chips button {
        min-height: 26px !important;
        padding: 0 8px !important;
        border-radius: 7px !important;
        font-size: .64rem !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 5px !important;
        min-height: 0 !important;
        padding: 4px !important;
        overflow: auto !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-item {
        grid-template-columns: 14px minmax(0, 1fr) 28px !important;
        grid-template-rows: 34px 18px 26px !important;
        grid-template-areas:
            "drag main fav"
            "drag meta meta"
            "preview preview add" !important;
        min-height: 82px !important;
        max-height: 92px !important;
        padding: 5px !important;
        gap: 4px !important;
        border-radius: 7px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-main {
        min-height: 0 !important;
        padding: 3px 5px !important;
        gap: 2px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-main strong {
        font-size: .68rem !important;
        line-height: 1.05 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-main .studio-mini-wave {
        height: 16px !important;
        margin-top: 2px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
        line-height: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-meta b {
        padding: 2px 3px !important;
        font-size: .48rem !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-preview-btn,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-clip-btn,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-fav-btn {
        width: 28px !important;
        min-width: 28px !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: .62rem !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-preview-btn .studio-preview-label,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sample-error {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Final waveform skin: layered sound-energy bands for loop previews and clips. */
.studio-ready .studio-mini-wave,
.studio-ready .studio-loop-lines,
.studio-ready .studio-waveform-large {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    overflow: hidden !important;
    border: 1px solid rgba(124, 247, 255, 0.12) !important;
    border-radius: 7px !important;
    background:
        linear-gradient(180deg, rgba(124, 247, 255, 0.08), rgba(70, 255, 154, 0.045)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 12px) !important;
}

.studio-ready .studio-mini-wave::before,
.studio-ready .studio-loop-lines::before,
.studio-ready .studio-waveform-large::before {
    content: "" !important;
    position: absolute !important;
    inset: 50% 0 auto !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(250, 255, 114, 0.58), rgba(124, 247, 255, 0.58), transparent) !important;
    opacity: .72 !important;
    pointer-events: none !important;
}

.studio-ready .studio-mini-wave i,
.studio-ready .studio-loop-lines i,
.studio-ready .studio-waveform-large i {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 2px !important;
    height: 100% !important;
    background: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

.studio-ready .studio-mini-wave i::before,
.studio-ready .studio-loop-lines i::before,
.studio-ready .studio-waveform-large i::before,
.studio-ready .studio-mini-wave i::after,
.studio-ready .studio-loop-lines i::after,
.studio-ready .studio-waveform-large i::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}

/* Opera/laptop playlist rescue: keep the center timeline scrollable and height-adjustable in every DAW level. */
@media (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-work-panel.is-active,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
        display: grid !important;
        grid-template-rows: auto auto auto 10px minmax(160px, 1fr) auto auto auto auto !important;
        min-height: min(var(--studio-playlist-height, 430px), calc(100vh - 170px)) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced) .studio-workspace {
        grid-template-rows: minmax(240px, var(--studio-playlist-height, 430px)) minmax(112px, 16vh) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
        height: min(var(--studio-playlist-height, 430px), calc(100vh - 170px)) !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-height-grip {
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        width: 100% !important;
        height: 10px !important;
        min-height: 10px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 6px !important;
        background: linear-gradient(90deg, transparent, rgba(70, 255, 154, 0.22), rgba(124, 247, 255, 0.24), transparent) !important;
        cursor: ns-resize !important;
        touch-action: none !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-height-grip span {
        display: block !important;
        width: 42px !important;
        height: 3px !important;
        border-radius: 99px !important;
        background: rgba(236, 255, 245, 0.58) !important;
        box-shadow: 0 -3px 0 rgba(236, 255, 245, 0.22), 0 3px 0 rgba(236, 255, 245, 0.22) !important;
        pointer-events: none !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-height-grip:hover,
    .studio-ready body.studio-app-body .studio-playlist-height-grip.is-dragging {
        background: linear-gradient(90deg, transparent, rgba(70, 255, 154, 0.38), rgba(124, 247, 255, 0.42), transparent) !important;
    }

    .studio-ready body.studio-app-body .studio-playlist {
        min-height: 160px !important;
        height: 100% !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable both-edges !important;
        touch-action: pan-x pan-y pinch-zoom !important;
    }
}

.studio-ready .studio-mini-wave i::before,
.studio-ready .studio-loop-lines i::before,
.studio-ready .studio-waveform-large i::before {
    bottom: calc(50% - (var(--low, 45%) * .5)) !important;
    height: var(--low, 45%) !important;
    background: linear-gradient(180deg, rgba(124, 247, 255, 0.95), rgba(70, 255, 154, 0.76)) !important;
    box-shadow: 0 0 7px rgba(70, 255, 154, 0.28) !important;
}

.studio-ready .studio-mini-wave i::after,
.studio-ready .studio-loop-lines i::after,
.studio-ready .studio-waveform-large i::after {
    top: calc(50% - (var(--high, 34%) * .5)) !important;
    height: var(--high, 34%) !important;
    background: linear-gradient(180deg, rgba(255, 184, 77, 0.84), rgba(255, 79, 216, 0.62)) !important;
    transform: scaleX(.55) !important;
    opacity: .72 !important;
}

/* Professional Studio browser/card parity: every level uses the compact Beginner loop language. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 4px !important;
    overflow: auto !important;
    overflow-anchor: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-item {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) 54px 28px !important;
    grid-template-rows: 34px 18px 26px !important;
    grid-template-areas:
        "drag main main fav"
        "drag meta meta meta"
        "preview preview similar add" !important;
    min-height: 82px !important;
    max-height: 92px !important;
    gap: 4px !important;
    padding: 5px !important;
    border: 1px solid rgba(70, 255, 154, .14) !important;
    border-radius: 7px !important;
    background:
        linear-gradient(90deg, rgba(70, 255, 154, .075), transparent 44%),
        linear-gradient(180deg, rgba(8, 18, 16, .98), rgba(4, 9, 11, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    overflow-anchor: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-item:hover,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-item.is-selected,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-item.is-previewing {
    border-color: rgba(70, 255, 154, .38) !important;
    background:
        linear-gradient(90deg, rgba(70, 255, 154, .14), transparent 48%),
        linear-gradient(180deg, rgba(12, 28, 23, .99), rgba(5, 13, 15, .99)) !important;
    box-shadow: 0 0 18px rgba(70, 255, 154, .1), inset 3px 0 0 rgba(70, 255, 154, .58) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-drag-handle {
    grid-area: drag !important;
    width: 14px !important;
    min-width: 14px !important;
    min-height: 0 !important;
    color: rgba(124, 247, 255, .72) !important;
    font-size: .66rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-main {
    grid-area: main !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3px 5px !important;
    gap: 2px !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, .16) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-main strong {
    overflow: hidden !important;
    color: #f2fff8 !important;
    font-size: .68rem !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-category,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-tags,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-error,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-preview-btn .studio-preview-label {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-meta {
    grid-area: meta !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    min-width: 0 !important;
    line-height: 1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-sample-meta b {
    min-width: 0 !important;
    padding: 2px 3px !important;
    border-color: rgba(124, 247, 255, .11) !important;
    color: #bde9db !important;
    background: rgba(255, 255, 255, .035) !important;
    font-size: .48rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-preview-btn {
    grid-area: preview !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-clip-btn {
    grid-area: add !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-similar-btn {
    grid-area: similar !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-fav-btn {
    grid-area: fav !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-preview-btn,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-similar-btn,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-clip-btn,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-browser .studio-fav-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: .62rem !important;
}

.studio-ready body.studio-app-body .studio-similar-panel {
    position: fixed;
    top: 86px;
    right: 12px;
    bottom: 12px;
    z-index: 24000;
    width: min(var(--intelligence-panel-width, 360px), calc(100vw - 24px));
    max-height: none;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(132, 148, 169, .18);
    border-radius: 8px;
    background: rgba(8, 12, 16, .97);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .44);
}

.studio-ready body.studio-app-body .studio-similar-panel.is-open {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.studio-ready body.studio-app-body .studio-similar-panel.is-collapsed {
    width: 46px;
    grid-template-rows: 1fr;
}

.studio-ready body.studio-app-body .studio-similar-panel.is-collapsed .studio-similar-head,
.studio-ready body.studio-app-body .studio-similar-panel.is-collapsed .studio-similar-body,
.studio-ready body.studio-app-body .studio-similar-panel.is-collapsed .studio-intelligence-resize {
    display: none;
}

.studio-ready body.studio-app-body .studio-intelligence-rail {
    display: none;
}

.studio-ready body.studio-app-body .studio-similar-panel.is-collapsed .studio-intelligence-rail {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 8px 6px;
    border-left: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
}

.studio-ready body.studio-app-body .studio-intelligence-rail button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(132, 148, 169, .2);
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    color: #d8e4ea;
    font-size: .66rem;
    font-weight: 900;
}

.studio-ready body.studio-app-body .studio-intelligence-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
    transform: translateX(-7px);
}

.studio-ready body.studio-app-body .studio-intelligence-resize::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 7px;
    width: 1px;
    background: rgba(132, 148, 169, .28);
}

.studio-ready body.studio-app-body .studio-similar-panel.is-resizing .studio-similar-head,
.studio-ready body.studio-app-body .studio-similar-panel.is-resizing .studio-similar-body {
    pointer-events: none;
}

.studio-ready body.studio-app-body.studio-intelligence-resizing,
.studio-ready body.studio-app-body.studio-intelligence-resizing * {
    cursor: ew-resize !important;
    user-select: none !important;
}

.studio-ready body.studio-app-body .studio-similar-head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
}

.studio-ready body.studio-app-body .studio-similar-head span {
    display: block;
    color: #8fa5b2;
    font-size: .58rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-similar-head strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #eef7fb;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready body.studio-app-body .studio-similar-body {
    display: grid;
    align-content: start;
    gap: 6px;
    overflow: auto;
    padding: 8px;
}

@media (max-width: 760px) {
    .studio-ready body.studio-app-body .studio-similar-panel {
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 360px);
        max-width: calc(100vw - 44px);
        border-radius: 8px 0 0 8px;
        transform: translateX(100%);
        transition: transform .18s ease;
    }

    .studio-ready body.studio-app-body .studio-similar-panel.is-open {
        transform: translateX(0);
    }

    .studio-ready body.studio-app-body .studio-similar-panel.is-collapsed {
        width: 44px;
        transform: translateX(0);
    }

    .studio-ready body.studio-app-body .studio-intelligence-resize {
        display: none;
    }

    .studio-ready body.studio-app-body .studio-similar-head {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }

    .studio-ready body.studio-app-body .studio-similar-head .studio-secondary-btn {
        min-width: 54px;
        padding-inline: 8px;
    }
}

.studio-ready body.studio-app-body .studio-similar-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 54px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(124, 247, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: #edfdf6;
    text-align: left;
}

.studio-ready body.studio-app-body .studio-result-loop {
    cursor: grab;
}

.studio-ready body.studio-app-body .studio-result-loop:active {
    cursor: grabbing;
}

.studio-ready body.studio-app-body .studio-result-loop.is-selected {
    border-color: rgba(70, 255, 154, .45);
    background: rgba(70, 255, 154, .075);
}

.studio-ready body.studio-app-body .studio-result-loop.is-previewing {
    border-color: rgba(124, 247, 255, .44);
    box-shadow: 0 0 18px rgba(124, 247, 255, .1);
}

.studio-ready body.studio-app-body .studio-similar-item:hover {
    border-color: rgba(70, 255, 154, .36);
    background: rgba(70, 255, 154, .08);
}

.studio-ready body.studio-app-body .studio-similar-item span,
.studio-ready body.studio-app-body .studio-similar-item strong,
.studio-ready body.studio-app-body .studio-similar-item em {
    min-width: 0;
}

.studio-ready body.studio-app-body .studio-similar-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready body.studio-app-body .studio-similar-item em {
    display: block;
    overflow: hidden;
    color: #bde9db;
    font-size: .7rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready body.studio-app-body .studio-recommendation-item small {
    display: block;
    overflow: hidden;
    color: #8fa6a0;
    font-size: .64rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready body.studio-app-body .studio-analysis-report {
    display: grid;
    gap: 10px;
}

.studio-ready body.studio-app-body .studio-analysis-section {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(124, 247, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.studio-ready body.studio-app-body .studio-analysis-section h3 {
    margin: 0;
    color: #f2fff8;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-analysis-section ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
}

.studio-ready body.studio-app-body .studio-analysis-section li,
.studio-ready body.studio-app-body .studio-analysis-section p {
    margin: 0;
    color: #c7d9d4;
    font-size: .76rem;
    line-height: 1.35;
}

.studio-ready body.studio-app-body .studio-analysis-loops {
    display: grid;
    gap: 6px;
}

.studio-ready body.studio-app-body .studio-coach-panel {
    display: grid;
    gap: 10px;
}

.studio-ready body.studio-app-body .studio-coach-rack-panel {
    display: grid;
    gap: 10px;
    min-height: 0;
    overflow: auto;
    padding: 8px;
}

.studio-ready body.studio-app-body .studio-coach-rack-panel.is-hidden,
.studio-ready body.studio-app-body .is-hidden-by-coach {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-studio-coach-mode {
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-coach-panel-actions {
    display: flex;
    justify-content: flex-end;
}

.studio-ready body.studio-app-body .studio-coach-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.studio-ready body.studio-app-body .studio-coach-preset {
    min-height: 28px;
    padding: 6px 8px;
    border: 1px solid rgba(124, 247, 255, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .045);
    color: #d9fff2;
    font-size: .68rem;
    font-weight: 800;
}

.studio-ready body.studio-app-body .studio-coach-preset:hover,
.studio-ready body.studio-app-body .studio-coach-preset.is-active {
    border-color: rgba(70, 255, 154, .42);
    background: rgba(70, 255, 154, .1);
}

.studio-ready body.studio-app-body .studio-coach-question-form {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(124, 247, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.studio-ready body.studio-app-body .studio-coach-question-form label {
    color: #f2fff8;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-coach-question-form textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    border: 1px solid rgba(124, 247, 255, .18);
    border-radius: 7px;
    padding: 8px;
    background: rgba(0, 0, 0, .22);
    color: #f4fff9;
    font: inherit;
    font-size: .78rem;
    line-height: 1.35;
}

.studio-ready body.studio-app-body .studio-coach-mode,
.studio-ready body.studio-app-body .studio-coach-quota {
    display: block;
    margin: -2px 0 6px;
    color: rgba(199, 217, 212, .72);
    font-size: .68rem;
    line-height: 1.35;
}

.studio-ready body.studio-app-body .studio-coach-suggested {
    padding-top: 2px;
}

.studio-ready body.studio-app-body .studio-coach-chat,
.studio-ready body.studio-app-body .studio-coach-section {
    display: grid;
    gap: 8px;
}

.studio-ready body.studio-app-body .studio-coach-message,
.studio-ready body.studio-app-body .studio-coach-section {
    padding: 10px;
    border: 1px solid rgba(124, 247, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.studio-ready body.studio-app-body .studio-coach-message.is-user {
    border-color: rgba(70, 255, 154, .22);
    background: rgba(70, 255, 154, .055);
}

.studio-ready body.studio-app-body .studio-coach-message strong,
.studio-ready body.studio-app-body .studio-coach-section h3 {
    display: block;
    margin: 0 0 6px;
    color: #f2fff8;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-coach-message p,
.studio-ready body.studio-app-body .studio-coach-message li,
.studio-ready body.studio-app-body .studio-coach-section li {
    margin: 0;
    color: #c7d9d4;
    font-size: .76rem;
    line-height: 1.4;
}

.studio-ready body.studio-app-body .studio-coach-message ul,
.studio-ready body.studio-app-body .studio-coach-section ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
}

.studio-ready body.studio-app-body .studio-arrangement-suggestions {
    display: grid;
    gap: 8px;
}

.studio-ready body.studio-app-body .studio-arrangement-suggestion {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(124, 247, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.studio-ready body.studio-app-body .studio-arrangement-suggestion-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.studio-ready body.studio-app-body .studio-arrangement-suggestion-main strong,
.studio-ready body.studio-app-body .studio-arrangement-suggestion-main em,
.studio-ready body.studio-app-body .studio-arrangement-suggestion-main span,
.studio-ready body.studio-app-body .studio-arrangement-suggestion-main small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready body.studio-app-body .studio-arrangement-suggestion-main strong {
    color: #f2fff8;
    font-size: .82rem;
}

.studio-ready body.studio-app-body .studio-arrangement-suggestion-main span {
    color: #7cf7ff;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-arrangement-suggestion-main em {
    color: #d9fff2;
    font-size: .72rem;
    font-style: normal;
}

.studio-ready body.studio-app-body .studio-arrangement-suggestion-main small {
    color: #8fa6a0;
    font-size: .66rem;
    line-height: 1.25;
}

.studio-ready body.studio-app-body .studio-result-loop-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.studio-ready body.studio-app-body .studio-result-loop-actions button {
    display: inline-flex !important;
    grid-area: auto !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    border-radius: 7px;
    opacity: 1;
    visibility: visible;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-similar-panel .studio-result-loop-actions .studio-preview-btn .studio-preview-label {
    display: inline !important;
}

.studio-ready body.studio-app-body .studio-similar-item b,
.studio-ready body.studio-app-body .studio-similar-item i {
    color: #d9fff2;
    font-size: .72rem;
    font-style: normal;
    text-align: right;
}

/* Professional waveform skin: mirrored peak/RMS bars with spectral air, used by browser cards, clips, and sampler. */
.studio-ready .studio-mini-wave,
.studio-ready .studio-loop-lines,
.studio-ready .studio-waveform-large {
    align-items: center !important;
    gap: 1px !important;
    border-color: rgba(70, 255, 154, .17) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 20%, transparent 80%, rgba(255, 255, 255, .025)),
        repeating-linear-gradient(90deg, rgba(124, 247, 255, .05) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, rgba(3, 10, 12, .92), rgba(3, 16, 13, .9)) !important;
}

.studio-ready .studio-mini-wave::after,
.studio-ready .studio-loop-lines::after,
.studio-ready .studio-waveform-large::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, transparent, rgba(70, 255, 154, .12), transparent),
        linear-gradient(180deg, transparent 48%, rgba(70, 255, 154, .16) 49%, rgba(124, 247, 255, .2) 50%, transparent 51%) !important;
    opacity: .78 !important;
    pointer-events: none !important;
}

.studio-ready .studio-mini-wave i,
.studio-ready .studio-loop-lines i,
.studio-ready .studio-waveform-large i {
    min-width: 1px !important;
    opacity: var(--bar-alpha, .86) !important;
}

.studio-ready .studio-mini-wave i {
    min-width: 2px !important;
}

.studio-ready .studio-mini-wave i,
.studio-ready .studio-loop-lines i,
.studio-ready .studio-waveform-large i {
    background:
        linear-gradient(180deg, transparent calc(50% - (var(--rms, 28%) * .5)), rgba(250, 255, 114, .44) calc(50% - (var(--rms, 28%) * .5)), rgba(250, 255, 114, .5) calc(50% + (var(--rms, 28%) * .5)), transparent calc(50% + (var(--rms, 28%) * .5))) !important;
}

.studio-ready .studio-mini-wave i::before,
.studio-ready .studio-loop-lines i::before,
.studio-ready .studio-waveform-large i::before {
    left: calc((100% - var(--bar-width, 72%)) * .5) !important;
    right: calc((100% - var(--bar-width, 72%)) * .5) !important;
    bottom: calc(50% - (var(--low, 45%) * .5)) !important;
    height: var(--low, 45%) !important;
    background: linear-gradient(180deg, #7cf7ff 0%, #46ff9a 46%, #1ae6c5 100%) !important;
    box-shadow: 0 0 6px rgba(70, 255, 154, .32) !important;
}

.studio-ready .studio-mini-wave i::after,
.studio-ready .studio-loop-lines i::after,
.studio-ready .studio-waveform-large i::after {
    left: 24% !important;
    right: 24% !important;
    top: calc(50% - (var(--high, 24%) * .5)) !important;
    height: var(--high, 24%) !important;
    background: linear-gradient(180deg, rgba(255, 215, 106, .88), rgba(255, 79, 216, .7)) !important;
    filter: saturate(1.1) !important;
    opacity: .7 !important;
    transform: none !important;
}

/* Final playlist resize override: allow laptop users to make the center timeline taller or shorter instead of trapping it in a fixed viewport grid. */
@media (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
        height: auto !important;
        min-height: calc(100vh - 188px) !important;
        overflow: visible !important;
        align-items: start !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced) .studio-workspace {
        grid-template-rows: minmax(240px, var(--studio-playlist-height, 430px)) minmax(112px, 16vh) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
        display: grid !important;
        grid-template-rows: auto auto auto 10px minmax(160px, 1fr) auto auto auto auto !important;
        height: var(--studio-playlist-height, 430px) !important;
        min-height: 240px !important;
        max-height: none !important;
        align-content: stretch !important;
        overflow: hidden !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-panel-title {
        grid-row: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar {
        grid-row: 2 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-hint {
        grid-row: 3 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-height-grip {
        grid-row: 4 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
        grid-row: 5 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: auto !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-minimap {
        grid-row: 6 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-energy-map {
        grid-row: 7 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-arrangement-coach {
        grid-row: 8 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-section-navigator {
        grid-row: 9 !important;
    }
}

/* Short laptop viewport rescue: keep actual Playlist lanes visible without requiring browser F11. */
@media (min-width: 761px) and (max-height: 680px) {
    body.studio-app-body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .studio-app-body .studio-shell,
    .studio-app-body .studio-app {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-app {
        grid-template-rows: auto auto !important;
    }

    .studio-ready body.studio-app-body .studio-topbar,
    .studio-ready .studio-topbar {
        grid-template-rows: auto auto auto auto !important;
        min-height: 0 !important;
        max-height: min(44vh, 252px) !important;
        padding: 4px 8px !important;
        gap: 4px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
    }

    .studio-ready .studio-brand-lockup {
        min-height: 0 !important;
    }

    .studio-ready .studio-app-mark {
        width: 34px !important;
        height: 34px !important;
        font-size: .7rem !important;
    }

    .studio-ready .studio-kicker {
        display: none !important;
    }

    .studio-ready .studio-brand-lockup h1 {
        font-size: .9rem !important;
        line-height: 1.1 !important;
    }

    .studio-ready .studio-transport,
    .studio-ready .studio-project-tools {
        gap: 4px !important;
    }

    .studio-ready .studio-layout-controls {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 32px !important;
        padding: 3px 0 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin !important;
        -webkit-overflow-scrolling: touch;
    }

    .studio-ready .studio-transport-btn,
    .studio-ready .studio-secondary-btn,
    .studio-ready .studio-primary-btn,
    .studio-ready .studio-exit-btn {
        min-height: 26px !important;
        height: 26px !important;
        padding: 3px 7px !important;
        font-size: .58rem !important;
    }

    .studio-ready .studio-time-display {
        min-height: 28px !important;
        padding: 3px 8px !important;
        font-size: .86rem !important;
    }

    .studio-ready .studio-control-label {
        min-height: 28px !important;
        padding: 3px 6px !important;
        font-size: .56rem !important;
    }

    .studio-ready .studio-control-label input,
    .studio-ready .studio-control-label select,
    .studio-ready .studio-project-tools input {
        min-height: 24px !important;
        height: 24px !important;
        padding: 2px 6px !important;
        font-size: .62rem !important;
    }

    .studio-ready .studio-layout-controls > *,
    .studio-ready .studio-layout-controls button,
    .studio-ready .studio-low-performance-toggle {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .studio-ready .studio-first-run-guide,
    .studio-ready .studio-future-rail {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
        height: auto !important;
        min-height: calc(100vh - 104px) !important;
        padding: 4px !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-daw-grid {
        height: auto !important;
        min-height: calc(100vh - 104px) !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
        grid-template-rows: minmax(0, 1fr) minmax(78px, 14vh) !important;
        gap: 6px !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-workspace {
        grid-template-rows: minmax(0, 1fr) minmax(78px, 14vh) !important;
        gap: 6px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
        height: min(520px, calc(100vh - 118px)) !important;
        min-height: 0 !important;
        grid-template-rows: auto auto 10px minmax(150px, 1fr) auto auto auto !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-hint {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-height-grip {
        grid-row: 3 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
        grid-row: 4 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-minimap {
        grid-row: 5 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-energy-map {
        grid-row: 6 !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-arrangement-coach,
    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-section-navigator {
        display: none !important;
    }

    .studio-ready .studio-context-menu {
        width: min(230px, calc(100vw - 16px)) !important;
        max-height: min(340px, calc(100vh - 24px)) !important;
        padding: 6px !important;
        overscroll-behavior: contain !important;
    }

    .studio-ready .studio-context-menu-section {
        gap: 2px !important;
        padding: 5px !important;
    }

    .studio-ready .studio-context-menu-section + .studio-context-menu-section {
        margin-top: 4px !important;
    }

    .studio-ready .studio-context-menu-section > strong {
        padding: 1px 4px 3px !important;
        font-size: .58rem !important;
    }

    .studio-ready .studio-context-menu-section button {
        min-height: 26px !important;
        padding: 3px 7px !important;
        font-size: .64rem !important;
    }
}

/* Final Studio clip menu containment and blue/purple/pink audio visuals. */
.studio-ready .studio-clip-context-menu,
.studio-ready .studio-context-menu {
    position: fixed !important;
    z-index: 329 !important;
    width: min(238px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 20px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    contain: none !important;
    transform: none !important;
}

.studio-ready .studio-context-menu-section {
    gap: 2px !important;
    padding: 5px !important;
}

.studio-ready .studio-context-menu-section + .studio-context-menu-section {
    margin-top: 4px !important;
}

.studio-ready .studio-context-menu-section > strong {
    padding: 1px 4px 3px !important;
    color: #a8c7ff !important;
    font-size: .59rem !important;
}

.studio-ready .studio-context-menu button {
    min-height: 26px !important;
    padding: 3px 7px !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
}

.studio-ready .studio-clip-bpm-modal.is-open {
    display: grid !important;
    padding: 8px !important;
    overflow: auto !important;
}

.studio-ready .studio-clip-bpm-dialog {
    width: min(380px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 20px) !important;
    overflow: auto !important;
}

.studio-ready .studio-mini-wave,
.studio-ready .studio-loop-lines,
.studio-ready .studio-waveform-large {
    border-color: rgba(117, 159, 255, .24) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 18%, transparent 82%, rgba(255, 255, 255, .025)),
        repeating-linear-gradient(90deg, rgba(126, 167, 255, .055) 0 1px, transparent 1px 10px),
        radial-gradient(circle at 20% 28%, rgba(67, 129, 255, .2), transparent 38%),
        radial-gradient(circle at 86% 55%, rgba(255, 79, 216, .14), transparent 40%),
        linear-gradient(180deg, rgba(5, 10, 24, .95), rgba(8, 6, 21, .94)) !important;
    box-shadow: inset 0 0 16px rgba(74, 113, 255, .12) !important;
}

.studio-ready .studio-mini-wave::after,
.studio-ready .studio-loop-lines::after,
.studio-ready .studio-waveform-large::after {
    background:
        linear-gradient(90deg, transparent, rgba(132, 95, 255, .16), rgba(255, 79, 216, .1), transparent),
        linear-gradient(180deg, transparent 48%, rgba(90, 150, 255, .18) 49%, rgba(255, 91, 224, .22) 50%, transparent 51%) !important;
}

.studio-ready .studio-mini-wave i,
.studio-ready .studio-loop-lines i,
.studio-ready .studio-waveform-large i {
    background:
        linear-gradient(180deg, transparent calc(50% - (var(--rms, 28%) * .5)), rgba(172, 128, 255, .34) calc(50% - (var(--rms, 28%) * .5)), rgba(255, 91, 224, .42) calc(50% + (var(--rms, 28%) * .5)), transparent calc(50% + (var(--rms, 28%) * .5))) !important;
}

.studio-ready .studio-mini-wave i::before,
.studio-ready .studio-loop-lines i::before,
.studio-ready .studio-waveform-large i::before {
    background: linear-gradient(180deg, #71b8ff 0%, #8468ff 52%, #bd62ff 100%) !important;
    box-shadow: 0 0 7px rgba(112, 145, 255, .38) !important;
}

.studio-ready .studio-mini-wave i::after,
.studio-ready .studio-loop-lines i::after,
.studio-ready .studio-waveform-large i::after {
    background: linear-gradient(180deg, rgba(255, 120, 235, .95), rgba(255, 68, 178, .72)) !important;
    box-shadow: 0 0 7px rgba(255, 79, 216, .28) !important;
}

.studio-ready .studio-energy-map {
    border-color: rgba(121, 151, 255, .22) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(67, 129, 255, .18), transparent 34%),
        radial-gradient(circle at 88% 20%, rgba(255, 79, 216, .12), transparent 38%),
        linear-gradient(180deg, rgba(8, 13, 28, .9), rgba(6, 8, 20, .86)) !important;
    box-shadow: inset 0 0 20px rgba(93, 99, 255, .12), 0 0 22px rgba(58, 107, 255, .08) !important;
}

.studio-ready .studio-energy-map-bars span {
    border-radius: 999px 999px 2px 2px !important;
    background: rgba(114, 139, 255, .18) !important;
    opacity: .88 !important;
    transition: height .22s ease, background-color .22s ease, box-shadow .22s ease !important;
}

.studio-ready .studio-energy-map-bars span.is-low {
    background: linear-gradient(180deg, #5db8ff, #2846d8) !important;
    box-shadow: 0 0 8px rgba(93, 184, 255, calc(.08 + var(--energy) * .16)) !important;
}

.studio-ready .studio-energy-map-bars span.is-mid {
    background: linear-gradient(180deg, #a47cff, #6742ff) !important;
    box-shadow: 0 0 10px rgba(151, 103, 255, calc(.1 + var(--energy) * .2)) !important;
}

.studio-ready .studio-energy-map-bars span.is-hot {
    background: linear-gradient(180deg, #ff86ec, #ff3f9f) !important;
    box-shadow: 0 0 13px rgba(255, 79, 216, calc(.12 + var(--energy) * .28)) !important;
}

/* PULSATRAX Studio stable layout guard: panel docking/floating controls disabled. */
.studio-ready body.studio-app-body .studio-window-tools,
.studio-ready body.studio-app-body .studio-window-resize,
.studio-ready body.studio-app-body .studio-daw-splitter,
.studio-ready body.studio-app-body .studio-playlist-height-grip {
    display: none !important;
    pointer-events: none !important;
}

.studio-ready body.studio-app-body .studio-daw-window,
.studio-ready body.studio-app-body .studio-daw-window.is-floating,
.studio-ready body.studio-app-body .studio-daw-window.is-maximized,
.studio-ready body.studio-app-body .studio-daw-window.is-collapsed,
.studio-ready body.studio-app-body .studio-project-drawer.is-floating,
.studio-ready body.studio-app-body .studio-project-drawer.is-maximized {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: auto !important;
    transform: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-project-drawer {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-work-panel:not(.studio-playlist-panel):not(.studio-pattern-panel) {
    display: none !important;
}

/* PULSATRAX Studio DAW cleanup: compact library, dominant playlist, fixed right tabs. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
    display: grid !important;
    grid-template-columns: clamp(220px, 16vw, 300px) minmax(0, 1fr) 0 !important;
    gap: 8px !important;
    height: calc(100vh - 150px) !important;
    min-height: 520px !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.studio-ready body.studio-app-body .studio-browser {
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-panel-title small,
.studio-ready body.studio-app-body .studio-context-hint {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-browser-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
}

.studio-ready body.studio-app-body .studio-browser-tabs,
.studio-ready body.studio-app-body .studio-browser-filter-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    min-height: 28px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
}

.studio-ready body.studio-app-body .studio-browser-tabs button,
.studio-ready body.studio-app-body .studio-browser-filter-chips button {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: .62rem !important;
}

.studio-ready body.studio-app-body .studio-library-advanced {
    min-height: 0 !important;
    margin: 0 !important;
}

.studio-ready body.studio-app-body .studio-library-advanced summary,
.studio-ready body.studio-app-body .studio-browser-fold summary {
    min-height: 26px !important;
    padding: 4px 8px !important;
    font-size: .64rem !important;
}

.studio-ready body.studio-app-body .studio-library-advanced-body {
    display: grid !important;
    gap: 6px !important;
    max-height: min(42vh, 330px) !important;
    overflow: auto !important;
    padding: 6px 0 0 !important;
}

.studio-ready body.studio-app-body .studio-library-advanced:not([open]) .studio-library-advanced-body {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-advanced-template-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
}

.studio-ready body.studio-app-body .studio-sample-list {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-item {
    grid-template-columns: 10px minmax(0, 1fr) 28px 32px !important;
    grid-template-rows: 28px 20px !important;
    grid-template-areas:
        "drag main fav add"
        "drag meta preview preview" !important;
    min-height: 54px !important;
    max-height: 62px !important;
    padding: 5px !important;
    gap: 4px !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-main {
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-main strong {
    font-size: .68rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-mini-wave {
    height: 16px !important;
    min-height: 16px !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-tags,
.studio-ready body.studio-app-body .studio-browser .studio-sample-category,
.studio-ready body.studio-app-body .studio-browser .studio-sample-error,
.studio-ready body.studio-app-body .studio-browser .studio-preview-label {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-meta {
    grid-area: meta !important;
    display: flex !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-meta b {
    font-size: .55rem !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-preview-btn,
.studio-ready body.studio-app-body .studio-browser .studio-clip-btn,
.studio-ready body.studio-app-body .studio-browser .studio-fav-btn {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: .58rem !important;
}

.studio-ready body.studio-app-body .studio-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 320px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-view-tabs {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 32px !important;
    padding: 4px !important;
    border: 1px solid rgba(102, 128, 255, .18) !important;
    border-radius: 8px !important;
    background: rgba(7, 10, 22, .88) !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs button {
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 3px 6px !important;
    border: 1px solid rgba(127, 151, 255, .16) !important;
    border-radius: 6px !important;
    color: #b8c8ff !important;
    background: rgba(255, 255, 255, .035) !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs button.is-active {
    color: #fff !important;
    border-color: rgba(255, 91, 224, .42) !important;
    background: linear-gradient(135deg, rgba(77, 126, 255, .35), rgba(255, 79, 216, .22)) !important;
    box-shadow: 0 0 14px rgba(106, 116, 255, .18) !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(260px, 1fr) 20px 48px auto 58px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-panel-title {
    grid-row: 1 !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar {
    grid-row: 2 !important;
    gap: 5px !important;
    padding-bottom: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-hint,
.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-height-grip {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
    grid-row: 3 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-minimap {
    grid-row: 4 !important;
    min-height: 18px !important;
    height: 18px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-energy-map {
    position: relative !important;
    z-index: 6 !important;
    grid-row: 5 !important;
    min-height: 40px !important;
    height: 46px !important;
    padding: 5px 7px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-energy-map-head {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 13px !important;
    margin-bottom: 3px !important;
}

.studio-ready body.studio-app-body .studio-energy-map-head strong {
    font-size: .6rem !important;
}

.studio-ready body.studio-app-body .studio-energy-map-head span {
    font-size: .55rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars {
    height: 22px !important;
    align-items: end !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span {
    max-height: 22px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-arrangement-coach {
    grid-row: 6 !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-section-navigator {
    grid-row: 7 !important;
    display: block !important;
    min-height: 0 !important;
    max-height: 58px !important;
    padding: 5px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-section-navigator.is-hidden {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-section-navigator-head {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-section-navigator-list {
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: 48px !important;
    padding-bottom: 3px !important;
    scrollbar-width: thin !important;
}

.studio-ready body.studio-app-body .studio-section-nav-card {
    flex: 0 0 min(150px, 24vw) !important;
    min-width: 118px !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 7px !important;
}

.studio-ready body.studio-app-body .studio-section-nav-main {
    min-height: 0 !important;
    height: 34px !important;
    padding: 3px 6px !important;
    text-align: left !important;
}

.studio-ready body.studio-app-body .studio-section-nav-main strong {
    font-size: .65rem !important;
}

.studio-ready body.studio-app-body .studio-section-nav-main span {
    font-size: .52rem !important;
}

.studio-ready body.studio-app-body .studio-section-nav-menu {
    position: relative !important;
    align-self: stretch !important;
}

.studio-ready body.studio-app-body .studio-section-nav-menu summary {
    list-style: none !important;
    width: 28px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    color: #dbe4ff !important;
    background: rgba(255, 255, 255, .05) !important;
}

.studio-ready body.studio-app-body .studio-section-nav-menu summary::-webkit-details-marker {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-section-nav-actions {
    position: absolute !important;
    right: 0 !important;
    top: 38px !important;
    z-index: 20 !important;
    display: grid !important;
    width: 118px !important;
    gap: 3px !important;
    padding: 5px !important;
    border: 1px solid rgba(129, 153, 255, .25) !important;
    border-radius: 7px !important;
    background: rgba(7, 9, 20, .96) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35) !important;
}

.studio-ready body.studio-app-body .studio-section-nav-menu:not([open]) .studio-section-nav-actions {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-section-nav-actions button {
    min-height: 24px !important;
    padding: 3px 6px !important;
    font-size: .58rem !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel,
.studio-ready body.studio-app-body .studio-mixer-panel,
.studio-ready body.studio-app-body .studio-sampler-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
    position: relative !important;
    z-index: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    scrollbar-gutter: stable !important;
}

.studio-ready body.studio-app-body .studio-work-panel:not(.studio-playlist-panel):not(.is-right-active) {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-work-panel.is-right-active {
    display: grid !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-work-panel.is-right-active {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-work-panel:not(.studio-playlist-panel):not(.is-right-active) {
    display: none !important;
}

@media (max-width: 900px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: calc(100vh - 120px) !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-browser {
        max-height: 34vh !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(440px, 62vh) auto minmax(220px, 30vh) !important;
        height: auto !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sampler-panel {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

@media (max-width: 900px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(440px, 62vh) auto minmax(220px, 30vh) !important;
        width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-right-panel-tabs,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace > .studio-work-panel:not(.studio-playlist-panel) {
        display: none !important;
    }
}

/* Final PULSATRAX Studio level override: keep right-panel content below tabs. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    grid-template-rows: 38px minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 18vw, 320px) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-right-panel-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-columns: clamp(220px, 16vw, 290px) minmax(0, 1fr) clamp(220px, 15vw, 260px) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer {
    display: grid !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

@media (max-width: 900px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(440px, 62vh) auto minmax(220px, 30vh) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-right-panel-tabs {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }
}

/* PULSATRAX Studio strict DAW grid contract. This is the final owner of the Studio layout. */
.studio-ready body.studio-app-body .studio-app {
    --ptx-library-width: clamp(250px, 15vw, 300px);
    --ptx-right-width: clamp(300px, 19vw, 340px);
    --ptx-help-width: clamp(250px, 18vw, 300px);
    --ptx-owner-width: clamp(260px, 15vw, 320px);
    --ptx-tab-height: 42px;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-pro {
    --ptx-right-width: clamp(320px, 22vw, 380px);
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner {
    --ptx-right-width: clamp(320px, 20vw, 360px);
}

.studio-ready body.studio-app-body .studio-daw-grid {
    display: grid !important;
    grid-template-areas: "library workspace owner" !important;
    grid-template-columns: var(--ptx-library-width) minmax(0, 1fr) 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
    height: calc(100dvh - 150px) !important;
    min-height: min(520px, calc(100dvh - 116px)) !important;
    max-height: calc(100dvh - 122px) !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.studio-ready body.studio-app-body .studio-browser,
.studio-ready body.studio-app-body .studio-workspace,
.studio-ready body.studio-app-body .studio-project-drawer,
.studio-ready body.studio-app-body .studio-work-panel,
.studio-ready body.studio-app-body .studio-beginner-help-panel,
.studio-ready body.studio-app-body .studio-right-panel-tabs {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    float: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.studio-ready body.studio-app-body .studio-browser {
    grid-area: library !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid > .studio-browser {
    grid-area: library !important;
}

.studio-ready body.studio-app-body .studio-workspace {
    grid-area: workspace !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--ptx-right-width) !important;
    grid-template-rows: var(--ptx-tab-height) minmax(0, 1fr) !important;
    gap: 8px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid > .studio-workspace {
    grid-area: workspace !important;
}

.studio-ready body.studio-app-body .studio-project-drawer {
    grid-area: owner !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid > .studio-project-drawer {
    grid-area: owner !important;
}

.studio-ready body.studio-app-body .library-scroll,
.studio-ready body.studio-app-body .playlist-scroll,
.studio-ready body.studio-app-body .right-tools-scroll,
.studio-ready body.studio-app-body .owner-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(220px, 1fr) 20px 46px auto auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
    grid-row: 3 !important;
    min-height: 250px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    contain: layout paint !important;
    max-height: none !important;
    overflow: auto !important;
    overflow-clip-margin: 0 !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist > .studio-playlist-ruler,
.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist > .studio-playlist-lanes {
    width: max(100%, calc(var(--studio-gutter, 104px) + var(--playlist-width, 1472px))) !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist > .studio-playlist-lanes > .studio-playlist-lane {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-section-navigator {
    grid-row: 7 !important;
    min-height: 48px !important;
    max-height: none !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    grid-template-columns: none !important;
    gap: 4px !important;
    height: var(--ptx-tab-height) !important;
    min-height: var(--ptx-tab-height) !important;
    max-height: var(--ptx-tab-height) !important;
    padding: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 4 !important;
    background: rgba(7, 10, 22, .98) !important;
    border: 1px solid rgba(102, 128, 255, .22) !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs button {
    min-width: max-content !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-right-panel-tabs [data-right-panel="automation"],
.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced .studio-right-panel-tabs [data-right-panel="midi"] {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    align-content: start !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 2 !important;
    background: rgba(7, 10, 22, .98) !important;
    border: 1px solid rgba(118, 145, 255, .18) !important;
    box-shadow: inset 0 0 0 1px rgba(118, 145, 255, .08) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-workspace,
.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-workspace {
    grid-template-columns: minmax(700px, 1fr) var(--ptx-right-width) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel:not(.studio-playlist-panel):not(.is-right-active) {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-daw-grid {
    grid-template-areas: "library workspace owner" !important;
    grid-template-columns: var(--ptx-library-width) minmax(0, 1fr) 0 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
    grid-template-columns: minmax(0, 1fr) var(--ptx-help-width) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-right-panel-tabs,
.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace > .studio-work-panel:not(.studio-playlist-panel) {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-beginner-help-panel {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 10px !important;
    background: rgba(6, 18, 18, .98) !important;
    border: 1px solid rgba(70, 255, 154, .22) !important;
    border-radius: 8px !important;
}

.studio-ready body.studio-app-body .studio-beginner-help-panel ol {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-areas: "library workspace owner" !important;
    grid-template-columns: var(--ptx-library-width) minmax(0, 1fr) var(--ptx-owner-width) !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer {
    display: grid !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(7, 10, 22, .98) !important;
    border: 1px solid rgba(255, 91, 224, .22) !important;
}

.studio-ready body.studio-app-body .studio-app:not(.is-studio-level-owner) .studio-project-drawer,
.studio-ready body.studio-app-body .studio-app:not(.is-studio-level-owner) #studio-debug-panel {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-midi-panel-body,
.studio-ready body.studio-app-body .studio-midi-controls,
.studio-ready body.studio-app-body .studio-midi-grid,
.studio-ready body.studio-app-body .studio-mixer,
.studio-ready body.studio-app-body .studio-pattern-grid,
.studio-ready body.studio-app-body .studio-sampler {
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 1800px) {
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
        grid-template-areas:
            "library workspace"
            "owner owner" !important;
        grid-template-columns: var(--ptx-library-width) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) minmax(150px, 22dvh) !important;
    }
}

@media (max-width: 1380px) {
    .studio-ready body.studio-app-body .studio-app {
        --ptx-library-width: 250px;
        --ptx-right-width: 300px;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-pro,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner {
        --ptx-right-width: 320px;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-pro .studio-workspace,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-workspace {
        grid-template-columns: minmax(0, 1fr) var(--ptx-right-width) !important;
    }
}

@media (max-width: 900px) {
    .studio-ready body.studio-app-body .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-daw-grid {
        grid-template-areas:
            "library"
            "workspace"
            "owner" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(170px, 30dvh) auto auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: calc(100dvh - 96px) !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-browser {
        max-height: 32dvh !important;
    }

    .studio-ready body.studio-app-body .studio-workspace,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(430px, 62dvh) var(--ptx-tab-height) minmax(220px, 30dvh) !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-playlist-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 430px !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
        min-height: 250px !important;
    }

    .studio-ready body.studio-app-body .studio-right-panel-tabs {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-beginner-help-panel {
        grid-column: 1 !important;
        grid-row: 3 !important;
        min-height: 220px !important;
    }
}

/* PULSATRAX Studio stability reset: fixed DAW geometry, no floating/docking/panel-resize controls. */
.studio-ready body.studio-app-body .studio-app {
    --ptx-library-width: 280px !important;
    --ptx-right-width: 340px !important;
    --ptx-help-width: 300px !important;
    --ptx-owner-width: 300px !important;
    --ptx-tab-height: 42px !important;
}

.studio-ready body.studio-app-body :is(
    .studio-window-tools,
    .studio-window-tools *,
    .studio-window-resize,
    .studio-daw-splitter,
    .studio-playlist-height-grip,
    [data-layout-toggle],
    [data-layout-max],
    [data-layout-view],
    [data-layout-compact]
) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.studio-ready body.studio-app-body :is(
    .studio-daw-window,
    .studio-daw-window.is-floating,
    .studio-daw-window.is-maximized,
    .studio-daw-window.is-collapsed,
    .studio-project-drawer.is-floating,
    .studio-project-drawer.is-maximized,
    .studio-project-drawer.is-collapsed
) {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    transform: none !important;
    resize: none !important;
}

.studio-ready body.studio-app-body .studio-daw-window.is-hidden-by-layout {
    display: none !important;
    pointer-events: none !important;
}

.studio-ready body.studio-app-body .studio-daw-grid {
    display: grid !important;
    grid-template-areas: "library workspace owner" !important;
    grid-template-columns: 280px minmax(0, 1fr) 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
    contain: layout paint !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-columns: 280px minmax(0, 1fr) 300px !important;
}

.studio-ready body.studio-app-body .studio-browser,
.studio-ready body.studio-app-body .studio-workspace,
.studio-ready body.studio-app-body .studio-project-drawer {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    contain: layout paint !important;
}

.studio-ready body.studio-app-body .studio-browser {
    grid-area: library !important;
    width: 280px !important;
    max-width: 280px !important;
}

.studio-ready body.studio-app-body .studio-workspace {
    grid-area: workspace !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-rows: 42px minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-project-drawer {
    grid-area: owner !important;
}

.studio-ready body.studio-app-body .studio-app:not(.is-studio-level-owner) .studio-project-drawer {
    display: none !important;
    pointer-events: none !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    contain: layout paint !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
    contain: layout paint !important;
    isolation: isolate !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist > .studio-playlist-ruler,
.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist > .studio-playlist-lanes {
    width: max(100%, calc(var(--studio-gutter, 104px) + var(--playlist-width, 1472px))) !important;
    max-width: none !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs,
.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 340px !important;
    width: 340px !important;
    overflow-x: hidden !important;
    isolation: isolate !important;
    contain: layout paint !important;
    background-color: rgba(7, 10, 22, .98) !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs {
    grid-row: 1 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
    grid-row: 2 !important;
    overflow-y: auto !important;
}

@media (max-width: 1800px) {
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
        grid-template-areas:
            "library workspace"
            "owner owner" !important;
        grid-template-columns: 280px minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) minmax(150px, 22dvh) !important;
    }

    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-project-drawer {
        width: auto !important;
        max-width: 100% !important;
    }
}

@media (max-width: 760px) {
    .studio-ready body.studio-app-body .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
        grid-template-areas:
            "library"
            "workspace"
            "owner" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-browser {
        width: auto !important;
        max-width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(430px, 62dvh) 42px minmax(220px, 30dvh) !important;
    }

    .studio-ready body.studio-app-body .studio-right-panel-tabs,
    .studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
        grid-column: 1 !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* Final viewport containment override: keep Studio inside one browser screen. */
html,
body.studio-app-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-shell,
.studio-ready body.studio-app-body .studio-app,
.studio-ready body.studio-app-body .studio-daw-grid,
.studio-ready body.studio-app-body .studio-workspace {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-app {
    --ptx-library-width: 280px !important;
    --ptx-right-width: 340px !important;
    --ptx-help-width: 300px !important;
    --ptx-owner-width: 300px !important;
}

.studio-ready body.studio-app-body .studio-daw-grid {
    grid-template-columns: var(--ptx-library-width) minmax(0, 1fr) 0 !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-columns: var(--ptx-library-width) minmax(0, 1fr) var(--ptx-owner-width) !important;
}

.studio-ready body.studio-app-body .studio-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ptx-right-width)) !important;
    gap: 8px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-beginner .studio-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ptx-help-width)) !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs,
.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs {
    overflow-x: auto !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs > button {
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active :is(
    .studio-tracks,
    .studio-track,
    .studio-grid,
    .studio-pad-bank,
    .studio-pattern-toolbar,
    .studio-pattern-tabs
) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active :is(
    .studio-tracks,
    .studio-track,
    .studio-grid
) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

@media (max-width: 1366px) {
    .studio-ready body.studio-app-body .studio-app {
        --ptx-library-width: 250px !important;
        --ptx-right-width: 300px !important;
        --ptx-help-width: 280px !important;
    }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-app {
        --ptx-library-width: 240px !important;
        --ptx-right-width: 280px !important;
        --ptx-help-width: 260px !important;
    }
}

@media (max-width: 1800px) {
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
        grid-template-areas:
            "library workspace"
            "owner owner" !important;
        grid-template-columns: var(--ptx-library-width) minmax(0, 1fr) !important;
    }
}

/* PULSATRAX Studio right-panel usability pass: compact Rack/Sampler/MIDI inside the fixed inspector column. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-content: stretch !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: start !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-tabs {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(72px, max-content) !important;
    grid-template-columns: none !important;
    gap: 4px !important;
    max-width: 100% !important;
    max-height: 34px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-gutter: stable !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: .62rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) #studio-pattern-name {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) #studio-clear-pattern {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 72px !important;
    padding-inline: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pad-bank {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pad {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pad strong,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pad span,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pad em {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-step-ruler {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-ruler-spacer {
    padding: 4px 0 !important;
    text-align: left !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-ruler-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)) !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-ruler-grid span {
    min-width: 0 !important;
    padding: 4px 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-tracks {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-track-label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px 6px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-track-label strong,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-track-label span,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-track-label em {
    grid-column: 1 !important;
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-rack-controls {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(24px, auto)) !important;
    align-content: start !important;
    gap: 3px !important;
    margin-top: 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-rack-controls button {
    width: auto !important;
    min-width: 24px !important;
    height: 22px !important;
    padding: 0 5px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mini-slider {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--steps, 128), minmax(14px, 14px)) !important;
    gap: 2px !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-cell {
    width: 14px !important;
    height: 18px !important;
    border-radius: 3px !important;
}

.studio-ready body.studio-app-body .studio-sampler-guide,
.studio-ready body.studio-app-body .studio-automation-guide {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 7px !important;
    border: 1px solid rgba(70, 255, 154, .18) !important;
    border-radius: 7px !important;
    color: rgba(236, 248, 255, .78) !important;
    background: rgba(70, 255, 154, .055) !important;
    font-size: .68rem !important;
}

.studio-ready body.studio-app-body .studio-sampler-guide span,
.studio-ready body.studio-app-body .studio-automation-guide span {
    min-width: 0 !important;
    line-height: 1.35 !important;
}

.studio-ready body.studio-app-body .studio-sampler-grid,
.studio-ready body.studio-app-body .studio-midi-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

.studio-ready body.studio-app-body .studio-sampler-actions,
.studio-ready body.studio-app-body .studio-midi-controls {
    max-width: 100% !important;
}

.studio-ready body.studio-app-body .studio-sampler-actions button,
.studio-ready body.studio-app-body .studio-midi-controls button,
.studio-ready body.studio-app-body .studio-midi-controls label,
.studio-ready body.studio-app-body .studio-midi-controls select {
    min-width: 0 !important;
    max-width: 100% !important;
}

.studio-ready body.studio-app-body .studio-midi-controls #studio-midi-preview-sound {
    min-height: 32px !important;
}

.studio-ready body.studio-app-body .studio-midi-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

.studio-ready body.studio-app-body .studio-midi-pad-rack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.studio-ready body.studio-app-body .studio-midi-pad-slot {
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-automation-lane {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-automation-guide {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* PULSATRAX Studio viewport rescue: keep the DAW, Playlist, and Energy Map fully visible after refresh. */
.studio-ready body.studio-app-body .studio-topbar {
    position: relative !important;
    top: auto !important;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) auto !important;
    min-height: 54px !important;
    padding: 6px 8px !important;
    gap: 7px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-transport {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.studio-ready body.studio-app-body .studio-transport-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: max-content !important;
}

.studio-ready body.studio-app-body .studio-transport-btn,
.studio-ready body.studio-app-body .studio-toggle-btn {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-time-display {
    flex: 0 0 auto !important;
    min-width: 76px !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-transport-fields {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: max-content !important;
}

.studio-ready body.studio-app-body .studio-brand-copy p,
.studio-ready body.studio-app-body .studio-mobile-note,
.studio-ready body.studio-app-body .studio-first-run-guide,
.studio-ready body.studio-app-body .studio-future-rail {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-project-bar {
    min-height: 42px !important;
    padding: 6px 8px !important;
}

.studio-ready body.studio-app-body .studio-layout-controls {
    min-height: 40px !important;
    padding: 5px 8px !important;
}

.studio-ready body.studio-app-body .studio-daw-grid {
    height: calc(100dvh - 150px) !important;
    max-height: calc(100dvh - 150px) !important;
    min-height: min(560px, calc(100dvh - 150px)) !important;
    margin-top: 8px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
    height: calc(100dvh - 150px) !important;
    max-height: calc(100dvh - 150px) !important;
    min-height: min(560px, calc(100dvh - 150px)) !important;
    margin-top: 8px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-rows: minmax(0, 1fr) 132px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel {
    display: grid !important;
    grid-template-rows: 24px 40px minmax(240px, 1fr) 0px 66px 0px 0px !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
    display: grid !important;
    grid-template-rows: 24px 40px minmax(240px, 1fr) 0px 66px 0px 0px !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-panel-title {
    grid-row: 1 !important;
    min-height: 24px !important;
    max-height: 24px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar {
    grid-row: 2 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
    grid-row: 3 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-minimap {
    grid-row: 4 !important;
    display: none !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-energy-map {
    grid-row: 5 !important;
    display: grid !important;
    grid-template-rows: 16px 8px 18px !important;
    gap: 3px !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(132, 148, 169, .16) !important;
    border-radius: 7px !important;
    background: rgba(7, 11, 15, .92) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-energy-map.is-simple {
    grid-template-rows: 16px 14px !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-energy-map.is-hidden {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-energy-map-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 18px !important;
    margin: 0 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-head strong {
    color: #d8e4ea !important;
    font-size: .62rem !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-stats {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #8fa5b2 !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-energy-map-stats span {
    display: inline-flex !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-stats b {
    color: #c9d4da !important;
    font-weight: 800 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-mode {
    display: inline-flex !important;
    gap: 2px !important;
    padding: 1px !important;
    border: 1px solid rgba(132, 148, 169, .18) !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, .025) !important;
}

.studio-ready body.studio-app-body .studio-energy-map-mode button {
    min-height: 14px !important;
    padding: 1px 5px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #8fa5b2 !important;
    font-size: .52rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-mode button.is-active {
    background: rgba(69, 105, 128, .42) !important;
    color: #e4edf1 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-sections {
    display: grid !important;
    grid-template-columns: 25fr 25fr 30fr 20fr !important;
    gap: 2px !important;
    height: 8px !important;
}

.studio-ready body.studio-app-body .studio-energy-map.is-simple .studio-energy-map-sections {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-energy-map-sections span {
    display: block !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(132, 148, 169, .24) !important;
    color: #71818b !important;
    font-size: .46rem !important;
    line-height: 8px !important;
    text-transform: uppercase !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars {
    display: grid !important;
    grid-template-columns: repeat(var(--song-bars, 32), minmax(3px, 1fr)) !important;
    align-items: end !important;
    gap: 2px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span {
    position: relative !important;
    display: block !important;
    height: var(--energy-height, 4px) !important;
    min-height: 2px !important;
    max-height: 17px !important;
    border: 0 !important;
    border-radius: 1px !important;
    background: #2a3339 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span.is-low {
    background: #325f68 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span.is-mid {
    background: #3d7384 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span.is-hot {
    background: #b58b45 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span.is-peak {
    background: #c49a50 !important;
    outline: 1px solid rgba(230, 190, 115, .45) !important;
    outline-offset: 1px !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span.is-empty {
    background: #20262b !important;
    opacity: .72 !important;
}

.studio-ready body.studio-app-body .studio-energy-map-bars span b,
.studio-ready body.studio-app-body .studio-energy-map-bars span em {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-energy-map.is-detailed .studio-energy-map-bars span b {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 1px) !important;
    color: #8fa5b2 !important;
    font-size: .42rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: .72 !important;
    transform: rotate(-90deg);
    transform-origin: right bottom;
}

@media (max-width: 760px) {
    .studio-ready body.studio-app-body .studio-energy-map-head {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .studio-ready body.studio-app-body .studio-energy-map-mode {
        display: none !important;
    }

    .studio-ready body.studio-app-body .studio-energy-map-stats {
        justify-content: flex-end !important;
        gap: 5px !important;
        font-size: .5rem !important;
    }

    .studio-ready body.studio-app-body .studio-energy-map.is-detailed .studio-energy-map-bars span b {
        display: none !important;
    }
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-section-navigator:not(.is-hidden) {
    grid-row: 7 !important;
    display: none !important;
    max-height: 0 !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-arrangement-coach {
    grid-row: 6 !important;
    display: none !important;
    max-height: 0 !important;
}

@media (max-width: 1100px) {
    .studio-ready body.studio-app-body .studio-topbar {
        grid-template-columns: minmax(150px, 190px) minmax(520px, 1fr) minmax(180px, auto) !important;
        overflow-x: auto !important;
    }
}

/* PULSATRAX Studio right-panel hard reset: one inspector column, no overlapping sibling panels. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) {
    --ptx-right-width: clamp(320px, 25vw, 390px) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, var(--ptx-right-width)) !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-view-tabs {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) #studio-right-panel-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(70px, 1fr) !important;
    gap: 4px !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) #studio-right-panel-tabs [data-right-panel] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 64px !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .64rem !important;
    line-height: 1 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced #studio-right-panel-tabs [data-right-panel="automation"],
.studio-ready body.studio-app-body .studio-app.is-studio-level-advanced #studio-right-panel-tabs [data-right-panel="midi"] {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel:not(.studio-playlist-panel):not(.is-right-active),
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-hidden-by-layout:not(.studio-playlist-panel) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-content: stretch !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active > .studio-panel-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 26px !important;
    max-height: 34px !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active > .studio-panel-title span,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active > .studio-panel-title small {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active :is(button, input, select, label, textarea) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active :is(strong, span, small, em, label, button) {
    min-width: 0 !important;
}

/* Rack: compact header, pads, ruler and one scrollable track list. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active {
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active > .studio-pattern-toolbar {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(76px, auto) !important;
    grid-template-rows: 32px 32px !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-pattern-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(74px, max-content) !important;
    grid-template-columns: none !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-pattern-tabs button {
    width: auto !important;
    min-width: 72px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .62rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-pattern-name {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-clear-pattern {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    min-width: 74px !important;
    height: 30px !important;
    padding: 0 7px !important;
    font-size: .6rem !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active > .studio-section-label {
    grid-row: 3 !important;
    min-height: 16px !important;
    max-height: 18px !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: .58rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-pad-bank {
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 96px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-pad {
    min-width: 0 !important;
    min-height: 40px !important;
    max-height: 46px !important;
    padding: 4px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-pad :is(strong, span, em) {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-step-ruler {
    grid-row: 5 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-ruler-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(56px, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-ruler-grid span,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-ruler-spacer {
    min-width: 0 !important;
    padding: 3px 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .56rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-tracks {
    grid-row: 6 !important;
    display: grid !important;
    grid-auto-rows: minmax(96px, auto) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 6px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label :is(strong, span, em) {
    grid-column: 1 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-rack-controls {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(24px, auto)) !important;
    gap: 3px !important;
    align-content: start !important;
    max-width: 76px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-rack-controls button {
    width: auto !important;
    min-width: 24px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 5px !important;
    font-size: .56rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--steps, 128), 14px) !important;
    gap: 2px !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track .studio-grid {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-cell {
    width: 14px !important;
    height: 18px !important;
    min-width: 14px !important;
    min-height: 18px !important;
    border-radius: 3px !important;
}

/* Mixer: single-column strips so controls cannot collide in the inspector. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active #studio-mixer {
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(22px, auto) !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px !important;
    overflow: hidden !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    justify-self: stretch !important;
    align-self: start !important;
    box-sizing: border-box !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip :is(.studio-strip-name, label, .studio-insert-slots, .studio-strip-buttons) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip label {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 24px !important;
    max-height: 30px !important;
    font-size: .58rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-strip-name {
    min-height: 28px !important;
    max-height: 34px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-strip-name :is(strong, span) {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-insert-slots,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-strip-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip :is(input, button) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 18px !important;
    max-height: 24px !important;
    padding: 2px 4px !important;
    font-size: .56rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip input[type="range"],
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip .studio-fader {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    writing-mode: horizontal-tb !important;
    appearance: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-meter {
    width: 100% !important;
    min-width: 0 !important;
    height: 10px !important;
}

.studio-ready body.studio-app-body #studio-toast,
.studio-ready body.studio-app-body .studio-toast,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) ~ .studio-tip-toast,
.studio-ready body.studio-app-body .studio-tip-toast {
    display: none !important;
}

/* Sampler, Automation and MIDI: form controls become one clean scrollable column. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sampler-panel.is-right-active #studio-sampler,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active #studio-midi-panel {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sampler-panel.is-right-active :is(.studio-sampler-head, .studio-sampler-guide, .studio-waveform-large, .studio-sampler-grid, .studio-sampler-actions),
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active :is(.studio-midi-hero, .studio-midi-controls, .studio-midi-grid, .studio-project-rights-note) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sampler-panel.is-right-active .studio-sampler-grid,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-sampler-panel.is-right-active .studio-sampler-actions,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-pad-rack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-pad-slot,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-device,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-event {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active .studio-piano-toolbar {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active #studio-automation-lane {
    grid-row: 3 !important;
    min-width: 0 !important;
    min-height: 220px !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

@media (max-width: 1366px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) {
        --ptx-right-width: 360px !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) #studio-right-panel-tabs {
        grid-auto-columns: minmax(62px, max-content) !important;
    }

    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) #studio-right-panel-tabs [data-right-panel] {
        min-width: 58px !important;
        padding: 0 6px !important;
        font-size: .58rem !important;
    }
}

/* PULSATRAX Studio right-panel pro layout: denser controls without overlap. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) {
    --ptx-right-width: clamp(360px, 29vw, 430px) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(340px, var(--ptx-right-width)) !important;
}

/* Rack gets shorter rows: channel controls always visible, steps scroll inside each row. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active {
    grid-template-rows: 28px 58px 0 72px 22px minmax(0, 1fr) !important;
    gap: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active > .studio-section-label {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-pad-bank {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    max-height: 72px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-pad {
    min-height: 32px !important;
    max-height: 34px !important;
    padding: 3px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-pad em {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-tracks {
    grid-auto-rows: 74px !important;
    gap: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track {
    grid-template-rows: 48px 20px !important;
    gap: 4px !important;
    min-height: 74px !important;
    max-height: 74px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label {
    grid-template-columns: minmax(72px, .72fr) minmax(0, 1fr) auto !important;
    grid-template-rows: 18px 20px !important;
    gap: 2px 5px !important;
    padding: 5px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: .72rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: .58rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label em {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-rack-controls {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(20px, auto)) !important;
    gap: 2px !important;
    max-width: 142px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-rack-controls button {
    min-width: 20px !important;
    height: 19px !important;
    min-height: 19px !important;
    padding: 0 3px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider {
    grid-row: 2 !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 3px !important;
    font-size: .55rem !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider:first-of-type {
    grid-column: 1 / 2 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider:last-of-type {
    grid-column: 2 / 3 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider input {
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
}

/* Mixer uses the available side room: two cards per row, master spans the width. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active #studio-mixer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(136px, auto) !important;
    align-items: start !important;
    gap: 8px !important;
    overflow-x: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 138px !important;
    max-width: 100% !important;
    padding: 7px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-master-strip {
    grid-column: 1 / -1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip label {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 20px !important;
    max-height: 22px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-strip-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Automation should feel like an editor, not a small strip with dead space. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active {
    grid-template-rows: 30px 40px minmax(260px, 1fr) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active .studio-piano-toolbar {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    align-items: center !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active #studio-automation-lane {
    display: block !important;
    position: relative !important;
    height: 100% !important;
    min-height: 260px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(130, 157, 190, .18) !important;
    background:
        linear-gradient(90deg, rgba(33, 212, 253, .11) 1px, transparent 1px) 0 0 / 6.25% 100%,
        linear-gradient(0deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 100% 25%,
        rgba(3, 7, 12, .84) !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active .studio-automation-guide {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
    bottom: auto !important;
    max-height: 42px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active .studio-automation-line {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* MIDI: split the long setup form from the performance/device area so they cannot overlap. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active #studio-midi-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 228px) minmax(160px, 1fr) auto !important;
    gap: 8px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-hero {
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 7px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-hero span {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 0 !important;
    max-height: 228px !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls :is(button, label, select, span) {
    min-width: 0 !important;
    max-width: 100% !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls label:not(.studio-browser-check) {
    min-height: 40px !important;
    max-height: 48px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-level-control {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 4px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-capture-summary {
    grid-column: 1 / -1 !important;
    max-height: 32px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid {
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(96px, auto) !important;
    align-items: start !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 96px !important;
    max-height: 154px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-performance {
    display: grid !important;
    gap: 5px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active :is(.studio-midi-pad-rack, .studio-midi-devices, .studio-midi-events) {
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Final right-panel containment pass: compact mixer cards and non-overlapping MIDI stacks. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 8px 24px 24px 22px !important;
    grid-auto-flow: row !important;
    gap: 5px 8px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    overflow: hidden !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-strip-name,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-meter,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-strip-buttons,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-insert-slots {
    grid-column: 1 / -1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-meter {
    height: 8px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip label {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: 20px !important;
    grid-column: 1 / -1 !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 22px !important;
    max-height: 26px !important;
    overflow: hidden !important;
    font-size: .54rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip label input[type="range"] {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-mixer-panel.is-right-active .studio-channel-strip .studio-strip-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-self: end !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active #studio-midi-panel {
    grid-template-rows: auto minmax(0, 228px) minmax(0, 1fr) auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(168px, auto) !important;
    gap: 7px !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section {
    min-height: 168px !important;
    max-height: none !important;
    padding: 8px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-project-rights-note {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-pad-rack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* PTX visual-audit fixes: shared overflow, overlap and a11y polish. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body#top:not(.studio-app-body) {
    overflow-x: hidden;
}

body#top:not(.studio-app-body) .layout {
    min-width: 0;
}

body#top:not(.studio-app-body) :is(.feed, .rightbar, .sidebar, .post-card, .widget, .profile-card, .messages-layout, .forum-topic-card, .admin-page) {
    min-width: 0;
}

body#top:not(.studio-app-body) :is(.form-field, .video-style-field, .messages-search-wrap, .message-scent-control) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 7px !important;
    min-width: 0 !important;
}

body#top:not(.studio-app-body) :is(.form-field, .video-style-field, .messages-search-wrap, .message-scent-control) > :is(input, select, textarea, .form-control) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body#top:not(.studio-app-body) .file-input-wrap input[type="file"],
body#top:not(.studio-app-body) .message-file-control input[type="file"] {
    display: none !important;
}

body#top:not(.studio-app-body) :is(.trend-item, .featured-creator-card, .creator-card-upgraded, .conversation-link, .conversation-main, .conversation-text, .profile-main, .profile-main-content, .creator-highlight-item, .admin-tab-menu a, .menu-link) {
    min-width: 0;
}

body#top:not(.studio-app-body) :is(.trend-content p, .featured-creator-card strong, .featured-creator-card em, .conversation-preview-text span, .conversation-handle, .profile-player-queue-title, .creator-highlight-item strong, .admin-tab-menu span, .admin-tab-menu em) {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

body#top:not(.studio-app-body) .reputation-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

body#top:not(.studio-app-body) .reputation-badge {
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    overflow-wrap: anywhere;
    white-space: normal;
}

body#top:not(.studio-app-body) .file-input-name,
body#top:not(.studio-app-body) #message-file-name {
    display: inline-block;
    min-width: 0;
    max-width: min(28ch, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#top:not(.studio-app-body) .report-pop {
    position: relative;
    z-index: 4;
}

body#top:not(.studio-app-body) .report-pop[open] {
    z-index: 120;
}

body#top:not(.studio-app-body) .report-pop[open] .report-form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(260px, calc(100vw - 32px));
    z-index: 121;
}

body#top:not(.studio-app-body) .delete-post-form {
    position: relative;
    z-index: 1;
}

body#top:not(.studio-app-body) .push-permission-card {
    width: min(320px, calc(100vw - 32px));
    max-width: min(320px, calc(100vw - 32px));
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

body#top:not(.studio-app-body) .push-permission-copy span {
    overflow-wrap: anywhere;
}

body#top:not(.studio-app-body) .push-permission-icon,
body#top:not(.studio-app-body) .push-permission-copy small {
    display: none;
}

body#top:not(.studio-app-body) .push-permission-actions {
    justify-content: flex-start;
}

body#top:not(.studio-app-body) .push-permission-actions button {
    min-height: 30px;
    padding: 7px 10px;
}

body#top:not(.studio-app-body) :is(.featured-creator-card, .top-creator-item) {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

@media (max-width: 900px) {
    body#top:not(.studio-app-body) .layout {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    body#top:not(.studio-app-body) .rightbar,
    body#top:not(.studio-app-body) .sidebar {
        max-width: 100%;
    }

    body#top:not(.studio-app-body) .home-hero-card,
    body#top:not(.studio-app-body) .launch-command-strip,
    body#top:not(.studio-app-body) .launch-command-card {
        min-width: 0;
        max-width: 100%;
    }

    body#top:not(.studio-app-body) .launch-command-strip {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body#top:not(.studio-app-body) .mobile-bottom-nav {
        pointer-events: none;
        position: sticky !important;
        bottom: 0 !important;
        margin-top: 20px !important;
    }

    body#top:not(.studio-app-body) .mobile-nav-shell,
    body#top:not(.studio-app-body) .mobile-more-menu {
        pointer-events: auto;
    }

    body#top:not(.studio-app-body) .mobile-more-menu:not([open]) .mobile-more-panel {
        display: none !important;
    }

    body#top:not(.studio-app-body) .mobile-more-menu[open] .mobile-more-panel {
        max-height: min(58vh, 420px);
        overflow-y: auto;
    }

    body#top:not(.studio-app-body) .push-permission-card {
        grid-template-columns: minmax(0, 1fr);
        max-width: calc(100vw - 16px);
        top: calc(-1 * (var(--mobile-nav-space, 84px) + 134px)) !important;
        margin-bottom: 0 !important;
    }

    body#top:not(.studio-app-body) .push-permission-copy {
        max-width: 100%;
    }

    body#top:not(.studio-app-body) .push-permission-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body#top:not(.studio-app-body) .video-style-filter-card {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }
}

@media (max-width: 1200px) and (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-workspace,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-playlist-panel {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-height: 540px !important;
    }

    .studio-ready body.studio-app-body .studio-right-panel-tabs {
        order: 2 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
        order: 3 !important;
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 340px !important;
    }
}

@media (max-width: 760px) {
    body#top:not(.studio-app-body) .create-post,
    body#top:not(.studio-app-body) .create-post-form {
        min-width: 0;
        max-width: 100%;
    }

    body#top:not(.studio-app-body) .messages-command-tools,
    body#top:not(.studio-app-body) .message-compose-tools {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body#top:not(.studio-app-body) .profile-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body#top:not(.studio-app-body) .genre-tags.is-collapsed {
        max-height: none;
        overflow: visible;
    }
}

.studio-ready body.studio-app-body {
    overflow-x: hidden;
}

.studio-ready body.studio-app-body .studio-control-label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-control-label :is(input, select) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.studio-ready body.studio-app-body .studio-transport-fields {
    align-items: stretch !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
}

.studio-ready body.studio-app-body .studio-sample-item,
.studio-ready body.studio-app-body .studio-sample-meta b,
.studio-ready body.studio-app-body .ptx-daw-status-badge {
    min-width: 0;
    overflow-wrap: anywhere;
}

.studio-ready body.studio-app-body .is-selected.studio-track .studio-track-label span {
    color: rgba(244, 250, 255, .82) !important;
}

.studio-ready body.studio-app-body .is-selected.studio-track .studio-mini-slider {
    color: rgba(244, 250, 255, .86) !important;
}

.studio-ready body.studio-app-body .studio-topbar {
    grid-template-rows: minmax(64px, auto) minmax(48px, auto) minmax(48px, auto) !important;
    min-height: 178px !important;
}

.studio-ready body.studio-app-body .studio-project-tools,
.studio-ready body.studio-app-body #studio-layout-controls,
.studio-ready body.studio-app-body .studio-transport {
    min-height: fit-content !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-sample-item {
    min-height: 96px !important;
    height: auto !important;
}

.studio-ready body.studio-app-body .studio-sample-meta b {
    min-width: max-content;
}

@media (max-width: 900px) {
    .studio-ready body.studio-app-body .studio-daw-grid {
        grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr) !important;
    }

    .studio-ready body.studio-app-body .studio-browser {
        min-width: 240px !important;
    }
}

@media (max-width: 520px) {
    .studio-ready body.studio-app-body .studio-topbar {
        min-height: 172px !important;
    }

    .studio-ready body.studio-app-body .studio-transport-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .studio-ready body.studio-app-body #studio-browser-filter-chips,
    .studio-ready body.studio-app-body #studio-browser-tabs {
        min-height: 42px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}

/* PULSATRAX Studio layout quality pass: prioritize the Playlist and make side tools easier to scan. */
.studio-ready body.studio-app-body .studio-app {
    --ptx-library-width: 240px !important;
    --ptx-right-width: 300px !important;
    --ptx-help-width: 260px !important;
    --ptx-owner-width: 260px !important;
}

.studio-ready body.studio-app-body .studio-daw-grid,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
    grid-template-columns: var(--ptx-library-width) minmax(780px, 1fr) 0 !important;
    gap: 10px !important;
}

.studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
    grid-template-columns: var(--ptx-library-width) minmax(780px, 1fr) var(--ptx-owner-width) !important;
}

.studio-ready body.studio-app-body .studio-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ptx-right-width)) !important;
    gap: 10px !important;
}

.studio-ready body.studio-app-body .studio-browser {
    width: var(--ptx-library-width) !important;
    max-width: var(--ptx-library-width) !important;
    padding: 10px !important;
    gap: 10px !important;
}

.studio-ready body.studio-app-body .studio-browser-controls {
    gap: 10px !important;
}

.studio-ready body.studio-app-body .studio-browser-tabs,
.studio-ready body.studio-app-body .studio-browser-filter-chips {
    gap: 8px !important;
    min-height: 34px !important;
    padding-bottom: 2px !important;
}

.studio-ready body.studio-app-body .studio-browser-tabs button,
.studio-ready body.studio-app-body .studio-browser-filter-chips button {
    min-height: 30px !important;
    padding: 5px 10px !important;
}

.studio-ready body.studio-app-body .studio-sample-list {
    display: grid !important;
    gap: 10px !important;
    padding-right: 4px !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-item {
    grid-template-columns: 14px minmax(0, 1fr) 34px 42px !important;
    grid-template-rows: minmax(34px, auto) minmax(26px, auto) !important;
    min-height: 104px !important;
    max-height: none !important;
    padding: 9px !important;
    gap: 8px !important;
    align-items: center !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-main {
    display: grid !important;
    gap: 5px !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-main strong {
    line-height: 1.18 !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-meta {
    gap: 6px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-sample-meta b {
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-browser .studio-preview-btn,
.studio-ready body.studio-app-body .studio-browser .studio-clip-btn,
.studio-ready body.studio-app-body .studio-browser .studio-fav-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-playlist-panel {
    grid-template-rows: 28px minmax(44px, auto) minmax(260px, 1fr) 0 66px 0 0 !important;
    gap: 8px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-panel-title {
    min-height: 28px !important;
    max-height: none !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 80 !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    padding: 4px 0 8px !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar > .studio-secondary-btn {
    flex: 0 1 auto !important;
    min-width: min(160px, 100%) !important;
    min-height: 34px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar > .studio-control-label {
    flex: 1 1 150px !important;
    max-width: 210px !important;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar .studio-toolbar-group {
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-toolbar-edit,
.studio-ready body.studio-app-body .studio-toolbar-song,
.studio-ready body.studio-app-body .studio-toolbar-lanes {
    flex: 0 0 auto !important;
}

.studio-ready body.studio-app-body .studio-toolbar-intel {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu {
    position: relative !important;
    z-index: 90 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu[open] {
    z-index: 14000 !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu > summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(118, 146, 184, .28) !important;
    border-radius: 7px !important;
    color: rgba(238, 246, 255, .9) !important;
    background: rgba(12, 18, 27, .96) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    list-style: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu > summary::-webkit-details-marker {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu > summary::after {
    content: "v";
    color: rgba(86, 205, 216, .85);
    font-size: .66rem;
    line-height: 1;
}

.studio-ready body.studio-app-body .studio-toolbar-menu[open] > summary {
    border-color: rgba(86, 205, 216, .52) !important;
    color: #f8fbff !important;
    background: rgba(15, 25, 35, .98) !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu > summary:focus-visible,
.studio-ready body.studio-app-body .studio-toolbar-menu-body button:focus-visible {
    outline: 2px solid rgba(86, 205, 216, .85) !important;
    outline-offset: 2px !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu-body {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 12000 !important;
    display: grid !important;
    min-width: 206px !important;
    max-width: min(260px, calc(100vw - 28px)) !important;
    gap: 5px !important;
    padding: 7px !important;
    border: 1px solid rgba(118, 146, 184, .32) !important;
    border-radius: 8px !important;
    background: rgba(8, 12, 18, .98) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .38) !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu:not([open]) .studio-toolbar-menu-body {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-toolbar-menu-body button {
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-toolbar-submenu {
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-toolbar-submenu > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(118, 146, 184, .2) !important;
    border-radius: 7px !important;
    color: rgba(228, 246, 255, .78) !important;
    background: rgba(255, 255, 255, .035) !important;
    cursor: pointer !important;
    font-size: .66rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    list-style: none !important;
    text-transform: uppercase !important;
}

.studio-ready body.studio-app-body .studio-toolbar-submenu > summary::-webkit-details-marker {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-toolbar-submenu > summary::after {
    content: "v";
    color: rgba(86, 205, 216, .72);
}

.studio-ready body.studio-app-body .studio-toolbar-submenu-body {
    display: grid !important;
    gap: 5px !important;
    padding-top: 5px !important;
}

.studio-ready body.studio-app-body .studio-toolbar-submenu:not([open]) .studio-toolbar-submenu-body {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-toolbar-intel .studio-energy-toggle {
    min-height: 34px !important;
    flex: 0 0 auto !important;
}

.studio-ready body.studio-app-body .studio-production-plan {
    display: grid;
    gap: 12px;
}

.studio-ready body.studio-app-body .studio-production-plan-head {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(118, 146, 184, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.studio-ready body.studio-app-body .studio-production-plan-head strong {
    color: #f8fbff;
    font-size: .9rem;
}

.studio-ready body.studio-app-body .studio-production-plan-head p,
.studio-ready body.studio-app-body .studio-production-plan-head li,
.studio-ready body.studio-app-body .studio-production-plan-head small {
    margin: 0;
    color: rgba(228, 246, 255, .68);
    font-size: .76rem;
    line-height: 1.4;
}

.studio-ready body.studio-app-body .studio-production-plan-head ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 17px;
}

.studio-ready body.studio-app-body .studio-production-actions {
    display: grid;
    gap: 8px;
}

.studio-ready body.studio-app-body .studio-production-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid rgba(118, 146, 184, .16);
    border-radius: 8px;
    background: rgba(7, 11, 16, .88);
    cursor: pointer;
}

.studio-ready body.studio-app-body .studio-production-action:hover,
.studio-ready body.studio-app-body .studio-production-action:focus-visible {
    border-color: rgba(86, 205, 216, .36);
    background: rgba(13, 20, 29, .92);
}

.studio-ready body.studio-app-body .studio-production-action-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.studio-ready body.studio-app-body .studio-production-action-main span {
    color: rgba(86, 205, 216, .82);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-production-action-main strong {
    color: #f8fbff;
    font-size: .86rem;
}

.studio-ready body.studio-app-body .studio-production-action-main em,
.studio-ready body.studio-app-body .studio-production-action-main small {
    overflow: hidden;
    color: rgba(228, 246, 255, .66);
    font-size: .72rem;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.studio-ready body.studio-app-body .studio-production-placement {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 4px 0 0;
}

.studio-ready body.studio-app-body .studio-production-placement div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(118, 146, 184, .14);
    border-radius: 6px;
    background: rgba(255, 255, 255, .03);
}

.studio-ready body.studio-app-body .studio-production-placement dt {
    color: rgba(228, 246, 255, .48);
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-production-placement dd {
    margin: 0;
    overflow: hidden;
    color: rgba(248, 251, 255, .92);
    font-size: .72rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-ready body.studio-app-body .studio-production-action-actions {
    display: grid;
    gap: 6px;
    min-width: 86px;
}

.studio-ready body.studio-app-body .studio-production-action.has-no-safe-placement {
    border-color: rgba(255, 184, 77, .28);
}

.studio-ready body.studio-app-body .studio-production-action.has-no-safe-placement .studio-production-action-main > span {
    color: #ffcf7a;
}

.studio-ready body.studio-app-body .studio-production-action-actions button {
    min-height: 30px;
    width: 100%;
}

.studio-ready body.studio-app-body .studio-foundation-feedback {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.studio-ready body.studio-app-body .studio-foundation-feedback button {
    min-height: 28px;
    border: 1px solid rgba(118, 146, 184, .24);
    border-radius: 7px;
    color: rgba(238, 246, 255, .82);
    background: rgba(255, 255, 255, .04);
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
}

.studio-ready body.studio-app-body .studio-foundation-feedback button.is-active {
    border-color: rgba(86, 205, 216, .62);
    background: rgba(86, 205, 216, .14);
    color: #f8fbff;
}

.studio-ready body.studio-app-body .studio-foundation-dialog-shell {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, .62);
}

.studio-ready body.studio-app-body .studio-foundation-dialog {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(118, 146, 184, .28);
    border-radius: 10px;
    background: #080d14;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
}

.studio-ready body.studio-app-body .studio-foundation-dialog-head {
    display: flex;
    gap: 12px;
    align-items: start;
    justify-content: space-between;
}

.studio-ready body.studio-app-body .studio-foundation-dialog-head span {
    color: rgba(86, 205, 216, .82);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-foundation-dialog-head h2 {
    margin: 3px 0 0;
    color: #f8fbff;
    font-size: 1.25rem;
    line-height: 1.1;
}

.studio-ready body.studio-app-body .studio-foundation-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.studio-ready body.studio-app-body .studio-foundation-style-group {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.studio-ready body.studio-app-body .studio-foundation-style-group h3 {
    margin: 0;
    color: rgba(86, 205, 216, .78);
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.studio-ready body.studio-app-body .studio-foundation-style-group > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.studio-ready body.studio-app-body .studio-foundation-style-grid button {
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 8px;
    border: 1px solid rgba(118, 146, 184, .22);
    border-radius: 8px;
    color: rgba(238, 246, 255, .86);
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    text-align: left;
}

.studio-ready body.studio-app-body .studio-foundation-style-grid button.is-active {
    border-color: rgba(86, 205, 216, .62);
    background: rgba(86, 205, 216, .12);
}

.studio-ready body.studio-app-body .studio-foundation-style-grid strong {
    color: #f8fbff;
    font-size: .78rem;
}

.studio-ready body.studio-app-body .studio-foundation-style-grid span {
    color: rgba(228, 246, 255, .58);
    font-size: .7rem;
    font-weight: 800;
}

.studio-ready body.studio-app-body .studio-foundation-preview {
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px solid rgba(118, 146, 184, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.studio-ready body.studio-app-body .studio-foundation-preview > strong {
    color: #f8fbff;
    font-size: .9rem;
}

.studio-ready body.studio-app-body .studio-foundation-role-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.studio-ready body.studio-app-body .studio-foundation-role-columns > div > strong {
    display: block;
    margin-bottom: 5px;
    color: rgba(238, 246, 255, .7);
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.studio-ready body.studio-app-body .studio-foundation-components {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-ready body.studio-app-body .studio-foundation-components li {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(86, 205, 216, .24);
    border-radius: 999px;
    color: rgba(238, 246, 255, .86);
    background: rgba(86, 205, 216, .07);
    font-size: .74rem;
    font-weight: 850;
}

.studio-ready body.studio-app-body .studio-foundation-components span {
    color: rgba(86, 205, 216, .92);
}

.studio-ready body.studio-app-body .studio-foundation-components.is-avoid li {
    border-color: rgba(255, 150, 150, .35);
    color: rgba(255, 210, 210, .86);
    background: rgba(255, 80, 80, .08);
}

.studio-ready body.studio-app-body .studio-foundation-components.is-avoid span {
    color: rgba(255, 190, 190, .86);
}

.studio-ready body.studio-app-body .studio-foundation-preview p {
    margin: 0;
    color: rgba(228, 246, 255, .66);
    font-size: .78rem;
    line-height: 1.4;
}

.studio-ready body.studio-app-body .studio-foundation-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: end;
}

.studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist {
    min-height: 320px !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs,
.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
    max-width: var(--ptx-right-width) !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs {
    gap: 6px !important;
    padding: 6px !important;
}

.studio-ready body.studio-app-body .studio-right-panel-tabs > button {
    min-height: 30px !important;
    padding: 5px 8px !important;
}

.studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
    padding: 14px !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active {
    gap: 12px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-tracks {
    grid-auto-rows: minmax(120px, auto) !important;
    gap: 12px !important;
    padding-right: 4px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track {
    gap: 9px !important;
    padding-bottom: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px 10px !important;
    padding: 10px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-rack-controls {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(30px, auto)) !important;
    gap: 6px !important;
    max-width: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-rack-controls button {
    min-width: 30px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 26px !important;
    align-items: center !important;
}

@media (max-width: 1366px) {
    .studio-ready body.studio-app-body .studio-app {
        --ptx-library-width: 220px !important;
        --ptx-right-width: 280px !important;
        --ptx-help-width: 250px !important;
    }

    .studio-ready body.studio-app-body .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
        grid-template-columns: var(--ptx-library-width) minmax(680px, 1fr) 0 !important;
    }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .studio-ready body.studio-app-body .studio-app {
        --ptx-library-width: 100% !important;
        --ptx-right-width: 100% !important;
        --ptx-help-width: 240px !important;
    }

    .studio-ready body.studio-app-body .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid {
        grid-template-areas:
            "library"
            "workspace"
            "owner" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(210px, 26dvh) minmax(620px, auto) auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-browser {
        width: auto !important;
        max-width: 100% !important;
        max-height: 32dvh !important;
    }

    .studio-ready body.studio-app-body .studio-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(500px, 64dvh) 42px minmax(320px, auto) !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 500px !important;
    }

    .studio-ready body.studio-app-body .studio-right-panel-tabs {
        grid-column: 1 !important;
        grid-row: 2 !important;
        max-width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
        grid-column: 1 !important;
        grid-row: 3 !important;
        max-width: 100% !important;
        min-height: 320px !important;
    }
}

@media (max-width: 760px) {
    .studio-ready body.studio-app-body .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-daw-grid,
    .studio-ready body.studio-app-body .studio-app.is-studio-level-owner .studio-daw-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .studio-ready body.studio-app-body .studio-browser {
        width: auto !important;
        max-width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-workspace {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-height: 430px !important;
    }

    .studio-ready body.studio-app-body .studio-right-panel-tabs {
        order: 2 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active {
        order: 3 !important;
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 320px !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar .studio-toolbar-group,
    .studio-ready body.studio-app-body .studio-toolbar-intel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-toolbar-intel {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .studio-ready body.studio-app-body .studio-toolbar-menu,
    .studio-ready body.studio-app-body .studio-toolbar-menu > summary {
        width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-toolbar-menu-body {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin-top: 6px !important;
    }

    .studio-ready body.studio-app-body .studio-toolbar-intel .studio-energy-toggle {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-production-action {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .studio-ready body.studio-app-body .studio-production-action-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        min-width: 0 !important;
    }

    .studio-ready body.studio-app-body .studio-production-placement {
        grid-template-columns: 1fr !important;
    }

    .studio-ready body.studio-app-body .studio-foundation-dialog-shell {
        padding: 10px !important;
        align-items: start !important;
    }

    .studio-ready body.studio-app-body .studio-foundation-dialog {
        max-height: calc(100dvh - 20px) !important;
        padding: 14px !important;
    }

    .studio-ready body.studio-app-body .studio-foundation-style-grid {
        grid-template-columns: 1fr !important;
    }

    .studio-ready body.studio-app-body .studio-foundation-style-group > div,
    .studio-ready body.studio-app-body .studio-foundation-role-columns {
        grid-template-columns: 1fr !important;
    }

    .studio-ready body.studio-app-body .studio-foundation-dialog-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .studio-ready body.studio-app-body .studio-playlist-panel > .studio-playlist-toolbar > .studio-control-label {
        max-width: none !important;
    }
}

/* Final responsive Studio ordering: Playlist remains primary below desktop widths. */
@media (max-width: 1200px) {
    .studio-ready body.studio-app-body .studio-workspace,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .studio-ready body.studio-app-body .studio-workspace > .studio-playlist-panel,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-beginner, .is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-playlist-panel {
        order: 1 !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: min(620px, 74dvh) !important;
    }

    .studio-ready body.studio-app-body .studio-workspace > .studio-right-panel-tabs {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .studio-ready body.studio-app-body .studio-workspace > .studio-work-panel.is-right-active,
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-workspace > .studio-work-panel.is-right-active {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 340px !important;
    }
}

/* Final Studio panel quality fixes: no clipped Rack rows, Automation toolbar flow, MIDI block separation. */
.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active #studio-tracks {
    grid-auto-rows: minmax(164px, auto) !important;
    gap: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track {
    grid-template-rows: minmax(108px, auto) minmax(24px, auto) !important;
    min-height: 164px !important;
    max-height: none !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: 8px !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track-label {
    grid-template-columns: minmax(92px, .8fr) minmax(0, 1fr) minmax(150px, auto) !important;
    grid-template-rows: auto auto auto !important;
    min-height: 108px !important;
    max-height: none !important;
    gap: 8px 12px !important;
    padding: 12px !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track-label strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track-label span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track-label em {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-rack-controls {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(28px, auto)) !important;
    gap: 6px !important;
    align-content: start !important;
    justify-content: end !important;
    max-width: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-rack-controls button {
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 7px !important;
    white-space: nowrap !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-mini-slider {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 28px !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-mini-slider:first-of-type {
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-mini-slider:last-of-type {
    grid-column: 2 / 4 !important;
    grid-row: 3 !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-mini-slider input {
    height: 20px !important;
    min-height: 20px !important;
    max-height: none !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track .studio-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.studio-ready body.studio-app-body .studio-automation-panel.is-right-active {
    grid-template-rows: 26px max-content minmax(400px, auto) !important;
    gap: 8px !important;
    align-content: start !important;
}

.studio-ready body.studio-app-body .studio-automation-panel.is-right-active .studio-panel-title {
    min-height: 26px !important;
}

.studio-ready body.studio-app-body .studio-automation-panel.is-right-active .studio-piano-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto) !important;
    gap: 10px !important;
    align-items: end !important;
    min-height: 42px !important;
    height: fit-content !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start !important;
}

.studio-ready body.studio-app-body .studio-automation-panel.is-right-active .studio-piano-toolbar .studio-control-label {
    min-width: 0 !important;
}

.studio-ready body.studio-app-body .studio-automation-panel.is-right-active #studio-clear-automation {
    width: 100% !important;
    min-height: 36px !important;
    white-space: normal !important;
}

.studio-ready body.studio-app-body .studio-automation-panel.is-right-active #studio-automation-lane {
    min-height: 400px !important;
    height: auto !important;
}

.studio-ready body.studio-app-body .studio-midi-panel.is-right-active #studio-midi-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 14px !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-midi-hero,
.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-midi-controls,
.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-midi-grid,
.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-project-rights-note {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-midi-controls {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(120, 150, 190, .18) !important;
}

.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-midi-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
}

.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-midi-grid section {
    position: static !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, auto) !important;
    gap: 8px !important;
    min-height: 120px !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(120, 150, 190, .16) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .035) !important;
}

.studio-ready body.studio-app-body .studio-midi-panel.is-right-active :is(.studio-midi-performance, .studio-midi-pad-rack, .studio-midi-devices, .studio-midi-events) {
    position: static !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-midi-panel.is-right-active .studio-midi-pad-rack {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
    gap: 8px !important;
}

@media (max-width: 430px) {
    .studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track-label {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto auto !important;
    }

    .studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-track-label :is(strong, span, em, .studio-rack-controls, .studio-mini-slider) {
        grid-column: 1 !important;
    }

    .studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-rack-controls {
        grid-row: 3 !important;
        justify-content: start !important;
    }

    .studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-mini-slider:first-of-type {
        grid-row: 4 !important;
    }

    .studio-ready body.studio-app-body .studio-pattern-panel.is-right-active .studio-mini-slider:last-of-type {
        grid-row: 5 !important;
    }

    .studio-ready body.studio-app-body .studio-automation-panel.is-right-active .studio-piano-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Absolute final Studio panel override: beat older compact right-panel rules. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active #studio-tracks {
    grid-auto-rows: minmax(164px, auto) !important;
    gap: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track {
    grid-template-rows: minmax(108px, auto) minmax(24px, auto) !important;
    min-height: 164px !important;
    height: auto !important;
    max-height: none !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: 10px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label {
    grid-template-columns: minmax(96px, .8fr) minmax(0, 1fr) minmax(156px, auto) !important;
    grid-template-rows: auto auto auto !important;
    min-height: 108px !important;
    height: auto !important;
    max-height: none !important;
    gap: 9px 12px !important;
    padding: 12px !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track .studio-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-rack-controls {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    grid-template-columns: repeat(5, minmax(28px, auto)) !important;
    gap: 6px !important;
    align-content: start !important;
    justify-content: end !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider:first-of-type {
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider:last-of-type {
    grid-column: 2 / 4 !important;
    grid-row: 3 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active #studio-midi-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 16px !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(120, 150, 190, .18) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
    align-items: stretch !important;
    align-content: start !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section {
    grid-column: 1 / -1 !important;
    position: static !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    min-height: 132px !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(120, 150, 190, .16) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .035) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active :is(.studio-midi-performance, .studio-midi-pad-rack, .studio-midi-devices, .studio-midi-events) {
    position: static !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-pad-rack {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
    gap: 8px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active {
    grid-template-rows: 26px max-content minmax(400px, auto) !important;
    gap: 8px !important;
    align-content: start !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active .studio-piano-toolbar {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto) !important;
    gap: 10px !important;
    align-items: end !important;
    align-self: start !important;
    min-height: 42px !important;
    height: fit-content !important;
    max-height: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active #studio-automation-lane {
    grid-row: 3 !important;
    min-height: 400px !important;
}

/* Studio panel hardening: prefer clean flow over compact clipped controls. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track {
    min-height: 172px !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-track-label {
    min-height: 114px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active :is(.studio-track-label, .studio-rack-controls, .studio-mini-slider, .studio-grid) {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-advanced, .is-studio-level-pro, .is-studio-level-owner) .studio-pattern-panel.is-right-active .studio-mini-slider {
    color: rgba(237, 246, 255, .72) !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active #studio-midi-panel {
    grid-template-rows: auto auto auto auto !important;
    gap: 18px !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active :is(.studio-midi-hero, .studio-midi-controls, .studio-midi-grid, .studio-project-rights-note) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls {
    grid-row: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: start !important;
    overflow: visible !important;
    padding: 0 0 18px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls :is(button, label, select, span) {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: fit-content !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls label:not(.studio-browser-check) {
    min-height: 54px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-level-control {
    grid-template-columns: minmax(0, 1fr) 56px !important;
    align-items: center !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-capture-summary {
    grid-column: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid {
    grid-row: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section {
    min-height: 136px !important;
    max-height: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section:nth-child(1) {
    order: 4 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section:nth-child(2) {
    order: 2 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section:nth-child(3) {
    order: 1 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid section:nth-child(4) {
    order: 3 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active :is(.studio-midi-performance, .studio-midi-pad-rack, .studio-midi-devices, .studio-midi-events) {
    overflow: visible !important;
}

@media (min-width: 520px) {
    .studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Force problematic right panels into normal vertical document flow. */
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active,
.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active .studio-panel-title {
    flex: 0 0 auto !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active .studio-piano-toolbar {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-automation-panel.is-right-active #studio-automation-lane {
    flex: 0 0 400px !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active #studio-midi-panel {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active #studio-midi-panel > * + * {
    margin-top: 18px !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-controls {
    display: grid !important;
    width: 100% !important;
}

.studio-ready body.studio-app-body .studio-app:is(.is-studio-level-pro, .is-studio-level-owner) .studio-midi-panel.is-right-active .studio-midi-grid {
    display: grid !important;
    width: 100% !important;
}

html.studio-ready body.studio-app-body .studio-workspace > section.studio-automation-panel.studio-work-panel.is-right-active,
html.studio-ready body.studio-app-body .studio-workspace > section.studio-midi-panel.studio-work-panel.is-right-active {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html.studio-ready body.studio-app-body .studio-workspace > section.studio-automation-panel.studio-work-panel.is-right-active > *,
html.studio-ready body.studio-app-body .studio-workspace > section.studio-midi-panel.studio-work-panel.is-right-active > * {
    flex: 0 0 auto !important;
}

html.studio-ready body.studio-app-body .studio-workspace > section.studio-automation-panel.studio-work-panel.is-right-active #studio-automation-lane {
    flex-basis: 400px !important;
    min-height: 400px !important;
    top: auto !important;
    bottom: auto !important;
}

html.studio-ready body.studio-app-body .studio-workspace > section.studio-midi-panel.studio-work-panel.is-right-active #studio-midi-panel {
    display: block !important;
    overflow: visible !important;
}

/* Collab workflow */
.collab-workflow-strip p {
    max-width: 780px;
}

.collab-project-workflow-grid {
    align-items: start;
}

.collab-project-workflow-card {
    display: grid;
    gap: 14px;
}

.collab-project-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.collab-project-facts span,
.collab-preview-placeholder {
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    color: rgba(236, 243, 255, .84);
    font-size: .78rem;
    font-weight: 800;
}

.collab-project-meta-block,
.collab-room-columns section {
    display: grid;
    gap: 8px;
}

.collab-project-meta-block > strong,
.collab-room-columns strong {
    color: rgba(236, 243, 255, .72);
    font-size: .72rem;
    text-transform: uppercase;
}

.collab-project-workflow-card audio {
    width: 100%;
    min-height: 36px;
}

.collab-match-explain {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.collab-match-explain strong {
    color: #fff;
}

.collab-apply-checks,
.studio-collab-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.collab-apply-checks label,
.studio-collab-check-grid label {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    color: rgba(236, 243, 255, .78);
    font-size: .78rem;
}

.collab-request-actions {
    align-items: stretch;
}

.collab-request-actions form {
    display: grid;
    gap: 8px;
}

.collab-room-grid {
    display: grid;
    gap: 16px;
}

.collab-room-card {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(5, 10, 18, .66);
}

.collab-room-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.collab-room-head h3 {
    margin: 2px 0;
}

.collab-room-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.collab-room-chat {
    display: grid;
    gap: 8px;
    max-height: 180px;
    overflow: auto;
}

.collab-room-chat p,
.collab-room-columns p {
    margin: 0;
    color: rgba(236, 243, 255, .78);
}

.collab-room-message-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.collab-agreement-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.collab-agreement-list li {
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    color: rgba(236, 243, 255, .72);
}

.collab-agreement-list li.is-done {
    background: rgba(70, 255, 154, .14);
    color: #d8ffe9;
}

.studio-collab-publish-box {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(70, 255, 154, .18);
    border-radius: 8px;
    background: rgba(70, 255, 154, .055);
}

.studio-collab-publish-box > .studio-primary-btn {
    width: 100%;
}

@media (max-width: 560px) {
    .collab-room-head,
    .collab-room-message-form {
        grid-template-columns: minmax(0, 1fr);
        display: grid;
    }
}

/* Public PULSATRAX Studio intro/demo promo. */
.public-ptx-studio-promo {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
    gap: 24px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(37, 213, 239, .3);
    background: linear-gradient(135deg, rgba(6, 12, 24, .96), rgba(14, 8, 22, .92));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.public-ptx-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.public-ptx-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: .98;
}

.public-ptx-copy p {
    margin: 0;
    max-width: 640px;
}

.public-ptx-actions,
.public-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.public-ptx-demo {
    min-height: 320px;
    border-radius: 12px;
    outline: none;
}

.public-ptx-demo:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 213, 239, .38);
}

.public-ptx-demo video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 12px;
    background: #05070d;
}

.public-ptx-fallback {
    min-height: 320px;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, rgba(8, 12, 22, .98), rgba(3, 5, 10, .98));
    overflow: hidden;
}

.ptx-fallback-toolbar {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}

.ptx-fallback-toolbar span {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #25d5ef, #4afb04, #ff2bd6);
}

.ptx-fallback-toolbar em {
    color: rgba(255, 255, 255, .66);
    font-style: normal;
    font-size: .82rem;
}

.ptx-fallback-body {
    display: grid;
    grid-template-columns: 96px 1fr 118px;
    gap: 10px;
    padding: 12px;
    min-height: 0;
}

.ptx-fallback-library,
.ptx-fallback-rack {
    display: grid;
    gap: 8px;
}

.ptx-fallback-library span {
    display: block;
    min-height: 28px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(37, 213, 239, .1);
    border: 1px solid rgba(37, 213, 239, .18);
    font-size: .76rem;
    color: rgba(255, 255, 255, .78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptx-fallback-playlist {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    min-height: 190px;
    padding: 8px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        rgba(255, 255, 255, .035);
    background-size: 36px 100%, 100% 32px, auto;
}

.ptx-fallback-playlist i {
    align-self: end;
    display: block;
    min-height: 38px;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255, 43, 214, .78), rgba(37, 213, 239, .42));
    box-shadow: 0 0 22px rgba(37, 213, 239, .16);
}

.ptx-fallback-playlist i:nth-child(2n) {
    min-height: 78px;
    background: linear-gradient(180deg, rgba(74, 251, 4, .68), rgba(37, 213, 239, .36));
}

.ptx-fallback-playlist i:nth-child(3n) {
    min-height: 122px;
}

.ptx-fallback-rack b {
    display: block;
    min-height: 38px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(37, 213, 239, .18));
    border: 1px solid rgba(255, 255, 255, .1);
}

.ptx-fallback-caption {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.ptx-fallback-caption span {
    color: rgba(255, 255, 255, .62);
    font-size: .88rem;
}

.public-ptx-mini-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-color: rgba(37, 213, 239, .22);
    background: linear-gradient(135deg, rgba(37, 213, 239, .08), rgba(255, 43, 214, .06)), rgba(5, 8, 16, .82);
}

.public-ptx-mini-cta h3,
.public-ptx-mini-cta p {
    margin: 0;
}

@media (max-width: 880px) {
    .public-ptx-studio-promo {
        grid-template-columns: 1fr;
    }

    .public-ptx-demo,
    .public-ptx-demo video,
    .public-ptx-fallback {
        min-height: 280px;
    }

    .ptx-fallback-body {
        grid-template-columns: 84px 1fr;
    }

    .ptx-fallback-rack {
        display: none;
    }

    .public-ptx-mini-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

.mobile-public-auth-strip {
    display: none;
}

/* Final public-discovery mobile navigation repair. Keep this near the end of the file. */
@media (max-width: 760px) {
    :root {
        --mobile-nav-space: max(78px, calc(70px + env(safe-area-inset-bottom)));
    }

    html,
    body#top:not(.studio-app-body) {
        min-height: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body#top:not(.studio-app-body) {
        padding-bottom: calc(var(--mobile-nav-space) + 18px) !important;
    }

    body#top:not(.studio-app-body) .layout,
    body#top:not(.studio-app-body) main.feed {
        padding-bottom: calc(var(--mobile-nav-space) + 18px) !important;
    }

    body#top:not(.studio-app-body) .mobile-bottom-nav,
    body#top:not(.studio-app-body) > .mobile-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 50000 !important;
        display: block !important;
        visibility: visible !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: var(--mobile-nav-space) !important;
        margin: 0 !important;
        padding: 6px 8px calc(7px + env(safe-area-inset-bottom)) !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        background:
            linear-gradient(180deg, rgba(7, 8, 17, .86), rgba(4, 5, 11, .98)),
            radial-gradient(circle at 14% 0%, rgba(37, 213, 239, .18), transparent 34%),
            radial-gradient(circle at 88% 0%, rgba(255, 43, 214, .14), transparent 38%) !important;
        border-top: 1px solid rgba(115, 247, 255, .24) !important;
        box-shadow: 0 -14px 34px rgba(0, 0, 0, .58) !important;
        backdrop-filter: blur(16px);
    }

    body#top:not(.studio-app-body) .mobile-nav-shell,
    body#top:not(.studio-app-body) > .mobile-bottom-nav .mobile-nav-shell {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        pointer-events: auto !important;
    }

    body#top:not(.studio-app-body) .mobile-nav-public .mobile-nav-shell {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    body#top:not(.studio-app-body) .mobile-nav-item,
    body#top:not(.studio-app-body) .mobile-more-menu > summary.mobile-nav-item {
        min-width: 0 !important;
        min-height: 54px !important;
        padding: 5px 1px !important;
        border-radius: 12px !important;
        font-size: .63rem !important;
        line-height: 1.05 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body#top:not(.studio-app-body) .mobile-nav-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: .76rem !important;
    }

    body#top:not(.studio-app-body) .mobile-more-menu:not([open]) .mobile-more-panel {
        display: none !important;
    }

    body#top:not(.studio-app-body) .mobile-more-panel,
    body#top:not(.studio-app-body) > .mobile-bottom-nav .mobile-more-panel {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(var(--mobile-nav-space) + 10px) !important;
        z-index: 50001 !important;
        max-height: min(62vh, 460px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding: 12px !important;
    }

    body#top:not(.studio-app-body) .mobile-more-head {
        position: sticky;
        top: -12px;
        z-index: 2;
        margin: -12px -12px 10px;
        padding: 12px;
        background: rgba(8, 7, 21, .98);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    body#top:not(.studio-app-body) .mobile-more-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(115, 247, 255, .28);
        border-radius: 999px;
        background: rgba(255, 255, 255, .07);
        color: #f6fbff;
        font: inherit;
        font-size: .72rem;
        font-weight: 900;
        cursor: pointer;
    }

    body#top:not(.studio-app-body) .mobile-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body#top:not(.studio-app-body) .mobile-more-link {
        min-height: 42px !important;
        padding: 9px 8px !important;
        text-align: center !important;
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-auth-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        margin: 0 0 10px;
        padding: 10px;
        border: 1px solid rgba(115, 247, 255, .24);
        border-radius: 14px;
        background: rgba(8, 11, 22, .86);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-auth-strip div {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-auth-strip strong {
        color: #fff;
        font-size: .92rem;
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-auth-strip span {
        color: rgba(234, 246, 255, .68);
        font-size: .74rem;
        line-height: 1.25;
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-auth-strip nav,
    body#top:not(.studio-app-body) .public-login-actions,
    body#top:not(.studio-app-body) .public-ptx-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-auth-strip a {
        min-height: 36px;
        padding: 8px 10px;
        white-space: nowrap;
        font-size: .78rem;
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-join {
        border-color: rgba(74, 251, 4, .38);
        background: rgba(74, 251, 4, .12);
    }

    body#top.home-page:not(.studio-app-body) .home-hero-card.live-experience-hero {
        min-height: 0 !important;
        padding: 14px 12px !important;
        margin-bottom: 10px !important;
    }

    body#top.home-page:not(.studio-app-body) .home-hero-card .mobile-hero-title {
        font-size: clamp(1.8rem, 10vw, 2.7rem) !important;
        line-height: .98 !important;
        margin-bottom: 8px !important;
    }

    body#top.home-page:not(.studio-app-body) .home-hero-card .mobile-hero-copy,
    body#top.home-page:not(.studio-app-body) .hero-alpha-notice p {
        font-size: .84rem !important;
        line-height: 1.35 !important;
    }

    body#top.home-page:not(.studio-app-body) .hero-alpha-notice {
        padding: 9px !important;
        margin-top: 8px !important;
    }

    body#top.home-page:not(.studio-app-body) .launch-command-strip {
        gap: 7px !important;
        margin-bottom: 10px !important;
    }

    body#top.home-page:not(.studio-app-body) .launch-command-card {
        min-height: 0 !important;
        padding: 10px !important;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-studio-promo {
        gap: 12px !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-copy {
        gap: 8px !important;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-copy h2 {
        font-size: clamp(1.45rem, 8vw, 2rem) !important;
        line-height: 1.05 !important;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-copy p {
        font-size: .84rem !important;
        line-height: 1.35 !important;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-actions {
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-actions::-webkit-scrollbar {
        display: none;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-actions > * {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 8px 10px;
        font-size: .78rem;
    }

    body#top.home-page:not(.studio-app-body) .public-ptx-demo,
    body#top.home-page:not(.studio-app-body) .public-ptx-demo video,
    body#top.home-page:not(.studio-app-body) .public-ptx-fallback {
        min-height: 190px !important;
    }

    body#top.home-page:not(.studio-app-body) .ptx-fallback-body {
        min-height: 118px;
        padding: 8px;
    }
}

/* Public conversion and arcade account gates. Keep at file end to outrank older launch-button passes. */
body#top.home-page:not(.studio-app-body) .hero-public-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 18px 0 6px;
}

body#top.home-page:not(.studio-app-body) .hero-auth-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    min-width: 168px;
    padding: 0 24px;
    border-radius: 12px;
    border: 1px solid rgba(115, 247, 255, .45);
    color: #f8fdff;
    font-size: 1rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 16px 38px rgba(0, 0, 0, .34);
}

body#top.home-page:not(.studio-app-body) .hero-auth-login {
    background: linear-gradient(135deg, rgba(37, 213, 239, .28), rgba(5, 12, 18, .88));
}

body#top.home-page:not(.studio-app-body) .hero-auth-create {
    border-color: rgba(74, 251, 4, .64);
    background: linear-gradient(135deg, rgba(74, 251, 4, .92), rgba(37, 213, 239, .58));
    color: #03100a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 0 28px rgba(74, 251, 4, .25), 0 18px 42px rgba(0, 0, 0, .38);
}

body#top.home-page:not(.studio-app-body) .hero-auth-explore {
    min-width: 138px;
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .055);
    color: rgba(241, 248, 255, .86);
}

body#top.home-page:not(.studio-app-body) .hero-auth-cta:hover,
body#top.home-page:not(.studio-app-body) .hero-auth-cta:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

body#top.home-page:not(.studio-app-body) .public-why-join-panel,
body#top.home-page:not(.studio-app-body) .public-browse-note {
    margin-bottom: 14px;
    border-color: rgba(115, 247, 255, .16);
    background:
        linear-gradient(135deg, rgba(14, 20, 31, .94), rgba(7, 10, 18, .94)),
        rgba(8, 11, 18, .94);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

body#top.home-page:not(.studio-app-body) .public-why-join-panel {
    display: grid;
    gap: 18px;
}

body#top.home-page:not(.studio-app-body) .public-why-join-head {
    display: grid;
    gap: 8px;
    max-width: 920px;
}

body#top.home-page:not(.studio-app-body) .public-why-join-head h2,
body#top.home-page:not(.studio-app-body) .public-browse-note h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    line-height: 1.08;
}

body#top.home-page:not(.studio-app-body) .public-why-join-head p,
body#top.home-page:not(.studio-app-body) .public-audience-card p,
body#top.home-page:not(.studio-app-body) .public-browse-note p {
    margin: 0;
    color: rgba(232, 242, 250, .76);
    line-height: 1.55;
}

body#top.home-page:not(.studio-app-body) .public-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body#top.home-page:not(.studio-app-body) .public-benefit-grid span {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: rgba(247, 251, 255, .92);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.25;
}

body#top.home-page:not(.studio-app-body) .public-conversion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body#top.home-page:not(.studio-app-body) .public-conversion-actions .launch-cta-primary {
    min-height: 48px;
    padding-inline: 22px;
}

body#top.home-page:not(.studio-app-body) .public-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

body#top.home-page:not(.studio-app-body) .public-audience-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(11, 16, 24, .92);
}

body#top.home-page:not(.studio-app-body) .public-audience-card span {
    color: var(--accent-cyan);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body#top.home-page:not(.studio-app-body) .public-audience-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.2;
}

body#top.home-page:not(.studio-app-body) .public-browse-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body#top.home-page:not(.studio-app-body) .public-browse-note > div {
    display: grid;
    gap: 8px;
}

body#top.home-page:not(.studio-app-body) .public-proof-panel,
body#top.home-page:not(.studio-app-body) .public-discovery-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 14px;
    border-color: rgba(115, 247, 255, .14);
    background:
        linear-gradient(135deg, rgba(12, 18, 29, .95), rgba(8, 11, 18, .95)),
        rgba(9, 12, 18, .95);
}

body#top.home-page:not(.studio-app-body) .public-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 10px;
}

body#top.home-page:not(.studio-app-body) .public-proof-stat {
    display: grid;
    gap: 5px;
    min-height: 92px;
    align-content: center;
    padding: 14px 12px;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: #f7fbff;
    text-decoration: none;
}

body#top.home-page:not(.studio-app-body) .public-proof-stat strong {
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    line-height: 1;
}

body#top.home-page:not(.studio-app-body) .public-proof-stat span {
    color: rgba(232, 242, 250, .72);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: uppercase;
}

body#top.home-page:not(.studio-app-body) .public-discovery-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

body#top.home-page:not(.studio-app-body) .public-discovery-column {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}

body#top.home-page:not(.studio-app-body) .public-discovery-column-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

body#top.home-page:not(.studio-app-body) .public-discovery-column-head span {
    min-width: 0;
    color: #fff;
    font-size: .84rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body#top.home-page:not(.studio-app-body) .public-discovery-column-head a {
    flex: 0 0 auto;
    color: var(--accent-cyan);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
}

body#top.home-page:not(.studio-app-body) .public-creator-mini-card,
body#top.home-page:not(.studio-app-body) .public-post-mini-card {
    display: grid;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(0, 0, 0, .16);
    color: #f4f9ff;
    text-decoration: none;
}

body#top.home-page:not(.studio-app-body) .public-creator-mini-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

body#top.home-page:not(.studio-app-body) .public-creator-mini-card .comment-avatar,
body#top.home-page:not(.studio-app-body) .public-creator-mini-card .avatar-fallback {
    width: 42px;
    height: 42px;
}

body#top.home-page:not(.studio-app-body) .public-creator-mini-card span,
body#top.home-page:not(.studio-app-body) .public-post-mini-card {
    min-width: 0;
}

body#top.home-page:not(.studio-app-body) .public-creator-mini-card strong,
body#top.home-page:not(.studio-app-body) .public-post-mini-card strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .92rem;
    line-height: 1.25;
    text-overflow: ellipsis;
}

body#top.home-page:not(.studio-app-body) .public-creator-mini-card em,
body#top.home-page:not(.studio-app-body) .public-creator-mini-card small,
body#top.home-page:not(.studio-app-body) .public-post-mini-card em,
body#top.home-page:not(.studio-app-body) .public-post-mini-card small,
body.home-page .top-creator-item small,
body.home-page .featured-creator-card small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: rgba(226, 238, 247, .68);
    font-size: .76rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#top.home-page:not(.studio-app-body) .public-post-mini-card {
    gap: 4px;
}

body#top.home-page:not(.studio-app-body) .public-discovery-empty {
    border-style: dashed;
    background: rgba(255, 255, 255, .028);
}

body#top.home-page:not(.studio-app-body) .public-discovery-empty small a {
    color: var(--accent-cyan);
    font-weight: 900;
    text-decoration: none;
}

body#top.home-page:not(.studio-app-body) .post-content-summary {
    color: rgba(241, 248, 255, .82);
    font-weight: 850;
}

body#top:not(.studio-app-body) .collab-role-strip strong {
    color: #fff;
    font-size: .88rem;
}

body#top:not(.studio-app-body) .collab-role-strip span,
body#top:not(.studio-app-body) .collab-shortlist-card small,
body#top:not(.studio-app-body) .collab-card-meta span {
    color: rgba(226, 238, 247, .68);
    font-size: .76rem;
    line-height: 1.25;
}

body#top:not(.studio-app-body) .collab-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}

body#top:not(.studio-app-body) .collab-card-meta span {
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
}

body#top:not(.studio-app-body) .match-reason-list {
    display: grid;
    gap: 6px;
}

body#top:not(.studio-app-body) .match-reason-list strong {
    color: #fff;
    font-size: .84rem;
}

.arcade-card-auth-note {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.045);
    color: rgba(226,235,243,.78) !important;
    font-size: .74rem !important;
    font-weight: 850;
    line-height: 1.2;
}

.arcade-account-modal {
    position: fixed;
    inset: 0;
    z-index: 60000;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(1, 3, 8, .78);
    backdrop-filter: blur(10px);
}

.arcade-account-modal.is-open {
    display: grid;
}

.arcade-account-dialog {
    width: min(520px, 100%);
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background:
        linear-gradient(135deg, rgba(14, 20, 28, .98), rgba(10, 14, 20, .98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.arcade-account-dialog h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    line-height: 1.08;
}

.arcade-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.arcade-account-actions > * {
    min-height: 44px;
}

@media (max-width: 760px) {
    body#top.home-page:not(.studio-app-body) .hero-public-auth-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin: 10px 0 8px;
    }

    body#top.home-page:not(.studio-app-body) .hero-auth-cta {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 0 14px;
        font-size: .92rem;
    }

    body#top.home-page:not(.studio-app-body) .mobile-public-auth-strip {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    body#top.home-page:not(.studio-app-body) .public-why-join-panel,
    body#top.home-page:not(.studio-app-body) .public-browse-note {
        padding: 14px !important;
        margin-bottom: 10px;
    }

    body#top.home-page:not(.studio-app-body) .public-benefit-grid,
    body#top.home-page:not(.studio-app-body) .public-audience-grid,
    body#top.home-page:not(.studio-app-body) .public-browse-note,
    body#top.home-page:not(.studio-app-body) .public-proof-grid,
    body#top.home-page:not(.studio-app-body) .public-discovery-columns {
        grid-template-columns: 1fr;
    }

    body#top.home-page:not(.studio-app-body) .public-audience-grid {
        gap: 9px;
        margin-bottom: 10px;
    }

    body#top.home-page:not(.studio-app-body) .public-audience-card {
        padding: 14px;
    }

    body#top.home-page:not(.studio-app-body) .public-benefit-grid span {
        min-height: 0;
        padding: 10px 11px;
        font-size: .86rem;
    }

    body#top.home-page:not(.studio-app-body) .public-conversion-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    body#top.home-page:not(.studio-app-body) .public-conversion-actions > * {
        width: 100%;
        justify-content: center;
    }

    body#top.home-page:not(.studio-app-body) .public-proof-panel,
    body#top.home-page:not(.studio-app-body) .public-discovery-panel {
        padding: 14px !important;
        margin-bottom: 10px;
    }

    body#top.home-page:not(.studio-app-body) .public-proof-stat {
        min-height: 68px;
    }

    body#top.home-page:not(.studio-app-body) .public-discovery-column {
        padding: 12px;
    }

    .arcade-account-dialog {
        padding: 18px;
    }

    .arcade-account-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .arcade-account-actions > * {
        width: 100%;
    }
}

/* PTX games clean browser-games presentation. Shared arcade presentation only; game rules stay in JS. */
body#top.games-page:not(.studio-app-body) .feed {
    width: min(100%, 1400px) !important;
}

body#top.games-page:not(.studio-app-body) .arcade-header {
    position: relative;
    min-height: 112px;
    display: grid;
    align-content: center;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(12, 17, 23, .92) !important;
    border-color: rgba(255,255,255,.09) !important;
    box-shadow: none !important;
}

body#top.games-page:not(.studio-app-body) .arcade-grid {
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch;
}

body#top.games-page:not(.studio-app-body) .arcade-card {
    min-height: 368px;
    gap: 11px;
    padding: 14px !important;
    border-radius: 12px !important;
    transform: translateZ(0);
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        #111821 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.20) !important;
    color: #edf3f8;
}

body#top.games-page:not(.studio-app-body) .arcade-card:hover,
body#top.games-page:not(.studio-app-body) .arcade-card:focus-visible {
    border-color: color-mix(in srgb, var(--game-a, #5aa8c8) 34%, rgba(255,255,255,.16)) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.24) !important;
    transform: translateY(-1px);
}

body#top.games-page:not(.studio-app-body) .arcade-card-featured {
    min-height: 430px;
}

body#top.games-page:not(.studio-app-body) .arcade-card-hero {
    grid-column: span 2;
}

body#top.games-page:not(.studio-app-body) .arcade-card-featured .arcade-card-thumb {
    aspect-ratio: 16 / 10;
}

body#top.games-page:not(.studio-app-body) .arcade-card-hero strong {
    font-size: 1.34rem;
}

body#top.games-page:not(.studio-app-body) .arcade-card-hero em {
    font-size: .94rem;
}

body#top.games-page:not(.studio-app-body) .arcade-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: #0b1016;
    box-shadow: none;
}

body#top.games-page:not(.studio-app-body) .arcade-card-thumb canvas,
body#top.games-page:not(.studio-app-body) .arcade-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body#top.games-page:not(.studio-app-body) .arcade-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: auto;
}

body#top.games-page:not(.studio-app-body) .arcade-card-best {
    flex: 0 0 auto;
    color: rgba(226, 235, 243, .78);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: 0;
}

body#top.games-page:not(.studio-app-body) .arcade-card::before {
    content: none !important;
}

body#top.games-page:not(.studio-app-body) .arcade-card:hover::before,
body#top.games-page:not(.studio-app-body) .arcade-card:focus-visible::before {
    content: none !important;
}

body#top.games-page:not(.studio-app-body) .arcade-card strong {
    font-size: 1.12rem;
    line-height: 1.15;
    color: #f5f8fb;
}

body#top.games-page:not(.studio-app-body) .arcade-card em {
    min-height: 42px;
    -webkit-line-clamp: 2;
    color: rgba(224, 233, 240, .72) !important;
}

body#top.games-page:not(.studio-app-body) .arcade-card-kind {
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.045);
    color: rgba(237,243,248,.82) !important;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: .72rem !important;
    font-weight: 850;
}

body#top.games-page:not(.studio-app-body) .arcade-card-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 36px;
    margin-left: auto;
    padding: 0 15px;
    border: 1px solid color-mix(in srgb, var(--game-a, #5aa8c8) 42%, rgba(255,255,255,.12));
    border-radius: 8px;
    background: color-mix(in srgb, var(--game-a, #5aa8c8) 20%, #17202a) !important;
    color: #f6fbff !important;
    font-weight: 900;
}

body#top.games-page:not(.studio-app-body) .arcade-player {
    border-radius: 12px !important;
    padding: clamp(12px, 1.5vw, 18px) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        #101720 !important;
    border-color: rgba(255,255,255,.09) !important;
    box-shadow: none !important;
}

body#top.games-page:not(.studio-app-body) .arcade-player-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

body#top.games-page:not(.studio-app-body) .arcade-player-actions button,
body#top.games-page:not(.studio-app-body) #pause-game {
    min-height: 40px;
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.045) !important;
}

body#top.games-page:not(.studio-app-body) .arcade-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
}

body#top.games-page:not(.studio-app-body) .arcade-side {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
}

body#top.games-page:not(.studio-app-body) .game-stage {
    position: relative;
    min-height: min(70vh, 620px);
    padding: 10px;
    background: #0b1016 !important;
    border-color: rgba(255,255,255,.08) !important;
}

body#top.games-page:not(.studio-app-body) .game-stage canvas {
    width: min(100%, 1120px) !important;
    max-width: 100% !important;
    max-height: min(var(--arcade-canvas-max-height, 720px), calc(100vh - 250px)) !important;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

body#top.games-page:not(.studio-app-body) .rally3d-hud {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}

body#top.games-page:not(.studio-app-body) .rally3d-start-card {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 3;
    width: min(420px, calc(100% - 32px));
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(13, 19, 26, .88);
    color: #f5f8fb;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body#top.games-page:not(.studio-app-body) .rally3d-start-card strong {
    font-size: clamp(1.4rem, 4vw, 2rem);
}

body#top.games-page:not(.studio-app-body) .rally3d-start-card span {
    color: rgba(226,235,243,.74);
    font-weight: 800;
}

body#top.games-page:not(.studio-app-body) .rally3d-start-card b {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 8px;
    background: #5aa8c8;
    color: #101820;
    text-transform: uppercase;
    font-size: .8rem;
}

body#top.games-page:not(.studio-app-body) .rally3d-hud span,
body#top.games-page:not(.studio-app-body) .rally3d-hud button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: rgba(10, 14, 18, .72);
    color: #f2f7fb;
    font-size: .8rem;
    font-weight: 850;
    backdrop-filter: blur(8px);
}

body#top.games-page:not(.studio-app-body) .rally3d-hud b {
    color: #f0d06a;
}

body#top.games-page:not(.studio-app-body) .rally3d-hud i {
    flex: 1 1 180px;
    min-width: 140px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    overflow: hidden;
    align-self: center;
}

body#top.games-page:not(.studio-app-body) .rally3d-hud em {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #62b878, #f0d06a);
    transition: width .18s linear;
}

body#top.games-page:not(.studio-app-body) .rally3d-hud button {
    pointer-events: auto;
    cursor: pointer;
}

body#top.games-page:not(.studio-app-body) .rally3d-touch {
    position: absolute;
    inset: auto 16px 16px 16px;
    z-index: 5;
    display: none;
    justify-content: space-between;
    pointer-events: none;
}

body#top.games-page:not(.studio-app-body) .rally3d-touch > div {
    display: flex;
    gap: 10px;
}

body#top.games-page:not(.studio-app-body) .rally3d-touch button {
    width: 72px;
    height: 54px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(11, 16, 22, .72);
    color: #f5f8fb;
    font-size: .82rem;
    font-weight: 900;
    pointer-events: auto;
    touch-action: none;
    backdrop-filter: blur(8px);
}

body#top.games-page:not(.studio-app-body) .rally3d-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(5, 8, 12, .42);
}

body#top.games-page:not(.studio-app-body) .rally3d-overlay[hidden] {
    display: none;
}

body#top.games-page:not(.studio-app-body) .rally3d-overlay > div {
    width: min(360px, 100%);
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(13, 19, 26, .92);
    text-align: center;
}

body#top.games-page:not(.studio-app-body) .rally3d-overlay strong {
    color: #fff;
    font-size: 1.25rem;
}

body#top.games-page:not(.studio-app-body) .rally3d-overlay span {
    color: rgba(226,235,243,.76);
}

body#top.games-page:not(.studio-app-body) .rally3d-overlay button {
    min-height: 40px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: #243244;
    color: #fff;
    font-weight: 900;
}

body#top.games-page:not(.studio-app-body) .arcade-side > div,
body#top.games-page:not(.studio-app-body) .arcade-score,
body#top.games-page:not(.studio-app-body) .arcade-toolbar {
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(13, 19, 26, .92);
    border-color: rgba(255,255,255,.08) !important;
}

body#top.games-page:not(.studio-app-body) .arcade-score {
    position: relative;
    overflow: hidden;
    min-height: 44px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body#top.games-page:not(.studio-app-body) .arcade-score::before {
    content: attr(data-score-burst);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) scale(.94);
    color: color-mix(in srgb, var(--game-c, #d2ad59) 74%, #ffffff);
    font-size: 1.08rem;
    font-weight: 950;
    opacity: 0;
    text-shadow: none;
    pointer-events: none;
}

body#top.games-page:not(.studio-app-body) .arcade-score::after {
    content: attr(data-combo);
    position: absolute;
    right: 86px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--game-b, #7ab766) 78%, #ffffff);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    opacity: .92;
    pointer-events: none;
}

body#top.games-page:not(.studio-app-body) .arcade-score.is-score-burst {
    border-color: color-mix(in srgb, var(--game-c, #d2ad59) 36%, rgba(255,255,255,.10));
    box-shadow: none;
    transform: translateY(-1px);
}

body#top.games-page:not(.studio-app-body) .arcade-score.is-score-burst::before {
    animation: arcade-score-pop .72s ease-out both;
}

body#top.games-page:not(.studio-app-body) .game-focus-hint {
    background:
        rgba(1,4,8,.46);
    font-size: clamp(1rem, 3vw, 1.35rem);
    letter-spacing: .02em;
}

@keyframes arcade-score-pop {
    0% { opacity: 0; transform: translateY(-20%) scale(.8); }
    18% { opacity: 1; transform: translateY(-70%) scale(1.14); }
    100% { opacity: 0; transform: translateY(-150%) scale(.98); }
}

@media (max-width: 980px) {
    body#top.games-page:not(.studio-app-body) .game-stage {
        min-height: min(58vh, 430px);
    }

    body#top.games-page:not(.studio-app-body) .arcade-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body#top.games-page:not(.studio-app-body) .layout,
    body#top.games-page:not(.studio-app-body) main.feed {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body#top.games-page:not(.studio-app-body) .arcade-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body#top.games-page:not(.studio-app-body) .arcade-card-hero {
        grid-column: span 1;
    }

    body#top.games-page:not(.studio-app-body) .arcade-card-featured {
        min-height: 420px;
    }

    body#top.games-page:not(.studio-app-body) .arcade-card {
        min-height: 282px;
        padding: 15px !important;
    }

    body#top.games-page:not(.studio-app-body) .arcade-player {
        padding: 7px !important;
    }

    body#top.games-page:not(.studio-app-body) .game-stage {
        min-height: 320px;
        padding: 2px;
    }

    body#top.games-page:not(.studio-app-body) .game-stage canvas {
        max-height: min(var(--arcade-canvas-max-height, 520px), 48vh) !important;
    }

    body#top.games-page:not(.studio-app-body) .rally3d-touch {
        display: flex;
    }

    body#top.games-page:not(.studio-app-body) .rally3d-hud {
        top: 8px;
        left: 8px;
        right: 8px;
        gap: 5px;
    }

    body#top.games-page:not(.studio-app-body) .rally3d-hud span,
    body#top.games-page:not(.studio-app-body) .rally3d-hud button {
        min-height: 30px;
        padding: 0 7px;
        font-size: .7rem;
    }
}

/* Studio Coach replaces the Channel Rack body while active. Keep this late so compact rack rules cannot re-show controls. */
.studio-ready body.studio-app-body .studio-pattern-panel.is-studio-coach-mode .studio-pattern-toolbar,
.studio-ready body.studio-app-body .studio-pattern-panel.is-studio-coach-mode .studio-section-label,
.studio-ready body.studio-app-body .studio-pattern-panel.is-studio-coach-mode #studio-pad-bank,
.studio-ready body.studio-app-body .studio-pattern-panel.is-studio-coach-mode #studio-step-ruler,
.studio-ready body.studio-app-body .studio-pattern-panel.is-studio-coach-mode #studio-tracks {
    display: none !important;
}

.studio-ready body.studio-app-body .studio-pattern-panel.is-studio-coach-mode #studio-coach-rack-panel {
    display: grid !important;
    min-height: 0 !important;
    overflow: auto !important;
}