/* ============================================================
   知书 · 内容门户（Portal）样式
   墨韵书卷设计系统 —— 与 H5 端 uni.scss 品牌语汇一脉相承
   ------------------------------------------------------------
   调性：暖纸背景 / 墨色文本 / 衬线标题（宋体系）/
         品牌藏青 + 釉橘点缀 / 印章徽标 / 细线编辑排版
   ⚠️ 本文件由 /portal/static 伺服，响应头为
      `Cache-Control: public, max-age=31536000, immutable`，
      但文件名无内容 hash。每次修改本文件必须同步 bump
      settings.PORTAL_ASSET_VER（config.py），否则用户会被长缓存锁死在旧样式。
   ============================================================ */

/* ---------- 墨韵设计令牌 ---------- */
:root {
  /* 起纸 · 墨色 */
  --c-paper: #F8F6F2;          /* 暖纸底 */
  --c-paper-warm: #F3EFE9;     /* 更深一级纸 */
  --c-ink: #2D2A26;            /* 墨色正文 */
  --c-ink-2: #6B6760;          /* 次级墨 */
  --c-ink-3: #ACA69E;          /* 弱墨/占位 */
  --c-line: #E8E3DC;           /* 细线分隔 */
  --c-line-2: #D9D2C6;         /* 强调线 */

  /* 品牌色板（与 H5 uni.scss 对齐） */
  --c-brand: #4A6FA5;          /* 知书藏青 */
  --c-brand-deep: #365585;
  --c-accent: #E07856;         /* 釉橘 */
  --c-accent-deep: #C05F3E;
  --c-seal: #B7452A;           /* 印章朱红 */
  --c-gold: #C9A57B;           /* 鎏金点缀 */
  --c-sage: #6B9080;           /* 青绿（日期/次要） */

  /* 面上纸 */
  --c-card: #FFFFFF;
  --c-card-warm: #FDFCFA;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 12px rgba(45,42,38,.05);
  --shadow-base: 0 10px 32px rgba(45,42,38,.07);
  --shadow-accent: 0 8px 28px rgba(224,120,86,.22);

  /* 衬线标题：书卷感，对齐 $uni-font-serif */
  --font-serif: 'Noto Serif SC','Source Han Serif SC','Source Han Serif CN',
                'Songti SC','STSong','SimSun',serif;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink);
  background:
    radial-gradient(circle at 12% -6%, rgba(74,111,165,.055) 0%, rgba(74,111,165,0) 42%),
    radial-gradient(circle at 96% 4%, rgba(224,120,86,.05) 0%, rgba(224,120,86,0) 40%),
    var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--c-brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--c-brand-deep); }

img { max-width: 100%; height: auto; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   头部 —— 纸上徽标 + 鎏金细线
   ============================================================ */
.site-header {
  position: relative;
  background: rgba(248,246,242,.86);
  backdrop-filter: saturate(140%) blur(8px);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line-2) 18%, var(--c-line-2) 82%, transparent);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--c-ink);
}
.site-logo:hover { color: var(--c-ink); }
.site-logo__box { display: inline-flex; align-items: center; gap: 10px; }
.site-logo__img {
  display: block;
  width: 34px; height: 34px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}
.site-logo__text {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* 站内搜索 */
.site-search { display: flex; gap: 8px; align-items: center; }
.site-search input[type="search"] {
  width: 216px;
  padding: 8px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: var(--c-card-warm);
  font-size: 13.5px;
  color: var(--c-ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-search input[type="search"]::placeholder { color: var(--c-ink-3); }
.site-search input[type="search"]:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(74,111,165,.12);
}

.btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--c-brand);
  border-radius: 999px;
  background: var(--c-brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, transform .12s var(--ease-out), box-shadow .2s ease;
}
.btn:hover {
  background: var(--c-brand-deep);
  color: #fff;
  box-shadow: 0 6px 18px rgba(74,111,165,.28);
  transform: translateY(-1px);
}

/* 鎏金印章按钮变体（404/关于等点缀） */
.btn--seal {
  border-color: var(--c-accent);
  background: var(--c-accent);
}
.btn--seal:hover { background: var(--c-accent-deep); box-shadow: var(--shadow-accent); }

/* ============================================================
   分类导航 —— 底栏细线，细长的藏青下划墨线
   ============================================================ */
.site-nav { background: transparent; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0;
  padding: 8px 0 14px;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 1px;
  color: var(--c-ink-2);
  font-size: 14.5px;
  letter-spacing: .5px;
}
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--c-brand);
  transition: right .28s var(--ease-out);
}
.site-nav a:hover { color: var(--c-brand-deep); }
.site-nav a:hover::after { right: 0; }
.site-nav a.is-active { color: var(--c-brand-deep); font-weight: 600; }
.site-nav a.is-active::after { right: 0; }
.site-nav .badge {
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-paper-warm);
  color: var(--c-ink-3);
  font-size: 11.5px;
  font-weight: 500;
}
.site-nav a.is-active .badge { color: var(--c-brand); background: rgba(74,111,165,.1); }

/* ============================================================
   布局
   ============================================================ */
.layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 0 52px;
}
.layout__main { flex: 1 1 auto; min-width: 0; }
.layout__aside { flex: 0 0 292px; width: 292px; }

/* ============================================================
   首页 Hero —— 书页拼贴 + 编辑推荐
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  margin: 24px 0 34px;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--c-card-warm);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-base);
}
.hero__grid {
  display: flex;
  align-items: stretch;
  min-height: 320px;
}
.hero__art {
  flex: 0 0 42%;
  position: relative;
  min-height: 300px;
  background-size: cover;
  background-position: center;
}
.hero__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(253,252,250,.5) 100%);
}
.hero__body {
  flex: 1 1 auto;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--c-accent-deep);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 3px;
}
.hero__kicker::before {
  content: "◆";
  font-size: 9px;
  color: var(--c-gold);
}
.hero__title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
  letter-spacing: 1px;
}
.hero__lead {
  margin: 0 0 22px;
  color: var(--c-ink-2);
  font-size: 14.5px;
  line-height: 1.8;
  max-width: 46ch;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero 右侧小程序二维码卡片 */
.hero__qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 28px 20px;
  border-left: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.45);
}
.hero__qr-img {
  display: block;
  width: 168px;
  height: 168px;
  border-radius: 10px;
  box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.08);
  background: #fff;
}
.hero__qr-tip {
  margin: 12rpx 0 0;
  font-size: 13px;
  color: var(--c-sub);
  letter-spacing: 1rpx;
}

/* 印章徽标（红色方框小字，书卷点题） */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border: 2px solid var(--c-seal);
  border-radius: 6px;
  color: var(--c-seal);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px rgba(183,69,42,.08);
}
.seal--small { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; }
.stamp-row { display: flex; align-items: center; gap: 14px; }

/* ============================================================
   区块标题 —— 编辑栏目标题（衬线 + 短墨线 + 索引）
   ============================================================ */
.section { margin-bottom: 36px; }
.section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.section__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 1px;
  line-height: 1.3;
}
.section__title::before {
  content: "";
  display: inline-block;
  width: 16px; height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--c-accent);
}
.section__en {
  font-family: Georgia, var(--font-serif);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--c-ink-3);
  text-transform: uppercase;
}

/* ============================================================
   文章卡片 —— 纸上编辑卡，hover 浮起
   ============================================================ */
.card-list { display: flex; flex-direction: column; gap: 16px; }

.article-card {
  display: flex;
  gap: 20px;
  padding: 18px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .22s ease;
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-base);
  border-color: var(--c-line-2);
}
.article-card__cover {
  flex: 0 0 168px;
  width: 168px;
  height: 118px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-paper-warm);
}
.article-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease-out);
}
.article-card:hover .article-card__cover img { transform: scale(1.05); }
.article-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.article-card__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}
.article-card__title a { color: var(--c-ink); }
.article-card__title a:hover { color: var(--c-brand-deep); }
.article-card__summary {
  margin: 0 0 10px;
  color: var(--c-ink-2);
  font-size: 13.5px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__oneline {
  margin: 0 0 10px;
  color: var(--c-accent-deep);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}
.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--c-line);
  color: var(--c-ink-3);
  font-size: 12px;
}
.article-card__meta a { color: var(--c-sage); font-weight: 500; }
.article-card__meta a:hover { color: var(--c-sage); text-decoration: underline; }

/* 置顶徽标 —— 朱红印章「荐」 */
.tag-top {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border: 1px solid var(--c-seal);
  border-radius: 4px;
  background: var(--c-seal);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  vertical-align: 2px;
}
.tag-top--ghost {
  background: transparent;
  color: var(--c-seal);
}

