/* Canonical site nav — included by every page. nav.top is a full-width strip at the very top of . Inside it, .nav-inner is a 1100px-max centered row that holds the links. This makes the nav visually identical across every page regardless of the page's own content container width. */ nav.top { display: block; width: 100%; max-width: none; margin: 0; padding: 0; background: var(--bg); border-bottom: 1px solid var(--border); position: relative; z-index: 10; } nav.top .nav-inner { max-width: 1100px; margin: 0 auto; padding: .9rem 1.25rem; display: flex; gap: 1.25rem; align-items: center; font-size: .85rem; box-sizing: border-box; } nav.top a { color: var(--muted); text-decoration: none; transition: color .15s; } nav.top a:hover { color: var(--accent-2); } nav.top a.active { color: var(--text); } nav.top .brand { color: var(--text); font-weight: 600; margin-right: auto; display: flex; align-items: center; gap: .5rem; white-space: nowrap; } nav.top .brand .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); } nav.top .auth-link { color: var(--accent-2); font-weight: 600; } nav.top .auth-link.pro::after { content: "Pro"; display: inline-block; margin-left: .35rem; padding: .08rem .35rem; font-size: .65rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; border-radius: 4px; vertical-align: middle; } @media (max-width: 760px) { nav.top .nav-inner { flex-wrap: wrap; gap: .8rem; font-size: .8rem; padding: .7rem 1rem; } nav.top .brand { flex-basis: 100%; margin-right: 0; } }