.site-wrapper { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--nav-height) 1fr; grid-template-areas: "sidebar nav" "sidebar main"; min-height: 100vh; }
.top-nav { grid-area: nav; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8); border-bottom: var(--border); background: var(--color-surface); height: var(--nav-height); position: sticky; top: 0; z-index: 100; }
.nav-brand { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.nav-brand span { color: var(--color-text-tertiary); font-weight: 400; }
.nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.nav-search-btn { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-tertiary); background: var(--color-surface-2); transition: all var(--transition-fast); }
.nav-search-btn:hover { border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.nav-search-btn kbd { font-family: var(--font-mono); font-size: 0.7em; background: var(--color-surface); padding: 0.1em 0.3em; border-radius: var(--radius-sm); border: var(--border); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--color-text); transition: all var(--transition-base); }
.sidebar { grid-area: sidebar; border-right: var(--border); background: var(--color-surface); position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; display: flex; flex-direction: column; }
.sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: var(--color-surface-3); border-radius: var(--radius-full); }
.sidebar-logo { padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: var(--border); }
.sidebar-logo h2 { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.sidebar-logo p { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); }
.sidebar-nav { padding: var(--space-3); flex: 1; }
.nav-section-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); padding: var(--space-4) var(--space-3) var(--space-2); border-top: var(--border); margin-top: var(--space-2); }
.nav-section-label:first-child { border-top: none; margin-top: 0; }
.nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-secondary); transition: all var(--transition-fast); cursor: pointer; text-decoration: none; }
.nav-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav-item.active { background: var(--color-text); color: var(--color-bg); font-weight: 500; }
.nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.nav-item.active .nav-item-icon { opacity: 1; }
.sidebar-footer { padding: var(--space-4); border-top: var(--border); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.sidebar-footer a { color: var(--color-text-secondary); }
.main-content { grid-area: main; min-height: calc(100vh - var(--nav-height)); }
.page-header { padding: var(--space-12); border-bottom: var(--border); background: var(--color-surface); }
.page-header.narrow { max-width: var(--content-narrow); }
.page-content { padding: var(--space-12); max-width: var(--content-max); }
.page-content.narrow { max-width: var(--content-narrow); }
.breadcrumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-6); font-family: var(--font-mono); }
.breadcrumbs a { color: var(--color-text-secondary); }
.breadcrumbs a:hover { color: var(--color-text); }
.breadcrumbs .sep { opacity: 0.4; }
.sidebar-overlay { position: fixed; inset: 0; top: var(--nav-height); background: rgba(0,0,0,0.3); z-index: 140; opacity: 0; visibility: hidden; transition: all var(--transition-base); }
.sidebar-overlay.active { opacity: 1; visibility: visible; }