/* ══════════════════════════════════════════════════════════
   header-align.css — 顶部导航统一（2026-09-28）
   用途：给【未加载 portal.css】的页面补上与首页一致的头部/导航样式。
        受影响页面：profile.html / course.html / module.html
        （这些页面只加载 style.css + modules.css，头部会变成
         「logo 一行 + 导航一行、左对齐、还往上顶出可视区被切掉」）
   加载顺序：必须放在页面自身样式（如 profile.css）之后。
   ══════════════════════════════════════════════════════════ */

/* ⚠️ 根因：.header 是 position:fixed 却没设宽度 → fixed 元素默认收缩到内容宽，
   实测整个头部只有 889px 宽、贴在左边，右边空出 400px。
   首页靠 portal.css 的 .header{width:100%} 撑满，这里必须补上。 */
.header {
  left: 0;
  right: 0;
  width: 100%;
}

.header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* .header 是 flex 容器，.header-inner 会被当成伸缩项 → 也必须显式撑满 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.header .logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.15rem;
  color: var(--text, #1f2430);
}
.header .logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
.header .tagline {
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid var(--border, #e3e7f0);
  font-size: 0.72rem;
  color: var(--text-dim, #5b6b8c);
  line-height: 1.2;
}

.header .nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header .nav-link {
  color: var(--text-dim, #5b6b8c);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.header .nav-link:hover {
  color: #232838;
  background: rgba(79, 70, 229, 0.15);
}
.header .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.header .user-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 12px;
}
.header .user-area .btn,
.header .btn-admin,
.header .user-badge {
  padding: 4px 11px;
  font-size: 0.76rem;
  border-radius: 9px;
  line-height: 1.55;
  white-space: nowrap;
}
.header .user-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ≥1200px：一行，导航靠右（与首页一致） */
@media (min-width: 1150px) {
  .header .header-inner {
    flex-wrap: nowrap;
  }
  .header #main-nav {
    margin-left: auto;
  }
}

/* 769–1199px：两行但排整齐；头部改 sticky，避免 fixed 死高盖住正文 */
@media (min-width: 769px) and (max-width: 1149px) {
  .header {
    position: sticky;
    top: 0;
    height: auto;
    min-height: 56px;
  }
  .header .header-inner {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .header .user-area {
    order: 2;
    margin-left: auto;
  }
  .header #main-nav {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .main {
    margin-top: 0;
  }
}