/* mobile: fixed bottom bar */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: rgba(6,5,15,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(168,85,247,0.15);
  display: flex; flex-direction: row; height: 64px;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; color: var(--ink-faint);
  font-family: inherit; cursor: pointer;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: color .2s;
}
.tab svg { width: 18px; height: 18px; transition: filter .2s; }
.tab.on { color: var(--purple); }
.tab.on svg { filter: drop-shadow(0 0 6px var(--glow-purple)); }

/* desktop: top bar */
@media(min-width:768px) {
  .tabs {
    bottom: auto; top: 0; height: 52px; width: auto;
    flex-direction: row; align-items: stretch; justify-content: flex-start;
    border-top: none; border-bottom: 1px solid rgba(168,85,247,0.15);
    padding: 0 24px; gap: 0;
    background: rgba(6,5,15,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .tab {
    flex: none; flex-direction: row; align-items: center; justify-content: center; gap: 7px;
    padding: 0 20px; height: 100%;
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 0; margin: 0; width: auto;
    border-bottom: 1px solid transparent;
  }
  .tab svg { width: 15px; height: 15px; }
  .tab.on { color: var(--purple); background: none; border-bottom-color: var(--purple); }
}