/* ==========================================================================
   Hopelee — Optimize Layer
   Thesis: "Datasheet × Engineer's Notebook"
   Author: MiniMax (Mavis)
   覆盖路径: header.php 第 21 行后
   ========================================================================== */

/* ---------- 0. Design Tokens ---------- */
:root {
  /* surface */
  --hp-paper: #F7F4ED;          /* 工程纸底色 */
  --hp-paper-2: #EFEAE0;        /* 嵌套层 */
  --hp-card: #FFFFFF;           /* 卡片纯白 */
  --hp-card-tint: #FBF8F2;      /* 微染色卡 */

  /* ink */
  --hp-ink: #0F1E2D;            /* 标题深墨 */
  --hp-ink-2: #1F2A3D;          /* 正文 */
  --hp-ink-3: #5B6371;          /* 次要文字 */
  --hp-ink-4: #8A8F99;          /* 弱化 */

  /* rules / lines */
  --hp-rule: #D7D2C8;           /* 主细线 */
  --hp-rule-soft: #E5DFD2;      /* 软线 */
  --hp-rule-strong: #0F1E2D;    /* 重线 */

  /* brand */
  --hp-cyan: #1E5AFF;           /* PCB 主蓝 */
  --hp-cyan-deep: #1541CC;      /* 深态 */
  --hp-cyan-soft: #E6EDFF;      /* 主蓝软填 */

  /* accent */
  --hp-amber: #D97706;          /* 高亮琥珀 */
  --hp-amber-soft: #FEF3C7;     /* 琥珀软底 */
  --hp-amber-deep: #92400E;     /* 深琥珀 */

  /* signals */
  --hp-green: #15803D;          /* 量产/已验证 */
  --hp-red: #B91C1C;            /* 风险/停产 */
  --hp-red-soft: #FEE2E2;

  /* type */
  --hp-display: "Inter Tight", "PingFang SC", "Microsoft YaHei", sans-serif;
  --hp-body: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --hp-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, "Microsoft YaHei", monospace;

  /* rhythm */
  --hp-r-1: 4px;
  --hp-r-2: 8px;
  --hp-r-3: 12px;
  --hp-r-4: 16px;
  --hp-r-5: 24px;
  --hp-r-6: 32px;
  --hp-r-7: 48px;
  --hp-r-8: 64px;

  /* radii */
  --hp-rad-1: 4px;
  --hp-rad-2: 6px;
  --hp-rad-3: 10px;

  /* shadow */
  --hp-shadow-1: 0 1px 0 rgba(15, 30, 45, 0.04);
  --hp-shadow-2: 0 4px 16px -4px rgba(15, 30, 45, 0.08), 0 1px 2px rgba(15, 30, 45, 0.04);
  --hp-shadow-3: 0 12px 32px -8px rgba(15, 30, 45, 0.12), 0 2px 6px rgba(15, 30, 45, 0.06);
}

/* dark mode override */
body.night {
  --hp-paper: #0E1726;
  --hp-paper-2: #162033;
  --hp-card: #1A2438;
  --hp-card-tint: #182234;
  --hp-ink: #F0E9D8;
  --hp-ink-2: #D7CFBC;
  --hp-ink-3: #9A9384;
  --hp-ink-4: #5E5749;
  --hp-rule: #2C3A55;
  --hp-rule-soft: #232F45;
  --hp-cyan: #5B8AFF;
  --hp-cyan-deep: #3F6FE0;
  --hp-cyan-soft: rgba(91, 138, 255, 0.14);
  --hp-amber: #E89B45;
  --hp-amber-deep: #B86A1F;
  --hp-amber-soft: rgba(232, 155, 69, 0.18);
  --hp-green: #4ADE80;
  --hp-red: #F87171;
  --hp-red-soft: rgba(248, 113, 113, 0.18);
  --hp-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2);
  --hp-shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --hp-shadow-3: 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* dark mode: logo svg 切换 */
body.night .logo-light { display: none !important; }
body.night .logo-dark {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* dark mode: nav / 分类菜单 / 顶部右侧按钮文字 */
body.night a.logo .logo-text,
body.night .nav-pills li a,
body.night .top-bar-right a,
body.night .top-bar-right span,
body.night .at-night,
body.night .search-icon {
  color: var(--hp-ink) !important;
}
body.night .nav-pills li.active a,
body.night .nav-pills li a:hover {
  color: var(--hp-cyan) !important;
}

/* dark mode: top-bar 整体半透明深色 */
body.night .top-header .top-bar {
  background-color: rgba(20, 28, 44, 0.92) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hp-rule) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}
body.night .top-header.scrolled .top-bar {
  background-color: rgba(14, 23, 38, 0.96) !important;
}

/* fix: night.css 的 body.night aside.mobile_aside 灰底(rgba(78,78,78,.98))
   是给移动端侧滑抽屉用的；但 ≥1000px 桌面端该 aside 是导航的静态包裹容器
   (style.css: .top-nav-left .mobile_aside{display:block;width:100%})，
   灰底整条压在深藏青顶栏上，导致导航区域颜色与顶栏不一致。
   仅桌面端夜间模式置透明，移动端抽屉灰底保持不变。 */
@media screen and (min-width: 1000px) {
  body.night .top-nav-left .mobile_aside {
    background-color: transparent;
    background-image: none;
  }
}

