/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-page: #FDFCFA;
  --bg-card: #FFFFFF;
  --bg-soft: #F7F5F0;
  --bg-dark: #2B2B28;
  --text-primary: #1C1C1A;
  --text-secondary: #5A5A55;
  --text-tertiary: #9B9B94;
  --border-light: #EDEBE4;
  --border-default: #E2DFD6;
  --accent: #B0875C;
  --accent-soft: #F4EDE3;
  --accent-dark: #8A6A45;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Georgia", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-mono: "SF Mono", "Consolas", monospace;
  --max-width: 960px;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 15px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Navigation ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg-rgba, rgba(253, 252, 250, 0.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--border-light);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 62px;
}

.nav-brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.nav-brand .brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 2px;
}

.nav-menu {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-menu a {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 24px;
}

.nav-menu a:hover {
  color: var(--text-primary);
  background: var(--bg-soft);
}

.nav-menu a.active {
  color: var(--text-primary);
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.nav-social {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-social a {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 6px 10px;
  border-radius: 20px;
  border: 0.5px solid var(--border-light);
  transition: all 0.15s ease;
}

.nav-social a:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--bg-soft);
}

/* ===== Banner ===== */
.banner {
  position: relative;
  height: 90vh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
  max-width: 680px;
}

.banner-title {
  font-size: 48px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.banner-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.9);
  margin-top: 14px;
  line-height: 1.8;
}

.banner-tag {
  display: inline-block;
  font-size: 12px;
  color: #FFFFFF;
  background: rgba(255,255,255,0.18);
  border: 0.5px solid rgba(255,255,255,0.35);
  padding: 5px 14px;
  border-radius: 20px;
  margin-top: 18px;
  backdrop-filter: blur(6px);
}

/* banner 内容默认隐藏，JS 渲染后淡入，避免闪现旧硬编码内容 */
.banner-content {
  opacity: 0;
}
.banner.loaded .banner-content {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* 无图片时的渐变兜底 */
.banner[data-fallback="true"] .banner-img {
  display: none;
}

.banner[data-fallback="true"] {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(176,135,92,0.55), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(60,60,55,0.5), transparent 55%),
    linear-gradient(135deg, #3D3A33 0%, #57524A 50%, #7A6A55 100%);
}

/* ===== Home About Snapshot ===== */
.home-about-section {
  padding: 56px 0 44px;
}

.home-about-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--bg-card);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 38px 44px;
  box-shadow: var(--shadow-sm);
}

.home-about-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.home-about-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 600;
  font-family: var(--font-serif);
  overflow: hidden;
  flex-shrink: 0;
}

.home-about-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-about-name {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.home-about-role {
  font-size: 13.5px;
  color: var(--accent);
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.6;
}

.home-about-right {
  min-width: 0;
}

.home-about-intro {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.home-about-stats {
  display: flex;
  gap: 40px;
  padding: 18px 0;
  border-top: 0.5px solid var(--border-light);
  border-bottom: 0.5px solid var(--border-light);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.home-about-stat-num {
  font-size: 23px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.home-about-stat-label {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.home-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--accent);
  padding: 11px 24px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.home-about-btn:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

/* ===== Section ===== */
.section {
  padding: 44px 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  position: relative;
  padding-left: 14px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
}

.section-more {
  font-size: 13px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.section-more:hover {
  color: var(--accent);
}

/* ===== Article Cards ===== */
.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.article-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.article-card-thumb {
  height: 180px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-tertiary);
  overflow: hidden;
}

.article-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card-body {
  padding: 18px 20px 20px;
}

.article-card-cat {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

.article-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 6px 0 8px;
  letter-spacing: -0.2px;
}

.article-card:hover .article-card-title {
  color: var(--accent-dark);
}

.article-card-excerpt {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.platform-badges {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.platform-badge {
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 10px;
  border: 0.5px solid var(--border-light);
  white-space: nowrap;
}

/* ===== Custom Content Blocks ===== */
.custom-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.custom-block {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  padding: 24px;
  transition: box-shadow 0.2s ease;
}

.custom-block:hover {
  box-shadow: var(--shadow-md);
}

.custom-block-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--accent);
}

.custom-block h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.custom-block p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.custom-block a {
  display: inline-block;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  margin-top: 12px;
}

.custom-block a:hover {
  color: var(--accent-dark);
}

/* ===== Custom Sections (rich content modules) ===== */
.custom-section-content {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  padding: 32px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-primary);
}

.custom-section-content p {
  margin-bottom: 16px;
}

.custom-section-content h2,
.custom-section-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px;
}

.custom-section-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 10px 20px;
  margin: 16px 0;
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
}

.custom-section-content img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 16px 0;
}

/* ===== External Links ===== */
.external-section {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 0.5px solid var(--border-light);
  padding: 32px;
}

.external-section h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.external-section .external-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.external-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.external-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-light);
  padding: 14px;
  transition: all 0.15s ease;
}

.external-card:hover {
  background: var(--bg-soft);
  border-color: var(--border-default);
  transform: translateY(-1px);
}

.external-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--bg-soft);
  color: var(--text-secondary);
}

.external-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* 官方矢量 logo（simple-icons 白色版，叠加在品牌色圆底上） */
.external-icon .logo-img {
  width: 22px;
  height: 22px;
  display: block;
}

.external-icon .char {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.external-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.external-arrow {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}

/* external brand colors（实色背景 + 白色 logo，模拟官方 app 图标） */
.ext-weibo .external-icon { background: #E6162D; color: #fff; }
.ext-taobao .external-icon { background: #FF5000; color: #fff; }
.ext-netease .external-icon { background: #D3212C; color: #fff; }
.ext-sohu .external-icon { background: #FA8B00; color: #fff; }
.ext-wechat .external-icon { background: #07C160; color: #fff; }
.ext-toutiao .external-icon { background: #E42A2A; color: #fff; }
.ext-zhihu .external-icon { background: #0084FF; color: #fff; }
.ext-bilibili .external-icon { background: #FB7299; color: #fff; }
.ext-baijiahao .external-icon { background: #2932E1; color: #fff; }
.ext-woshipm .external-icon { background: #FF6A00; color: #fff; }

/* ===== Page Hero (sub pages) ===== */
.page-hero {
  background: var(--bg-dark);
  color: #FFFFFF;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(176,135,92,0.25);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.page-hero p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin-top: 8px;
}

/* ===== Article List (list style) ===== */
.article-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  overflow: hidden;
}

.article-row {
  display: flex;
  gap: 20px;
  padding: 24px;
  border-bottom: 0.5px solid var(--border-light);
  transition: background 0.15s ease;
}

.article-row:last-child {
  border-bottom: none;
}

.article-row:hover {
  background: var(--bg-page);
}

.article-row-thumb {
  width: 120px;
  height: 84px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-tertiary);
}

.article-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-row-body {
  flex: 1;
  min-width: 0;
}

.article-row-cat {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

.article-row-title {
  font-size: 16px;
  font-weight: 600;
  margin: 4px 0 6px;
  line-height: 1.5;
}

.article-row:hover .article-row-title {
  color: var(--accent-dark);
}

.article-row-excerpt {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ===== Article Detail ===== */
.article-detail {
  padding: 44px 0 64px;
}

.article-detail-header {
  margin-bottom: 32px;
}

.article-detail-cat {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
}

.article-detail h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.3px;
}

.article-detail-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.article-detail-content {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-primary);
  padding: 32px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
}

.article-detail-cover {
  margin-bottom: 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-detail-cover img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.article-detail-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 16px 0;
}

.article-lead {
  margin: 0 0 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-lead img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

.article-lead figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  text-align: center;
  letter-spacing: 0.5px;
}

.article-detail-content p {
  margin-bottom: 24px;
}

.article-detail-content h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  margin: 40px 0 16px;
  letter-spacing: -0.2px;
}

.article-detail-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 10px 20px;
  margin: 24px 0;
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.article-sync {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
}

.article-sync h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.article-sync-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sync-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-page);
  padding: 6px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--border-default);
}

.sync-link:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}

.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== 阅读时长 ===== */
.read-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  padding: 3px 10px;
  border-radius: 999px;
}
.read-time::before {
  content: '⏱';
  font-size: 11px;
}

/* ===== Shop ===== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.shop-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.shop-card-img {
  height: 160px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--accent);
}

.shop-card-body {
  padding: 18px 20px;
}

.shop-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.shop-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
  min-height: 38px;
}

.shop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop-card-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}

.shop-card-btn {
  font-size: 12px;
  color: #FFFFFF;
  background: var(--accent);
  padding: 6px 14px;
  border-radius: 20px;
  transition: background 0.15s ease;
}

.shop-card-btn:hover {
  background: var(--accent-dark);
}

.shop-note {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 24px;
  text-align: center;
  line-height: 1.8;
}

/* ===== About ===== */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
}

.about-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  padding: 32px;
}

.about-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-serif);
  margin-bottom: 16px;
  overflow: hidden;
}

.about-card h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.about-card .about-role {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 20px;
  border-top: 0.5px solid var(--border-light);
}

.about-stat-num {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.about-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.about-content h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px;
}

.about-content h2:first-child {
  margin-top: 0;
}

.about-content p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 12px;
}

.about-timeline {
  margin-top: 8px;
}

.timeline-item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border-light);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-period {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  padding-top: 2px;
}

.timeline-company {
  font-size: 14px;
  font-weight: 500;
}

.timeline-role {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== Footer ===== */
.footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.6);
  padding: 40px 0 32px;
  margin-top: 48px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-brand {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}

.footer-brand-desc {
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.7;
  max-width: 260px;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-subscribe {
  min-width: 240px;
}
.footer-sub-title {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.footer-sub-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 12px;
}
.footer-sub-form {
  display: flex;
  gap: 8px;
}
.footer-sub-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 13px;
  outline: none;
}
.footer-sub-form input::placeholder {
  color: rgba(255,255,255,0.45);
}
.footer-sub-form input:focus {
  border-color: #ff7a45;
}
.footer-sub-form button {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: #ff4d4f;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.footer-sub-form button:disabled {
  opacity: 0.6;
  cursor: default;
}
.footer-sub-msg {
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.5;
  min-height: 16px;
}
.footer-sub-ok { color: #4ade80; }
.footer-sub-err { color: #fca5a5; }
.footer-sub-rss {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.footer-sub-rss:hover { color: #fff; }

.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(255,255,255,0.15);
  font-size: 12px;
  text-align: center;
  color: rgba(255,255,255,0.4);
}

/* ===== 登录 / 注册（导航栏入口） ===== */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 18px;
  flex-shrink: 0;
}
.nav-auth-link {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  transition: all .2s;
  white-space: nowrap;
}
.nav-auth-link:hover { color: var(--accent-dark); background: var(--bg-soft); }
.nav-auth-register {
  background: var(--accent);
  color: #fff;
}
.nav-auth-register:hover { color: #fff; background: var(--accent-dark); }
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-primary);
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===== 登录 / 注册弹窗 ===== */
.auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30, 28, 24, 0.55);
  backdrop-filter: blur(4px);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  animation: auth-pop .25s ease;
}
@keyframes auth-pop {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.auth-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 22px;
  color: var(--text-tertiary);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.auth-close:hover { color: var(--text-primary); }
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: var(--bg-soft);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
}
.auth-tab.active {
  background: var(--accent);
  color: #fff;
}
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-weight: 500;
}
.auth-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-size: 14px;
  background: #FBFAF7;
  color: var(--text-primary);
  box-sizing: border-box;
  outline: none;
  transition: border .2s, background .2s;
}
.auth-field input:focus { border-color: var(--accent); background: #fff; }
.auth-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.auth-error {
  background: #FDF0EC;
  color: #C2452E;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.auth-submit {
  width: 100%;
  padding: 11px 0;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity .2s;
  margin-top: 6px;
}
.auth-submit:hover { opacity: .9; }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }

/* 注册成功待激活提示 */
.auth-success { text-align: center; padding: 8px 4px; }
.auth-success-icon {
  width: 56px; height: 56px; line-height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #EAF6EE;
  color: #16a34a;
  font-size: 28px;
}
.auth-success h3 { font-size: 17px; color: var(--text-primary); margin: 0 0 12px; }
.auth-success p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 10px; }
.auth-success .auth-hint { font-size: 12px; color: var(--text-tertiary); }

/* ===== 评论 / 留言板 ===== */
.comments-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 28px;
}
.comments-head h3 {
  font-size: 18px;
  margin: 0 0 20px;
  color: var(--text-primary);
}
.comments-count {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: 6px;
}
.comment-form {
  margin-bottom: 26px;
}
.comment-form textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: #FBFAF7;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  box-sizing: border-box;
  resize: vertical;
  outline: none;
  transition: border .2s;
}
.comment-form textarea:focus { border-color: var(--accent); background: #fff; }
.comment-form textarea:disabled { background: var(--bg-soft); color: var(--text-tertiary); cursor: not-allowed; }
.comment-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 12px;
}
.comment-form-tip {
  font-size: 12px;
  color: var(--text-tertiary);
}
.comment-submit {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  cursor: pointer;
  transition: opacity .2s;
  flex-shrink: 0;
}
.comment-submit:hover { opacity: .9; }
.comment-submit:disabled { background: var(--border-default); cursor: not-allowed; }
.comment-list {
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}
.comment-loading,
.comment-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13.5px;
  padding: 26px 0;
}
.comment-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.comment-item:last-child { border-bottom: none; }
.comment-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}
.comment-nick {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.comment-time {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.comment-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  word-break: break-word;
}

/* ===== 轻提示 Toast ===== */
#wb-toast {
  position: fixed;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-dark);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  max-width: 82vw;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