/* ============================================================
   侧栏 —— 纸质卡片
   ============================================================ */
.widget {
  margin-bottom: 18px;
  padding: 20px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.widget__title {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 1px;
}
.widget__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: var(--c-accent);
}
.widget p { margin: 0 0 8px; color: var(--c-ink-2); font-size: 13.5px; line-height: 1.7; }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: 13.5px;
}
.widget li:last-child { border-bottom: none; }
.widget li a { color: var(--c-ink-2); }
.widget li a:hover { color: var(--c-brand-deep); }
.widget li .count { color: var(--c-ink-3); font-size: 12px; }
.widget .widget__more { margin-top: 6px; font-size: 13px; color: var(--c-brand); }

/* 侧边栏二维码 */
.widget-qrcode { text-align: center; }
.qrcode-img {
  display: block;
  margin: 6px auto;
  width: 168px; height: 168px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.widget-qrcode-tip {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--c-ink-3);
}

/* ============================================================
   面包屑
   ============================================================ */
.breadcrumb {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--c-ink-3);
}
.breadcrumb li { display: inline; }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; color: var(--c-line-2); }
.breadcrumb a { color: var(--c-sage); }
.breadcrumb .is-current { color: var(--c-ink-2); }

/* ============================================================
   文章详情 —— 书页正文，居中收窄
   ============================================================ */
.article-detail {
  padding: 34px 40px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
}
.article-detail__title {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.42;
  color: var(--c-ink);
  letter-spacing: .5px;
}
.article-detail__oneline {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--c-accent);
  background: var(--c-paper);
  border-radius: 4px;
  color: var(--c-accent-deep);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.8;
}
.article-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: 12.5px;
}
.article-detail__meta a { color: var(--c-sage); font-weight: 500; }
.article-detail__cover { margin-bottom: 22px; }
.article-detail__cover img { width: 100%; border-radius: 10px; display: block; box-shadow: var(--shadow-sm); }

/* 正文 —— 排版细节 */
.article-content {
  font-size: 16px;
  line-height: 1.98;
  word-wrap: break-word;
  color: #3a362f;
}
.article-content > :first-child { margin-top: 0; }
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--font-serif);
  margin: 30px 0 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-ink);
}
.article-content h1 { font-size: 24px; }
.article-content h2 { font-size: 21px; }
.article-content h3 { font-size: 18px; }
.article-content h4 { font-size: 16px; }
.article-content p { margin: 0 0 18px; }
.article-content a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.article-content img { border-radius: 10px; margin: 10px 0; box-shadow: var(--shadow-sm); }
.article-content ul,
.article-content ol { margin: 0 0 18px; padding-left: 26px; }
.article-content li { margin-bottom: 8px; }
.article-content li::marker { color: var(--c-accent-deep); }
.article-content blockquote {
  margin: 22px 0;
  padding: 14px 22px;
  border-left: 3px solid var(--c-gold);
  background: var(--c-paper);
  color: var(--c-ink-2);
  border-radius: 4px;
  font-family: var(--font-serif);
  font-size: 15px;
}
.article-content pre {
  margin: 22px 0;
  padding: 18px;
  overflow-x: auto;
  border-radius: 10px;
  background: #2b2a27;
  color: #e9e6e0;
  font-size: 13px;
  line-height: 1.7;
}
.article-content code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: .9em;
  color: var(--c-accent-deep);
}
.article-content pre code { padding: 0; background: transparent; border: none; color: inherit; font-size: 13px; }
.article-content table {
  width: 100%;
  margin: 22px 0;
  border-collapse: collapse;
  font-size: 14px;
}
.article-content th,
.article-content td { padding: 10px 12px; border: 1px solid var(--c-line); }
.article-content th { background: var(--c-paper-warm); font-weight: 600; font-family: var(--font-serif); }

/* ============================================================
   分页 —— 水墨页码
   ============================================================ */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 34px 0 6px;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 6px 12px;
  border: 1px solid var(--c-line-2);
  border-radius: 8px;
  background: var(--c-card);
  color: var(--c-ink-2);
  font-size: 13.5px;
  font-family: Georgia, var(--font-serif);
  transition: all .18s ease;
}
.pagination a:hover {
  border-color: var(--c-brand);
  color: var(--c-brand-deep);
  transform: translateY(-1px);
}
.pagination .is-current {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(74,111,165,.26);
}
.pagination .is-disabled { color: var(--c-ink-3); background: var(--c-paper); cursor: default; }