/* dark mode: 单 hero (single-bar) 深色化 */
body.night .single-bar,
body.night .term-bar.term-theme {
  background: linear-gradient(135deg, #0A1428 0%, #1E3A6F 100%) !important;
}
body.night .single-bar::before,
body.night .term-bar.term-theme::before {
  background: none !important;
}
body.night .single-bar .container,
body.night .single-bar .breadcrumb {
  color: var(--hp-ink-2) !important;
}
body.night .single-bar .single-title h1,
body.night .single-bar .single-title h2 {
  color: #fff !important;
  text-shadow: none !important;
}
body.night .single-bar .single-title-meta,
body.night .single-bar .single-title-meta a,
body.night .single-bar .single-title-meta i {
  color: var(--hp-ink-3) !important;
}

/* dark mode: 通用硬编码颜色补丁 */
body.night,
body.night div,
body.night p,
body.night span,
body.night li {
  /* 不暴力覆盖，仅给 var token 覆盖不到的硬编码兜底 */
}
body.night .article-update-tips,
body.night .article-update-tips strong {
  background: rgba(91, 138, 255, 0.10) !important;
  border-left-color: var(--hp-cyan) !important;
  color: var(--hp-ink-2) !important;
}

/* dark mode: page-header / 置顶 / 标签 / 面包屑 fallback */
body.night .page-header,
body.night .place,
body.night .single-place.place {
  color: var(--hp-ink-2) !important;
}
body.night .page-header h1,
body.night .page-header h2 {
  color: var(--hp-ink) !important;
  text-shadow: none !important;
}
body.night .term-bar.term-theme::after {
  background: var(--hp-cyan-soft) !important;
  color: var(--hp-cyan) !important;
}

/* dark mode: 文章内 H2/H3 蓝/琥珀条颜色保持但加深底色 */
body.night .single-entry h2,
body.night .single-entry h3 {
  color: var(--hp-ink) !important;
}
body.night .single-entry h2::before {
  background: var(--hp-cyan) !important;
}
body.night .single-entry h3::before {
  background: var(--hp-amber) !important;
}

/* ---------- 1. Global Body ---------- */
body.home-index,
body.home-category,
body.home-search,
body.home-tag,
body.home-author,
body.home-article {
  background-color: var(--hp-paper);
  background-image:
    linear-gradient(var(--hp-rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--hp-rule-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  background-attachment: fixed;
  font-family: var(--hp-body);
  color: var(--hp-ink-2);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* pull the page just off the grid so the paper feel is visible */
body.home-index::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(30, 90, 255, 0.06), transparent 60%),
              radial-gradient(800px 500px at 90% 10%, rgba(217, 119, 6, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.main-content {
  position: relative;
  z-index: 1;
}

/* ---------- 2. Top Header ---------- */
.top-header .top-bar {
  background-color: rgba(255, 255, 255, 0.86);
  background-image: none;
  border-bottom: 1px solid var(--hp-rule);
  box-shadow: var(--hp-shadow-1);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

body.night .top-header .top-bar {
  background-color: rgba(20, 28, 44, 0.78);
  border-bottom-color: var(--hp-rule);
}

.secnav {
  height: 60px !important;
}

a.logo .logo-text {
  font-family: var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em;
  color: var(--hp-ink) !important;
}

a.logo::after {
  background: var(--hp-rule) !important;
}

.nav-pills li a {
  font-family: var(--hp-display) !important;
  font-weight: 500;
  font-size: 14px;
  color: var(--hp-ink-2) !important;
  letter-spacing: 0.005em;
  line-height: 60px !important;
}

.nav-pills li a:hover,
.nav-pills li.active a {
  color: var(--hp-ink) !important;
}

.nav-pills li:before {
  background-color: var(--hp-cyan) !important;
  height: 2px !important;
}

/* search */
input.search-input {
  border-radius: var(--hp-rad-1);
  background: var(--hp-paper-2);
  border: 1px solid var(--hp-rule);
  font-family: var(--hp-body);
  color: var(--hp-ink);
}

input.search-input:focus {
  background: var(--hp-card);
  border-color: var(--hp-cyan);
  box-shadow: 0 0 0 3px var(--hp-cyan-soft);
}

button.showhide-search {
  background: var(--hp-ink) !important;
  color: var(--hp-paper) !important;
  border-radius: var(--hp-rad-1) !important;
  font-family: var(--hp-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* user / login pill */
.text-user-r a.t-btn {
  font-family: var(--hp-display);
  font-weight: 500;
  font-size: 12px;
  border-radius: var(--hp-rad-1);
  border-color: var(--hp-rule);
  color: var(--hp-ink-2);
}

.text-user-r a.t-btn:hover {
  border-color: var(--hp-ink);
  color: var(--hp-ink);
}

.text-user-r a.t-btn.l-btn-ht {
  background: var(--hp-ink);
  color: var(--hp-paper);
  border-color: var(--hp-ink);
}

/* ---------- 3. Hero (above the fold) ---------- */
.hp-hero {
  position: relative;
  margin: 28px 0 24px;
  padding: 36px 36px 32px;
  background:
    linear-gradient(135deg, var(--hp-card) 0%, var(--hp-card-tint) 100%);
  border: 1px solid var(--hp-rule);
  border-radius: var(--hp-rad-3);
  box-shadow: var(--hp-shadow-2);
  overflow: hidden;
}

.hp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--hp-rule-soft) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(to bottom, var(--hp-rule-soft) 1px, transparent 1px) 0 0/24px 24px;
  opacity: 0.4;
  pointer-events: none;
}

.hp-hero::after {
  content: "DATASHEET  /  REV 2.6  /  PAGE 01";
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--hp-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--hp-ink-4);
  text-transform: uppercase;
}

.hp-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: end;
}

.hp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hp-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-amber-deep);
  margin-bottom: 14px;
}

.hp-hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hp-amber);
  box-shadow: 0 0 0 4px var(--hp-amber-soft);
}

body.night .hp-hero-eyebrow {
  color: var(--hp-amber);
}

.hp-hero-title {
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hp-ink);
  margin: 0 0 14px;
}

.hp-hero-title em {
  font-style: normal;
  color: var(--hp-cyan);
  border-bottom: 2px solid var(--hp-amber);
  padding-bottom: 1px;
}

.hp-hero-sub {
  font-family: var(--hp-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hp-ink-3);
  margin: 0;
  max-width: 56ch;
}

.hp-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hp-rule);
  border-left: 1px solid var(--hp-rule);
}

.hp-hero-stat {
  padding: 16px 14px 14px;
  border-right: 1px solid var(--hp-rule);
  border-bottom: 1px solid var(--hp-rule);
}

.hp-hero-stat-num {
  display: block;
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hp-ink);
  font-variant-numeric: tabular-nums;
}

.hp-hero-stat-num small {
  font-size: 13px;
  font-weight: 500;
  color: var(--hp-ink-4);
  margin-left: 2px;
}

.hp-hero-stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--hp-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-ink-4);
}

/* ---------- 4. Featured (精选导读) — Spec Sheet Cards ---------- */
.guide-box {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2);
  padding: 20px 20px 8px !important;
  position: relative;
  overflow: hidden;
}

.guide-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--hp-ink) 0%, var(--hp-cyan) 35%, var(--hp-amber) 70%, var(--hp-ink) 100%);
}

.guide-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px dashed var(--hp-rule);
}

.guide-title h3 {
  font-family: var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--hp-ink) !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
}

.guide-title h3::before {
  content: "01";
  font-family: var(--hp-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--hp-amber);
  background: var(--hp-amber-soft);
  padding: 3px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.guide-title::after {
  content: "CURATED  /  09.2026";
  font-family: var(--hp-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--hp-ink-4);
  text-transform: uppercase;
}

.guide-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.guide-inner {
  position: relative;
  padding: 14px 16px 16px !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2);
  background: var(--hp-card-tint);
  transition: all 0.32s cubic-bezier(0.2, 0.6, 0.2, 1);
  overflow: hidden;
  min-width: 0;
  width: 100% !important;
  float: none !important;
}

.guide-inner:nth-child(3n),
.guide-inner:nth-child(even) {
  border-right-color: var(--hp-rule) !important;
}

.guide-inner-info {
  height: auto !important;
  float: none !important;
  width: 100% !important;
  min-width: 0;
  overflow: visible;
}

.guide-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--hp-cyan);
  opacity: 0.06;
  transition: width 0.4s ease;
  pointer-events: none;
}

.guide-inner:hover {
  border-color: var(--hp-cyan);
  transform: translateY(-2px);
  box-shadow: var(--hp-shadow-3);
}

.guide-inner:hover::before {
  width: 100%;
}

.guide-inner .g-i-top {
  display: block !important;
  margin-bottom: 10px !important;
  position: relative;
  min-height: 22px;
}

.guide-inner .g-i-cate {
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100% - 80px) !important;
  vertical-align: middle;
  text-indent: 0 !important;
  text-align: left !important;
  height: 22px;
  line-height: 22px;
  margin-right: 4px;
}

.guide-inner .g-i-cate a {
  display: inline-block !important;
  width: auto !important;
  font-family: var(--hp-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hp-cyan-deep) !important;
  background: var(--hp-cyan-soft) !important;
  padding: 3px 7px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
}

