/* ══ NAV (Левый бар) ══ */
#nav {
  grid-row: 1 / -1; grid-column: 1;
  background: #1e2a3a;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(6px, 0.8vh, 12px) 0;
  gap: clamp(2px, 0.4vh, 6px);
  z-index: 20; overflow: hidden;
}
.nav-logo { display: flex; align-items: center; justify-content: center; margin-bottom: clamp(8px, 1vh, 16px); flex-shrink: 0; width: 100%; padding: 0 4px; }
.nav-wordmark { font-family: var(--ui); font-size: calc(var(--nav-w) * 0.18); font-weight: 800; letter-spacing: calc(var(--nav-w) * 0.04); color: #ffffff; text-transform: uppercase; text-align: center; line-height: 1; width: calc(var(--nav-w) * 0.9); overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, #7ab4ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-btn { width: calc(var(--nav-w) * 0.88); height: calc(var(--nav-w) * 0.88); border-radius: clamp(6px, calc(0.6 * var(--u)), 10px); border: none; background: transparent; color: #5a7090; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, calc(0.4 * var(--u)), 6px); transition: all .15s; position: relative; flex-shrink: 0; }
.nav-btn svg { width: calc(var(--nav-w) * 0.60); height: calc(var(--nav-w) * 0.60); }
.nav-btn span { font-size: clamp(7px, calc(0.65 * var(--u)), 11px); font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.nav-btn:hover { background: #263548; color: #8ab0d0; }
.nav-btn.active { background: #1a3a5a; color: #4da8ff; }
.nav-btn.active::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: clamp(2px, calc(0.25 * var(--u)), 4px); background: #4da8ff; border-radius: 0 3px 3px 0; }
.nav-sep { width: 65%; height: 1px; background: #263548; margin: clamp(2px, 0.3vh, 5px) 0; margin-top: auto; }