/* ============================================================
   空态 / 404 —— 印章 + 水墨大字
   ============================================================ */
.empty-state,
.page-404 {
  padding: 60px 24px;
  background: var(--c-card);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--radius-lg);
  text-align: center;
}
.empty-state p { margin: 0; color: var(--c-ink-3); }
.empty-state a { color: var(--c-brand); }
.page-404 {
  border: none;
  box-shadow: var(--shadow-base);
}
.page-404 .seal { margin: 0 auto 20px; transform: rotate(-6deg); }
.page-404 h1 {
  margin: 0 0 8px;
  font-family: Georgia, var(--font-serif);
  font-size: 76px;
  line-height: 1;
  color: var(--c-brand);
  letter-spacing: 2px;
}
.page-404 h2 { margin: 0 0 12px; font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--c-ink); }
.page-404 p { margin: 0 0 22px; color: var(--c-ink-2); }

/* ============================================================
   静态页正文（关于）
   ============================================================ */
.page-body {
  padding: 34px 40px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
}
.page-body h1 {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-ink);
}
.page-body h2 {
  margin: 28px 0 12px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink);
}
.page-body h2::before { content: "「"; color: var(--c-accent-deep); }
.page-body h2::after { content: "」"; color: var(--c-accent-deep); }
.page-body p { margin: 0 0 16px; color: var(--c-ink-2); line-height: 1.9; }
.page-body strong { color: var(--c-ink); }
.page-body ul { margin: 0 0 16px; padding-left: 24px; }
.page-body li { margin-bottom: 8px; color: var(--c-ink-2); line-height: 1.8; }
.page-body li::marker { color: var(--c-accent-deep); }
.page-body a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   搜索页
   ============================================================ */
.search-head { margin-bottom: 20px; }
.search-head h1 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
  color: var(--c-ink);
}
.search-head p { margin: 0; color: var(--c-ink-3); font-size: 13.5px; }
.search-form { display: flex; gap: 10px; margin-bottom: 20px; }
.search-form input[type="search"] {
  flex: 1 1 auto;
  padding: 11px 16px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: var(--c-card);
  font-size: 14.5px;
  color: var(--c-ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-form input[type="search"]:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,111,165,.12); }

/* ============================================================
   页脚 —— 墨底鎏金
   ============================================================ */
.site-footer {
  padding: 30px 0;
  background: #26242f;
  color: #9a96a3;
  font-size: 13px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 3px;
  color: #e9e6e0;
}
.site-footer__brand .dot { color: var(--c-gold); }
.site-footer a { color: #b9b5c0; }
.site-footer a:hover { color: var(--c-gold); }

/* ============================================================
   进入动画（尊重 reduced-motion）
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header,
.site-nav,
.article-card,
.widget,
.article-detail,
.page-body,
.hero { animation: rise .5s var(--ease-out) both; }
.site-nav { animation-delay: .08s; }
.article-card { animation-delay: .05s; }
.widget { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-nav, .article-card, .widget,
  .article-detail, .page-body, .hero { animation: none; }
}

/* ============================================================
   响应式
   ============================================================ */
/* ============================================================
   职业技能等级证书数据中心（职业库 / 证书库 / 机构库）
   ============================================================ */
.site-nav__divider {
  width: 1px; height: 18px; align-self: center;
  background: var(--c-line-2);
}

/* 按钮变体 */
.btn--ghost {
  border-color: var(--c-line-2);
  background: transparent;
  color: var(--c-ink-2);
}
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand-deep); background: transparent; box-shadow: none; }
.btn--sm { padding: 6px 14px; font-size: 13px; }

