/* 星河导航 · 顶栏与布局共用样式
 *
 * 首页与子页（cat/*.html、site/*.html）共用：
 *   1) 顶部搜索框（含搜索引擎切换）
 *   2) 分类导航条（前 8 常驻 + 更多下拉）
 *   3) 轻量标题条 headbar
 *   4) 显示密度（compact）样式
 * 原来写在 index.html 的内联 <style> 里，抽出为共享文件以便子页复用。
 */
/* ===== 顶栏分类导航 =====
   ↑ 此处插入密度切换样式 ↓ */
[data-density="compact"] .grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
[data-density="compact"] .card { padding: 10px 11px; gap: 9px; border-radius: 12px; }
[data-density="compact"] .logo { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
[data-density="compact"] .logo img { width: 20px; height: 20px; }
[data-density="compact"] .card-title { font-size: 13.4px; margin-bottom: 2px; }
[data-density="compact"] .card-desc { font-size: 11.6px; height: 1.5em; -webkit-line-clamp: 1; line-clamp: 1; }
[data-density="compact"] .card-tags { margin-top: 4px; }
[data-density="compact"] .card-meta { display: none; }
[data-density="compact"] .section { margin-bottom: 26px; }
/* ===== 顶栏分类导航（混合：前 8 常驻 + 更多下拉）===== */
.topnav{position:sticky;top:64px;z-index:49;background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.topnav-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:10px;height:48px;position:relative;}

.topnav-list{flex:1;min-width:0;display:flex;gap:4px;overflow:hidden;}/* 关键：前 8 个不滚动 */
.topnav-list a{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 8px;border-radius:8px;
  font-size:13px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:all .18s;
}
.topnav-list a:hover{background:var(--brand-soft);color:var(--brand);}
.topnav-list a.active{
  background:linear-gradient(120deg,rgba(37,99,235,.12),rgba(124,58,237,.12));
  color:var(--brand);font-weight:600;
}
.topnav-list .ico{font-size:14px;flex:none;}
.topnav-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.topnav-list .cnt{font-size:10.5px;color:var(--text-3);margin-left:auto;flex:none;}
.topnav-list a.active .cnt{color:var(--brand);opacity:.8;}

/* 更多按钮 */
.topnav-more{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:8px;
  border:1px solid var(--border-strong);background:var(--card);
  font-size:13px;color:var(--text-1);cursor:pointer;
  font-family:inherit;
  transition:all .18s;
}
.topnav-more:hover{border-color:var(--brand);color:var(--brand);}
.topnav-more .more-cnt{
  font-size:10.5px;color:var(--text-3);font-weight:400;
  background:var(--bg-soft);padding:1px 6px;border-radius:6px;
}
.topnav-more[aria-expanded="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);}
.topnav-more[aria-expanded="true"] svg{transform:rotate(180deg);}
.topnav-more svg{transition:transform .2s;}

/* 下拉面板 */
.more-panel{
  position:absolute;top:calc(100% + 8px);right:24px;
  width:520px;max-width:calc(100vw - 48px);
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.08);
  padding:14px;z-index:10;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  animation:fadeIn .18s ease;
}
/* 关键：让 hidden 属性真正生效（display:grid 会覆盖默认 [hidden]{display:none}）*/
.more-panel[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.more-panel a{
  display:flex;align-items:center;gap:7px;
  padding:8px 10px;border-radius:8px;
  font-size:13.5px;color:var(--text-1);
  transition:background .15s;
}
.more-panel a:hover{background:var(--brand-soft);}
.more-panel a.active{background:var(--brand-soft);color:var(--brand);font-weight:600;}
.more-panel .ico{font-size:16px;flex:none;}
.more-panel .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.more-panel .cnt{font-size:11px;color:var(--text-3);margin-left:auto;flex:none;}
.more-panel a.active .cnt{color:var(--brand);}

/* 单列布局，去 sidebar */
.layout-h{grid-template-columns:minmax(0,1fr)!important;max-width:1280px;margin:0 auto;padding:0 24px 64px;}
.layout-h .sidebar{display:none!important;}

/* 轻量标题条（替代原来的蓝色 hero 大块） */
.headbar{
  max-width:1280px;margin:18px auto 26px;padding:0 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.headbar h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.5px;color:var(--text);}
.headbar-stats{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);}
.headbar-desc{margin:0;font-size:12.5px;color:var(--text-3);line-height:1.4;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.headbar-stats b{color:var(--brand);font-weight:700;font-size:13.5px;}
.headbar .mini-sep{color:var(--text-3);opacity:.5;}
.headbar .density-switch{margin-left:auto;display:flex;gap:4px;}
.headbar .density-switch button{
  display:inline-flex;align-items:center;gap:4px;
  height:30px;padding:0 10px;border:1px solid var(--border-strong);
  background:var(--card);color:var(--text-2);
  border-radius:8px;font-size:12px;cursor:pointer;font-family:inherit;
  transition:all .18s;
}
.headbar .density-switch button:hover{border-color:var(--brand);color:var(--brand);}
.headbar .density-switch button.on{background:var(--brand);border-color:var(--brand);color:#fff;}

/* 顶部搜索框（带引擎切换） */
.search-box-top{max-width:700px;margin:0 16px;flex:1;}
.search-box-top input{height:44px;padding:0 108px 0 100px;}
.search-box-top .search-ico{left:92px;}
.search-box-top .kbd{right:104px;}
.search-box-top .search-clear{right:100px;}
.engine-select{
  position:absolute;left:6px;z-index:5;
  display:inline-flex;align-items:center;gap:5px;
  height:32px;padding:0 11px;min-width:78px;
  background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(124,58,237,.08));
  border:1px solid rgba(37,99,235,.2);
  border-radius:999px;
  font-size:12.5px;font-weight:600;color:#1e40af;
  cursor:pointer;user-select:none;transition:all .18s;
}
.engine-select:hover{border-color:var(--brand);background:var(--brand-soft);}
.engine-select[aria-expanded="true"]{background:var(--brand-soft);border-color:var(--brand);}
.engine-select svg{position:static!important;left:auto!important;width:12px!important;height:12px!important;color:var(--brand);pointer-events:none;transition:transform .2s;flex:none;margin-left:auto;}
.engine-select[aria-expanded="true"] svg{transform:rotate(180deg);}
.engine-list{
  position:absolute;top:calc(100% + 6px);left:0;
  background:var(--card);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.16);
  padding:4px;min-width:110px;list-style:none;margin:0;z-index:30;
}
.engine-list li{padding:7px 10px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;transition:background .15s;}
.engine-list li:hover{background:var(--brand-soft);color:var(--brand);}
.engine-list li.active{background:var(--brand);color:#fff;font-weight:600;}
.search-go{
  position:absolute;right:6px;z-index:4;
  height:32px;padding:0 16px;min-width:84px;
  border:none;border-radius:999px;
  background:linear-gradient(120deg,#2563eb,#7c3aed);
  color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:transform .15s,box-shadow .18s;
}
.search-go:hover{box-shadow:0 4px 14px rgba(37,99,235,.4);}

/* 响应式 */
@media(max-width:1080px){
  .more-panel{grid-template-columns:repeat(2,1fr);width:400px;}
}
@media(max-width:720px){
  .topnav-inner{padding:0 14px;gap:8px;height:42px;}
  .topnav-list a{padding:5px 6px;font-size:12px;gap:3px;}
  .topnav-list .ico{font-size:13px;}
  .topnav-list a .cnt{display:none;}
  .topnav-more{padding:5px 8px;}
  .topnav-more span:first-child{display:none;}
  .topnav{top:60px;}
  .more-panel{right:14px;width:calc(100vw - 28px);grid-template-columns:repeat(2,1fr);}
  /* 顶部搜索框 / 标题条 移动端 */
  .headbar{padding:0 14px;margin:12px auto 18px;gap:8px;}
  .headbar h1{font-size:15px;}
  .headbar-desc{display:none;}
  .headbar-stats{font-size:11.5px;}
  .headbar .density-switch button span{display:none;}
  .headbar .density-switch button{padding:0 8px;}
  .search-box-top{margin:0 8px;}
  .search-box-top input{height:40px;padding:0 92px 0 96px;font-size:13.5px;}
    .engine-select{height:28px;min-width:66px;padding:0 8px;font-size:12px;}
  .search-go{height:28px;min-width:62px;padding:0 10px;font-size:12px;}
  .search-box-top .kbd{display:none;}
}