/**
 * 信息发布平台通用样式 (Info CSS)
 *
 * 设计原则：
 *   1. 设计令牌与 douyu-new/style/styles.css 保持一致（直接定义，避免 var 自引用循环导致变量失效）
 *   2. 直接使用主站实测值，保证子站独立部署时变量仍可用
 *   3. 仅定义信息平台特有组件（分类 tab / 信息卡片 / 图片上传 / 状态标签等），
 *      通用按钮、表单等基础元素沿用主站风格
 *
 * 设计令牌来源（douyu-new/style/styles.css :root 实测值）：
 *   --primary-color: #7180f5;
 *   --primary-dark:  #697ae4;
 *   --text-color:    #1a1a2e;
 *   --text-light:    #6b7280;
 *   --bg-light:      #f8fafc;
 *   --gradient-bg:   linear-gradient(180deg, #ffffff 0%, #e8f5e9 100%);
 *   --border-radius: 16px;
 *   --shadow:        0 5px 20px rgba(0,0,0,0.05);
 */

/* ============== 设计令牌（直接定义；勿用 var 自引用，会致变量失效） ============== */
:root {
  --primary-color: #7180f5;
  --primary-dark:  #697ae4;
  --text-color:    #1a1a2e;
  --text-light:    #6b7280;
  --bg-light:      #f8fafc;
  --white:         #fff;
  --border-radius: 16px;
  --shadow:        0 5px 20px rgba(0,0,0,0.05);
  --shadow-hover:  0 12px 32px rgba(113,128,245,0.18);
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-bg: linear-gradient(180deg, #ffffff 0%, #e8f5e9 100%);
  --info-radius:   12px;
  --info-radius-sm: 8px;
}

/* ============== 全局背景（淡绿主题：白→淡绿渐变 + 绿色光晕脉动；终点 #e8f5e9 与绿色光晕呼应，衬出信息平台弱阴影卡片） ============== */
body {
  color: var(--text-color);
  line-height: 1.7;
  background: var(--gradient-bg);
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: backgroundPulse 15s ease-in-out infinite;
}

@keyframes backgroundPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.1); }
}

/* 前庭敏感 / 省电用户：关闭脉冲动效（主站未做，顺手补守护） */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ============== 容器 ============== */
.info-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ============== 分类标签栏 ============== */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.cat-tab {
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--cat-bg, var(--bg-light));
  color: var(--cat-fg, var(--text-light));
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

/* hover：几何上浮反馈，不强行染色（分类按钮 hover 保留各自分类色，避免紫 hover 盖掉分类辨识） */
.cat-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.cat-tab.active {
  background: var(--cat-on, var(--primary-color));
  color: var(--white);
  box-shadow: 0 4px 14px var(--cat-sh, rgba(113, 128, 245, 0.3));
}

/* ============== 分类语义色（按 data-cat 注入 CSS 变量；首页 .cat-tab 与列表卡片 .meta-cat 共用） ============== */
/*
 * 默认态 = 浅底(--cat-bg) + 深字(--cat-fg)；tab 选中态 = 实底(--cat-on) + 白字。
 * 「全部」按钮 data-cat="" 与无分类老数据不命中任意规则 → 变量缺失 → 上面 var() 第二参数兜底回紫主色，
 * 故「全部」与未分类卡片视觉与改动前完全一致。
 * 6 色相互相拉开（绿/蓝/橙/青/品红/灰），并避开主色紫与全局淡绿背景；
 * --cat-on 取 -700 深阶以保白字对比度 ≥ WCAG AA（亮色实底配白字的通病由此规避）。
 */
