/* ============================================================
   99金融数据中心 · 响应式适配（移动端 / 平板）
   仅含 @media 规则与少量全局修正；桌面端保持原样。
   本文件在所有模板 </head> 前引入，故其规则晚于各页内联 <style>，
   同等优先级下优先生效，无需 !important。
   ============================================================ */

/* 防偶发横向溢出（clip 不创建滚动容器，不破坏 position:sticky 顶栏） */
html { overflow-x: clip; }

/* ---------- 顶部导航 ---------- */
@media (max-width: 640px) {
  .nav { gap: 8px 10px; padding: 8px 12px; height: auto; flex-wrap: wrap; }
  .nav .brand { flex: 1 1 auto; }
  .nav-donate { position: static; transform: none; padding: 3px 9px; font-size: 11px; }
  .nav-cat-btn { height: 32px; }
}

/* ---------- 工具栏：手机端换行并占满宽度 ---------- */
@media (max-width: 640px) {
  .toolbar { gap: 10px; padding: 0 12px; }
  .search { min-width: 0; width: 100%; }
  .filter-cluster { width: 100%; }
  .filter-trigger { width: 100%; justify-content: space-between; }
  .count { width: 100%; text-align: center; }
  /* 移动端排序下拉（桌面隐藏，见下方 .mobile-sort 基类） */
  .mobile-sort { display: inline-flex; width: 100%; }
}

/* 移动端排序下拉：默认隐藏，≤640px 才显示（补偿卡片模式下消失的表头排序） */
.mobile-sort {
  display: none;
  height: 40px; align-items: center; gap: 8px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 980px;
  background: #fff; font-size: 14px; color: var(--fg); cursor: pointer;
  flex: 1; min-width: 0;
}
.mobile-sort select {
  flex: 1; border: none; background: transparent; font-size: 14px;
  color: var(--fg); outline: none;
}

/* ============================================================
   主列表表格：手机端「卡片模式」（彻底无横滚）
   仅作用于 index 的 .tbl-scroll 内表格，不影响详情页 .mtab 等
   ============================================================ */
@media (max-width: 640px) {
  .tbl-scroll { overflow: visible; }
  .tbl-scroll colgroup { display: none; }
  .tbl-scroll thead { display: none; }
  .tbl-scroll table {
    display: block; width: 100%; min-width: 0;
    font-size: 13px; table-layout: auto;
  }
  .tbl-scroll tbody { display: block; }
  .tbl-scroll tbody tr {
    display: block; background: var(--card);
    border: 1px solid rgba(0,0,0,.06); border-radius: 14px;
    margin-bottom: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
  }
  .tbl-scroll tbody tr:hover { background: var(--card); }
  .tbl-scroll tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 14px; border-bottom: 1px solid #f0f0f2;
    white-space: normal; overflow: visible; text-overflow: clip; min-width: 0;
  }
  .tbl-scroll tbody td:last-child { border-bottom: none; }
  .tbl-scroll tbody td::before {
    content: attr(data-label); color: var(--gray); font-size: 12px;
    font-weight: 500; text-align: left; flex-shrink: 0; margin-right: auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
  }
  .tbl-scroll tbody td.sticky-col,
  .tbl-scroll tbody td.sticky-col-2 {
    position: static; left: auto; background: transparent; border-right: none;
  }
  .tbl-scroll tbody tr:hover .sticky-col,
  .tbl-scroll tbody tr:hover .sticky-col-2 { background: transparent; }
  .tbl-scroll tbody td.code,
  .tbl-scroll tbody td.name { font-weight: 600; }
}

/* ============================================================
   详情页通用组件（11 个 *_detail 模板结构近似，统一适配）
   ============================================================ */
@media (max-width: 640px) {
  .hero { padding: 24px 14px 6px; }
  .hero h1 { font-size: 26px; }
  .hero .sub { font-size: 14px; }
  .wrap { padding: 0 12px; margin-top: 14px; margin-bottom: 40px; }
  .sec { padding: 0 12px; margin-top: 14px; }
  .card { padding: 14px; }
  .stats, .metrics, .grid { grid-template-columns: repeat(2, 1fr); padding: 0 12px; }
  .stats .val, .metrics .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .toolbar { flex-wrap: wrap; gap: 8px; padding: 0 12px; }
  .toolbar select, .toolbar .btn, .toolbar button { width: 100%; flex: 1 1 auto; }
  .toolbar .spacer { display: none; }
  .mtitle { font-size: 14px; }
  .legend-note { font-size: 12px; }
  .seo-intro { padding: 14px; font-size: 12px; }
  .foot { font-size: 11px; padding: 0 12px; }
  .pager { padding: 0 12px; }
  /* 阶段涨幅等小表在窄屏横滚，避免撑破 */
  .mtab { display: block; overflow-x: auto; white-space: nowrap; }

  /* ============================================================
     手机端导航：分类 tab 改为「自动换行平铺网格」，不横滑、不下拉
     - 顶栏取消吸顶(sticky)否则换行后很高会一直挡表格
     - 品类变胶囊按钮，active 高亮；数量小字隐藏省宽度
     ============================================================ */
  .nav { position: sticky; top: 0; height: auto; flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; }
  .nav .brand { flex: 1 1 auto; }
  .nav-donate { position: static; transform: none; flex-shrink: 0; }
  .nav-cat { flex-shrink: 0; }
  .nav-cat-btn { height: 32px; padding: 0 12px; }
  .nav-cat-menu { right: 0; min-width: 240px; grid-template-columns: repeat(2,1fr); }
}

/* 超窄屏（≤380px）：网格再降为单列，避免两列仍溢出 */
@media (max-width: 380px) {
  .stats, .metrics, .grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 23px; }
}

/* 平板（641~900）：列表表格仍横滚，字号略缩、冻结列保留（保持原交互） */
@media (min-width: 641px) and (max-width: 900px) {
  .tbl-scroll table { font-size: 13px; }
}