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

html, body {
  height: 100%;
  height: 100dvh; /* 移动端地址栏变化更稳 */
  max-height: 100%;
  max-height: 100dvh;
  overflow: hidden; /* 禁止整页滚动，只滚列表区 */
}

body {
  background: #F6F9FF;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #162A52;
}

a { color: inherit; text-decoration: none; }

svg {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

/* ========== 页面骨架：顶栏 + 主体 ========== */
.app {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 为固定顶栏预留高度（border-box 计入 height） */
  padding-top: 72px;
}

/* ----- 顶部导航（固定） ----- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  background: #FFFFFF;
  border-bottom: 1px solid #E7EEF9;
  box-shadow: 0 1px 0 rgba(20, 41, 86, 0.04);
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(280px, 560px) minmax(160px, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 0 24px;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  justify-self: start;
}

.brand {
  width: 38px;
  height: 38px;
  background: #1F6BFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}

.brand svg {
  width: 20px;
  height: 20px;
}

.page-title {
  color: #0E214A;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  justify-self: end;
}

/* 微信客服入口 */
.wx-service {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 10px;
  border: none;
  border-radius: 20px;
  background: #07C160;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(7, 193, 96, 0.28);
}

.wx-service:hover {
  background: #06AD56;
  box-shadow: 0 3px 10px rgba(7, 193, 96, 0.36);
}

.wx-service:focus-visible {
  outline: 2px solid #0E214A;
  outline-offset: 2px;
}

.wx-service .wx-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.wx-text-pc {
  display: inline;
}

/* 微信号可手动选中复制 */
.wx-service .wx-id {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  margin-left: 0;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.wx-service .wx-id::selection {
  background: rgba(14, 33, 74, 0.35);
  color: #FFFFFF;
}

.wx-text-m {
  display: none;
}

/* 微信客服弹窗 */
.wx-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wx-modal[hidden] {
  display: none;
}

.wx-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(14, 33, 74, 0.45);
}

.wx-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(14, 33, 74, 0.18);
}

.wx-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #8291AD;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.wx-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #07C160;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wx-modal-icon svg {
  width: 32px;
  height: 32px;
}

.wx-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #0E214A;
  margin-bottom: 6px;
}

.wx-modal-tip {
  font-size: 13px;
  color: #67799F;
  margin-bottom: 16px;
  line-height: 1.5;
}

.wx-modal-id {
  font-size: 22px;
  font-weight: 700;
  color: #07C160;
  letter-spacing: 0.5px;
  padding: 12px;
  background: #F0FFF6;
  border: 1px dashed #7AD9A8;
  border-radius: 10px;
  margin-bottom: 14px;
  user-select: all;
}

.wx-modal-copy {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #07C160;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.wx-modal-copy:hover {
  background: #06AD56;
}

.wx-modal-feedback {
  margin-top: 12px;
  font-size: 13px;
  color: #07C160;
  font-weight: 500;
}

/* ----- 主体：侧栏 + 内容（高度锁在视口内，自身不滚动） ----- */
.main {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: stretch;
  overflow: hidden;
}

/* ----- 左侧分类：固定在视口内，菜单多时侧栏内部滚动 ----- */
.sidebar {
  width: 260px;
  flex: 0 0 260px;
  min-height: 0;
  max-height: 100%;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 4px 20px #AEC3E533;
  padding: 12px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
}

.nav-all {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #142956;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-all:hover {
  background: #F3F7FF;
  color: #1468FF;
}

.nav-all.active {
  background: #EAF2FF;
  color: #1468FF;
}

.nav-all svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.nav-all > span:not(.nav-count) {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.nav-count {
  font-size: 12px;
  font-weight: 500;
  color: #8291AD;
  flex-shrink: 0;
  line-height: 1.35;
  margin-top: 1px;
}

.nav-all.active .nav-count,
.nav-all:hover .nav-count,
.cat-item.is-active .nav-count,
.cat-item:hover .nav-count {
  color: #5B8DEF;
}

/* 一级分类（无下拉箭头，无侧栏子菜单） */
.cat-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #142956;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.cat-item:hover {
  background: #F3F7FF;
  color: #1468FF;
}

