/* XY Forum — Design System v2 (skin layer)
   只做覆盖，不改原样式；回滚 = 删除 index.html 中的 link 标签 */

:root{
  --ds-brand:#c02b34;
  --ds-brand-strong:#a8222a;
  --ds-brand-soft:#fdf3f3;
  --ds-ink:#16161a;
  --ds-ink-2:#3d3d44;
  --ds-ink-3:#6b6b73;
  --ds-ink-4:#9a9aa2;
  --ds-line:rgba(22,22,26,.10);
  --ds-line-2:rgba(22,22,26,.06);
  --ds-surface:#ffffff;
  --ds-surface-2:#f7f7f8;
  --ds-bg:#f4f4f5;
  --ds-r-sm:8px;
  --ds-r-md:12px;
  --ds-r-lg:16px;
  --ds-shadow-1:0 1px 2px rgba(22,22,26,.05);
  --ds-shadow-2:0 6px 20px -12px rgba(22,22,26,.22);
}

/* ---------- 1. 画布：去掉照片墙与玻璃 ---------- */
#xyBg{ opacity:0 !important; }
.stage{
  background:var(--ds-bg) !important;
}
.panel{
  background:var(--ds-bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.panel-content{ background:transparent !important; }

/* ---------- 2. 顶栏 ---------- */
.topbar{
  height:48px !important;
  margin:10px 14px 0 !important;
  padding:0 8px 0 12px !important;
  border-radius:var(--ds-r-md) !important;
  background:var(--ds-surface) !important;
  border:0 !important;
  box-shadow:0 0 0 1px var(--ds-line) !important;
}
.icon-btn{
  width:32px !important; height:32px !important;
  border-radius:var(--ds-r-sm) !important;
  color:var(--ds-ink-2) !important;
}
.icon-btn svg{ width:18px !important; height:18px !important; }
.icon-btn:hover{ background:var(--ds-surface-2) !important; }
.avatar{ width:28px !important; height:28px !important; }
.topbar .divider{ background:var(--ds-line) !important; }

/* ---------- 3. 公告条 ---------- */
.rollbar{
  height:34px !important;
  margin:8px 14px 0 !important;
  padding:0 10px !important;
  border-radius:var(--ds-r-sm) !important;
  background:var(--ds-surface) !important;
  border:0 !important;
  box-shadow:0 0 0 1px var(--ds-line) !important;
}
.roll-tag{
  background:var(--ds-brand-soft) !important;
  color:var(--ds-brand) !important;
  border-radius:4px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}
.roll-item{
  font-size:12.5px !important;
  color:var(--ds-ink-2) !important;
  letter-spacing:0 !important;
}
.roll-item::after{ background:var(--ds-line) !important; }

/* ---------- 4. 时间 / 天气：合并成一条信息带 ---------- */
.home-wx{
  margin:0 0 12px !important;
  padding:0 2px !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-bottom:0 !important;
  align-items:baseline !important;
}
.home-wx-clock{
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--ds-ink) !important;
  letter-spacing:0 !important;
}
.home-wx-date{
  font-size:12px !important;
  color:var(--ds-ink-4) !important;
  letter-spacing:0 !important;
}
.home-wx-temp{
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--ds-ink-2) !important;
}
.home-wx-txt{
  font-size:12px !important;
  font-weight:400 !important;
  color:var(--ds-ink-3) !important;
}
.home-wx-more{ font-size:11px !important; color:var(--ds-ink-4) !important; }

/* ---------- 5. 横幅 ---------- */
.banner{
  border-radius:var(--ds-r-md) !important;
  border:1px solid var(--ds-line) !important;
  box-shadow:none !important;
  background:var(--ds-surface-2) !important;
}
.banner::before{ box-shadow:none !important; }
.bn-brand-text{
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}

/* ---------- 6. 用户数：统计条 ---------- */
.views{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:12px 0 0 !important;
  padding:12px 14px !important;
  border-radius:var(--ds-r-md) !important;
  background:var(--ds-surface) !important;
  box-shadow:0 0 0 1px var(--ds-line) !important;
  text-align:left !important;
}
.views-label{
  font-size:12px !important;
  font-weight:400 !important;
  color:var(--ds-ink-3) !important;
  letter-spacing:0 !important;
  margin:0 !important;
}
.views-num{
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--ds-ink) !important;
  margin-left:4px !important;
  letter-spacing:0 !important;
}
.views-unit{
  font-size:11px !important;
  font-weight:400 !important;
  color:var(--ds-ink-4) !important;
  margin-left:2px !important;
}
.views-me{
  margin-left:auto !important;
  height:28px !important;
  padding:0 12px !important;
  border-radius:var(--ds-r-sm) !important;
  border:1px solid var(--ds-line) !important;
  background:transparent !important;
  color:var(--ds-ink-2) !important;
  font-size:12px !important;
  font-weight:400 !important;
}
.views-me:hover{ background:var(--ds-surface-2) !important; }

