:root {
    --bg: #f6f5f1;
    --card-bg: #ffffff;
    --text: #26342f;
    --gold: #b58a45;
    --gold-dark: #7c5a2f;
    --gold-light: #edf4ef;
    --gold-soft: #fbfaf7;
    --jade: #2f6f62;
    --jade-dark: #214d45;
    --cinnabar: #a85d49;
    --hover-shadow: 0 14px 30px rgba(36, 50, 46, 0.11);
    --radius: 16px;
    --radius-sm: 10px;
    --border-subtle: #d9dfd7;
    --text-muted: #65746d;
    --tag-bg: #eef4f1;
    --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', '华文楷体', 'KaiTi', serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.header {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 14px;
    flex-wrap: nowrap;
    position: relative;
}
.logo { font-size: 28px; font-weight: bold; letter-spacing: 4px; flex-shrink: 0; white-space: nowrap; }
.logo span { color: var(--jade); }
.main-nav {
    display: flex;
    gap: 3px;
    list-style: none;
    margin: 0;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav li { flex-shrink: 0; }
.main-nav li a {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 22px;
    color: var(--text);
    transition: all var(--transition);
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.main-nav li a:hover,
.main-nav li a.active { color: var(--jade); background: var(--gold-light); }
.main-nav li a.active { background: var(--jade); color: #fff; }

/* ---------- 导航悬浮子菜单 ---------- */
.main-nav li.has-sub { position: relative; }
.nav-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.55;
    transition: transform var(--transition);
}
.main-nav li.with-children:hover .nav-caret { transform: rotate(180deg); }
.sub-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 132px;
    display: block;
    list-style: none;
    margin: 0;
    padding: 8px 6px;
    background: #fff;
    border: 1px solid #e6dccd;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(60, 40, 20, 0.13);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 60;
}
.main-nav li.with-children:hover .sub-nav,
.main-nav li.with-children:focus-within .sub-nav {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.sub-nav li { flex-shrink: 0; }
.sub-nav li a {
    display: block;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    background: none;
}
.sub-nav li a:hover,
.sub-nav li a.active { background: var(--gold-light); color: var(--jade); }
.sub-nav li a.active { font-weight: 700; }

.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d4c5b2;
    border-radius: 30px;
    padding: 5px 14px;
    width: 190px;
    transition: all var(--transition);
    flex-shrink: 0;
    margin-left: auto;
}
.search-box:focus-within { border-color: var(--jade); box-shadow: 0 0 0 3px rgba(47,111,98,.16); width: 240px; }
/* ---------- 顶部快捷入口 ---------- */
.header-util { display: flex; align-items: center; gap: 14px; flex-shrink: 0; font-size: 13px; }
.header-util a { color: var(--text-muted); transition: color var(--transition); }
.header-util a:hover { color: var(--jade); }


.search-box input {
    border: none;
    outline: none;
    background: transparent;
    padding: 7px 0;
    flex: 1;
    font-size: 13px;
    font-family: inherit;
    min-width: 0;
    color: var(--text);
}
.search-box input::placeholder { color: #b8a895; }
.search-box button { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--jade); padding: 0 0 0 6px; flex-shrink: 0; }
.search-box button::before { content: '搜'; }

.hero-swiper {
    margin: 24px 0 16px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--hover-shadow);
    position: relative;
}
.hero-swiper .swiper-wrapper { position: relative; height: 360px; }
.hero-swiper .swiper-slide {
    background-size: cover;
    background-position: center;
    height: 360px;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    overflow: hidden;
}
/* 轮播图改用真实 <img>（原先用 CSS background，LCP 发现太晚）。
   让它铺满 slide 并居中裁切，视觉效果与 background:cover 一致。 */