#wb-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .banner {
    height: 70vh;
    min-height: 400px;
  }

  .banner-title {
    font-size: 32px;
  }

  .article-grid,
  .custom-blocks,
  .shop-grid {
    grid-template-columns: 1fr;
  }

  .external-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-about-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px;
    text-align: center;
  }
  .home-about-right {
    text-align: left;
  }
  .home-about-stats {
    justify-content: space-around;
    gap: 16px;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }

  .nav-social {
    display: none;
  }

  .nav-auth {
    margin-left: 4px;
  }
  .nav-auth-link {
    font-size: 12.5px;
    padding: 5px 9px;
  }
  .nav-user {
    max-width: 84px;
    font-size: 12.5px;
  }
  .auth-modal {
    padding: 24px 18px 18px;
  }
  .comments-box {
    padding: 18px;
  }
  .comment-form-foot {
    flex-direction: column;
    align-items: flex-end;
  }

  .article-row {
    padding: 18px;
    gap: 14px;
  }

  .article-row-thumb {
    width: 84px;
    height: 70px;
  }

  .article-detail h1 {
    font-size: 22px;
  }

  .article-detail-content {
    padding: 22px;
    font-size: 15px;
  }
}

/* ===== Premium / 高端排版增强 ===== */
:root {
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
}

/* 导航品牌名：衬线 + 字距，更显质感 */
.nav-brand {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0;
}

/* 区块标题：衬线大标 + 精致色条 */
.section-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.section-title::before {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
}

/* 页面大标题 */
.page-hero h1 {
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}

/* Banner 主标题：衬线大字 */
.banner-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.32;
}

/* 文章卡片：封面悬停放大，标题变色 */
.article-card-thumb {
  overflow: hidden;
}
.article-card-thumb img {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.article-card:hover .article-card-thumb img {
  transform: scale(1.06);
}
.article-card-cat,
.article-row-cat {
  letter-spacing: 0.5px;
}

/* ===== 分类筛选 ===== */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.cat-tab {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 0.5px solid var(--border-default);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cat-tab:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--bg-soft);
}
.cat-tab.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.cat-count {
  font-size: 11px;
  opacity: 0.7;
  background: rgba(0,0,0,0.06);
  padding: 1px 7px;
  border-radius: 999px;
}
.cat-tab.active .cat-count {
  background: rgba(255,255,255,0.22);
  opacity: 1;
}

/* ===== 最新发布 大卡 ===== */
.featured {
  margin-bottom: 8px;
}
.featured-card {
  position: relative;
  display: block;
  min-height: 440px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--bg-dark);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,0.12) 0%, rgba(20,18,15,0.74) 100%);
}
.featured-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 56px;
  color: #fff;
}
.featured-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #fff;
  background: rgba(255,255,255,0.16);
  border: 0.5px solid rgba(255,255,255,0.35);
  padding: 4px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.featured-cat {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 1px;
}
.featured-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.32;
  margin: 12px 0 14px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.featured-excerpt {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  flex-wrap: wrap;
}
.featured-read {
  margin-left: auto;
  font-weight: 500;
  color: #fff;
}

.article-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
  padding: 48px 0;
}

/* ===== 文章列表翻页（每页 20） ===== */
.article-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 32px 0 8px;
}
.page-btn {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 0.5px solid var(--border-default);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.page-btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--bg-soft);
}
.page-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  cursor: default;
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-ellipsis {
  color: var(--text-secondary);
  padding: 0 2px;
  user-select: none;
}

@media (max-width: 768px) {
  .featured-card { min-height: 360px; }
  .featured-inner { padding: 32px 24px; }
  .section-title { font-size: 20px; }
  .nav-brand { font-size: 17px; }
}

