.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 1rem; border-right: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(18px); }
.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 24; min-height: 78px; display: grid; grid-template-columns: minmax(280px, 640px) auto; justify-content: space-between; align-items: center; gap: 1.5rem; padding: .9rem clamp(1rem, 2.6vw, 2.25rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.demo-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem clamp(1rem, 2.6vw, 2.25rem); border-bottom: 1px solid var(--line); background: #f8fbfe; color: var(--muted); font-size: .78rem; }
.demo-toolbar > div { display: flex; align-items: center; gap: .6rem; }
.demo-selectors { justify-content: flex-end; }
.main-content { width: min(1580px, 100%); margin: 0 auto; padding: clamp(1rem, 2.6vw, 2.25rem); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.35rem; }
.page-head h1 { margin: .2rem 0 .35rem; color: var(--navy); font-size: clamp(1.75rem, 3.1vw, 2.6rem); letter-spacing: -.035em; line-height: 1.08; }
.page-head p { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: .96rem; line-height: 1.55; }
.page-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.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; }.span-3 { grid-column: span 3; }
.module-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.sidebar-footer { margin-top: auto; display: grid; gap: .55rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.mobile-overlay { position: fixed; inset: 0; z-index: 28; background: rgba(16,34,74,.42); backdrop-filter: blur(3px); }
.loading-state, .empty-state, .error-state { min-height: 320px; display: grid; place-items: center; align-content: center; gap: .75rem; color: var(--muted); text-align: center; }
.loading-state span { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }