.app-shell { height: 100dvh; width: 100%; display: grid; grid-template: var(--header-height) minmax(0, 1fr) var(--bottom-nav-height) / 1fr; overflow: hidden; }
.app-header { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: env(safe-area-inset-top) 16px 0; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 10; }
.app-content { grid-row: 2; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 20px 16px; }
.app-bottom-nav { grid-row: 3; display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); z-index: 12; }
.app-sidebar { display: none; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 900; letter-spacing: .12em; }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: white; font-size: 18px; letter-spacing: 0; }
.header-context { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.header-context strong, .header-context span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-context strong { font-size: 13px; }.header-context span { color: var(--muted); font-size: 11px; }
.page-heading { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0 auto 20px; max-width: var(--content-max); }
.page-heading h1 { margin-bottom: 3px; font-size: clamp(24px, 6vw, 31px); letter-spacing: -.035em; }.page-heading p { margin-bottom: 0; color: var(--muted); }
.page-heading > .button, .page-heading > .primary { text-align: center; }