/* ===== 移动端汉堡菜单 ===== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  margin-left: 12px;
  background: transparent;
  border: 0.5px solid var(--border-light);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-inner {
    height: auto;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-toggle { display: flex; }
  .nav-menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    margin: 2px 0 0;
    transition: max-height 0.32s ease;
  }
  .nav.open .nav-menu { max-height: 280px; }
  .nav-menu a {
    padding: 13px 14px;
    font-size: 15px;
    border-radius: 10px;
    background: transparent;
  }
  .nav-menu a.active { background: var(--accent-soft); }
  .nav-social { display: none !important; }

  /* 页脚堆叠 */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 26px; }
  .footer-brand-desc { max-width: 100%; }

  /* 文章列表行：窄屏改为上下布局，封面大图 */
  .article-row { flex-direction: column; gap: 12px; }
  .article-row-thumb { width: 100%; height: 180px; }
  .article-row-excerpt { -webkit-line-clamp: 2; }

  /* 分类筛选：横向滑动，避免挤压 */
  .cat-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .cat-tab { flex-shrink: 0; }

  /* 容器与区块边距收紧 */
  .container { padding: 0 16px; }
  .section { padding: 36px 0; }
}

/* ============================================
 * 体验优化：加载提示 / 文章搜索 / 文章页导航 / 图片放大
 * ============================================ */

/* 加载中占位 */
.loading-tip {
  padding: 48px 0;
  text-align: center;
  color: var(--text-tertiary, #9B9B94);
  font-size: 14px;
  letter-spacing: 1px;
}

/* 文章列表工具条：搜索框 + 分类筛选 */
.articles-toolbar {
  margin-bottom: 8px;
}
.article-search {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 0.5px solid var(--border-default);
  border-radius: 999px;
  padding: 10px 18px;
  margin-bottom: 18px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.article-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.article-search::placeholder { color: var(--text-tertiary); }

/* 文章页：返回 + 复制链接 */
.article-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 0.5px solid var(--border-default);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.btn-back:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--bg-soft);
}
.btn-share {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 0.5px solid var(--border-default);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-share:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--bg-soft);
}

/* 文章不存在 */
.article-notfound {
  text-align: center;
  padding: 72px 20px;
}
.article-notfound-icon { font-size: 44px; margin-bottom: 14px; }
.article-notfound h1 {
  font-size: 22px;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.article-notfound p {
  color: var(--text-tertiary);
  font-size: 14.5px;
  margin: 0 0 26px;
}
.article-notfound .btn-back { margin: 0 auto; }

/* 上一篇 / 下一篇 */
.article-nav {
  display: flex;
  gap: 14px;
  margin-top: 44px;
}
.article-nav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-light);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.article-nav-item:hover {
  border-color: var(--accent);
  background: var(--bg-soft);
  transform: translateY(-1px);
}
.article-nav-next { text-align: right; }
.article-nav-label {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}
.article-nav-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-nav-empty { visibility: hidden; }

/* 正文图片点击放大 */
.lightbox-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.lightbox-mask.show { opacity: 1; }
.lightbox-mask img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

/* 移动端适配 */
@media (max-width: 720px) {
  .article-nav { flex-direction: column; }
  .article-nav-next { text-align: left; }
  .article-nav-empty { display: none; }
  .article-back-row { flex-wrap: wrap; }
  .lightbox-mask { padding: 12px; }
}

/* ============================================
 * 社交分享栏 + 微信二维码弹窗
 * ============================================ */