/* ---------- 7. 主按钮 ---------- */
.home-post{
  margin-top:12px !important;
  height:44px !important;
  border-radius:var(--ds-r-sm) !important;
  background:var(--ds-brand) !important;
  color:#fff !important;
  border:0 !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
.home-post:hover{ background:var(--ds-brand-strong) !important; }
.home-post:active{ transform:none !important; }
.home-post svg{ width:16px !important; height:16px !important; stroke-width:2 !important; }

/* ---------- 8. 搜索 ---------- */
.search-box{
  margin-top:10px !important;
  height:40px !important;
  padding:0 12px !important;
  border-radius:var(--ds-r-sm) !important;
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  box-shadow:none !important;
}
.search-box:focus-within{
  border-color:rgba(192,43,52,.45) !important;
  background:var(--ds-surface) !important;
}
.search-box input{
  font-size:13px !important;
  letter-spacing:0 !important;
  color:var(--ds-ink) !important;
}
.search-box input::placeholder{ color:var(--ds-ink-4) !important; }

/* ---------- 9. 区块标题：左对齐 + 计数 ---------- */
.section-divider{
  justify-content:flex-start !important;
  gap:6px !important;
  margin:20px 0 4px !important;
  padding:0 2px !important;
}
.section-divider .line{ display:none !important; }
.section-divider .text{
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--ds-ink) !important;
  letter-spacing:0 !important;
  padding:0 !important;
}
.section-divider::after{
  content:attr(data-count);
  font-size:11px;
  font-weight:400;
  color:var(--ds-ink-4);
}

/* ---------- 10. 帖子列表：行式分隔，不再层层卡片 ---------- */
#homeLatest{
  gap:0 !important;
  border-radius:var(--ds-r-md) !important;
  background:var(--ds-surface) !important;
  box-shadow:0 0 0 1px var(--ds-line) !important;
  overflow:hidden !important;
}
#homeLatest > *{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  border-bottom:1px solid var(--ds-line-2) !important;
  padding:14px !important;
  margin:0 !important;
}
#homeLatest > *:last-child{ border-bottom:0 !important; }
#homeLatest > *:hover{ background:var(--ds-surface-2) !important; }

/* ---------- 11. 排版细节收敛 ---------- */
.views-label,.section-divider .text,.roll-tag,.bn-brand-text,.views-me,.home-post{
  -webkit-font-smoothing:antialiased;
}
.sidebar-item{ border-radius:var(--ds-r-sm) !important; }
.sidebar-item.is-active{
  background:var(--ds-brand-soft) !important;
  color:var(--ds-brand) !important;
  font-weight:500 !important;
}

/* ---------- 12. 手机端 ---------- */
@media (max-width:520px){
  .topbar{ margin:8px 12px 0 !important; }
  .rollbar{ margin:8px 12px 0 !important; }
  .home-wx-clock{ font-size:14px !important; }
  .home-post{ height:42px !important; }
}

/* ---------- 13. 桌面端：内容列收窄居中 ---------- */
@media (min-width: 900px){
  .topbar{ width: 100% !important; max-width: 720px !important; margin: 14px auto 0 !important; }
  .rollbar{ width: 100% !important; max-width: 720px !important; margin: 8px auto 0 !important; }
  .panel-content{ max-width: 720px !important; margin: 0 auto !important; width: 100% !important; }
  .banner{ max-height: 300px !important; }
  .banner img, .banner video{ object-fit: cover !important; }
}

/* ---------- 14. 知乎式帖子排版 ---------- */
#homeLatest{
  gap:10px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  border-radius:0 !important;
}
#homeLatest > .hl-item{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  padding:16px 16px 10px !important;
  margin:0 !important;
  background:var(--ds-surface) !important;
  border:0 !important;
  border-radius:12px !important;
  box-shadow:0 0 0 1px var(--ds-line) !important;
}
#homeLatest > .hl-item:hover{
  transform:none !important;
  background:var(--ds-surface) !important;
  box-shadow:0 0 0 1px rgba(22,22,26,.18) !important;
}
/* 拆掉原来的一行 meta（外观盒消失，但选择器仍按 DOM 层级匹配） */
#homeLatest > .hl-item > .hl-meta{ display:contents !important; }

/* 标题：两行截断 */
#homeLatest > .hl-item > .hl-title{
  order:1; flex:0 0 100%;
  font-size:16.5px !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  color:var(--ds-ink) !important;
  letter-spacing:0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
