/**
 * 小红书风格 - 北京旅游攻略
 * 特点：白底、简洁、图片优先、红色点缀、笔记式排版
 */

:root {
  --xhs-bg: #ffffff;
  --xhs-bg-page: #f7f7f7;
  --xhs-bg-card: #ffffff;
  --xhs-text: #161823;
  --xhs-text-secondary: #8c8c8c;
  --xhs-text-muted: #b2b2b2;
  --xhs-red: #ff2442;
  --xhs-red-soft: #ff4757;
  --xhs-border: #f0f0f0;
  --xhs-radius: 8px;
  --xhs-radius-lg: 12px;
  --xhs-radius-full: 999px;
  --xhs-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 整体 */
.main {
  background: var(--xhs-bg-page) !important;
  font-family: var(--xhs-font) !important;
  min-height: 100vh;
}

body.dj-commonbody {
  background: var(--xhs-bg-page) !important;
  color: var(--xhs-text);
  font-family: var(--xhs-font) !important;
}

/* 顶部 - 小红书笔记封面风格 */
.tb {
  background: var(--xhs-bg) !important;
}

.top {
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
  background: var(--xhs-bg) !important;
}

.top .headerimg {
  margin: 0 !important;
  border-radius: 0 !important;
  height: 375px !important;
  position: relative;
  object-fit: cover;
}

.top .headerimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}

/* 标题 - 放在图下方，小红书式 */
.top .tmc {
  background: var(--xhs-bg) !important;
  border-radius: 0 !important;
  padding: 16px 16px 20px !important;
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
}

.top .tmc p {
  color: var(--xhs-text) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  max-height: none !important;
  font-weight: 600;
  text-shadow: none !important;
}

/* 用户信息 - 左上角简洁头像+昵称，小红书笔记头 */
.top .user {
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 12px 0 0 16px !important;
  border-radius: 0 !important;
  left: 0 !important;
  top: 12px !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.top .user .photo img {
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  border-radius: 50% !important;
}

.top .user .info {
  color: #fff !important;
  margin: 0 !important;
  font-size: 14px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.top .user .info p:first-child span:first-child {
  font-weight: 600;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.top .user .info p:last-child {
  color: rgba(255,255,255,0.9) !important;
  font-size: 12px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

#authorlevel {
  background: rgba(255,255,255,0.9) !important;
  color: var(--xhs-red) !important;
  border-radius: var(--xhs-radius-full);
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600;
}

/* 内容卡片 - 白底无边框，轻微分隔 */
.item {
  margin: 0 0 8px !important;
  padding: 16px 16px 20px !important;
  background: var(--xhs-bg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--xhs-border) !important;
}

.item:last-of-type {
  border-bottom: none !important;
}

/* 行程信息 - 小红书标签式 */
.cxinfobg {
  background: #fafafa !important;
  border-radius: var(--xhs-radius) !important;
  margin: 0 0 16px 0 !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
}

.cxinfobg .cxinfo {
  display: grid !important;
  grid-template-columns: auto 1fr auto 1fr !important;
  gap: 8px 16px !important;
  align-items: center !important;
  color: var(--xhs-text-secondary);
  height: auto !important;
  min-height: 32px !important;
  line-height: 1.4 !important;
  overflow: visible !important;
}

.cxinfobg .cxinfo .cxtype {
  color: var(--xhs-text-muted);
  margin-left: 0 !important;
  float: none !important;
  max-width: none !important;
  white-space: nowrap !important;
}

.cxinfobg .cxinfo .cxtype img {
  vertical-align: middle !important;
  margin-right: 2px !important;
}

.cxinfobg .cxinfo .cxtext {
  color: var(--xhs-text);
  font-weight: 500;
  float: none !important;
  max-width: none !important;
  overflow: visible !important;
}

/* 游记摘要 - 小红书正文 */
.youjitb {
  margin: 0 !important;
}

.youjitb .youjicontent {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--xhs-text);
}

.youjitb .youjicontent p span[style*="border-radius"] {
  display: block !important;
  margin-top: 12px;
  padding: 8px 12px !important;
  background: #f5f5f5 !important;
  border-radius: var(--xhs-radius) !important;
  font-size: 12px !important;
  color: var(--xhs-text-secondary);
  line-height: 1.6 !important;
}

.youjitb .youjicontent hr {
  border: none;
  height: 1px;
  background: var(--xhs-border);
  margin: 12px 0;
}

/* 回复/笔记主内容 */
.replytb {
  margin: 0 !important;
}

.reply {
  padding: 0 !important;
}

.reply .repUser {
  height: auto !important;
  padding: 0 0 12px !important;
}

.reply .repUser img {
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  border-radius: 50% !important;
}

.reply .repUser .text .t1 {
  color: var(--xhs-text);
  font-weight: 600;
  font-size: 15px;
}

.reply .repUser .text .t2 {
  color: var(--xhs-text-muted) !important;
  font-size: 12px;
}

.reply .repUser .text .bestrep {
  color: var(--xhs-red) !important;
  font-size: 11px !important;
  font-weight: 600;
  background: rgba(255,36,66,0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* 正文 - 小红书笔记体 */
.reply .content,
.dj-content {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--xhs-text);
}

.reply .content p {
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin-bottom: 12px;
}

.reply .content p:last-child {
  margin-bottom: 0;
}

/* Tips 框 - 小红书式浅色块 */
.dj-rich-content div[style*="fff5e5"],
.dj-rich-content div[style*="ffe3b7"] {
  border: none !important;
  background: #fff8f5 !important;
  border-radius: var(--xhs-radius) !important;
  padding: 14px 16px !important;
  border-left: 3px solid var(--xhs-red) !important;
}

.reply .content h3 {
  font-size: 17px !important;
  font-weight: 600;
  color: var(--xhs-text);
  margin: 16px 0 12px !important;
}

/* 图片 - 小红书圆角 */
.reply .content .dj-contentimg {
  border-radius: var(--xhs-radius-lg) !important;
  overflow: hidden;
  margin: 10px 0 !important;
  max-width: 100%;
}

/* 评论区 */
.reply .discuss {
  color: var(--xhs-text-secondary);
  font-size: 14px !important;
}

.reply .discusstb {
  background: #fafafa !important;
  border: none !important;
  border-radius: var(--xhs-radius) !important;
  padding: 12px 14px !important;
  margin-bottom: 20px !important;
}

.reply .discusstb .discussitem {
  border-bottom: 1px solid var(--xhs-border) !important;
  padding: 14px 0 !important;
}

.reply .discusstb .discussitem:last-child {
  border-bottom: none !important;
}

.reply .discusstb .discussitem .discussuser .name {
  color: var(--xhs-text);
  font-weight: 600;
}

.reply .discusstb .discussitem .discusscont .text {
  color: var(--xhs-text-secondary);
}

.reply .discusstb .discussitem .discusscont .time {
  color: var(--xhs-text-muted);
  font-size: 12px;
}

/* 互动按钮 - 小红书红 */
.dj-zan-icon.dianzan {
  color: var(--xhs-text-muted);
}

.msgBack_newtemp01,
.msgBack_newtemp01_some {
  color: var(--xhs-red) !important;
  font-weight: 500;
}

.foot {
  font-size: 12px !important;
  color: var(--xhs-text-muted);
}

.dj-collapsed-txt {
  color: var(--xhs-text-secondary) !important;
}

.dj-collapsed-svg path {
  fill: var(--xhs-red) !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  .item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}