.cat-item.is-active {
  background: #EAF2FF;
  color: #1468FF;
}

.cat-item .cat-ico {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: inherit;
  flex-shrink: 0;
}

.cat-item .cat-title {
  flex: 1;
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: unset;
}

/* ----- 右侧内容区：子菜单固定，仅 list-scroll 滚动 ----- */
.content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 4px 20px #AEC3E533;
  padding: 18px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

/* 模板卡片 + 分页：页面唯一纵向滚动区域 */
.list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 4px;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
}

/* 顶栏居中搜索框 */
.search-box {
  width: 100%;
  height: 44px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #82AAFF;
  display: flex;
  align-items: center;
  padding: 0 6px 0 16px;
  gap: 10px;
  min-width: 0;
  justify-self: center;
}

.search-box svg {
  width: 18px;
  height: 18px;
  color: #0E285D;
}

.search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #0E214A;
}

.search-box input::placeholder {
  color: #7888AA;
}

.search-btn {
  height: 34px;
  min-width: 72px;
  padding: 0 16px;
  background: #1766F7;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.search-btn:hover {
  background: #0f56d9;
}

/* 移动端分类筛选条（默认隐藏，窄屏显示） */
.m-filter-bar {
  display: none;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.m-filter-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px 0 10px;
  border: 1px solid #D5E2F7;
  border-radius: 12px;
  background: #F5F8FF;
  color: #142956;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.m-filter-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #EAF2FF;
  color: #1468FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-filter-ico svg {
  width: 16px;
  height: 16px;
}

.m-filter-texts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.m-filter-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-filter-sub {
  font-size: 12px;
  color: #67799F;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-filter-count {
  font-size: 12px;
  font-weight: 600;
  color: #5B8DEF;
  flex-shrink: 0;
}

.m-filter-chevron {
  width: 16px;
  height: 16px;
  color: #8291AD;
  flex-shrink: 0;
}

.m-filter-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: #8291AD;
  font-weight: 500;
  white-space: nowrap;
}

.m-filter-meta strong {
  color: #1468FF;
  font-weight: 600;
}

/* 移动端分类底部抽屉 */
.m-cate-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.m-cate-sheet[hidden] {
  display: none;
}

.m-cate-mask {
  position: absolute;
  inset: 0;
  background: rgba(14, 33, 74, 0.45);
}

.m-cate-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: min(78vh, 640px);
  background: #FFFFFF;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(14, 33, 74, 0.16);
  animation: mCateSlideUp 0.22s ease-out;
}

@keyframes mCateSlideUp {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

.m-cate-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #D7E0F0;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.m-cate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #EEF2F8;
  flex-shrink: 0;
}

.m-cate-title {
  font-size: 16px;
  font-weight: 700;
  color: #0E214A;
}

.m-cate-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #8291AD;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.m-cate-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
}

.m-cate-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #142956;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.m-cate-item + .m-cate-item {
  margin-top: 2px;
}

.m-cate-item:active {
  background: #F3F7FF;
}

.m-cate-item.is-active {
  background: #EAF2FF;
  color: #1468FF;
  font-weight: 600;
}

.m-cate-name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.m-cate-num {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: #8291AD;
}

.m-cate-item.is-active .m-cate-num {
  color: #5B8DEF;
}

/* 列表工具条：左侧二级标签 + 右侧统计（固定不随列表滚动） */
.list-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 32px;
  padding-bottom: 4px;
  flex: 0 0 auto;
  background: #FFFFFF;
  z-index: 2;
  position: relative;
}

.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sub-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid #C5D4EF;
  background: #EEF3FC;
  color: #1A335F;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sub-tab:hover {
  border-color: #7AA8FF;
  background: #E3EDFF;
  color: #0E56E0;
}

.sub-tab.active {
  border-color: #1766F7;
  background: #1766F7;
  color: #FFFFFF;
  font-weight: 600;
}

