/* ============================================================
   首页（步骤47）：作用域 .qh-home（page/layout-sns.php 的主内容容器），页面专用 class 一律 qh-home- 前缀
   - 幻灯片、公告、置顶卡片、加载更多；帖子卡片本身在 feed.css（和个人主页、搜索、标签 / 话题页共用）
   - 右栏小工具：保留主题的小工具和功能（后台「外观 → 小工具」照旧），只把外观改成基线的卡片
   规范：_优化补丁/前端设计基线.md 6.12
   ============================================================ */

.qh-home { font-family: var(--qh-font); }
.qh-home-title { margin: 0; color: var(--qh-s-text); font-size: 16px; font-weight: 600; line-height: 1.3; }

/* ---- 幻灯片：12px 圆角；分页点是小圆点（当前项短横条）；箭头平时隐藏，鼠标移上去才出现 ---- */
.qh-home .jinsom-slider {
  margin-bottom: 12px;
  border-radius: var(--qh-r-card);
  background-color: var(--qh-s-sunken);
  box-shadow: var(--qh-s-shadow);
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);   /* 切换动画时圆角也裁得住（Safari） */
}
.qh-home .jinsom-slider .swiper-slide { border-radius: var(--qh-r-card); background-position: center; background-size: cover; }
.qh-home .jinsom-slider .swiper-button-next,
.qh-home .jinsom-slider .swiper-button-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font-size: 16px !important;
  line-height: 1;
  opacity: 0;
  transition: opacity .2s, background-color .2s;
}
.qh-home .jinsom-slider .swiper-button-prev { left: 14px; }
.qh-home .jinsom-slider .swiper-button-next { right: 14px; }
.qh-home .jinsom-slider:hover .swiper-button-next,
.qh-home .jinsom-slider:hover .swiper-button-prev { opacity: 1; }
.qh-home .jinsom-slider .swiper-button-next:hover,
.qh-home .jinsom-slider .swiper-button-prev:hover { background: rgba(0, 0, 0, .55); }
.qh-home .jinsom-slider .swiper-pagination { bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.qh-home .jinsom-slider .swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 !important;
  border-radius: 3px;
  background: rgba(255, 255, 255, .55);
  opacity: 1;
  transition: width .2s var(--qh-ease), background-color .2s;
}
.qh-home .jinsom-slider .swiper-pagination .swiper-pagination-bullet-active { width: 18px; height: 6px; background: #fff !important; }

/* ---- 公告：主题色浅底提示条（后台「幻灯片底部自定义 HTML」填 <div class="qh-home-notice">…</div>） ---- */
.qh-home-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: var(--qh-r-card);
  background-color: var(--qh-s-tint);
  color: var(--qh-s-text);
  font-size: 14px;
  line-height: 1.6;
}
.qh-home-notice > i { flex: none; color: var(--qh-accent); font-size: 16px; }
.qh-home-notice p { margin: 0; }
.qh-home-notice b { color: var(--qh-accent); font-weight: 600; }

