/* ── 顶部导航栏 ───────────────────────────────────────────────── */
#app-nav {
  position: sticky;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0,0,0,.07);
  transition: background-color .7s ease, border-color .7s ease;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  z-index: 10;
  gap: 12px;
}

.nav-title {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-right: auto;
}

.nav-tabs { display: flex; gap: 4px; }

.nav-tab {
  background: none;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.nav-tab.active { background: var(--accent-bg); color: var(--accent); }

#btn-logout {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .15s;
}
#btn-logout:hover { color: var(--text); }

#btn-profile {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
#btn-profile:hover { color: var(--accent); background: var(--accent-bg); }

/* ── 手机端适配 ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #app-nav {
    padding: 0 12px;
    height: 50px;
    gap: 4px;
  }

  /* 隐藏标题，让 tab 居中 */
  .nav-title { display: none; }

  /* tab 填满剩余空间，均分 */
  .nav-tabs {
    flex: 1;
    gap: 2px;
  }
  .nav-tab {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 12px;
    border-radius: 16px;
    min-height: 36px;
  }

  /* 退出改为图标 */
  #btn-logout .logout-text { display: none; }
  #btn-logout::after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  #btn-profile { padding: 4px; }
  #btn-notif   { padding: 4px; }
}