.guide-inner .g-i-time {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  color: var(--hp-ink-4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  white-space: nowrap;
}

body.night .guide-inner .g-i-cate a {
  color: #7BA0FF;
}

.guide-inner .g-i-cate a::before {
  content: "#";
  opacity: 0.6;
}

.guide-inner .g-i-time {
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  color: var(--hp-ink-4) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

.guide-inner .g-i-time i.icon {
  font-size: 11px !important;
  opacity: 0.7;
}

.guide-inner h5 {
  margin: 6px 0 8px !important;
  line-height: 1.45 !important;
  height: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}

.guide-inner-info {
  height: auto !important;
  float: none !important;
}

.guide-inner h5 a {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--hp-ink) !important;
  letter-spacing: 0;
  word-break: break-word;
  display: block;
  white-space: normal;
  overflow: visible;
  height: auto;
}

.guide-inner:hover h5 a {
  color: var(--hp-cyan-deep);
}

body.night .guide-inner:hover h5 a {
  color: var(--hp-cyan);
}

.guide-inner p {
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  color: var(--hp-ink-3) !important;
  margin: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  -webkit-line-clamp: 2 !important;
}

/* number tag on each card */
.top-num {
  counter-increment: hp-num;
}

.top-num .guide-inner-info::after {
  content: counter(hp-num, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--hp-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--hp-ink-4);
  font-weight: 600;
}

.guide-list {
  counter-reset: hp-num;
}

/* ---------- 5. Main Article Cards ---------- */
.home-main,
.piclist-main {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
}

.post-list {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-left: 3px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2) !important;
  padding: 20px 22px !important;
  margin-bottom: 14px !important;
  position: relative;
  transition: all 0.32s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.post-list:hover {
  border-color: var(--hp-cyan) !important;
  border-left-color: var(--hp-cyan) !important;
  box-shadow: var(--hp-shadow-3);
  transform: translateY(-1px);
}

.post-list.featured {
  border-left: 3px solid var(--hp-amber) !important;
}

.post-list.featured:hover {
  border-left-color: var(--hp-amber) !important;
}

/* pinned badge */
span.badge.arc_v5 {
  background: var(--hp-amber-soft) !important;
  color: var(--hp-amber-deep) !important;
  font-family: var(--hp-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  margin-right: 8px !important;
  top: -2px !important;
}

body.night span.badge.arc_v5 {
  color: var(--hp-amber);
}

span.badge.arc_v1 { background: var(--hp-cyan-soft); color: var(--hp-cyan-deep); }
span.badge.arc_v2 { background: var(--hp-cyan-soft); color: var(--hp-cyan-deep); }
span.badge.arc_v3 { background: var(--hp-cyan-soft); color: var(--hp-cyan-deep); }
span.badge.arc_v4 { background: var(--hp-cyan-soft); color: var(--hp-cyan-deep); }

/* blockimg card */
.post-list.blockimg .entry-container,
.post-list.featured .featured-container .entry-container {
  padding-left: 230px !important;
  padding-right: 4px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  min-height: 158px !important;
  position: relative !important;
}

/* Even children — keep image on left, override theme default */
.post-list.blockimg:nth-child(even) .entry-container {
  padding-left: 230px !important;
  padding-right: 4px !important;
}

.entry-container .l-line {
  background: var(--hp-amber) !important;
  height: 28px !important;
  width: 4px !important;
  left: -19px !important;
}

.post-list.blockimg .block-image.feaimg,
.post-list.featured .block-image.feaimg {
  border-radius: var(--hp-rad-2);
  overflow: hidden;
  border: 1px solid var(--hp-rule);
  background: var(--hp-paper-2);
  position: absolute !important;
  width: 210px !important;
  height: 158px !important;
  top: 14px !important;
  left: 0 !important;
  transform: none !important;
}

/* For even posts (theme puts image on right by default), force back to left */
.post-list.blockimg:nth-child(even) .block-image.feaimg {
  left: 0 !important;
  right: auto !important;
  margin-right: 20px !important;
  margin-left: 0 !important;
}

/* Force header/summary/meta to flow in the right column (after padding-left:230px) */
.post-list.blockimg .entry-container > header.entry-header,
.post-list.featured .entry-container > header.entry-header {
  margin-left: 0 !important;
  padding-left: 0 !important;
  clear: none !important;
}

.post-list.blockimg .entry-container > .entry-summary,
.post-list.featured .entry-container > .entry-summary {
  margin-left: 0 !important;
  padding-left: 0 !important;
  clear: none !important;
}

.post-list.blockimg .entry-container > .entry-meta-items,
.post-list.featured .entry-container > .entry-meta-items {
  margin-left: 0 !important;
  padding-left: 0 !important;
  clear: none !important;
}

.block-image.feaimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(15, 30, 45, 0.04) 100%);
  pointer-events: none;
  z-index: 1;
}

.block-image.feaimg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

span.item-img-cate {
  background: var(--hp-ink) !important;
  color: var(--hp-paper) !important;
  font-family: var(--hp-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  border-radius: 3px !important;
  padding: 3px 8px !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  transform: none !important;
  -webkit-transform: none !important;
}

/* 文章卡图位：固定 210×158 在左 + 文字右 */
.post-list.blockimg .block-image.feaimg {
  position: absolute !important;
  top: 14px !important;
  left: 0 !important;
  width: 210px !important;
  height: 158px !important;
  z-index: 1;
  overflow: hidden !important;
  border-radius: var(--hp-rad-2) !important;
  border: 1px solid var(--hp-rule-soft) !important;
}
.post-list.blockimg .block-image.feaimg a.block-fea {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.post-list.blockimg .block-image.feaimg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease;
}
.post-list.blockimg:hover .block-image.feaimg img {
  transform: scale(1.04);
}

/* 文章卡正文区：左 padding 让位图片 */
.post-list.blockimg .entry-container,
.post-list.featured .featured-container .entry-container {
  padding-left: 230px !important;
  padding-right: 4px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  min-height: 186px !important;
  position: relative !important;
}
.post-list.blockimg:nth-child(even) .entry-container {
  padding-left: 230px !important;
  padding-right: 4px !important;
}

/* 文章卡标题：display 字体 / 加粗 / 紧凑行高 */
.entry-container header.entry-header h2,
.entry-container header.entry-header h3,
.post-list.featured header.entry-header h2 {
  font-family: var(--hp-display) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em;
  color: var(--hp-ink) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  text-shadow: none !important;
}
.entry-container header.entry-header h2 a,
.entry-container header.entry-header h3 a {
  color: var(--hp-ink) !important;
  text-decoration: none !important;
}
.entry-container:hover header.entry-header h2 a,
.entry-container:hover header.entry-header h3 a {
  color: var(--hp-cyan) !important;
}

/* 文章卡摘要：body 字体 / 2 行截断 */
.entry-container > .entry-summary,
.entry-container .entry-summary.ss {
  font-family: var(--hp-body) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--hp-ink-3) !important;
  margin: 4px 0 10px !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.entry-container > .entry-summary p,
.entry-container .entry-summary.ss p {
  margin: 0 !important;
  padding: 0 !important;
}
.entry-container > .entry-summary a,
.entry-container .entry-summary.ss a {
  color: var(--hp-ink-3) !important;
  text-decoration: none !important;
}

/* 文章卡元数据：mono 日期 + 紧凑行 */
.entry-container > .entry-meta-items,
.entry-container .entry-meta-items {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 8px !important;
  margin-top: 4px !important;
  border-top: 1px dashed var(--hp-rule-soft) !important;
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  color: var(--hp-ink-4) !important;
}
.entry-container > .entry-meta-items .entry-meta,
.entry-container .entry-meta-items .entry-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.entry-container > .entry-meta-items time,
.entry-container > .entry-meta-items .meta-viewnums,
.entry-container > .entry-meta-items .meta-author-url,
.entry-container > .entry-meta-items .meta-cate-url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--hp-ink-4) !important;
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  text-decoration: none !important;
}
.entry-container > .entry-meta-items i.icon {
  color: var(--hp-ink-4);
  font-size: 12px;
}
.entry-container > .entry-meta-items a:hover {
  color: var(--hp-cyan) !important;
}

/* 置顶文章标记：保留原模板的 arc_v5 span，强制琥珀配色 */
span.badge.arc_v5 {
  background: var(--hp-amber-soft) !important;
  color: var(--hp-amber-deep) !important;
  font-family: var(--hp-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  margin-right: 8px !important;
  top: -2px !important;
  position: relative !important;
}

/* 文章卡左侧蓝/琥珀边条 */
.post-list.featured,
.post-list.blockimg {
  position: relative !important;
}
.post-list.featured::before,
.post-list.blockimg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--hp-rule);
  border-radius: 0 2px 2px 0;
  transition: background 0.2s ease;
}
.post-list.featured::before {
  background: var(--hp-amber);
}
.post-list:hover::before {
  background: var(--hp-cyan) !important;
}

/* 隐藏原主题的 l-line（已经被 ::before 替代） */
.entry-container .l-line {
  display: none !important;
}