#homeLatest > .hl-item.is-pick > .hl-title{ padding-right:34px !important; }

/* 作者行：小头像 + 昵称 */
#homeLatest > .hl-item > .hl-meta > .hl-ava{
  order:2; flex:0 0 auto !important;
  width:22px !important; height:22px !important;
  margin:10px 7px 0 0 !important;
  font-size:11px !important;
  background:#f0f0f2 !important;
  border-radius:50% !important;
}
#homeLatest > .hl-item > .hl-meta > .hl-name{
  order:3;
  margin:10px 0 0 !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  color:var(--ds-ink-3) !important;
  letter-spacing:0 !important;
  line-height:22px !important;
}

/* 摘要：三行截断 */
#homeLatest > .hl-item > .hl-text{
  order:5; flex:0 0 100%;
  margin:8px 0 0 !important;
  font-size:14.5px !important;
  line-height:1.75 !important;
  color:var(--ds-ink-2) !important;
  letter-spacing:0 !important;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
#homeLatest > .hl-item.is-open > .hl-text{ -webkit-line-clamp:unset; }

/* 配图 */
#homeLatest > .hl-item > .hl-pic{
  order:6; flex:0 0 100%;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:200px !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:8px !important;
  object-fit:cover;
}

/* 互动条：直接用原版连体胶囊（赞 | 收藏 | 分享），只调整位置 */
#homeLatest > .hl-item > .hl-meta > .hl-ia{
  order:7;
  margin:12px 0 0 !important;
}
/* 评论按钮：保持原版纯文字样式，排在最右 */
#homeLatest > .hl-item > .hl-meta > .hl-reply{
  order:9;
  margin:12px 0 0 14px !important;
}

/* 分类标签 + 时间：靠右 */
#homeLatest > .hl-item > .hl-meta > .hl-tag{
  order:4;
  margin:10px 0 0 8px !important;
  padding:0 6px !important;
  height:18px !important;
  line-height:18px !important;
  border-radius:3px !important;
  background:var(--ds-surface-2) !important;
  color:var(--ds-ink-3) !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
#homeLatest > .hl-item > .hl-meta > span:not([class]){
  order:8;
  margin:12px 0 0 auto !important;
  font-size:11.5px !important;
  color:var(--ds-ink-4) !important;
  letter-spacing:0 !important;
}

@media (max-width:520px){
  #homeLatest > .hl-item{ padding:14px 14px 9px !important; }
  #homeLatest > .hl-item > .hl-title{ font-size:16px !important; }
  #homeLatest > .hl-item > .hl-text{ font-size:14px !important; }
}