.cat-tab[data-cat="life"],       .meta-cat[data-cat="life"]       { --cat-bg:#e7f6ec; --cat-fg:#2e7d32; --cat-on:#2e7d32; --cat-sh:rgba(46,125,50,.28); }
.cat-tab[data-cat="recruit"],    .meta-cat[data-cat="recruit"]    { --cat-bg:#e6f0ff; --cat-fg:#1565c0; --cat-on:#1565c0; --cat-sh:rgba(21,101,192,.28); }
.cat-tab[data-cat="house"],      .meta-cat[data-cat="house"]      { --cat-bg:#ffefe0; --cat-fg:#d84315; --cat-on:#d84315; --cat-sh:rgba(216,67,21,.28); }
.cat-tab[data-cat="secondhand"], .meta-cat[data-cat="secondhand"] { --cat-bg:#e0f5f5; --cat-fg:#00838f; --cat-on:#00838f; --cat-sh:rgba(0,131,143,.28); }
.cat-tab[data-cat="dating"],     .meta-cat[data-cat="dating"]     { --cat-bg:#ffe6ee; --cat-fg:#c2185b; --cat-on:#c2185b; --cat-sh:rgba(194,24,91,.28); }
.cat-tab[data-cat="other"],      .meta-cat[data-cat="other"]      { --cat-bg:#f0f0f0; --cat-fg:#616161; --cat-on:#757575; --cat-sh:rgba(0,0,0,.15); }

/* ============== 地区选择器（首页筛选区 + 发布表单共用） ============== */
/*
 * 📍 图标 + 省/市并排的统一控件：首页 #regionFilter 与发布页 .form-group 内复用。
 * select 保留原生交互（含级联回填），本样式仅统一视觉：紫框圆角、平分宽度、
 * disabled 灰化。specificity 高于 .form-group select，故其 width:100% 被覆盖为平分。
 */

/* 首页筛选区容器：picker 本身透明（select 各自带框），仅控制与下方列表间的留白 */
.region-filter {
  margin-bottom: 20px;
}

/* 容器：图标 + 双 select 横向排列 */
.region-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.region-picker-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.region-picker-selects {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* 单个下拉：平分宽度；隐藏原生箭头用紫色 caret，与平台风格统一 */
.region-picker .region-select {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 11px 30px 11px 12px;
  border: 2px solid rgba(113, 128, 245, 0.2);
  border-radius: var(--info-radius);
  font-size: 15px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--text-color);
  transition: border-color 0.25s, box-shadow 0.25s;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.region-picker .region-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(113, 128, 245, 0.1);
}

/* 未选省时市下拉灰化（视觉告知不可用，可用性由 JS disabled 控制） */
.region-picker .region-select:disabled {
  background-color: var(--bg-light);
  color: var(--text-light);
  border-color: rgba(0, 0, 0, 0.06);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ============== 热门城市快捷筛选（首页地区筛选区内） ============== */
/*
 * 级联 select 下方的一排城市 chip，点击即按市级筛选（见 index.js applyRegion）。
 * flex-wrap 自动换行：城市天然适合一览全量，优先可读性而非省纵向空间。
 * chip 配色沿用 .cat-tab（紫主色圆角、hover 浅紫、active 实底白字），与分类 tab 视觉一致。
 * 容器整体套一层浅紫渐变 panel（呼应主色，详见 line 1128 同款渐变先例），让热门城市区与
 * 上方 select / 列表分层，成为独立快捷入口；chip 浅灰底在浅紫上近白，对比清晰。
 */
.hot-cities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(113, 128, 245, 0.07) 0%, rgba(113, 128, 245, 0.02) 100%);
  border-radius: var(--info-radius);
}

.hot-cities-label {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
}

.hot-city {
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--bg-light);
  color: var(--text-light);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hot-city:hover {
  color: var(--primary-color);
  background: rgba(113, 128, 245, 0.08);
}

.hot-city.active {
  background: var(--primary-color);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(113, 128, 245, 0.3);
}

/* ============== 信息卡片 ============== */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.post-card {
  background: var(--white);
  border-radius: var(--info-radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.post-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-light);
}

.post-card-meta .meta-cat {
  background: var(--cat-bg, rgba(113, 128, 245, 0.1));
  color: var(--cat-fg, var(--primary-color));
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.post-card-meta .meta-publisher {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--info-radius-sm);
  object-fit: cover;
  float: right;
  margin-left: 14px;
}

/* ============== 分页 ============== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}

.page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(113, 128, 245, 0.2);
  border-radius: var(--info-radius-sm);
  background: var(--white);
  color: var(--text-color);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.page-btn.active {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

.page-btn:disabled {
  color: #c0c0c0;
  background: var(--bg-light);
  cursor: not-allowed;
  border-color: transparent;
}

/* ============== 空状态 / 加载 / 错误 ============== */
.empty-state,
.loading,
.error-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
  font-size: 15px;
}

.loading::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border: 2.5px solid rgba(113, 128, 245, 0.2);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  vertical-align: middle;
  animation: infoSpin 0.7s linear infinite;
}

@keyframes infoSpin {
  to { transform: rotate(360deg); }
}

.error-state .retry-btn {
  margin-top: 14px;
  padding: 8px 22px;
  border: none;
  border-radius: var(--info-radius-sm);
  background: var(--primary-color);
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.error-state .retry-btn:hover {
  background: var(--primary-dark);
}

/* ============== 状态标签 ============== */
.status-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.st-pending  { background: #fef3c7; color: #92400e; } /* 黄 */
.status-tag.st-approved { background: #d1fae5; color: #065f46; } /* 绿 */
.status-tag.st-rejected { background: #fee2e2; color: #991b1b; } /* 红 */
.status-tag.st-deleted  { background: #e5e7eb; color: #111827; } /* 灰底黑字 */

/* ============== 表单 ============== */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid rgba(113, 128, 245, 0.2);
  border-radius: var(--info-radius);
  font-size: 15px;
  background: var(--white);
  color: var(--text-color);
  transition: border-color 0.25s, box-shadow 0.25s;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(113, 128, 245, 0.1);
}

.form-group textarea {
  min-height: 160px;
  resize: vertical;
}

.form-hint {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 6px;
}

/* ============== 图片上传 ============== */
.image-uploader {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.img-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: var(--info-radius-sm);
  overflow: hidden;
  background: var(--bg-light);
}

.img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-thumb .img-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-thumb .img-del:hover {
  background: rgba(0, 0, 0, 0.8);
}

.img-add {
  width: 100px;
  height: 100px;
  border: 2px dashed rgba(113, 128, 245, 0.35);
  border-radius: var(--info-radius-sm);
  background: rgba(113, 128, 245, 0.05);
  color: var(--primary-color);
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.img-add:hover {
  border-color: var(--primary-color);
  background: rgba(113, 128, 245, 0.1);
}

.img-add input[type="file"] {
  display: none;
}

/* ============== 按钮 ============== */
.btn-primary,
.btn-danger {
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(113, 128, 245, 0.3);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(113, 128, 245, 0.4);
}

.btn-danger {
  background: #ef4444;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
  background: #dc2626;
  transform: translateY(-2px);
}

.btn-primary:disabled,
.btn-danger:disabled {
  background: #c0c0c0;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ============== Toast 提示 ============== */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: var(--info-radius);
  background: rgba(30, 30, 46, 0.92);
  color: #fff;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.toast-success { background: rgba(6, 95, 70, 0.95); }
.toast.toast-error   { background: rgba(153, 27, 27, 0.95); }

/* ============== 页头 / 页脚（子站通用） ============== */
.info-header {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 0;
  z-index: 100;
}

.info-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.info-header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.info-header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.info-header-link {
  font-size: 14px;
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s;
}

.info-header-link:hover {
  color: var(--primary-color);
}

/* 当前页命中态（renderHeader activeNav 命中项） */
.info-header-link.active {
  color: var(--primary-color);
  font-weight: 600;
}

/* 登录态头像入口 */
.info-header-user {
  display: flex;
  align-items: center;
}

.info-header-avatar-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============== 底部页脚（法律 / 备案 / 联系我们） ============== */
/* 内容静态，硬编码在各页面（不依赖 JS 渲染）。来源对齐 douyu-new/footer。 */
.info-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 28px 0 26px;
  color: var(--text-light);
  font-size: 13px;
}

.info-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.info-footer-brand .info-footer-company {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 4px;
}

.info-footer-brand .info-footer-copy {
  margin: 0;
}

.info-footer-cols {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.info-footer-col h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px;
}

.info-footer-col a {
  display: block;
  color: var(--text-light);
  margin-bottom: 8px;
  text-decoration: none;
  transition: color 0.2s;
}

.info-footer-col a:last-child {
  margin-bottom: 0;
}

.info-footer-col a:hover {
  color: var(--primary-color);
}

@media (max-width: 600px) {
  .info-footer-inner {
    flex-direction: column;
    gap: 18px;
  }
  .info-footer-cols {
    gap: 28px;
  }
}

/* ============== 详情页 ============== */
.post-detail {
  background: var(--white);
  border-radius: var(--info-radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
}

.post-detail .post-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 14px;
  line-height: 1.4;
}

.post-detail .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-light);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 22px;
}

.post-detail .post-meta .meta-cat {
  background: rgba(113, 128, 245, 0.1);
  color: var(--primary-color);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 正文保留换行（与 detail.js escapeHtml 配合，安全展示多行文本） */
.post-detail .post-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 24px;
}

.post-detail .post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.post-detail .post-image {
  width: 100%;
  max-width: 320px;
  border-radius: var(--info-radius-sm);
  box-shadow: var(--shadow);
  cursor: zoom-in;
}

.post-detail .post-contact {
  padding: 14px 18px;
  background: var(--bg-light);
  border-radius: var(--info-radius-sm);
  font-size: 15px;
  color: var(--text-color);
}

.post-detail .post-contact-label {
  font-weight: 600;
  color: var(--primary-color);
}

/* ============== 法律声明独立页（disclaimer.html） ============== */
/* 复用 .post-detail 卡片容器 + .post-title 标题；以下为法律文书正文排版 */
.legal-doc .legal-intro {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 20px;
}

.legal-doc h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.legal-doc h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin: 22px 0 10px;
}

.legal-doc p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color);
  margin: 0 0 14px;
}

/* 法律文书正文链接：与全站主题色统一（隐私政策含 mailto 等链接） */
.legal-doc a {
  color: var(--primary-color);
  text-decoration: none;
}

.legal-doc a:hover {
  text-decoration: underline;
}

.legal-doc ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal-doc ol li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 10px;
}

/* 二级隐私条款：原文为全角括号编号（1）（2）… 用计数器还原 */
.legal-doc ol.legal-sub {
  list-style: none;
  counter-reset: legal-sub;
  padding-left: 4px;
}

.legal-doc ol.legal-sub li {
  counter-increment: legal-sub;
}

.legal-doc ol.legal-sub li::before {
  content: "（" counter(legal-sub) "）";
  font-weight: 500;
  margin-right: 4px;
}

/* ============== 响应式 ============== */
@media (max-width: 640px) {
  .info-container {
    padding: 16px 12px 40px;
  }

  .category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
    padding-bottom: 4px;
  }

  .cat-tab {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 13px;
  }

  /* 地区选择器：窄屏收紧间距与字号，省/市保持并排 */
  .region-filter {
    margin-bottom: 16px;
  }

  .region-picker {
    gap: 6px;
  }

  .region-picker-selects {
    gap: 8px;
  }

  .region-picker-icon {
    font-size: 16px;
  }

  .region-picker .region-select {
    padding: 10px 28px 10px 10px;
    font-size: 14px;
  }

  /* 热门城市：窄屏收紧间距/字号/内边距，仍换行铺满 */
  .hot-cities {
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
  }

  .hot-city {
    padding: 4px 10px;
    font-size: 12px;
  }

  .post-card {
    padding: 14px;
  }

  .post-card-title {
    font-size: 15px;
  }

  .post-thumb {
    width: 64px;
    height: 64px;
  }

  .img-thumb,
  .img-add {
    width: 78px;
    height: 78px;
  }

  .info-header-title {
    font-size: 17px;
  }

  .info-header-nav {
    gap: 10px;
  }

  .post-detail {
    padding: 18px 16px;
  }

  .post-detail .post-title {
    font-size: 19px;
  }

  .post-detail .post-image {
    max-width: 100%;
  }
}

/* ============== 会员支付弹窗 ============== */

/* 全屏半透明遮罩 */
.member-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.member-modal-mask.active {
  opacity: 1;
}

/* 居中卡片 */
.member-modal {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 28px 24px 24px;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.member-modal-mask.active .member-modal {
  transform: translateY(0);
}

.member-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 50%;
}

.member-modal-close:hover {
  background: var(--bg-light);
  color: var(--text-color);
}

.member-modal-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
}