.hero-swiper .swiper-slide .slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.hero-swiper:not(.is-ready) .swiper-slide:first-child,
.hero-swiper.is-ready .swiper-slide.is-active { opacity: 1; pointer-events: auto; }
/* 渐变遮罩要压在图片之上（图片 z-index:0），否则文字会看不清 */
.hero-swiper .swiper-slide::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 34%, rgba(20,32,29,.82)); }
.slide-caption { position: relative; z-index: 2; color: #fff; max-width: 540px; }
.slide-caption .slide-tag {
    display: inline-block;
    background: var(--jade);
    color: #fff;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 600;
}
/* 轮播主标题：原为 h2，为避免「H2 早于 H1」改成 p.slide-title。
   p 不会继承标题默认字号，所以字号必须在这里显式声明。 */
.slide-caption .slide-title { font-size: 30px; line-height: 1.32; margin-bottom: 8px; text-shadow: 2px 2px 12px rgba(0,0,0,.55); letter-spacing: 1px; font-weight: 700; }
.slide-caption p { font-size: 15px; line-height: 1.6; opacity: .9; letter-spacing: .5px; }
.swiper-pagination { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.swiper-pagination-bullet { background: #fff; opacity: .6; width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative; }
/* 圆点视觉仍是 10px，但把可点区域撑到 36px，触屏才点得中 */
.swiper-pagination-bullet::before { content: ""; position: absolute; inset: -13px; }
.swiper-pagination-bullet-active { background: var(--gold); opacity: 1; }
.swiper-button-prev,
.swiper-button-next { position: absolute; top: 50%; z-index: 3; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: rgba(0,0,0,.28); cursor: pointer; }
.swiper-button-prev { left: 14px; }
.swiper-button-next { right: 14px; }

/* 轮播暂停按钮：WCAG 2.2.2 要求自动更新的内容可暂停。
   放在右下角，避免与左右箭头和圆点冲突。 */
.swiper-pause {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 4;
    min-width: 44px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    background: rgba(0,0,0,.38);
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    line-height: 32px;
    cursor: pointer;
    transition: background var(--transition);
}
.swiper-pause:hover { background: rgba(0,0,0,.58); }
.swiper-pause:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* 系统开启「减少动态效果」时，取消轮播的淡入过渡。
   自动播放本身由 main.js 停掉，这里只处理视觉动画。 */
@media (prefers-reduced-motion: reduce) {
    .hero-swiper .swiper-slide { transition: none; }
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.swiper-button-prev::before,
.swiper-button-next::before { content: ''; position: absolute; top: 12px; width: 12px; height: 12px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.swiper-button-prev::before { left: 15px; transform: rotate(-45deg); }
.swiper-button-next::before { right: 15px; transform: rotate(135deg); }

.section-title {
    font-size: 23px;
    margin: 34px 0 14px;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    font-weight: 700;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, #b8c8bf, transparent); margin-left: 18px; }
.section-title .title-link { font-size: 13px; font-weight: 500; color: var(--jade); margin-left: 12px; letter-spacing: 0; white-space: nowrap; }
.section-title .title-link:hover { color: var(--jade-dark); text-decoration: underline; }

/* ---------- 首页「今日赏鉴」：左图卡 + 右信息栏 ---------- */
.section-title .title-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: .5px; margin-left: 10px; }
.showcase-layout { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.showcase-card {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background: #ece7de;
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 14px rgba(36,50,46,.07);
    transition: all var(--transition);
}
.showcase-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.showcase-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(22,32,28,.82) 0%, rgba(22,32,28,.30) 42%, rgba(22,32,28,0) 72%);
}
.showcase-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-3px); }
.showcase-card:hover img { transform: scale(1.06); }
.sc-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(255,255,255,.94);
    color: var(--jade-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 4px 11px;
    border-radius: 20px;
}
.sc-lead {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.showcase-side { display: flex; flex-direction: column; gap: 16px; }
.side-block { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: 0 3px 12px rgba(36,50,46,.045); }
.side-title { font-size: 14px; font-weight: 700; letter-spacing: .6px; margin-bottom: 10px; padding-left: 9px; position: relative; }
.side-title::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--cinnabar); }
.rate-list { list-style: none; display: flex; flex-direction: column; }
.rate-list li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #eceff0; font-size: 13px; }
.rate-list li:last-child { border-bottom: none; }
.rate-name { color: var(--text-muted); flex-shrink: 0; }
.rate-price { margin-left: auto; font-weight: 700; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.rate-price small { font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 2px; }
.rate-change { font-size: 11px; font-weight: 700; flex-shrink: 0; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.rate-change.up { color: #c0392b; }
.rate-change.down { color: #2f8f5b; }
.rate-change.flat { color: #9aa5a0; }
.rate-note { font-size: 11px; color: #68726d; margin-top: 9px; line-height: 1.5; }
.rate-note a { color: var(--jade); text-decoration: underline; }
.rate-disclaimer { font-size: 10px; color: #657069; margin-top: 5px; line-height: 1.5; padding-top: 6px; border-top: 1px dashed #f0f2f1; }
.rate-empty { font-size: 12px; color: var(--text-muted); padding: 12px 0; text-align: center; }
.read-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.read-list li a { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 9px; transition: all var(--transition); }
.read-list li a:hover { background: var(--gold-light); }
.rl-thumb { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: #ece7de; }
.rl-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rl-title { font-size: 13px; line-height: 1.4; color: var(--text); }
.read-list li a:hover .rl-title { color: var(--jade-dark); }
.rl-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-muted); }
.rl-cat { display: inline-block; font-size: 10px; font-weight: 700; color: var(--jade); background: var(--tag-bg); border-radius: 4px; padding: 1px 6px; }

.featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.item-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
    transition: all var(--transition);
    display: block;
    position: relative;
}
.item-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-5px); }
.item-card .img-wrap { overflow: hidden; position: relative; height: 180px; }
.item-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.item-card:hover .img-wrap img { transform: scale(1.08); }
.card-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(29,64,57,.72);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 14px;
    z-index: 2;
    letter-spacing: .5px;
    backdrop-filter: blur(4px);
}
.item-info { padding: 16px 18px 18px; }
.item-info h4 { font-size: 16px; margin-bottom: 6px; font-weight: 600; letter-spacing: .3px; line-height: 1.4; }
.item-meta { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 13px; margin-bottom: 6px; gap: 8px; }
.price-text { color: var(--cinnabar); font-weight: 700; }
.item-tag { display: inline-block; background: var(--tag-bg); color: var(--jade); padding: 3px 10px; border-radius: 20px; font-size: 11px; letter-spacing: .5px; }

.category-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-guide-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 20px 18px 18px;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
    transition: all var(--transition);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    min-height: 140px;
}
.cat-guide-card:hover { border-color: var(--jade); box-shadow: var(--hover-shadow); transform: translateY(-3px); }

.cat-guide-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-shrink: 0; }
.cat-guide-icon { font-size: 30px; flex-shrink: 0; line-height: 1; color: var(--jade); }
.cat-guide-name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.cat-guide-count { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: auto; white-space: nowrap; background: var(--tag-bg); padding: 2px 10px; border-radius: 12px; }
.cat-sub-tags { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; align-content: flex-start; }
.cat-sub-tag {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 16px;
    background: var(--gold-soft);
    color: #6b5a44;
    transition: all var(--transition);
    white-space: nowrap;
    letter-spacing: .3px;
    border: 1px solid transparent;
    line-height: 1.35;
}
.cat-sub-tag:hover { background: var(--gold-light); color: var(--jade-dark); border-color: var(--jade); transform: translateY(-1px); }
.cat-guide-footer { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d9dfd7; font-size: 11px; color: var(--jade); flex-shrink: 0; letter-spacing: .5px; display: flex; align-items: center; gap: 4px; }
/* 带背景图的分类卡：文字压在图上，需保证可读性 */
.cat-guide-card.has-cover { position: relative; overflow: hidden; background: #222c28; border-color: transparent; padding: 0; min-height: 200px; }
.cat-guide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity var(--transition); }
.cat-guide-card.has-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(20,30,26,.72) 0%, rgba(20,30,26,.86) 100%); }
.cat-guide-card.has-cover:hover .cat-guide-bg { transform: scale(1.07); opacity: .68; }
.cat-guide-body { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 20px 18px 18px; }
.cat-guide-card.has-cover .cat-guide-icon { color: var(--gold); }
.cat-guide-card.has-cover .cat-guide-name { color: #fff; }
.cat-guide-card.has-cover .cat-guide-count { background: rgba(255,255,255,.16); color: rgba(255,255,255,.88); }
.cat-guide-card.has-cover .cat-sub-tag { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.92); }
.cat-guide-card.has-cover .cat-sub-tag:hover { background: var(--jade); border-color: var(--jade); color: #fff; }
.cat-guide-card.has-cover .cat-guide-footer { color: var(--gold); }
.cat-guide-card.has-cover .cat-guide-footer:hover { color: #fff; }

.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 8px; }
.article-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px 16px 22px;
    text-align: center;
    transition: all var(--transition);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.article-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--jade); transform: scaleX(0); transform-origin: center; transition: transform var(--transition); border-radius: 0 0 8px 8px; }