/* mobile：图片缩小 + 整卡结构紧凑 */
@media (max-width: 768px) {
  .post-list.blockimg .block-image.feaimg {
    width: 140px !important;
    height: 110px !important;
  }
  .post-list.blockimg .entry-container,
  .post-list.featured .featured-container .entry-container {
    padding-left: 156px !important;
    min-height: 138px !important;
  }
  .entry-container header.entry-header h2 {
    font-size: 15.5px !important;
    line-height: 1.4 !important;
  }
  .entry-container > .entry-summary,
  .entry-container .entry-summary.ss {
    font-size: 12.5px !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* title */
header.entry-header h2,
header.entry-header h3,
.entry-container header.entry-header h2 {
  font-family: var(--hp-display) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  color: var(--hp-ink) !important;
  margin: 0 0 8px !important;
}

header.entry-header h2 a,
header.entry-header h3 a {
  color: var(--hp-ink) !important;
  transition: color 0.2s ease;
}

.entry-container:hover header.entry-header h2 a,
.entry-container:hover header.entry-header h3 a {
  color: var(--hp-cyan-deep) !important;
}

body.night .entry-container:hover header.entry-header h2 a,
body.night .entry-container:hover header.entry-header h3 a {
  color: var(--hp-cyan) !important;
}

/* summary */
.entry-summary p {
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: var(--hp-ink-3) !important;
  -webkit-line-clamp: 2 !important;
  margin: 0 0 12px !important;
}

.entry-summary p a {
  color: inherit !important;
}

/* meta */
.entry-meta-items {
  border-top: 1px dashed var(--hp-rule);
  padding-top: 10px !important;
  margin-top: 12px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.entry-meta {
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  color: var(--hp-ink-4) !important;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.entry-meta time,
.entry-meta span.meta-viewnums,
.entry-meta a.meta-viewnums {
  color: var(--hp-ink-4) !important;
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.entry-meta time:hover,
.entry-meta span.meta-viewnums:hover,
.entry-meta a.meta-viewnums:hover {
  color: var(--hp-ink) !important;
}

.entry-meta i.icon {
  font-size: 12px !important;
  color: var(--hp-cyan) !important;
  opacity: 0.85;
  margin: 0 !important;
}

.entry-meta-author {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
}

.entry-meta-author a {
  color: var(--hp-ink-3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.entry-meta-author a i.icon {
  color: var(--hp-ink-4) !important;
}

/* chip model badge (inserted via JS, see header script) */
.hp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  padding: 3px 8px 3px 8px;
  font-family: var(--hp-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hp-ink);
  background: var(--hp-paper-2);
  border: 1px solid var(--hp-rule);
  border-radius: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.hp-chip::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--hp-cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--hp-cyan-soft);
}

body.night .hp-chip {
  background: rgba(30, 90, 255, 0.08);
  border-color: var(--hp-rule);
}

/* manypic featured card */
.featured-container.manypic-box {
  padding: 18px 20px !important;
}

.rowimg .col-4 {
  padding: 0 4px !important;
}

.rowimg .feaimg {
  border-radius: var(--hp-rad-2);
  overflow: hidden;
  border: 1px solid var(--hp-rule);
  background: var(--hp-paper-2);
}

.fea-meta {
  margin-bottom: 0 !important;
}

.feaimg-content {
  border-radius: 0 !important;
}

/* featured title */
.featured header.entry-header h2 {
  font-size: 19px !important;
}

/* ---------- 6. Sidebar ---------- */
.widget_avatar {
  background:
    linear-gradient(135deg, var(--hp-card) 0%, var(--hp-card-tint) 100%) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2);
  overflow: hidden;
  margin-bottom: 18px;
  padding: 0 !important;
  position: relative;
}

.widget_avatar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--hp-cyan), var(--hp-amber));
  z-index: 1;
}

.widget_user {
  padding: 32px 18px 20px !important;
  background-image: none !important;
  text-align: center;
  position: relative;
  height: auto !important;
  min-height: 220px;
  margin-bottom: 0 !important;
  display: block !important;
  z-index: 1;
}

.user-bgif {
  display: block !important;
  padding-top: 0 !important;
}

.user-bgif > img[height="80"],
.widget_user img {
  border-radius: 50% !important;
  border: 3px solid var(--hp-card) !important;
  box-shadow: 0 0 0 1px var(--hp-rule), var(--hp-shadow-2);
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  background: transparent !important;
  margin: 0 auto !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

.widget_avatar .name {
  margin: 14px 0 0 !important;
  padding: 0 4px !important;
  text-align: center;
}

.widget_avatar .name h3 {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hp-ink) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

.widget_avatar .name h3 a {
  color: var(--hp-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.widget_avatar .name p {
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--hp-ink-3) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 40px;
  overflow: hidden;
  -webkit-line-clamp: 2 !important;
  text-overflow: ellipsis;
}

.widget_avatar .autlv {
  background: var(--hp-amber) !important;
  color: #fff !important;
  font-family: var(--hp-mono) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  margin-left: 4px !important;
  top: -6px !important;
}

.webinfo {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  border-top: 1px solid var(--hp-rule) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--hp-paper-2);
  align-items: stretch !important;
  position: relative;
  z-index: 2;
}

.webinfo .item {
  padding: 14px 0 !important;
  text-align: center !important;
  border-right: 1px solid var(--hp-rule) !important;
  flex: none !important;
}

.webinfo .item:last-child {
  border-right: 0 !important;
}

.webinfo .item .num {
  display: block;
  font-family: var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px !important;
}

.webinfo .item span:last-child {
  font-family: var(--hp-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-4) !important;
}

/* generic widget panel */
.side .widget,
.side .sidebar-widget,
.side .widget-box,
.side .box-shadow,
.side .link-box {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2);
  margin-bottom: 18px;
  padding: 18px 18px;
}

.side-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px dashed var(--hp-rule) !important;
}

.side-title-wrap h3.widget-title,
.widget-title,
.box-shadow h3,
.links-title h3 {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  padding-left: 12px !important;
  position: relative;
  text-shadow: none !important;
}

.side-title-wrap h3.widget-title::before,
.widget-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: var(--hp-cyan);
  border-radius: 1px;
}

/* hide the original mac-style colored dots */
.widget h3.widget-title:after,
.side-title-wrap h3.widget-title:after,
.widget-box h3:after,
.box-shadow h3:after {
  display: none !important;
  content: none !important;
}

.side-title-wrap .suburl a,
.suburl a {
  font-family: var(--hp-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-4) !important;
}

.side-title-wrap .suburl a:hover,
.suburl a:hover {
  color: var(--hp-cyan) !important;
}

/* ---------- 6b. TheiaStickySidebar override ---------- */
/* 修复：theiaStickySidebar 在 init 时把 .side.min-height 设成错误的 sticky
   容器计算值，导致 widget ul 内容被截断。这里强制关掉 sticky 行为，
   让侧栏走自然文档流 —— 桌面单栏布局下没影响，移动端已用 @media 屏蔽。 */
