/* ========== 设计行 - 全局样式 ========== */
:root {
  --primary: #0891B2;
  --primary-light: #67E8F9;
  --primary-dark: #0E7490;
  --accent: #F59E0B;
  --success: #10B981;
  --danger: #EF4444;
  --bg: #F1F5F9;
  --white: #FFFFFF;
  --border: #E2E8F0;
  --text: #0F172A;
  --text-secondary: #1E293B;
  --text-light: #475569;
  --sidebar-width: 200px;
  --header-height: 60px;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.10);
  /* 全局正文字体栈：macOS/iOS→PingFang SC，Windows→微软雅黑，安卓→Noto Sans SC */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

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

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
input, textarea, select { font-family: inherit; outline: none; }

/* ========== 顶部导航 ========== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 1000;
  box-shadow: var(--shadow);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  margin-right: 40px;
  white-space: nowrap;
}

.header__logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 900;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
}

.header__nav-item {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
  white-space: nowrap;
}

.header__nav-item:hover,
.header__nav-item.active {
  color: var(--primary);
  background: rgba(8, 145, 178, 0.08);
}

/* 顶部导航下拉卷栏 */
.header__nav-dropdown {
  position: relative;
  display: inline-flex;
  z-index: 1100;
}
.header__nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  padding: 6px 0;
  z-index: 1200;
  margin-top: 4px;
}
.header__nav-dropdown-menu a {
  display: block;
  padding: 9px 18px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.header__nav-dropdown-menu a:hover {
  background: #F0F9FF;
  color: var(--primary);
}
.header__nav-dropdown:hover .header__nav-dropdown-menu {
  display: block;
}
.header__nav-dropdown > .header__nav-item::after {
  content: "▾";
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.5;
}

/* HOT 标签 */
.hot-badge {
  display: inline-block;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

/* NEW 标签 */
.new-badge {
  display: inline-block;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

/* 侧栏标签右对齐 */
.sidebar__item .hot-badge,
.sidebar__item .new-badge {
  margin-left: auto;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-left: auto;
  flex-shrink: 0;
}

.header__search {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  width: 360px;
  min-width: 160px;
  flex: 0 1 360px;
  margin-left: 16px;
  transition: border-color 0.2s;
}

.header__search:focus-within {
  border-color: var(--primary);
}

.header__search input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.header__search svg {
  width: 16px;
  height: 16px;
  color: var(--text-light);
  flex-shrink: 0;
}

.header__btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.header__btn--outline {
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
}

.header__btn--outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.header__btn--primary {
  background: var(--primary);
  color: white;
}

.header__btn--primary:hover {
  background: var(--primary-dark);
}

.header__btn--accent {
  background: linear-gradient(135deg, #F59E0B, #F97316);
  color: white;
  font-weight: 600;
}

.header__btn--dark {
  background: #1E293B;
  color: white;
  font-weight: 600;
}

.header__btn--dark:hover {
  background: #334155;
}

.header__user-welcome {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.header__user-welcome b {
  color: var(--primary);
  font-weight: 700;
}

.header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ========== 登录态：充值/VIP/上传/头像下拉 ========== */
.header__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  white-space: nowrap;
}
.header__action-btn:not(:first-child) { margin-left: -8px; }
.header__action-btn:hover { color: var(--primary); }
.header__vip-btn svg { margin-right: 3px; }
.header__user-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s;
}
.header__user-trigger:hover { background: rgba(0,0,0,.04); }
.header__avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header__username {
  font-size: 13px; font-weight: 600; color: #1E293B; line-height: 1.2;
}
.header__vip-badge {
  font-size: 10px; font-weight: 700; color: #F59E0B;
  background: linear-gradient(135deg,#FEF3C7,#FDE68A);
  border: 1px solid #FCD34D;
  border-radius: 6px; padding: 1px 5px; line-height: 1.4; flex-shrink: 0;
}

/* ---- 用户下拉弹窗 ---- */
.header__user-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: -12px;
  width: 380px;
  /* v3.293：在头像与卡片的 8px 空隙处加透明桥接层，
     让鼠标从头像移向卡片内容途中始终处于悬停区域，不会被判定为离开而提前关闭 */
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  z-index: 1000;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: all .18s ease;
  pointer-events: none;
  overflow: hidden;
}
.header__user-dropdown.show {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* v3.293：透明桥接层，覆盖头像与卡片之间的 8px 空隙（含 -12px 水平偏移），
   鼠标移动途中落在桥接层上视为仍在卡片内，不会触发 mouseleave 关闭 */
.header__user-dropdown::before {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
  background: transparent;
}
.hud-top {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px 12px;
  position: relative;
}
.hud-avatar-lg {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #fff;
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hud-info { flex: 1; min-width: 0; }
.hud-name { font-size: 17px; font-weight: 700; color: #1E293B; line-height: 1.35; }
.hud-id { font-size: 12px; color: #94A3B8; margin-top: 2px; }
.hud-vip-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.hud-vip-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; color: #B45309;
  background: linear-gradient(135deg,#FEF3C7,#FDE68A);
  border: 1px solid #FCD34D;
  border-radius: 6px; padding: 1px 7px; line-height: 1.5;
}
.hud-vip-tag svg { flex-shrink: 0; }
.hud-expiry { font-size: 12px; color: #94A3B8; }
.hud-logout {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; color: #94A3B8; border: none;
  background: none; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: all .15s; flex-shrink: 0;
}
.hud-logout:hover { color: #EF4444; background: #FEF2F2; }

/* 资产统计条 */
.hud-stats-bar {
  display: flex; align-items: center; justify-content: space-around;
  margin: 0 14px; padding: 14px 10px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-radius: 10px; gap: 16px;
}
.hud-stat-item { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 4px; }
.hud-stat-val { font-size: 22px; font-weight: 400; color: #1E293B; line-height: 1.2; }
.hud-stat-label { font-size: 13px; font-weight: 400; color: #1E293B; }
.hud-assets-btn {
  margin-left: 0; flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 7px; font-size: 13px; font-weight: 600;
  background: #1E293B; color: #fff; border: none; cursor: pointer;
  transition: background .15s;
}
.hud-assets-btn:hover { background: #334155; }

/* 底部导航 */
.hud-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #F1F5F9;
}
.hud-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 0; text-decoration: none;
  font-size: 15px; color: #94A3B8;
  transition: color .15s;
}
.hud-nav-item:hover { color: var(--primary); }
.hud-nav-num { font-size: 16px; font-weight: 400; color: #1E293B; line-height: 1.2; }

/* ========== 左侧导航 ========== */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--white);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 900;
  padding: 12px 0;
  font-family: var(--font-sans);
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.sidebar__group {
  padding: 6px 0;
}

.sidebar__group-title {
  padding: 8px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 15px;
  color: var(--text-secondary);
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.sidebar__item:hover {
  background: rgba(8, 145, 178, 0.04);
  color: var(--primary);
}

.sidebar__item.active {
  background: rgba(8, 145, 178, 0.08);
  color: var(--primary);
  font-weight: 600;
}

.sidebar__item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

.sidebar__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar__badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
}

/* ========== 主内容区 ========== */
.main {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  padding: 20px 24px;
}

/* ========== 轮播图 ========== */
.carousel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-lg);
  width: calc(100% + 1px);
  aspect-ratio: 16 / 5;
  max-height: 320px;
  background: #eee;
}

.carousel__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.carousel__slide.active { opacity: 1; }

.carousel__slide-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.carousel__slide-title {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 8px;
}

.carousel__slide-desc {
  font-size: 16px;
  opacity: 0.9;
}

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

.carousel__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.carousel__dot.active {
  background: white;
  width: 24px;
  border-radius: 5px;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  border: none;
  line-height: 0;
}

.carousel__arrow:hover { background: rgba(0,0,0,0.5); transform: translateY(-50%) scale(1.05); }
.carousel__arrow--prev { left: 24px; }
.carousel__arrow--next { right: 24px; }

/* ========== 筛选菜单 ========== */
.filter-bar {
  background: var(--white);
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.filter-bar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.filter-bar__row + .filter-bar__row {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 8px;
}

.filter-bar__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 56px;
}

.filter-bar__tags {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
}

.filter-tag {
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-tag:hover {
  color: var(--primary);
  border-color: var(--primary-light);
  background: rgba(8, 145, 178, 0.04);
}

.filter-tag.active {
  color: white;
  background: var(--primary);
  border-color: var(--primary);
}

/* ========== 资源卡片网格 ========== */
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title__more {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-light);
  cursor: pointer;
}

.section-title__more:hover { color: var(--primary); }

.resource-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.resource-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.resource-card__thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: #f1f5f9;
  position: relative;
  overflow: hidden;
}

.resource-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text-light);
}

.resource-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resource-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.resource-card__badge--vip {
  background: linear-gradient(135deg, #F59E0B, #F97316);
  color: white;
}

.resource-card__badge--pay {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: white;
}

.resource-card__badge--points {
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: white;
}

.resource-card__body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resource-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.4em;
  margin-bottom: 6px;
}

.resource-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-light);
  margin-top: auto;
}

.resource-card__price {
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

.resource-card__price--free {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  line-height: 1.4;
}
.resource-card__price--vip { color: var(--accent); }
.resource-card__price--pay {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  gap: 3px;
  line-height: 1.4;
}
.resource-card__price--points {
  background: linear-gradient(135deg, #0891B2, #0E7490);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  gap: 3px;
  line-height: 1.4;
}

/* 价格标签内文字（融入父级 badge，无需独立背景） */
.price-label {
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}
.price-label--points {
  /* 继承父级蓝色 */
}

/* ========== 登录页面 ========== */
.login-page {
  min-height: 100vh;
  display: flex;
  background: #f0f2f5;
}

.login-page__left {
  flex: 1;
  background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 40px;
}

.login-page__logo {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 16px;
}

.login-page__slogan {
  font-size: 20px;
  opacity: 0.9;
  text-align: center;
  margin-bottom: 8px;
}

.login-page__desc {
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
}

.login-page__right {
  width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: white;
}

.login-box {
  width: 100%;
  max-width: 360px;
}

.login-box__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.login-box__subtitle {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 32px;
}

.login-box__tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

.login-box__tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  background: none;
}

.login-box__tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.login-box__input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 16px;
  transition: border-color 0.2s;
}

.login-box__input:focus {
  border-color: var(--primary);
}

.login-box__input-wrap {
  position: relative;
}

.login-box__input-wrap .login-box__input { padding-right: 44px; }

.login-box__eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
}

.login-box__btn {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
}

.login-box__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--text-light);
  font-size: 12px;
}

.login-box__divider::before,
.login-box__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-box__social {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.login-box__social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.login-box__social-btn:hover {
  border-color: var(--primary);
  background: rgba(8, 145, 178, 0.04);
}

.login-box__footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
}

.login-box__footer a {
  color: var(--primary);
  font-weight: 500;
}

/* ========== VIP/会员页面 ========== */
.vip-page {
  padding: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.vip-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
  border-radius: 16px;
  padding: 48px;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.vip-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
}

.vip-hero__title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
}

.vip-hero__desc {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 32px;
}

.vip-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.vip-plan {
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  border: 2px solid var(--border);
  transition: all 0.3s;
  position: relative;
}

.vip-plan:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-lg);
}

.vip-plan--recommended {
  border-color: var(--primary);
  transform: scale(1.05);
}

.vip-plan--recommended::before {
  content: '推荐';
  position: absolute;
  top: -1px;
  right: 24px;
  background: var(--primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 0 0 8px 8px;
}

.vip-plan__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.vip-plan__price {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}

.vip-plan__price-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light);
}

.vip-plan__features {
  margin: 24px 0;
  text-align: left;
}

.vip-plan__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.vip-plan__feature svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}

.vip-plan__btn {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background: var(--primary);
  color: white;
  transition: all 0.2s;
}

.vip-plan__btn:hover {
  background: var(--primary-dark);
}

/* ========== 上传页面 ========== */
.upload-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.upload-form__section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.upload-form__section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-form__row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.upload-form__col {
  flex: 1;
}

.upload-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.upload-form__input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.2s;
}

.upload-form__input:focus {
  border-color: var(--primary);
}

.upload-form__textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  transition: border-color 0.2s;
}

.upload-form__textarea:focus {
  border-color: var(--primary);
}

.upload-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-dropzone:hover {
  border-color: var(--primary);
  background: rgba(8, 145, 178, 0.02);
}

.upload-dropzone__icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: var(--text-light);
}

.upload-dropzone__text {
  font-size: 14px;
  color: var(--text-secondary);
}

.upload-dropzone__hint {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 8px;
}

/* ========== 用户中心 ========== */
.user-center {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

.user-center__header {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.user-center__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-center__info h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.user-center__info p {
  font-size: 13px;
  color: var(--text-light);
}

.user-center__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.user-center__stat {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.user-center__stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
}

.user-center__stat-label {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
}

/* ========== 提现页面 ========== */
.withdraw-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
}

.withdraw-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.withdraw-card__balance {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-radius: 12px;
  margin-bottom: 24px;
}

.withdraw-card__balance-label {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.withdraw-card__balance-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--success);
}

/* ========== 弹窗 ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  width: 90%;
  max-width: 480px;
  transform: translateY(20px);
  transition: transform 0.3s;
  max-height: 80vh;
  overflow-y: auto;
}

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

.modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 18px;
  color: var(--text-light);
}

/* ========== 支付弹窗 ========== */
.pay-modal__methods {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.pay-modal__method {
  flex: 1;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.pay-modal__method.active {
  border-color: var(--primary);
  background: rgba(8, 145, 178, 0.04);
}

.pay-modal__method-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.pay-modal__method-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.pay-modal__qrcode {
  text-align: center;
  padding: 24px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 20px;
}

.pay-modal__qrcode-placeholder {
  width: 200px;
  height: 200px;
  margin: 0 auto 12px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-light);
  border: 1px solid var(--border);
}

/* ========== 底部 ========== */
.footer {
  margin-left: var(--sidebar-width);
  background: white;
  border-top: 1px solid var(--border);
  padding: 32px 24px 20px;
  position: relative;
  z-index: 1;
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 36px;
  padding: 0 48px 0 76px;
}

/* 平台介绍（最左） */
.footer__intro { flex: 0 0 auto; min-width: 0; max-width: 500px; }
.footer__intro .footer__brand {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}
.footer__intro p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.9;
  margin: 0;
}

/* 联系客服按钮（中） */
.footer__cs { position: relative; flex-shrink: 0; align-self: center; margin-left: 68px; }
.footer__cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0891B2, #0E7490);
  border: none;
  cursor: pointer;
  transition: opacity .2s;
}
.footer__cs-btn:hover { opacity: .88; }
.footer__cs-qr {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 180px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 50;
}
.footer__cs:hover .footer__cs-qr,
.footer__cs.open .footer__cs-qr { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.footer__cs-qr img { width: 100%; height: auto; border-radius: 8px; display: block; }
.footer__cs-qr p { margin: 8px 0 0; font-size: 12px; color: var(--text-light); line-height: 1.5; }
.footer__cs-time {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #94A3B8;
  text-align: center;
  white-space: nowrap;
}

/* 公众号二维码（右）*/
.footer__gzh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}
.footer__gzh img {
  width: 96px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.footer__gzh span {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.footer__gzh small {
  font-size: 11px;
  color: #94A3B8;
  white-space: nowrap;
}

/* 三组链接（每列两行对齐，与平台介绍拉开间距）*/
.footer__links { display: flex; align-items: flex-start; gap: 80px; flex-shrink: 0; margin-top: 28px; margin-left: 64px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer__col a {
  font-size: 14px;
  color: var(--text-light);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}
.footer__col a:hover { color: var(--primary); }

.footer__bottom {
  background: white;
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
  position: relative;
  z-index: 1;
}
/* v3.487：手机端每个页面统一隐藏白色备案信息栏（© + ICP + 电信 + 公安），
   首页精选素材下方的 .mh5-icp 备案块单独保留 */
@media (max-width: 768px) {
  .footer__bottom { display: none; }
}

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

.pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination__btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(8, 145, 178, 0.04);
}

.pagination__btn--active {
  color: white;
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}

.pagination__btn--active:hover {
  color: white;
  background: var(--primary-dark);
}

.pagination__btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination__btn--disabled:hover {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--white);
}

.pagination__ellipsis {
  color: var(--text-light);
  font-size: 14px;
  padding: 0 4px;
}

/* ========== 响应式 ========== */
@media (max-width: 1200px) {
  .resource-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 992px) {
  .resource-grid { grid-template-columns: repeat(4, 1fr); }
  .vip-plans { grid-template-columns: 1fr; }
  .footer__inner { flex-wrap: wrap; gap: 24px; justify-content: center; text-align: center; }
  .footer__intro { text-align: center; flex: 1 1 100%; }
  .footer__links { justify-content: center; gap: 28px; }
  .footer__gzh, .footer__cs { order: -1; }
}

@media (max-width: 1100px) {
  .header__btn--accent { display: none; }
}
@media (max-width: 900px) {
  .header__btn--primary { display: none; }
  .header__search { flex-basis: 240px; width: 240px; }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .footer, .footer__bottom { margin-left: 0; }
  .footer__bottom { padding-left: 24px; text-align: center; }
  .resource-grid { grid-template-columns: repeat(3, 1fr); }
  .user-center__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .header__search { display: none; }
}

/* ========== 需求大厅 ========== */
.demand-page { max-width: 1280px; margin: 0 auto; padding: 24px 0; }
.demand-page__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.demand-page__title { font-size: 26px; font-weight: 800; color: #1E293B; }
.demand-page__subtitle { font-size: 13px; color: #64748B; margin-top: 6px; }
.demand-publish-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 24px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #0891B2, #0E7490); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 14px rgba(8,145,178,.3);
}
.demand-publish-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(8,145,178,.4); }

.demand-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.demand-tab {
  padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: #fff; color: #64748B; cursor: pointer; transition: all .2s;
}
.demand-tab:hover { border-color: var(--primary); color: var(--primary); }
.demand-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.demand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.demand-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; cursor: pointer; transition: all .2s; display: flex; flex-direction: column; }
.demand-card:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(8,145,178,.12); transform: translateY(-2px); }
.demand-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.demand-card__cat { font-size: 12px; font-weight: 600; color: var(--primary); background: #ECFEFF; border: 1px solid #CFFAFE; border-radius: 6px; padding: 2px 10px; }
.demand-card__status { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 6px; }
.demand-card__status.open { color: #B45309; background: #FEF3C7; }
.demand-card__status.doing { color: #0891B2; background: #ECFEFF; }
.demand-card__status.done { color: #059669; background: #D1FAE5; }
.demand-card__title { font-size: 15px; font-weight: 700; color: #1E293B; line-height: 1.4; margin-bottom: 8px; }
.demand-card__desc { font-size: 13px; color: #64748B; line-height: 1.6; flex: 1; }
.demand-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid #F1F5F9; }
.demand-card__reward { font-size: 20px; font-weight: 800; color: #EF4444; }
.demand-card__reward span { font-size: 11px; font-weight: 500; color: #94A3B8; margin-left: 3px; }
.demand-card__meta { text-align: right; }
.demand-card__publisher { display: block; font-size: 12px; color: #334155; font-weight: 600; }
.demand-card__count { display: block; font-size: 11px; color: #94A3B8; margin-top: 2px; }
.demand-empty { text-align: center; color: #94A3B8; padding: 60px 0; font-size: 14px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
.demand-detail { position: relative; background: #fff; border-radius: 16px; width: 720px; max-width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.demand-detail__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #F1F5F9; color: #64748B; font-size: 15px; cursor: pointer; z-index: 2; transition: all .15s; }
.demand-detail__close:hover { background: #E2E8F0; color: #1E293B; }
.demand-detail__body { padding: 28px 32px 32px; }
.dd-head { margin-bottom: 18px; }
.dd-title { font-size: 20px; font-weight: 800; color: #1E293B; margin: 10px 0 6px; }
.dd-pub { font-size: 13px; color: #64748B; }
.dd-pub b { color: #334155; }
.dd-reward-bar { display: inline-flex; flex-direction: column; align-items: center; background: linear-gradient(135deg, #FEF2F2, #FEE2E2); border: 1px solid #FECACA; border-radius: 12px; padding: 12px 28px; margin-bottom: 18px; }
.dd-reward-num { font-size: 28px; font-weight: 900; color: #EF4444; line-height: 1.1; }
.dd-reward-label { font-size: 12px; color: #B91C1C; margin-top: 2px; }
.dd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 10px; margin-bottom: 18px; }
.dd-gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #E2E8F0; }
.dd-gallery--empty { display: block; padding: 28px; text-align: center; background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 8px; color: #94A3B8; font-size: 13px; }
.dd-section-title { font-size: 15px; font-weight: 700; color: #1E293B; margin: 22px 0 12px; padding-left: 10px; border-left: 3px solid var(--primary); }
.dd-desc { font-size: 14px; color: #475569; line-height: 1.8; white-space: pre-wrap; }
.dd-settled { margin: 16px 0; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #065F46; background: #D1FAE5; border: 1px solid #6EE7B7; }
.dd-res-list { display: flex; flex-direction: column; gap: 14px; }
.dd-res { border: 1px solid #E2E8F0; border-radius: 12px; padding: 16px; background: #fff; }
.dd-res--accepted { border-color: #34D399; background: #F0FDF4; }
.dd-res__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dd-res__avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#06B6D4,#0891B2); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dd-res__name { font-size: 14px; font-weight: 700; color: #1E293B; }
.dd-res-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: #F1F5F9; color: #94A3B8; }
.dd-res-tag.ok { background: #D1FAE5; color: #059669; }
.dd-res-tag.muted { background: #F1F5F9; color: #94A3B8; }
.dd-res-accept { margin-left: auto; padding: 6px 16px; border: none; border-radius: 8px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.dd-res-accept:hover { background: #0E7490; }
.dd-res__desc { font-size: 13px; color: #475569; line-height: 1.7; }
.dd-res-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 8px; margin-top: 10px; }
.dd-res-imgs img { width: 100%; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #E2E8F0; }
.dd-res__amount { margin-top: 8px; font-size: 13px; font-weight: 700; color: #EF4444; }
.dd-res-empty { padding: 24px; text-align: center; color: #94A3B8; font-size: 13px; background: #F8FAFC; border-radius: 10px; }
.dd-respond { margin-top: 16px; padding: 16px; border: 1px dashed #CBD5E1; border-radius: 12px; background: #F8FAFC; }
.dd-respond__title { font-size: 14px; font-weight: 700; color: #1E293B; margin-bottom: 10px; }
.dd-respond textarea { width: 100%; box-sizing: border-box; border: 1px solid #E2E8F0; border-radius: 8px; padding: 10px 12px; font-size: 13px; resize: vertical; }
.dd-respond__row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.dd-respond__row .dp-thumbs { flex: 1; }

.demand-publish { background: #fff; border-radius: 16px; width: 640px; max-width: 100%; max-height: 96vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.demand-publish__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #F1F5F9; position: relative; }
.demand-publish__head .demand-detail__close { top: 7px; right: 16px; }
.demand-publish__head h3 { font-size: 17px; font-weight: 800; color: #1E293B; }
.demand-publish__body { padding: 12px 18px; }
.dp-field { margin-bottom: 10px; }
.dp-field label { display: block; font-size: 12px; color: #64748B; font-weight: 600; margin-bottom: 4px; }
.dp-field .login-box__input { width: 100%; box-sizing: border-box; }
.dp-req { color: #EF4444; margin-left: 2px; }
.dp-sub-tip { font-size: 12px; color: #94A3B8; margin-bottom: 4px; }
.dp-hint { font-size: 12px; color: #94A3B8; margin-top: 6px; }
/* 同一字段多个输入框间距 */
.dp-field .login-box__input + .login-box__input { margin-top: 10px; }
/* 两列同行布局（需求类型+外包预算 / 手机号+微信） */
.dp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; align-items: stretch; }
.dp-row2 .dp-field { margin-bottom: 0; }
/* 需求描述框：至少显示 4 行 */
.dp-field textarea.login-box__input { min-height: 100px; line-height: 1.6; resize: vertical; }
.demand-publish__foot { display: flex; justify-content: flex-end; gap: 12px; padding: 10px 18px; border-top: 1px solid #F1F5F9; }
.demand-publish__foot .header__btn--primary { position: relative; font-size: 15px; font-weight: 700; padding: 11px 34px; border-radius: 10px; }
.dp-cost { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92); }
.dp-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 110px; height: 80px; border: 1px dashed #CBD5E1; border-radius: 10px; color: #94A3B8; cursor: pointer; transition: all .15s; background: #F8FAFC; }
.dp-upload:hover { border-color: var(--primary); color: var(--primary); }
.dp-upload--sm { width: 70px; height: 64px; }
.dp-upload--square { width: 80px; height: 80px; }
.dp-upload__plus { font-size: 28px; line-height: 1; }
.dp-upload__text { font-size: 11px; margin-top: 2px; }
.dp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid #E2E8F0; }
.dp-thumb--grid { width: 80px; height: 80px; }
.dp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dp-thumb span { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(15,23,42,.7); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* 参考图片 3 列网格 */
.dp-img-grid { display: grid; grid-template-columns: repeat(3, 80px); gap: 10px; margin-top: 4px; }
/* 交稿时间行：日期选择 + 双方协商按钮 */
.dp-cycle-row { display: flex; align-items: stretch; gap: 10px; }
.dp-cycle-row .login-box__input { flex: 2; }
.dp-negotiate {
  flex: 1;
  height: 40px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  color: #64748B;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.dp-negotiate.active {
  background: #0891B2;
  border-color: #0891B2;
  color: #fff;
}
.dp-cycle-row .login-box__input:disabled { background: #F8FAFC; color: #94A3B8; }

@media (max-width: 1100px) { .demand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .demand-grid { grid-template-columns: 1fr; }
  .demand-page__head { flex-direction: column; align-items: stretch; gap: 14px; }
}

/* ===== 需求卡片（资源卡片风格）补充样式 ===== */
.demand-card__reward { font-size: 18px !important; font-weight: 800; color: #EF4444; display: inline-flex; align-items: baseline; gap: 2px; }
.demand-card__reward-sub { font-size: 11px; font-weight: 500; color: #94A3B8; }
.demand-card__footer-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #F1F5F9;
}
.demand-card__cat-tag {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
}
.demand-card__status-dot {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
}
.demand-card__status-dot.open { color: #B45309; background: #FEF3C7; }
.demand-card__status-dot.doing { color: #0891B2; background: #ECFEFF; }
.demand-card__status-dot.done { color: #059669; background: #D1FAE5; }
.demand-card__ans-count { font-size: 11px; color: #94A3B8; margin-left: auto; }

/* 需求卡片缩略图区缩小 */
#demandGrid .resource-card__thumb {
  aspect-ratio: 16/9;
}
#demandGrid .resource-card__thumb > div {
  font-size: 28px !important;
}

/* ============================================================
   订单卡片（小程序 my-publish / demand 同款）
   结构：标题+分类标签 / 任务编号 / 任务预算 / 发布时间 /
        底部：接单状态(左下) · 接单人数(右下)
   ============================================================ */
.order-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 14px;
  cursor: pointer;
  position: relative;
  transition: all .2s;
}
.order-card:hover {
  border-color: #0891B2;
  box-shadow: 0 8px 22px rgba(8,145,178,.12);
  transform: translateY(-2px);
}
.order-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.order-card__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.45;
  min-height: 2.9em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.order-card__tag {
  flex-shrink: 0;
  font-size: 12px;
  color: #0891B2;
  background: rgba(8,145,178,.1);
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 2px;
  white-space: nowrap;
}
.order-card__sub {
  font-size: 13px;
  color: #475569;
  margin-top: 0;
}
.order-card__budget-row {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 10px;
}
.order-card__label {
  font-size: 13px;
  color: #475569;
}
.order-card__price {
  font-size: 14px;
  font-weight: 700;
  color: #EA580C;
  margin-left: 2px;
}
.order-card__kv {
  display: flex;
  font-size: 13px;
  color: #475569;
  margin-top: 8px;
}
.order-card__kv .k { color: #64748B; }
/* 中间信息区：编号/预算/时间 左列；缩略图绝对定位于「任务预算」行右侧垂直居中，不占文字行空位 */
.order-card__info-row {
  display: block;
  margin-top: 2px;
}
.order-card__info-col {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-right: 132px;
}
/* 缩略图列：绝对定位于「任务预算」行右侧、垂直居中，不占位（卡片高度不变）。
   注意：budget-row 位于 info-col（padding-right:132px）内，其右边界在卡片右缘左 132px 处；
   用负 right 把缩略图推回右侧预留区、贴右对齐（right:-120px → 右缘距卡片 12px，左缘恰在预留区左界，不与文字重叠）。 */
.order-card__thumb-col {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
}
.order-card__thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
  display: block;
}
.order-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}
.order-card__status {
  font-size: 15px;
  font-weight: 800;
}
.order-card__status.is-open { color: #F59E0B; }
.order-card__status.is-taken { color: #10B981; }
.order-card__status.is-done { color: #94A3B8; }
.order-card__takers {
  font-size: 12px;
  color: #10B981;
  font-weight: 600;
  white-space: nowrap;
}
.order-card__takers.full { color: #94A3B8; }
/* 卡片底部：状态（左） + 短进度条（右）同一行 */
.order-card__progress {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* 接单记录卡片（发布方查看设计师联系方式，每次扣5灵感值） */
.v2-taker { padding: 12px 0; border-bottom: 1px solid #F1F5F9; }
.v2-taker:last-child { border-bottom: none; padding-bottom: 0; }
.v2-taker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.v2-taker__name { font-size: 14px; font-weight: 700; color: #0F172A; }
.v2-taker__status { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.v2-taker__status--pending { color: #0891B2; background: #ECFEFF; }
.v2-taker__status--accepted { color: #059669; background: #D1FAE5; }
.v2-taker__btn {
  width: 100%; height: 38px; border: none; border-radius: 8px;
  background: #0891B2; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.v2-taker__btn:hover { background: #0E7490; }
.v2-taker__btn--disabled { background: #CBD5E1; cursor: not-allowed; }
.v2-taker__lock { font-size: 13px; color: #94A3B8; padding: 6px 0; }
.v2-taker__count { font-size: 12px; font-weight: 600; color: #64748B; margin-left: 8px; }

/* 我的接单 / 我的发布 专属：状态行 + 操作按钮；v3.478 按钮组右对齐紧凑排列（gap 收紧 8px） */
.order-card__status-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 14px;
}
/* v3.479：状态徽章(待接单1/3人)保持卡片左下角左对齐，操作按钮组整体靠右紧凑 */
.order-card__status-row > .oc-btn:first-of-type {
  margin-left: auto;
}
.order-card .oc-btn {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg,#0891B2,#0E7490);
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.order-card .oc-btn:hover { opacity: .92; }
.order-card .oc-btn--ghost {
  background: #fff;
  color: #0891B2;
  border: 1px solid #0891B2;
}
/* 接单人员展开 */
.oc-takers {
  margin-top: 14px;
}
.oc-takers__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: background .15s;
}
.oc-takers__toggle:hover { background: #F8FAFC; }
.oc-takers__arrow { font-size: 12px; color: #64748B; font-weight: 500; }
.oc-takers__more { margin-top: 10px; font-size: 12px; color: #94A3B8; text-align: right; }
.oc-taker {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
}
.oc-taker__head { display: flex; align-items: center; gap: 8px; }
.oc-taker__avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#06B6D4,#0891B2); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.oc-taker__name { font-size: 13px; font-weight: 700; color: #0F172A; }
.oc-taker__time { font-size: 11px; color: #94A3B8; margin-left: auto; }
.oc-taker__desc { font-size: 12px; color: #475569; margin-top: 6px; line-height: 1.6; }
/* 联系方式 */
.oc-contact {
  margin: 14px 0 0;
  padding: 14px;
  background: #F0FDFA;
  border: 1px solid #A5F3FC;
  border-radius: 10px;
}
.oc-contact__row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.oc-contact__row:first-child { margin-top: 0; }
.oc-contact__k { font-size: 13px; color: #0E7490; font-weight: 600; flex-shrink: 0; }
.oc-contact__v { flex: 1; font-size: 13px; font-weight: 700; color: #0F172A; }
.oc-contact__copy { font-size: 12px; color: #0891B2; cursor: pointer; background: #ECFEFF; padding: 3px 10px; border-radius: 6px; }

/* 订单列表容器（需求大厅 / 我的接单 / 我的发布） */
.order-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1100px) {
  .order-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .order-list { grid-template-columns: 1fr; }
}

/* 空状态 */
.order-empty {
  padding: 48px 20px;
  text-align: center;
  color: #94A3B8;
  font-size: 14px;
  background: #fff;
  border: 1px dashed #E2E8F0;
  border-radius: 12px;
}

/* ============================================================
   需求详情 v2（小程序 demand-detail 同款）
   ============================================================ */
.ddv2 { background: transparent; min-height: auto; display: flex; flex-direction: column; gap: 14px; padding: 0; flex: 1; min-height: 0; }
.ddv2-head {
  background: #fff;
  padding: 16px 24px;
  border-radius: 14px;
}
.ddv2-head__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ddv2-head__top .ddv2-head__status { margin-left: auto; }
.ddv2-head__id { font-size: 13px; color: #94A3B8; }
.ddv2-head__status {
  font-size: 14px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  background: #ECFDF5;
  color: #10B981;
  white-space: nowrap;
}
.ddv2-head__status.accepted { background: #FFF7ED; color: #F59E0B; }
.ddv2-head__status.done { background: #F1F5F9; color: #94A3B8; }
.ddv2-head__title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.ddv2-head__title {
  margin-top: 0;
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.4;
}
.ddv2-head__tag {
  display: inline-block;
  margin-top: 0;
  font-size: 14px;
  padding: 5px 13px;
  border-radius: 6px;
  color: #0891B2;
  background: rgba(8,145,178,.1);
}
.ddv2-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 28px;
  display: flex;
  flex-direction: column;
}
.ddv2-row {
  display: flex;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid #F1F5F9;
}
.ddv2-row:last-child { border-bottom: none; padding-bottom: 0; }
.ddv2-row--block { flex-direction: column; }
.ddv2-row__label {
  width: 90px;
  flex-shrink: 0;
  font-size: 15px;
  color: #64748B;
  font-weight: 500;
}
.ddv2-row__value {
  flex: 1;
  font-size: 15px;
  color: #0F172A;
  text-align: right;
}
.ddv2-row--block .ddv2-row__value { text-align: left; margin-top: 12px; }
.ddv2-row__value--reward { color: #EA580C; font-weight: 800; font-size: 20px; }
.ddv2-row--reward { align-items: center; }
.ddv2-row__value--desc { line-height: 1.7; color: #334155; white-space: pre-wrap; }
.ddv2-row__value--takers { color: #16A34A; font-weight: 700; }
.ddv2-ref-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}
.ddv2-ref-window {
  flex: 0 0 auto;
  width: 240px;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  display: flex; align-items: center; justify-content: center;
}
.ddv2-ref-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ddv2-ref-empty { color: #CBD5E1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ddv2-ref-empty__plus { font-size: 34px; line-height: 1; }
.ddv2-ref-empty__t { font-size: 13px; }
.ddv2-contact-box { width: 100%; margin-top: 8px; }
.ddv2-contact-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.ddv2-contact__k { font-size: 14px; color: #0E7490; font-weight: 600; flex-shrink: 0; }
.ddv2-contact__v { font-size: 14px; font-weight: 700; color: #0F172A; }
.ddv2-contact__copy { font-size: 13px; color: #0891B2; cursor: pointer; background: #ECFEFF; padding: 3px 10px; border-radius: 6px; }
.ddv2-contact-locked { margin-top: 10px; font-size: 14px; color: #94A3B8; }
.ddv2-footer {
  background: #fff;
  border-radius: 14px;
  padding: 14px 28px;
  display: flex;
  align-items: center;
}
.ddv2-take-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg,#0891B2,#0E7490);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ddv2-take-btn.is-disabled { background: #CBD5E1; cursor: not-allowed; }
.ddv2-take-btn .cost { font-size: 13px; font-weight: 500; opacity: .92; margin-left: auto; }
/* 接单确认弹窗（#1590：从屏幕底部改为居中弹出，不在底部） */
.ddv2-pay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  display: none; align-items: center; justify-content: center; padding: 24px; z-index: 2100;
}
.ddv2-pay.is-open { display: flex; }
.ddv2-pay__sheet {
  background: #fff; width: 100%; max-width: 420px; border-radius: 16px; padding: 24px 26px 28px;
  max-height: 90vh; overflow-y: auto; position: relative;
}
.ddv2-pay__title { font-size: 16px; font-weight: 800; color: #0F172A; text-align: center; margin-bottom: 12px; }
.ddv2-pay__need { text-align: center; margin: 12px 0 4px; }
.ddv2-pay__need-label { font-size: 13px; color: #64748B; }
.ddv2-pay__need-num { font-size: 28px; font-weight: 900; color: #EA580C; margin-left: 6px; }
.ddv2-pay__need-unit { font-size: 13px; color: #64748B; margin-left: 2px; }
.ddv2-pay__balance { text-align: center; font-size: 13px; color: #64748B; margin-top: 10px; }
.ddv2-pay__balance b { color: #0F172A; }
/* v3.546：接单额度蓝框——青底青字（与下载确认"当前会员权限不支持免费下载"提示框一致），20/20 数字橘红 */
.ddv2-quota-tip {
  display: none; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px;
  background: rgba(8, 145, 178, 0.08); border: 1px solid rgba(8, 145, 178, 0.2); color: #0891b2;
  font-size: 13px; line-height: 1.6; text-align: center; font-weight: 600;
}
.ddv2-quota-tip b { font-weight: 700; }
.ddv2-quota-tier { color: #111111; }
.ddv2-quota-num { color: #EA580C; }
.ddv2-pay__warn { display: none; text-align: center; font-size: 12px; color: #DC2626; margin-top: 10px; }
.ddv2-pay__warn.show { display: block; }
.ddv2-pay__actions { display: flex; gap: 12px; margin-top: 18px; align-items: center; justify-content: space-between; }
.ddv2-pay-extra-btn {
  font-size: 13px; font-weight: 600; color: #0891B2; background: #ECFEFF; border: 1px solid #A5F3FC;
  border-radius: 10px; padding: 12px 16px; cursor: pointer; white-space: nowrap;
}
.ddv2-pay-confirm {
  flex: 1 1 200px; width: auto; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#0891B2,#0E7490);
  border: none; border-radius: 10px; padding: 13px 0; cursor: pointer;
}
.ddv2-pay__close {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none;
  font-size: 18px; line-height: 1; color: #64748B;
  cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ddv2-pay__close:hover { background: #F1F5F9; color: #0F172A; }

/* 需求详情内联视图（替代悬浮弹窗，占用需求大厅主内容区宽度） */
#demandDetailView {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#demandDetailBody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#demandDetailView .ddv2 { min-height: auto; }
.ddv2-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #0891B2;
  background: #fff;
  border: 1px solid #A5F3FC;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.ddv2-back:hover { background: #ECFEFF; }
/* 详情头部内的返回按钮（与标题同卡片，置于顶部行内） */
.ddv2-head .ddv2-back { margin: 0; }
/* 右侧「最近待接单」侧栏 */
.demand-side-head { font-size: 14px; font-weight: 700; color: #0F172A; margin: 4px 4px 12px; }
.demand-side-empty { font-size: 13px; color: #94A3B8; text-align: center; padding: 30px 0; }

/* ===== 需求大厅：主从布局（左 2/3 详情 + 右 1/3 任务列表） ===== */
.demand-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-top: 20px;
  align-items: stretch;
}
.demand-split__detail,
.demand-split__list { min-width: 0; }
/* 左侧详情列：自身作为 flex 容器，让内部 .ddv2 填满高度，从而底部接单卡片与右侧第4张卡底对齐 */
.demand-split__detail { display: flex; flex-direction: column; }
/* 右侧任务列表在窄列内始终单列，且与左侧详情等高并列 */
.demand-split__list { display: flex; flex-direction: column; }
.demand-split__list .order-list { display: flex; flex-direction: column; gap: 0; justify-content: space-between; align-items: stretch; margin-top: 0; flex: 1; min-height: 0; }
.demand-split__list .order-card { margin-bottom: 0; }
.order-card.is-active {
  border-color: #0891B2;
  box-shadow: 0 0 0 2px rgba(8,145,178,.15);
}
.demand-detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  background: #fff;
  border: 1px dashed #E2E8F0;
  border-radius: 14px;
  padding: 40px 20px;
}
.demand-detail-placeholder__icon { font-size: 44px; margin-bottom: 12px; }
.demand-detail-placeholder__t { font-size: 16px; font-weight: 600; color: #475569; }
.demand-detail-placeholder__s { font-size: 13px; margin-top: 6px; }
@media (max-width: 1024px) {
  .demand-split { grid-template-columns: 1fr; }
}

/* ===== 消息列表（顶部弹窗 + 我的主页消息通知面板共用） ===== */
.msg-list { display: flex; flex-direction: column; }
.msg-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #EEF2F6;
  cursor: pointer;
  transition: background .15s;
}
.msg-item:last-child { border-bottom: none; }
.msg-item:hover { background: #F8FAFC; }
.msg-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 图标不帶背景色，统一品牌色描边，仅形状区分类型 */
  background: transparent;
}
.msg-item__icon svg { width: 20px; height: 20px; stroke: #0891B2; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 消息通知面板：卡片容器 + 筛选菜单 */
.msg-panel-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  border: 1px solid #E2E8F0;
  padding: 8px 8px 4px;
}
.msg-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid #EEF2F6;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.msg-filter-tab {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: #F1F5F9;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.msg-filter-tab:hover { background: #E2E8F0; color: #1E293B; }
.msg-filter-tab.active {
  background: linear-gradient(135deg, #0891B2, #0E7490);
  color: #fff;
  font-weight: 600;
}
.msg-item__body { flex: 1; min-width: 0; }
.msg-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msg-item__title { font-size: 14px; font-weight: 600; color: #475569; }
.msg-item.unread .msg-item__title { color: #0F172A; font-weight: 700; }
.msg-item__time { font-size: 12px; color: #94A3B8; flex-shrink: 0; }
.msg-item__content {
  font-size: 13px;
  color: #64748B;
  margin-top: 3px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-item__unread {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
}
.msg-empty { padding: 50px 20px; text-align: center; color: #94A3B8; font-size: 14px; }

/* 消息弹窗 */
.msg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.msg-modal-overlay.active { display: flex; }
.msg-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.msg-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #EEF2F6;
}
.msg-modal__title { font-size: 16px; font-weight: 700; color: #0F172A; }
.msg-modal__close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
  padding: 0 4px;
}
.msg-modal__close:hover { color: #475569; }
.msg-modal__body { overflow-y: auto; }
.msg-modal__foot {
  padding: 12px 20px;
  border-top: 1px solid #EEF2F6;
  text-align: center;
}
.msg-modal__all {
  border: none;
  background: none;
  color: #0891B2;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* 顶部消息按钮未读红点 */
.header__action-btn { position: relative; }
.header__msg-dot {
  position: absolute;
  top: 8px;
  right: 12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

/* ========== 手机端小程序落地页 (v3.204) ==========
   移动端 (innerWidth ≤ 768 或移动端 UA) 时隐藏原生站点，渲染 .mph-root 全屏落地页。
   桌面端完全不渲染。包含 Header / 搜索 / Banner / 分类 / 打开小程序按钮 / 二维码 / 页脚。
*/

.mph-root {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #F8F9FC 0%, #F1F4FA 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  color: #1F2937;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

/* ===== Header ===== */
.mph-header {
  position: sticky; top: 0; z-index: 100;
  height: 48px;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px;
}
.mph-title {
  font-size: 17px;
  font-weight: 600;
  color: #1F2937;
  letter-spacing: 0.5px;
  /* 偏移微调补偿左右按钮宽度，保持视觉居中 */
  padding-right: 64px;
}
.mph-header-right {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px;
}
.mph-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: #4B5563; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.mph-icon-btn:active { background: rgba(0,0,0,0.05); color: #1F2937; }
.mph-icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.mph-icon-btn:first-of-type svg { fill: #4B5563; }

/* ===== 搜索栏 ===== */
.mph-search {
  margin: 12px 14px 0;
  height: 38px;
  background: #ECEEF2;
  border-radius: 19px;
  display: flex; align-items: center;
  padding: 0 14px;
}
.mph-search-icon { width: 15px; height: 15px; color: #9CA3AF; flex-shrink: 0; }
.mph-search-icon, .mph-search-icon * { stroke: currentColor; fill: none; stroke-width: 2; }
.mph-search-placeholder {
  margin-left: 8px;
  font-size: 13px;
  color: #9CA3AF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Banner 横幅 ===== */
.mph-banner {
  position: relative;
  margin: 12px 14px 0;
  height: 130px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0, transparent 50%),
    linear-gradient(135deg, #7A85FF 0%, #8B7DFF 50%, #6F7BFF 100%);
  background-color: #7382FF;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(115,130,255,0.25);
}
.mph-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.4s ease;
}
.mph-banner-overlay {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 90% -10%, rgba(255,255,255,0.25) 0%, transparent 40%),
    radial-gradient(circle at 10% 110%, rgba(0,0,0,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.mph-banner-text {
  position: absolute; left: 18px; top: 22px;
  color: #fff;
  z-index: 1;
}
.mph-banner-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.mph-banner-sub {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.5px;
}
.mph-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 5px;
  z-index: 1;
}
.mph-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.3s ease;
}
.mph-dot.active {
  width: 16px; border-radius: 3px;
  background: #fff;
}

/* ===== 4 个分类 ===== */
.mph-cats {
  margin: 18px 14px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mph-cat {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit;
  cursor: pointer; transition: transform 0.2s;
}
.mph-cat:active { transform: scale(0.95); }
.mph-cat-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #F2F4F8;
  display: flex; align-items: center; justify-content: center;
}
.mph-cat-icon svg { width: 38px; height: 38px; }
.mph-cat-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.mph-cat-name {
  margin-top: 6px;
  font-size: 12px;
  color: #4B5563;
  font-weight: 500;
}

/* ===== 打开小程序按钮 ===== */
.mph-launch-wrap {
  margin: 26px 28px 0;
  display: flex; justify-content: center;
}
.mph-launch {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #22D478 0%, #1EC769 100%);
  background-color: #1ED874;
  color: #fff;
  border-radius: 23px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(34,212,120,0.32);
  transition: transform 0.15s, box-shadow 0.2s;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}
.mph-launch::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.mph-launch:active {
  transform: scale(0.97);
  box-shadow: 0 4px 10px rgba(34,212,120,0.28);
}

/* ===== 二维码卡片 ===== */
.mph-qr-wrap {
  margin: 22px auto 0;
  padding: 14px;
  width: 220px;
}
.mph-qr-card {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mph-qr-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.mph-qr-fallback {
  display: none; /* 默认隐藏，img onerror 时切换显示 */
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  color: #9CA3AF; font-size: 13px;
  background: #F8F9FC;
}

/* ===== 底部信息 ===== */
.mph-footer {
  margin-top: 18px;
  padding: 0 22px;
  text-align: center;
}
.mph-pc-link {
  font-size: 13px;
  color: #4B5563;
  font-weight: 500;
}
.mph-pc-link a {
  color: #4B5563; text-decoration: none;
  font-weight: 500;
}
.mph-pc-link a:active { color: #1F2937; }
.mph-divider {
  margin: 12px auto;
  max-width: 280px;
  border-top: 1px dashed #C4C9D4;
}
.mph-meta {
  font-size: 11px;
  color: #6B7280;
  line-height: 1.9;
  letter-spacing: 0.2px;
}
.mph-meta a {
  color: inherit; text-decoration: none;
}
.mph-meta a:active { color: #374151; }
.mph-beian-icon {
  width: 11px; height: 11px;
  display: inline-block; vertical-align: -2px;
  margin-right: 2px;
  fill: #6B7280;
}
.mph-web-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  color: #9CA3AF;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 14px;
  transition: all 0.2s;
}
.mph-web-link:active {
  background: rgba(0,0,0,0.04);
  color: #6B7280;
}

/* ===== Toast ===== */
.mph-toast {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: rgba(31,41,55,0.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  max-width: 84vw;
  text-align: center;
  white-space: nowrap;
  line-height: 1.55;
}
.mph-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== 仅移动端显示 ===== */
@media (min-width: 769px) {
  .mph-root { display: none !important; }
}

/* 手机端落地页模式下隐藏 React 原生 Header / Footer（由 .mph-root 自带 header/footer 替代） */
@media (max-width: 768px) {
  html.mph-mode header.header,
  html.mph-mode footer.footer { display: none !important; }
}

/* 微信内浏览器：额外的微小优化 */
@supports (-webkit-touch-callout: none) {
  .mph-launch { -webkit-tap-highlight-color: transparent; }
}


/* ========== 手机端布局优化 (≤768px) ========== */
@media (max-width: 768px) {
  /* Header 精简 */
  .header {
    padding: 0 12px;
    height: 52px;
  }
  .header__logo { margin-right: auto; font-size: 17px; gap: 6px; }
  .header__logo img { height: 32px !important; }
  .header__logo-icon { width: 28px; height: 28px; font-size: 14px; border-radius: 6px; }
  /* 隐藏桌面导航 */
  .header__nav { display: none; }
  .header__search { display: none; }
  /* 登录按钮适配 */
  .header__btn { height: 34px; padding: 0 14px; font-size: 13px; }
  .header__btn--dark { display: inline-flex; }
  .header__right { gap: 6px; }
  .header__user-welcome { display: none; }
  .header__username { display: none; }
  .header__action-btn { width: 34px; height: 34px; }
  .header__vip-btn { padding: 0 10px; font-size: 12px; }
  .header__vip-btn svg { width: 16px; height: 16px; }
  .header__avatar { width: 30px; height: 30px; }
  .header__avatar-circle { width: 30px; height: 30px; font-size: 13px; }
  .header__user-trigger { padding: 0 4px; }

  /* Main 区域 */
  .main { margin-left: 0; padding: 52px 0 0; }
  .main__inner { padding: 12px; }

  /* 资源网格 → 2 列 */
  .resource-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .resource-card { border-radius: 10px; }
  .resource-card__img { aspect-ratio: 4/3; }
  .resource-card__title { font-size: 12px; line-height: 1.4; }
  .resource-card__meta { font-size: 10px; }
  .resource-card__price { font-size: 14px; }
  .resource-card__price-unit { font-size: 10px; }

  /* 分类标签横向滚动 */
  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 8px 12px;
    gap: 8px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-tag { flex-shrink: 0; padding: 6px 14px; font-size: 13px; }

  /* Banner 区 */
  .banner, .hero-banner { border-radius: 12px; margin: 8px 0; }
  .banner__title, .hero-banner__title { font-size: 18px; }
  .banner__sub, .hero-banner__sub { font-size: 12px; }

  /* Footer 精简 */
  .footer { padding: 24px 16px; }
  .footer__inner { flex-direction: column; gap: 20px; text-align: center; }
  .footer__intro { text-align: center; }
  .footer__links { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .footer__links a { font-size: 12px; }
  .footer__gzh, .footer__cs { order: 0; }
  .footer__gzh img, .footer__cs img { width: 100px; height: 100px; }
  .footer__bottom { padding-left: 0; text-align: center; font-size: 11px; }

  /* 分页 */
  .pagination { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .pagination__btn, .pagination__num { min-width: 32px; height: 32px; font-size: 13px; padding: 0 8px; }

  /* 用户中心 */
  .user-center__stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .user-center__header { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* VIP 页 */
  .vip-plans { grid-template-columns: 1fr; }
  .vip-page { padding: 12px; }

  /* 需求大厅 */
  .demand-grid { grid-template-columns: 1fr; }
  .demand-page { padding: 12px; }
  .demand-page__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .demand-page__title { font-size: 20px; }

  /* 详情页 */
  .detail-page { padding: 12px; }
  .detail-layout { grid-template-columns: 1fr !important; }

  /* 弹窗适配 */
  .modal, .rc-modal, .recharge-modal { max-width: 94vw !important; }
}

@media (max-width: 375px) {
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card__img { aspect-ratio: 16/10; }
}