:root {
  --brand: #e5005a;
  --brand-ink: #a30040;
  --brand-soft: #fff0f6;
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #1f2937;
  --ink-2: #374151;
  --ink-soft: #6b7280;
  --line: #eceef1;
  --line-2: #f1f3f5;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 3px rgba(17, 24, 39, .05), 0 6px 18px -8px rgba(17, 24, 39, .08);
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.pb-20 { padding-bottom: 80px; }
.hidden { display: none !important; }

/* ============ Tabbar ============ */
#tabbar {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px -6px rgba(17, 24, 39, .12);
  height: 60px;
}
.tab-btn { color: #9ca3af; flex: 1; text-align: center; padding: 8px 0 6px; position: relative; transition: color .15s; }
.tab-btn.active { color: var(--brand); }
.tab-btn.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand);
}
.tab-btn span { font-size: 11px; margin-top: 2px; display: block; }

/* ============ Common components ============ */
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line-2); }
.page-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.btn-primary { background: var(--brand); color: #fff; border: none; }
.btn-primary:active { filter: brightness(.95); }
.btn-search { background: var(--brand); color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 999px; }

/* 统一返回按钮（圆形图标按钮）：浅色背景页用 .nav-back，有色头部页用 .nav-back.light */
.nav-back {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #f0f2f5;
  color: #374151;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.nav-back:active { background: #e2e5ea; }
.nav-back.light { background: rgba(255,255,255,.28); color: #fff; }
.nav-back.light:active { background: rgba(255,255,255,.45); }

/* ====== 统一子页面头部（白底 + SVG返回按钮 + 标题居中 + 品红底线 + sticky 固定）====== */
.sub-header {
  background: #fff;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  z-index: 100;
  border-bottom: 1px solid #ffe0ed;
}
.sub-header .nav-back { position: static; }
.sub-title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  text-align: center;
}
.sub-placeholder {
  width: 24px;
  flex-shrink: 0;
}

/* 子页面内容区（搜索栏/分类标签等） */
.page-content {
  padding: 12px 16px 8px;
  background: #fff;
}

.search-bar { background: #f8f9fa; border-radius: 999px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; border: 1.5px solid transparent; transition: all .2s; margin: 0 16px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.search-bar:focus-within { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search-bar input { background: transparent; border: none; outline: none; flex: 1; font-size: 14px; color: var(--ink); line-height: 1.4; }
.search-bar input::placeholder { color: #9ca3af; }
.search-bar .search-clear { width: 18px; height: 18px; display: none; align-items: center; justify-content: center; border-radius: 50%; background: #e5e7eb; color: #6b7280; cursor: pointer; flex-shrink: 0; }
.search-bar .search-clear.visible { display: flex; }
.search-bar .search-clear:active { transform: scale(.92); }

/* 带搜索按钮的搜索栏（文章资讯等） */
.search-bar .search-btn { background: var(--brand); color: #fff; border: none; border-radius: 999px; padding: 4px 16px; font-size: 14px; cursor: pointer; flex-shrink: 0; transition: transform .12s, filter .12s; }
.search-bar .search-btn:active { transform: scale(.96); filter: brightness(.95); }
.search-bar.inside-content { margin-left: 0; margin-right: 0; }

.section-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 16px; }

.toast { position: fixed; top: 20%; left: 50%; transform: translateX(-50%) translateY(-20px); background: rgba(17, 23, 39, .82); color: #fff; padding: 10px 20px; border-radius: 10px; opacity: 0; transition: all .3s; z-index: 100; pointer-events: none; font-size: 14px; max-width: 80%; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ Home v2 (参考图设计) ============ */
.home-wrapper { background: var(--bg); min-height: 100vh; padding-bottom: 24px; }

/* Header v2 - 白底 + 标题 + 装饰插画 */
.home-header-v2 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 18px 6px; position: relative;
}
.hh-left { flex: 1; min-width: 0; }
.hh-chip {
  display: inline-flex; align-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.hh-title { font-size: 26px; font-weight: 900; color: var(--ink); line-height: 1.18; letter-spacing: -.5px; }
.hh-accent { color: var(--brand); }
.hh-sub { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 8px; }
.hh-right { width: 112px; height: 100px; flex-shrink: 0; margin-left: 6px; }
.hh-illu { width: 100%; height: 100%; }

/* Search bar */
.home-search-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px 0; padding: 11px 15px;
  background: #fff; border-radius: 14px;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.hs-icon { width: 17px; height: 17px; color: #9ca3af; flex-shrink: 0; }
.hs-placeholder { font-size: 13.5px; color: #9ca3af; }

/* Banner card - 轮播图（仅展示图片） */
.home-banner-card { padding: 0 16px; margin-top: 16px; }
.wb-banner-card { padding: 0 16px; margin-top: 12px; }
.hbc-swiper, .hbc-fallback, .wb-swiper {
  border-radius: var(--radius); overflow: hidden;
  height: 168px; position: relative; background: #f1f3f5;
}
/* 基础轮播结构 */
.swiper-track { display: flex; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.swiper-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; }
.hbc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbc-img-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px; letter-spacing: 1px;
  background: linear-gradient(135deg, #c4004d, #f75fa3 48%, #e5005a);
}
.swiper-dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px; z-index: 3;
}
.swiper-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.55); transition: all .3s; }
.swiper-dot.active { width: 18px; background: #fff; }

/* Notice bar */
.notice-bar-v2 { display: flex; align-items: center; background: #fff; margin: 12px 16px; padding: 11px 14px; border-radius: 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); cursor: pointer; }
.notice-label-v2 { display: flex; flex-direction: column; line-height: 1.15; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--line-2); }
.notice-label-v2 span:first-child { color: #ef4444; font-weight: 900; font-size: 13px; font-style: italic; }
.notice-label-v2 span:last-child { color: var(--ink); font-weight: 900; font-size: 13px; font-style: italic; }
.notice-text-v2 { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-soft); font-size: 13px; }

/* Feature cards - 三等分 */
.feature-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 16px 16px; }
.feature-card {
  border-radius: 16px; padding: 16px 14px;
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-height: 120px;
}
.feature-card:active { transform: scale(.98); }
.fc-pink { background: linear-gradient(145deg, #fff0f6 0%, #ffe0ed 100%); }
.fc-orange { background: linear-gradient(145deg, #fff0f6 0%, #ffe0ed 100%); }
.fc-blue { background: linear-gradient(145deg, #fff0f6 0%, #ffe0ed 100%); }
.fc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.fc-head h3 { font-size: 15.5px; font-weight: 800; }
.fc-pink .fc-head h3 { color: #a30040; }
.fc-orange .fc-head h3 { color: #c2410c; }
.fc-blue .fc-head h3 { color: #1d4ed8; }
.fc-arrow { width: 16px; height: 16px; color: #d1d5db; flex-shrink: 0; }
.fc-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 8px; margin-bottom: 12px; }
.fc-icon-wrap { display: flex; justify-content: flex-start; }
.fc-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.fc-pink .fc-icon { background: #ffe0ed; }
.fc-orange .fc-icon { background: #ffedd5; }
.fc-blue .fc-icon { background: #dbeafe; }

/* ===== 每日金句 ===== */
.q-page { max-width: 520px; margin: 0 auto; }
.q-sub { text-align: center; font-size: 13px; color: var(--ink-soft); letter-spacing: 2px; margin-bottom: 18px; }
.q-card {
  background: linear-gradient(145deg, #fff0f6 0%, #ffe0ed 100%);
  border: 1px solid var(--line-2);
  border-radius: 22px; padding: 38px 26px 30px;
  min-height: 240px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.q-loading { text-align: center; color: var(--ink-soft); padding: 60px 0; }
.q-mark { font-family: Georgia, serif; font-size: 90px; line-height: .6; color: #f75fa3; opacity: .35; height: 50px; }
.q-text { font-size: 24px; font-weight: 800; line-height: 1.7; color: var(--ink); white-space: pre-wrap; word-break: break-word; margin: 6px 0 22px; }
.q-author { text-align: right; font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.q-actions { display: flex; gap: 10px; margin-top: 20px; }
.q-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 4px; border-radius: 14px; border: 1px solid var(--line-2);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: transform .12s, background .15s; text-align: center;
}
.q-btn:active { transform: scale(.96); }
.q-btn span:first-child { font-size: 20px; }
.q-ico {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; margin-bottom: 2px;
}
.q-btn.q-like.liked { background: #fff1f2; border-color: #fecdd3; color: #e11d48; }
.q-btn.q-poster { background: linear-gradient(135deg, #f75fa3, #e5005a); color: #fff; border: none; }
.q-tip { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 16px; line-height: 1.6; }

/* 自定义金句 */
.q-custom { margin-top: 18px; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.q-custom-head { font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.q-custom-area { width: 100%; min-height: 92px; resize: none; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink); outline: none; box-sizing: border-box; font-family: inherit; }
.q-custom-area:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(236,72,153,.12); }
.q-custom-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.q-custom-count { font-size: 12.5px; color: var(--ink-soft); }
.q-custom-btn { padding: 9px 20px; border: none; border-radius: 12px; background: linear-gradient(135deg, #f75fa3, #e5005a); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.q-custom-btn:active { transform: scale(.97); }

/* 金句收藏列表 */
.q-fav-card { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); }
.q-fav-text { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.q-fav-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.q-fav-author { font-size: 13px; color: var(--ink-soft); }
.q-fav-del { font-size: 13px; color: #ef4444; background: #fef2f2; border: none; border-radius: 999px; padding: 4px 14px; cursor: pointer; }

/* 通用弹窗遮罩 */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 18px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal.show { opacity: 1; visibility: visible; }

/* 金句海报弹窗 */
.q-poster-modal { z-index: 70; }
.q-poster-wrap {
  position: relative;
  width: 86%; max-width: 360px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.q-poster-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:none; background:#f3f4f6; color:#6b7280; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:background .15s, transform .15s; }
.q-poster-close:active { background:#e5e7eb; transform:scale(.92); }
.q-poster-title { text-align: center; font-weight: 800; font-size: 16px; color: var(--ink); padding: 0 28px; }
.q-poster-stage { display: flex; align-items: center; justify-content: center; min-height: 200px; background: #f8fafc; border-radius: 12px; padding: 8px; }
.q-poster-loading { color: var(--ink-soft); font-size: 13px; }
.q-poster-img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; display: block; }
.q-poster-actions { display: flex; gap: 10px; }
.q-poster-btn { flex: 1; padding: 11px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; }
.q-poster-btn.ghost { background: #f1f5f9; color: var(--ink); }
.q-poster-btn.primary { background: linear-gradient(135deg, #f75fa3, #e5005a); color: #fff; }
.q-poster-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 我的设计 - 海报预览弹窗 */
.album-view-wrap { position:relative; padding:20px 18px 18px; border-radius:20px; gap:14px; }
.album-view-close {
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  border:none; background:#f3f4f6; color:#6b7280; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2; transition:background .15s, transform .15s, color .15s;
}
.album-view-close:active { background:#e5e7eb; color:#374151; transform:scale(.92); }
.album-view-img { width:100%; border-radius:14px; background:#eee; display:block; }
.album-view-title { text-align:center; font-size:15px; font-weight:600; color:#374151; margin-top:2px; }
.album-view-actions { display:flex; gap:12px; margin-top:4px; }
.album-view-btn {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 10px; border-radius:14px; font-weight:700; font-size:15px; cursor:pointer; border:none;
  transition:transform .12s, box-shadow .15s, opacity .15s;
}
.album-view-btn:active { transform:scale(.97); }
.album-view-btn.primary {
  flex:2.2; background:linear-gradient(135deg, #f75fa3, #e5005a); color:#fff;
  box-shadow:0 6px 16px rgba(229,0,90,.28);
}
.album-view-btn.danger { background:#fee2e2; color:#dc2626; }
.album-view-btn.danger:active { background:#fecaca; }

/* 海报模板选择栏 */
.q-template-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; }
.q-tmpl { position: relative; flex: 1 0 0; min-width: 44px; height: 52px; border: 2px solid transparent; border-radius: 12px; cursor: pointer; overflow: hidden; padding: 0; transition: transform .15s, border-color .15s, box-shadow .15s; }
.q-tmpl:active { transform: scale(.95); }
.q-tmpl.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(236,72,153,.18); }
.q-tmpl-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; text-align: center; padding: 2px 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* ===== 每日待办（重设计 v2）===== */
.td-page-v2 { padding: 14px 16px 32px; background: #f8f8fc; min-height: calc(100vh - 56px); }

/* 进度卡片 */
.td-focus-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #fff0f6 0%, #fbeaf0 100%); border: 0.5px solid #f4c0d1; border-radius: 20px; padding: 16px; margin-bottom: 18px; box-shadow: 0 4px 16px -6px rgba(229,0,90,.12); position: relative; overflow: hidden; }
.td-focus-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(247,95,163,.18), transparent 70%); border-radius: 50%; }
.td-focus-left { flex-shrink: 0; }
.td-focus-body { flex: 1; min-width: 0; z-index: 1; }
.td-focus-quote { font-size: 16px; font-weight: 800; color: #111827; line-height: 1.35; margin-bottom: 6px; }
.td-focus-sub { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
.td-focus-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.td-focus-tag { font-size: 11px; color: #993556; background: rgba(255,255,255,.7); border: 0.5px solid #f4c0d1; padding: 4px 10px; border-radius: 999px; }

/* 环形进度 */
.td-ring-wrap { position: relative; width: 64px; height: 64px; }
.td-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #72243e; }

/* 添加栏 */
.td-add-bar-v2 { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 22px; position: relative; z-index: 5; }
.td-add-input-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #e8e8ef; border-radius: 14px; padding: 0 0 0 12px; transition: border-color .2s, box-shadow .2s; position: relative; }
.td-add-input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(229,0,90,.08); }
.td-add-icon { width: 20px; height: 20px; flex-shrink: 0; }
.td-input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: var(--ink); padding: 12px 4px; min-width: 0; }
.td-input::placeholder { color: #b0b4c1; }
.td-add-btn { background: linear-gradient(135deg, #f75fa3, #e5005a); color: #fff; border: none; border-radius: 14px; padding: 12px 22px; font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; min-width: 0; letter-spacing: 1px; transition: opacity .1s, transform .1s; }
.td-add-btn:active { opacity: .85; transform: translateY(1px); }

/* 分类下拉 */
.td-cat-select { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #993556; background: #fbeaf0; padding: 5px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0; user-select: none; transition: background .15s; margin-right: 12px; }
.td-cat-select:active { background: #f4c0d1; }
.td-cat-chevron { width: 12px; height: 12px; transition: transform .2s; }
.td-cat-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 140px; max-width: 200px; background: #fff; border: 0.5px solid #f1f1f4; border-radius: 14px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.15); padding: 6px; z-index: 10; }
.td-cat-dropdown-inner { max-height: 220px; overflow-y: auto; }
.td-cat-option { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 10px; cursor: pointer; position: relative; user-select: none; transition: background .15s; }
.td-cat-option:active { background: #f3f4f6; }
.td-cat-option.active { background: #fff0f6; color: #e5005a; }
.td-cat-option-name { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* 列表头部 */
.td-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.td-list-title { font-size: 18px; font-weight: 800; color: #111827; }
.td-list-progress { font-size: 14px; font-weight: 700; color: #e5005a; background: #fff0f6; padding: 3px 10px; border-radius: 999px; }

/* 内容区 */
.td-body { display: flex; flex-direction: column; gap: 18px; }
.td-empty { text-align: center; color: #c0c4cc; font-size: 14px; padding: 60px 0 40px; }
.td-empty-sm { text-align: center; color: #c0c4cc; font-size: 13px; padding: 24px 0 8px; }

/* 分组 */
.td-section { background: transparent; }
.td-section-box { background: #fff; border: 1px solid #ede9fe; border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.03); }
.td-section-head { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 0 10px; user-select: none; }
.td-section-icon-wrap { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.td-section-icon { width: 18px; height: 18px; }
.td-section-title { font-size: 15px; font-weight: 700; color: #374151; flex: 1; }
.td-badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.td-chevron { width: 16px; height: 16px; transition: transform .25s; flex-shrink: 0; }
.td-section.collapsed .td-chevron { transform: rotate(-90deg); }

/* 逾期事项 */
.td-overdue { margin-bottom: 6px; }
.td-overdue-box { background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%); border-color: #fecaca; }
.td-overdue .td-section-head { cursor: pointer; }
.td-overdue .td-text { color: #991b1b; }
.td-overdue .td-cat-tag { background: #fee2e2; color: #b91c1c; }

/* 列表项 */
.td-items { display: flex; flex-direction: column; gap: 4px; overflow: hidden; transition: max-height .3s ease, opacity .25s ease; max-height: 2000px; opacity: 1; }
.td-section.collapsed .td-items { max-height: 0; opacity: 0; margin-bottom: 0; }

.td-item { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 0; }
.td-item + .td-item { border-top: 0.5px solid #f3f4f6; }

/* 圆形复选框 */
.td-check-wrap { flex-shrink: 0; cursor: pointer; }
.td-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d1d5db; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.td-check.checked { border-color: transparent; }
.td-check-svg { width: 12px; height: 12px; }

/* 文字与分类 */
.td-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; cursor: pointer; }
.td-text { font-size: 14px; color: #374151; line-height: 1.45; word-break: break-word; }
.td-text.done { text-decoration: line-through; color: #c0c4cc; }

/* 更多按钮 */
.td-more { width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: #c0c4cc; transition: background .15s, color .15s; }
.td-more-icon { width: 16px; height: 16px; }
.td-more:active { background: #f3f4f6; color: #6b7280; }

/* 编辑待办弹窗 */
.edit-todo-modal { z-index: 75; }
.edit-todo-wrap { width: 86%; max-width: 340px; background: #fff; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.edit-todo-title { text-align: center; font-weight: 800; font-size: 16px; color: var(--ink); }
.edit-todo-input { width: 100%; min-height: 88px; resize: none; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; outline: none; font-family: inherit; line-height: 1.5; }
.edit-todo-input:focus { border-color: var(--brand); }
.edit-todo-actions { display: flex; gap: 10px; }
.todo-act-btn { flex: 1; padding: 11px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; }
.todo-act-btn.ghost { background: #f1f5f9; color: var(--ink); }
.todo-act-btn.primary { background: linear-gradient(135deg, #f75fa3, #e5005a); color: #fff; }

/* 待办操作底部弹窗 */
.todo-actions-modal { z-index: 80; align-items: flex-end; padding: 0; }
.todo-actions-sheet { width: 100%; background: #fff; border-radius: 22px 22px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); animation: td-sheet-up .25s ease; }
.todo-actions-title { text-align: center; font-size: 13px; color: #9ca3af; padding: 4px 24px 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.todo-action-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: none; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 8px; background: #f8f8fc; color: #374151; transition: background .15s; }
.todo-action-btn svg { width: 18px; height: 18px; }
.todo-action-btn.edit { color: #374151; }
.todo-action-btn.delete { color: #ef4444; background: #fef2f2; }
.todo-action-btn.cancel { margin-top: 4px; margin-bottom: 0; color: #6b7280; font-weight: 500; }
.todo-action-btn:active { opacity: .85; }
@keyframes td-sheet-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.td-cat-tag { font-size: 10px; color: #e5005a; background: #fff0f6; padding: 2px 7px; border-radius: 5px; white-space: nowrap; line-height: 1; position: relative; top: 1px; }
.td-cat-tag.work { color: #0369a1; background: #e0f2fe; }
.td-cat-tag.life { color: #15803d; background: #dcfce7; }
.td-cat-tag.study { color: #b45309; background: #fef3c7; }

/* Common services */
.common-services { background: #fff; margin: 0 16px 16px; padding: 20px 16px; border-radius: 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); }
.cs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cs-head h3 { font-size: 17px; font-weight: 800; color: var(--ink); }
.cs-more { font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 6px; }
.service-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.service-icon-v2 { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.service-name { font-size: 12px; color: #4b5563; }

/* ============ Home 2 (参考图重制) ============ */
.home2-wrapper { background: var(--bg); min-height: 100vh; padding-bottom: 10px; }

/* Header */
.home2-header {
  padding: 26px 16px 10px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
}
.home2-search-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #374151;
  border: 1px solid #f1f2f4;
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 3px 10px rgba(229,0,90,.08);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
}
.home2-search-btn:active { transform: scale(.97); }
.home2-search-ico {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #ff2d7e, #e5005a);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(229,0,90,.3);
}
.home2-search-ico svg { width: 14px; height: 14px; }
.home2-title-badge {
  display: inline-flex; width: fit-content;
  background: #fff0f6;
  color: #e11d48; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid #ffe4e6;
  margin-bottom: 8px;
}
.home2-title { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1.15; letter-spacing: -.5px; }
.home2-title-black { color: #111827; }
.home2-title-accent { color: #e5005a; }
.home2-subtitle { font-size: 12px; color: #9ca3af; margin-top: 6px; }
.home2-header-right { position: relative; flex-shrink: 0; width: 72px; height: 68px; }
.home2-shop-illustration {
  position: absolute; right: -4px; top: -8px;
  width: 68px; height: 68px; opacity: .95;
}
.home2-bell {
  position: absolute; right: 0; top: -12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  cursor: pointer;
}
.home2-bell svg { width: 16px; height: 16px; }
.home2-bell-dot {
  position: absolute; top: 5px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; border: 1.5px solid #fff;
}

/* Top cards */
.home2-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  margin: 10px 16px 10px;
}

.home2-big-card {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  border-radius: 20px;
  padding: 18px 16px;
  background: linear-gradient(160deg, #4f7cff 0%, #5b8fff 55%, #8fb4ff 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 8px 22px rgba(79,124,255,.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 184px;
}
.home2-big-card:active { transform: scale(.98); }
.home2-big-card h3 { font-size: 20px; font-weight: 800; line-height: 1.2; margin-bottom: 6px; letter-spacing: -.3px; }
.home2-big-card p { font-size: 12px; opacity: .92; }
.home2-big-card-body {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff;
  color: #4f7cff;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; align-self: flex-start;
  margin-top: 12px;
  box-shadow: 0 4px 12px rgba(37,99,235,.18);
}
.home2-big-arrow { width: 13px; height: 13px; }
.home2-big-icon {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.home2-big-icon svg { width: 100%; height: 100%; }
.home2-big-decor {
  position: absolute; top: -34px; right: -34px;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.home2-small-card {
  border-radius: 20px;
  padding: 14px 12px 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 86px;
}
.home2-small-card:active { transform: scale(.98); }
.home2-card-peach { background: linear-gradient(145deg, #fff5f0 0%, #ffeee7 100%); }
.home2-card-yellow { background: linear-gradient(145deg, #fffbeb 0%, #fff6d9 100%); }
.home2-card-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(239,68,68,.4);
  border: 1.5px solid #fff;
  z-index: 2;
}
.home2-small-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.home2-small-head { display: flex; flex-direction: column; gap: 4px; }
.home2-small-head.home2-small-center { align-items: flex-start; text-align: left; }
.home2-small-head h3 { font-size: 15px; font-weight: 800; }
.home2-card-peach .home2-small-head h3 { color: #ea580c; }
.home2-card-yellow .home2-small-head h3 { color: #d97706; }
.home2-small-desc { font-size: 11px; color: #9ca3af; }
.home2-small-icon-v2 {
  position: relative;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home2-small-icon-v2 svg { width: 100%; height: 100%; }

/* Notice bar */
.notice-bar-v2 {
  display: flex; align-items: center;
  background: #fff; margin: 0 16px 10px; padding: 10px 14px;
  border-radius: 14px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-2); cursor: pointer;
}
.notice-icon-v2 {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 10px; flex-shrink: 0;
}
.notice-label-v2 {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 10px; flex-shrink: 0;
  white-space: nowrap;
}
.notice-label-v2 span { color: #374151; font-weight: 800; font-size: 13px; white-space: nowrap; }
.notice-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.notice-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444; color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(239,68,68,.4);
  border: 1.5px solid #fff;
  z-index: 1;
}
.notice-icon-v2 svg { width: 15px; height: 15px; }
.notice-text-v2 {
  flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #6b7280; font-size: 13px;
}

/* Common services */
.home2-services.common-services { margin: 0 16px 10px; padding: 14px; border-radius: 18px; }
.home2-services .cs-head { margin-bottom: 12px; }
.home2-services .cs-head h3 { font-size: 16px; font-weight: 800; color: var(--ink); }
.home2-services .cs-more { font-size: 12px; color: #9ca3af; cursor: pointer; }

.home2-service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-radius: 14px; overflow: hidden;
}
.home2-service-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 6px;
  cursor: pointer;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  transition: background .12s;
}
.home2-service-item:active { background: #f9fafb; }
.home2-service-item:nth-child(3n) { border-right: none; }
.home2-service-item:nth-child(n+7) { border-bottom: none; }
.home2-service-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  position: relative;
}
.home2-service-icon svg { width: 100%; height: 100%; }
.home2-service-name { font-size: 12px; color: #4b5563; font-weight: 500; }

/* ============ Category tabs ============ */
.category-tab { white-space: nowrap; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: #6b7280; background: #f3f4f6; flex: 0 0 auto; cursor: pointer; transition: all .15s; }
.category-tab.active { background: var(--brand); color: #fff; font-weight: 600; }
.cat-bar-wrap { display: flex; align-items: center; gap: 6px; }
.cat-scroll { flex: 1; display: flex; align-items: center; overflow-x: auto; gap: 6px; padding: 8px 0; scrollbar-width: none; -ms-overflow-style: none; min-width: 0; }
.cat-scroll::-webkit-scrollbar { display: none; }

/* 更多分类按钮 */
.cat-more-btn { white-space: nowrap; padding: 5px 9px; border-radius: 999px; font-size: 12px; color: var(--brand); background: #fff0f6; flex: 0 0 auto; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 1px; border: 1px solid #fbcfe8; }
.cat-more-btn:active { background: #fce7f3; }

/* 更多分类底部面板 */
.cat-sheet-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.45); animation: catFadeIn .2s ease; }
.cat-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 16px max(16px, env(safe-area-inset-bottom)); max-height: 70vh; overflow-y: auto; animation: catSlideUp .28s ease; }
.cat-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cat-sheet-title { font-size: 16px; font-weight: 700; color: #1f2937; }
.cat-sheet-close { width: 28px; height: 28px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9ca3af; font-size: 16px; border: none; }
.cat-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-sheet-item { padding: 10px 8px; border-radius: 10px; text-align: center; font-size: 13.5px; color: #374151; background: #f9fafb; cursor: pointer; transition: all .15s; border: 1.5px solid transparent; }
.cat-sheet-item:active { background: #e5e7eb; }
.cat-sheet-item.selected { background: #fff0f6; color: var(--brand); border-color: var(--brand); font-weight: 600; }
@keyframes catFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes catSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============ Moments ============ */
.moment-content { line-height: 1.65; color: var(--ink-2); }
.moment-tap { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.moment-tap:active { transform: scale(.985); }
.moment-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.moment-author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.moment-imgs { display: grid; gap: 6px; margin-bottom: 12px; }
.moment-imgs.cols-1 { grid-template-columns: 1fr; }
.moment-imgs.cols-2, .moment-imgs.cols-4 { grid-template-columns: repeat(2, 1fr); }
.moment-imgs.cols-3, .moment-imgs.cols-5, .moment-imgs.cols-6, .moment-imgs.cols-7, .moment-imgs.cols-8, .moment-imgs.cols-9 { grid-template-columns: repeat(3, 1fr); }
.moment-img { display: block; width: 100%; border-radius: 8px; background: #eceef1; cursor: pointer; }
.moment-imgs:not(.cols-1) .moment-img { aspect-ratio: 1 / 1; object-fit: cover; }
.moment-imgs.cols-1 .moment-img { width: auto; max-width: 240px; max-height: 320px; object-fit: contain; }
.moment-video { margin-bottom: 12px; border-radius: 8px; overflow: hidden; background: #000; }
.moment-video video { display: block; width: 100%; max-height: 300px; border-radius: 8px; }
.moment-actions { display: flex; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-2); }
.moment-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; color: #9ca3af; font-size: 13px; background: none; border: none; cursor: pointer; padding: 4px 2px; transition: color .15s; }
.moment-action:active { color: var(--brand); }
.moment-action.fav-on { color: #f59e0b; }

/* ============ Articles ============ */
/* ===== 文章资讯列表 ===== */
.art-list { padding: 12px 16px 16px; background: #f8f8fc; min-height: calc(100vh - 56px); }
.art-empty { text-align: center; color: #9ca3af; font-size: 14px; padding: 48px 0; }
.art-load-more { text-align: center; padding: 16px 0; }
.load-more-btn { background: none; border: none; color: var(--brand); font-size: 14px; font-weight: 500; cursor: pointer; padding: 8px 16px; }
.load-more-btn:disabled { opacity: .7; cursor: default; }
.art-no-more { text-align: center; color: #9ca3af; font-size: 13px; padding: 20px 0; }

/* 卡片 */
.art-card {
  position: relative;
  display: flex; gap: 16px;
  background: #fff; border-radius: 20px;
  padding: 16px; margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  cursor: pointer; transition: all .18s;
}
.art-card:active { transform: scale(.985); box-shadow: 0 1px 3px rgba(15,23,42,.06); }

/* 左侧封面图 */
.art-card-img-wrap {
  position: relative;
  width: 140px; height: 105px; flex-shrink: 0;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #fce7f3, #f3e8ff);
}
.art-card-img { width: 100%; height: 100%; object-fit: cover; }
.art-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; opacity: .5;
}

/* 右侧内容 */
.art-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.art-tag {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 700; color: var(--brand);
  background: #fff0f6; padding: 3px 10px; border-radius: 999px;
}
.art-tag-row {
  display: flex; align-items: center; gap: 8px;
  align-self: flex-start;
  margin-bottom: 6px;
}
/* 未读角标：卡片右上角 */
.art-unread-corner {
  position: absolute; top: 0; right: 0;
  z-index: 2;
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 0 20px 0 14px;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff; background: #ef4444;
  box-shadow: 0 2px 6px rgba(239,68,68,.35);
}
.art-title {
  font-size: 17px; font-weight: 800; color: #111827;
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 6px;
}
.art-desc {
  font-size: 13px; color: #9ca3af; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 8px;
}
.art-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #b0b4c1;
  margin-top: auto;
}
.art-meta-left, .art-meta-right { display: inline-flex; align-items: center; gap: 4px; }
.art-meta-icon { width: 13px; height: 13px; }

/* 发布人（后台管理员）头像 + 昵称 */
.pub-avatar {
  position: relative; width: 28px; height: 28px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand) 0%, #c7156a 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(229,0,90,.2);
}
.pub-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-avatar-init { color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.pub-avatar-xs { width: 22px; height: 22px; box-shadow: none; }
.pub-avatar-xs .pub-avatar-init { font-size: 10px; }
.pub-avatar-sm { width: 28px; height: 28px; }
.pub-avatar-lg { width: 42px; height: 42px; }
.pub-avatar-lg .pub-avatar-init { font-size: 17px; }

/* ===== 文章详情页（顶部/底部固定，仅中间滚动）===== */
.ad-page {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}
.ad-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 24px; }

/* 头部收藏按钮 */
.ad-fav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #9ca3af; transition: all .2s;
}
.ad-fav-btn svg { width: 20px; height: 20px; }
.ad-fav-btn.favorited { color: #e5005a; background: #fff0f5; }
.ad-fav-btn:active { transform: scale(.9); }

/* 标题区 */
.ad-head { margin-bottom: 16px; }
.ad-cat-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  color: var(--brand); background: #fff0f6;
  padding: 2px 10px; border-radius: 999px;
}
.ad-title {
  font-size: 22px; font-weight: 800; color: #111827;
  line-height: 1.38; margin-bottom: 10px;
}
.ad-meta-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: #9ca3af;
}
.ad-meta-dot { color: #d1d5db; }

/* 封面图 */
.ad-cover-wrap { margin-bottom: 20px; border-radius: 14px; overflow: hidden; }
.ad-cover { width: 100%; height: auto; display: block; }

/* 正文 */
.ad-content {
  font-size: 15.5px; color: #374151; line-height: 1.85;
  word-break: break-word; white-space: pre-wrap;
}
.ad-content p { margin-bottom: 16px; }
.ad-content img { max-width: 100%; border-radius: 10px; margin: 12px 0; }

/* 底部操作栏 */
.ad-bar {
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #fff; padding: 10px 16px calc(10px + env(safe-area-inset-bottom,0));
  border-top: 1px solid #f0f0f5; z-index: 200;
}
/* 底部操作栏按钮：统一 outline 胶囊风格 */
.ad-action {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1px solid #e5e7eb; cursor: pointer;
  padding: 10px 0; border-radius: 999px;
  color: #374151; font-size: 13px; font-weight: 600;
  transition: all .15s;
  white-space: nowrap;
}
.ad-action svg { width: 18px; height: 18px; color: #6b7280; }
.ad-action:active { background: #f9fafb; }
.ad-action.favorited {
  color: #e5005a;
  border-color: #e5005a;
  background: #fff0f5;
}
.ad-action.favorited svg { color: #e5005a; }

/* 运营指南详情页：底部只保留一个收藏按钮，优化为通栏主按钮 */
.ad-bar-single { justify-content: center; }
.ad-action-favorite { flex: 1; color: #e5005a; border-color: #e5005a; }
.ad-action-favorite svg { color: #e5005a; }
.ad-action-favorite.favorited {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #f75fa3, #e5005a);
  box-shadow: 0 3px 10px rgba(229,0,90,.25);
}
.ad-action-favorite.favorited svg { color: #fff; }
.ad-action-soft,
.ad-action-primary { /* 旧修饰类，兼容不生效，视觉统一走 .ad-action */
  background: #fff;
  color: #374151;
  box-shadow: none;
}

/* ============ Replace float (article detail) ============ */
.replace-float {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: linear-gradient(135deg, #f75fa3 0%, #e5005a 100%);
  color: #fff;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px -10px rgba(0, 0, 0, .3);
  max-width: 480px; margin: 0 auto;
}
.replace-float .rf-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .3); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.replace-float .rf-btn { flex: 1; background: rgba(255, 255, 255, .25); color: #fff; border-radius: 999px; padding: 7px 0; font-size: 12px; font-weight: 600; text-align: center; }

/* ============ Generic ============ */
.service-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 6px; }
.prose { color: var(--ink-2); }
.prose img { border-radius: 12px; margin: 8px 0; max-width: 100%; }

/* ============ Global search ============ */
/* ===== 全站搜索页（重设计）===== */
.s-page { background: #f8f8fc; min-height: calc(100vh - 52px); }

/* 搜索栏 */
.s-bar-wrap {
  display: flex; align-items: center; gap: 0;
  background: #fff; border: 1.5px solid #e8e8ef;
  border-radius: 12px; padding: 0 0 0 14px;
  margin: 14px 16px 0; transition: all .2s;
  overflow: hidden;
}
.s-bar-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(229,0,90,.08); }
.s-icon { width: 18px; height: 18px; color: #b0b4c1; flex-shrink: 0; }
#globalSearchInput { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: var(--ink); min-width: 0; padding: 11px 8px; }
#globalSearchInput::placeholder { color: #b0b4c1; }

/* 搜索按钮 */
.s-btn {
  background: #e5005a; color: #fff; border: none;
  font-size: 14px; font-weight: 600; padding: 10px 18px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: opacity .15s; letter-spacing: 1px;
}
.s-btn:active { opacity: .82; }

/* 搜索内容区 */
.s-body { padding: 28px 16px 24px; }

/* 空闲态（插画 + 热门搜索） */
.s-idle { display: flex; flex-direction: column; align-items: center; }
.s-idle-art { width: 180px; margin-bottom: 20px; }
.s-art-svg { width: 100%; height: auto; filter: drop-shadow(0 8px 20px rgba(229,0,90,.08)); }
.s-idle-text { font-size: 14px; color: #9ca3af; letter-spacing: .5px; margin-bottom: 28px; }

/* 热门搜索 */
.s-hot { width: 100%; max-width: 360px; }
.s-hot-label { font-size: 15px; font-weight: 700; color: #1f2937; margin-bottom: 14px; display: block; }
.s-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.s-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid #eeeef4;
  color: #374151; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: all .15s; justify-content: center;
}
.s-chip:active { transform: scale(.96); border-color: var(--brand); background: #fff5f7; }
.s-chip-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.s-chip-text { white-space: nowrap; }

/* 搜索中 */
.s-loading { display: flex; flex-direction: column; align-items: center; padding: 60px 0; gap: 12px; color: var(--ink-soft); font-size: 13.5px; }
.s-spin { width: 28px; height: 28px; animation: spin .8s linear infinite; stroke: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 搜索结果 */
.s-results { padding: 14px 16px 24px; }
.s-group { margin-bottom: 20px; }
.s-group-head { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; color: var(--ink); margin-bottom: 10px; padding-left: 2px; }
.sg-icon { font-size: 16px; }
.sg-count { font-size: 11px; color: #fff; background: linear-gradient(135deg, #f75fa3, #e5005a); border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.s-item {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border-radius: 14px; padding: 13px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  border: 1px solid #f1f5f9; margin-bottom: 10px; cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}
.s-item:active { transform: scale(.98); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.si-thumb { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; background: linear-gradient(135deg,#f1f5f9,#e2e8f0); flex-shrink: 0; }
.si-body { flex: 1; min-width: 0; }
.si-title { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.si-snippet {
  font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.si-tag { display: inline-block; margin-top: 5px; font-size: 11px; color: var(--brand-ink); background: var(--brand-soft); padding: 1px 8px; border-radius: 999px; }
mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ===== 通知公告页（卡片式设计）===== */
.nc-list { padding: 14px 16px 24px; background: #f8f8fc; min-height: calc(100vh - 52px); }
.nc-card {
  display: flex; align-items: stretch; gap: 12px;
  background: #fff; border-radius: 16px;
  border-left: 4px solid #60a5fa;
  padding: 18px 14px 18px 0; margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  cursor: pointer; transition: box-shadow .15s, transform .1s; position: relative;
}
.nc-card:active { transform: scale(.985); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* 左侧图标 */
.nc-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 14px; }
.nc-icon { width: 30px; height: 30px; }

/* 中间内容 */
.nc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nc-head { display: flex; align-items: center; gap: 8px; }
.nc-tag {
  font-size: 11px; font-weight: 600; color: #60a5fa; background: #eff6ff;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.nc-title { font-size: 15.5px; font-weight: 700; color: #111827; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-desc { font-size: 13px; color: #9ca3af; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.nc-time { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #b0b4c1; margin-top: 4px; }
.nc-clock-icon { width: 13px; height: 13px; flex-shrink: 0; }

/* 右箭头 */
.nc-arrow { width: 20px; height: 20px; flex-shrink: 0; align-self: center; margin-right: 2px; }

/* 空状态 */
.nc-empty { text-align: center; color: #c0c4cc; padding: 60px 0 40px; font-size: 14px; }

/* 公告详情 */
.nd-wrap { background: #fff; min-height: calc(100vh - 56px); }
.nd-page { padding: 20px 16px 32px; }
.nd-title { font-size: 22px; font-weight: 800; color: #111827; line-height: 1.4; margin-bottom: 12px; }
.nd-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9ca3af; margin-bottom: 18px; flex-wrap: wrap; }
.nd-meta-dot { color: #d1d5db; }
/* 正文 */
.nd-body { font-size: 15px; color: #374151; line-height: 1.8; word-break: break-all; }
.nd-body p { margin-bottom: 14px; }
.nd-body img { max-width: 100%; height: auto; display: block; border-radius: 10px; margin: 12px auto; }

/* ===== 通知公告列表（参考 UI：左图标 + 标题/摘要 + 右时间/红点）===== */
.notice-list-v3 { background: #f8f8fc; min-height: calc(100vh - 52px); }
.notice-item-v3 {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  padding: 16px;
  border-bottom: 1px solid #f0f0f5;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.notice-item-v3:active { background: #f8f8fc; }
.notice-item-v3.is-read .notice-item-title,
.notice-item-v3.is-read .notice-item-desc { color: #9ca3af; }
.notice-item-v3.is-read .notice-item-time { color: #c0c4cc; }
.notice-item-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notice-item-icon svg { width: 24px; height: 24px; }
.notice-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.notice-item-title {
  font-size: 15px; font-weight: 700; color: #111827;
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notice-item-desc {
  font-size: 13px; color: #6b7280; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notice-item-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px; flex-shrink: 0; min-width: 84px;
}
.notice-item-time { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.notice-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.15);
}
.notice-empty-v3 { text-align: center; color: #c0c4cc; padding: 80px 0 60px; font-size: 14px; background: #f8f8fc; }

/* 我的收藏分组标题 */
.fav-group-title {
  padding: 10px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ============ Profile 页面（品牌粉色调） ============ */
/* ===== 个人中心页面（重设计）===== */
.pf-page { background: #f8f8fc; min-height: 100vh; padding-bottom: 30px; }

/* 用户信息卡片 */
.pf-user-card {
  background: #fff; margin: 14px 16px; padding: 20px 18px;
  border-radius: 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  position: relative;
}
.pf-avatar-wrap { position: relative; flex-shrink: 0; }
.pf-avatar-ring {
  width: 68px; height: 68px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, #ff94c2, #e5005a);
  box-shadow: 0 4px 14px rgba(229,0,90,.25);
}
.pf-avatar-inner {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.pf-avatar-inner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pf-avatar-inner span { font-size:24px; font-weight:700; color:#e5005a; }
/* 右上角编辑按钮 */
.pf-edit-btn {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: #f3f4f7;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #6b7280; flex-shrink: 0;
  transition: all .15s;
}
.pf-edit-btn svg { width: 17px; height: 17px; }
.pf-edit-btn:active { background: #e5e7eb; color: var(--brand); }
.pf-info { flex:1; min-width:0; }
.pf-name { font-size:21px; font-weight:800; color:#111827; line-height:1.3; }
.pf-expire { font-size:13px; color:#6b7280; margin-top:7px; line-height:1.55; }
.pf-remain { color:#e5005a; font-weight:700; }

/* 白色圆角卡片 */
.pf-card {
  background: #fff; border-radius: 16px;
  margin: 0 16px 4px; padding: 4px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* 卡片内行项 */
.pf-row {
  display: flex; align-items: center; padding: 15px 14px;
  cursor: pointer; transition: background .12s;
}
.pf-row:not(:last-child) { border-bottom: 1px solid #f3f4f6; }
.pf-row:active { background: #fafafa; }
.pf-row-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 12px;
}
.pf-row-label { flex:1; font-size:15px; color:#1f2937; font-weight:500; }
.pf-row-hint { font-size:13px; color:#9ca3af; margin-right:4px; flex-shrink:0; }
.pf-row-count {
  font-size:14px; font-weight:600; color:#e5005a;
  margin-right:6px; min-width:22px; text-align:center; flex-shrink:0;
}
.pf-arrow { width:18px; height:18px; flex-shrink:0; }

/* 分组标题（品红左边框） */
.pf-section-title {
  padding: 18px 30px 10px; font-size:15px; font-weight:700;
  color:#111827; display:flex; align-items:center; gap:8px;
}
.pf-section-title::before {
  content:''; display:inline-block;
  width:3.5px; height:16px; background:#e5005a; border-radius:2px;
}

/* 退出登录按钮 */
.pf-logout-btn {
  display:block; width:calc(100% - 32px); margin:22px auto 32px;
  padding:13px 0; border-radius:999px;
  border:1.5px solid #e5e5eb; background:transparent;
  color:#e5005a; font-size:15px; font-weight:600;
  cursor:pointer; text-align:center; transition:all .15s;
}
.pf-logout-btn:active { background:#fef2f2; }

/* 收藏聚合入口（高亮行）：在 .pf-card 容器内与普通行同高同 padding，仅保留左侧红心图标 + 右侧数字徽标表达高亮 */
.pf-row-highlight {
  padding: 15px 14px;
}

/* 「我的内容」扁平化：去掉卡片外框，行间保留横线（与"账号与设置"统一风格） */
.pf-card-flat {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.pf-card-flat .pf-row-highlight {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 15px 14px;
}
.pf-card-flat .pf-row:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
}
.pf-row-body { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.pf-row-body .pf-row-hint { font-size:11px; color:#9ca3af; margin-top:2px; }

/* 统一收藏内页 Tab */
.fav-tabs-wrap {
  background: #fff;
  padding: 10px 16px 0;
  border-bottom: 0.5px solid #f5f5fa;
  position: sticky;
  top: 52px;
  z-index: 10;
}
.fav-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 10px;
}
.fav-tabs::-webkit-scrollbar { display: none; }
.fav-tab {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  font-size:13px;
  color:#6b7280;
  background:#f3f4f6;
  cursor:pointer;
  transition: all .15s;
  white-space: nowrap;
  border:none;
  line-height:1.4;
}
.fav-tab.active {
  background:#e5005a;
  color:#fff;
  font-weight:600;
}

/* 统一收藏项卡片 */
.all-fav-item {
  background:#fff;
  border-radius:12px;
  padding:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:background .12s;
  position:relative;
}
.all-fav-item:active { background:#fafafa; }
.all-fav-tag {
  flex-shrink:0;
  font-size:11px;
  padding:2px 10px;
  border-radius:10px;
  white-space:nowrap;
  font-weight:500;
}

/* 服务范围标签预览（表单内） */
.scope-tag-preview {
  display:inline-block;
  font-size:12px;
  padding:3px 10px;
  border-radius:12px;
  background:#F5EDE4;
  color:#8B7355;
  border:0.5px solid #E8DDD0;
}

/* ====== 我的资料页（紧凑布局）====== */
.mp-header-card {
  display:flex; align-items:center; gap:16px;
  background:#fff; margin:12px 16px; padding:16px;
  border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.mp-avatar-wrap { position:relative; flex-shrink:0; cursor:pointer; }
.mp-avatar-img {
  width:64px; height:64px; border-radius:50%; object-cover;
  border:2. solid #EDD9C0;
}
.mp-avatar-placeholder {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#D4A574,#C4956A);
  color:#fff; font-size:24px; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
}
.mp-edit-tag {
  position:absolute; bottom:-2px; right:-4px;
  background:#e5005a; color:#fff; font-size:10px;
  padding:2px 6px; border-radius:8px; line-height:1.2;
}
.mp-header-info { flex:1; display:flex; flex-direction:column; gap:8px; }
.mp-input-sm {
  width:100%; border:1px solid #E5E7EB; border-radius:10px;
  padding:10px 12px; font-size:14px; outline:none;
  transition:border-color .15s;
}
.mp-input-sm:focus { border-color:#D4A574; }

.mp-form-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;
  margin:4px 16px 0;
}
.mp-field { display:flex; flex-direction:column; gap:4px; }
.mp-field-full { grid-column:1 / -1; }
.mp-label {
  font-size:13px; color:#6B7280; font-weight:500;
}
.mp-input {
  width:100%; border:1px solid #E5E7EB; border-radius:10px;
  padding:11px 12px; font-size:14px; outline:none;
  transition:border-color .15s;
}
.mp-input:focus { border-color:#D4A574; }
.mp-tags-preview { display:flex; flex-wrap:wrap; gap:6px; min-height:0; }

.mp-qr-row {
  display:flex; align-items:center; gap:12px;
  padding:10px; border:1.5px dashed #D1D5DB; border-radius:12px;
  cursor:pointer; transition:background .15s;
}
.mp-qr-row:active { background:#F9FAFB; }
.mp-qr-img { width:48px; height:48px; border-radius:10px; object-cover; border:1px solid #E5E7EB; }
.mp-qr-placeholder {
  width:48px; height:48px; border-radius:10px;
  background:#F3F4F6; color:#9CA3AF; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed #D1D5DB;
}
.mp-qr-hint { font-size:13px; color:#D4A574; }

.mp-btn-row {
  display:flex; gap:10px; margin:20px 16px 32px;
}
.mp-btn {
  flex:1; padding:12px 0; border-radius:999px; font-size:15px;
  font-weight:600; cursor:pointer; text-align:center; transition:all .15s; border:none;
}
.mp-btn.primary {
  background:linear-gradient(135deg,#D4A574,#C4956A); color:#fff;
  box-shadow:0 3px 12px rgba(196,149,106,.35);
}
.mp-btn.primary:active { transform:scale(.97); opacity:.9; }
.mp-btn.secondary {
  background:#FAF6F1; color:#8B6F4E; border:1.5px solid #D4A574;
}
.mp-btn.secondary:active { background:#F2EAD9; }

/* ===== 个人信息卡页面 ===== */
/* ====== 信息卡弹窗（Modal）====== */
.modal-overlay {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.modal-overlay.show { opacity:1; pointer-events:auto; }

.modal-backdrop {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.modal-container {
  position:relative;
  z-index:1;
  width:92%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  background:transparent;
  border-radius:20px;
  padding:24px 16px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:scale(.92) translateY(20px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.show .modal-container { transform:scale(1) translateY(0); }

.modal-close {
  position:absolute;
  top:8px; right:8px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.9);
  color:#9B8776;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  z-index:2;
  transition:all .15s;
}
.modal-close:active { transform:scale(.9); background:#f0f0f0; }
.modal-close svg { width:18px; height:18px; }

.modal-card-wrap {
  width:100%;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(92,74,58,.18), 0 2px 8px rgba(92,74,58,.08);
  background:#fff;
}

.infocard-page {
  min-height:100vh;
  background:#f0ebe3;
  padding:16px 20px 40px;
}
.infocard-canvas {
  display:block;
  width:100%;
  border-radius:0;
}
.modal-save-btn {
  display:block;
  width:100%;
  margin-top:20px;
  padding:14px 0;
  border:none;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#7BA86C,#5E8B4E);
  box-shadow:0 3px 12px rgba(123,168,108,.35);
  cursor:pointer;
  text-align:center;
  transition:all .15s;
}
.modal-save-btn:active { transform:scale(.97); opacity:.9; }

/* 信息卡弹窗：底部按钮区（去修改资料 + 保存到相册 并排） */
.modal-btn-row {
  display:flex;
  gap:10px;
  margin-top:20px;
  width:100%;
}
.modal-btn-row .modal-save-btn {
  flex:1;
  margin-top:0;
  font-size:15px;
  padding:13px 0;
}
.modal-btn-edit {
  flex:1;
  padding:13px 0;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  color:#8B6F4E;
  background:#FAF6F1;
  border:1.5px solid #D4A574;
  cursor:pointer;
  text-align:center;
  transition:all .15s;
}
.modal-btn-edit:active { background:#F2EAD9; transform:scale(.97); }

/* ============ 工作台页面 ============ */
/* ====== 工作台页面（参考设计重构）====== */
.workbench-page { background: #f5f6fa; min-height: 100vh; padding-bottom: 30px; }

/* --- 头部（固定不滚动）--- */
.wb-header {
  background: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}
.wb-header .nav-back { position: static; }
.wb-title { flex: 1; font-size: 18px; font-weight: 700; color: #111827; margin: 0; text-align: center; }

/* --- 欢迎横幅 --- */
.wb-banner {
  margin: 12px 16px 0;
  padding: 24px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 40%, #c7d9fe 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wb-banner-text { flex: 1; min-width: 0; }
.wb-banner-greet { font-size: 20px; font-weight: 800; color: #1e3a5f; margin-bottom: 4px; letter-spacing: 0.5px; }
.wb-banner-sub { font-size: 13px; color: #4b6cb7; line-height: 1.5; }
.wb-banner-art {
  width: 110px; height: 80px;
  flex-shrink: 0;
  position: relative;
}
.wb-banner-art svg { width: 100%; height: 100%; }
/* 装饰圆点 */
.wb-banner::before {
  content: '';
  position: absolute;
  right: -10px; bottom: -10px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(147,197,253,.35);
}
.wb-banner::after {
  content: '';
  position: absolute;
  right: 70px; top: -8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(191,219,254,.45);
}

/* --- 分组区块 --- */
.wb-section { margin-top: 20px; padding: 0 16px; }
.wb-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  padding-left: 12px;
  position: relative;
  margin-bottom: 12px;
  line-height: 1.3;
}
.wb-section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3.5px;
  border-radius: 2px;
  background: var(--brand, #e5005a);
}

/* --- 功能卡片网格（内容创作 / 工具应用）--- */
.wb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.wb-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.wb-card:active { transform: scale(.96); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wb-card-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wb-card-icon svg { width: 26px; height: 26px; }
.wb-card-name { font-size: 13px; color: #1f2937; font-weight: 600; text-align: center; line-height: 1.3; }

/* 联系客服卡片 */
.contact-card {
  border: 1px solid #f0f0f0;
}
.contact-action {
  transition: background .2s;
}
.contact-action:active {
  background: #dcfce7;
}

/* ===== 徽章 (badge) ===== */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.7; }
.badge-blue { background: #fff0f6; color: #2563eb; }
.badge-purple { background: #f5f3ff; color: #7c3aed; }
.badge-green { background: #fff0f6; color: #e5005a; }
.badge-gray { background: #f1f5f9; color: #64748b; }
.badge-orange { background: #fff0f6; color: #d97706; }

/* ===== 资料下载 (Materials) ===== */
.material-card { cursor: pointer; transition: box-shadow .18s, transform .18s; }
.material-card:active { transform: scale(.99); }
.mat-thumb { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mat-thumb-ico { font-size: 22px; line-height: 1; }
.mat-thumb-label { font-size: 10px; font-weight: 700; }
.mat-image { background: #fff0f6; color: #e5005a; }
.mat-pdf { background: #fef2f2; color: #dc2626; }
.mat-word { background: #fff0f6; color: #2563eb; }
.mat-excel { background: #fff0f6; color: #c4004d; }
.mat-ppt { background: #fff0f6; color: #d97706; }
.mat-psd { background: #f5f3ff; color: #7c3aed; }
.mat-video { background: #eef2ff; color: #4f46e5; }
.mat-file { background: #f1f5f9; color: #64748b; }
.mat-dl { width: 38px; height: 38px; border-radius: 50%; background: #f5f3ff; color: #7c3aed; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mat-dl:active { background: #ede9fe; }
.mat-prev-box { margin: 10px 0 4px; max-height: 60vh; overflow: auto; background: #f8fafc; border-radius: 12px; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.mat-prev-img { max-width: 100%; max-height: 60vh; display: block; }
.mat-prev-media { max-width: 100%; max-height: 60vh; }
.mat-prev-frame { width: 100%; height: 56vh; border: none; }
.mat-prev-fallback { text-align: center; padding: 24px 12px; color: var(--ink-soft); }
.mat-prev-ico { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.mat-prev-info { text-align: center; margin-top: 6px; }

/* ===== 话术素材 (Scripts) ===== */
.script-card { cursor: pointer; transition: box-shadow .18s, transform .18s; }
.script-card:active { transform: scale(.99); }
.script-card-top { display:flex; align-items:flex-start; gap:12px; }
.script-card-thumb { flex-shrink:0; width:72px; }
.script-thumb-box { width:72px; height:72px; border-radius:16px; background:linear-gradient(135deg,#f75fa3,#e5005a); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(229,0,90,.18); }
.script-card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.script-card-main-line { display:flex; align-items:center; gap:8px; }
.script-title-text { font-size:15px; font-weight:800; color:#111827; line-height:1.35; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.script-card-tags { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.script-tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; line-height:1.2; }
.script-tag svg { flex-shrink:0; }
.script-tag-cat { background:#fff0f6; color:#c4004d; }
.script-tag-status.todo { background:#eff6ff; color:#2563eb; }
.script-tag-status.learned { background:#f3e8ff; color:#7c3aed; }
.script-tag-fav { background:#dcfce7; color:#16a34a; }
.script-tag-foot { background:#f3f4f6; color:#6b7280; font-size:10.5px; padding:2px 8px; }
.script-content { line-height:1.55; max-height:3.1em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:pre-wrap; word-break:break-word; color:#6b7280; font-size:12px; }
.script-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px dashed #f3e4eb; }
.script-card-footer-left { display:flex; align-items:center; gap:6px; flex:1; min-width:0; overflow:hidden; flex-wrap:wrap; }
.script-go-learn { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 14px; border-radius:999px; border:1px solid #ffd6e7; background:#fff0f6; color:#e5005a; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; line-height:1.2; }
.script-go-learn:active { background:#ffe0ef; transform:scale(.97); }
.script-go-review { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 14px; border-radius:999px; border:1px solid #ddd6fe; background:#f5f3ff; color:#7c3aed; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; line-height:1.2; }
.script-go-review:active { background:#ede9fe; transform:scale(.97); }
.script-go-learn-icon { transition:transform .2s; }
.script-card:active .script-go-learn-icon { transform:translateX(2px); }
.script-attach { font-size: 11px; color: #c4004d; background: #fff0f6; padding: 1px 7px; border-radius: 6px; flex-shrink: 0; }
.script-status-tab { flex: 0 0 auto; padding: 5px 2px 4px; font-size: 13px; color: #6b7280; cursor: pointer; transition: all .15s; border-bottom: 2px solid transparent; margin-right: 16px; }
.script-status-tab.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
#scriptStatusTabs { display: flex; align-items: center; overflow-x: auto; gap: 8px; padding: 4px 0; scrollbar-width: none; -ms-overflow-style: none; }
#scriptStatusTabs::-webkit-scrollbar { display: none; }
.script-actions { flex-wrap: wrap; }
.learn-btn, .fav-btn { font-size: 12px; padding: 5px 13px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: all .15s; line-height: 1.2; }
.learn-btn.active { background: #fff0f6; border-color: #fdba74; color: #c4004d; }
.learn-btn.learned.active { background: #fff0f6; border-color: #ff94c2; color: #c4004d; }
.fav-btn.active { background: #fef3c7; border-color: #fcd34d; color: #d97706; }
.script-detail-content { word-break: break-word; font-size: 14px; line-height: 1.85; color: #374151; max-height: 52vh; overflow: auto; background: #f9fafb; border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.script-detail-content p { margin: 0 0 10px; }
.script-detail-content p:last-child { margin-bottom: 0; }
.script-detail-content h1, .script-detail-content h2, .script-detail-content h3, .script-detail-content h4 { margin: 14px 0 8px; font-weight: 700; color: #111827; }
.script-detail-content h1 { font-size: 18px; }
.script-detail-content h2 { font-size: 16px; }
.script-detail-content h3 { font-size: 15px; }
.script-detail-content ul, .script-detail-content ol { margin: 8px 0; padding-left: 22px; }
.script-detail-content li { margin-bottom: 4px; }
.script-detail-content blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid #e5005a; background: #fff0f6; color: #6b7280; }
.script-detail-content img { max-width: 100%; border-radius: 8px; display: block; margin: 8px 0; }
.script-detail-content a { color: #e5005a; text-decoration: underline; }
.script-detail-actions { display: flex; gap: 12px; margin-bottom: 4px; }
.script-detail-actions .learn-btn,
.script-detail-actions .fav-btn { flex: 1; padding: 14px 8px; font-size: 14px; font-weight: 700; border-radius: 14px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #6b7280; cursor: pointer; transition: all .15s; line-height: 1.2; }
.script-detail-actions .learn-btn:active,
.script-detail-actions .fav-btn:active { transform: scale(.98); }
.script-detail-actions .learn-btn.active { background: linear-gradient(135deg, #f75fa3, #e5005a); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(229,0,90,.25); }
.script-detail-actions .fav-btn.active { background: linear-gradient(135deg, #fbbf24, #f59e0b); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.25); }
/* 已学习完成态：置灰不可点，与「完成学习」主色形成明确区分 */
.script-detail-actions .learn-btn.is-done,
.script-detail-actions .learn-btn:disabled { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; box-shadow: none; cursor: default; opacity: 1; }
.script-detail-actions .learn-btn:disabled:active { transform: none; }

/* ==================== 身高测评样式（参考设计重构）==================== */
.height-page { background: #f5f6fa; min-height: 100vh; padding-bottom: 30px; }

/* --- 品红渐变头部 --- */
.ht-header {
  background: linear-gradient(135deg, #e5005a 0%, #f75fa3 50%, #c4004d 100%);
  padding: 0 16px;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.ht-header-sm {
  padding: 10px 16px !important;
  background: linear-gradient(135deg, #e5005a, #c4004d) !important;
}

.ht-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  position: relative;
  z-index: 2;
}
.ht-time { font-size: 13px; opacity: .9; font-weight: 600; letter-spacing: 1px; }
.ht-title { font-size: 17px; font-weight: 700; letter-spacing: 1px; }

/* 吉祥物（已移除，保留样式备用） */
.ht-mascot {
  display: none;
}

/* --- 儿童选择卡片 --- */
.ht-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 12px 14px 0;
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(229,0,90,.12);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: box-shadow .2s;
}
.ht-card:active { box-shadow: 0 2px 12px rgba(229,0,90,.15); }
.ht-card-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff0f6, #fce7f3);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.ht-card-icon img { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; }
.ht-card-body { flex: 1; min-width: 0; }
.ht-card-title { font-size: 16px; font-weight: 700; color: #111827; }
.ht-card-desc { font-size: 12.5px; color: #9ca3af; margin-top: 3px; }
.ht-arrow { font-size: 20px; color: #d1d5db; flex-shrink: 0; }

/* --- 快捷操作卡片（3列）--- */
.ht-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px 16px 0;
}
.ht-action-btn {
  background: #fff;
  border-radius: 16px;
  padding: 18px 8px 16px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.ht-action-btn:active { transform: scale(.96); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.ht-action-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  font-size: 24px;
}
.ht-action-icon svg { width: 26px; height: 26px; }
.ht-action-label { font-size: 13.5px; font-weight: 600; color: #111827; line-height: 1.3; }
.ht-action-desc { font-size: 11px; color: #9ca3af; margin-top: 4px; line-height: 1.3; }

/* 快捷操作图标底色 */
.ht-icon-eval { background: linear-gradient(135deg, #fff0f6, #fce7f3); color: #e5005a; }
.ht-icon-baby { background: linear-gradient(135deg, #eef6ff, #dbeafe); color: #2563eb; }
.ht-icon-archive { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #7c3aed; }
.ht-icon-orange { filter: none; }
.ht-icon-pink { filter: none; }
.ht-icon-blue { filter: none; }
.ht-icon-blue-bg { background: #fff0f6; }
.ht-icon-pink-bg { background: #ffe0ed; }
.ht-icon-orange-bg { background: #fff7ed; }

/* --- 分区标题（左侧品牌色竖条）--- */
.ht-section { padding: 22px 16px 0; }
.ht-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
  padding-left: 12px;
  position: relative;
}
.ht-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  background: linear-gradient(180deg, #e5005a, #f75fa3);
  border-radius: 2px;
}
.ht-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ht-tag-green {
  font-size: 11.5px;
  background: #fff0f6;
  color: #c4004d;
  padding: 3px 11px;
  border-radius: 999px;
  font-weight: 600;
}

/* --- 成长服务列表 --- */
.ht-service-list { display: flex; flex-direction: column; gap: 10px; }
.ht-service-item {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ht-service-item:active { background: #fafafa; }
.ht-service-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ht-service-icon svg { width: 24px; height: 24px; }
.ht-icon-orange-bg { background: linear-gradient(135deg, #fff0f6, #fce7f3); }
.ht-icon-pink-bg { background: linear-gradient(135deg, #ffe0ed, #fff0f6); }
.ht-icon-blue-bg { background: linear-gradient(135deg, #f5f3ff, #ede9fe); }
.ht-service-body { flex: 1; min-width: 0; }
.ht-service-name { font-size: 14.5px; font-weight: 600; color: #111827; }
.ht-service-desc { font-size: 12px; color: #9ca3af; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 成长小贴士 --- */
.ht-tips-list { display: flex; flex-direction: column; gap: 10px; }
.ht-tip-item {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ht-tip-item:active { background: #fafafa; }
.ht-tip-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
}
.ht-tip-icon svg { width: 24px; height: 24px; }
.ht-tip-body { flex: 1; min-width: 0; }
.ht-tip-title { font-size: 14.5px; font-weight: 600; color: #111827; }
.ht-tip-desc { font-size: 12px; color: #6b7280; margin-top: 3px; line-height: 1.45; }
.ht-tip-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #9ca3af;
  font-size: 14px;
  font-style: normal;
}

/* 表单页 */
.ht-subtitle { font-size: 13px; color: #666; padding: 0 16px 12px; }
.ht-page-title { font-size: 20px; font-weight: 700; color: #111; padding: 0 16px 4px; }
.ht-page-subtitle { font-size: 13px; color: #9ca3af; padding: 0 16px 16px; }
.ht-manage-subtitle { font-size: 13px; color: #9ca3af; padding: 0 16px 12px; }

.ht-form { padding: 0 16px; margin-top: 24px; }
.ht-form-title { font-size: 15px; font-weight: 700; color: #374151; margin-bottom: 12px; }
.ht-form-row { display: flex; align-items: center; margin-bottom: 14px; gap: 8px; position: relative; }
.ht-label { font-size: 14px; color: #374151; font-weight: 500; white-space: nowrap; min-width: 80px; }
.ht-required { color: #ef4444; margin-right: 2px; }
.ht-input { flex: 1; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; transition: border-color .2s; }
.ht-input:focus { border-color: #e5005a; box-shadow: 0 0 0 3px rgba(229,0,90,.12); }
.ht-input-right { text-align: right; }
.ht-input-small { width: 60px !important; text-align: center; flex: none; }
.ht-unit { font-size: 13px; color: #6b7280; white-space: nowrap; }
.ht-static-value { font-size: 14px; color: #374151; font-weight: 500; }

/* 预设头像选择 */
.ht-avatar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 4px 0 8px; }
.ht-avatar-opt { aspect-ratio: 3 / 2; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 48px; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.ht-avatar-opt:active { transform: scale(.94); }
.ht-avatar-opt.active { border-color: #e5005a; box-shadow: 0 0 0 3px rgba(229,0,90,.15); }

/* 性别选择 */
.ht-gender-group { display: flex; gap: 12px; flex: 1; }
.ht-gender-btn { flex: 1; padding: 9px 0; border-radius: 10px; border: 2px solid #e5e7eb; background: #fff; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all .2s; outline: none; }
.ht-gender-btn.active { border-color: #e5005a; background: #fff0f6; color: #a30040; font-weight: 600; }

/* 骨龄 */
.ht-bone-age { display: flex; align-items: center; gap: 6px; flex: 1; }
.ht-bone-age span { font-size: 13px; color: #6b7280; }

/* 提交按钮 */
.ht-submit-btn { width: 100%; padding: 14px; border-radius: 25px; background: linear-gradient(135deg,#c4004d,#e5005a); color: #fff; font-size: 16px; font-weight: 600; border: none; cursor: pointer; margin-top: 20px; letter-spacing: 1px; transition: opacity .2s; }
.ht-submit-btn:active { opacity: .85; }
.ht-btn-secondary { padding: 12px 24px; border-radius: 20px; background: #fff; color: #6b7280; font-size: 14px; font-weight: 500; border: 1px solid #e5e7eb; cursor: pointer; }

/* 遗传信息展示 */
.ht-genetic-display { display: flex; gap: 12px; }
.ht-genetic-item { flex: 1; background: #f9fafb; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 8px; }
.ht-genetic-icon { font-size: 24px; }
.ht-genetic-text { flex: 1; }
.ht-genetic-label { font-size: 12px; color: #6b7280; }
.ht-genetic-value { font-size: 15px; font-weight: 600; color: #111; }

/* 说明框 */
.ht-note-box { display: flex; gap: 8px; background: #fffbeb; border-radius: 12px; padding: 12px; margin-top: 16px; border: 1px solid #fef3c7; }
.ht-note-icon { font-size: 18px; flex-shrink: 0; }
.ht-note-text { font-size: 12px; color: #92400e; line-height: 1.6; }

/* 评估表单-儿童卡片 */
.ht-eval-child-card { margin-top: 16px; }
.ht-eval-child-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.ht-eval-avatar { width: 42px; height: 42px; border-radius: 50%; background: #fff0f6; display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; flex-shrink: 0; }
.ht-eval-avatar img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.ht-eval-child-name { font-size: 15px; font-weight: 600; color: #111; }
.ht-eval-child-age { font-size: 12px; color: #6b7280; margin-top: 2px; }
.ht-switch-btn { font-size: 13px; color: #e5005a; font-weight: 500; white-space: nowrap; cursor: pointer; }

/* ---- 儿童管理页面（重新设计）---- */
.cm-list { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; }

/* 儿童卡片 */
.cm-card {
  background: #fff;
  border-radius: 16px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  border-left: 4px solid transparent;
  transition: box-shadow .2s, border-color .2s;
  cursor: pointer;
}
.cm-card:active { transform: scale(.98); }
.cm-card.active {
  border-left-color: #e5005a;
  box-shadow: 0 3px 16px rgba(229,0,90,.12);
}

.cm-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff0f6, #fce7f3);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
}
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cm-info { flex: 1; min-width: 0; }
.cm-name-row { display: flex; align-items: center; gap: 8px; }
.cm-name { font-size: 16px; font-weight: 700; color: #111827; }
.cm-badge {
  font-size: 11px;
  background: linear-gradient(135deg, #e5005a, #f75fa3);
  color: #fff;
  padding: 2px 10px;
  border-radius: 99px;
  font-weight: 500;
}
.cm-meta {
  font-size: 13px;
  color: #9ca3af;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cm-dot.boy { background: #3b82f6; }
.cm-dot.girl { background: #f75fa3; }

.cm-edit-btn {
  font-size: 13px;
  color: #6b7280;
  background: #f3f4f6;
  border: none;
  padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.cm-edit-btn:active { background: #e5e7eb; }

/* 添加新宝贝卡片 */
.cm-add-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
  cursor: pointer;
  border: 1.5px dashed #d1d5db;
  transition: border-color .2s, background .15s;
}
.cm-add-card:active { background: #f9fafb; border-color: #e5005a; }

.cm-plus {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  color: #e5005a;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  font-weight: 300;
  flex-shrink: 0;
}

.cm-add-info { flex: 1; min-width: 0; }
.cm-add-name { font-size: 15px; font-weight: 600; color: #374151; }
.cm-add-desc { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.cm-arrow { color: #d1d5db; font-size: 18px; flex-shrink: 0; }

/* ---- 身高报告 ---- */
.ht-report-header { background: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f3f4f6; }
.ht-report-child { display: flex; align-items: center; gap: 8px; }
.ht-rpt-avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff0f6; display: flex; align-items: center; justify-content: center; font-size: 18px; overflow: hidden; flex-shrink: 0; }
.ht-rpt-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ht-rpt-name { font-size: 15px; font-weight: 600; color: #111; }
.ht-rpt-gender { font-size: 12px; color: #3b82f6; font-weight: 500; }
.ht-rpt-sep { color: #d1d5db; margin: 0 4px; }
.ht-rpt-age { font-size: 12px; color: #6b7280; }
.ht-report-no { font-size: 11px; color: #9ca3af; }

.ht-report-section { background: #fff; margin: 10px 16px 0; border-radius: 14px; padding: 16px; }
.ht-report-heading { font-size: 15px; font-weight: 600; color: #111; margin-bottom: 10px; }
.ht-result-main { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ht-result-diff { font-size: 26px; font-weight: 800; color: #e5005a; }
.ht-result-pct { font-size: 13px; color: #f59e0b; font-weight: 500; }
.ht-data-source { font-size: 11px; color: #9ca3af; line-height: 1.6; margin-top: 8px; }

/* 图表 */
.ht-bar-chart, .ht-three-bars, .ht-curve-chart { margin-top: 12px; }
.ht-chart-svg { width: 100%; height: auto; display: block; }
.ht-axis-label { font-size: 10px; fill: #9ca3af; }
.ht-axis-label-xs { font-size: 9px; fill: #9ca3af; }
.ht-bar-label { font-size: 11px; font-weight: 600; }
.ht-bar-name { font-size: 10px; fill: #6b7280; }
.ht-bar-label-sm { font-size: 10px; font-weight: 600; }
.ht-bar-name-xs { font-size: 9px; fill: #6b7280; }
.ht-point-label { font-size: 11px; font-weight: 700; }

.ht-predicted-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ht-predicted-value { font-size: 30px; font-weight: 800; color: #e5005a; }
.ht-predicted-tag { font-size: 13px; color: #ef4444; }
.ht-predicted-note { font-size: 11px; color: #9ca3af; line-height: 1.6; margin-top: 6px; }
.ht-three-title { text-align: center; font-size: 12px; color: #6b7280; margin-bottom: 8px; }

/* 生长曲线 */
.ht-curve-note { font-size: 11px; color: #9ca3af; margin-bottom: 8px; }
.ht-legend { display: flex; justify-content: center; gap: 14px; margin-bottom: 8px; }
.ht-leg-item { font-size: 11px; color: #374151; display: flex; align-items: center; gap: 4px; }
.ht-leg-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* BMI */
.ht-bmi-header { margin-bottom: 8px; }
.ht-bmi-title { font-size: 16px; font-weight: 700; color: #111; }
.ht-bmi-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ht-bmi-value { font-size: 30px; font-weight: 800; color: #111; }
.ht-bmi-badge { font-size: 13px; padding: 3px 10px; border-radius: 8px; font-weight: 600; }
.ht-bmi-badge.severe_low, .ht-bmi-badge.moderate_low, .ht-bmi-badge.mild_low { background: #dbeafe; color: #1d4ed8; }
.ht-bmi-badge.normal { background: #dcfce7; color: #15803d; }
.ht-bmi-badge.mild_fat { background: #fef3c7; color: #b45309; }
.ht-bmi-badge.moderate_fat { background: #fed7aa; color: #c2410c; }
.ht-bmi-badge.severe_fat, .ht-bmi-badge.obese { background: #fecaca; color: #dc2626; }
.ht-bmi-desc { font-size: 12px; color: #6b7280; line-height: 1.75; margin-bottom: 12px; }
.ht-bmi-bar-wrap { position: relative; padding: 8px 0 24px; }
.ht-bmi-bar-track { display: flex; border-radius: 10px; overflow: hidden; height: 52px; }
.ht-bmi-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: #fff; line-height: 1.3; min-width: 0; flex: 1; white-space: nowrap; }
.ht-bmi-indicator { position: absolute; top: -4px; font-size: 14px; color: #e5005a; transform: translateX(-50%); }

/* 综合分析 */
.ht-analysis-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ht-analysis-bar { width: 4px; height: 18px; background: #e5005a; border-radius: 2px; }
.ht-analysis-title { font-size: 16px; font-weight: 700; color: #111; }
.ht-analysis-result { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 10px; }
.ht-analysis-badge { font-size: 12px; padding: 3px 10px; border-radius: 99px; margin-left: 6px; font-weight: 600; }
.ht-ranking-box { background: #fffbeb; border-radius: 10px; padding: 12px; font-size: 13px; color: #92400e; line-height: 1.6; margin-bottom: 10px; }
.ht-advice-text { font-size: 13px; color: #4b5563; line-height: 1.8; }
.ht-advice-text span { color: #e5005a; font-weight: 600; }

/* 报告底部按钮 */
.ht-report-footer { display: flex; gap: 12px; padding: 20px 16px 24px; justify-content: center; }
.ht-report-footer .ht-btn-secondary { flex: 1; max-width: 180px; padding: 14px 0; border-radius: 25px; background: #fff; color: #e5005a; font-size: 15px; font-weight: 600; border: 1.5px solid #e5005a; cursor: pointer; text-align: center; transition: all .2s; width: auto; margin-top: 0; }
.ht-report-footer .ht-btn-secondary:active { background: #fff0f6; transform: scale(.97); }
.ht-report-footer .ht-submit-btn { flex: 1; max-width: 220px; padding: 14px 0; border-radius: 25px; background: linear-gradient(135deg,#c4004d,#e5005a); color: #fff; font-size: 15px; font-weight: 600; border: none; cursor: pointer; letter-spacing: 1px; transition: opacity .2s; text-align: center; width: auto; margin-top: 0; }

/* 历史记录 */
.ht-search-bar { display: flex; align-items: center; gap: 8px; margin: 12px 16px 4px; padding: 0 14px; background: #f5f5f5; border-radius: 999px; border: 1px solid #eee; }
.ht-search-icon { width: 18px; height: 18px; flex-shrink: 0; color: #9ca3af; }
.ht-search-input { flex: 1; border: none; background: transparent; padding: 10px 0; font-size: 14px; color: #333; outline: none; }
.ht-search-input::placeholder { color: #bfbfbf; }
.ht-history-list { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.ht-history-card { background: #fff; border-radius: 14px; padding: 16px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.ht-hist-name { font-size: 16px; font-weight: 600; color: #111; margin-bottom: 6px; }
.ht-hist-data { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
.ht-hist-foot { display: flex; justify-content: space-between; align-items: center; }
.ht-hist-status { font-size: 12px; background: #fff0f6; color: #c4004d; padding: 3px 10px; border-radius: 99px; font-weight: 500; }
.ht-hist-link { font-size: 13px; color: #f59e0b; font-weight: 500; }

.ht-empty { text-align: center; padding: 60px 20px; color: #9ca3af; font-size: 14px; }

/* 全局加载遮罩 */
.app-loading { position: fixed; inset: 0; background: rgba(255,255,255,.72); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s; }
.app-loading.show { opacity: 1; }
.app-loading-spinner { width: 38px; height: 38px; border: 4px solid #ffd9e8; border-top-color: #e5005a; border-radius: 50%; animation: appSpin .8s linear infinite; }
.app-loading-text { font-size: 13px; color: #6b7280; }
@keyframes appSpin { to { transform: rotate(360deg); } }

/* ============ 页面转场动画（跳转/返回） ============ */
.page-enter, .page-enter-forward, .page-enter-back { will-change: transform, opacity; }
.page-enter { animation: pageFadeUp .24s cubic-bezier(.22,.61,.36,1); }
.page-enter-forward { animation: pageSlideIn .28s cubic-bezier(.22,.61,.36,1); }
.page-enter-back { animation: pageSlideBack .28s cubic-bezier(.22,.61,.36,1); }
@keyframes pageFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageSlideIn { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pageSlideBack { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .page-enter, .page-enter-forward, .page-enter-back { animation: none; }
}

/* ============ 骨架屏（加载占位） ============ */
.skeleton {
  background: linear-gradient(90deg, #f1f1f4 25%, #e7e8ec 37%, #f1f1f4 63%);
  background-size: 400% 100%;
  animation: skShimmer 1.3s ease infinite;
  border-radius: 8px;
}
@keyframes skShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-line { height: 12px; border-radius: 6px; }
.sk-block { border-radius: 12px; }
.sk-list { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }
.sk-card-row { display: flex; align-items: center; gap: 12px; }
.sk-circle { border-radius: 50%; flex-shrink: 0; }

/* ============ 按钮 Loading 态 ============ */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; user-select: none; }
.btn-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.55); border-top-color: #fff;
  border-radius: 50%; animation: appSpin .7s linear infinite;
}
.btn-loading.btn-loading-dark::after { border-color: rgba(0,0,0,.18); border-top-color: #e5005a; }

/* ============ 点击水波纹 ============ */
.ripple { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(229,0,90,.16);
  transform: scale(0); animation: rippleAnim .6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(2.6); opacity: 0; } }

/* ============ 收藏/点赞 心跳 ============ */
.pop-heart { animation: popHeart .42s ease; }
@keyframes popHeart { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 65% { transform: scale(.88); } 100% { transform: scale(1); } }

/* ===== 盈利测算页面（参考 UI 重构） ===== */
.profit-page { min-height: 100vh; background: #f5f6f8; padding-bottom: 24px; }
.profit-page .sub-header { border-bottom: 1px solid #ffe0ed; }
.profit-card {
  margin: 12px 16px; background: #fff; border-radius: 16px;
  padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.profit-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.profit-section-bar { width: 4px; height: 16px; background: #e5005a; border-radius: 2px; }
.profit-section-head h2 { font-size: 15px; font-weight: 700; color: #111827; margin: 0; }
.profit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.profit-field { display: flex; align-items: flex-start; gap: 8px; }
.pf-field-icon {
  width: 28px; height: 28px; border-radius: 8px; background: #fff0f6; color: #e5005a;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 18px;
}
.pf-field-icon svg { width: 16px; height: 16px; }
.pf-field-body { flex: 1; min-width: 0; }
.pf-field-body label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.pf-field-body input {
  width: 100%; height: 40px; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 0 10px; font-size: 14px; color: #111827; background: #fff; outline: none;
  transition: all .15s; -webkit-appearance: none; box-sizing: border-box;
}
.pf-field-body input:focus { border-color: #f75fa3; box-shadow: 0 0 0 3px rgba(236,72,153,.1); }
.profit-subtotal-card {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding: 12px 14px; background: #fff0f6; border-radius: 12px;
}
.pf-subtotal-left { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #111827; }
.pf-subtotal-icon {
  width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #e5005a;
  display: flex; align-items: center; justify-content: center;
}
.pf-subtotal-icon svg { width: 16px; height: 16px; }
.pf-subtotal-value { font-size: 18px; font-weight: 700; color: #e5005a; }
.profit-info-tip {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  padding: 10px 12px; background: #fff0f6; border-radius: 10px;
  font-size: 12px; color: #a30040; line-height: 1.5;
}
.pf-tip-icon { width: 16px; height: 16px; color: #e5005a; flex-shrink: 0; margin-top: 1px; }
.pf-tip-icon svg { width: 16px; height: 16px; }
.profit-result-card {
  margin: 12px 16px; background: #fff0f6; border-radius: 16px; padding: 6px 16px;
}
.profit-result-row {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
}
.profit-result-row + .profit-result-row { border-top: 1px dashed #f9a8d4; }
.pf-result-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #111827; font-weight: 600; }
.pf-result-icon {
  width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #e5005a;
  display: flex; align-items: center; justify-content: center;
}
.pf-result-icon svg { width: 16px; height: 16px; }
.pf-result-value { font-size: 22px; font-weight: 800; color: #e5005a; }
.pf-result-value small { font-size: 12px; font-weight: 500; color: #a30040; margin-left: 2px; }
.profit-disclaimer {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 16px 0;
  font-size: 11px; color: #9ca3af; line-height: 1.5; text-align: center;
}
.pf-disc-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: #9ca3af; }
.pf-disc-icon svg { width: 14px; height: 14px; }
/* ===== 海报设计 ===== */
.poster-tpl-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06); cursor:pointer; }
.poster-tpl-canvas-wrap { background:#f3f4f6; line-height:0; }
.poster-tpl-canvas { width:100%; height:auto; display:block; }
.poster-tpl-info { padding:10px 12px; }
.poster-editor { background:#f9fafb; min-height:100%; }
.poster-preview-wrap { display:flex; justify-content:center; background:#eef0f3; padding:12px; border-radius:16px; }
.poster-canvas { width:100%; max-width:330px; height:auto; display:block; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.15); background:#fff; }
.poster-form input, .poster-form textarea { font-size:15px; }
.poster-cover-thumb { width:56px; height:56px; border-radius:10px; overflow:hidden; background:#f1f5f9; display:flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; flex-shrink:0; }
.poster-cover-thumb img { width:100%; height:100%; object-fit:cover; }
.album-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06); cursor:pointer; }
.album-img { width:100%; height:200px; object-fit:cover; display:block; background:#eee; }
.album-meta { padding:8px 10px; }

/* 海报模板卡片：类型徽标（P2#9） */
.poster-tpl-canvas-wrap { background:#f3f4f6; line-height:0; position:relative; }
.poster-tpl-badge {
  position:absolute; top:8px; left:8px; z-index:2;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:999px; line-height:1.5;
}
/* 正文字数计数与超长提示（P1#4） */
.poster-body-counter { font-size:12px; color:#9ca3af; margin-top:4px; text-align:right; }
.poster-body-counter.warn { color:#e11d48; font-weight:600; }
/* 高亮字段（P1#5） */
.poster-form .bg-pink-50 { background:#fdf2f8; }

/* 海报编辑：分组卡片与上传区块（2026-08-11） */
.poster-form { display:flex; flex-direction:column; gap:12px; }
.poster-section-card {
  background:#fff; border-radius:16px; padding:16px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.poster-section-head { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.poster-section-bar { width:4px; height:16px; background:#e5005a; border-radius:2px; }
.poster-section-head h2 { font-size:15px; font-weight:700; color:#111827; margin:0; }

.poster-field { margin-bottom:14px; }
.poster-field:last-child { margin-bottom:0; }
.poster-field label { display:block; font-size:13px; font-weight:500; color:#6b7280; margin-bottom:6px; }

.poster-upload-row { display:flex; align-items:center; gap:12px; }
.poster-upload-block { display:flex; flex-direction:column; align-items:center; gap:8px; }
.poster-upload-preview {
  width:72px; height:72px; border-radius:12px; overflow:hidden;
  background:#f1f5f9; display:flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; position:relative;
}
.poster-upload-preview img { width:100%; height:100%; object-fit:cover; }
.poster-upload-preview .empty { font-size:12px; color:#9ca3af; }
.poster-upload-btn {
  font-size:12px; color:#e5005a; border:1px solid #fbcfe8;
  background:#fff; border-radius:999px; padding:5px 12px; cursor:pointer;
  line-height:1.3; white-space:nowrap;
}
.poster-upload-btn:active { background:#fdf2f8; }
.poster-upload-btn.secondary { color:#6b7280; border-color:#e5e7eb; }
.poster-upload-btn.secondary:active { background:#f3f4f6; }

/* 顶部 Logo 上传区（方案 A：虚线可点击 + 图标提示） */
.poster-logo-uploader { display:flex; align-items:flex-start; gap:16px; }
.poster-logo-drop {
  width:88px; height:88px; flex-shrink:0; border-radius:14px;
  border:1.5px dashed #f0a6c4; background:#fff5f9; cursor:pointer;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:border-color .15s, background .15s;
}
.poster-logo-drop:hover { border-color:#e5005a; background:#ffe9f2; }
.poster-logo-drop:active { background:#ffe0ee; }
.poster-logo-drop img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.poster-logo-empty { display:flex; flex-direction:column; align-items:center; gap:6px; }
.poster-logo-icon { width:30px; height:30px; }
.poster-logo-empty span { font-size:11px; color:#e5005a; font-weight:500; }
.poster-logo-side { display:flex; flex-direction:column; justify-content:center; gap:12px; padding-top:2px; }
.poster-logo-hint { font-size:12px; color:#9ca3af; margin:0; line-height:1.4; }

.poster-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
.poster-info-grid .poster-upload-block { align-items:center; }

.poster-form-actions { margin-top:4px; }
.poster-form-actions .btn-primary {
  box-shadow:0 6px 18px rgba(229,0,90,0.25);
}

/* 表单校验提示 */
.poster-field-error { font-size:12px; color:#dc2626; margin-top:6px; }
.poster-input-error { border-color:#fca5a5 !important; background:#fef2f2; }

/* 加载更多（P2#8） */
.poster-loadmore { display:block; margin:14px auto 24px; padding:10px 28px; border-radius:999px; border:1px solid #f9a8d4; background:#fff; color:#db2777; font-size:14px; font-weight:600; cursor:pointer; }
.poster-loadmore:active { background:#fdf2f8; }
/* 保存成功选择弹窗（P1#7） */
.poster-saved-modal { z-index:80; align-items:flex-end; justify-content:center; }
.poster-saved-modal .poster-saved-card { background:#fff; width:100%; max-width:460px; border-radius:20px 20px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); text-align:center; }
.poster-saved-title { font-size:18px; font-weight:800; color:#111827; }
.poster-saved-tip { font-size:13px; color:#6b7280; margin:8px 0 18px; }
.poster-saved-actions { display:flex; gap:10px; }
.poster-saved-actions .q-poster-btn { flex:1; }


/* ===== 身材测算 ===== */
.bodycalc-page { background:#f6f7fb; min-height:100%; padding-bottom:24px; }

/* 输入卡片 */
.bodycalc-input-card { background:#fff; border-radius:16px; margin:12px 16px; padding:18px 20px 22px; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.bodycalc-field { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid #f3f4f6; }
.bodycalc-field:last-of-type { border-bottom:none; }
.bc-field-icon { width:38px; height:38px; border-radius:50%; background:#fff0f5; color:#e5005a; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bc-field-main { flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bc-field-main label { font-size:16px; color:#111827; font-weight:500; }
.bc-unit { font-size:14px; color:#9ca3af; font-weight:400; margin-left:4px; }
.bc-field-main input { flex:1; font-size:16px; color:#111827; outline:none; border:none; background:transparent; text-align:right; min-width:0; }
.bc-field-main input::placeholder { color:#d1d5db; }
.bodycalc-calc-btn { width:100%; margin-top:18px; padding:14px; border-radius:28px; background:linear-gradient(135deg,#ff4d8d 0%,#e5005a 100%); color:#fff; font-size:17px; font-weight:700; border:none; cursor:pointer; letter-spacing:2px; box-shadow:0 4px 14px rgba(229,0,90,.25); }
.bodycalc-calc-btn:active { opacity:.9; }

/* 结果卡片 */
#bmi_result_area { margin:0 16px 16px; }
.bodycalc-result-card { background:#fff; border-radius:16px; padding:22px 20px; box-shadow:0 2px 12px rgba(0,0,0,.05); text-align:center; }
.bmi-result-header { display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:8px; }
.bmi-result-label { font-size:15px; color:#6b7280; }
.bmi-result-value { font-size:44px; font-weight:900; color:#e5005a; background:transparent; line-height:1; }
.bmi-result-value.bmi-thin { color:#2563eb; background:transparent; }
.bmi-result-value.bmi-normal { color:#16a34a; background:transparent; }
.bmi-result-value.bmi-overweight { color:#d97706; background:transparent; }
.bmi-result-value.bmi-obese { color:#dc2626; background:transparent; }
.bmi-result-value.bmi-severe { color:#991b1b; background:transparent; }
.bmi-result-verdict { display:inline-block; padding:5px 18px; border-radius:20px; font-size:14px; font-weight:700; margin:12px 0 8px; }
.bmi-detail-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:#6b7280; padding-top:14px; border-top:1px dashed #e5e7eb; }
.bmi-detail-row strong { color:#111827; }
.bmi-detail-row.bmi-detail-highlight { padding-top:14px; margin-top:8px; }
.bmi-detail-row.bmi-detail-highlight strong { font-size:19px; font-weight:800; color:#e5005a; }

/* BMI 标签颜色 */
.bmi-thin { background:#dbeafe; color:#2563eb; }
.bmi-normal { background:#dcfce7; color:#16a34a; }
.bmi-overweight { background:#fef3c7; color:#d97706; }
.bmi-obese { background:#fee2e2; color:#dc2626; }
.bmi-severe { background:#fecaca; color:#991b1b; }

/* 彩色分段刻度条 + 指针 */
.bmi-scale { margin:18px 2px 10px; }
.bmi-scale-bar { position:relative; }
.bmi-scale-track { display:flex; height:22px; border-radius:11px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.bmi-scale-seg { display:block; height:100%; border-right:2px solid #fff; box-sizing:border-box; }
.bmi-scale-seg:last-child { border-right:none; }
.bmi-scale-seg.bmi-thin { background:#93c5fd; }
.bmi-scale-seg.bmi-normal { background:#86efac; }
.bmi-scale-seg.bmi-overweight { background:#fcd34d; }
.bmi-scale-seg.bmi-obese { background:#fca5a5; }
.bmi-scale-seg.bmi-severe { background:#f87171; }
.bmi-scale-pointer { position:absolute; top:-12px; transform:translateX(-50%); z-index:3; transition:left .25s ease; }
.bmi-scale-pointer::before { content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:15px solid #111827; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); z-index:4; }
.bmi-scale-pointer::after { content:''; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:6px; height:30px; background:#111827; border-radius:3px; box-shadow:0 0 0 2px #fff, 0 1px 5px rgba(0,0,0,.3); z-index:3; }
.bmi-scale-labels { position:relative; height:16px; margin-top:10px; }
.bmi-scale-label { position:absolute; transform:translateX(-50%); font-size:11px; color:#9ca3af; }
.bmi-scale-label:first-child { transform:translateX(0); }
.bmi-scale-label:last-child { transform:translateX(-100%); }

/* 说明表色点 */
.bmi-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.bmi-dot.bmi-thin { background:#2563eb; }
.bmi-dot.bmi-normal { background:#16a34a; }
.bmi-dot.bmi-overweight { background:#d97706; }
.bmi-dot.bmi-obese { background:#dc2626; }
.bmi-dot.bmi-severe { background:#991b1b; }

/* 参考卡片 */
.bodycalc-ref-card { background:#fff; border-radius:16px; margin:12px 16px; box-shadow:0 2px 12px rgba(0,0,0,.04); overflow:hidden; }
.bodycalc-ref-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; cursor:pointer; user-select:none; }
.ref-header-left { display:flex; align-items:center; gap:12px; }
.ref-icon { width:36px; height:36px; border-radius:50%; background:#fff0f5; color:#e5005a; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ref-title-text { font-size:16px; font-weight:600; color:#111827; }
.collapse-icon { color:#9ca3af; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease; flex-shrink:0; }
.bodycalc-ref-header.expanded .collapse-icon { transform:rotate(180deg); }
.bodycalc-ref-body { padding:0 18px 18px; }
.bodycalc-ref-body:has(> .bmi-table), .bodycalc-ref-body:has(> .formula-block), .bodycalc-ref-body:has(> .tips-list) { padding-top:2px; }

/* BMI 表格 */
.bmi-table { }
.bmi-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f9fafb; }
.bmi-row:last-child { border-bottom:none; }
.bmi-range { font-size:14px; color:#374151; font-family:monospace; }
.bmi-tag { font-size:13px; font-weight:600; padding:3px 10px; border-radius:10px; }

/* 公式区 */
.formula-block { font-size:14px; color:#374151; line-height:1.8; }
.formula-block p { margin:4px 0; }
.formula-example { color:#6b7280; font-size:13px; padding-left:12px; }
.formula-hr { border:none; border-top:1px dashed #e5e7eb; margin:10px 0; }

/* 小贴士 */
.tips-body { display:flex; align-items:center; gap:12px; }
.tips-list { margin:0; padding-left:18px; flex:1; min-width:0; }
.tips-list li { font-size:13.5px; color:#4b5563; line-height:2; }
.tips-illustration { flex-shrink:0; width:90px; height:90px; }
.tips-illustration svg { width:100%; height:100%; display:block; }

/* 底部免责声明 */
.bodycalc-footer-note { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px 24px; color:#9ca3af; font-size:12px; }

/* ===== 资料库重构 ===== */
.matlib-page { background:#f5f6fa; min-height:100%; padding-bottom:24px; }
.matlib-nav { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 16px; background:#fff; position:sticky; top:0; z-index:20; border-bottom:1px solid #ffe0ed; }
.matlib-nav h1 { font-size:17px; font-weight:700; color:#111827; }
.matlib-banner { margin:10px 16px 0; border-radius:16px; overflow:hidden; background:linear-gradient(135deg, #f75fa3 0%, #c4004d 100%); padding:24px 20px; }
.matlib-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.matlib-banner-text h2 { font-size:22px; font-weight:800; color:#fff; margin:0 0 4px; }
.matlib-banner-text p { font-size:13px; color:rgba(255,255,255,.8); margin:0; }
.matlib-banner-img { width:120px; height:80px; border-radius:12px; background:rgba(255,255,255,.15); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:40px; }
.matlib-search-wrap { padding:12px 16px 0; }
.matlib-search { display:flex; align-items:center; background:#fff; border-radius:12px; padding:0 4px 0 14px; gap:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.matlib-search svg { width:18px; height:18px; color:#9ca3af; flex-shrink:0; }
.matlib-search input { flex:1; border:none; outline:none; font-size:14px; padding:11px 0; color:#111; background:transparent; }
.matlib-search input::placeholder { color:#d1d5db; }
.matlib-search-btn { background:#1f2937; color:#fff; border:none; border-radius:10px; padding:8px 18px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.matlib-search-btn:active { opacity:.85; }
.matlib-body { display:flex; padding:12px 16px; gap:12px; align-items:flex-start; position:relative; }
.matlib-sidebar { width:100px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; position:sticky; top:56px; }
.matlib-cat-btn { padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:500; text-align:center; color:#4b5563; background:#fff; border:1px solid transparent; cursor:pointer; transition:all .2s; white-space:nowrap; }
.matlib-cat-btn.active { background:#1f2937; color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.matlib-cat-btn:not(.active):active { background:#f3f4f6; }
.matlib-content { flex:1; min-width:0; max-height: calc(100vh - 220px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; }
.matlib-card { background:#fff; border-radius:16px; padding:16px; display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:0 1px 6px rgba(0,0,0,.04); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.matlib-card:active { transform:scale(.98); box-shadow:0 2px 12px rgba(0,0,0,.08); }
.matlib-card-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.matlib-card-title { font-size:16px; font-weight:700; color:#111827; line-height:1.4; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.matlib-card-desc { font-size:12px; color:#9ca3af; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.matlib-card-arrow { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.matlib-end { text-align:center; color:#d1d5db; font-size:13px; padding:20px 0 8px; }

/* ===== 资料详情页 ===== */
/* ============ 资料详情页（参考 UI） ============ */
.matdetail-page { background:#f5f6f8; min-height:100vh; position:relative; }
.matdetail-body { padding:16px; }

/* 主信息卡 */
.matdetail-main-card {
  background:#fff; border-radius:16px; padding:18px;
  box-shadow:0 1px 6px rgba(0,0,0,.04); margin-bottom:12px;
  display:flex; align-items:center; gap:14px;
}
.matdetail-main-icon {
  width:56px; height:56px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(145deg,#fff0f6,#ffe0ed);
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
}
.matdetail-main-body { flex:1; min-width:0; }
.matdetail-title { font-size:18px; font-weight:800; color:#111827; line-height:1.35; margin:0 0 6px; }
.matdetail-desc { font-size:13.5px; color:#6b7280; line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 信息列表 */
.matdetail-info-list {
  background:#fff; border-radius:16px; padding:6px 18px;
  box-shadow:0 1px 6px rgba(0,0,0,.04); margin-bottom:12px;
}
.matdetail-info-item { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #f3f4f6; }
.matdetail-info-item:last-child { border-bottom:none; }
.matdetail-info-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.matdetail-info-icon svg { width:18px; height:18px; }
.matdetail-info-icon.author { background:#eff6ff; color:#3b82f6; }
.matdetail-info-icon.date { background:#f0fdf4; color:#22c55e; }
.matdetail-info-icon.file { background:#fff7ed; color:#f97316; }
.matdetail-info-icon.size { background:#f5f3ff; color:#8b5cf6; }
.matdetail-info-label { width:42px; font-size:14px; color:#9ca3af; flex-shrink:0; }
.matdetail-info-value { flex:1; font-size:14px; color:#374151; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 资料文件列表 */
.matdetail-files-card { background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 1px 6px rgba(0,0,0,.04); margin-top:12px; }
.matdetail-files-title { font-size:14px; font-weight:700; color:#111827; margin-bottom:10px; }
.matdetail-file-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f3f4f6; cursor:pointer; }
.matdetail-file-item:last-child { border-bottom:none; padding-bottom:0; }
.matdetail-file-item:first-child { padding-top:0; }
.matdetail-file-icon { width:36px; height:36px; border-radius:10px; background:#fff0f6; color:#f472b6; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.matdetail-file-body { flex:1; min-width:0; }
.matdetail-file-name { font-size:14px; font-weight:600; color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matdetail-file-size { font-size:11px; color:#9ca3af; margin-top:2px; }
.matdetail-file-download { width:32px; height:32px; border-radius:50%; background:#f3f4f6; color:#6b7280; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.matdetail-file-item:active .matdetail-file-download { background:#ef4444; color:#fff; }

/* 操作按钮：预览+收藏 一行，下载 下一行 */
.matdetail-actions { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.matdetail-btn-row { display:flex; gap:10px; }
.matdetail-btn { flex:1; padding:14px 8px; border-radius:12px; font-size:14.5px; font-weight:700; text-align:center; cursor:pointer; border:none; transition:all .15s; display:inline-flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.matdetail-btn svg { width:16px; height:16px; }
.matdetail-btn-primary { width:100%; background:#ef4444; color:#fff; }
.matdetail-btn-primary svg { width:18px; height:18px; }
.matdetail-btn-preview { background:#ef4444; color:#fff; box-shadow:0 4px 12px rgba(239,68,68,.28); }
.matdetail-btn-preview:active { transform:scale(.98); box-shadow:0 2px 6px rgba(239,68,68,.25); }
.matdetail-btn-fav { background:#fff1f2; color:#e11d48; border:1.5px solid #fecdd3; }
.matdetail-btn-fav.active { background:#e11d48; color:#fff; border-color:#e11d48; box-shadow:0 4px 12px rgba(225,29,72,.25); }
.matdetail-btn-fav:active { transform:scale(.98); }

/* ============ 资料详情 - 预览图轮播 ============ */
.matdetail-preview-section {
  margin: 0 16px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.matdetail-preview-swiper {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.matdetail-preview-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.matdetail-preview-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}
.matdetail-preview-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.matdetail-preview-placeholder {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-size:14px; color:#9ca3af; background:#f1f3f5;
}
/* 指示点 */
.matdetail-preview-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.matdetail-preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: all .25s;
}
.matdetail-preview-dot.active {
  background: #ef4444;
  width: 20px;
  border-radius: 4px;
}
/* 滑动提示 */
.matdetail-preview-hint {
  text-align: center;
  font-size: 11.5px;
  color: #9ca3af;
  padding: 8px 0 10px;
  letter-spacing: .3px;
}

/* ============ 资料详情 - 居中卡片预览弹窗 ============ */
.matpreview-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: matpreviewFadeIn .2s ease;
}
@keyframes matpreviewFadeIn { from { opacity: 0; } to { opacity: 1; } }
.matpreview-card {
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: matpreviewCardIn .25s ease;
}
@keyframes matpreviewCardIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.matpreview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 10px;
}
.matpreview-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.matpreview-counter {
  font-size: 12.5px;
  color: #9ca3af;
  font-weight: 600;
}
.matpreview-swiper {
  flex: 1;
  min-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: #f8fafc;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.matpreview-track {
  display: flex;
  width: 100%;
  min-height: 100%;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.matpreview-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.matpreview-slide img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}
.matpreview-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 4px;
}
.matpreview-dots-placeholder { height: 8px; }
.matpreview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e5e7eb;
  cursor: pointer;
  transition: all .25s;
}
.matpreview-dot.active {
  background: #ef4444;
  width: 16px;
  border-radius: 3px;
}
.matpreview-actions {
  display: flex;
  gap: 12px;
  padding: 14px 18px 18px;
}
.matpreview-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.matpreview-btn-close {
  background: #f3f4f6;
  color: #374151;
}
.matpreview-btn-close:active { background: #e5e7eb; }
.matpreview-btn-full { width: 100%; }

/* 资料库：加载状态与回到顶部 */
.matlib-loadstatus { padding:18px 0 10px; text-align:center; color:#9ca3af; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; min-height:20px; }
.matlib-loadstatus:empty { padding:12px 0; }
.matlib-spinner { width:16px; height:16px; border:2px solid #e5e7eb; border-top-color:#ef4444; border-radius:50%; animation:matspin .7s linear infinite; flex-shrink:0; }
@keyframes matspin { to { transform:rotate(360deg); } }
.matlib-empty { padding:50px 16px; text-align:center; color:#d1d5db; font-size:14px; }
.matlib-end { text-align:center; color:#9ca3af; font-size:12.5px; padding:8px 0 4px; }

.matlib-totop {
  position:absolute; right:14px; bottom:16px; width:42px; height:42px; border-radius:50%;
  background:rgba(239,68,68,.92); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(239,68,68,.35);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s; z-index:6;
}
.matlib-totop.show { opacity:1; visibility:visible; transform:translateY(0); }
.matlib-totop:active { transform:scale(.92); }

/* 列表/卡片 stagger 依次浮现 */
.stagger-fade { animation: staggerFade .42s ease both; }
@keyframes staggerFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ 文章生图 预览弹窗 ============ */
.pv-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0); backdrop-filter: blur(0);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  transition: background .22s ease, backdrop-filter .22s ease;
}
.pv-overlay.show { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }

.pv-panel {
  width: 100%; max-width: 480px; max-height: 86vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(17,24,39,.22);
  display: flex; flex-direction: column;
  transform: scale(.96);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.pv-overlay.show .pv-panel { transform: scale(1); opacity: 1; }

.pv-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
}
.pv-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.pv-close {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #f3f4f6; color: #9ca3af; font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pv-close:active { background: #e5e7eb; }

.pv-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 18px 10px;
}
.pv-img { width: 100%; border-radius: 14px; display: block; box-shadow: 0 4px 18px rgba(17,24,39,.1); }
.pv-loading { padding: 50px 10px; text-align: center; color: #9ca3af; font-size: 14px; }
.pv-tip { margin: 10px 2px 4px; font-size: 12.5px; color: #9ca3af; text-align: center; line-height: 1.5; }

.pv-foot {
  flex-shrink: 0;
  display: flex; gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0));
}
.pv-btn {
  flex: 1; border: none; cursor: pointer;
  padding: 13px; border-radius: 14px;
  font-size: 15px; font-weight: 700; color: var(--ink-2);
  background: #f3f4f6; transition: all .15s;
}
.pv-btn:active { transform: scale(.985); }
.pv-btn.primary {
  background: linear-gradient(135deg, #f75fa3, #e5005a);
  color: #fff; box-shadow: 0 4px 14px rgba(229,0,90,.28);
}
.pv-btn.primary:active { opacity: .9; }

/* ============ 详情页 分享者名片卡 ============ */
.sharer-card {
  background: linear-gradient(135deg, #fff0f6 0%, #fdf2f8 100%);
  border: 1px solid #fbcfe8;
  border-radius: 16px;
  padding: 14px 16px;
  margin: 4px 0 14px;
  box-shadow: 0 2px 12px rgba(236,72,153,.1);
}
.sc-head { display: flex; align-items: center; gap: 12px; }
.sc-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: #f3f4f6; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.sc-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f75fa3, #e5005a); color: #fff;
  font-size: 20px; font-weight: 800;
}
.sc-info { flex: 1; min-width: 0; }
.sc-name { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.sc-sub { font-size: 12px; color: #db2777; margin-top: 3px; font-weight: 600; }
.sc-qr { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #fff; border: 1px solid #fbcfe8; }

/* ============ H5 登录页 ============ */
/* 进入登录页时给 body 加 .login-lock，彻底禁止整页滚动/鼠标滑动 */
html.login-lock, body.login-lock { overflow: hidden !important; height: 100% !important; }
.h5-login-page {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 28px;
  background: #f0f7ff;
  z-index: 1;
}
.h5-login-header { text-align: center; margin-bottom: 40px; }
.h5-login-logo {
  width: 96px; height: 96px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 99, 235, .12);
}
.h5-login-logo img { width: 72px; height: 72px; object-fit: contain; }
.h5-login-title { font-size: 24px; font-weight: 800; color: #1e293b; letter-spacing: .5px; }
.h5-login-subtitle { font-size: 14px; color: #64748b; margin-top: 8px; }
.h5-login-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 32px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .06);
}
.h5-login-field { margin-bottom: 16px; }
.h5-login-field:last-of-type { margin-bottom: 28px; }
.h5-login-field input {
  width: 100%;
  border: none; border-bottom: 1px solid #e2e8f0;
  background: transparent;
  padding: 14px 4px;
  font-size: 15px; color: #1e293b;
  outline: none;
  transition: border-color .15s;
}
.h5-login-field input::placeholder { color: #cbd5e1; }
.h5-login-field input:focus { border-color: #3b82f6; }
.h5-login-btn {
  width: 100%;
  padding: 14px 0;
  border: none; border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
  transition: transform .15s, box-shadow .15s;
}
.h5-login-btn:active { transform: scale(.98); box-shadow: 0 4px 12px rgba(37, 99, 235, .25); }
.h5-login-tip { text-align: center; font-size: 12px; color: #94a3b8; margin-top: 24px; }

/* ===== 「我的」页：消息铃铛 + 到期提醒 ===== */
.sub-header-btn {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #374151;
  cursor: pointer; border-radius: 50%;
}
.sub-header-btn:active { background: #f3f4f6; }
.sub-header-badge {
  position: absolute; top: 2px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.pf-expire { position: relative; cursor: default; }
.pf-expire-warn { color: #dc2626 !important; cursor: pointer; }
.pf-expire-warn .pf-remain, .pf-remain-warn { color: #dc2626 !important; }
.pf-expire-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 8px; background: #fef2f2; color: #dc2626;
  font-size: 10px; font-weight: 600; vertical-align: 1px;
}

/* ===== 消息中心 ===== */
.msg-tabs {
  display: flex; gap: 8px; padding: 12px 16px 8px;
  border-bottom: 1px solid #f3f4f6; overflow-x: auto;
}
.msg-tab {
  flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff; color: #6b7280;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.msg-tab.active { background: #e5005a; border-color: #e5005a; color: #fff; font-weight: 600; }
.msg-list { padding: 8px 16px 24px; }
.msg-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 4px; border-bottom: 1px solid #f3f4f6; cursor: pointer;
}
.msg-item:active { background: #fafafa; }
.msg-item-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; margin-top: 6px; flex-shrink: 0; }
.msg-item-dot.unread { background: #ef4444; }
.msg-item-body { flex: 1; min-width: 0; }
.msg-item-title { font-size: 14px; color: #111827; line-height: 1.5; }
.msg-item.is-read .msg-item-title { color: #9ca3af; }
.msg-item-time { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.msg-empty { text-align: center; color: #9ca3af; font-size: 13px; padding: 48px 0; }
.msg-readall {
  margin-top: 16px; text-align: center; font-size: 13px; color: #e5005a; cursor: pointer;
  padding: 10px 0;
}

/* ===== 通用弹窗（意见反馈 / 修改密码）===== */
.app-modal-title { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 14px; }
.app-modal-input, .app-modal-textarea {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; color: #111827; outline: none;
  margin-bottom: 10px; box-sizing: border-box; background: #fff;
}
.app-modal-input:focus, .app-modal-textarea:focus { border-color: #e5005a; }
.app-modal-textarea { height: 110px; resize: none; }
.app-modal-actions { display: flex; gap: 10px; margin-top: 14px; }
.app-modal-btn {
  flex: 1; padding: 10px 0; border-radius: 10px; font-size: 14px;
  border: none; cursor: pointer;
}
.app-modal-btn.primary { background: #e5005a; color: #fff; font-weight: 600; }
.app-modal-btn.primary:active { opacity: .9; }
.app-modal-btn.ghost { background: #f3f4f6; color: #374151; }
.app-modal-btn.ghost:active { background: #e5e7eb; }
.mp-link-row { text-align: center; margin-top: 14px; }
.mp-link-btn {
  border: none; background: none; color: #6b7280; font-size: 13px;
  text-decoration: underline; cursor: pointer; padding: 6px 12px;
}

/* ===== 消息中心 title 总数角标 ===== */
.msg-title-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 10px; background: #e5005a; color: #fff;
  font-size: 11px; font-weight: 600; vertical-align: 2px;
}

/* ===== 通用弹窗卡片化（意见反馈 / 修改密码）===== */
.modal-container.app-modal-card {
  background: #fff;
  border-radius: 20px;
  padding: 0;
  align-items: stretch;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22), 0 6px 16px rgba(0, 0, 0, .12);
  max-width: 340px;
  width: 88%;
}
.app-modal-header {
  position: relative;
  padding: 20px 20px 12px;
  border-bottom: 1px solid #f3f4f6;
}
.app-modal-title { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.app-modal-sub { font-size: 12px; color: #9ca3af; }
.app-modal-header .modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: #f3f4f6; color: #6b7280;
}
.app-modal-header .modal-close:active { background: #e5e7eb; }
.app-modal-header .modal-close svg { width: 18px; height: 18px; }
.app-modal-body { padding: 10px 20px 14px; }
.app-modal-label {
  font-size: 13px; color: #374151; font-weight: 500; margin: 10px 0 6px;
}
.app-modal-body > .app-modal-label:first-child { margin-top: 4px; }
.app-modal-req { color: #ef4444; margin-right: 2px; }

/* 弹窗内输入控件（弹窗卡片化后微调） */
.app-modal-card .app-modal-textarea,
.app-modal-card .app-modal-input {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  color: #111827;
  transition: border-color .15s, background .15s;
}
.app-modal-card .app-modal-textarea:focus,
.app-modal-card .app-modal-input:focus {
  border-color: #e5005a;
  background: #fff;
}
.app-modal-card .app-modal-textarea { height: 100px; resize: none; }
.app-modal-card .app-modal-actions {
  display: flex; gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid #f3f4f6;
  margin: 0;
}

/* ===== 多图上传（4 宫格）===== */
.app-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.app-upload-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}
.app-upload-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.app-upload-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.app-upload-remove:active { background: rgba(0, 0, 0, .8); }
.app-upload-remove svg { width: 14px; height: 14px; }
.app-upload-add {
  aspect-ratio: 1 / 1;
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  background: #fafafa;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  color: #9ca3af; font-size: 11px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.app-upload-add:active { border-color: #e5005a; color: #e5005a; }
.app-upload-add svg { width: 20px; height: 20px; }

/* 我的收藏加载更多 */
.fav-load-more { width: 100%; margin-top: 12px; padding: 10px; border: none; border-radius: 12px; background: #f3f4f6; color: #4b5563; font-size: 14px; cursor: pointer; }
.fav-load-more:active { background: #e5e7eb; }
.fav-no-more { text-align: center; color: #9ca3af; font-size: 13px; padding: 12px 0; }