/* ═══════════════════════════════════════════════════════════
   🌟 顶栏与导航栏全局样式修复
   ═══════════════════════════════════════════════════════════ */
.topbar {
  background: var(--paper-bg, #f4ecd8) !important; /* 融入后端宣纸底色 */
  gap: 16px;
  padding: 0 20px;
}

.brand-text {
  font-size: 16px !important;
  font-weight: 700;
}

.brand-sub {
  font-size: 13px !important;
}

/* 顶栏右侧功能按钮组：确保水平一行、靠右对齐，并拉开间距 */
.topbar-right-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important; /* 拉开“在线”和“规划器”的距离 */
  margin-left: auto !important;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   🌟 侧边栏修复：消除大方块 + 按钮恢复规整样式
   ═══════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--paper-bg, #f4ecd8) !important;
}

/* 修复1：消灭地图上的浅色大方块（隐藏没有内容的空容器） */
.sidebar-section:empty,
.sidebar-section .recent-section:empty,
.recent-list:empty,
.sidebar-title:empty {
  display: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 修复2：侧边栏快捷按钮容器（强制竖排，靠左对齐） */
.sidebar-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 15px !important;
}

/* 修复3：侧边栏按钮外观（改成正常的按钮样式，有微弱底色和圆角） */
.sidebar-section .side-btn {
  width: 100% !important; 
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 12px !important;
  background: rgba(0, 0, 0, 0.03) !important; /* 极淡的底色 */
  border: 1px solid rgba(0, 0, 0, 0.08) !important; /* 极淡的边框 */
  border-radius: 6px !important;
  color: inherit !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* 鼠标悬停时的反馈 */
.sidebar-section .side-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* 修复4：今日速览列表（去掉小圆点，防止撑破布局） */
.recent-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   🌟 抽屉头部 Tab 栏：左侧标签，正中间导航抽屉按钮
   ═══════════════════════════════════════════════════════════ */
.sheet-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 20px;
  background: var(--paper-bg, #f4ecd8);  /* ← 加这行 */
  border-bottom: 1px dashed var(--border-line);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sheet-tabs::-webkit-scrollbar { display: none; }

.sheet-tab {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-line);
  color: var(--ink-light);
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sheet-tab:hover { background: var(--cinnabar-light); border-color: var(--cinnabar); }
.sheet-tab.active { background: var(--cinnabar); color: #fff; border-color: var(--cinnabar); font-weight: 600; }

.drawer-central-btn {
  background: linear-gradient(135deg, var(--cinnabar), #d9381e);
  color: #fff !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 8px rgba(217, 56, 30, 0.3);
  margin-left: auto;
  margin-right: auto;
}
.drawer-central-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   旅居 tab
   ═══════════════════════════════════════════════════════════ */
.nomad-card {
  grid-column: 1 / -1;
  background: var(--card-bg);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.nomad-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cinnabar);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-line);
}
.nomad-loc {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.nomad-live {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.nomad-live-icon { font-size: 36px; }
.nomad-live-temp { font-size: 32px; font-weight: 700; color: var(--cinnabar); }
.nomad-live-weather { font-size: 14px; color: var(--ink-main); }
.nomad-live-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.nomad-forecast {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dotted var(--border-line);
}
.nomad-forecast-item {
  flex: 1;
  text-align: center;
  padding: 6px 0;
}
.nomad-forecast-date { font-size: 11px; color: var(--ink-mute); margin-bottom: 4px; }
.nomad-forecast-icon { font-size: 20px; margin-bottom: 4px; }
.nomad-forecast-temp { font-size: 11px; color: var(--ink-main); font-weight: 600; }

.nomad-facilities { display: flex; flex-direction: column; gap: 6px; }
.nomad-facility-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--paper-bg);
  border: 1px solid var(--border-line);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.nomad-facility-item:hover { background: var(--cinnabar-light); border-color: var(--cinnabar); }
.nomad-facility-label { font-size: 13px; color: var(--ink-main); }
.nomad-facility-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--cinnabar);
  background: var(--cinnabar-light);
  padding: 2px 10px;
  border-radius: 10px;
}

.facility-list { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }
.facility-list li { padding: 8px 4px; border-bottom: 1px dotted var(--border-line); }
.facility-list li:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════
   学习 tab
   ═══════════════════════════════════════════════════════════ */
.study-grid {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.study-item {
  flex: 0 0 calc(50% - 5px);
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-line);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.study-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.study-item-name { font-size: 14px; font-weight: 700; color: var(--ink-main); margin-bottom: 4px; }
.study-item-count { font-size: 12px; color: var(--ink-mute); }

/* ═══════════════════════════════════════════════════════════
   社区 tab
   ═══════════════════════════════════════════════════════════ */
.forum-tab-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.forum-tab-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-line);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.forum-tab-item:hover { transform: translateX(4px); border-color: var(--cinnabar); }
.forum-tab-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cinnabar); color: #fff;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.forum-tab-main { flex: 1; min-width: 0; }
.forum-tab-title { font-size: 13px; color: var(--ink-main); line-height: 1.4; margin-bottom: 4px; }
.forum-tab-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--ink-mute); }
.forum-tab-cat { background: var(--cinnabar-light); color: var(--cinnabar); padding: 1px 6px; border-radius: 2px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   情报 tab
   ═══════════════════════════════════════════════════════════ */
.intel-tab-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.intel-tab-item {
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-line);
  border-left: 4px solid var(--cinnabar);
  border-radius: 4px;
  transition: all 0.2s;
}
.intel-tab-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.intel-tab-title { font-size: 13px; color: var(--ink-main); line-height: 1.4; margin-bottom: 4px; }
.intel-tab-meta { display: flex; gap: 8px; font-size: 11px; color: var(--ink-mute); }
.intel-tab-cat { background: var(--cinnabar-light); color: var(--cinnabar); padding: 1px 6px; border-radius: 2px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   分类 TOP10
   ═══════════════════════════════════════════════════════════ */
.cat-top-header { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 2px solid var(--cinnabar); margin-bottom: 8px; }
.cat-top-title { font-size: 15px; font-weight: 700; color: var(--cinnabar); }
.cat-top-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.cat-top-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-line); border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.cat-top-item:hover { transform: translateX(4px); border-color: var(--cinnabar); box-shadow: var(--shadow-sm); }
.cat-top-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cinnabar); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.cat-top-main { flex: 1; min-width: 0; }
.cat-top-title-text { font-size: 14px; color: var(--ink-main); line-height: 1.4; margin-bottom: 4px; }
.cat-top-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ink-mute); }
.cat-top-time { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════
   移动端
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nomad-live-temp { font-size: 26px; }
  .nomad-live-icon { font-size: 30px; }
  .nomad-forecast { gap: 4px; }
  .study-grid { grid-template-columns: repeat(2, 1fr); }
}
.nomad-out {
  text-align: center;
  padding: 16px 0;
}
.nomad-out-icon {
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.nomad-out-text {
  font-size: 14px;
  color: var(--ink-main);
  margin-bottom: 4px;
}
.nomad-out-hint {
  font-size: 12px;
  color: var(--ink-mute);
}

/* ═══════════════════════════════════════════════════════════
   2026-10-26 追加：修复顶栏右侧白底、缺失样式
   ═══════════════════════════════════════════════════════════ */

/* 1. 在线人数 + 绿点 */
/* ═══════════════════════════════════════════════════════════
   online.js 徽章样式（跟整体主题融合）
   ═══════════════════════════════════════════════════════════ */

/* 在线徽章容器 */
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--paper-bg, #f4ecd8);
  border: 1px solid var(--border-line, #d4c5a9);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-main, #3c3223);
  font-weight: 500;
  user-select: none;
  transition: all 0.2s ease;
}
.online-badge:hover {
  background: var(--cinnabar-light);
  border-color: var(--cinnabar);
}

/* 绿点 */
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  animation: online-pulse 2s ease-in-out infinite;
}