.member-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 4px;
}

.member-modal-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-color);
}

.member-modal-divider {
  height: 1px;
  background: var(--bg-light);
  margin: 16px 0;
}

.member-modal-desc {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 16px;
}

.member-modal-method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--bg-light);
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--text-color);
}

.member-modal-alipay-icon {
  font-size: 18px;
}

/* 开通主按钮（沿用 .btn-primary 风格，加全宽） */
.member-btn-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(113, 128, 245, 0.3);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}

.member-btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(113, 128, 245, 0.4);
}

.member-btn-primary:disabled {
  background: #c0c0c0;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* 弹窗打开时禁止背景滚动 */
body.modal-open {
  overflow: hidden;
}

/* ============== 支付落地页 ============== */

.pay-status {
  padding: 24px 0;
  min-height: 200px;
}

.pay-result-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.pay-result-tip {
  font-size: 16px;
  color: var(--text-color);
  line-height: 1.6;
}

.pay-result-box .info-header-link {
  font-size: 14px;
  color: var(--text-light);
}

/* ============== 会员中心页 ============== */

/* 三区块通用间距（状态卡 / 用量 / 对比表容器） */
.member-section {
  margin-bottom: 28px;
}

.member-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 14px;
}

/* ---- 状态卡 ---- */
.member-status-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 22px 26px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(113, 128, 245, 0.08);
  background: linear-gradient(135deg, rgba(113, 128, 245, 0.06) 0%, var(--white) 60%);
}