/* 专题首页 Hero */
.certlib-hero {
  margin: 20px 0 36px;
  padding: 40px 42px;
  border-radius: var(--radius-lg);
  background: var(--c-brand-deep);
  color: #fff;
  box-shadow: var(--shadow-base);
  position: relative;
  overflow: hidden;
}
.certlib-hero::before,
.certlib-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: .16;
  background: var(--c-accent);
}
.certlib-hero::before { width: 220px; height: 220px; right: -60px; top: -70px; }
.certlib-hero::after { width: 150px; height: 150px; right: 120px; bottom: -80px; background: var(--c-gold); }
.certlib-hero__body { position: relative; z-index: 1; max-width: 720px; }
.certlib-hero__kicker {
  display: inline-block; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 3px;
  color: var(--c-gold); text-transform: uppercase;
}
.certlib-hero__title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 30px; font-weight: 700; line-height: 1.4;
  letter-spacing: 1px;
}
.certlib-hero__lead { margin: 0 0 24px; color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.8; }
.certlib-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.certlib-hero .btn--seal { border-color: var(--c-accent); background: var(--c-accent); color: #fff; box-shadow: var(--shadow-accent); }
.certlib-hero .btn--seal:hover { background: var(--c-accent-deep); }
.certlib-hero .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.certlib-hero .btn--ghost:hover { border-color: #fff; color: #fff; }

/* hero 右侧小程序二维码 */
.certlib-hero { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.certlib-hero__body { flex: 1 1 auto; }
.certlib-hero__qr {
  flex: 0 0 auto; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-accent);
}
.certlib-hero__qr-img { display: block; width: 160px; height: 160px; border-radius: 8px; }
.certlib-hero__qr-tip { margin: 0; font-size: 12px; color: #5a6a84; }
@media (max-width: 760px) {
  .certlib-hero { flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 24px; }
  .certlib-hero__qr { align-self: flex-start; padding: 10px 12px; }
  .certlib-hero__qr-img { width: 132px; height: 132px; }
}

/* 学考赋分证书查询页 */
.kaoji-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
  margin: 20px 0 36px; padding: 36px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand));
  color: #fff; box-shadow: var(--shadow-base); position: relative; overflow: hidden;
}
.kaoji-hero .certlib-hero__body { flex: 1 1 auto; }
.kaoji-hero .certlib-hero__qr { box-shadow: var(--shadow-sm); }
.kaoji-hero__kicker {
  display: inline-block; margin-bottom: 10px;
  font-size: 12.5px; letter-spacing: 1px; color: rgba(255,255,255,.72);
}
.kaoji-hero__title { margin: 0 0 10px; font-size: 30px; color: #fff; }
.kaoji-hero__lead { margin: 0; max-width: 720px; color: rgba(255,255,255,.84); line-height: 1.8; }

.kaoji-picker { margin-bottom: 14px; }
.kaoji-select {
  padding: 11px 14px; width: min(100%, 420px);
  font-size: 15px; color: var(--c-ink); background: var(--c-card);
  border: 1px solid var(--c-line-2); border-radius: 10px;
}
.kaoji-select:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,111,165,.14); }

.kaoji-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 6px; }
.kaoji-summary__item {
  padding: 6px 12px; font-size: 12.5px; color: var(--c-ink-3);
  background: var(--c-paper-warm); border: 1px solid var(--c-line); border-radius: 999px;
}
.kaoji-summary__item b { color: var(--c-brand-deep); }

.kaoji-result { margin-top: 8px; }
.kaoji-block { padding: 22px 24px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); }
.kaoji-block__title { margin: 0 0 6px; font-size: 16px; color: var(--c-ink); }
.kaoji-block__desc { margin: 0 0 14px; font-size: 12.5px; color: var(--c-ink-3); }
.kaoji-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kaoji-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; font-size: 12.5px; color: var(--c-ink-2);
  background: var(--c-paper-warm); border: 1px solid var(--c-line-2); border-radius: 7px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.kaoji-chip:hover { color: var(--c-brand-deep); border-color: var(--c-brand); background: rgba(74,111,165,.05); }
.kaoji-chip--skill {
  color: var(--c-brand-deep); border-style: dashed;
}
.kaoji-chip--skill:hover { background: rgba(74,111,165,.08); border-color: var(--c-brand-deep); }
.kaoji-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.kaoji-empty { margin: 0; font-size: 13px; color: var(--c-ink-4); }