.main-content .side,
.side.fr,
.side {
  min-height: 0 !important;
  height: auto !important;
}
.theiaStickySidebar {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* 最近更新 / 相关推荐 / spiderpool —— datasheet 风格行卡 */
.side .widget ul.aisuper_recent,
.side .widget ul.aisuper_related,
.side .widget ul.spiderpool {
  overflow: visible !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.side .widget ul.aisuper_recent li,
.side .widget ul.aisuper_related li,
.side .widget ul.spiderpool li {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px dashed var(--hp-rule-soft) !important;
  white-space: normal !important;
  height: auto !important;
}
.side .widget ul.aisuper_recent li:last-child,
.side .widget ul.aisuper_related li:last-child,
.side .widget ul.spiderpool li:last-child {
  border-bottom: 0 !important;
}
.side .widget ul.aisuper_recent li a,
.side .widget ul.aisuper_related li a,
.side .widget ul.spiderpool li a {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  background: transparent !important;
  width: 100%;
  text-decoration: none !important;
}
.side .widget ul.aisuper_recent li a:hover .asm-tt,
.side .widget ul.aisuper_related li a:hover .asm-tt,
.side .widget ul.spiderpool li a:hover .sp-sb-tt {
  color: var(--hp-cyan) !important;
}
.asm-thumb,
.sp-thumb {
  flex: 0 0 auto !important;
  width: 86px !important;
  height: 64px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  margin: 0 !important;
  background: var(--hp-paper-2) !important;
  border: 1px solid var(--hp-rule-soft);
  display: block !important;
}
.asm-txt,
.sp-sb-txt {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  height: 64px !important;
}
.asm-tt,
.sp-sb-tt {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--hp-ink-2) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.asm-meta,
.sp-sb-meta {
  font-family: var(--hp-mono) !important;
  font-size: 10.5px !important;
  color: var(--hp-ink-4) !important;
  letter-spacing: 0.08em !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* ---------- 7. Picture reads (分类图文) ---------- */
.pic-reads {
  margin-top: 24px !important;
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2);
  padding: 18px !important;
}

/* preserve theme's side-by-side layout: 25% title / 75% list */
.pic-reads-title {
  width: 25% !important;
  float: left !important;
  position: relative !important;
  z-index: 1 !important;
  border-radius: var(--hp-rad-2) !important;
  overflow: hidden !important;
  border: 1px solid var(--hp-rule) !important;
}

.pic-reads-title a {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  height: 360px !important;
  min-height: 360px !important;
  z-index: 2 !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  padding: 22px !important;
  background-color: var(--hp-card-tint) !important;
  text-decoration: none !important;
}

.pic-reads-title a::before {
  position: absolute !important;
  z-index: 3 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  content: "" !important;
  display: block !important;
  background: linear-gradient(180deg, transparent 30%, rgba(15, 30, 45, 0.78) 100%) !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.pic-reads-title a:hover::before {
  background: linear-gradient(180deg, transparent 10%, rgba(15, 30, 45, 0.85) 100%) !important;
}

.pic-reads-title h3 {
  display: block !important;
  height: auto !important;
  line-height: 1.3 !important;
  font-family: var(--hp-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  width: auto !important;
  text-align: left !important;
  border-radius: 0 !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 4 !important;
  margin: 0 0 6px !important;
}

.pic-reads-title p {
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--hp-body) !important;
  font-size: 12.5px !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  z-index: 5 !important;
  align-self: auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 6 !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  position: relative !important;
}

.pic-reads-list {
  width: 73% !important;
  float: right !important;
}

.pic-reads-list ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 0 !important;
}

.pic-reads-list li {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2) !important;
  overflow: hidden;
  transition: all 0.3s ease;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.pic-reads-list li:hover {
  border-color: var(--hp-cyan) !important;
  transform: translateY(-2px);
  box-shadow: var(--hp-shadow-3);
}

.pic-list-img {
  position: relative;
}

.pic-img-cover img {
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.5s ease;
}

.pic-reads-list li:hover .pic-img-cover img {
  transform: scale(1.06);
}

.pic-list-img h3 {
  padding: 10px 12px 6px !important;
  margin: 0 !important;
}

.pic-list-img h3 a {
  font-family: var(--hp-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--hp-ink) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pic-img-lnums {
  padding: 0 12px 10px !important;
  font-family: var(--hp-mono) !important;
  font-size: 10.5px !important;
  color: var(--hp-ink-4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

.pic-img-lnums h4 {
  font-size: 10.5px !important;
  color: var(--hp-ink-3) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pic-img-lnums h4::before {
  content: "@";
  color: var(--hp-cyan);
  font-weight: 700;
}

.pic-img-lnums .spot {
  width: 2px;
  height: 2px;
  background: var(--hp-ink-4);
  border-radius: 50%;
}

/* clearfix for pic-reads */
.pic-reads::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 768px) {
  .pic-reads-title,
  .pic-reads-list {
    width: 100% !important;
    float: none !important;
  }
  .pic-reads-list {
    margin-top: 14px;
  }
}

/* ---------- 8. Category text list ---------- */
.line-big {
  margin-top: 24px !important;
}

.line-box {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2);
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
}

.cat-list li {
  display: flex !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed var(--hp-rule-soft) !important;
  transition: padding-left 0.25s ease;
}

.cat-list li:last-child {
  border-bottom: 0 !important;
}

.cat-list li:hover {
  padding-left: 6px !important;
}

.cat-list .list-date {
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: var(--hp-amber-deep) !important;
  background: var(--hp-amber-soft) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  margin-right: 10px !important;
  min-width: 38px;
  text-align: center;
}

body.night .cat-list .list-date {
  color: var(--hp-amber);
}

.cat-list a {
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  color: var(--hp-ink-2) !important;
  flex: 1;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
}

.cat-list a:hover {
  color: var(--hp-cyan-deep) !important;
}

.cat-list a i.icon {
  color: var(--hp-ink-4) !important;
  font-size: 12px !important;
  margin: 0 !important;
  transition: color 0.25s ease;
}

.cat-list li:hover a i.icon {
  color: var(--hp-amber) !important;
}

/* ---------- 9. Friendship links ---------- */
.link-box.box-shadow {
  margin-top: 24px !important;
}

#links-home {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#links-home li {
  background: var(--hp-paper-2) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-1) !important;
  padding: 6px 12px !important;
  font-family: var(--hp-mono) !important;
  font-size: 12px !important;
  transition: all 0.25s ease;
}

#links-home li:hover {
  background: var(--hp-card) !important;
  border-color: var(--hp-cyan) !important;
}

#links-home li a {
  color: var(--hp-ink-2) !important;
}

/* ---------- 10. Footer ---------- */
footer.footer.bg-dark {
  background:
    linear-gradient(180deg, transparent 0%, var(--hp-paper-2) 100%) !important;
  color: var(--hp-ink-2) !important;
  border-top: 1px solid var(--hp-rule);
  margin-top: 56px !important;
  padding: 32px 0 24px !important;
}

body.night footer.footer.bg-dark {
  background: linear-gradient(180deg, transparent 0%, var(--hp-paper-2) 100%) !important;
}

.footer-fill,
.footer-column {
  background: transparent !important;
}

.footer-menu {
  font-family: var(--hp-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--hp-ink-3) !important;
}

.footer-menu a {
  color: var(--hp-ink-2) !important;
  padding: 0 8px;
}

.footer-menu a:hover {
  color: var(--hp-cyan) !important;
}

.footer-copyright,
.footer-copyright.text-xs {
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  color: var(--hp-ink-4) !important;
  margin-top: 8px !important;
  letter-spacing: 0.04em;
}

/* 原主题 .f-last-line p 为深色块（#333 底+#dee2e6 浅字），在浅色纸感页脚上是突兀黑框；
   夜间则深底配暗字对比不足。改为无底色的弱化文本，两种模式统一走变量色。 */
.f-last-line p {
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--hp-ink-3) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: right;
}

.footer-links span {
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  color: var(--hp-ink-4) !important;
}

/* 原主题分隔线硬编码 #dee2e6，夜间深色页脚上是刺眼亮线，改用主题规则色 */
.footer-links {
  border-top-color: var(--hp-rule) !important;
}

/* 原 .footer.bg-dark a 是 #f5f5f5 近白色（深色页脚时代的遗留）：
   白天浅底上备案号/版权链接文字几乎不可见，统一改为变量弱化色+悬停主色 */
.footer-links a,
.footer-copyright a,
.footer-copyright.text-xs a {
  color: var(--hp-ink-3) !important;
}
.footer-links a:hover,
.footer-copyright a:hover,
.footer-copyright.text-xs a:hover {
  color: var(--hp-cyan) !important;
}

.footer-RunTime {
  font-family: var(--hp-mono) !important;
  font-size: 10.5px !important;
  color: var(--hp-ink-4) !important;
  background: var(--hp-paper-2) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-1) !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  gap: 12px;
  margin-bottom: 10px;
}

.footer-RunTime span {
  color: var(--hp-ink-3) !important;
}

/* ---------- 11. Back-to-top & floating buttons ---------- */
.backtop {
  right: 18px !important;
  bottom: 28px !important;
}

.backtop .bt-box {
  width: 40px !important;
  height: 40px !important;
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2) !important;
  box-shadow: var(--hp-shadow-2);
  transition: all 0.25s ease;
}

.backtop .bt-box:hover {
  background: var(--hp-ink) !important;
  border-color: var(--hp-ink) !important;
}

.backtop .bt-box i.icon,
.backtop .bt-box a i.icon {
  color: var(--hp-ink) !important;
  transition: color 0.25s ease;
}

.backtop .bt-box:hover i.icon,
.backtop .bt-box:hover a i.icon {
  color: var(--hp-paper) !important;
}

.backtop .qrcode .bg-qrcode {
  right: 56px !important;
  border-radius: var(--hp-rad-2) !important;
  box-shadow: var(--hp-shadow-3);
  border: 1px solid var(--hp-rule);
}

/* ---------- 12. Pagination ---------- */
/* fix: ul 被改成 display:flex 后成为 block-level 盒，宽度拉伸占满整行，
   把右浮动的 #loadmore（点击查看更多）挤到第二行。
   让 footer 成为 flex 行容器：ul 作为 flex item 自动按内容收缩，按钮同行垂直居中；
   flex-wrap 在极窄屏兜底，且 ≤768px 主题本就隐藏 #loadmore。 */
footer.pagination {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}
footer.pagination ul {
  flex: 0 0 auto !important;
  width: auto !important;
}
footer.pagination #loadmore {
  flex: 0 0 auto !important;
  float: none !important;
}

.pagination ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 24px 0 !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-mono);
}

.pagination ul li a,
.pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-1) !important;
  color: var(--hp-ink-2) !important;
  font-size: 12px !important;
  font-weight: 500;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-mono);
}

.pagination ul li a:hover {
  border-color: var(--hp-ink) !important;
  color: var(--hp-ink) !important;
}

.pagination ul li.active span,
.pagination ul li span.current {
  background: var(--hp-ink) !important;
  border-color: var(--hp-ink) !important;
  color: var(--hp-paper) !important;
}

/* ---------- 13. Search dropdown ---------- */
.search-box.open {
  background: var(--hp-card) !important;
  border-color: var(--hp-rule) !important;
  box-shadow: var(--hp-shadow-3) !important;
  border-radius: var(--hp-rad-2) !important;
}