/* ---------- 15. 猜你喜欢：可横向滑动 ---------- */
.ds-guess{ position:relative; margin:2px 0 12px; }
.ds-guess-hd{
  display:flex; align-items:baseline; gap:8px;
  margin:0 0 9px;
  font-size:13px; font-weight:600; color:var(--ds-ink); letter-spacing:0;
}
.ds-guess-hd em{
  font-style:normal; font-size:11px; font-weight:400; color:var(--ds-ink-4);
}
.ds-guess-grid{
  display:flex; gap:9px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:2px 1px 6px; margin:0 -1px;
  scrollbar-width:none;
}
.ds-guess-grid::-webkit-scrollbar{ display:none; }
.ds-guess-card{
  box-sizing:border-box;
  flex:0 0 auto; width:clamp(126px,23%,168px);
  display:flex; flex-direction:row; align-items:center; gap:9px;
  height:56px; padding:0 12px;
  border:0; border-radius:11px;
  background:var(--ds-surface);
  box-shadow:0 0 0 1px var(--ds-line);
  font-family:inherit; text-align:left; color:var(--ds-ink); text-decoration:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  scroll-snap-align:start;
  transition:box-shadow 160ms ease, background 160ms ease;
}
.ds-guess-card:hover{ box-shadow:0 0 0 1px rgba(22,22,26,.20); }
.ds-guess-card:active{ background:var(--ds-surface-2); }
.ds-guess-ic{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 auto;
  border-radius:8px;
  background:var(--ds-brand-soft); color:var(--ds-brand);
}
.ds-guess-ic svg{ width:15px; height:15px; }
.ds-guess-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ds-guess-t{
  position:relative;
  font-size:13px; font-weight:600; color:var(--ds-ink);
  letter-spacing:0; white-space:nowrap;
}
.ds-guess-s{
  display:block;
  font-size:10.5px; color:var(--ds-ink-4); letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 自研功能卡：淡品牌底 + 角标小字 */
.ds-guess-card.is-feat{
  background:var(--ds-brand-soft);
  box-shadow:0 0 0 1px rgba(192,43,52,.16);
}
.ds-guess-card.is-feat:hover{ box-shadow:0 0 0 1px rgba(192,43,52,.34); }
.ds-guess-card.is-feat .ds-guess-s{ color:var(--ds-brand); font-weight:600; }
/* 还能往右滑时，右侧渐隐提示 */
.ds-guess::after{
  content:''; position:absolute; right:0; top:26px; bottom:6px;
  width:36px; border-radius:0 11px 11px 0;
  background:linear-gradient(90deg, rgba(244,244,245,0) 0%, var(--ds-bg) 72%);
  opacity:0; transition:opacity 160ms ease; pointer-events:none;
}
.ds-guess.has-more::after{ opacity:1; }
@media (max-width:420px){
  .ds-guess-grid{ gap:8px; }
  .ds-guess-card{ height:54px; padding:0 10px; gap:8px; }
  .ds-guess-ic{ width:26px; height:26px; border-radius:7px; }
  .ds-guess-ic svg{ width:14px; height:14px; }
  .ds-guess-t{ font-size:12.5px; }
  .ds-guess-s{ font-size:10px; }
}

/* 侧栏：已移入「猜你喜欢」的入口不再占位 */
.sidebar .sidebar-item.ds-moved{ display:none !important; }

/* 侧栏底部快捷行里的「建议箱」 */
.sidebar-quick .sidebar-item.ds-sug{
  flex:1 1 0; width:auto; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center; gap:0;
  border:1px solid rgba(28,28,40,.12); border-radius:10px;
  background:rgba(255,255,255,.72);
  color:#3a3a42; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  white-space:nowrap;
}
.sidebar-quick .sidebar-item.ds-sug svg{ display:none; }
.sidebar-quick .sidebar-item.ds-sug:hover{
  background:rgba(255,255,255,.9); border-color:rgba(192,43,52,.38); color:#c02b34;
}
.sidebar-quick .sidebar-item.ds-sug.is-active{
  background:rgba(192,43,52,.08); border-color:rgba(192,43,52,.38); color:#c02b34;
}

/* 聊天室未读小红点 */
.ds-guess-dot{
  display:none; position:absolute; top:-1px; right:-9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--ds-brand);
}
.ds-guess-card.has-dot .ds-guess-dot{ display:block; }

/* ---------- 16. 侧边栏下线：导航收进顶栏 ---------- */
#sidebar.ds-off,
#menuBtn.ds-off{ display:none !important; }

/* 品牌字标 = 回首页 */
.ds-brand{
  display:flex; align-items:center; gap:8px;
  height:32px; margin-left:-2px; padding:0 9px 0 4px;
  border:0; border-radius:var(--ds-r-sm);
  background:transparent; cursor:pointer;
  font-family:inherit; color:var(--ds-ink);
  -webkit-tap-highlight-color:transparent;
  transition:background 140ms ease;
}
.ds-brand:hover{ background:var(--ds-surface-2); }
.ds-brand:active{ background:#efeff1; }
.ds-brand-logo{
  display:block; width:20px; height:20px; flex:0 0 auto;
  border-radius:5px;
  box-shadow:0 0 0 1px var(--ds-line);
}
.ds-brand-tx{
  font-size:13px; font-weight:600; line-height:1;
  letter-spacing:.01em; white-space:nowrap;
}

/* 顶栏图标按钮的选中态 */
.icon-btn.is-on{
  background:var(--ds-brand-soft) !important;
  color:var(--ds-brand) !important;
}
.ds-top[hidden]{ display:none !important; }

/* 首页列表底部的建议箱入口 */
.ds-tip{
  display:flex; align-items:center; gap:9px; width:100%;
  margin:10px 0 2px; padding:13px 14px;
  border:0; border-radius:10px;
  background:var(--ds-surface);
  box-shadow:0 0 0 1px var(--ds-line);
  font-family:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow 160ms ease, background 160ms ease;
}
.ds-tip:hover{ box-shadow:0 0 0 1px rgba(22,22,26,.20); }
.ds-tip:active{ background:var(--ds-surface-2); }
.ds-tip-ic{ display:flex; flex:0 0 auto; color:var(--ds-brand); }
.ds-tip-ic svg{ width:16px; height:16px; }
.ds-tip-tx{ font-size:12.5px; line-height:1.4; color:var(--ds-ink-3); letter-spacing:0; }
.ds-tip-tx em{ font-style:normal; font-weight:500; color:var(--ds-ink); }
.ds-tip-ar{ margin-left:auto; font-size:16px; line-height:1; color:var(--ds-ink-4); }

@media (max-width:380px){
  .ds-brand-tx{ display:none; }
  .ds-brand{ padding:0 6px; gap:0; }
  .ds-tip-tx{ font-size:12px; }
}