/* ================================================================
   北海好消息 v2 样式表 — 全新设计，与 v1 (style-new.css) 完全隔离
   切换方式：修改 /v2/index.html 中 CSS 引用即可回退
   ================================================================ */

/* ── 1. 设计系统 (Design Tokens) ─────────────────────────────────── */
:root {
  /* Brand */
  --primary: #FF6B35;
  --primary-light: #FF8A50;
  --primary-dark: #E55A2B;
  --primary-bg: #FFF0E8;
  --primary-gradient: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);

  /* Surfaces */
  --bg: #F0F2F5;
  --bg-card: #FFFFFF;

  /* Text */
  --text-primary: #1A1A2E;
  --text-secondary: #5A5A72;
  --text-tertiary: #9CA3AF;

  /* Borders & Shadows */
  --border: rgba(0,0,0,0.06);
  --border-light: rgba(0,0,0,0.04);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Safe area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 2. Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(80px + var(--safe-bottom)); /* room for footer + FAB */
}
a { color: var(--primary); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; height: auto; }
input, textarea { font-family: inherit; font-size: inherit; }

/* ── 3. Animations ───────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 200px; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── 4. Sticky Header ────────────────────────────────────────────── */
.v2-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  padding-top: calc(8px + var(--safe-top));
  background: var(--primary-gradient);
  min-height: 48px;
}
.v2-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.v2-header-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}
.v2-header-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.v2-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2-header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.v2-header-podcast-btn {
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(4px);
  text-decoration: none;
  white-space: nowrap;
}
.v2-header-login-btn {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.v2-user-info {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
}
.v2-user-avatar { font-size: 20px; line-height: 1; }
.v2-user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 5. Search Bar ───────────────────────────────────────────────── */
.v2-search-bar {
  background: #fff;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  animation: slideDown 0.2s ease-out;
  position: sticky;
  top: 48px;
  z-index: 99;
}
.v2-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 20px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  transition: border-color 0.2s;
}
.v2-search-wrap:focus-within {
  border-color: var(--primary);
  background: #fff;
}
.v2-search-icon { font-size: 16px; flex-shrink: 0; opacity: 0.5; }
.v2-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.v2-search-clear {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-tertiary);
  padding: 4px;
  flex-shrink: 0;
}