/* kaoji 证书轻量详情页 */
.kaoji-cert-detail { margin: 18px 0 28px; padding: 30px 34px; background: var(--c-card);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.kaoji-cert-detail .section__title { margin: 0 0 4px; }
@media (max-width: 820px) {
  .kaoji-hero { flex-direction: column; align-items: flex-start; gap: 22px; padding: 28px 22px; }
  .kaoji-hero .certlib-hero__qr { align-self: flex-start; padding: 10px 12px; }
  .kaoji-hero .certlib-hero__qr-img { width: 132px; height: 132px; }
  .kaoji-hero__title { font-size: 24px; }
  .kaoji-split { grid-template-columns: 1fr; margin-top: 16px; }
}
.certlib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.certlib-card {
  display: flex; flex-direction: column;
  padding: 24px 22px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .22s ease;
}
.certlib-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-base); border-color: var(--c-line-2); }
.certlib-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border: 2px solid var(--c-seal); border-radius: 8px;
  color: var(--c-seal); font-family: var(--font-serif); font-size: 20px; font-weight: 700;
}
.certlib-card:nth-child(2) .certlib-card__ico { color: var(--c-brand); border-color: var(--c-brand); }
.certlib-card:nth-child(3) .certlib-card__ico { color: var(--c-sage); border-color: var(--c-sage); }
.certlib-card__title { margin: 0 0 8px; font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--c-ink); }
.certlib-card__desc { margin: 0 0 14px; color: var(--c-ink-2); font-size: 13.5px; line-height: 1.7; }
.certlib-card__go { margin-top: auto; color: var(--c-accent-deep); font-size: 13px; font-weight: 600; }

/* 热门地区 */
.certlib-regions { display: flex; flex-wrap: wrap; gap: 10px; }
.certlib-region {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: var(--c-card);
  color: var(--c-ink-2); font-size: 13.5px;
  transition: all .18s ease;
}
.certlib-region span { color: var(--c-ink-3); font-size: 12px; }
.certlib-region:hover { border-color: var(--c-brand); color: var(--c-brand-deep); transform: translateY(-1px); }
.certlib-region--nat {
  position: relative;
  background: var(--c-brand-deep); border-color: var(--c-brand-deep);
  color: #fff;
}
.certlib-region--nat span { color: rgba(255,255,255,.82); }
.certlib-region--nat:hover { color: #fff; background: var(--c-brand); border-color: var(--c-brand); }

/* 人社部备案入口的 hover 提示：说明其为国家级备案机构 */
.certlib-region--nat::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-2px);
  width: max-content; max-width: 300px; box-sizing: border-box;
  padding: 7px 12px; border-radius: 8px;
  background: var(--c-ink-2); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.6; text-align: center;
  box-shadow: var(--shadow-base); z-index: 60;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  pointer-events: none;
}
.certlib-region--nat::before {
  content: ""; position: absolute; top: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--c-ink-2);
  z-index: 60; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.certlib-region--nat:is(:hover, :focus-visible)::after,
.certlib-region--nat:is(:hover, :focus-visible)::before {
  opacity: 1; visibility: visible;
}
.certlib-region--nat:is(:hover, :focus-visible)::after {
  transform: translateX(-50%) translateY(0);
}

/* 列表通用（职业 / 证书） */
.lib-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lib-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 16px 18px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.lib-row--link { padding: 0; }
.lib-row--link:hover { box-shadow: var(--shadow-base); }
.lib-row__link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; width: 100%; padding: 16px 18px; color: inherit; }
.lib-row--link:hover { border-color: var(--c-line-2); }
.lib-row__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lib-row__code {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: 6px;
  background: var(--c-paper-warm); border: 1px solid var(--c-line);
  color: var(--c-ink-3); font-family: Georgia, var(--font-serif); font-size: 12.5px;
}
.lib-row__name { font-size: 15.5px; font-weight: 600; color: var(--c-ink); }
.lib-row__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-row__levels { color: var(--c-ink-3); font-size: 12.5px; }

/* 筛选 */
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filter-bar__label { color: var(--c-ink-3); font-size: 13px; }
.filter-card {
  margin: 0 0 22px; padding: 18px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.filter-card__grid { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.filter-card__field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 1 1 200px; }
.filter-card__field span { color: var(--c-ink-3); font-size: 12.5px; }
.filter-card select,
.filter-card input[type="text"] {
  padding: 9px 12px;
  border: 1px solid var(--c-line-2); border-radius: 8px;
  background: var(--c-card-warm); color: var(--c-ink); font-size: 14px;
  outline: none;
}
.filter-card select:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,111,165,.12); }
.filter-card__action { display: flex; gap: 8px; }