/* 普通会员（未开通）淡化处理 */
.member-status-card.is-normal {
  background: var(--white);
}

.member-status-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}

.member-status-label {
  font-size: 14px;
  color: var(--text-light);
}

.member-status-level {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-color);
}

.member-status-end {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 14px;
}

.member-status-quota {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--text-light);
}

.member-status-quota b {
  color: var(--primary-color);
  font-weight: 600;
}

/* ---- 当日用量 ---- */
.usage-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.usage-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.usage-row-name {
  font-weight: 600;
  color: var(--text-color);
}

.usage-row-num {
  color: var(--text-light);
  font-size: 13px;
}

/* 进度条（配色呼应 .cat-tab.active 的紫色调） */
.usage-bar {
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background: var(--bg-light);
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 50px;
  background: var(--primary-color);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 接近上限（>=90%）变橙警示 */
.usage-bar-fill.is-near-full {
  background: #f59e0b;
}

/* ---- 4 档对比表 ---- */
.plans-table-wrap {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.plans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.plans-table th,
.plans-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.plans-table th {
  background: var(--bg-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}

.plans-table tbody tr:last-child td {
  border-bottom: none;
}

/* 当前等级行高亮 */
.plans-table tbody tr.is-current {
  background: rgba(113, 128, 245, 0.05);
}

.plan-td-name {
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
}

.plan-current-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--primary-color);
  color: var(--white);
}

.plan-td-price {
  white-space: nowrap;
}

.plan-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-color);
}

