.app-nav { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; font-family: var(--app-sans); line-height: 1.5; }
.app-nav-link { color: var(--app-muted); text-decoration: none; padding: 9px 13px; border-radius: var(--app-control-radius); font-size: .86rem; transition: background 140ms ease, color 140ms ease; }
.app-nav-link:hover { background: var(--app-hover); }
.app-nav-link[aria-current] { color: var(--app-link); background: #c79a4b12; }
.app-nav-more { position: relative; }
.app-nav-more summary { list-style: none; letter-spacing: 2px; padding: 8px; cursor: pointer; color: var(--app-muted); }
.app-nav-more summary:hover { color: var(--app-text); }
.app-nav-more summary::-webkit-details-marker { display: none; }
.app-nav-menu { position: absolute; z-index: 50; top: calc(100% + 4px); right: 0; width: 160px; padding: 7px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); box-shadow: 0 12px 30px #0007; }
.app-nav-menu > a { display: block; padding: 9px; border-radius: 5px; color: var(--app-text); font-size: .85rem; text-decoration: none; }
.app-nav-menu > a:hover { background: var(--app-hover); }
.app-nav :where(a, summary):focus-visible { outline: 2px solid var(--app-focus); outline-offset: 3px; }
@media (max-width: 600px) {
  .app-nav { gap: 1px; }
  .app-nav-link { font-size: .78rem; padding: 9px 8px; }
  .app-nav-more summary { padding: 8px 6px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-nav-link { transition: none; }
}