.sub-tab.is-empty {
  opacity: 0.65;
}

.sub-tab-count {
  font-size: 12px;
  font-weight: 600;
  color: #4A6290;
  line-height: 1;
}

.sub-tab:hover .sub-tab-count {
  color: #1468FF;
}

.sub-tab.active .sub-tab-count {
  color: #FFFFFF;
}

.list-info {
  font-size: 14px;
  color: #8291AD;
  font-weight: 500;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  line-height: 32px;
}

.list-info strong {
  color: #1468FF;
  font-weight: 600;
}

/* 自适应卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px 27px;
  align-content: start;
}

.card {
  background: #FFFFFF;
  border-radius: 11px;
  border: 1px solid #E5EBF5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  color: inherit;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(31, 107, 255, 0.12);
  transform: translateY(-2px);
}

.card-cover {
  width: 100%;
  aspect-ratio: 337 / 213;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: #EEF2F7;
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.card:hover .card-cover img {
  transform: scale(1.04);
}

.card-cover .mock {
  width: 100%;
  height: 100%;
  display: block;
}

.card-body {
  padding: 14px 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-title {
  color: #162A52;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-code {
  color: #8291AD;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

/* mock 封面 */
.mock {
  position: relative;
  background: linear-gradient(145deg, #e8f0ff 0%, #f5f8fc 55%, #dce8fb 100%);
}

.mock-bar {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 14%;
  min-height: 22px;
  background: #fff;
  border-bottom: 1px solid #e5ebf5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4%;
}

.mock-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

.mock-bar i:nth-child(1) { background: #ff5f57; }
.mock-bar i:nth-child(2) { background: #febc2e; }
.mock-bar i:nth-child(3) { background: #28c840; }

.mock-hero {
  position: absolute;
  left: 5%;
  top: 22%;
  right: 5%;
  height: 24%;
  border-radius: 8px;
}

.mock-row {
  position: absolute;
  left: 5%;
  right: 5%;
  display: flex;
  gap: 3%;
}

.mock-row .blk {
  flex: 1;
  height: 100%;
  border-radius: 6px;
  opacity: 0.9;
}

.mock-row.r1 { top: 52%; height: 18%; }
.mock-row.r2 { top: 74%; height: 18%; }

.t-corp .mock-hero { background: linear-gradient(90deg, #1F6BFF, #5b9dff); }
.t-corp .mock-row .blk { background: #c5d9ff; }

.t-home .mock-hero { background: linear-gradient(90deg, #8b6b4a, #d4b896); }
.t-home .mock-row .blk { background: #e8d5bc; }
.t-home .mock { background: linear-gradient(145deg, #f7f0e6, #efe4d4); }

.t-edu .mock-hero { background: linear-gradient(90deg, #5b4bdb, #8b7cf0); }
.t-edu .mock-row .blk { background: #d4ceff; }
.t-edu .mock { background: linear-gradient(145deg, #f0eeff, #e4e0fb); }

.t-med .mock-hero { background: linear-gradient(90deg, #12a0a8, #5fd0c8); }
.t-med .mock-row .blk { background: #b8ebe8; }
.t-med .mock { background: linear-gradient(145deg, #e8fafa, #d4f0ef); }

.t-food .mock-hero { background: linear-gradient(90deg, #e85d04, #f48c06); }
.t-food .mock-row .blk { background: #ffd6a8; }
.t-food .mock { background: linear-gradient(145deg, #fff4e8, #ffe8d0); }

.t-estate .mock-hero { background: linear-gradient(90deg, #2d6a4f, #52b788); }
.t-estate .mock-row .blk { background: #b7e4c7; }
.t-estate .mock { background: linear-gradient(145deg, #eaf6ef, #d8efe3); }

.t-work .mock-hero { background: linear-gradient(90deg, #22223b, #4a4e69); }
.t-work .mock-row .blk { background: #c9c5d6; }
.t-work .mock { background: linear-gradient(145deg, #f2f1f6, #e4e2ec); }

.t-admin .mock-hero { background: linear-gradient(90deg, #33415c, #5c677d); }
.t-admin .mock-row .blk { background: #c5cad3; }
.t-admin .mock { background: linear-gradient(145deg, #eef0f4, #dfe3ea); }

.t-event .mock-hero { background: linear-gradient(90deg, #c9184a, #ff4d6d); }
.t-event .mock-row .blk { background: #ffb3c1; }
.t-event .mock { background: linear-gradient(145deg, #fff0f3, #ffe0e6); }

/* 空 / 错误 */
.empty-box, .error-box {
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  color: #8291AD;
  font-size: 15px;
  gap: 8px;
}

.list-scroll .empty-box {
  min-height: 280px;
}

.error-box {
  color: #c0392b;
  background: #fff5f5;
  border-radius: 12px;
  border: 1px solid #fecaca;
}

.error-box .hint {
  font-size: 13px;
  color: #9f1239;
}

/* 分页 */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  font-size: 14px;
  color: #67799F;
}

.pager .info {
  margin-right: 4px;
  color: #8291AD;
}

.pager a,
.pager span.page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #E5EBF5;
  background: #FFFFFF;
  color: #475569;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pager a:hover {
  border-color: #82AAFF;
  color: #1468FF;
  background: #F3F7FF;
}

.pager a.active,
.pager span.active {
  background: #1766F7;
  border-color: #1766F7;
  color: #FFFFFF;
  font-weight: 600;
}

.pager span.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #F8FAFC;
}

.pager span.ellipsis {
  border: 0;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}

/* 移动端：回到顶部（默认隐藏，窄屏 + 滚动后显示） */
.back-top {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #1766F7;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(23, 102, 247, 0.35);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.back-top svg {
  width: 22px;
  height: 22px;
}

.back-top.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-top:active {
  background: #0f56d9;
}

/* 窄屏 / 移动端：微信入口缩短文案 */
@media (max-width: 768px) {
  .wx-text-pc {
    display: none;
  }

  .wx-text-m {
    display: inline;
  }

  .wx-service {
    height: 36px;
    padding: 0 12px 0 8px;
    gap: 6px;
    font-size: 13px;
  }

  .wx-service .wx-ico {
    width: 20px;
    height: 20px;
  }
}

/* 平板 / 手机：侧栏改为底部抽屉选择 */
@media (max-width: 900px) {
  .back-top {
    display: flex;
  }

  .navbar {
    grid-template-columns: auto 1fr auto;
    column-gap: 12px;
    padding: 0 16px;
  }

  .page-title {
    font-size: 18px;
  }

  .main {
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  /* 隐藏左侧栏，避免占掉半屏高度 */
  .sidebar {
    display: none;
  }

  .m-filter-bar {
    display: flex;
  }

  /* 桌面统计在移动端由筛选条右侧承担 */
  .list-info {
    display: none;
  }

  .list-toolbar {
    margin-top: 0;
  }

  /* 无二级时隐藏空工具条 */
  .list-toolbar:not(:has(.sub-tab)) {
    display: none;
  }

  /* 二级标签横向滑动，单行更易点 */
  .sub-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .sub-tabs::-webkit-scrollbar {
    display: none;
  }

  .sub-tab {
    flex-shrink: 0;
  }

  .content {
    gap: 12px;
    overflow: hidden;
  }

  .m-filter-bar {
    flex-shrink: 0;
  }

  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .app {
    padding-top: 64px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .navbar {
    height: 64px;
    padding: 0 10px;
    column-gap: 8px;
  }

  .page-title {
    display: none;
  }

  .brand {
    width: 34px;
    height: 34px;
  }

  .main {
    padding: 10px;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
  }

  .content {
    padding: 12px 12px 12px;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
  }

  .search-box {
    height: 40px;
    padding: 0 4px 0 10px;
    gap: 6px;
  }

  .search-box svg {
    width: 16px;
    height: 16px;
  }

  .search-box input {
    font-size: 14px;
  }

  .search-btn {
    min-width: 56px;
    padding: 0 10px;
    font-size: 13px;
    height: 32px;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}