/* 原价划线 */
.plan-price-orig {
  margin-left: 6px;
  font-size: 13px;
  color: var(--text-light);
  text-decoration: line-through;
}

.plan-price-free {
  font-size: 14px;
  color: var(--text-light);
}

/* ---- 开通/升级按钮 ---- */
.plan-btn {
  padding: 8px 22px;
  border: none;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(113, 128, 245, 0.3);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  white-space: nowrap;
}

.plan-btn:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(113, 128, 245, 0.4);
}

.plan-btn:disabled {
  background: #c0c0c0;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* normal 行的静态标签（不可购买） */
.plan-btn-static {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--bg-light);
  color: var(--text-light);
  font-size: 13px;
  box-shadow: none;
}

/* ---- 会员中心响应式 ---- */
@media (max-width: 640px) {
  .member-status-card,
  .usage-card {
    padding: 16px;
  }

  .member-status-level {
    font-size: 19px;
  }

  .member-status-quota {
    gap: 14px;
    font-size: 12px;
  }

  .plans-table th,
  .plans-table td {
    padding: 11px 12px;
  }

  .plan-btn {
    padding: 7px 16px;
    font-size: 13px;
  }
}

/* =====================================================================
   个人中心 (profile.html)
   布局令牌：内容列收窄居中，卡片化分区，沿用 :root 设计令牌。
   ===================================================================== */