/* 动画 */
@keyframes online-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* 语言切换 / 用户按钮 / 用户菜单（保留之前的，确保正常显示） */
.lang-switch {
  display: inline-flex;
  align-items: center;
  background: var(--paper-bg, #f4ecd8);
  border: 1px solid var(--border-line, #d4c5a9);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.lang-btn {
  background: transparent;
  color: var(--ink-light, #7a6f5f);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-btn.active {
  background: var(--cinnabar, #b33922);
  color: #fff;
  font-weight: 600;
}

.user-btn {
  background: var(--paper-bg, #f4ecd8);
  border: 1px solid var(--border-line, #d4c5a9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
  padding: 0;
}
.user-btn:hover {
  background: var(--cinnabar-light, #f2d8d2);
  border-color: var(--cinnabar, #b33922);
}

/* 用户下拉菜单 */
.user-menu {
  position: fixed;
  top: calc(var(--topbar-h, 56px) + 8px);
  right: 12px;
  min-width: 200px;
  background: var(--paper-bg, #f4ecd8);
  border: 1px solid var(--border-line, #d4c5a9);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(60, 50, 30, 0.15);
  z-index: 2000;
  padding: 6px;
  display: none;
}
.user-menu.active {
  display: block;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-main, #3c3223);
  font-size: 14px;
  font-family: inherit;
}
.user-menu-item:hover {
  background: var(--cinnabar-light, #f2d8d2);
  color: var(--cinnabar, #b33922);
}
.user-menu-divider {
  height: 1px;
  background: var(--border-line, #d4c5a9);
  margin: 6px 0;
}
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  animation: online-pulse 2s ease-in-out infinite;
}
@keyframes online-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* 2. 中英文切换 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  background: var(--paper-bg, #f4ecd8);
  border: 1px solid var(--border-line, #d4c5a9);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.lang-btn {
  background: transparent;
  color: var(--ink-light, #7a6f5f);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-btn.active {
  background: var(--cinnabar, #b33922);
  color: #fff;
  font-weight: 600;
}

/* 3. 用户按钮 */
.user-btn {
  background: var(--paper-bg, #f4ecd8);
  border: 1px solid var(--border-line, #d4c5a9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
  padding: 0;
}
.user-btn:hover {
  background: var(--cinnabar-light, #f2d8d2);
  border-color: var(--cinnabar, #b33922);
}

/* 4. 用户下拉菜单（点击头像弹出的登录/注册） */
.user-menu {
  position: fixed;
  top: calc(var(--topbar-h, 56px) + 8px);
  right: 12px;
  min-width: 200px;
  background: var(--paper-bg, #f4ecd8);
  border: 1px solid var(--border-line, #d4c5a9);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(60, 50, 30, 0.15);
  z-index: 2000;
  padding: 6px;
  display: none;
}
.user-menu.active {
  display: block;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-main, #3c3223);
  font-size: 14px;
  font-family: inherit;
}
.user-menu-item:hover {
  background: var(--cinnabar-light, #f2d8d2);
  color: var(--cinnabar, #b33922);
}
.user-menu-divider {
  height: 1px;
  background: var(--border-line, #d4c5a9);
  margin: 6px 0;
}