.app-shell { min-height: 100dvh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: var(--sidebar-width);
  display: flex; flex-direction: column;
  padding: 22px 14px 18px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; color: var(--text); font-weight: 700; letter-spacing: -.02em; }
.brand:hover { color: var(--text); }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--accent); }
.brand-mark svg { width: 28px; height: 28px; }
.side-nav { display: grid; gap: 4px; margin-top: 30px; }
.sidebar-footer { margin-top: auto; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: .94rem; font-weight: 550; transition: background 140ms var(--ease), color 140ms var(--ease); }
.nav-link svg { width: 20px; height: 20px; }
.nav-link:hover { background: var(--surface-soft); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-link-secondary { margin-top: 10px; }

.mobile-header, .bottom-nav { display: none; }
.main-content { min-height: 100dvh; margin-left: var(--sidebar-width); padding: 48px 48px 72px; }
.page { width: min(100%, var(--content-width)); margin: 0 auto; }
.page-wide { width: min(100%, 940px); margin: 0 auto; }
.study-page { width: min(100%, var(--study-width)); margin: 0 auto; }
.page-header { margin-bottom: var(--space-8); }
.page-kicker { margin-bottom: 6px; color: var(--text-muted); font-size: .875rem; font-weight: 600; }
.section { margin-top: var(--space-10); }
.section + .section { padding-top: var(--space-8); border-top: 1px solid var(--border); }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-header h2 { margin: 0; }

.focus-mode .sidebar, .focus-mode .bottom-nav, .focus-mode .mobile-header { display: none !important; }
.focus-mode .main-content { margin-left: 0; padding-top: 28px; }