/* ---------- 14. Marquee top progress ---------- */
#percentageCounter {
  background: linear-gradient(to right, var(--hp-cyan) 0%, var(--hp-amber) 50%, var(--hp-cyan) 100%) !important;
  height: 2px !important;
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 992px) {
  .hp-hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .guide-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pic-reads-list ul {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .entry-container {
    padding: 0 0 0 0 !important;
  }
  .entry-container > .block-image.feaimg {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 14px;
  }
  .entry-container > .block-image.feaimg + .entry-header {
    padding-left: 0 !important;
  }
}

@media (max-width: 640px) {
  .guide-list {
    grid-template-columns: 1fr !important;
  }
  .pic-reads-list ul {
    grid-template-columns: 1fr !important;
  }
  .hp-hero {
    padding: 24px 20px 22px;
  }
  .hp-hero-title {
    font-size: 24px;
  }
  .hp-hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .post-list {
    padding: 16px !important;
  }
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- 17. Print (engineers print datasheets) ---------- */
@media print {
  body.home-index,
  body.home-category {
    background: white !important;
    background-image: none !important;
  }
  .top-header, .backtop, .footer { display: none !important; }
  .post-list, .guide-inner { break-inside: avoid; box-shadow: none !important; border: 1px solid #333 !important; }
}

/* ==========================================================================
   SINGLE ARTICLE PAGE
   ========================================================================== */
body.home-article {
  background-color: var(--hp-paper) !important;
  background-image:
    linear-gradient(var(--hp-rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--hp-rule-soft) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  background-position: -1px -1px !important;
  background-attachment: fixed !important;
}

/* ---------- S1. Article Hero (existing single-bar) ---------- */
.single-bar.term-theme {
  background:
    linear-gradient(135deg, #0F1E2D 0%, #1A2842 60%, #1E5AFF 100%) !important;
  background-image:
    radial-gradient(circle at 20% 100%, rgba(30, 90, 255, 0.18), transparent 50%),
    radial-gradient(circle at 80% 0%, rgba(217, 119, 6, 0.10), transparent 50%),
    linear-gradient(135deg, #0F1E2D 0%, #1A2842 60%, #1E5AFF 100%) !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
  padding: 48px 0 36px !important;
}

.single-bar.term-theme::after {
  content: "DATASHEET  /  REV 2.6  /  ARTICLE";
  position: absolute;
  top: 18px;
  right: 24px;
  font-family: var(--hp-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

.single-bar-header h1 {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 3.4vw, 38px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: #FFFFFF !important;
  margin: 0 0 20px !important;
  max-width: 900px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.single-info-information {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
}

.single-info-information img.avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

.single-user-info .author {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-body) !important;
  margin-bottom: 6px !important;
}

.single-user-info .author a {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.single-user-info .author a:hover {
  color: var(--hp-amber) !important;
}

.single-user-info .author a i.icon {
  color: var(--hp-cyan) !important;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px;
  border-radius: 50%;
  font-size: 11px !important;
  margin-right: 2px !important;
}

.single-user-info .author a.sing-bj,
.single-user-info .author a.sing-sc {
  font-weight: 500;
  font-size: 12px !important;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85) !important;
}

.single-user-info .author a.sing-bj i.icon { color: rgba(255, 255, 255, 0.85) !important; background: transparent !important; padding: 0; }
.single-user-info .author a.sing-sc i.icon { color: rgba(255, 255, 255, 0.85) !important; background: transparent !important; padding: 0; }

.single-user-meta {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  font-family: var(--hp-mono) !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.04em;
}

.single-user-meta span,
.single-user-meta a {
  color: rgba(255, 255, 255, 0.7) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  font-family: var(--hp-mono) !important;
  font-size: 12px !important;
}

.single-user-meta i.icon {
  font-size: 12px !important;
  color: var(--hp-amber) !important;
  margin: 0 !important;
}

.single-user-meta .spot { display: none !important; }

/* ---------- S2. Article container ---------- */

/* ---- 文章页布局：让正文占更多宽度，缩小侧栏比例 ----
   原因：原 CSS .main=71.568% / .side=28.168% 在 1280-1920 viewport 下右侧留白过多。
   文章页是单篇长文，正文需要 84% 才能让标题/段落/代码块/图片自然展开；侧栏 16% 足够 widget 排版。
   另：把 main-content max-width 提到 1480 让 1920 viewport 不留过多空白。 */
body.home-article .main-content {
  max-width: 1480px !important;
}
body.home-article .main {
  -ms-flex: 0 0 84% !important;
  flex: 0 0 84% !important;
  width: 84% !important;
  max-width: 84% !important;
  padding-left: 15px !important;
  padding-right: 0 !important;
}
body.home-article .side {
  -ms-flex: 0 0 16% !important;
  flex: 0 0 16% !important;
  width: 16% !important;
  max-width: 16% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* tablet 折叠：viewport < 1100 时侧栏移到正文下方 */
@media (max-width: 1100px) {
  body.home-article .main,
  body.home-article .side {
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.single.box-show {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2) !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  overflow: hidden;
  width: 100% !important;
}

.single-post {
  padding: 28px 36px 32px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* fix: #font-change 是右浮动，其底部超出 .single-title 约 16px，浮动逃逸到正文区域；
   .single-entry 因 overflow:hidden 建立 BFC，按 CSS 规范必须为该浮动收缩 border box，
   右侧白白少掉 ~102px（实测正文 839px，应为 941px）。
   flow-root 让 header 自身成为 BFC，内部浮动被完全包裹，且不占用已有的 ::after 装饰线。 */
.single-title {
  display: flow-root;
}

/* breadcrumb */
.single-place.place {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px dashed var(--hp-rule) !important;
  font-family: var(--hp-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--hp-ink-3) !important;
}

.single-place.place i.icon {
  color: var(--hp-ink-4) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.single-place.place a {
  color: var(--hp-ink-3) !important;
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  transition: color 0.2s ease;
}

.single-place.place a:hover {
  color: var(--hp-cyan) !important;
}

.single-place.place a:last-of-type {
  color: var(--hp-ink) !important;
  font-weight: 600;
}

/* font size controls */
#font-change {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  margin-bottom: 14px !important;
  padding: 4px;
  background: var(--hp-paper-2) !important;
  border-radius: var(--hp-rad-1) !important;
  border: 1px solid var(--hp-rule) !important;
}

#font-change span a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 24px !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--hp-ink-3) !important;
}

#font-change span a:hover,
#font-change span a.active {
  background: var(--hp-ink) !important;
  color: var(--hp-paper) !important;
}

#font-change span a i.icon {
  font-size: 12px !important;
  margin: 0 !important;
  color: inherit !important;
}

/* single-title h1 (when singlebgoff == 1, shown inline) */
.single-title h1 {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  color: var(--hp-ink) !important;
  margin: 16px 0 14px !important;
}

.single-title-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 0 !important;
  margin-bottom: 18px !important;
  border-top: 1px dashed var(--hp-rule) !important;
  border-bottom: 1px dashed var(--hp-rule) !important;
  font-family: var(--hp-mono) !important;
  font-size: 12px !important;
  color: var(--hp-ink-4) !important;
}

.single-title-meta span,
.single-title-meta a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  color: var(--hp-ink-4) !important;
  font-family: var(--hp-mono) !important;
  font-size: 12px !important;
  margin-right: 18px !important;
}

.single-title-meta i.icon {
  color: var(--hp-cyan) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.single-title-meta .spot { display: none !important; }

/* update tip */
.article-update-tips {
  margin: 18px 0 !important;
  padding: 12px 16px !important;
  background: var(--hp-amber-soft) !important;
  border: 1px solid var(--hp-amber) !important;
  border-left-width: 3px !important;
  border-radius: var(--hp-rad-1) !important;
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  color: var(--hp-amber-deep) !important;
}

body.night .article-update-tips {
  color: var(--hp-amber);
}

.article-update-tips .red {
  color: var(--hp-red) !important;
  font-family: var(--hp-mono) !important;
  font-weight: 600 !important;
  background: var(--hp-red-soft);
  padding: 1px 6px;
  border-radius: 3px;
  margin: 0 2px;
}

/* ---------- S3. Article body typography ---------- */
.single-entry {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-body) !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  color: var(--hp-ink-2) !important;
  letter-spacing: 0.01em !important;
  word-wrap: break-word;
}

.single-entry p {
  margin: 0 0 18px !important;
  color: var(--hp-ink-2) !important;
  line-height: 1.85 !important;
}

.single-entry h2,
.single-entry h3,
.single-entry h4 {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 700 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
  margin: 36px 0 16px !important;
  position: relative;
  padding-left: 14px !important;
}

.single-entry h2 {
  font-size: 22px !important;
  line-height: 1.35 !important;
  border-left: 4px solid var(--hp-cyan) !important;
  padding-left: 14px !important;
}

.single-entry h3 {
  font-size: 18px !important;
  line-height: 1.4 !important;
  border-left: 3px solid var(--hp-amber) !important;
}

.single-entry h4 {
  font-size: 16px !important;
  line-height: 1.45 !important;
  border-left: 2px solid var(--hp-rule) !important;
  color: var(--hp-ink-2) !important;
}

.single-entry a {
  color: var(--hp-cyan) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--hp-cyan-soft);
  transition: all 0.2s ease;
  padding-bottom: 1px;
}

.single-entry a:hover {
  color: var(--hp-cyan-deep) !important;
  border-bottom-color: var(--hp-cyan);
}

.single-entry strong,
.single-entry b {
  color: var(--hp-ink) !important;
  font-weight: 700 !important;
  background: var(--hp-amber-soft);
  padding: 1px 4px;
  border-radius: 2px;
}

body.night .single-entry strong,
body.night .single-entry b {
  background: rgba(217, 119, 6, 0.16);
  color: var(--hp-amber);
}

.single-entry code,
.single-entry pre {
  font-family: var(--hp-mono) !important;
  background: var(--hp-paper-2) !important;
  border: 1px solid var(--hp-rule);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.92em;
  color: var(--hp-cyan-deep);
}

body.night .single-entry code,
body.night .single-entry pre {
  color: #7BA0FF;
}

.single-entry pre {
  padding: 14px 18px !important;
  line-height: 1.6 !important;
  overflow-x: auto;
  margin: 18px 0;
}

.single-entry blockquote {
  margin: 18px 0 !important;
  padding: 12px 18px !important;
  border-left: 3px solid var(--hp-cyan) !important;
  background: var(--hp-cyan-soft) !important;
  color: var(--hp-ink-2) !important;
  border-radius: 0 var(--hp-rad-1) var(--hp-rad-1) 0 !important;
  font-size: 14.5px !important;
}

.single-entry blockquote p {
  margin: 0 !important;
  color: var(--hp-ink-2) !important;
}

.single-entry ul,
.single-entry ol {
  margin: 0 0 18px !important;
  padding-left: 24px !important;
  color: var(--hp-ink-2) !important;
}

.single-entry li {
  margin-bottom: 8px !important;
  line-height: 1.8 !important;
}

.single-entry ul li::marker {
  color: var(--hp-cyan);
  font-family: var(--hp-mono);
}

.single-entry img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--hp-rad-1) !important;
  margin: 18px 0 !important;
  border: 1px solid var(--hp-rule);
}

.single-entry table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 18px 0 !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  border: 1px solid var(--hp-rule);
  border-radius: var(--hp-rad-1) !important;
  overflow: hidden;
}

.single-entry table th,
.single-entry table td {
  padding: 10px 14px !important;
  border: 1px solid var(--hp-rule) !important;
  text-align: left;
}

.single-entry table th {
  background: var(--hp-paper-2) !important;
  color: var(--hp-ink) !important;
  font-weight: 600 !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
}

/* ---------- S4. Article footer (tags / share) ---------- */
.entry-footer {
  margin-top: 28px !important;
  padding-top: 18px !important;
  border-top: 1px dashed var(--hp-rule) !important;
}

.readlist.ds-reward-stl {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.read_outer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 8px 16px !important;
  background: var(--hp-paper-2) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-1) !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-body) !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
  cursor: pointer !important;
  transition: all 0.25s ease;
}

.read_outer:hover {
  border-color: var(--hp-cyan) !important;
  color: var(--hp-cyan-deep) !important;
  background: var(--hp-card) !important;
  transform: translateY(-1px);
  box-shadow: var(--hp-shadow-2);
}

.read_outer i.icon {
  color: var(--hp-cyan) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.read_outer.zanter:hover i.icon { color: var(--hp-amber) !important; }
.read_outer.zanter:hover { border-color: var(--hp-amber) !important; color: var(--hp-amber-deep) !important; }

.read_outer .z-thumbs-up {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  color: var(--hp-ink-2) !important;
  font-size: 13px !important;
}

.read_outer .z-thumbs-up i.icon { color: var(--hp-red) !important; }

/* share dropdown */
#mClick {
  position: relative;
}

#mClick > i.icon {
  margin-right: 4px;
  color: var(--hp-cyan) !important;
}

#mClick .share {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-1) !important;
  box-shadow: var(--hp-shadow-3);
}

.post-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 0 0 !important;
  border-top: 1px dashed var(--hp-rule) !important;
  margin-top: 12px !important;
}

.post-tags a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  padding: 4px 10px !important;
  background: var(--hp-cyan-soft) !important;
  border: 1px solid transparent;
  border-radius: var(--hp-rad-1) !important;
  font-family: var(--hp-mono) !important;
  font-size: 12px !important;
  color: var(--hp-cyan-deep) !important;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.post-tags a::before {
  content: "#";
  opacity: 0.6;
}

