.page { position: relative; display: flex; min-height: 100vh; background: var(--ph-canvas); }
main { flex: 1; min-width: 0; }
.sidebar { position: sticky; top: 0; z-index: 20; width: 200px; height: 100vh; flex: 0 0 200px; overflow: hidden; background: var(--ph-sidebar); box-shadow: 4px 0 18px rgba(9, 18, 38, .08); transition: width .2s ease, flex-basis .2s ease; }
.sidebar-minimized { width: 57px; flex-basis: 57px; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1.5rem; background: color-mix(in srgb, var(--ph-surface) 92%, transparent); border-bottom: 1px solid var(--ph-border); box-shadow: var(--ph-shadow-sm); backdrop-filter: blur(12px); }
.topbar-context { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.topbar-context strong { color: var(--ph-text); font-size: .98rem; }
.topbar-kicker { color: var(--ph-text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; min-width: 0; }
@media (max-width: 767.98px) {
    .page { display: block; }
    .sidebar, .sidebar-minimized { position: relative; width: 100%; height: auto; min-height: 4rem; }
    .topbar { position: relative; min-height: 3.75rem; padding: .5rem .85rem; }
    .topbar-context { display: none; }
    .topbar-actions { width: 100%; justify-content: space-between; gap: .5rem; }
}