/* ---- 置顶：一张紧凑卡片，一行一条 ---- */
.qh-home-sticky {
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 16px 20px 10px;
  border: 1px solid var(--qh-s-edge);
  border-radius: var(--qh-r-card);
  background-color: var(--qh-s-card);
  box-shadow: var(--qh-s-shadow);
  color: var(--qh-s-text);
}
.qh-home-sticky .qh-home-title { margin-bottom: 6px; }
.qh-home-sticky ul { margin: 0; padding: 0; }
.qh-home-sticky li { list-style: none; }
.qh-home-sticky li a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: var(--qh-r-item);
  color: var(--qh-s-text);
  transition: background-color .15s;
}
.qh-home-sticky li a:hover { background-color: var(--qh-s-sunken); }
.qh-home-sticky b { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.qh-home-sticky li a:hover b:not([style]) { color: var(--qh-accent); }
.theme-dark .qh-home-sticky b[style*="--qh-tc-d"] { color: var(--qh-tc-d) !important; }
.qh-home-views { flex: none; display: flex; align-items: center; gap: 4px; color: var(--qh-s-muted); font-size: 12px; }
.qh-home-views i { font-size: 14px; }
/* 帖子标记：后台设置的颜色做实心底白字；没有标记的显示主题色「置顶」 */
.qh-home-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.qh-home-mark.is-pin { background-color: var(--qh-accent); }
.qh-home-mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   右栏小工具：统一成基线卡片
   ============================================================ */
.qh-home .jinsom-content-right .jinsom-sidebar-box {
  box-sizing: border-box;
  margin-bottom: 12px;
  border: 1px solid var(--qh-s-edge);
  border-radius: var(--qh-r-card);
  background-color: var(--qh-s-card);
  box-shadow: var(--qh-s-shadow);
  color: var(--qh-s-text);
  font-family: var(--qh-font);
  --qh-ring-gap: var(--qh-s-card);
}
/* 小工具标题（默认 / 大标题 / 色块三种写法都改成卡片标题） */
.qh-home .jinsom-content-right .jinsom-sidebar-box h3 {
  margin: 0;
  padding: 18px 20px 10px;
  border: 0;
  background: none;
  color: var(--qh-s-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* ---- 登录（未登录）：输入框、整行登录按钮，注册 + 忘记密码一行，第三方登录 ---- */
.qh-home .jinsom-sidebar-login { display: flex; flex-wrap: wrap; align-items: center; padding: 20px; }
.qh-home .jinsom-sidebar-login > p { flex: 0 0 100%; margin: 0 0 10px; }
.qh-home .jinsom-sidebar-login input {
  height: 40px;
  margin: 0;
  padding: 0 12px 0 36px;
  border: 1px solid transparent;
  border-radius: var(--qh-r-btn);
  background-color: var(--qh-s-sunken);
  color: var(--qh-s-text);
  font: 14px var(--qh-font);
  outline: none;
  transition: border-color .15s, background-color .15s;
}
.qh-home .jinsom-sidebar-login input::placeholder { color: var(--qh-s-muted); }
.qh-home .jinsom-sidebar-login input:focus { border-color: rgba(var(--qh-accent-rgb), .55); background-color: var(--qh-s-card); }
.qh-home .jinsom-sidebar-login p.a::before,
.qh-home .jinsom-sidebar-login p.b::before { top: 12px; left: 10px; margin: 0; color: var(--qh-s-muted); font-size: 14px; }
.qh-home .jinsom-sidebar-login-btn {
  order: 1;
  flex: 0 0 100%;
  height: 40px;
  margin-top: 4px;
  border-radius: var(--qh-r-btn);
  background-color: var(--qh-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
}
.qh-home .jinsom-sidebar-login-btn:hover { background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)); }
.qh-home .jinsom-sidebar-reg-btn {
  order: 2;
  float: none;
  width: auto;
  height: 28px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: 7px;
  background-color: var(--qh-s-sunken);
  color: var(--qh-s-text2);
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
}
.qh-home .jinsom-sidebar-reg-btn:hover { background-color: var(--qh-s-hover); color: var(--qh-s-text); }
.qh-home .jinsom-sidebar-login > span {   /* 原来的「?」找回密码 */
  order: 3;
  position: static;
  width: auto;
  height: auto;
  margin: 12px 0 0 auto;
  background: none;
  color: var(--qh-s-muted);
  font-size: 0;
  line-height: 28px;
}
.qh-home .jinsom-sidebar-login > span::after { content: "忘记密码？"; font-size: 12px; }
.qh-home .jinsom-sidebar-login > span:hover { color: var(--qh-accent); }
.qh-home .jinsom-sidebar-login .social {
  order: 4;
  flex: 0 0 100%;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--qh-s-line);
  text-align: left;
}
.qh-home .jinsom-sidebar-login .social::before { content: "其他方式登录"; flex: 1; color: var(--qh-s-muted); font-size: 12px; }
.qh-home .jinsom-sidebar-login .social::after { display: none; }
.qh-home .jinsom-sidebar-login .social > li { margin: 0; list-style: none; opacity: 1; }
.qh-home .jinsom-sidebar-login .social > li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--qh-s-sunken);
  color: var(--qh-s-text2);
  transition: background-color .15s, color .15s;
}
.qh-home .jinsom-sidebar-login .social > li a:hover { background-color: var(--qh-s-tint); color: var(--qh-accent); }
.qh-home .jinsom-sidebar-login .social > li i { font-size: 16px; }

/* ---- 登录（已登录）：个人卡片 ---- */
.qh-home .jinsom-sidebar-user-info .bg { height: 76px; background-color: var(--qh-s-tint); }
.qh-home .jinsom-sidebar-user-info .avatarimg { bottom: -30px; width: 64px; height: 64px; margin-left: -32px; padding: 3px; box-sizing: content-box; background: var(--qh-s-card); left: 50%; }
.qh-home .jinsom-sidebar-user-info .avatarimg a { position: relative; display: block; }
.qh-home .jinsom-sidebar-user-info .avatarimg img { display: block; width: 64px; height: 64px; margin: 0; background-color: var(--qh-s-sunken); }
.qh-home .jinsom-sidebar-user-info .avatarimg i { right: 0; bottom: 0; }
.qh-home .jinsom-sidebar-user-info .info { padding: 40px 20px 0; color: var(--qh-s-text); font-size: 16px; font-weight: 600; }
.qh-home .jinsom-sidebar-user-info .info .name a { color: var(--qh-s-text); }
.qh-home .jinsom-sidebar-user-info .lv { margin-top: 14px; padding: 0 20px; color: var(--qh-s-muted); font-size: 12px; }
.qh-home .jinsom-sidebar-user-info .lv .title { display: flex; justify-content: space-between; }
.qh-home .jinsom-sidebar-user-info .lv .title span:first-child { color: var(--qh-s-muted); font-size: 12px; }
.qh-home .jinsom-sidebar-user-info .lv .lv-number { float: none; color: var(--qh-s-muted); font-variant-numeric: tabular-nums; }
.qh-home .jinsom-sidebar-user-info .lv .bar { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 3px; background-color: var(--qh-s-sunken); }
.qh-home .jinsom-sidebar-user-info .lv .bar span { height: 6px; border-radius: 3px; background-color: var(--qh-accent); }
.qh-home .jinsom-sidebar-user-info .number { margin: 14px 12px; padding: 0; }
.qh-home .jinsom-sidebar-user-info .number li { border: 0; list-style: none; }
.qh-home .jinsom-sidebar-user-info .number li strong { color: var(--qh-s-text); font-size: 18px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.qh-home .jinsom-sidebar-user-info .number li span { color: var(--qh-s-muted); font-size: 12px; }
.qh-home .jinsom-sidebar-user-info .number li a:hover strong { color: var(--qh-accent); }
.qh-home .jinsom-sidebar-user-info .sign {
  height: 40px;
  margin: 0 20px 20px;
  border: 0;
  border-radius: var(--qh-r-btn);
  background-color: var(--qh-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
}
.qh-home .jinsom-sidebar-user-info .sign:hover { background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)); }
.qh-home .jinsom-sidebar-user-info .sign.had { margin-bottom: 20px; border: 0; background: var(--qh-s-sunken); color: var(--qh-s-text2); }
.qh-home .jinsom-sidebar-user-info .sign.had a { color: var(--qh-s-text2); }
.qh-home .jinsom-sidebar-user-info .sign.had m {
  margin-left: 8px;
  padding: 2px 7px;
  border: 0;
  border-radius: 5px;
  background: var(--qh-s-card);
  color: var(--qh-s-text2);
  font-size: 12px;
  vertical-align: 1px;
}

/* ---- 图片 / HTML 小工具：图片铺满卡片 ---- */
.qh-home .jinsom-content-right .jinsom-sidebar-box.jinsom-widget-html { overflow: hidden; }
.qh-home .jinsom-content-right .jinsom-widget-html img { display: block; width: 100%; max-width: none !important; height: auto; }