.article-card:hover::before { transform: scaleX(1); }
.article-card:hover { border-color: var(--jade); box-shadow: var(--hover-shadow); transform: translateY(-4px); }
.art-icon { font-size: 34px; margin-bottom: 10px; display: block; color: var(--cinnabar); }
.art-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; letter-spacing: .5px; }
.art-desc { font-size: 12px; color: var(--text-muted); letter-spacing: .3px; margin-bottom: 10px; }
.art-scope { font-size: 10px; color: #726b5d; background: var(--gold-soft); padding: 3px 10px; border-radius: 12px; letter-spacing: .3px; margin-top: auto; }

.guide-filter-wrap { display: flex; align-items: center; gap: 12px; margin: -2px 0 18px; padding: 12px 14px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.guide-filter { display: flex; flex-wrap: wrap; gap: 9px; min-width: 0; }
.guide-filter a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: 18px; background: var(--gold-soft); border: 1px solid var(--border-subtle); color: #6b5a44; font-size: 13px; font-weight: 600; white-space: nowrap; }
.guide-filter a:hover,
.guide-filter a.active { background: var(--jade); border-color: var(--jade); color: #fff; box-shadow: 0 6px 14px rgba(47,111,98,.22); }
.empty-state { background: #fff; border: 1px dashed var(--border-subtle); border-radius: var(--radius-sm); padding: 18px; color: var(--text-muted); font-size: 14px; }

/* ── 搜索结果页 ────────────────────────────────────── */
.search-count { font-size: 13.5px; color: var(--text-muted); margin: -6px 0 16px; }
.search-count strong { color: var(--jade-dark); font-size: 15px; }
.search-empty { background: #fff; border: 1px dashed var(--border-subtle); border-radius: var(--radius-sm); padding: 22px; color: var(--text); font-size: 14px; line-height: 1.9; }
.search-empty p { margin: 0 0 10px; }
.search-suggest { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 14px; }
.search-suggest a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 20px; background: var(--gold-soft); border: 1px solid var(--border-subtle); color: #6b5a44; font-weight: 600; font-size: 13px; }
.search-suggest a:hover { background: var(--jade); border-color: var(--jade); color: #fff; }
.search-empty-more { color: var(--text-muted); font-size: 13px; margin-bottom: 0 !important; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 24px 0 6px; }
.pagination a,
.pagination span { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 17px; border: 1px solid var(--border-subtle); background: #fff; color: #6b5a44; font-size: 13px; }
.pagination a.active,
.pagination a:hover { background: var(--jade); border-color: var(--jade); color: #fff; }
.pagination a:focus-visible,
.pagination span:focus-visible { outline: 3px solid var(--jade); outline-offset: 2px; }

.article-list-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
.article-main-list { display: flex; flex-direction: column; gap: 14px; }
.article-list-item { background: #fff; border-radius: var(--radius-sm); display: flex; gap: 16px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: all var(--transition); align-items: flex-start; border: 1px solid transparent; }
.article-list-item:hover { box-shadow: var(--hover-shadow); border-color: var(--border-subtle); transform: translateX(3px); }
.al-img { width: 140px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.al-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-cat { font-size: 11px; color: var(--jade); font-weight: 600; letter-spacing: .5px; }
.al-title { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: .3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-desc { font-size: 13px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.al-meta { font-size: 12px; color: #756e60; display: flex; gap: 12px; align-items: center; margin-top: auto; }

.sidebar-panel { background: #fff; border-radius: var(--radius); padding: 20px 18px; box-shadow: 0 3px 10px rgba(0,0,0,.04); position: sticky; top: 20px; align-self: flex-start; }
/* 侧栏标题原为 h4，会造成 h1→h2→h4 跳级，已改用 h2.side-title-h2。
   这里把 h4 一并保留，避免其它仍在用 h4 的地方失去样式。 */
.sidebar-panel h4,
.sidebar-panel .side-title-h2 { font-size: 17px; margin-bottom: 14px; letter-spacing: .5px; padding-bottom: 10px; border-bottom: 2px solid var(--gold-light); }
.hot-article-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f5f0e8; transition: all var(--transition); align-items: center; }
.hot-article-item:last-child { border-bottom: none; }
.hot-article-item:hover { padding-left: 6px; color: var(--jade); }
.hot-rank { font-size: 20px; font-weight: 800; color: #756e60; flex-shrink: 0; width: 28px; text-align: center; }
.hot-rank.top3 { color: var(--cinnabar); }
.hot-info { flex: 1; min-width: 0; }
.hot-title { font-size: 14px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hot-views { font-size: 11px; color: #756e60; margin-top: 3px; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 8px; color: var(--text-muted); font-size: 13px; }
.breadcrumb a { color: var(--jade); }
.page-grid { display: grid; grid-template-columns: 1fr 310px; gap: 22px; align-items: start; }
.article-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.content-panel { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 3px 10px rgba(0,0,0,.04); }
.article-body, .detail-body { font-size: 16px; line-height: 1.6; }
.article-body h1, .article-body h2, .detail-body h1, .detail-body h2 { font-size: 28px; line-height: 1.35; margin-bottom: 10px; }
.article-body h2 {
    position: relative;
    font-size: 19px;
    line-height: 1.45;
    margin: 30px 0 12px;
    padding: 0 0 0 18px;
    color: #2e4f46;
    letter-spacing: .3px;
}
.article-body h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: .58em;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--jade);
    box-shadow: 10px 0 0 rgba(185,155,107,.42);
}
.article-body h2::after { content: none; }
.article-body h3 {
    font-size: 18px;
    line-height: 1.45;
    margin: 22px 0 10px;
    color: var(--text);
}
.detail-main-img { max-width: 300px; width: 300px; height: 300px; object-fit: cover; border-radius: 12px; margin: 0 auto 16px; }
.article-body .meta, .detail-body .meta { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.article-body .meta a, .detail-body .meta a { color: var(--jade); }
.article-body .meta a:hover, .detail-body .meta a:hover { color: var(--jade-dark); text-decoration: underline; }
.article-body p, .detail-body p { margin: 0 0 1em; font-size: 16px; line-height: 1.6; color: #5e4a34; }
.article-body li, .detail-body li { font-size: 16px; line-height: 1.6; margin: 0 0 .5em; color: #5e4a34; }

/* ---------- 正文内容排版体系 ---------- */
/* 目标：让长文有呼吸感。段落间距、列表样式、表格、引用、重点提示统一在这里定义。 */

/* 段落：稍微加大行距与段距，减少大段文字的压迫感 */
.article-body p, .detail-body p { line-height: 1.85; margin: 0 0 1.15em; }

/* 无序列表：去掉浏览器默认圆点，改用主题色方形标记 */
.article-body ul, .detail-body ul {
    list-style: none;
    margin: 0 0 1.3em;
    padding: 0;
}
.article-body ul > li, .detail-body ul > li {
    position: relative;
    padding-left: 20px;
    line-height: 1.8;
    margin: 0 0 .62em;
}
.article-body ul > li::before, .detail-body ul > li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--jade);
    opacity: .75;
}
/* 二级列表：换成空心点，避免层级混乱 */
.article-body ul ul > li::before, .detail-body ul ul > li::before {
    background: transparent;
    border: 1.5px solid var(--gold);
    border-radius: 99px;
    width: 5px; height: 5px;
}

/* 有序列表：用主题色序号，替代默认数字 */
.article-body ol, .detail-body ol {
    list-style: none;
    counter-reset: art-ol;
    margin: 0 0 1.3em;
    padding: 0;
}
.article-body ol > li, .detail-body ol > li {
    position: relative;
    counter-increment: art-ol;
    padding-left: 30px;
    line-height: 1.8;
    margin: 0 0 .62em;
}
.article-body ol > li::before, .detail-body ol > li::before {
    content: counter(art-ol);
    position: absolute;
    left: 0;
    top: .28em;
    width: 20px; height: 20px;
    border-radius: 5px;
    background: var(--gold-soft);
    border: 1px solid var(--border-subtle);
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* 表格：对比类信息的正确载体 */
.article-body table, .detail-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.4em;
    font-size: 14.5px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
}
.article-body thead th, .detail-body thead th {
    background: var(--gold-soft);
    color: var(--text);
    font-weight: 700;
    text-align: left;
    padding: 11px 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.article-body tbody td, .detail-body tbody td {
    padding: 11px 14px;
    line-height: 1.7;
    color: #5e4a34;
    border-bottom: 1px solid #eef2ed;
    vertical-align: top;
}
.article-body tbody tr:last-child td, .detail-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody tr:nth-child(even), .detail-body tbody tr:nth-child(even) { background: #fbfaf7; }

/* 引用/提示块：放结论、提醒、辟谣 */
.article-body blockquote, .detail-body blockquote {
    margin: 0 0 1.4em;
    padding: 13px 18px;
    background: var(--gold-soft);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    color: #5e4a34;
    line-height: 1.8;
}
.article-body blockquote p:last-child, .detail-body blockquote p:last-child { margin-bottom: 0; }

/* 表格横向滚动（窄屏）
   正确做法：外层 .table-scroll 负责滚动，table 自身保持 display:table。
   旧写法用 table{display:block} 让表格自己滚动，会让浏览器无法按内容
   计算列宽（thead/tbody 被强制 display:table 后列宽算法失效），
   在部分浏览器上出现列错位、表头与内容不对齐。此处改为外层包裹。 */
.article-body .table-scroll,
.detail-body .table-scroll {
    margin: 0 0 1.4em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.article-body .table-scroll > table,
.detail-body .table-scroll > table {
    margin-bottom: 0;
    display: table;
    width: 100%;
}
/* 窄屏给一个最小宽度，避免压缩到不可读；由外层容器产生横向滚动 */
@media (max-width: 639px) {
    .article-body .table-scroll > table,
    .detail-body .table-scroll > table { min-width: 520px; }
}
/* 没有外层包裹的旧表格：兜底也能滚动，不再靠改 display */
.article-body > table,
.detail-body > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 639px) {
    .article-body > table > thead,
    .article-body > table > tbody,
    .detail-body > table > thead,
    .detail-body > table > tbody { min-width: 520px; }
}

/* 表格标题：说明这张表在讲什么，同时作为无障碍名称 */
.article-body table caption,
.detail-body table caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .2px;
}
/* 表头单元格：允许换行，长中文表头不再被 nowrap 撑破容器 */
.article-body thead th,
.detail-body thead th { white-space: normal; }

/* 行内加粗：只强调关键词，不整段加粗 */
.article-body strong, .detail-body strong { color: #3f5f55; font-weight: 700; }

/* 正文小节标题：h3 用于问答与子主题，视觉上从属 h2 */
.article-body h3, .detail-body h3 {
    font-size: 17px;
    line-height: 1.5;
    margin: 1.5em 0 .6em;
    color: var(--text);
    font-weight: 700;
}
.article-body h3:first-child, .detail-body h3:first-child { margin-top: 0; }

/* 注：不再输出「参考来源」区块（避免各站同质化），相关样式已移除。 */


.article-inline-image { margin: 18px auto; text-align: center; }
.article-inline-image img { width: 300px; height: 300px; object-fit: cover; border-radius: 12px; margin: 0 auto; box-shadow: 0 8px 18px rgba(36,50,46,.08); }
.related-panel { padding: 22px; }
/* 文章页底部「相关资料」：标题样式与「相关文章」保持一致，
   复用 .related-title，这里只补列表部分。 */
.lib-cross-panel { padding: 22px; margin-top: 18px; }
.lib-cross-panel .related-title { font-size: 20px; line-height: 1.35; margin: 0 0 10px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.lib-cross-panel .related-title::before { content: ''; width: 4px; height: 18px; border-radius: 2px; background: var(--jade); flex-shrink: 0; }
.lib-cross-note { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.lib-cross-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lib-cross-list li { border: 1px solid #e2e8e1; border-radius: 10px; padding: 12px 14px; background: #fff; min-width: 0; }
.lib-cross-list li a { font-weight: 600; color: var(--jade-dark); display: block; margin-bottom: 4px; }
.lib-cross-list li a:hover { color: var(--jade); text-decoration: underline; }
.lib-cross-sum { display: block; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 700px) {
    .lib-cross-list { grid-template-columns: 1fr; }
    .lib-cross-panel { padding: 16px; }
}
.related-panel .related-title { font-size: 20px; line-height: 1.35; margin: 0 0 16px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.related-panel .related-title::before { content: ''; width: 4px; height: 18px; border-radius: 2px; background: var(--jade); flex-shrink: 0; }
.related-panel .related-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; align-items: stretch; }
.related-panel .related-card { display: flex !important; flex-direction: row !important; align-items: center; gap: 13px; min-width: 0; min-height: 132px; border: 1px solid #e2e8e1; border-radius: 10px; padding: 10px; background: #fff; transition: all var(--transition); }
.related-panel .related-card:hover { border-color: rgba(47,111,98,.45); box-shadow: 0 10px 22px rgba(36,50,46,.09); transform: translateY(-2px); }
.related-panel .related-thumb { width: 112px !important; height: 112px !important; object-fit: cover; border-radius: 8px; background: var(--gold-soft); flex: 0 0 112px; }
.related-panel .related-content { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.related-panel .related-card strong { font-size: 15px; line-height: 1.42; font-weight: 700; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-panel .related-card p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.link-list { display: grid; gap: 10px; }
.link-row { display: block; background: var(--gold-soft); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; }
.link-row strong { display: block; margin-bottom: 4px; }
.friend-link-grid { display: flex; flex-wrap: wrap; gap: 10px; background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: 0 3px 10px rgba(0,0,0,.04); }
.friend-link-grid a { padding: 5px 12px; border-radius: 16px; background: var(--gold-soft); color: #6b5a44; font-size: 13px; }

.footer { margin-top: 44px; padding: 24px 0; border-top: 1px solid var(--border-subtle); text-align: center; color: var(--text-muted); font-size: 13px; letter-spacing: .5px; }
.footer a { color: var(--jade); }
.footer a:hover { text-decoration: underline; color: var(--jade-dark); }
.footer-extra { margin-top: 8px; color: var(--text-muted); font-size: 12px; }
.footer-extra a { color: var(--jade); }
.footer-cats { display: none !important; }

@media (max-width: 1100px) {
    .featured-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .category-guide-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .cat-guide-card { padding: 14px 12px 14px; min-height: auto; }
    .cat-guide-name { font-size: 14px; }
    .cat-sub-tag { font-size: 12px; padding: 5px 10px; }
    .cat-guide-icon { font-size: 24px; }
    .article-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .article-card { padding: 18px 8px 16px; }
    .article-card .art-icon { font-size: 26px; }
    .article-card .art-name { font-size: 14px; }
    .article-list-layout { grid-template-columns: 1.5fr 1fr; gap: 16px; }
    .main-nav li a { font-size: 13px; padding: 6px 9px; }
    .search-box { width: 150px; }
    .search-box:focus-within { width: 190px; }
}
@media (max-width: 900px) {
    .header { flex-wrap: wrap; gap: 10px; }
    .logo { order: 1; }
    .search-box { order: 2; margin-left: 0; width: 140px; }
    .main-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; gap: 2px; }
    .main-nav li a { font-size: 12px; padding: 12px 12px; gap: 2px; }
    /* 触屏无 hover：子菜单改为常驻展开，随主导航横向滚动 */
    .main-nav li.with-children { display: flex; align-items: center; }
    .main-nav li.with-children .sub-nav {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: flex;
        gap: 2px;
        min-width: 0;
        padding: 0 0 0 2px;
        background: none;
        border: none;
        box-shadow: none;
    }
    .main-nav li.with-children:hover .sub-nav { transform: none; }
    .sub-nav li a { padding: 12px 11px; font-size: 12px; background: rgba(0, 0, 0, 0.035); }
    .nav-caret { display: none; }
    .search-box:focus-within { width: 170px; }
    .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    /* 首页「今日赏鉴」的右侧栏（行情速览 / 阅读榜）同理，
       单列时会被推到页面最底部，手机用户基本看不到，提到前面。 */
    .showcase-layout { grid-template-columns: 1fr; gap: 16px; }
    .showcase-layout > .showcase-side { order: -1; }
    .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sc-lead { font-size: 12px; left: 11px; right: 11px; bottom: 10px; }
    .sc-badge { top: 10px; left: 10px; font-size: 11px; padding: 3px 9px; }
    .category-guide-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .article-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .article-list-layout, .page-grid { grid-template-columns: 1fr; gap: 16px; }
    /* 移动端单列时，侧栏（近期热门 / 行情速览）原本整体落到文章列表之后，
       用户要滚过整页列表才看得到，等于把站内导流模块废掉。
       这里用 order 把它提到列表前面，并只保留前 4 条热门，
       避免它自己又变成一堵墙。 */
    .article-list-layout > .sidebar-panel,
    .page-grid > .sidebar-panel { order: -1; position: static; }
    .sidebar-panel .hot-article-item:nth-child(n+5) { display: none; }
    .sidebar-panel .side-title-h2,
    .sidebar-panel h4 { font-size: 15px; margin-bottom: 10px; padding-bottom: 8px; }
    .related-panel .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide { height: 240px; }
    .hero-swiper .swiper-slide { padding: 24px; }
    .slide-caption .slide-title { font-size: 22px; }
    .slide-caption p { font-size: 13px; }
    .article-list-item .al-img { width: 100px; height: 75px; }
    .article-list-item .al-title { font-size: 14px; }
}
@media (max-width: 560px) {
    .container { padding: 0 12px; }
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide { height: 180px; }
    .hero-swiper .swiper-slide { padding: 16px; }
    .slide-caption .slide-title { font-size: 18px; }
    .slide-caption p { font-size: 12px; }
    .slide-caption .slide-tag { font-size: 10px; padding: 3px 8px; }
    .featured-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .showcase-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .showcase-card { aspect-ratio: 1 / 1; }
    .sc-lead { display: none; }
    .side-block { padding: 14px 13px 12px; }
    .rate-list li { font-size: 12px; padding: 6px 0; }
    .item-card .img-wrap { height: 130px; }
    .item-info { padding: 10px 12px 14px; }
    .item-info h4 { font-size: 14px; }
    .item-meta { font-size: 11px; }
    .category-guide-grid { grid-template-columns: 1fr; gap: 10px; }
    .cat-guide-card { padding: 12px 10px 12px; min-height: auto; }
    .cat-guide-icon { font-size: 22px; }
    .cat-guide-name { font-size: 13px; }
    .cat-sub-tag { font-size: 11px; padding: 4px 8px; white-space: normal; }
    .cat-guide-footer { font-size: 10px; margin-top: 8px; padding-top: 8px; }
    .article-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .article-card { padding: 14px 8px 12px; }
    .article-card .art-icon { font-size: 22px; }
    .article-card .art-name { font-size: 13px; }
    .article-list-item { flex-direction: column; gap: 8px; padding: 10px 12px; }
    .article-list-item .al-img { width: 100%; height: 140px; }
    .related-panel { padding: 16px 12px; }
    .related-panel .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .related-panel .related-card { min-height: 112px; padding: 8px; gap: 8px; }
    .related-panel .related-thumb { width: 82px !important; height: 82px !important; flex-basis: 82px; }
    .related-panel .related-card strong { font-size: 12px; -webkit-line-clamp: 2; }
    .related-panel .related-card p { font-size: 10px; -webkit-line-clamp: 2; }
    .section-title { font-size: 18px; margin: 24px 0 10px; }
    .logo { font-size: 22px; letter-spacing: 2px; }
    .article-body h2::before { width: 6px; height: 6px; box-shadow: 9px 0 0 rgba(185,155,107,.42); }
    .detail-main-img { width: 300px; height: 300px; max-width: 100%; }
}

/* Keep the navigation scroll inside the header on narrow screens. */
.header > nav { flex: 1; min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
    .header > nav { order: 3; flex: 0 0 100%; width: 100%; }
    .header-util { display: none; }
}

/* ==========================================================================
   珠宝玉石资料库
   沿用主站设计语言：墨绿主色、朱砂点缀、金色标签、衬线标题
   ========================================================================== */

/* ---------- 顶部介绍 ---------- */
.lib-hero { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: center; padding: 38px 0 32px; }
.lib-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: var(--cinnabar); margin-bottom: 14px; }
.lib-kicker::before { content: ''; width: 22px; height: 1px; background: var(--cinnabar); }
.lib-hero h1 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.34; letter-spacing: -.5px; font-weight: 700; }
.lib-hero h1 em { font-style: normal; color: var(--jade); }
.lib-hero-desc { color: var(--text-muted); font-size: 14px; line-height: 2; margin-top: 18px; max-width: 600px; }
.lib-aside { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 3px 10px rgba(0,0,0,.04); position: relative; overflow: hidden; }
.lib-aside::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--gold); }
.lib-aside-title { font-size: 13px; font-weight: 700; letter-spacing: .8px; margin-bottom: 16px; }
.lib-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.lib-num b { display: block; font-size: 29px; font-weight: 700; line-height: 1.2; color: var(--jade-dark); }
.lib-num span { font-size: 11px; color: var(--text-muted); letter-spacing: .5px; }
.lib-aside-note { font-size: 11.5px; color: #68726d; line-height: 1.85; padding-top: 14px; border-top: 1px solid var(--border-subtle); }

/* ---------- 分类导航（覆盖范围） ---------- */
.lib-nav { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 8px; }
.lib-nav-item { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 15px 16px; transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; gap: 5px; text-align: left; font-family: inherit; }
.lib-nav-item:hover { border-color: var(--jade); box-shadow: var(--hover-shadow); transform: translateY(-3px); }
.lib-nav-item.active { border-color: var(--jade); background: var(--gold-light); }
.lib-nav-name { font-size: 15px; font-weight: 700; letter-spacing: .5px; color: var(--text); }
.lib-nav-name em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--cinnabar); margin-left: 5px; }
.lib-nav-item:hover .lib-nav-name { color: var(--jade-dark); }
.lib-nav-scope { font-size: 11px; color: var(--text-muted); line-height: 1.65; }

/* ---------- 工具条 ---------- */
.lib-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 15px; background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.lib-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.lib-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: 18px; background: var(--gold-soft); border: 1px solid var(--border-subtle); color: #6b5a44; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--transition); white-space: nowrap; }
.lib-chip:hover, .lib-chip.active { background: var(--jade); border-color: var(--jade); color: #fff; box-shadow: 0 6px 14px rgba(47,111,98,.22); }
.lib-search { display: flex; align-items: center; gap: 9px; margin-left: auto; background: var(--bg); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 8px 16px; width: 250px; transition: all var(--transition); }
.lib-search:focus-within { border-color: var(--jade); background: #fff; box-shadow: 0 0 0 3px rgba(47,111,98,.12); }
.lib-search input { border: 0; outline: none; background: none; width: 100%; min-width: 0; font-family: inherit; font-size: 13px; color: var(--text); }
.lib-search input::placeholder { color: #b8a895; }
.lib-count { font-size: 12px; color: var(--text-muted); letter-spacing: .5px; }

/* ---------- 条目卡片 ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.lib-card { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 20px 20px 16px; box-shadow: 0 3px 10px rgba(0,0,0,.04); transition: all var(--transition); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.lib-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--jade); transform: scaleX(0); transform-origin: center; transition: transform var(--transition); border-radius: 0 0 8px 8px; }
.lib-card:hover::before { transform: scaleX(1); }
.lib-card:hover { border-color: var(--jade); box-shadow: var(--hover-shadow); transform: translateY(-4px); }
.lib-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.lib-badge { font-size: 11px; font-weight: 700; letter-spacing: .6px; padding: 3px 10px; border-radius: 12px; background: var(--tag-bg); color: var(--jade); }
.lib-badge.alt { background: var(--gold-soft); color: var(--gold-dark); }
.lib-card h3 { font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: .2px; }
.lib-card:hover h3 { color: var(--jade-dark); }
.lib-card-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.85; margin-top: 9px; flex: 1; }
.lib-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 11px; color: #b8a895; letter-spacing: .4px; }
.lib-card-go { color: var(--jade); font-weight: 600; }
.lib-card:hover .lib-card-go { color: var(--jade-dark); }

.lib-empty { background: var(--card-bg); border: 1px dashed var(--border-subtle); border-radius: var(--radius-sm); padding: 20px; color: var(--text-muted); font-size: 14px; text-align: center; }

/* ---------- 条目详情 ---------- */
.lib-article { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: 0 3px 12px rgba(0,0,0,.04); overflow: hidden; }
.lib-article-head { padding: 30px 38px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--gold-soft); }
.lib-article-head h1 { font-size: clamp(22px, 2.7vw, 30px); line-height: 1.42; letter-spacing: -.3px; }
.lib-article-lead { font-size: 14px; color: var(--text-muted); line-height: 1.95; margin-top: 13px; max-width: 780px; }
.lib-article-body { padding: 8px 38px 30px; }
.lib-sec { padding-top: 26px; }
.lib-sec h2 { font-size: 15.5px; font-weight: 700; letter-spacing: .6px; color: var(--jade-dark); padding-left: 12px; position: relative; margin-bottom: 12px; }
.lib-sec h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--cinnabar); }
.lib-rows { display: flex; flex-direction: column; }
.lib-row { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid #f1f3f1; }
.lib-row:last-child { border-bottom: 0; }
.lib-row dt { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.75; }
.lib-row dd { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.85; }
.lib-source { margin-top: 26px; padding: 15px 18px; background: var(--tag-bg); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-muted); line-height: 1.85; }
.lib-source strong { color: var(--jade-dark); margin-right: 8px; font-size: 12px; letter-spacing: .5px; }
.lib-warn { margin-top: 12px; padding: 15px 18px; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 12.5px; color: #7a6a52; line-height: 1.85; }
.lib-article-foot { display: flex; gap: 22px; flex-wrap: wrap; padding: 20px 38px 26px; border-top: 1px solid var(--border-subtle); background: var(--gold-soft); }
.lib-back { font-size: 13px; color: var(--jade); font-weight: 600; }
.lib-back:hover { color: var(--jade-dark); text-decoration: underline; }

/* ---------- 相关条目 ---------- */
.lib-related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 16px; }

@media (max-width: 1100px) {
    .lib-nav { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .lib-grid, .lib-related { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .lib-hero { grid-template-columns: 1fr; gap: 26px; padding: 26px 0 22px; }
    .lib-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .lib-search { width: 100%; margin-left: 0; }
    .lib-article-head, .lib-article-body, .lib-article-foot { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
    .lib-grid, .lib-related, .lib-nav { grid-template-columns: 1fr; }
    .lib-row { grid-template-columns: 1fr; gap: 4px; }
    .lib-row dt { font-size: 12.5px; color: var(--jade-dark); }
}

/* 分类卡内的栏目链接 */
.lib-nav-item { position: relative; }
.lib-nav-more { font-size: 11px; color: var(--jade); font-weight: 600; margin-top: 4px; opacity: 0; transform: translateY(-2px); transition: all var(--transition); }
.lib-nav-item:hover .lib-nav-more, .lib-nav-item.active .lib-nav-more { opacity: 1; transform: translateY(0); }
.lib-nav-more:hover { color: var(--jade-dark); text-decoration: underline; }
.lib-nav-item.active { border-color: var(--jade); background: var(--gold-light); box-shadow: 0 6px 16px rgba(47,111,98,.14); }

/* ---------- 资料库：操作步骤 ---------- */
.lib-steps-list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 10px; }
.lib-steps-list li { display: flex; gap: 12px; align-items: flex-start; background: var(--gold-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; line-height: 1.75; color: var(--text); }
.lib-step-no { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--jade); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ---------- 资料库：常见问题 ---------- */
.lib-qa-list { display: grid; gap: 10px; }
.lib-qa-item { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.lib-qa-item[open] { border-color: var(--jade); box-shadow: 0 6px 16px rgba(47,111,98,.10); }
.lib-qa-item summary { cursor: pointer; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 9px; }
.lib-qa-item summary::-webkit-details-marker { display: none; }
.lib-qa-item summary::before { content: "问"; flex: 0 0 20px; height: 20px; border-radius: 5px; background: var(--cinnabar); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lib-qa-item summary::after { content: "＋"; margin-left: auto; color: var(--text-muted); font-size: 14px; }
.lib-qa-item[open] summary::after { content: "－"; color: var(--jade); }
.lib-qa-item p { margin: 0; padding: 0 16px 15px 45px; font-size: 13.5px; line-height: 1.8; color: var(--text-muted); }

/* ---------- 首页站点介绍（H1 区块） ---------- */
.home-intro { max-width: 900px; margin: 2px auto 22px; text-align: center; padding: 0 4px; }
.home-h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: 1px; line-height: 1.4; margin: 0 0 14px; position: relative; padding-bottom: 14px; }
.home-h1::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.home-note { font-size: 12px; color: var(--text-muted); opacity: .8; margin: 0; letter-spacing: .3px; }
@media (max-width: 900px) {
    .home-intro { margin-bottom: 22px; }
    .home-h1 { font-size: 23px; }
}
@media (max-width: 560px) {
    .home-h1 { font-size: 20px; }
}

/* 静态页 H1 与栏目标题保持同一视觉层级 */
.page-h1 { font-family: var(--font-serif); font-size: 23px; font-weight: 700; color: var(--text); margin: 0 0 16px; padding-bottom: 12px; position: relative; letter-spacing: .5px; }
.page-h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }

/* ---------- 页脚免责声明与备案号 ---------- */
.footer-disclaimer { max-width: 760px; margin: 16px auto 0; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 12px; line-height: 1.9; color: var(--text-muted); opacity: .82; }
/* ICP 备案号：境内主机合规要求，样式低调但必须可见可点 */
.footer-icp { margin: 10px auto 0; text-align: center; font-size: 12px; color: var(--text-muted); }
.footer-icp a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border-subtle); }
.footer-icp a:hover { color: var(--gold-dark); border-bottom-color: var(--gold); }
@media (max-width: 560px) {
    .footer-disclaimer { font-size: 11.5px; }
    .footer-icp { font-size: 11.5px; }
}

/* ---------- 文章常见问答 ---------- */
/* 问答只有一种模板（见 includes/faq.php 顶部说明）：
 *   <h2>常见问答</h2>
 *   <p><strong>Q：问题？</strong><br>A：答案。</p>
 *
 * 渲染时由 article_faq_markup() 给这些段落加 .faq-item，样式只认这个类。
 *
 * 历史教训：曾用「p 以 strong 开头」(:has) 作为判据，结果正文里
 * <p>天然皮色的特点是<strong>…</strong>…</p> 这类普通段落被误套卡片样式，
 * 且 strong 被设为 block，导致句子在中间硬断行，影响 16 篇文章 43 个段落。
 * 因此这里不再做任何基于结构的猜测，只认显式 class。
 */

/* h3 仅用于正文小标题（问答区已统一为 Q/A 模板，不再使用 h3） */
.article-body h3, .detail-body h3 {
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
    color: #2e4f46;
    margin: 22px 0 10px;
    position: relative;
    padding-left: 16px;
}
.article-body h3::before, .detail-body h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--gold);
}

/* 解析器标记过的问答段落 */
.article-body p.faq-item {
    background: var(--gold-soft);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--jade);
    border-radius: 8px;
    padding: 13px 16px;
    margin: 0 0 12px;
    line-height: 1.8;
}
/* 问题行：不能设 display:block。
 * 问答本身是「Q：问题」+ <br> + 「A：答案」两行，若再把 strong 设为
 * block，问题与答案之间会被撑出双倍视觉间距，看起来像断成了两段。
 * 这里保持行内，只用颜色区分问题，行距由 <br> 自然控制。 */
.article-body p.faq-item > strong:first-child {
    color: var(--jade-dark);
    font-weight: 700;
}
@media (max-width: 560px) {
    .article-body p.faq-item { padding: 11px 13px; }
    .article-body h3 + p { padding: 10px 13px; }
}

/* ── 新写法问答（div.faq-item + h3.faq-q + div.faq-a）─────────
 * 用标签结构界定问答对，解析不依赖「Q：」这类标点。
 * 外观与旧写法保持一致，避免同一站内出现两种问答样式。 */
.article-body .faq-item {
    background: var(--gold-soft);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--jade);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 12px;
}
.article-body .faq-item .faq-q {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--jade-dark);
    margin: 0 0 7px;
    line-height: 1.6;
}
.article-body .faq-item .faq-a { line-height: 1.85; }
.article-body .faq-item .faq-a p { margin: 0 0 8px; }
.article-body .faq-item .faq-a p:last-child { margin-bottom: 0; }
/* 注：.faq-more（问答末尾的资料库内链）样式已移除。
   该功能按问答文本模糊匹配词条，错误率约 50%，已整体删除。
   文章 -> 资料库的内链现由页面底部「相关资料」区块承担。 */
@media (max-width: 560px) {
    .article-body .faq-item { padding: 11px 13px; }
    .article-body .faq-item .faq-q { font-size: 14.5px; }
}

/* ── 键盘焦点可见性 ───────────────────────────────────
   全站此前只对搜索框做了小范围处理，链接与卡片按钮没有任何焦点样式，
   键盘用户 Tab 遍历时完全看不到当前位置。用 :focus-visible 只为键盘
   操作显示焦点环，鼠标点击不受影响（避免出现难看的描边）。
   两个搜索输入框自身 outline:none 是刻意的——焦点环由父级
   :focus-within 承担，所以这里排除掉它们。 */
:focus-visible {
    outline: 3px solid var(--jade);
    outline-offset: 2px;
    border-radius: 4px;
}
.search-box input:focus-visible,
.lib-search input:focus-visible {
    outline: none;
}
/* 深色底（轮播、页脚）上的焦点环改用金色，保证与背景有足够对比 */
.swiper-slide:focus-visible,
.footer a:focus-visible {
    outline-color: var(--gold);
}

/* 跳到主要内容：键盘/读屏用户可跳过整条主导航直达正文 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
}
.skip-link:focus {
    left: 8px;
    top: 8px;
    background: #fff;
    color: var(--jade-dark);
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    font-weight: 600;
}