.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.auth-app-shell { min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--space-6) var(--space-4) var(--space-4); background: var(--color-hosa-green); color: var(--color-text-on-dark); }
.main-area { min-width: 0; background: radial-gradient(circle at 100% 0, rgba(198, 161, 91, .075), transparent 26rem), var(--surface-base); }
.topbar { min-height: var(--topbar-height); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); padding: var(--space-4) var(--space-8); border-bottom: 1px solid rgba(2, 23, 19, .1); background: rgba(250, 248, 243, .9); }
.page-content { padding: var(--space-8); max-width: 1520px; }
@media (max-width: 1100px) { :root { --sidebar-width: 204px; } .topbar { padding-inline: var(--space-6); } .page-content { padding: var(--space-6); } }
@media (max-width: 700px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; padding: var(--space-4); } .sidebar-footer { display: none; } .main-navigation { display: flex; gap: var(--space-1); overflow-x: auto; } .nav-link { white-space: nowrap; } .topbar { min-height: auto; padding: var(--space-4); } .topbar-subtitle { display: none; } .page-content { padding: var(--space-5) var(--space-4); } }