/* ---- 签到排行：今日 / 累计做成分段切换；每行排名、头像、昵称、签到时间 · 累计天数、关注 ---- */
.qh-home .jinsom-widget-sign-ranking .layui-tab-title {
  display: flex;
  height: auto;
  margin: 16px 20px 6px;
  padding: 3px;
  border: 0;
  border-radius: 9px;
  background-color: var(--qh-s-sunken);
}
.qh-home .jinsom-widget-sign-ranking .layui-tab-title li {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0;
  border-radius: 7px;
  color: var(--qh-s-text2);
  font-size: 13px;
  font-weight: 500;
  line-height: 30px;
  transition: background-color .15s, color .15s;
}
.qh-home .jinsom-widget-sign-ranking .layui-tab-title li:hover { color: var(--qh-s-text); }
.qh-home .jinsom-widget-sign-ranking .layui-tab-title .layui-this { background-color: var(--qh-s-card); color: var(--qh-s-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.qh-home .jinsom-widget-sign-ranking .layui-tab-title .layui-this::after { display: none; }
.qh-home .jinsom-widget-sign-ranking .jinsom-sidebar-user-list { padding: 2px 12px 4px; counter-reset: qh-rank; }
.qh-home .jinsom-widget-sign-ranking .jinsom-sidebar-user-list li {
  position: relative;
  display: grid;
  grid-template-columns: 18px 32px auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--qh-r-item);
  counter-increment: qh-rank;
  transition: background-color .15s;
}
.qh-home .jinsom-widget-sign-ranking .jinsom-sidebar-user-list li::after { display: none; }
.qh-home .jinsom-widget-sign-ranking .jinsom-sidebar-user-list li:hover { background-color: var(--qh-s-sunken); }
.qh-home .jinsom-widget-sign-ranking .jinsom-sidebar-user-list li::before {
  content: counter(qh-rank);
  grid-column: 1;
  grid-row: 1 / 3;
  color: var(--qh-s-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.qh-home .jinsom-widget-sign-ranking .jinsom-sidebar-user-list li:nth-child(-n+3)::before { color: var(--qh-accent); font-weight: 700; }
.qh-home .jinsom-widget-sign-ranking .avatarimg { grid-column: 2; grid-row: 1 / 3; float: none; width: 32px; height: 32px; }
.qh-home .jinsom-widget-sign-ranking .avatarimg a { position: relative; display: block; width: 32px; height: 32px; }
.qh-home .jinsom-widget-sign-ranking .avatarimg ls { display: contents; }
.qh-home .jinsom-widget-sign-ranking .avatarimg x { display: none; }   /* 32px 不显示头像框 */
.qh-home .jinsom-widget-sign-ranking .avatarimg img { display: block; width: 32px; height: 32px; }
.qh-home .jinsom-widget-sign-ranking .avatarimg i.jinsom-verify { right: -3px; bottom: -3px; transform: scale(.7); transform-origin: 100% 100%; }
.qh-home .jinsom-widget-sign-ranking .info,
.qh-home .jinsom-widget-sign-ranking .follow { display: contents; }
.qh-home .jinsom-widget-sign-ranking .info > a {
  grid-column: 3 / 5;
  grid-row: 1;
  overflow: hidden;
  color: var(--qh-s-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qh-home .jinsom-widget-sign-ranking .info > a:hover { color: var(--qh-accent); }
.qh-home .jinsom-widget-sign-ranking .time { grid-column: 3; grid-row: 2; margin: 0; color: var(--qh-s-muted); font-size: 12px; line-height: 1.5; }
.qh-home .jinsom-widget-sign-ranking .follow .number { grid-column: 4; grid-row: 2; overflow: hidden; margin: 0 0 0 -6px; color: var(--qh-s-muted); font-size: 12px; line-height: 1.5; white-space: nowrap; }
.qh-home .jinsom-widget-sign-ranking .follow .number::before { content: "·"; margin-right: 4px; }
.qh-home .jinsom-widget-sign-ranking .follow .number i { margin: 0 1px; color: inherit; font-style: normal; font-variant-numeric: tabular-nums; }
.qh-home .jinsom-widget-sign-ranking .follow > span {
  grid-column: 5;
  grid-row: 1 / 3;
  position: static;
  width: auto;
  height: 24px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background-color: var(--qh-s-sunken);
  color: var(--qh-s-text2);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  transition: background-color .15s, color .15s;
}
.qh-home .jinsom-widget-sign-ranking .follow > span:hover { background-color: var(--qh-s-tint); color: var(--qh-accent); }
.qh-home .jinsom-widget-sign-ranking .follow > span.had { color: var(--qh-s-muted); }
.qh-home .jinsom-widget-sign-ranking .follow > span i { display: none; }
.qh-home .jinsom-widget-sign-ranking li:hover .follow > span { background-color: var(--qh-s-card); }
.qh-home .jinsom-widget-sign-ranking li:hover .follow > span:hover { background-color: var(--qh-s-tint); }
.qh-home .jinsom-widget-sign-ranking .more-sign {
  margin: 4px 20px 0;
  padding: 12px 0 14px;
  border-top: 1px solid var(--qh-s-line);
  color: var(--qh-s-muted);
  font-size: 12px;
  transition: color .15s;
}
.qh-home .jinsom-widget-sign-ranking .more-sign:hover { color: var(--qh-accent); }

/* ---- 最新内容：编号列表，前三主题色 ---- */
.qh-home .jinsom-widget-single-video-list.no-img { padding: 0 12px 12px; }
.qh-home .jinsom-widget-single-video-list.no-img li { margin: 0; border-radius: 0; list-style: none; }
.qh-home .jinsom-widget-single-video-list.no-img li a {
  padding: 7px 8px;
  border-radius: var(--qh-r-item);
  color: var(--qh-s-text);
  font-size: 14px;
  line-height: 22px;
  transition: background-color .15s, color .15s;
}
.qh-home .jinsom-widget-single-video-list.no-img li a:hover { background-color: var(--qh-s-sunken); color: var(--qh-accent); }
.qh-home .jinsom-widget-single-video-list.no-img li i {
  width: 18px;
  height: auto;
  margin-right: 8px;
  border-radius: 0;
  background: none !important;
  color: var(--qh-s-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: inherit;
  vertical-align: 0;
}
.qh-home .jinsom-widget-single-video-list.no-img li:nth-child(-n+3) i { color: var(--qh-accent); font-weight: 700; }

/* ---- 推广：本页链接 + 复制，分享按钮 ---- */
.qh-home .jinsom-widget-share .content { padding: 0 20px 18px; }
.qh-home .jinsom-widget-share .content p { margin: 0 0 8px; color: var(--qh-s-muted); font-size: 12px; }
.qh-home .jinsom-widget-share .link { display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 16px; }
.qh-home .jinsom-widget-share .link > p { flex: 0 0 100%; }
.qh-home .jinsom-widget-share .link .list {
  float: none;
  flex: 1;
  min-width: 0;
  max-width: none;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: var(--qh-r-btn) 0 0 var(--qh-r-btn);
  background-color: var(--qh-s-sunken);
  color: var(--qh-s-text2);
  font-size: 13px;
  line-height: 36px;
}
.qh-home .jinsom-widget-share .link n {
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0 var(--qh-r-btn) var(--qh-r-btn) 0;
  background-color: var(--qh-s-sunken);
  color: var(--qh-accent);
  font-size: 13px;
  font-weight: 500;
  vertical-align: 0;
}
.qh-home .jinsom-widget-share .link n:hover { color: var(--qh-accent); background-color: var(--qh-s-tint); }
.qh-home .jinsom-widget-share .social { padding: 0; border: 0; }
.qh-home .jinsom-widget-share .social .list { display: flex; gap: 10px; padding: 0; }
.qh-home .jinsom-widget-share .social li {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--qh-s-sunken);
  list-style: none;
  transition: background-color .15s;
}
.qh-home .jinsom-widget-share .social li i { color: var(--qh-s-text2) !important; font-size: 17px; transition: color .15s; }
.qh-home .jinsom-widget-share .social li:hover { background-color: var(--qh-s-tint); }
.qh-home .jinsom-widget-share .social li:hover i { color: var(--qh-accent) !important; }