.share-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.share-label {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-right: 2px;
}
.share-btn {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.share-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.share-btn:active { transform: translateY(0); }

.share-wechat  { background: #07C160; }
.share-weibo   { background: #E6162D; }
.share-qq      { background: #4A90D9; }
.share-qzone   { background: #FDBE3D; color: #5a3a00; }
.share-copy    { background: var(--bg-card); color: var(--text-secondary); border: 0.5px solid var(--border-default); }

/* 微信二维码弹窗 */
.wechat-share-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wechat-share-mask.show { opacity: 1; }
.wechat-share-box {
  background: #fff;
  border-radius: 16px;
  padding: 32px 32px 24px;
  text-align: center;
  position: relative;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.wechat-share-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 24px;
  color: var(--text-tertiary);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border: none;
  background: none;
}
.wechat-share-close:hover { color: var(--text-primary); }
.wechat-share-box h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}
.wechat-share-tip {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 18px;
  line-height: 1.6;
}
.wechat-qr-img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  margin: 0 auto 18px;
  display: block;
}
.wechat-copy-link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-soft);
  border: 0.5px solid var(--border-default);
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.wechat-copy-link:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .share-bar { gap: 6px; }
  .share-btn { font-size: 12px; padding: 6px 11px; }
  .share-label { display: none; }
}

/* ===== 商务合作 + 打赏 ===== */
.support-section{background:var(--bg-soft)}
.support-card{display:flex;align-items:center;gap:28px;border:1px solid var(--border-light);border-radius:var(--radius-lg,16px);background:#fff;padding:26px 30px;box-shadow:var(--shadow-sm)}
.support-col{flex:1;min-width:0}
.support-title{font-size:17px;font-weight:700;margin-bottom:6px}
.support-desc{color:var(--text-secondary);font-size:14px;margin-bottom:10px}
.support-contact{font-size:14px;color:var(--text-secondary)}
.support-contact a{color:var(--accent);font-weight:600}
.support-divider{width:1px;align-self:stretch;background:var(--border-light)}
.tip-btn{background:var(--accent);color:#fff;border:none;padding:10px 22px;border-radius:10px;font-size:14px;cursor:pointer;transition:background .15s}
.tip-btn:hover{background:var(--accent-dark)}
.tip-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px}
.tip-modal{background:#fff;border-radius:16px;padding:26px;width:300px;text-align:center;position:relative;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.tip-modal-title{font-size:17px;font-weight:700;margin-bottom:14px}
.tip-qr{width:220px;height:220px;border-radius:10px;border:1px solid var(--border-light)}
.tip-tip{color:var(--text-tertiary);font-size:13px;margin-top:12px}
.tip-close{position:absolute;top:10px;right:14px;border:none;background:none;font-size:22px;color:var(--text-tertiary);cursor:pointer;line-height:1}
@media(max-width:600px){.support-card{flex-direction:column;gap:16px}.support-divider{display:none}}

/* ===== 2026-09 视觉精简：去模板感 ===== */
:root{--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:14px}
body{letter-spacing:.012em;-webkit-font-smoothing:antialiased}
/* 导航：品牌用衬线，更安静 */
.nav{border-bottom:1px solid var(--border-light)}
.nav-brand{font-family:var(--font-serif);font-weight:600;letter-spacing:.06em}
/* Banner：收矮、留白更大 */
.banner{min-height:min(54vh,500px)}
.banner-title{font-family:var(--font-serif);font-weight:600;letter-spacing:.06em;line-height:1.35}
.banner-tag{letter-spacing:.22em;opacity:.8;font-size:12.5px}
/* 区块标题：去装饰条，衬线为主 */
.section-title{font-family:var(--font-serif);font-weight:600;letter-spacing:.02em}
.section-title::before{display:none}
/* 卡片：细描边、轻投影、更方 */
.article-card,.featured-card,.home-about-card,.external-card,.custom-block{border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(30,26,18,.04)}
.article-card:hover,.featured-card:hover{box-shadow:0 6px 20px rgba(30,26,18,.08)}
.article-card-thumb{border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden}
/* 外链平台：去掉彩色圆标，改单色克制样式 */
/* 外部平台图标：保留品牌色圆底 + 白色官方字形（不再压灰） */
.external-card{background:transparent;padding:10px 12px;border-color:var(--border-light)}
.external-card:hover{background:var(--bg-card)}
/* 平台小徽标单色化 */
.platform-badge{background:var(--bg-soft);color:var(--text-secondary);border:1px solid var(--border-light)}
/* 按钮更利落 */
.home-about-btn,.btn-back{letter-spacing:.03em}
/* 隐藏留言板（后期可恢复） */
#sec-guestbook{display:none!important}
/* 页脚更干净 */
.footer{font-size:14px}

/* ===== 2026-09 Apple 风格（在精简版之上） ===== */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;
  --radius-sm:8px;--radius-md:14px;--radius-lg:18px;--radius-xl:22px;
  --shadow-md:0 4px 20px rgba(0,0,0,.06);--shadow-sm:0 1px 4px rgba(0,0,0,.04);
}
body{background:#F5F5F7!important;color:#1D1D1F}
.container{max-width:1040px}
/* 导航：极简白、小字、无底色胶囊 */
.nav{background:rgba(255,255,255,.8)!important;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{padding:10px 22px}
.nav-brand{font-family:var(--font-sans);font-weight:600;font-size:18px;letter-spacing:-.01em;color:#1D1D1F!important}
.nav-menu a{font-family:var(--font-sans);font-size:14px;color:#444!important;padding:4px 2px;border-bottom:none}
.nav-menu a:hover{color:#000!important}
.nav-menu a.active{background:transparent!important;color:#1D1D1F!important;font-weight:600;border-bottom:2px solid #1D1D1F}
/* Banner：标题大字无衬线 */
.banner{min-height:min(52vh,480px)}
.banner-title{font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em;font-size:clamp(34px,6vw,64px)}
.banner-sub{font-family:var(--font-sans);font-size:19px}
.banner-tag{font-family:var(--font-sans);letter-spacing:.2em;font-size:12px;font-weight:600}
/* 区块标题 */
.section-title{font-family:var(--font-sans);font-weight:700;font-size:30px;letter-spacing:-.015em;color:#1D1D1F}
.section-header{margin-bottom:26px}
.section-more{font-family:var(--font-sans);font-size:15px;color:#0071E3}
/* 卡片：白底浅灰底、大圆角、柔和阴影、去描边 */
.article-card,.home-about-card,.custom-block,.external-card{background:#fff!important;border:0!important;border-radius:18px!important;box-shadow:0 6px 24px rgba(0,0,0,.06)!important}
.article-card:hover,.featured-card:hover{box-shadow:0 14px 40px rgba(0,0,0,.1)!important;transform:translateY(-3px)}
.featured-card{border:0!important;border-radius:22px!important;overflow:hidden;background-color:#f2efe9;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.article-card-thumb{border-radius:18px 18px 0 0}
.article-card-cat,.article-card-meta,.featured-meta{font-family:var(--font-sans)}
.article-card-cat{font-size:12px;font-weight:600;color:#86868B}
.article-card-title{font-family:var(--font-sans);font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.4}
.article-card-excerpt{color:#6E6E73}
.featured-title{font-family:var(--font-sans);font-weight:700;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.015em;line-height:1.3}
/* 关于区 */
.home-about-card{background:#fff!important}
.home-about-name{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em}
.home-about-role,.home-about-intro{color:#6E6E73}
.home-about-stat-num{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em}
/* 按钮：苹果蓝胶囊 */
.home-about-btn,.btn-back{font-family:var(--font-sans);border-radius:980px!important;padding:10px 22px;font-size:15px;font-weight:500}
/* 平台徽标单色灰 */
.platform-badge{background:#F5F5F7;color:#6E6E73;border:0;border-radius:6px;font-size:11px}
/* 自定义模块图标放大留白 */
.custom-block{padding:28px}
/* 页脚 */
.footer{background:#F5F5F7;border-top:1px solid rgba(0,0,0,.06);color:#6E6E73}
.footer a{color:#0071E3}
/* 通用链接蓝 */
a{color:inherit}
.text-link,.section-more,a[href*="article.html"]{color:#0071E3}


/* ===== 2026-09 思源黑体 Source Han Sans（开源免费可商用） ===== */
:root{
  --font-sans: 'Source Han Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-serif: 'Source Han Sans SC','Songti SC','Noto Serif SC',Georgia,serif;
  --font-display: 'Source Han Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
/* 页面正文使用思源黑体 */
body{font-family:var(--font-sans)}
/* 品牌与各级标题统一思源黑体 */
h1,h2,h3,
.nav-brand,.banner-title,.section-title,.featured-title,
.article-card-title,.article-row-title,.event-title,.shop-card-title,
.home-about-name,.home-about-stat-num,
.me-name,.me-section-title,.plan-name,.ev-title{
  font-family:var(--font-display)!important;
}


/* ===== 2026-09 阅读体验：进度条 / 目录 / 互动 / 订阅 ===== */
#reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#0A84FF,#0071E3);z-index:9999;pointer-events:none;transition:width .08s linear}
.article-toc{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:14px 18px;margin:22px 0 4px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.article-toc .toc-title{font-weight:700;font-size:14px;margin-bottom:8px;color:#1D1D1F}
.article-toc a{display:block;font-size:13px;color:#6E6E73;padding:4px 0;border-bottom:1px dashed rgba(0,0,0,.05);transition:color .15s}
.article-toc a:last-child{border-bottom:0}
.article-toc a:hover{color:#0071E3}
.article-detail-content h2[id],.article-detail-content h3[id]{scroll-margin-top:76px}
.article-actions{display:flex;gap:12px;margin:26px 0 4px;flex-wrap:wrap}
.act-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(0,0,0,.1);background:#fff;color:#1D1D1F;border-radius:999px;padding:8px 18px;font-size:14px;cursor:pointer;transition:all .15s;font-family:inherit;line-height:1.4}
.act-btn:hover{border-color:#0071E3;color:#0071E3}
.act-btn.on{background:#E8F4FF;border-color:#0071E3;color:#0071E3}
.act-num{font-variant-numeric:tabular-nums;min-width:1em}
.article-subscribe{margin:24px 0 8px}
.as-inner{background:#F5F5F7;border-radius:18px;padding:24px 22px;text-align:center}
.as-title{font-size:16px;font-weight:700;color:#1D1D1F;letter-spacing:-.01em}
.as-desc{font-size:13px;color:#6E6E73;margin:6px 0 14px;line-height:1.7}
.as-form{display:flex;gap:8px;max-width:440px;margin:0 auto}
.as-form input{flex:1;min-width:0;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:11px 14px;font-size:14px;background:#fff;color:#1D1D1F;outline:none;font-family:inherit}
.as-form input:focus{border-color:#0071E3}
.as-form button{background:#0071E3;color:#fff;border:0;border-radius:10px;padding:0 22px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit}
.as-msg{font-size:13px;margin-top:10px;min-height:1em;line-height:1.6}
.as-msg.ok{color:#1D7A3D}
.as-msg.err{color:#FF3B30}
.as-rss{font-size:12px;color:#86868B;margin-top:10px}
.as-rss a{color:#0071E3}
@media(max-width:600px){.as-form{flex-direction:column}.as-form button{padding:11px 0}}

/* ===== 2026-09 暗色模式（自动 + 手动开关） ===== */
html.dark{color-scheme:dark}
html.dark{
color-scheme:dark
}
html.dark body{
background:#000!important;color:#F5F5F7
}
html.dark h1,
html.dark h2,
html.dark h3,
html.dark .nav-brand,
html.dark .section-title,
html.dark .featured-title,
html.dark .article-card-title,
html.dark .article-row-title,
html.dark .shop-card-title,
html.dark .home-about-name,
html.dark .home-about-stat-num,
html.dark .article-detail-header h1{
color:#F5F5F7
}
html.dark p,
html.dark .article-detail,
html.dark .article-detail-content,
html.dark .article-card-excerpt,
html.dark .article-row-excerpt,
html.dark .shop-card-desc,
html.dark .home-about-intro,
html.dark .comment-text,
html.dark .section-sub{
color:#D1D1D6
}
html.dark .nav{
background:rgba(20,20,22,.82)!important;border-bottom:1px solid rgba(255,255,255,.08)
}
html.dark .nav-menu a,
html.dark .nav-auth-link{
color:#F5F5F7!important
}
html.dark .nav-menu a:hover,
html.dark .nav-menu a.active{
color:#fff!important
}
html.dark .article-card,
html.dark .shop-card,
html.dark .support-card,
html.dark .home-about-card,
html.dark .external-card,
html.dark .custom-block,
html.dark .article-toc,
html.dark .comment-item,
html.dark .comment-form,
html.dark .articles-toolbar,
html.dark .article-row,
html.dark .article-nav-item{
background:#1C1C1E!important;border-color:#2C2C2E!important;color:#D1D1D6
}
html.dark .article-card-meta,
html.dark .article-card-cat,
html.dark .article-row-meta,
html.dark .article-detail-meta,
html.dark .shop-card-desc,
html.dark .comment-time,
html.dark .card-meta,
html.dark .article-sync h4,
html.dark .article-nav-label{
color:#A1A1A6
}
html.dark .article-detail-content a,
html.dark .article-detail a{
color:#409CFF
}
html.dark .section-alt{
background:#0B0B0C!important;border-color:rgba(255,255,255,.06)!important
}
html.dark .footer{
background:#0A0A0B!important;border-top:1px solid rgba(255,255,255,.08);color:#A1A1A6
}
html.dark .footer a{
color:#409CFF
}
html.dark input,
html.dark textarea,
html.dark select{
background:#1C1C1E;color:#F5F5F7;border-color:#3A3A3C
}
html.dark .share-btn{
background:#1C1C1E!important;color:#D1D1D6!important;border-color:#3A3A3C!important
}
html.dark .act-btn{
background:#1C1C1E;color:#F5F5F7;border-color:#3A3A3C
}
html.dark .act-btn.on{
background:#0A3A5F;border-color:#0071E3;color:#7DC4FF
}
html.dark .as-inner{
background:#1C1C1E
}
html.dark .as-title{
color:#F5F5F7
}
html.dark .as-desc,
html.dark .as-rss{
color:#A1A1A6
}
html.dark .as-form input{
background:#2C2C2E;color:#F5F5F7;border-color:#3A3A3C
}
html.dark .article-toc a{
color:#A1A1A6
}
html.dark .article-toc a:hover{
color:#409CFF
}


/* ===== 主题切换按钮 ===== */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.6);color:#1D1D1F;font-size:15px;line-height:1;cursor:pointer;transition:all .15s;margin-left:4px;flex-shrink:0}
.theme-toggle:hover{border-color:#0071E3}
html.dark .theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#F5F5F7}
.nav-social{display:inline-flex;align-items:center}