.app-shell{
    position:relative;
    display:grid;
    grid-template-columns:var(--sidebar-w) minmax(0, 1fr);
    min-height:100vh;
    transition:grid-template-columns var(--transition);
}

.app-shell.is-collapsed{
    grid-template-columns:var(--sidebar-collapsed) minmax(0, 1fr);
}

.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(2,6,14,.82);
    backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--transition), visibility var(--transition);
    z-index:80;
}

.main-area{
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:22px;
    gap:18px;
}

.content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.layout-grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:18px;
}

.span-12{ grid-column:span 12; }
.span-8{ grid-column:span 8; }
.span-7{ grid-column:span 7; }
.span-6{ grid-column:span 6; }
.span-5{ grid-column:span 5; }
.span-4{ grid-column:span 4; }

.metrics-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
}