/* ==========================================================================
   全网资讯聚合平台 · 样式表
   浅色 / 深色双主题 · 玻璃质感 · 卡片式布局
   ========================================================================== */

:root {
  /* 浅色主题 */
  --bg:            #f4f6fb;
  --bg-soft:       #eef1f8;
  --surface:       rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --surface-hover: rgba(255, 255, 255, 0.96);
  --border:        rgba(15, 23, 42, 0.09);
  --border-strong: rgba(15, 23, 42, 0.16);
  --text:          #0f172a;
  --text-2:        #475569;
  --text-3:        #94a3b8;
  --shadow-sm:     0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-md:     0 4px 12px rgba(15, 23, 42, .07), 0 12px 32px rgba(15, 23, 42, .06);
  --shadow-lg:     0 12px 32px rgba(15, 23, 42, .10), 0 32px 64px rgba(15, 23, 42, .08);
  --glass-blur:    18px;
  --orb-opacity:   .34;
  --primary:       #6366f1;
  --primary-soft:  rgba(99, 102, 241, .10);
  --radius:        12px;
  --radius-lg:     18px;
  --radius-sm:     9px;

  /* 流体布局尺度：随视口自适应，手机端自动收紧 */
  --page-x:        clamp(12px, 3.4vw, 26px);   /* 页面左右留白 */
  --gap:           clamp(12px, 1.6vw, 24px);   /* 主栅格间距 */
  --card-pad-x:    clamp(13px, 1.5vw, 18px);   /* 卡片左右内边距 */
  --card-pad-y:    clamp(12px, 1.4vw, 16px);   /* 卡片上下内边距 */
  --maxw:          1560px;
  --topbar-h:      clamp(58px, 8vw, 70px);     /* 顶栏高度（含状态条） */
  --touch:         44px;                       /* 最小可点击尺寸 */
}

body[data-theme="dark"] {
  --bg:            #070b16;
  --bg-soft:       #0b1120;
  --surface:       rgba(19, 26, 43, 0.72);
  --surface-solid: #131a2b;
  --surface-hover: rgba(26, 35, 56, 0.86);
  --border:        rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.26);
  --text:          #f1f5f9;
  --text-2:        #a8b6cd;
  --text-3:        #64748b;
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:     0 6px 20px rgba(0, 0, 0, .45);
  --shadow-lg:     0 16px 40px rgba(0, 0, 0, .55);
  --primary:       #818cf8;
  --primary-soft:  rgba(129, 140, 248, .14);
  --orb-opacity:   .42;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* 防止 iOS 横屏时自动放大字体 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system,
               BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans SC", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  transition: background .35s ease, color .35s ease;
  overflow-x: hidden;
  /* 全局禁止横向溢出 —— 移动端最关键的一条 */
  max-width: 100vw;
}

/* 触控设备：点击高亮与输入框样式统一 */
input, button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 背景装饰 ---------- */
.bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--orb-opacity);
       transition: opacity .4s ease; }
