/* Shared app nav — fixed shell + locked gaps on every page */
.app-nav{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--nav-line, #2A3040);
  background:var(--nav-bg, #06080C);
}
/* Dedicated shell — never reuse page .wrap (avoids 720/960/1080 squeeze) */
.app-nav .nav-shell{
  max-width:1440px;
  width:100%;
  margin:0 auto;
  padding:0 28px;
  box-sizing:border-box;
}
.app-nav .nav-in{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  min-height:56px;
  flex-wrap:nowrap;
  padding:8px 0;
}
.app-nav .logo{
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;
  color:var(--nav-ink, #F2F4F8);text-decoration:none;flex-shrink:0;
  margin-right:20px; /* locked logo → links */
  white-space:nowrap;
}
.app-nav .logo .note{
  background:linear-gradient(145deg,#9B8AD0,#5A4B7A);color:#fff;
  border-radius:6px;padding:1px 8px;margin-left:4px;font-size:.88em;
  box-shadow:0 6px 16px -8px rgba(138,124,188,.55);
}
.app-nav .nav-links{
  display:flex;
  align-items:center;
  gap:8px; /* locked equal distance between every link */
  flex:0 0 auto;
  min-width:0;
  overflow-x:auto;
  padding:2px 0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.app-nav .nav-links::-webkit-scrollbar{display:none}
.app-nav .nav-btn{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:9px;font-size:.74rem;font-weight:600;
  font-family:'Inter',sans-serif;text-decoration:none;white-space:nowrap;
  border:1px solid transparent; /* same box on / off — no jump */
  color:var(--nav-muted, #8B93A7);
  background:transparent;
  box-sizing:border-box;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.app-nav .nav-btn:hover{
  color:var(--nav-ink, #F2F4F8);
  border-color:rgba(138,124,188,.45);
  background:rgba(138,124,188,.12);
}
.app-nav .nav-btn.on{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, #8A7CBC, #5A4B7A);
  box-shadow:0 6px 16px -8px rgba(138,124,188,.55);
}
.app-nav .nav-r{
  display:flex;gap:8px;align-items:center;flex-shrink:0;
  margin-left:auto; /* right cluster never moves the links */
}
.app-nav .nav-user{
  font-size:.7rem;color:var(--nav-muted, #8B93A7);
  font-family:'IBM Plex Mono',monospace;display:none;
}
.app-nav .nav-user.show{display:block}
.app-nav .nav-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 12px;border-radius:9px;font-size:.74rem;font-weight:600;
  border:1px solid var(--nav-line, #2A3040);color:var(--nav-muted, #8B93A7);
  background:transparent;text-decoration:none;cursor:pointer;font-family:'Inter',sans-serif;
  box-sizing:border-box;
}
.app-nav .nav-ghost:hover{border-color:var(--nav-accent, #8A7CBC);color:#fff}

@media (max-width:720px){
  .app-nav .nav-shell{padding:0 12px}
  .app-nav .logo{margin-right:10px;font-size:.98rem}
  .app-nav .nav-links{gap:5px;flex:1 1 auto}
  .app-nav .nav-btn{padding:0 10px;font-size:.7rem;min-height:36px}
  .app-nav .nav-ghost{min-height:36px}
}