.nav { position: sticky; top: 0; z-index: 200; border-bottom: 1px solid transparent; }
.nav-inner { display: flex; align-items: center; gap: 28px; padding: 14px 24px; }
.brand-button { border: 0; background: none; }
.nav-links { display: flex; flex: 1; gap: 4px; margin-left: 8px; }
.nav-link, .sidebar-link { border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-soft); }
.nav-link { padding: 8px 14px; border-radius: 100px; font: 12.5px var(--mono); }
.nav-link:hover, .nav-link.active { border-color: var(--line); color: var(--ink); }
.nav-link.active { background: var(--ink); color: var(--paper); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.theme-switch, .bell-btn { display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.theme-switch { width: 52px; height: 30px; border-radius: 100px; }
.bell-btn { width: 38px; height: 38px; border-radius: 50%; }
.bell-wrap { position: relative; }
.bell-dot { display: none; position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); }
.bell-dot.show { display: block; }
.notif-panel { position: absolute; top: 48px; right: 0; display: none; width: 320px; max-height: 380px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.notif-panel.open { display: block; }
.notif-panel h4 { padding: 8px 10px 4px; color: var(--ink-soft); font: 12px var(--mono); text-transform: uppercase; }
.notification-row { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 12px; }
.notification-row { width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.notification-row.is-actionable { background: var(--paper-dim); }
.notification-row small { color: var(--ink-faint); font-family: var(--mono); }
.notification-empty { padding: 20px; color: var(--ink-faint); text-align: center; }
@media (max-width: 900px) { .nav-inner { gap: 10px; } .nav-links { overflow-x: auto; } .nav-link { padding: 8px 9px; font-size: 11px; } }
@media (max-width: 620px) { .nav-right { display: none; } }