nav { position: relative; align-items: stretch; }
.mobile-nav-menu { display: block; width: 100%; }
.mobile-nav-menu > summary { display: none; }
.mobile-nav-items { display: flex; align-items: stretch; gap: 28px; width: 100%; }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 2px; color: var(--muted); font-weight: 700; border-bottom: 3px solid transparent; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover, .nav-menu.has-active summary { color: white; border-bottom-color: var(--blue); }
.nav-menu summary span { font-size: 11px; transition: transform .15s ease; }
.nav-menu[open] summary span { transform: rotate(180deg); }
.nav-dropdown { position: absolute; z-index: 20; top: calc(100% + 1px); left: -12px; min-width: 220px; padding: 8px; background: #17191c; border: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: 0 18px 35px #0008; }
.nav-dropdown button { display: block; width: 100%; padding: 11px 12px; text-align: left; border: 0; border-radius: 7px; color: var(--muted); }
.nav-dropdown button:hover, .nav-dropdown button.active { background: #25282c; color: white; }
.mobile-nav-items > #settingsTab { margin-left: auto; }
@media(max-width:720px) {
  nav { display: block; overflow: visible; min-height: 52px; padding: 0 12px; }
  .mobile-nav-menu { display: block; width: 100%; }
  .mobile-nav-menu > summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; color: white; font-weight: 800; }
  .mobile-nav-menu > summary::-webkit-details-marker { display: none; }
  .mobile-nav-items { display: none; position: absolute; z-index: 40; top: 52px; left: 10px; right: 10px; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; background: #17191c; border: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: 0 18px 35px #000a; }
  .mobile-nav-menu[open] > .mobile-nav-items { display: block; }
  .mobile-nav-items > button,.mobile-nav-items > .nav-menu { display: block; width: 100%; }
  .mobile-nav-items > button { text-align: left; padding: 13px 12px; border-bottom: 0; border-radius: 7px; }
  .nav-menu summary { min-height: 52px; }
  .nav-dropdown { position: static; min-width: 0; width: 100%; box-shadow: none; border-radius: 8px; margin-bottom: 6px; }
  .mobile-nav-items > #settingsTab { margin-left: 0; }
}