.app-shell{display:flex;min-height:100vh;background:var(--color-paper)}.app-shell__sidebar{flex-shrink:0;border-right:var(--rule-thin) solid var(--color-rule);background:var(--color-surface-raised);display:none}.app-shell__main{flex:1 1;overflow:auto}@media (min-width:768px){.app-shell__sidebar{display:block;width:18rem}}.sidebar{padding:var(--space-md)}.sidebar__list{list-style:none;margin:0;padding:0}.sidebar__item{margin-bottom:var(--space-2xs)}.sidebar__link{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-input);text-decoration:none;color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-sm);line-height:1}.sidebar__link:hover{background:var(--color-paper-2)}.sidebar__link[data-active=true]{background:var(--color-accent-soft);color:var(--color-accent-strong)}.sidebar__icon{flex-shrink:0}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface-raised);border-top:var(--rule-thin) solid var(--color-rule);padding:var(--space-2xs) 0}.mobile-nav,.mobile-nav__list{display:flex;justify-content:space-around}.mobile-nav__list{list-style:none;margin:0;padding:0;width:100%}.mobile-nav__item{flex:1 1;text-align:center}.mobile-nav__link{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);padding:var(--space-2xs);text-decoration:none;color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-xs)}.mobile-nav__link:hover{background:var(--color-paper-2)}.mobile-nav__icon{flex-shrink:0}.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) 0;border-bottom:var(--rule-thin) solid var(--color-rule)}.page-header__body{flex:1 1}.page-header__title{margin:0;font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;line-height:1.2;color:var(--color-ink)}.page-header__description{margin:var(--space-2xs) 0 0;font-family:var(--font-body);font-size:var(--text-sm);line-height:1.4;color:var(--color-ink-2)}.page-header__action{flex-shrink:0}@media (max-width:767px){.page-header{flex-direction:column;align-items:flex-start}.page-header__action{width:100%}}