.orb-1 { width: 620px; height: 620px; top: -260px; left: -180px;
         background: radial-gradient(circle, #6366f1, transparent 68%); }
.orb-2 { width: 540px; height: 540px; top: 18%; right: -200px;
         background: radial-gradient(circle, #06b6d4, transparent 68%); }
.orb-3 { width: 580px; height: 580px; bottom: -240px; left: 34%;
         background: radial-gradient(circle, #ec4899, transparent 70%); }
.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120, 130, 160, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 130, 160, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-bottom: 1px solid var(--border);
  /* 刘海屏：顶栏留出状态栏安全区 */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(9px, 1.2vw, 13px) var(--page-x);
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.brand-logo {
  width: clamp(38px, 5vw, 44px); height: clamp(38px, 5vw, 44px);
  display: grid; place-items: center;
  font-size: clamp(19px, 2.5vw, 22px); border-radius: 13px;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  box-shadow: 0 6px 18px rgba(99, 102, 241, .38);
  flex-shrink: 0;
}
.brand-text { min-width: 0; }
.brand-text h1 {
  font-size: clamp(14px, 1.7vw, 17px); font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(96deg, #6366f1, #06b6d4 55%, #ec4899);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.brand-text p { font-size: 9.5px; letter-spacing: 1.7px; color: var(--text-3); font-weight: 600; }

/* 搜索 */
.search-wrap {
  flex: 1; max-width: 560px; position: relative;
  display: flex; align-items: center;
}
.search-icon {
  position: absolute; left: 14px; width: 17px; height: 17px;
  color: var(--text-3); pointer-events: none;
}
#searchInput {
  width: 100%; padding: 11px 40px 11px 41px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--text);
  font-size: 16px; /* ≥16px 可避免 iOS 聚焦时自动放大页面 */
  font-family: inherit; outline: none;
  transition: box-shadow .22s, border-color .22s;
  box-shadow: var(--shadow-sm);
}
#searchInput::placeholder { color: var(--text-3); }
#searchInput:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-sm);
}
.search-clear {
  position: absolute; right: 12px; width: 22px; height: 22px;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--border-strong); color: var(--text-2); font-size: 11px;
  display: grid; place-items: center; transition: background .2s;
}
.search-clear:hover { background: var(--primary); color: #fff; }
.search-hint {
  position: absolute; right: 14px; top: 44px; font-size: 11px; color: var(--text-3);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.search-wrap:focus-within .search-hint { opacity: 1; }
kbd {
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  border-radius: 4px; padding: 0 4px; font-size: 10px; font-family: inherit;
}

.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.live-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--primary-soft); border: 1px solid rgba(99, 102, 241, .28);
  font-size: 12px; font-weight: 700; color: var(--primary);
  white-space: nowrap;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.live-badge.syncing .live-dot { background: #f59e0b; animation-duration: .8s; }

.icon-btn {
  width: var(--touch); height: var(--touch);
  border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-solid);
  color: var(--text-2); display: grid; place-items: center;
  transition: all .2s; flex-shrink: 0;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary);
                  transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 18px; height: 18px; }
.ic-moon { display: none; }
body[data-theme="dark"] .ic-sun { display: none; }
body[data-theme="dark"] .ic-moon { display: block; }
#refreshBtn.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 移动端「分类导航」按钮：仅在手机上出现 */
.menu-btn { display: none; }

/* 状态条 */
.statusbar {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--page-x) 9px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 12px; color: var(--text-2);
}
.status-left { display: flex; align-items: center; gap: clamp(9px, 1.3vw, 14px); min-width: 0; }
.status-item { white-space: nowrap; }
.status-item b { color: var(--text); font-size: 13.5px; font-weight: 800; margin-right: 4px;
                 font-variant-numeric: tabular-nums; }
.status-item em { font-style: normal; color: var(--text-3); }
.status-sep { width: 1px; height: 11px; background: var(--border-strong); flex-shrink: 0; }
.status-right { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 数据源在线：可点击查看详情 */
.status-feeds {
  cursor: pointer; user-select: none; border-radius: 6px;
  padding: 1px 5px; margin: -1px -5px;
  transition: background .18s ease, color .18s ease;
}
.status-feeds:hover { background: var(--primary-soft); }
.status-feeds:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.status-feeds b::after {
  content: '▾'; display: inline-block; margin-left: 3px;
  font-size: 9px; opacity: .45; vertical-align: middle;
  transition: transform .2s ease;
}
.status-feeds[aria-expanded="true"] b::after { transform: rotate(180deg); }
.status-feeds.has-fail b { color: #d97706; }

/* 信源详情面板 */
.feed-detail {
  max-width: var(--maxw); margin: 0 auto 10px;
  padding: 11px var(--card-pad-x);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  font-size: 12.5px; color: var(--text-2);
  max-height: 210px; overflow-y: auto;
  animation: fadeIn .2s ease both;
}
.feed-detail[hidden] { display: none; }
.feed-detail .fd-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 7px; color: var(--text); font-weight: 600;
}
.feed-detail .fd-sum { color: var(--text-3); font-weight: 400; font-size: 12px; }
.feed-detail .fd-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 4px 0; border-top: 1px dashed var(--border);
}
.feed-detail .fd-name { color: var(--text); }
.feed-detail .fd-err { color: #d97706; font-size: 11.5px; text-align: right; }
.feed-detail .fd-ok { color: var(--text-3); }

/* ---------- 布局 ---------- */
.layout {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(14px, 2vw, 22px) var(--page-x) clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: clamp(186px, 15vw, 218px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

/* ---------- 侧栏 ---------- */
.sidebar {
  position: sticky; top: calc(var(--topbar-h) + 16px);
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.side-head {
  font-size: 11px; font-weight: 800; letter-spacing: 1.3px;
  color: var(--text-3); text-transform: uppercase; padding: 0 4px;
  margin-top: 6px;
}
.side-nav {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 8px; box-shadow: var(--shadow-sm);
}
.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-align: left; width: 100%;
  transition: all .18s; position: relative;
  min-height: var(--touch);
}
.side-item:hover { background: var(--surface-hover); color: var(--text); transform: translateX(2px); }
.side-item.active { color: #fff; font-weight: 700; }
.side-item.active .side-count { color: rgba(255,255,255,.92); }
.side-emoji { font-size: 15px; line-height: 1; flex-shrink: 0; }
.side-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.side-quick { display: grid; gap: 7px; }
.quick-btn {
  padding: 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: left; transition: all .2s;
  min-height: var(--touch);
}
.quick-btn:hover { border-color: var(--primary); color: var(--primary);
                   transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.quick-btn:active { transform: scale(.98); }

/* 移动端抽屉遮罩（默认隐藏） */
.side-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .22s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 面板 ---------- */
.content { min-width: 0; }
.panel { display: none; animation: fadeUp .4s cubic-bezier(.22,1,.36,1); }
.panel.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); }
                    to   { opacity: 1; transform: translateY(0); } }

.panel-title-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.panel-sub { font-size: 12.5px; color: var(--text-3); }

/* ---------- 板块网格 ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.cat-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px) clamp(13px, 1.4vw, 16px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s;
  animation: fadeUp .5s cubic-bezier(.22,1,.36,1) backwards;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.20) 0%, transparent 42%);
}
body[data-theme="dark"] .cat-card::after {
  background: linear-gradient(150deg, rgba(255,255,255,.07) 0%, transparent 46%);
}

.cat-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.cat-card-emoji {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.cat-card-name {
  font-size: 16.5px; font-weight: 800; letter-spacing: .3px;
  text-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.cat-card-count {
  margin-left: auto; font-size: 11.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cat-topics { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.topic-chip {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.8px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(8px);
  transition: all .22s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.topic-chip:hover {
  background: rgba(255,255,255,.30);
  border-color: rgba(255,255,255,.62);
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
}
.topic-chip:active { transform: translateY(0) scale(.98); }
.topic-num {
  margin-left: 6px; font-size: 10.5px; opacity: .8; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------- 热点榜 ---------- */
.hot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 10px;
}
.hot-item {
  display: flex; gap: 13px; align-items: flex-start;
  padding: var(--card-pad-y) var(--card-pad-x);
  border-radius: var(--radius);
  background: var(--surface); backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  cursor: pointer; transition: all .24s cubic-bezier(.22,1,.36,1);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  min-height: var(--touch);
}
.hot-item:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.hot-rank {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 900;
  background: var(--bg-soft); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.hot-item:nth-child(1) .hot-rank { background: linear-gradient(135deg,#ef4444,#f97316); color:#fff;
  box-shadow: 0 4px 12px rgba(239,68,68,.4); }
.hot-item:nth-child(2) .hot-rank { background: linear-gradient(135deg,#f97316,#fbbf24); color:#fff; }
.hot-item:nth-child(3) .hot-rank { background: linear-gradient(135deg,#eab308,#84cc16); color:#fff; }
.hot-body { min-width: 0; flex: 1; }
.hot-title {
  font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hot-item:hover .hot-title { color: var(--primary); }
.hot-meta { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text-3); flex-wrap: wrap; }
.hot-tag {
  padding: 2px 9px; border-radius: 6px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary); font-size: 10.5px;
}
.hot-heat { margin-left: auto; display: flex; align-items: center; gap: 4px;
            font-weight: 800; color: #f97316; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   四大热榜专区（抖音 / 微博 / 知乎 / 百度）
   ========================================================================== */

.hotboards-section {
  margin-bottom: 34px;
}

.hb-updated {
  margin-left: auto; font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- 平台切换 Tab ---------- */
.hb-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 12px);
  margin-bottom: clamp(12px, 1.4vw, 16px);
}
.hb-tab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(8px, 1vw, 11px);
  padding: clamp(10px, 1.2vw, 13px) clamp(11px, 1.3vw, 16px);
  border-radius: var(--radius-lg); cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  font-family: inherit; text-align: left; min-width: 0;
  transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s, border-color .26s;
  box-shadow: var(--shadow-sm);
  min-height: var(--touch);
}
.hb-tab::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--hb-color, var(--primary));
  opacity: 0; transition: opacity .26s;
}
.hb-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hb-tab:active { transform: scale(.97); }
.hb-tab.active {
  border-color: var(--hb-color, var(--primary));
  box-shadow: 0 6px 20px -6px var(--hb-color, var(--primary)), var(--shadow-sm);
}
.hb-tab.active::before { opacity: 1; }
.hb-tab-icon {
  width: clamp(30px, 3.6vw, 36px); height: clamp(30px, 3.6vw, 36px);
  flex-shrink: 0; border-radius: 11px;
  display: grid; place-items: center;
  font-size: clamp(14px, 1.7vw, 17px);
  background: var(--hb-soft, var(--primary-soft));
  border: 1px solid var(--hb-border, var(--border));
  transition: transform .26s;
}
.hb-tab.active .hb-tab-icon { transform: scale(1.06); }
.hb-tab-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.hb-tab-name {
  font-size: clamp(12.5px, 1.4vw, 14px); font-weight: 800; letter-spacing: .2px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-tab.active .hb-tab-name { color: var(--hb-color, var(--primary)); }
.hb-tab-count {
  font-size: 11px; color: var(--text-3); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-tab-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--hb-color, var(--primary)); opacity: .35;
}
.hb-tab.active .hb-tab-dot { opacity: 1; animation: pulse 2s infinite; }
.hb-tab.stale .hb-tab-dot { background: #f59e0b; }

/* ---------- 榜单舞台 ---------- */
.hb-stage {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: fadeUp .4s cubic-bezier(.22,1,.36,1);
}
.hb-stage-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: clamp(12px, 1.4vw, 14px) clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--border);
  background: var(--hb-soft, var(--primary-soft));
}
.hb-stage-title { font-size: clamp(14px, 1.6vw, 15px); font-weight: 800; color: var(--text); }
.hb-stage-badge {
  font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  background: var(--hb-color, var(--primary)); color: #fff; white-space: nowrap;
}
.hb-stage-meta { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* 三列瀑布：不杂乱、充分利用横向空间 */
.hb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.hb-col { min-width: 0; }
.hb-col + .hb-col { border-left: 1px solid var(--border); }

.hb-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: clamp(10px, 1.1vw, 11px) clamp(12px, 1.5vw, 18px);
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background .2s;
  position: relative;
  min-height: var(--touch);
}
.hb-col .hb-item:last-child { border-bottom: none; }
.hb-item:hover { background: var(--surface-hover); }
.hb-item:hover .hb-item-title { color: var(--hb-color, var(--primary)); }
.hb-item:active { background: var(--surface-hover); }

.hb-rank {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 900; font-variant-numeric: tabular-nums;
  background: var(--bg-soft); color: var(--text-3);
}
.hb-item:nth-child(1) .hb-rank { background: linear-gradient(135deg,#ef4444,#f97316); color:#fff; box-shadow: 0 3px 9px rgba(239,68,68,.35); }
.hb-item:nth-child(2) .hb-rank { background: linear-gradient(135deg,#f97316,#fbbf24); color:#fff; }
.hb-item:nth-child(3) .hb-rank { background: linear-gradient(135deg,#eab308,#84cc16); color:#fff; }

.hb-item-body { min-width: 0; flex: 1; }
.hb-item-title {
  font-size: 13.4px; font-weight: 600; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color .2s;
}
.hb-item-meta {
  display: flex; align-items: center; gap: 7px; margin-top: 3px;
  font-size: 11px; color: var(--text-3);
}
.hb-tag {
  font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px;
  background: var(--hb-color, var(--primary)); color: #fff;
  line-height: 1.5;
}
.hb-tag.tag-new { background: #ef4444; }
.hb-tag.tag-hot { background: #f97316; }
.hb-heat {
  font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.hb-heat::before { content: '🔥'; margin-right: 3px; font-size: 10px; }

/* ---------- 加载 / 空态 ---------- */
.hb-loading, .hb-empty {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 70px 20px; color: var(--text-3); font-size: 13.5px;
}
.hb-spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
.hb-empty { flex-direction: column; }
.hb-empty .em { font-size: 38px; }

/* 响应式规则统一收敛到文件末尾的断点区块（见下方「响应式断点体系」） */

/* ---------- 列表头 ---------- */
.list-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding: var(--card-pad-y) var(--card-pad-x);
  border-radius: var(--radius-lg);
  background: var(--surface); backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--topbar-h) + 12px); z-index: 20;
}
.back-btn {
  padding: 9px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-solid);
  color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600;
  transition: all .2s; white-space: nowrap;
  min-height: var(--touch); flex-shrink: 0;
}
.back-btn:hover { border-color: var(--primary); color: var(--primary); }
.back-btn:active { transform: scale(.97); }
.list-head-title { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.list-head-title h2 {
  font-size: clamp(16px, 2vw, 19px); font-weight: 800; letter-spacing: -.2px;
  min-width: 0; word-break: break-word;
}
#listSub { font-size: 12.5px; color: var(--text-3); }
.sort-btn {
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-solid);
  color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: all .2s; white-space: nowrap;
  min-height: var(--touch); flex-shrink: 0;
}
.sort-btn:hover { border-color: var(--primary); color: var(--primary); }
.sort-btn:active { transform: scale(.97); }

/* ---------- 新闻列表 ---------- */
.news-list { display: flex; flex-direction: column; gap: 11px; }
.news-card {
  display: flex; gap: 15px; align-items: flex-start;
  padding: var(--card-pad-y) var(--card-pad-x);
  border-radius: var(--radius-lg);
  background: var(--surface); backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: all .26s cubic-bezier(.22,1,.36,1);
  animation: fadeUp .45s cubic-bezier(.22,1,.36,1) backwards;
  position: relative; overflow: hidden;
  min-height: var(--touch);
}
.news-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--card-accent, var(--primary));
  opacity: 0; transition: opacity .26s;
}
.news-card:hover {
  transform: translateX(4px); box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.news-card:hover::before { opacity: 1; }
.news-card:hover .news-title { color: var(--primary); }

.news-body { flex: 1; min-width: 0; }
.news-title {
  font-size: 15.2px; font-weight: 700; line-height: 1.55; margin-bottom: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color .2s;
}
.news-summary {
  font-size: 13.2px; color: var(--text-2); line-height: 1.62; margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11.8px; color: var(--text-3);
}
.news-source {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
  color: var(--text-2);
}
.news-source::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--card-accent, var(--primary));
}
.news-topic-tag {
  padding: 2px 9px; border-radius: 6px; font-weight: 700; font-size: 10.8px;
  background: var(--primary-soft); color: var(--primary);
}
.news-time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-arrow {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
  display: grid; place-items: center; color: var(--text-3);
  background: var(--bg-soft); transition: all .24s; margin-top: 2px;
}
.news-card:hover .news-arrow { background: var(--primary); color: #fff; transform: translateX(3px); }
.news-arrow svg { width: 14px; height: 14px; }

/* 新条目高亮 */
@keyframes newFlash {
  0%   { background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary); }
  100% { background: var(--surface); box-shadow: var(--shadow-sm); }
}
.news-card.is-new { animation: newFlash 2.4s ease-out; }

/* 空态 */
.empty-state {
  text-align: center; padding: 90px 20px; color: var(--text-3);
  border-radius: var(--radius-lg); border: 1px dashed var(--border-strong);
}
.empty-state .em { font-size: 46px; margin-bottom: 14px; display: block; }
.empty-state p { font-size: 14px; }

/* 骨架屏 */
.skeleton {
  height: 92px; border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--bg-soft) 30%, var(--surface-hover) 50%, var(--bg-soft) 70%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- 页脚 ---------- */
.footer {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(16px, 2vw, 22px) var(--page-x) calc(clamp(28px, 4vw, 40px) + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3);
  line-height: 1.7;
}

/* ---------- 加载遮罩 ---------- */
.loading-mask {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--bg); transition: opacity .5s, visibility .5s;
}
.loading-mask.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader { display: flex; gap: 8px; }
.loader div {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary); animation: bounce 1.4s infinite ease-in-out both;
}
.loader div:nth-child(1) { animation-delay: -.32s; }
.loader div:nth-child(2) { animation-delay: -.16s; background: #06b6d4; }
.loader div:nth-child(3) { background: #ec4899; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(.55); opacity: .5; }
  40%           { transform: scale(1); opacity: 1; }
}
.loading-mask p { font-size: 13.5px; color: var(--text-3); }

/* ---------- 返回顶部 ---------- */
.to-top {
  position: fixed; z-index: 90;
  right: calc(clamp(14px, 2.5vw, 28px) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(14px, 2.5vw, 28px) + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-2); display: grid; place-items: center;
  box-shadow: var(--shadow-md); transition: all .24s;
  opacity: 0; visibility: hidden;
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-3px); }
.to-top:active { transform: scale(.92); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px;
                            border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* 触屏设备：隐藏细滚动条（移动端滚动指示器由系统绘制） */
@media (hover: none) and (pointer: coarse) {
  ::-webkit-scrollbar { width: 0; height: 0; }
  /* 触屏无 hover：把悬停动效改为按压反馈，避免"粘住" */
  .hot-item:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
  .news-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
  .news-card:hover::before { opacity: 0; }
  .cat-card:hover { transform: none; box-shadow: var(--shadow-md); }
  .hb-item:hover { background: transparent; }
  .quick-btn:hover, .icon-btn:hover, .back-btn:hover, .sort-btn:hover { transform: none; }
  /* 按压反馈替代 hover */
  .hot-item:active, .news-card:active { transform: scale(.985); background: var(--surface-hover); }
  .cat-card:active { transform: scale(.99); }
}

/* ==========================================================================
   响应式：全设备适配
   断点体系  1280 / 1024 / 900 / 768 / 640 / 480 / 380 + 横屏 + 触屏
   ========================================================================== */

/* ---------- ≤1280px：侧栏收窄，热榜转 2 列 ---------- */
@media (max-width: 1280px) {
  .layout { grid-template-columns: clamp(178px, 16vw, 196px) minmax(0, 1fr); }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
  .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-col:nth-child(3) { border-left: none; border-top: 1px solid var(--border); }
}

/* ---------- ≤1024px：平板竖屏，侧栏转为可横向滑动条 ---------- */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* 侧栏变横向滚动条 */
  .sidebar {
    position: sticky;
    top: calc(var(--topbar-h) + 4px);
    z-index: 30;
    gap: 8px;
    margin: 0 calc(var(--page-x) * -1);
    padding: 0 var(--page-x);
  }
  /* 横向滑动导航：隐藏滚动条 + 两端渐隐提示 */
  .side-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    border-radius: 0;
    padding: 8px 2px;
    gap: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-item {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 9px 14px;
    min-height: 40px;
  }
  .side-item:hover { transform: none; }
  .side-item.active { border-color: transparent; }
  .side-item .side-count {
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-soft);
  }
  .side-item.active .side-count { background: rgba(255,255,255,.24); }

  /* 快捷入口并排两个 */
  .side-head { display: none; }
  .side-quick { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-btn { text-align: center; padding: 11px 8px; }

  .list-head { top: calc(var(--topbar-h) + 62px); }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
}

/* ---------- ≤900px：平板横屏 / 大手机 ---------- */
@media (max-width: 900px) {
  .topbar-inner { flex-wrap: wrap; gap: 10px 12px; }
  .search-wrap { order: 3; max-width: 100%; flex-basis: 100%; }
  .search-hint { display: none; }
  .statusbar {
    padding-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .statusbar::-webkit-scrollbar { display: none; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .hot-list { grid-template-columns: minmax(0, 1fr); }
  .hb-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-grid { grid-template-columns: minmax(0, 1fr); }
  .hb-col + .hb-col { border-left: none; border-top: 1px solid var(--border); }
  .hb-updated { display: none; }
  .panel-title-row { gap: 6px 12px; }
}

/* ---------- ≤768px：手机（抽屉式侧栏登场） ---------- */
@media (max-width: 768px) {
  /* 顶栏：菜单按钮出现，实时徽标收起文字 */
  .menu-btn { display: grid; }
  .live-text { display: none; }
  .live-badge { padding: 8px 11px; }
  .brand-text p { display: none; }

  /* 侧栏：默认隐藏，点击菜单按钮从左侧滑出 */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 84vw);
    z-index: 120;
    margin: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    background: var(--surface-solid);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    transform: translateX(-102%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .sidebar.open { transform: translateX(0); }
  .side-backdrop[hidden] { display: none; }

  /* 抽屉内恢复纵向菜单样式 */
  .side-head { display: block; }
  .side-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 3px;
  }
  .side-item {
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 11px;
    min-height: var(--touch);
  }
  .side-item .side-count { background: transparent; padding: 0; margin-left: auto; }
  .side-quick { grid-template-columns: 1fr; }

  /* 布局与内容 */
  .list-head { position: static; }
  .list-head-title { flex-basis: 100%; }
  .panel-title { font-size: 17px; }
  .panel-sub { font-size: 12px; }
  .news-arrow { display: none; }
  .news-card { gap: 0; }
  .hot-item { gap: 10px; }
  .cat-card-count { font-size: 11px; padding: 3px 9px; }
  .to-top { width: 42px; height: 42px; border-radius: 12px; }
}

/* ---------- ≤640px：主流手机竖屏 ---------- */
@media (max-width: 640px) {
  body { font-size: 14px; }

  .topbar-inner { padding-top: 10px; padding-bottom: 10px; }
  #searchInput { padding: 10px 38px 10px 38px; font-size: 16px; }
  .search-icon { left: 12px; width: 16px; height: 16px; }

  /* 状态条：精简为一行可横滑 */
  .status-left { gap: 10px; }
  .status-item b { font-size: 12.5px; }
  .status-item em { font-size: 11px; }

  /* 面板标题与列表头 */
  .panel-title-row { margin-bottom: 12px; }
  .list-head { gap: 10px; padding: 11px 12px; }
  .list-head-title h2 { font-size: 16px; }
  #listSub { font-size: 11.5px; }
  .back-btn, .sort-btn { padding: 9px 12px; font-size: 12px; }

  /* 新闻卡片 */
  .news-title { font-size: 14.6px; }
  .news-summary { font-size: 12.8px; -webkit-line-clamp: 3; line-clamp: 3; }
  .news-meta { font-size: 11.2px; gap: 7px; }

  /* 热点榜 */
  .hot-title { font-size: 13.6px; }
  .hot-rank { width: 25px; height: 25px; font-size: 12px; }

  /* 热榜：单列后的条目 */
  .hb-item-title { font-size: 13.2px; }
  .hb-stage-meta { flex-basis: 100%; margin-left: 0; }

  /* 板块卡片 */
  .cat-card-head { margin-bottom: 11px; gap: 9px; }
  .cat-card-name { font-size: 15.5px; }
  .cat-card-emoji { width: 31px; height: 31px; font-size: 15px; }
  .topic-chip { padding: 6px 12px; font-size: 12.2px; }
}

/* ---------- ≤480px：小屏手机 ---------- */
@media (max-width: 480px) {
  body { font-size: 13.6px; }
  .brand-text h1 { font-size: 14px; }
  .brand-logo { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; }
  .icon-btn { width: 40px; height: 40px; border-radius: 11px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .live-badge { padding: 7px 9px; }

  /* 热榜 Tab 2×2，去掉次要信息 */
  .hb-tabs { gap: 8px; }
  .hb-tab { padding: 9px 10px; gap: 8px; }
  .hb-tab-icon { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }
  .hb-tab-count { display: none; }
  .hb-tab-name { font-size: 12.6px; }
  .hb-stage-head { gap: 8px; }
  .hb-item { padding: 10px 12px; gap: 9px; }
  .hb-rank { width: 21px; height: 21px; font-size: 11px; border-radius: 6px; }
  .hb-item-title { font-size: 12.9px; }

  .news-card, .hot-item { padding: 12px; }
  .news-title { font-size: 14.2px; }
  .list-head { flex-wrap: wrap; }
  .back-btn { flex: 0 0 auto; }
  .sort-btn { margin-left: auto; }

  .footer { flex-direction: column; align-items: flex-start; gap: 6px; }
  .to-top { right: 14px; bottom: 14px; }
}

/* ---------- ≤380px：超小屏（iPhone SE / 老安卓） ---------- */
@media (max-width: 380px) {
  body { font-size: 13.2px; }
  .brand-text h1 { font-size: 13px; }
  .brand-logo { width: 33px; height: 33px; font-size: 16px; }
  .icon-btn { width: 38px; height: 38px; }
  .topbar-right { gap: 7px; }
  .live-badge { padding: 6px 8px; }

  .hb-tabs { grid-template-columns: 1fr; }
  .hb-tab { flex-direction: row; }

  .news-title { font-size: 13.8px; }
  .news-summary { -webkit-line-clamp: 2; line-clamp: 2; }
  .panel-title { font-size: 16px; }
  .hot-rank { width: 23px; height: 23px; }
}

/* ---------- 横屏矮视口：压缩纵向留白，保证内容可见 ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { position: static; }
  .sidebar { position: static; top: auto; }
  .list-head { position: static; }
  .loading-mask { padding: 20px; }
  .orb { display: none; }
}

/* ---------- 大屏（≥1600px）：内容居中，留白更舒展 ---------- */
@media (min-width: 1600px) {
  :root { --maxw: 1680px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }
  .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}