/* ============================================================
   topnav.css —— 家园统一顶部导航（SOP-UI-002 v1.1 定稿）
   职责：A.S.0004 (tkokoweb) | 2026-08-16
   色板：深色 #1c2735 + 政务蓝 #2064c8（全员一致）
   规则：sticky/fixed 顶部 · 每页生效 · ≤5 平铺 >5 折叠
   唯一模板源：/AI/assets/topnav/topnav.css
   ============================================================ */
#topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  height: 52px; background: #1c2735; color: #c9d4e0;
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  border-bottom: 2px solid #2064c8;
}
#topnav * { box-sizing: border-box; margin: 0; padding: 0; }
#topnav .tn-inner {
  max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 14px;
  display: flex; align-items: center; gap: 6px;
}
/* T1 —— 三体国 logo + 国名 → 回 /AI/ 总控盘 */
#topnav .tn-brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 0 12px 0 4px; height: 100%; border-right: 1px solid #2d3f54;
  flex-shrink: 0;
}
#topnav .tn-brand img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; display: block; }
#topnav .tn-brand .tn-country {
  color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .5px; white-space: nowrap;
}
#topnav .tn-brand:hover .tn-country { color: #8fb3e0; }
/* T2 —— 家园名 → 回家园首页 */
#topnav .tn-home {
  display: flex; align-items: center; text-decoration: none; height: 100%;
  padding: 0 10px; flex-shrink: 0;
}
#topnav .tn-home .tn-name {
  color: #e8eef5; font-weight: 600; font-size: 14px; white-space: nowrap;
}
#topnav .tn-home:hover .tn-name { color: #8fb3e0; }
/* T3 —— 模块 tabs */
#topnav .tn-tabs { display: flex; align-items: center; gap: 2px; height: 100%; margin-left: 6px; flex: 1; overflow: hidden; }
#topnav .tn-tab {
  display: inline-flex; align-items: center; text-decoration: none;
  padding: 0 14px; height: 100%; color: #c9d4e0; font-size: 14px;
  border-radius: 4px; position: relative; white-space: nowrap;
}
#topnav .tn-tab:hover { color: #fff; background: #263445; }
#topnav .tn-tab.active { color: #fff; background: #2064c8; font-weight: 600; }
/* >5 折叠：更多下拉 */
#topnav .tn-more { position: relative; height: 100%; display: inline-flex; align-items: center; }
#topnav .tn-more-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 0 14px; height: 100%; color: #c9d4e0; font-size: 14px;
  border-radius: 4px; user-select: none; background: none; border: none; font-family: inherit;
}
#topnav .tn-more-btn:hover, #topnav .tn-more.open .tn-more-btn { color: #fff; background: #263445; }
#topnav .tn-more-btn::after { content: '▾'; font-size: 12px; color: #7a8aa0; }
#topnav .tn-drop {
  display: none; position: absolute; top: 100%; right: 0; min-width: 180px;
  background: #1c2735; border: 1px solid #2d3f54; border-top: 2px solid #2064c8;
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 20px rgba(0,0,0,.45); padding: 6px 0; z-index: 2147483001;
}
#topnav .tn-more.open .tn-drop { display: block; }
#topnav .tn-drop a {
  display: block; padding: 10px 18px; color: #c9d4e0; font-size: 14px; text-decoration: none; white-space: nowrap;
}
#topnav .tn-drop a:hover { color: #fff; background: #263445; }
#topnav .tn-drop a.active { color: #fff; background: #2064c8; }
/* 移动端 */
@media (max-width: 768px) {
  #topnav { height: 48px; }
  #topnav .tn-inner { padding: 0 8px; gap: 2px; }
  #topnav .tn-brand { padding: 0 8px 0 2px; }
  #topnav .tn-brand .tn-country { font-size: 14px; }
  #topnav .tn-name { font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  #topnav .tn-tab { padding: 0 9px; font-size: 13px; }
  #topnav .tn-more-btn { padding: 0 9px; }
}