/* 内容列：单列窄宽，避免 1100px 容器在资料页留白过大 */
.profile-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 区块通用卡片 */
.profile-section {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.profile-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

/* 区块内的加载/失败状态收敛（全局 .loading/.error-state 的 60px padding 在窄卡片里过高） */
.profile-section .loading,
.profile-section .error-state {
  padding: 18px 12px;
  font-size: 14px;
  color: var(--text-light);
}

/* ---- 资料卡 ---- */
.profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 占位头像（昵称首字） */
.profile-avatar-default {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  background: var(--gradient-primary);
}

.profile-info {
  min-width: 0;            /* 允许 flex 子项收缩，防长昵称撑破 */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-nickname {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 会员状态卡（与 member-center.html 的 .member-status-card 视觉一致） ---- */
.profile-section .member-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  flex-wrap: wrap;
}

.member-status-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* 等级标签：大号主色（与 member-center.html 的 .member-status-level 规则一致，normal 灰化） */
.member-level {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.2;
}

.member-level-normal { color: var(--text-light); }

.member-status-endtime {
  font-size: 13px;
  color: var(--text-light);
}

/* 进入会员中心按钮：右对齐、不撑满 */
.member-goto-center {
  padding: 10px 22px;
  font-size: 14px;
  flex-shrink: 0;
}

/* ---- 我的发布：卡片式入口（替代原"标题+全宽蓝按钮"） ---- */
.profile-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  margin: -4px -4px;        /* 抵消 section padding 内的轻微收紧，扩大可点区 */
  padding: 4px 4px;
  border-radius: var(--info-radius-sm);
  transition: background 0.2s;
}

.profile-entry:hover {
  background: var(--bg-light);
}

.profile-entry-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--info-radius-sm);
  background: rgba(113, 128, 245, 0.1);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.profile-entry-body {
  flex: 1;
  min-width: 0;
}

.profile-entry-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.profile-entry-desc {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 2px;
}

.profile-entry-arrow {
  color: var(--text-light);
  font-size: 18px;
  flex-shrink: 0;
}

/* ---- 退出登录 ---- */
.profile-logout {
  margin-top: 8px;
  text-align: center;
}

/* 弱化描边按钮（语义：危险但低频操作，不抢焦点） */
.btn-secondary {
  padding: 11px 32px;
  background: var(--white);
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-secondary:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.04);
}

.btn-secondary:disabled {
  color: var(--text-light);
  cursor: not-allowed;
}

/* ---- profile 响应式 ---- */
@media (max-width: 640px) {
  .profile-container {
    padding: 20px 14px 56px;
    gap: 12px;
  }

  .profile-section {
    padding: 16px;
  }

  .profile-avatar {
    width: 52px;
    height: 52px;
  }

  .profile-nickname {
    font-size: 17px;
  }

  /* 会员卡窄屏：信息与按钮上下堆叠 */
  .profile-section .member-status-card {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .member-goto-center {
    width: 100%;
    text-align: center;
  }

  .member-level {
    font-size: 20px;
  }
}