/* ============ 全局重置 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft Yahei', sans-serif;
  font-size: 14px; color: #333; background: #f5f5f5;
  -webkit-tap-highlight-color: transparent;
}

/* ============ App 容器 ============ */
.app {
  display: flex; flex-direction: column;
  height: 100vh; max-width: 450px; margin: 0 auto;
  background: #f5f5f5; position: relative; overflow: hidden;
}

/* ============ 模拟小程序导航栏 ============ */
/* 整个导航栏区域：状态栏(44px) + 导航栏(44px) = 88px */
.nav-bar-area {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

/* 状态栏 - 模拟 iPhone 样式 */
.status-bar {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

/* 导航栏 - 44px */
.nav-bar {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #000;
}

/* ========== 胶囊按钮（模拟小程序右上角菜单） ========== */
.capsule {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  /* 胶囊宽度: 87px（含分割线） */
}

.capsule-btn {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.capsule-btn:active {
  background: rgba(0, 0, 0, 0.1);
}

.capsule-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

/* ============ 顶部搜索栏（在导航栏下方，页面内容） ============ */
.header {
  background: #D73B25;
  padding: 8px 14px;
  flex-shrink: 0;
  /* 搜索框右侧预留胶囊宽度空间，防止内容被遮挡 */
  padding-right: 100px;
}
.search-bar {
  display: flex; align-items: center; background: rgba(255,255,255,0.22);
  border-radius: 18px; padding: 8px 14px; height: 36px; cursor: pointer;
}
.search-icon { margin-right: 8px; flex-shrink: 0; }
.search-placeholder { color: rgba(255,255,255,0.85); font-size: 13px; }

/* ============ 频道导航 ============ */
.channel-wrap {
  background: #fff; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.channel-scroll {
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.channel-scroll::-webkit-scrollbar { display: none; }
.channel-list {
  display: inline-flex; align-items: center; height: 42px; padding: 0 8px;
}
.channel-item {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 14px; height: 42px; position: relative;
  cursor: pointer; white-space: nowrap; font-size: 14px; color: #666;
}
.channel-item.active { color: #D73B25; font-size: 15px; font-weight: bold; }
.channel-item.active::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; background: #D73B25; border-radius: 2px;
}

/* ============ 内容区域 ============ */
.content-area { flex: 1; overflow: hidden; position: relative; }
.page { display: none; height: 100%; overflow-y: auto; }
.page.active { display: block; }
.page-index, .page-video, .page-search, .page-profile { background: #f5f5f5; }

/* ============ 下拉刷新 ============ */
.pull-refresh-indicator {
  display: flex; align-items: center; justify-content: center;
  height: 0; overflow: hidden; transition: height 0.25s ease;
  background: #f5f5f5; gap: 8px; font-size: 13px; color: #999;
}
.pull-refresh-indicator.show { height: 50px; }
.pull-refresh-indicator.refreshing { color: #D73B25; }
.pull-spinner {
  width: 18px; height: 18px; border: 2.5px solid #ddd;
  border-top-color: #D73B25; border-radius: 50%; display: none;
}
.pull-refresh-indicator.refreshing .pull-spinner { display: block; animation: spin 0.7s linear infinite; }

/* ============ 轮播图 ============ */
.banner-swiper {
  position: relative; height: 180px; overflow: hidden; margin-bottom: 1px;
}
.banner-track {
  display: flex; transition: transform 0.4s ease; height: 100%;
}
.banner-slide {
  min-width: 100%; height: 100%; position: relative; cursor: pointer;
}
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-title {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 14px 10px;
  color: #fff; font-size: 16px; font-weight: bold;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.banner-dots {
  position: absolute; bottom: 6px; right: 10px; display: flex; gap: 5px;
}
.banner-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5);
}
.banner-dot.active { background: #fff; width: 16px; border-radius: 3px; }

/* ============ 新闻列表 ============ */
.news-list { background: #fff; }
.news-item {
  padding: 14px; border-bottom: 1px solid #f2f2f2; cursor: pointer;
}
.news-item:active { background: #f9f9f9; }

/* 标题 */
.news-item .title {
  font-size: 16px; color: #222; line-height: 1.5; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px;
}

/* 2行简介 */
.news-desc {
  font-size: 13px; color: #888; line-height: 1.5; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 6px 0 10px;
}

/* ① 大图模式：标题 → 大图 → 简介 → 元信息 */
.news-big .news-big-img {
  width: 100%; height: 195px; object-fit: cover; border-radius: 8px;
  margin-top: 8px; margin-bottom: 10px; display: block;
}

/* ② 视频卡片：封面(带播放+时长) → 标题 → 简介 → 元信息 */
.news-video-card .video-card-cover {
  position: relative; margin-top: 8px; margin-bottom: 10px; border-radius: 8px; overflow: hidden;
}
.news-video-card .video-card-cover img {
  width: 100%; height: 195px; object-fit: cover; display: block;
}
.video-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 12px 10px;
}
.video-card-play {
  width: 44px; height: 44px; background: rgba(0,0,0,0.55);
  border-radius: 50%; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  display: flex; align-items: center; justify-content: center;
}
.video-card-play::after {
  content: ''; border-left: 14px solid #fff; border-top: 8px solid transparent;
  border-bottom: 8px solid transparent; margin-left: 3px;
}
.video-card-duration {
  background: rgba(0,0,0,0.65); color: #fff; font-size: 11px;
  padding: 2px 8px; border-radius: 4px;
}

/* ③ 纯文字 */
/* .news-text .title  -> 共用上方 .title */
/* .news-text .news-desc -> 共用 .news-desc */

/* ④ 左文右图 */
.news-single { display: flex; justify-content: space-between; }
.news-single-left { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-right: 12px; }
.news-single-img { width: 120px; height: 80px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

/* ⑤ 三图 */
.news-images { display: flex; gap: 6px; margin: 8px 0 6px; }
.news-images img { flex: 1; height: 72px; border-radius: 6px; object-fit: cover; }

/* 元信息 */
.news-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #999; }

/* 加载 */
.loading-wrap { display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.loading-spinner {
  width: 18px; height: 18px; border: 2.5px solid #ddd;
  border-top-color: #D73B25; border-radius: 50%; animation: spin 0.7s linear infinite;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-wrap span { font-size: 12px; color: #999; }

/* ============ 视频页 ============ */
.video-category-wrap { background: #fff; border-bottom: 1px solid #eee; }
.video-category-scroll {
  display: flex; overflow-x: auto; height: 42px; scrollbar-width: none;
}
.video-category-scroll::-webkit-scrollbar { display: none; }
.video-cat-item {
  flex-shrink: 0; padding: 0 16px; height: 42px; line-height: 42px;
  font-size: 14px; color: #666; cursor: pointer;
}
.video-cat-item.active { color: #D73B25; font-weight: bold; font-size: 15px; }
.video-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px;
}
.video-item {
  background: #fff; border-radius: 8px; overflow: hidden; cursor: pointer;
}
.video-cover-wrap { position: relative; }
.video-cover-wrap img { width: 100%; height: 110px; object-fit: cover; display: block; }
.video-duration {
  position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,0.7);
  color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 3px;
}
.video-play-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 38px; height: 38px; background: rgba(0,0,0,0.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.video-play-icon::after {
  content: ''; border-left: 12px solid #fff; border-top: 7px solid transparent;
  border-bottom: 7px solid transparent; margin-left: 3px;
}
.video-info { padding: 8px 10px; }
.video-title {
  font-size: 13px; color: #333; line-height: 1.4; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px;
}
.video-meta { display: flex; justify-content: space-between; font-size: 10px; color: #999; }

/* ============ 搜索页 ============ */
.search-header {
  display: flex; align-items: center; padding: 10px 14px;
  background: #fff; border-bottom: 1px solid #eee;
}
.search-input-wrap {
  flex: 1; display: flex; align-items: center; background: #f5f5f5;
  border-radius: 18px; padding: 0 14px; height: 36px;
}
.search-input-wrap input {
  flex: 1; border: none; background: none; outline: none; font-size: 14px;
  margin: 0 8px; height: 100%;
}
.clear-btn { cursor: pointer; flex-shrink: 0; }
.search-btn { margin-left: 12px; color: #D73B25; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.search-body { flex: 1; overflow-y: auto; }
.section { background: #fff; margin-top: 8px; padding: 16px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-title { font-size: 16px; font-weight: bold; color: #222; }
.section-clear { font-size: 12px; color: #999; cursor: pointer; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  background: #f5f5f5; border-radius: 14px; padding: 6px 16px;
  font-size: 13px; color: #333; cursor: pointer;
}
.hot-list > div {
  display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer;
}
.hot-list > div:last-child { border-bottom: none; }
.hot-rank {
  width: 28px; height: 28px; text-align: center; line-height: 28px;
  font-size: 14px; font-weight: bold; color: #999; margin-right: 14px;
}
.hot-rank.top { color: #D73B25; }
.hot-text { font-size: 14px; color: #333; }

/* ============ 我的页 ============ */
.user-section {
  background: linear-gradient(135deg, #D73B25, #E85A45); padding: 24px 16px;
  color: #fff;
}
.login-prompt { display: flex; align-items: center; }
.default-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.login-info { margin-left: 14px; }
.login-text { font-size: 15px; opacity: 0.9; display: block; margin-bottom: 10px; }
.login-btn {
  display: inline-block; background: #fff; color: #D73B25; font-size: 13px;
  font-weight: bold; padding: 6px 24px; border-radius: 16px; cursor: pointer;
}
.menu-section { background: #fff; margin-top: 8px; }
.menu-item {
  display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}
.menu-item:last-child { border-bottom: none; }
.menu-item span { flex: 1; font-size: 15px; margin-left: 12px; }
.arrow { flex-shrink: 0; }
.recommend-section { background: #fff; margin-top: 8px; padding: 16px; }
.recommend-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.recommend-item { cursor: pointer; }
.recommend-item img { width: 100%; height: 96px; border-radius: 8px; object-fit: cover; }
.recommend-item span { font-size: 13px; color: #333; margin-top: 6px; display: block; }

/* ============ 详情页 ============ */
.page-detail { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; z-index: 100; flex-direction: column; }
.page-detail.show { display: flex; }

/* 详情页导航栏 */
.detail-nav-bar-area { flex-shrink: 0; background: #fff; border-bottom: 1px solid #f0f0f0; }
.detail-nav-bar {
  height: 44px; display: flex; align-items: center; padding: 0 10px;
  position: relative; justify-content: flex-start;
}
.detail-back-btn { cursor: pointer; margin-right: 8px; flex-shrink: 0; }
.detail-nav-title {
  font-size: 14px; color: #888; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}

/* 正文滚动区 */
.detail-scroll { flex: 1; overflow-y: auto; background: #fff; }

/* 文章标题 */
.detail-title {
  font-size: 24px; font-weight: 700; line-height: 1.4; padding: 20px 16px 0; color: #111;
}

/* 作者信息栏 */
.detail-author-bar {
  display: flex; align-items: center; padding: 14px 16px; gap: 10px;
}
.detail-author-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #eee;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
}
.detail-author-info { flex: 1; }
.detail-author-name { font-size: 14px; font-weight: 600; color: #333; display: block; }
.detail-author-meta { display: flex; gap: 10px; font-size: 11px; color: #aaa; margin-top: 2px; }
.detail-follow-btn {
  background: #D73B25; color: #fff; font-size: 12px; font-weight: 500;
  padding: 5px 16px; border-radius: 14px; cursor: pointer; flex-shrink: 0;
  transition: all 0.2s;
}
.detail-follow-btn.followed { background: #eee; color: #999; }

/* 文章封面图 */
.detail-cover-img {
  width: 100%; height: auto; max-height: 420px; object-fit: cover; display: block;
}

/* 正文 */
.detail-body {
  padding: 16px; font-size: 16px; line-height: 1.85; color: #333; word-break: break-all;
}
.detail-body p { text-indent: 2em; margin-bottom: 14px; }
.detail-body p b { color: #111; font-size: 17px; display: block; text-indent: 0; margin: 20px 0 10px; }

/* 免责声明 */
.detail-disclaimer {
  margin: 0 16px 16px; padding: 14px; background: #f8f8f8; border-radius: 8px;
  font-size: 12px; color: #aaa; line-height: 1.6; text-align: center;
}

/* 互动栏 */
.detail-interaction-bar {
  display: flex; justify-content: space-around; padding: 14px 16px;
  background: #fff; border-top: 1px solid #f0f0f0;
}
.detail-interact-item {
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  font-size: 11px; color: #999; gap: 5px; min-width: 56px;
}
.detail-interact-item.liked { color: #D73B25; }
.detail-interact-icon { width: 24px; height: 24px; fill: none; stroke: #666; stroke-width: 1.8; }
.detail-interact-item.liked .detail-interact-icon { fill: #D73B25; stroke: none; }

/* ========== 相关推荐 ========== */
.related-section {
  background: #f5f5f5; padding: 16px 0;
}
.related-header {
  padding: 0 16px 12px; display: flex; align-items: center; gap: 8px;
}
.related-header-line {
  width: 3px; height: 16px; background: #D73B25; border-radius: 2px;
}
.related-header-text { font-size: 16px; font-weight: 700; color: #222; }
.related-list { background: #fff; }
.related-item {
  display: flex; padding: 12px 16px; border-bottom: 1px solid #f2f2f2; cursor: pointer;
  gap: 12px;
}
.related-item:active { background: #fafafa; }
.related-item-left { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.related-item-title {
  font-size: 15px; color: #222; line-height: 1.5; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.related-item-meta { font-size: 11px; color: #999; margin-top: 6px; display: flex; gap: 10px; }
.related-item-img { width: 100px; height: 68px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }

/* ========== 评论区 ========== */
.detail-comment-section {
  background: #f5f5f5; padding: 0 0 16px;
}
.detail-comment-header {
  padding: 16px 16px 0; font-size: 16px; font-weight: 700; color: #222;
}
.comment-list { background: #fff; margin-top: 10px; padding: 0 16px; }
.comment-list .comment-item { display: flex; padding: 14px 0; border-bottom: 1px solid #f5f5f5; }
.comment-list .comment-item:last-child { border-bottom: none; }
.comment-avatar-wrap {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  margin-right: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.comment-avatar-c1 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.comment-avatar-c2 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.comment-avatar-c3 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.comment-main { flex: 1; }
.comment-name { font-size: 13px; color: #555; font-weight: 500; margin-bottom: 5px; }
.comment-content { font-size: 14px; color: #333; line-height: 1.6; margin-bottom: 6px; }
.comment-bottom { display: flex; align-items: center; justify-content: space-between; }
.comment-time { font-size: 11px; color: #bbb; }
.comment-reply-btn {
  display: flex; align-items: center; gap: 4px; font-size: 12px; color: #999; cursor: pointer;
}
.comment-reply-btn svg { width: 14px; height: 14px; fill: none; stroke: #999; stroke-width: 1.5; }
.comment-more-btn {
  text-align: center; padding: 14px; font-size: 13px; color: #666; cursor: pointer;
}

/* 底部输入栏 */
.detail-comment-bar {
  display: flex; align-items: center; padding: 8px 16px;
  background: #fff; border-top: 1px solid #eee; gap: 10px; flex-shrink: 0;
}
.detail-comment-input {
  flex: 1; background: #f5f5f5; border-radius: 20px; padding: 0 16px;
  height: 36px; display: flex; align-items: center; font-size: 13px; color: #bbb; cursor: text;
}
.detail-comment-input input {
  flex: 1; border: none; background: none; outline: none; font-size: 14px; height: 100%;
}
.detail-comment-send {
  background: #D73B25; color: #fff; font-size: 13px; font-weight: 500;
  padding: 8px 22px; border-radius: 18px; cursor: pointer; flex-shrink: 0;
}
.detail-comment-actions { display: flex; gap: 16px; flex-shrink: 0; }
.detail-comment-actions svg { width: 22px; height: 22px; fill: none; stroke: #666; stroke-width: 1.8; cursor: pointer; }

/* ============ TabBar ============ */
.tabbar {
  display: flex; background: #fff; border-top: 1px solid #eee; flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 6px 0 4px; cursor: pointer; color: #999;
  font-size: 10px; gap: 2px; transition: color 0.2s;
}
.tab-item.active { color: #D73B25; }