.post-tags a:hover {
  background: var(--hp-cyan) !important;
  color: #FFFFFF !important;
  border-color: var(--hp-cyan) !important;
  transform: translateY(-1px);
}

body.night .post-tags a {
  color: #7BA0FF;
}

/* statement */
.statement {
  position: relative;
  margin-top: 24px !important;
  padding: 16px 20px 16px 50px !important;
  background: var(--hp-paper-2) !important;
  border: 1px solid var(--hp-rule) !important;
  border-left: 3px solid var(--hp-amber) !important;
  border-radius: var(--hp-rad-1) !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-body) !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: var(--hp-ink-3) !important;
}

.statement::before {
  content: """;
  position: absolute;
  left: 16px;
  top: 4px;
  font-family: Georgia, serif;
  font-size: 36px;
  color: var(--hp-amber);
  line-height: 1;
}

.statement a {
  color: var(--hp-cyan-deep) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.statement .red {
  color: var(--hp-red) !important;
  font-weight: 600 !important;
}

.statement.yc {
  display: block !important;
}

/* ---------- S5. Previous / Next navigation ---------- */
.entry-next-prev {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 12px !important;
  margin: 24px 0 !important;
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2) !important;
  padding: 8px !important;
  box-shadow: var(--hp-shadow-2);
}

.entry-next-prev p {
  margin: 0 !important;
  background: transparent !important;
  float: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--hp-rad-1) !important;
  transition: all 0.25s ease;
  min-width: 0 !important;
  width: auto !important;
}

.entry-next-prev p:hover {
  background: var(--hp-cyan-soft) !important;
  border-color: var(--hp-cyan) !important;
}

.entry-next-prev p a {
  display: block !important;
  padding: 14px 16px !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--hp-ink-2) !important;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-next-prev p.m-page-up a::before {
  content: "← 上篇  ";
  font-family: var(--hp-mono);
  font-size: 10.5px;
  color: var(--hp-cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.entry-next-prev p.m-page-down a::before {
  content: "下篇 →  ";
  font-family: var(--hp-mono);
  font-size: 10.5px;
  color: var(--hp-cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.entry-next-prev p.no-prev a::before,
.entry-next-prev p.no-next a::before {
  content: "— 没有更多 —";
  font-family: var(--hp-mono);
  color: var(--hp-ink-4);
  display: block;
  margin-bottom: 4px;
}

.entry-next-prev p.no-prev a,
.entry-next-prev p.no-next a {
  color: var(--hp-ink-4) !important;
  cursor: default;
}

.entry-next-prev a.u-back-list {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: auto !important;
  background: var(--hp-ink) !important;
  color: var(--hp-paper) !important;
  border-radius: var(--hp-rad-1) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  padding: 14px 0 !important;
}

.entry-next-prev a.u-back-list:hover {
  background: var(--hp-cyan) !important;
}

.entry-next-prev .clear { display: none !important; }

/* ---------- S6. Related articles (part-mor) ---------- */
.part-mor.box-show {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2);
  margin-top: 24px !important;
  padding: 22px 24px !important;
}

.section-title {
  font-family: var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--hp-ink) !important;
  padding: 0 0 14px !important;
  margin: 0 0 18px !important;
  border-bottom: 1px dashed var(--hp-rule) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.section-title span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
}

.section-title span::before {
  content: "";
  width: 3px;
  height: 16px;
  background: var(--hp-cyan);
  border-radius: 1px;
}

.section-title::after {
  content: "RELATED  /  " counter(hp-rel, decimal-leading-zero);
  font-family: var(--hp-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--hp-ink-4);
}

.part-mor {
  counter-reset: hp-rel;
}

.pic-box-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.pic-box-list .sell-lia-item {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2) !important;
  overflow: hidden;
  transition: all 0.3s ease;
  float: none !important;
  margin: 0 !important;
  width: auto !important;
}

.pic-box-list .sell-lia-item:hover {
  border-color: var(--hp-cyan) !important;
  transform: translateY(-2px);
  box-shadow: var(--hp-shadow-3);
}

.pic-box-list .sell-pic-media a {
  display: block !important;
  height: 140px !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  border-radius: 0 !important;
  width: auto !important;
}

.pic-box-list .sell-pic-media .pic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15, 30, 45, 0.5));
  transition: opacity 0.3s ease;
}

.pic-box-list .sell-media-t {
  padding: 10px 12px 12px !important;
}

.pic-box-list .sell-media-t h3 {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 600 !important;
}

.pic-box-list .sell-media-t h3 a {
  color: var(--hp-ink) !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.pic-box-list .sell-lia-item:hover .sell-media-t h3 a {
  color: var(--hp-cyan-deep) !important;
}

body.night .pic-box-list .sell-lia-item:hover .sell-media-t h3 a {
  color: var(--hp-cyan) !important;
}

/* ---------- S7. Comments section ---------- */
#comments.box-show {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-3) !important;
  box-shadow: var(--hp-shadow-2);
  padding: 22px 24px !important;
  margin-top: 24px !important;
}

#comments h3,
#comments .comment-title {
  font-family: var(--hp-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--hp-ink) !important;
  padding: 0 0 14px !important;
  margin: 0 0 18px !important;
  border-bottom: 1px dashed var(--hp-rule) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

#comments h3::before,
#comments .comment-title::before {
  content: "";
  width: 3px;
  height: 16px;
  background: var(--hp-cyan);
  border-radius: 1px;
}

/* reply form */
#comment form,
#comments form {
  background: var(--hp-paper-2) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2) !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
}

#comment textarea,
#comments textarea,
#comment input[type="text"],
#comments input[type="text"] {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-1) !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  color: var(--hp-ink) !important;
  padding: 8px 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#comment textarea:focus,
#comments textarea:focus,
#comment input[type="text"]:focus,
#comments input[type="text"]:focus {
  border-color: var(--hp-cyan) !important;
  box-shadow: 0 0 0 3px var(--hp-cyan-soft) !important;
  outline: none !important;
}

#comment button,
#comments button,
#comment input[type="submit"],
#comments input[type="submit"] {
  background: var(--hp-ink) !important;
  color: var(--hp-paper) !important;
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 20px !important;
  border-radius: var(--hp-rad-1) !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background 0.25s ease;
}

#comment button:hover,
#comments button:hover {
  background: var(--hp-cyan) !important;
}

/* comment items */
ul.comment-list,
.comment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul.comment-list li,
.comment-list li {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-rule) !important;
  border-radius: var(--hp-rad-2) !important;
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  position: relative;
}

ul.comment-list li::before,
.comment-list ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--hp-cyan);
  border-radius: 0 2px 2px 0;
}

.comment-avatar img {
  border-radius: 50% !important;
  border: 2px solid var(--hp-card) !important;
  box-shadow: 0 0 0 1px var(--hp-rule) !important;
}

.comment-author,
.comment-name a {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-display) !important;
  font-weight: 600 !important;
  color: var(--hp-ink) !important;
}

.comment-time {
  font-family: var(--hp-mono) !important;
  font-size: 11px !important;
  color: var(--hp-ink-4) !important;
  letter-spacing: 0.04em;
}

.comment-content {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hp-body) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--hp-ink-2) !important;
  margin-top: 8px !important;
}

/* ---------- S8. Article responsive ---------- */
@media (max-width: 992px) {
  .single-post {
    padding: 22px 22px 24px !important;
  }
  .entry-next-prev {
    grid-template-columns: 1fr !important;
  }
  .entry-next-prev a.u-back-list {
    width: 100% !important;
    padding: 10px !important;
  }
  .pic-box-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .single-bar-header h1 {
    font-size: 22px !important;
  }
  .single-user-meta {
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .pic-box-list {
    grid-template-columns: 1fr !important;
  }
  .single-entry {
    font-size: 15px !important;
  }
  .single-entry h2 { font-size: 19px !important; }
}