/* search hints */
.v2-search-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}
.v2-search-hint-label {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.v2-search-hint {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.v2-search-hint:active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
.v2-search-hint-loading { font-size: 12px; color: var(--text-tertiary); }

/* podcast pill */
.v2-cat-podcast {
  background: linear-gradient(135deg, #FFF0E8 0%, #FFE4D6 100%) !important;
  color: var(--primary) !important;
  border-color: rgba(255,107,53,0.15) !important;
  font-weight: 600;
}

/* ── 6. Category Pills ───────────────────────────────────────────── */
.v2-cat-bar {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v2-cat-bar::-webkit-scrollbar { display: none; }
.v2-cat-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 13px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
}
.v2-cat-pill:active { transform: scale(0.96); }
.v2-cat-pill.active {
  background: var(--primary-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255,107,53,0.25);
}
.v2-cat-icon { font-size: 14px; line-height: 1; }

/* Category accent colors for inactive pills */
.v2-cat-pill[data-cat="招聘求职"] { background: #E8F5E9; color: #2E7D32; border-color: transparent; }
.v2-cat-pill[data-cat="房屋租售"] { background: #E0F7FA; color: #00695C; border-color: transparent; }
.v2-cat-pill[data-cat="便民信息"] { background: #F3E5F5; color: #6A1B9A; border-color: transparent; }
.v2-cat-pill[data-cat="北海有料"] { background: #E3F2FD; color: #1976D2; border-color: transparent; }
.v2-cat-pill[data-cat="北海树洞"] { background: #FCE4EC; color: #C2185B; border-color: transparent; }
.v2-cat-pill[data-cat="北海好嘢"] { background: #FFF3E0; color: #E65100; border-color: transparent; }
.v2-cat-pill[data-cat="北海知道"] { background: #B2DFDB; color: #00695C; border-color: transparent; }
.v2-cat-pill.active { background: var(--primary-gradient) !important; color: #fff !important; }

/* ── 7. Podcast Hero ─────────────────────────────────────────────── */
.v2-podcast-hero {
  margin: 10px 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  position: relative;
  animation: fadeInUp 0.4s ease-out;
  border-left: 3px solid var(--primary);
}
.v2-podcast-hero-inner {
  padding: 16px;
  position: relative;
  z-index: 1;
}
.v2-podcast-hero-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary-bg);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.v2-podcast-hero-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-podcast-hero-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.v2-podcast-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-podcast-play-btn {
  padding: 7px 18px;
  border-radius: 18px;
  border: none;
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.v2-podcast-play-btn:active { opacity: 0.8; }
.v2-podcast-link {
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
}

/* ── 8. Sort Bar ─────────────────────────────────────────────────── */
.v2-sort-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
}
.v2-sort-btn {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}
.v2-sort-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── 9. News List ────────────────────────────────────────────────── */
.v2-page { animation: fadeInUp 0.3s ease-out; }
.v2-news-list {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 12px 12px;
}
.v2-news-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  padding: 14px 16px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: fadeInUp 0.35s ease-out;
  position: relative;
}
.v2-news-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity 0.2s;
}
.v2-news-card:active { transform: scale(0.98); }
.v2-news-card:hover .v2-news-card::after,
.v2-news-card:active::after { opacity: 1; }
@media (hover: hover) {
  .v2-news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

/* Featured card (pinned) */
.v2-news-card.featured {
  border-left: 3px solid var(--primary);
  background: linear-gradient(135deg, #FFF8F4 0%, #fff 100%);
}
.v2-news-card.featured .v2-card-title { font-size: 17px; }

/* Card internals */
.v2-card-inner {
  display: flex;
  gap: 12px;
}
.v2-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.v2-card-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}
/* category tag colors */
.v2-card-tag.tag-pinned { background: #FFF0E8; color: var(--primary); }
.v2-card-tag.tag-haoye { background: #FFF0E8; color: #FF6B35; }
.v2-card-tag.tag-discount { background: linear-gradient(135deg, #FFF0E8, #FFE4D6); color: #FF6B35; }
.v2-card-tag.tag-event { background: #E8F4FD; color: #1976D2; }
.v2-card-tag.tag-notice { background: #B2DFDB; color: #004D40; }
.v2-card-tag.tag-job { background: #F3E8FF; color: #7C3AED; }
.v2-card-tag.tag-service { background: #FEF9E7; color: #D97706; }
.v2-card-tag.tag-rental { background: #FCE4EC; color: #E91E63; }
.v2-card-tag.tag-secondhand { background: #E0F7FA; color: #00838F; }
.v2-card-tag.tag-treehole { background: #F0FDF4; color: #16A34A; }

.v2-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-card-thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}
.v2-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.v2-card-meta-stat { display: flex; align-items: center; gap: 2px; }

/* card badges */
.v2-card-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 0 var(--radius-md) 0 8px;
  z-index: 1;
}
.v2-card-badge-pinned { background: var(--primary-gradient); color: #fff; }
.v2-card-badge-boosted { background: #E3F2FD; color: #1565C0; }
.v2-news-card { position: relative; }

/* Treehole wall (within v2) */
/* ── 树洞贴纸墙 (与旧版一致) ── */
.treehole-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  gap: 14px;
  padding: 16px 0;
  max-width: 640px;
  margin: 0 auto;
  justify-content: center;
  min-height: 300px;
  position: relative;
}
.treehole-note {
  width: auto;
  min-width: 0;
  background: var(--note-bg, #FFF8E7);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 20px 14px 10px;
  box-shadow: 1px 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.7) inset;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
}
.treehole-note::before {
  content: '📌';
  position: absolute;
  top: -5px;
  right: -3px;
  font-size: 14px;
  transform: rotate(15deg);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.2s;
}
.treehole-note .note-header {
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  font-weight: 500;
}
.treehole-note .note-text {
  font-family: 'LongCang', 'KaiTi', 'STKaiti', 'Noto Serif CJK SC', serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  word-break: break-all;
  max-height: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.3s var(--ease-out);
}
.treehole-note .note-meta {
  font-size: 11px;
  color: #bbb;
  margin-top: 8px;
}
.treehole-note.note-focus {
  transform: rotate(0deg) translateY(0) !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 36px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.8) inset;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.treehole-note.note-focus .note-text { max-height: none; }
.treehole-note.note-focus::before { opacity: 1; }
.treehole-note .note-reply-badge {
  display: inline-block;
  font-size: 10px;
  color: #E53935;
  margin-left: 6px;
  background: rgba(229,57,53,0.08);
  padding: 1px 6px;
  border-radius: 10px;
  vertical-align: middle;
}
.treehole-note .note-reply-badge b { font-weight: 600; }
.treehole-note.has-replies::after {
  content: '';
  position: absolute;
  bottom: 8px; right: 10px;
  width: 8px; height: 8px;
  background: #E53935;
  border-radius: 50%;
  animation: reply-pulse 2s infinite;
}
@keyframes reply-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.6); opacity: 1; }
}
.treehole-note .note-actions {
  position: absolute;
  top: 6px; right: 18px;
  display: flex;
  gap: 2px;
  z-index: 5;
}
.note-btn-reply, .note-btn-report {
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.note-like-btn {
  background: none;
  border: none;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  color: #999;
}
.note-like-btn:hover { color: #E91E63; }
@media (min-width: 1024px) {
  .treehole-wall { max-width: 100%; grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); }
}

/* ── 10. Detail Page ─────────────────────────────────────────────── */
.v2-detail-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.v2-detail-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: calc(10px + var(--safe-top));
  background: var(--primary-gradient);
  z-index: 310;
}
.v2-detail-back {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.v2-detail-cat {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-detail-share {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.v2-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  animation: fadeInUp 0.3s ease-out;
}
.v2-detail-body h1, .v2-detail-body .d-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.v2-detail-body p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.v2-detail-body img {
  border-radius: 10px;
  max-width: 100%;
  margin: 8px 0;
  display: block;
}
.v2-detail-body a {
  color: var(--primary);
  word-break: break-all;
}

/* meta row */
.v2-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.v2-detail-meta-item {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3px;
}
.v2-detail-meta-item.cat-link {
  background: var(--primary-bg);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
  cursor: pointer;
  font-size: 12px;
}

/* images grid */
.v2-detail-images {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.v2-detail-images.cols1 { grid-template-columns: 1fr; }
.v2-detail-images.cols2 { grid-template-columns: 1fr 1fr; }
.v2-detail-images img {
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
  object-fit: cover;
  max-height: 400px;
  transition: opacity 0.2s;
}
.v2-detail-images img:active { opacity: 0.8; }

/* loading */
.v2-detail-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* bottom bar */
.v2-detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px calc(8px + var(--safe-bottom));
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  z-index: 310;
}
.vdb-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 20px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vdb-btn:disabled { opacity: 0.25; }
.vdb-center {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vdb-like {
  padding: 9px 20px;
  border-radius: 20px;
  border: 1.5px solid #E91E63;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #E91E63;
  cursor: pointer;
  transition: all 0.15s;
}
.vdb-like:active { transform: scale(0.95); }
.vdb-like.liked {
  background: #E91E63;
  color: #fff;
  animation: likePop 0.4s ease-out;
}
@keyframes likePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.vdb-tts-btn {
  padding: 6px 12px;
  border-radius: 14px;
  border: 1.5px solid #ddd;
  background: #f0f0f0;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
}
.vdb-tts-btn:active { transform: scale(0.95); }
.vdb-tts-btn.playing { background: var(--primary); color: #fff; border-color: var(--primary); }

/* related */
.v2-detail-related {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
.v2-detail-related h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-secondary);
}
.v2-related-list {
  display: flex;
  flex-direction: column;
}
.v2-related-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: var(--text-primary);
  transition: padding-left 0.2s;
  cursor: pointer;
}
.v2-related-item:last-child { border-bottom: none; }
.v2-related-item:active { padding-left: 6px; }
.v2-related-cat {
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.v2-related-title {
  flex: 1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-related-arrow {
  font-size: 16px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Desktop */
@media (min-width: 1024px) {
  .v2-detail-body { max-width: 760px; }
  .v2-detail-top { max-width: 760px; margin: 0 auto; width: 100%; padding: 10px 16px; padding-top: calc(10px + var(--safe-top)); }
  .v2-detail-bar { max-width: 760px; margin: 0 auto; width: 100%; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .v2-detail-top { background: var(--primary-gradient); }
  .v2-detail-bar { background: var(--bg-card); }
  .v2-detail-back, .v2-detail-share { background: rgba(255,255,255,0.2); }
  .vdb-btn { background: var(--bg-card); }
  .vdb-like { background: var(--bg-card); }
}

/* ── 11. Settings Page ───────────────────────────────────────────── */
.settings-page {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.settings-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top));
  background: var(--primary-gradient);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.settings-back-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  padding: 0;
  line-height: 1;
}
.settings-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

/* ── 12. Footer ──────────────────────────────────────────────────── */
.v2-footer {
  background: #fff;
  padding: 20px 16px calc(20px + var(--safe-bottom));
  margin-top: 16px;
  border-top: 1px solid var(--border-light);
}
.v2-footer-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 12px;
}
.v2-footer-link {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  cursor: pointer;
}
.v2-footer-link:active { color: var(--primary); }
.v2-footer-icp {
  text-align: center;
}
.v2-footer-icp a {
  color: var(--text-tertiary);
  font-size: 12px;
  text-decoration: none;
}

/* ── 13. Floating AI Button (FAB) ────────────────────────────────── */
.v2-ai-fab {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--primary-gradient);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,53,0.4);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease-out), box-shadow 0.4s;
}
.v2-ai-fab:active { transform: scale(0.9); }
.v2-ai-fab-icon {
  position: relative;
  width: 28px;
  height: 24px;
  background: rgba(255,255,255,0.25);
  border-radius: 14px 14px 14px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 6px;
  animation: bubbleFloat 3s ease-in-out infinite;
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.fab-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: dotBounce 1.4s ease-in-out infinite;
}
.fab-dot:nth-child(1) { animation-delay: 0s; }
.fab-dot:nth-child(2) { animation-delay: 0.2s; }
.fab-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* pulse override: FAB still pulses but subtler */
.v2-ai-fab {
  animation: fabPulse 4s ease-in-out infinite;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(255,107,53,0.4); }
  50% { box-shadow: 0 4px 24px rgba(255,107,53,0.55), 0 0 0 6px rgba(255,107,53,0.06); }
}
.v2-chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  animation: fadeIn 0.2s ease-out;
}
.v2-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-top: calc(10px + var(--safe-top));
  background: var(--primary-gradient);
  color: #fff;
}
.v2-chat-header-title { font-size: 15px; font-weight: 600; }
.v2-chat-close-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  backdrop-filter: blur(4px);
}
.v2-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chat bubbles */
.msg { display: flex; max-width: 88%; animation: fadeInUp 0.25s ease-out; }
.msg.user { align-self: flex-end; }
.msg.assistant { align-self: flex-start; }
.msg .bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.msg.user .bubble {
  background: var(--primary-gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.assistant .bubble {
  background: #fff;
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-card);
}
.msg .bubble a { color: var(--primary); text-decoration: underline; }

/* Quick questions in chat */
.chat-quick-qs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px 0;
}
.cqq-btn {
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  transition: all 0.2s;
}
.cqq-btn:active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }

/* Chat input bar (inside overlay) */
.v2-chat-input-bar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 8px 12px calc(8px + var(--safe-bottom));
  background: #fff;
  border-top: 1px solid var(--border);
}
.v2-chat-img-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-chat-input-bar textarea {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 14px;
  resize: none;
  outline: none;
  max-height: 120px;
  background: var(--bg);
  transition: border-color 0.2s;
}
.v2-chat-input-bar textarea:focus { border-color: var(--primary); background: #fff; }
.v2-chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,107,53,0.3);
}
.v2-chat-send-btn:active { transform: scale(0.92); }

/* Chat detail panel */
.chat-detail-panel {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 56px;
  background: #fff;
  z-index: 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cdp-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 11;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 14px;
}
.cdp-scroll { flex: 1; overflow-y: auto; padding: 20px; }
.chat-image-bar { padding: 8px 16px; background: #fff; border-top: 1px solid var(--border); overflow-x: auto; }
.cib-list { display: flex; gap: 8px; }
.cib-list img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; border: 2px solid transparent; }
.cib-list img:hover { border-color: var(--primary); }

/* ── 15. Modals ──────────────────────────────────────────────────── */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
.modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 0;
}
.modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  width: 88%;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.3s ease-out;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-tertiary);
  padding: 4px;
}

/* Auth */
.auth-modal-content { max-width: 360px; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.auth-tab {
  flex: 1;
  padding: 10px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  transition: all 0.2s;
}
.auth-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.auth-panel { display: flex; flex-direction: column; gap: 12px; }
.auth-input {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background: var(--bg);
}
.auth-input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(255,107,53,0.1); }
.auth-submit {
  padding: 12px;
  border-radius: 24px;
  border: none;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255,107,53,0.3);
  transition: transform 0.15s;
}
.auth-submit:active { transform: scale(0.97); }
.auth-sms-row { display: flex; gap: 8px; align-items: center; }
.auth-sms-input { flex: 1; }
.auth-sms-btn {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background: #fff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.auth-oauth { display: flex; justify-content: center; padding-top: 4px; }
.auth-wechat-btn {
  padding: 10px 24px;
  border-radius: 24px;
  border: 1px solid #07C160;
  background: #fff;
  color: #07C160;
  font-size: 14px;
  font-weight: 500;
}

/* Publish type selector */
.v2-publish-modal { max-width: 400px; }
.v2-publish-header { font-size: 16px; font-weight: 600; margin-bottom: 16px; text-align: center; }
.v2-publish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.v2-publish-type-card {
  padding: 14px 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: #fff;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.2s;
}
.v2-publish-type-card:active { background: var(--primary-bg); border-color: var(--primary); }
.v2-publish-type-card .v2-pt-icon { font-size: 28px; display: block; margin-bottom: 4px; }
.v2-publish-cancel {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── 16. Common Components ───────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.loading, .empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.toast {
  position: fixed;
  bottom: calc(90px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: rgba(0,0,0,0.78);
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  pointer-events: none;
  animation: fadeInUp 0.25s ease-out;
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img { max-width: 95vw; max-height: 85vh; object-fit: contain; }
.gallery-nav { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 8px; pointer-events: none; }
.gallery-nav button { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; }
.gallery-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 20px; width: 40px; height: 40px; border-radius: 50%; }

/* PWA guide */
.pwa-guide {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  animation: fadeIn 0.3s;
}
.pwa-guide-content {
  background: #fff;
  padding: 20px 28px;
  border-radius: 16px;
  font-size: 15px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

/* ── 17. Desktop Responsive ──────────────────────────────────────── */
@media (min-width: 1024px) {
  .v2-header { padding: 10px 24px; justify-content: center; }
  .v2-header-left, .v2-header-right { position: static; }
  .v2-header-left { margin-right: auto; }
  .v2-cat-bar { justify-content: center; padding: 8px 24px; }
  .v2-cat-pill { padding: 6px 16px; font-size: 14px; }
  .v2-podcast-hero { max-width: 1120px; margin: 12px auto; }
  .v2-sort-bar { max-width: 1120px; margin: 0 auto; padding: 10px 24px; }
  .v2-page { max-width: 1120px; margin: 0 auto; }
  .v2-news-list {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 24px 12px;
  }
  .v2-news-card { margin-bottom: 0; }
  .v2-news-card.featured { grid-column: 1 / -1; }
  .v2-treehole-wall { columns: 3; }

  .v2-ai-fab { bottom: 32px; right: calc(50% - 560px + 24px); }
  .v2-footer { max-width: 1120px; margin: 16px auto 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .v2-chat-overlay { max-width: 640px; }
}

/* ── 18. Dark Mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1C26;
    --bg-card: #2A2A38;
    --text-primary: #E5E5EC;
    --text-secondary: #B0B0C0;
    --text-tertiary: #6B6B80;
    --border: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.05);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
  }
  .v2-cat-bar, .v2-search-bar, .v2-sort-btn, .v2-footer, .v2-chat-input-bar { background: var(--bg-card); }
  .v2-cat-pill { background: var(--bg-card); }
  .v2-cat-pill[data-cat="全部"] { background: var(--bg-card); }
  .v2-search-wrap { background: var(--bg-card); }
  .modal-content, .msg.assistant .bubble { background: var(--bg-card); }
  .auth-input { background: var(--bg); }
  .v2-news-card { background: var(--bg-card); }
}