.app-shell {
    display: grid;
    grid-template-columns: var(--rockola-sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--rockola-header-height) minmax(0, 1fr) var(--rockola-player-height);
    grid-template-areas:
        "sidebar header"
        "sidebar content"
        "player player";
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}

.app-header {
    grid-area: header;
    min-width: 0;
    border-bottom: 1px solid var(--rockola-border);
    background: rgba(9, 9, 11, 0.88);
}

.app-sidebar {
    grid-area: sidebar;
    min-height: 0;
    border-right: 1px solid var(--rockola-border);
    background: var(--rockola-surface);
}

.app-content {
    position: relative;
    z-index: 2;
    grid-area: content;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-view {
    width: min(100%, 1600px);
    min-height: 100%;
    margin: 0 auto;
    padding: 28px 32px 48px;
}

.app-player {
    grid-area: player;
    grid-area: player;
    position: relative;
    z-index: 20;
    min-width: 0;
    border-top: 1px solid var(--rockola-border);
    background: rgba(17, 17, 20, 0.96);
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.24);
}

@media (max-width: 760px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 64px minmax(0, 1fr) 190px;
        grid-template-areas:
            "header"
            "content"
            "player";
    }

    .app-sidebar {
        display: none;
    }

    .app-view {
        padding: 20px 16px 32px;
    }
}