/* 机构列表 / 详情 */
.inst-list { display: flex; flex-direction: column; gap: 14px; }
.inst-card {
  padding: 18px 20px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.inst-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-base); }
.inst-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.inst-card__name { font-size: 16px; font-weight: 600; color: var(--c-ink); }
.inst-card__name:hover { color: var(--c-brand-deep); }
.inst-card__region { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.inst-card__meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--c-ink-3); font-size: 12.5px; line-height: 1.7; }
.inst-card__more { display: inline-block; margin-top: 10px; color: var(--c-accent-deep); font-size: 13px; font-weight: 600; }

.chip {
  display: inline-block; padding: 2px 10px;
  border-radius: 999px;
  background: var(--c-paper-warm); border: 1px solid var(--c-line);
  color: var(--c-ink-2); font-size: 12px; white-space: nowrap;
}
.chip--brand { background: rgba(74,111,165,.08); border-color: rgba(74,111,165,.25); color: var(--c-brand-deep); }
.chip--link { background: transparent; border-color: var(--c-line-2); color: var(--c-ink-2); cursor: pointer; }
.chip--link:hover { border-color: var(--c-brand); color: var(--c-brand-deep); }
.chip.is-active { border-color: var(--c-brand); background: var(--c-brand); color: #fff; }

/* 证书详情页 */
.cert-detail { margin-bottom: 8px; }

.cert-detail__meta { margin: 4px 0 14px; }
.cert-detail__code { font-size: 13px; color: var(--c-ink-3); }
.cert-detail__code code {
  margin-left: 6px; padding: 1px 8px;
  font-family: inherit; font-size: 12px; letter-spacing: .3px;
  color: var(--c-brand-deep); background: var(--c-paper-warm);
  border: 1px solid var(--c-line); border-radius: 6px;
}

.cert-levellist { margin: 0 0 22px; }
.cert-levellist__label {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: var(--c-ink-3);
}
.cert-levellist__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cert-level {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--c-line-2); border-radius: 999px;
  background: var(--c-card);
  color: var(--c-ink-2); font-size: 13px;
  transition: all .18s ease;
}
.cert-level span { font-size: 11px; color: var(--c-brand); }
.cert-level:hover {
  border-color: var(--c-brand); color: var(--c-brand-deep);
  box-shadow: var(--shadow-base);
}
.cert-level--current {
  border-color: var(--c-brand); background: var(--c-brand-deep); color: #fff;
}
.cert-detail__lead { color: var(--c-ink-2); font-size: 14.5px; line-height: 1.8; margin: 0 0 20px; }
.cert-detail__lead strong { color: var(--c-brand-deep); }

/* 机构详情页 */
.inst-detail {
  padding: 26px 28px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-base);
}
.inst-detail__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.inst-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 28px; margin: 0; }
.inst-detail__grid div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--c-paper); border-radius: 8px; border: 1px solid var(--c-line); }
.inst-detail__grid dt { color: var(--c-ink-3); font-size: 12px; }
.inst-detail__grid dd { margin: 0; color: var(--c-ink); font-size: 13.5px; word-break: break-all; }

/* 机构支持证书标签 */
.cert-tag-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cert-tag {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 10px 14px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 10px; box-shadow: var(--shadow-sm);
  color: var(--c-ink-2);
  transition: all .18s ease;
}
.cert-tag:hover { border-color: var(--c-brand); box-shadow: var(--shadow-base); transform: translateY(-1px); }
.cert-tag__name { font-size: 13.5px; font-weight: 600; color: var(--c-ink); }
.cert-tag__levels { font-size: 12px; color: var(--c-sage); }

/* 可受理证书栏目：标题上方留白 + 关键词筛选 */
.cert-section { margin-top: 48px; padding-top: 8px; }
.cert-section .section__head { margin-bottom: 22px; }
.cert-filter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px; padding: 12px 2px 14px;
  border-bottom: 1px dashed var(--c-line);
}
.cert-filter__search { flex: 0 1 340px; min-width: 0; }
.cert-filter__input {
  width: 100%; padding: 9px 16px;
  border: 1px solid var(--c-line-2); border-radius: 999px;
  background: var(--c-card-warm); color: var(--c-ink); font-size: 14px;
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.cert-filter__input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,111,165,.12); }
.cert-filter__input::placeholder { color: var(--c-ink-3); }
.cert-filter__count { font-size: 12.5px; color: var(--c-ink-3); white-space: nowrap; }
.cert-tag-item { transition: opacity .18s ease; }
.cert-filter__empty {
  padding: 28px 16px; text-align: center;
  color: var(--c-ink-3); font-size: 13.5px;
  border: 1px dashed var(--c-line-2); border-radius: var(--radius);
  background: var(--c-paper-warm);
}

