/* components/nav.css */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 72%,transparent); border-bottom:1px solid var(--border) }
.nav__inner{ display:flex; align-items:center; gap:1.2rem; height:64px }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.06em; color:var(--fg) }
.brand__mark{ width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--accent);
  border-radius:8px; font-size:.7rem; color:var(--accent); box-shadow:var(--glow-a); background:#0a0e18 }
.nav__links{ display:flex; gap:.3rem; margin-left:1rem }
.nav__link{ padding:.5rem .8rem; border-radius:8px; color:var(--fg-muted); font-size:.85rem; letter-spacing:.05em; text-transform:uppercase }
.nav__link:hover{ color:var(--fg) }
.nav__link[aria-current="page"]{ color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent) }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:.7rem }
.nav__burger{ display:none }
@media (max-width:820px){
  .nav__links{ position:fixed; inset:64px 0 auto 0; flex-direction:column; background:var(--bg-elev);
    border-bottom:1px solid var(--border); padding:1rem; gap:.2rem; transform:translateY(-120%); transition:.3s; margin:0 }
  .nav__links.open{ transform:none }
  .nav__burger{ display:inline-flex }
}
/* wallet chip */
.wallet{ display:flex; align-items:center; gap:.55rem; padding:.45rem .7rem; border:1px solid var(--border-strong);
  border-radius:999px; font-size:.78rem; background:#0a0e18 }
.wallet__dot{ width:8px; height:8px; border-radius:50%; background:var(--fg-muted) }
.wallet[data-connected="true"] .wallet__dot{ background:var(--ok); box-shadow:0 0 10px var(--ok) }
.wallet__chain{ font-size:.66rem; color:var(--accent) }