/* ============================================================
   证书数据中心页数据概览 —— KPI 条 + 横向条形图卡片
   ============================================================ */
.viz-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin: 4px 0 8px;
}
.viz-kpi__item {
  padding: 22px 20px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--c-accent);
}
.viz-kpi__num {
  display: block; font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--c-ink);
  letter-spacing: 1px;
}
.viz-kpi__label { display: block; margin-top: 4px; font-size: 12.5px; color: var(--c-ink-3); }

.viz-lead { margin: -6px 0 20px; max-width: 720px; color: var(--c-ink-2); font-size: 13.5px; line-height: 1.8; }

.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.viz-card {
  padding: 22px 24px 20px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.viz-card--wide { grid-column: 1 / -1; }
.viz-card__title {
  margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--c-ink);
  letter-spacing: .5px;
}
.viz-card__note {
  margin: 0 0 16px; font-size: 12.5px; color: var(--c-ink-3); line-height: 1.7;
}
.viz-empty { margin: 0; padding: 12px 0; color: var(--c-ink-3); font-size: 13px; }

/* 横向条形：直标签 + 常显数值 + 底部圆角色条 */
.viz-bars { display: flex; flex-direction: column; gap: 12px; }
.hbar-row { min-width: 0; }
.hbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.hbar-label {
  font-size: 13.5px; font-weight: 600; color: var(--c-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
a.hbar-label:hover { color: var(--c-brand-deep); }
.hbar-sub { font-size: 12px; font-weight: 500; color: var(--c-ink-3); flex-shrink: 0; }
.hbar-value {
  font-size: 13px; font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.hbar-track { height: 8px; border-radius: 999px; background: var(--c-paper-warm); border: 1px solid var(--c-line); overflow: hidden; }
.hbar-bar {
  height: 100%; min-width: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-brand), var(--c-accent));
}
/* 宽卡片的省级排名：两列排布，窄屏回退单列 */
.viz-bars--half { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }

@media (max-width: 940px) {
  .certlib-grid { grid-template-columns: 1fr; }
  .viz-kpi { grid-template-columns: repeat(2, 1fr); }
  .layout { flex-direction: column; }
  .layout__aside { flex: 1 1 auto; width: 100%; }
  .hero__grid { flex-direction: column; }
  .hero__art { flex: 1 1 auto; min-height: 200px; width: 100%; }
  .hero__art::after { background: linear-gradient(0deg, rgba(253,252,250,.4) 0%, transparent 40%); }
  .hero__body { padding: 26px; }
  /* QR 二维码在窄屏堆叠在正文下方，去掉左侧分隔线 */
  .hero__qr { flex-direction: row; gap: 14px; padding: 20px 26px 24px; border-left: none; border-top: 1px solid var(--c-line); justify-content: flex-start; }
  .hero__qr-img { width: 100px; height: 100px; }
  .hero__qr-tip { margin: 0; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .container { padding: 0 14px; }
  .viz-kpi { grid-template-columns: repeat(2, 1fr); }
  .viz-grid { grid-template-columns: 1fr; }
  .viz-bars--half { grid-template-columns: 1fr; }
  .viz-card--wide { grid-column: auto; }
  .viz-card { padding: 18px 16px; }
  .viz-card__note { font-size: 12px; }
  .site-header__bar { flex-wrap: wrap; gap: 12px; }
  .site-search { order: 3; width: 100%; }
  .site-search input[type="search"] { flex: 1 1 auto; width: auto; }
  .article-card { flex-direction: column; gap: 14px; }
  .article-card__cover { flex: 1 1 auto; width: 100%; height: 200px; }
  .article-detail { padding: 20px; }
  .article-detail__title { font-size: 23px; }
  .hero__title { font-size: 24px; }
  .article-content { font-size: 15px; }
  .page-body { padding: 22px; }
  .seal { width: 40px; height: 40px; flex-basis: 40px; font-size: 18px; }
}