/* ================================================================
   Pages Toolkit — 内页统一设计系统（首页风格延展）
   主色 #5d9743 · 半透明卡片 · 楷书展示字体 · 滚动渐显
   ================================================================ */

/* ================================================================
   迁移页面统一内容底板
   - 外轮廓与页头共用 --content-max-width（1500px）
   - 主内容不再直接叠在星空背景上
   - 侧边栏仍保持独立小部件视觉
   ================================================================ */
.main-wrapper > .content,
.pg-wide {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.90);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.10);
}

/* 全宽页面与头部采用完全相同的外层宽度和水平留白 */
.pg-wide {
    width: calc(100% - (var(--spacing-md) * 2));
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* 内容已有统一底板，头图稍微增强层次，避免白底粘连 */
.main-wrapper > .content > .pg-masthead,
.pg-wide > .pg-masthead {
    border-color: rgba(93, 151, 67, 0.18);
    box-shadow: 0 8px 26px rgba(93, 151, 67, 0.10);
}

/* 旧 guide 章节统一加二级底板，保证标题、说明和内容都清晰 */
.ch-section, .ws-section, .lc-section, .dc-section,
.ad-section, .ct-section, .np-section, .bd-section, .cp-section {
    padding: 24px;
    border: 1px solid rgba(93, 151, 67, 0.10);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: var(--shadow-sm);
}

/* 跑马灯和安全等级图例也不能直接压在背景图上 */
.ws-marquee, .lc-marquee, .dc-marquee,
.ws-legend {
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
}

.ws-marquee, .lc-marquee, .dc-marquee {
    padding: 12px 0;
    border: 1px solid rgba(93, 151, 67, 0.10);
}

/* 推荐、专题、关于、分类页中未被卡片包住的 Tabs/章节同样保持可读 */
.main-wrapper > .content > .pg-tabs {
    margin-left: 0;
}

.main-wrapper > .content > .pg-section,
.main-wrapper > .content > .pg-panel {
    position: relative;
}

@media (max-width: 767px) {
    .main-wrapper > .content,
    .pg-wide {
        padding: 14px;
        border-radius: var(--radius-md);
    }

    .pg-wide {
        width: calc(100% - (var(--spacing-sm) * 2));
        max-width: none;
    }

    .ch-section, .ws-section, .lc-section, .dc-section,
    .ad-section, .ct-section, .np-section, .bd-section, .cp-section {
        padding: 16px;
    }
}

/* ---------- 0. Masthead 头图面板 ---------- */
.pg-masthead {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.84) 52%,
            rgba(240, 247, 237, 0.90) 100%);
    box-shadow: var(--shadow-sm);
    padding: clamp(30px, 4.6vw, 54px) clamp(22px, 4.2vw, 54px);
    margin-bottom: var(--spacing-xl);
}

/* 右上角绿色光晕 */
.pg-masthead::before {
    content: '';
    position: absolute;
    top: -130px;
    right: -90px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93, 151, 67, 0.17), transparent 68%);
    pointer-events: none;
}

/* 右侧渐隐点阵纹理 */
.pg-masthead::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(93, 151, 67, 0.13) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
    mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
    opacity: 0.55;
    pointer-events: none;
}

/* 「川」字水印 */
.pg-masthead-glyph {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-53%) rotate(-4deg);
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
    font-size: clamp(150px, 17vw, 235px);
    line-height: 1;
    color: rgba(93, 151, 67, 0.075);
    user-select: none;
    pointer-events: none;
}

.pg-masthead-inner {
    position: relative;
    z-index: 1;
}

.pg-overline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.20em;
    color: var(--primary-dark);
}

.pg-overline-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(93, 151, 67, 0.16);
    animation: pgOverlinePulse 2.6s ease-in-out infinite;
}

@keyframes pgOverlinePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(93, 151, 67, 0.16); }
    50%      { box-shadow: 0 0 0 7px rgba(93, 151, 67, 0.07); }
}

.pg-title {
    margin-bottom: 12px;
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 54px);
    line-height: 1.18;
    color: var(--text-primary);
}

.pg-title-accent {
    color: var(--primary-color);
}

.pg-lede {
    max-width: 700px;
    margin-bottom: 22px;
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--text-secondary);
}

.pg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pg-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(93, 151, 67, 0.17);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pg-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(93, 151, 67, 0.38);
    box-shadow: var(--shadow-md);
}

.pg-chip b {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
}

.pg-chip span {
    font-size: 12px;
    color: var(--text-muted);
}

/* 底部渐入彩条 */
.pg-masthead-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-color) 45%, #8fc972 75%, transparent);
    transform-origin: left center;
    animation: pgBarIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes pgBarIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---------- 1. 章节头 ---------- */
.pg-section {
    margin-top: var(--spacing-2xl);
}

.pg-section:first-child {
    margin-top: 0;
}

.pg-section-head {
    margin-bottom: var(--spacing-lg);
}

.pg-section-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--primary-color);
}

.pg-section-num::after {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(93, 151, 67, 0.5), transparent);
}

.pg-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
}

.pg-section-title::before {
    content: '';
    flex: none;
    width: 4px;
    height: 21px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-light));
    transition: height var(--transition-normal);
}

.pg-section-head:hover .pg-section-title::before {
    height: 27px;
}

.pg-section-desc {
    margin-top: 8px;
    padding-left: 15px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-muted);
}

/* ---------- 2. 卡片与网格 ---------- */
.pg-grid {
    display: grid;
    gap: var(--spacing-md);
}

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

.pg-card {
    position: relative;
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.pg-card:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.14);
}

/* ---------- 3. Tabs ---------- */
.pg-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    margin-bottom: var(--spacing-lg);
    border-radius: 12px;
    background: rgba(93, 151, 67, 0.07);
    border: 1px solid rgba(93, 151, 67, 0.13);
}

.pg-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 19px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pg-tab:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.75);
}

.pg-tab.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 13px rgba(93, 151, 67, 0.32);
}

.pg-tab-count {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(93, 151, 67, 0.13);
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
}

.pg-tab.active .pg-tab-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.pg-panel {
    animation: pgPanelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-panel[hidden] {
    display: none;
}

@keyframes pgPanelIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 4. 表格 ---------- */
.pg-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-sm);
}

.pg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pg-table th {
    padding: 12px 16px;
    background: var(--primary-lighter);
    border-bottom: 2px solid rgba(93, 151, 67, 0.20);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
    text-align: left;
    white-space: nowrap;
}

.pg-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: 1.75;
    vertical-align: top;
}

.pg-table tbody tr {
    transition: background-color var(--transition-fast);
}

.pg-table tbody tr:hover {
    background: rgba(93, 151, 67, 0.055);
}

.pg-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- 5. 代码 ---------- */
.pg-code {
    display: inline;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(93, 151, 67, 0.10);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 12.5px;
    color: #3c6a2a;
    word-break: break-all;
}

.pg-codeblock {
    padding: 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.85;
    color: #41533a;
    white-space: pre;
    overflow-x: auto;
}

.pg-code-comment {
    color: #84a874;
}

/* ---------- 6. 标签 ---------- */
.pg-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.7;
}

.pg-tag-green  { background: rgba(93, 151, 67, 0.13);  color: #48762f; }
.pg-tag-blue   { background: rgba(59, 130, 246, 0.12); color: #2f66d0; }
.pg-tag-gold   { background: rgba(217, 164, 6, 0.15);  color: #96700a; }
.pg-tag-orange { background: rgba(234, 88, 12, 0.12);  color: #c2570c; }
.pg-tag-purple { background: rgba(147, 51, 234, 0.11); color: #7e3bd0; }
.pg-tag-pink   { background: rgba(219, 39, 119, 0.11); color: #c02670; }
.pg-tag-cyan   { background: rgba(8, 145, 178, 0.12);  color: #0e7490; }

/* ---------- 7. 手风琴 ---------- */
.pg-accordion {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.pg-accordion + .pg-accordion {
    margin-top: 14px;
}

.pg-accordion.is-open {
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 10px 26px rgba(93, 151, 67, 0.11);
}

.pg-accordion-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 17px 22px;
    text-align: left;
    transition: background-color var(--transition-fast);
}

.pg-accordion-header:hover {
    background: rgba(93, 151, 67, 0.055);
}

.pg-accordion-icon {
    font-size: 20px;
    line-height: 1;
}

.pg-accordion-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.pg-accordion-count {
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    white-space: nowrap;
}

.pg-accordion-chevron {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color var(--transition-fast);
}

.pg-accordion.is-open .pg-accordion-chevron {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.pg-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-accordion.is-open .pg-accordion-body {
    grid-template-rows: 1fr;
}

.pg-accordion-inner {
    overflow: hidden;
}

.pg-accordion-content {
    padding: 8px 22px 24px;
    border-top: 1px dashed rgba(93, 151, 67, 0.22);
}

/* ---------- 8. FAQ ---------- */
.pg-faq-item {
    border-bottom: 1px dashed rgba(93, 151, 67, 0.22);
}

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

.pg-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 17px 4px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.pg-faq-q:hover {
    color: var(--primary-color);
}

.pg-faq-q::after {
    content: '+';
    flex: none;
    font-size: 21px;
    font-weight: 400;
    color: var(--primary-color);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-faq-item.active .pg-faq-q::after {
    transform: rotate(45deg);
}

.pg-faq-a {
    max-height: 0;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--text-secondary);
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.pg-faq-item.active .pg-faq-a {
    max-height: 480px;
    padding-bottom: 17px;
}

/* ---------- 9. 时间线 ---------- */
.pg-timeline {
    position: relative;
    padding-left: 30px;
}

.pg-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary-light), rgba(93, 151, 67, 0.14));
}

.pg-timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.pg-timeline-item:last-child {
    padding-bottom: 4px;
}

.pg-timeline-dot {
    position: absolute;
    left: -28px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 0 4px rgba(93, 151, 67, 0.15);
}

/* ---------- 10. 评分点 ---------- */
.pg-rating {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}

.pg-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2ecdb;
}

.pg-dot.filled {
    background: var(--primary-color);
    box-shadow: 0 0 5px rgba(93, 151, 67, 0.42);
}

.pg-dot.half {
    background: linear-gradient(90deg, var(--primary-color) 50%, #e2ecdb 50%);
}

/* ---------- 11. 跑马灯 ---------- */
.pg-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.pg-marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 4px 0;
    animation: pgMarquee 28s linear infinite;
}

.pg-marquee:hover .pg-marquee-track {
    animation-play-state: paused;
}

@keyframes pgMarquee {
    to { transform: translateX(-50%); }
}

.pg-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(93, 151, 67, 0.16);
    background: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pg-marquee-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* ---------- 12. 提示框 ---------- */
.pg-callout {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 9px;
    border-left: 3px solid;
    font-size: 13.5px;
    line-height: 1.85;
}

.pg-callout-tip {
    background: rgba(93, 151, 67, 0.08);
    border-color: var(--primary-color);
    color: var(--text-secondary);
}

.pg-callout-warn {
    background: rgba(234, 88, 12, 0.07);
    border-color: #ea580c;
    color: #8a4b12;
}

.pg-callout-danger {
    background: rgba(220, 38, 38, 0.07);
    border-color: #dc2626;
    color: #8f2727;
}

/* ---------- 13. 空状态 ---------- */
.pg-empty {
    padding: 52px 22px;
    text-align: center;
    border: 1.5px dashed rgba(93, 151, 67, 0.32);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
}

.pg-empty-icon {
    display: block;
    margin-bottom: 12px;
    font-size: 44px;
    line-height: 1;
    animation: floatY 3.2s ease-in-out infinite;
}

.pg-empty-title {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.pg-empty-desc {
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- 14. 按钮 ---------- */
.pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 25px;
    border-radius: 9px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(93, 151, 67, 0.30);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pg-btn:hover {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(93, 151, 67, 0.36);
}

.pg-btn-arrow {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-btn:hover .pg-btn-arrow {
    transform: translateX(4px);
}

.pg-btn-outline {
    background: rgba(255, 255, 255, 0.85);
    color: var(--primary-dark);
    border: 1px solid rgba(93, 151, 67, 0.32);
    box-shadow: none;
}

.pg-btn-outline:hover {
    background: var(--primary-bg);
    color: var(--primary-dark);
    box-shadow: var(--shadow-md);
}

/* ---------- 15. 引用 ---------- */
.pg-quote {
    position: relative;
    padding: 20px 24px 20px 58px;
    border-radius: 10px;
    border: 1px solid rgba(93, 151, 67, 0.15);
    background: linear-gradient(135deg, rgba(93, 151, 67, 0.09), rgba(255, 255, 255, 0.62));
    font-size: 15px;
    line-height: 1.95;
    color: var(--text-primary);
}

.pg-quote::before {
    content: '\201C';
    position: absolute;
    left: 18px;
    top: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 46px;
    font-weight: 700;
    color: var(--primary-color);
    opacity: 0.5;
}

/* ---------- 16. 滚动渐显（配合 pages.js） ---------- */
.js-ready .reveal-d1 { transition-delay: 0.07s; }
.js-ready .reveal-d2 { transition-delay: 0.14s; }
.js-ready .reveal-d3 { transition-delay: 0.21s; }
.js-ready .reveal-d4 { transition-delay: 0.28s; }

/* 旧速查/对比页的渐显钩子 */
.js-ready .scroll-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-ready .scroll-animate.is-visible {
    opacity: 1;
    transform: none;
}

.js-ready .stagger-2 { transition-delay: 0.08s; }
.js-ready .stagger-3 { transition-delay: 0.16s; }
.js-ready .stagger-4 { transition-delay: 0.24s; }

/* ================================================================
   好书推荐页（books）
   ================================================================ */
.bk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.bk-card {
    --bk-c: 93, 151, 67;
    position: relative;
    display: flex;
    gap: 18px;
    padding: 22px 22px 22px 26px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

/* 书脊 */
.bk-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, rgb(var(--bk-c)), rgba(var(--bk-c), 0.55));
}

.bk-card--frontend { --bk-c: 93, 151, 67; }
.bk-card--java     { --bk-c: 59, 130, 246; }
.bk-card--ai       { --bk-c: 147, 51, 234; }

.bk-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bk-c), 0.35);
    box-shadow: 0 14px 30px rgba(var(--bk-c), 0.15);
}

.bk-card-cover {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 98px;
    border-radius: 6px 9px 9px 6px;
    font-size: 34px;
    background:
        linear-gradient(160deg, rgba(var(--bk-c), 0.16), rgba(var(--bk-c), 0.05));
    border: 1px solid rgba(var(--bk-c), 0.20);
    box-shadow: inset -4px 0 7px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-normal);
}

.bk-card:hover .bk-card-cover {
    transform: rotate(-4deg) scale(1.05);
}

.bk-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.bk-card-title {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-primary);
}

.bk-card-author {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.bk-card-author::before {
    content: '✍ ';
}

.bk-card-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.bk-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--bk-c));
    align-self: flex-start;
}

.bk-card-btn:hover {
    color: var(--primary-dark);
}

.bk-card-btn:hover .pg-btn-arrow {
    transform: translateX(4px);
}

.bk-tip {
    position: relative;
    padding: 24px 22px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.bk-tip:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.bk-tip-num {
    position: absolute;
    top: 10px;
    right: 16px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.14);
    user-select: none;
}

.bk-tip h4 {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.bk-tip p {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    .bk-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   键盘推荐页（keyboards）
   ================================================================ */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.kb-card {
    --kb-c: 93, 151, 67;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.kb-card--entry { --kb-c: 93, 151, 67; }
.kb-card--mid   { --kb-c: 59, 130, 246; }
.kb-card--high  { --kb-c: 197, 137, 25; }

.kb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--kb-c), 0.38);
    box-shadow: 0 14px 30px rgba(var(--kb-c), 0.16);
}

/* 顶部键帽式视觉条 */
.kb-card-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
    padding: 0 20px;
    background:
        repeating-linear-gradient(90deg,
            rgba(var(--kb-c), 0.10) 0 26px,
            rgba(var(--kb-c), 0.045) 26px 52px);
    border-bottom: 1px solid rgba(var(--kb-c), 0.18);
}

.kb-card-emoji {
    font-size: 30px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
    transition: transform var(--transition-normal);
}

.kb-card:hover .kb-card-emoji {
    transform: translateY(-3px) rotate(-6deg);
}

.kb-card-tier {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 14px;
    border-radius: 999px;
    background: rgba(var(--kb-c), 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow: 0 3px 9px rgba(var(--kb-c), 0.35);
}

.kb-card-idx {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 15px;
    font-weight: 700;
    color: rgba(var(--kb-c), 0.75);
}

.kb-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.kb-card-title {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.5;
}

.kb-card-brand {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--kb-c));
}

.kb-card-brand::before {
    content: '🏷️ ';
}

.kb-card-desc {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.kb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.kb-card-body .bk-card-btn {
    margin-top: auto;
    color: rgb(var(--kb-c));
}

/* 选购指南 */
.kb-guide {
    display: flex;
    gap: 16px;
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.kb-guide:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.kb-guide-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    font-size: 24px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
    transition: transform var(--transition-normal);
}

.kb-guide:hover .kb-guide-icon {
    transform: scale(1.1) rotate(-6deg);
}

.kb-guide h4 {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.kb-guide p {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    .kb-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   云服务器推荐页（servers）
   ================================================================ */
.sv-providers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    align-items: stretch;
}

.sv-card {
    --sv-c: 93, 151, 67;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.sv-card--ali { --sv-c: 234, 88, 12; }
.sv-card--tx  { --sv-c: 59, 130, 246; }
.sv-card--kk  { --sv-c: 93, 151, 67; }

.sv-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--sv-c), 0.40);
    box-shadow: 0 16px 34px rgba(var(--sv-c), 0.16);
}

.sv-card--featured {
    border-color: rgba(93, 151, 67, 0.45);
    background:
        linear-gradient(165deg, rgba(93, 151, 67, 0.09), rgba(255, 255, 255, 0.86) 46%);
    box-shadow: 0 8px 24px rgba(93, 151, 67, 0.14);
}

.sv-card-ribbon {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 15px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-color));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(93, 151, 67, 0.40);
}

.sv-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sv-card-head h3 {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.sv-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 21px;
    background: linear-gradient(150deg, rgba(var(--sv-c), 0.16), rgba(var(--sv-c), 0.05));
    border: 1px solid rgba(var(--sv-c), 0.22);
    transition: transform var(--transition-normal);
}

.sv-card:hover .sv-card-icon {
    transform: scale(1.12) rotate(-8deg);
}

.sv-card-desc {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.sv-features {
    margin-bottom: 18px;
}

.sv-features li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.sv-features li::before {
    content: '✓';
    position: absolute;
    left: 2px;
    top: 5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(var(--sv-c), 0.13);
    color: rgb(var(--sv-c));
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-card-btn {
    margin-top: auto;
    justify-content: center;
}

/* 对比表高亮列 */
.sv-table .sv-th-highlight {
    background: var(--primary-color);
    color: #fff;
}

.sv-table .sv-td-highlight {
    background: rgba(93, 151, 67, 0.08);
    color: var(--primary-dark);
    font-weight: 600;
}

.sv-table tbody tr:hover .sv-td-highlight {
    background: rgba(93, 151, 67, 0.14);
}

/* 场景卡片 */
.sv-scenario {
    position: relative;
    padding: 24px 22px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.sv-scenario:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.sv-scenario-num {
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.12);
    user-select: none;
}

.sv-scenario h4 {
    margin: 12px 0 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.sv-scenario p {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* FAQ 面板 */
.sv-faq {
    padding: 6px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 991px) {
    .sv-providers {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   AI 模型推荐页（ai-tools）
   ================================================================ */
.ai-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.ai-intro {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
}

.ai-intro-badge {
    margin-bottom: 12px;
}

.ai-intro-text .pg-section-title {
    margin-bottom: 10px;
}

.ai-intro-text p {
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--text-secondary);
}

/* 模型标签云 */
.ai-model-cloud {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 10px;
    min-height: 190px;
    padding: 26px 20px;
    border-radius: var(--radius-md);
    border: 1px dashed rgba(93, 151, 67, 0.30);
    background:
        radial-gradient(circle at 30% 25%, rgba(93, 151, 67, 0.10), transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(93, 151, 67, 0.08), transparent 55%),
        rgba(255, 255, 255, 0.6);
}

.ai-model-tag {
    padding: 7px 17px;
    border-radius: 999px;
    border: 1px solid rgba(93, 151, 67, 0.22);
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    animation: aiTagFloat 4.2s ease-in-out infinite;
}

.ai-model-tag:nth-child(2n)  { animation-delay: 0.6s; }
.ai-model-tag:nth-child(3n)  { animation-delay: 1.3s; }
.ai-model-tag:nth-child(4n)  { animation-delay: 2.1s; }
.ai-model-tag:nth-child(5n)  { animation-delay: 2.8s; }

@keyframes aiTagFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

.ai-model-tag:hover {
    transform: translateY(-3px) scale(1.06);
    border-color: var(--primary-color);
    color: var(--primary-dark);
    box-shadow: 0 6px 16px rgba(93, 151, 67, 0.20);
    animation-play-state: paused;
}

/* 核心功能：首卡加宽的混排网格 */
.ai-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ai-feature {
    display: flex;
    gap: 14px;
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.ai-feature--lead {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    background:
        linear-gradient(120deg, rgba(93, 151, 67, 0.10), rgba(255, 255, 255, 0.85) 55%);
    border-color: rgba(93, 151, 67, 0.25);
}

.ai-feature--lead .ai-feature-icon {
    width: 74px;
    height: 74px;
    font-size: 34px;
}

.ai-feature--lead h4 {
    font-size: 18px;
}

.ai-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ai-feature-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    font-size: 23px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
    transition: transform var(--transition-normal);
}

.ai-feature:hover .ai-feature-icon {
    transform: scale(1.12) rotate(-8deg);
}

.ai-feature h4 {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-feature p {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* 模型卡片 */
.ai-model-card {
    position: relative;
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ai-model-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ai-model-rank {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 26px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
    transition: transform var(--transition-normal);
}

.ai-model-card:hover .ai-model-rank {
    transform: scale(1.25) rotate(10deg);
}

.ai-model-card h4 {
    margin-bottom: 8px;
    padding-right: 44px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-model-card p {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* 适用场景：错落 chip 墙 */
.ai-scenes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ai-scene {
    padding: 20px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.ai-scene:nth-child(3n+2) {
    transform: translateY(10px);
}

.ai-scene:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ai-scene:nth-child(3n+2):hover {
    transform: translateY(6px);
}

.ai-scene-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 11px;
    font-size: 21px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}

.ai-scene h4 {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-scene p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* CTA 面板 */
.ai-cta {
    position: relative;
    padding: 44px 40px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(93, 151, 67, 0.30);
    background:
        radial-gradient(circle at 88% 20%, rgba(143, 201, 114, 0.30), transparent 52%),
        linear-gradient(135deg, rgba(93, 151, 67, 0.16), rgba(255, 255, 255, 0.88) 60%);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ai-cta-glyph {
    position: absolute;
    right: 26px;
    bottom: -24px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.10);
    user-select: none;
    pointer-events: none;
}

.ai-cta h2 {
    margin-bottom: 10px;
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
    font-weight: 400;
    font-size: 32px;
    color: var(--text-primary);
}

.ai-cta p {
    max-width: 560px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    .ai-intro {
        grid-template-columns: 1fr;
    }

    .ai-features,
    .ai-scenes {
        grid-template-columns: 1fr;
    }

    .ai-feature--lead {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-scene:nth-child(3n+2) {
        transform: none;
    }

    .ai-scene:nth-child(3n+2):hover {
        transform: translateY(-4px);
    }
}

/* ================================================================
   Guide 页共享（速查 / 对比 / 技巧类旧前缀重制）
   ================================================================ */

/* 全宽容器（cheatsheets 等无侧边栏页）：宽度由文件顶部统一规则控制 */
.pg-wide {
    margin: 0 auto;
}

/* 旧容器解除限宽（现已位于 .content 内） */
.ch-container, .ws-container, .lc-container, .dc-container,
.ad-container, .ct-container, .np-container, .bd-container, .cp-container {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 章节 */
.ch-section, .ws-section, .lc-section, .dc-section,
.ad-section, .ct-section, .np-section, .bd-section, .cp-section {
    margin-top: var(--spacing-2xl);
}

/* 章节头 */
.ch-section-header, .ws-section-header, .lc-section-header, .dc-section-header,
.np-section-header, .bd-section-header, .cp-section-header {
    margin-bottom: var(--spacing-lg);
}

.ch-section-title, .ws-section-title, .lc-section-title, .dc-section-title,
.ct-category-title, .np-cat-title, .cp-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 21px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.ch-section-title::before, .ws-section-title::before, .lc-section-title::before,
.dc-section-title::before, .ct-category-title::before, .np-cat-title::before,
.cp-section-title::before {
    content: '';
    flex: none;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-light));
    transition: height var(--transition-normal);
}

.ch-section-header:hover .ch-section-title::before,
.ws-section-header:hover .ws-section-title::before {
    height: 26px;
}

.ch-section-desc, .ws-section-desc, .lc-section-desc, .dc-section-desc,
.np-section-desc, .cp-section-desc {
    margin-top: 8px;
    padding-left: 15px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-muted);
}

.ch-section-label, .ws-section-label, .lc-section-label, .dc-section-label,
.np-section-label, .bd-section-label, .cp-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--primary-color);
}

.ch-section-label::after, .ws-section-label::after, .lc-section-label::after,
.dc-section-label::after, .np-section-label::after, .cp-section-label::after {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(93, 151, 67, 0.5), transparent);
}

.lc-section-subtitle, .np-section-subtitle {
    margin: 6px 0 16px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-muted);
}

/* 跑马灯（ws / lc / dc） */
.ws-marquee, .lc-marquee, .dc-marquee {
    position: relative;
    overflow: hidden;
    margin-top: var(--spacing-lg);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ws-marquee-track, .lc-marquee-track, .dc-marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 4px 0;
    animation: pgMarquee 28s linear infinite;
}

.ws-marquee:hover .ws-marquee-track,
.lc-marquee:hover .lc-marquee-track,
.dc-marquee:hover .dc-marquee-track {
    animation-play-state: paused;
}

.ws-marquee-item, .lc-marquee-item, .dc-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(93, 151, 67, 0.16);
    background: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ws-marquee-dot, .lc-marquee-dot, .dc-marquee-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* ================================================================
   速查手册（ch-）
   ================================================================ */

/* 分类导航卡 */
.ch-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ch-nav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.ch-nav-card:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.40);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.15);
    color: var(--text-primary);
}

.ch-nav-card-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 23px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
    transition: transform var(--transition-normal);
}

.ch-nav-card:hover .ch-nav-card-icon {
    transform: scale(1.12) rotate(-8deg);
}

.ch-nav-card-body {
    flex: 1;
    min-width: 0;
}

.ch-nav-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ch-nav-card-count {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.ch-nav-card-arrow {
    flex: none;
    color: var(--text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.ch-nav-card:hover .ch-nav-card-arrow {
    transform: translateX(4px);
    color: var(--primary-color);
}

/* 手风琴 */
.ch-accordion {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-height) + 20px);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.ch-accordion + .ch-accordion {
    margin-top: 14px;
}

.ch-accordion.is-open {
    border-color: rgba(93, 151, 67, 0.34);
    box-shadow: 0 10px 26px rgba(93, 151, 67, 0.11);
}

.ch-accordion-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 17px 22px;
    text-align: left;
    transition: background-color var(--transition-fast);
}

.ch-accordion-header:hover {
    background: rgba(93, 151, 67, 0.055);
}

.ch-accordion-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ch-accordion-header-icon {
    font-size: 20px;
    line-height: 1;
}

.ch-accordion-header-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.ch-accordion-header-count {
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    white-space: nowrap;
}

.ch-accordion-header-toggle {
    flex: none;
    display: flex;
    color: var(--text-muted);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color var(--transition-fast);
}

.ch-accordion.is-open .ch-accordion-header-toggle {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.ch-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-accordion.is-open .ch-accordion-body {
    grid-template-rows: 1fr;
}

.ch-accordion-content {
    overflow: hidden;
    padding: 0 22px;
}

.ch-accordion.is-open .ch-accordion-content {
    padding: 8px 22px 26px;
    border-top: 1px dashed rgba(93, 151, 67, 0.22);
}

/* 小节标题 */
.ch-subsection-title {
    margin: 22px 0 12px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.02em;
}

/* 表格 */
.ch-table-wrap {
    overflow-x: auto;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.75);
}

.ch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ch-table th {
    padding: 11px 15px;
    background: var(--primary-lighter);
    border-bottom: 2px solid rgba(93, 151, 67, 0.20);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
    text-align: left;
    white-space: nowrap;
}

.ch-table td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: 1.75;
    vertical-align: top;
}

.ch-table tbody tr {
    transition: background-color var(--transition-fast);
}

.ch-table tbody tr:hover {
    background: rgba(93, 151, 67, 0.055);
}

.ch-table tbody tr:last-child td {
    border-bottom: none;
}

.ch-desc {
    color: var(--text-muted);
    font-size: 12.5px;
}

/* 行内代码 / 代码块 */
.ch-code {
    display: inline;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(93, 151, 67, 0.10);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 12.5px;
    color: #3c6a2a;
    word-break: break-all;
}

.ch-code-block {
    padding: 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.9;
    color: #41533a;
    white-space: pre-wrap;
}

/* 彩色标签 */
.ch-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    margin-left: 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    vertical-align: middle;
}

.ch-tag-green  { background: rgba(93, 151, 67, 0.13);  color: #48762f; }
.ch-tag-blue   { background: rgba(59, 130, 246, 0.12); color: #2f66d0; }
.ch-tag-gold   { background: rgba(217, 164, 6, 0.15);  color: #96700a; }
.ch-tag-orange { background: rgba(234, 88, 12, 0.12);  color: #c2570c; }
.ch-tag-purple { background: rgba(147, 51, 234, 0.11); color: #7e3bd0; }
.ch-tag-pink   { background: rgba(219, 39, 119, 0.11); color: #c02670; }
.ch-tag-cyan   { background: rgba(8, 145, 178, 0.12);  color: #0e7490; }

/* HTTP 状态码徽章 */
.ch-http-code {
    display: inline-block;
    min-width: 44px;
    padding: 2px 9px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}

.ch-http-2xx { background: rgba(93, 151, 67, 0.14);  color: #48762f; }
.ch-http-3xx { background: rgba(59, 130, 246, 0.13); color: #2f66d0; }
.ch-http-4xx { background: rgba(234, 88, 12, 0.13);  color: #c2570c; }
.ch-http-5xx { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; }

/* 迷你卡片网格 */
.ch-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ch-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ch-mini-card {
    padding: 18px 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.75);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.ch-mini-card-title {
    margin-bottom: 8px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ch-mini-card-desc {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.ch-window-fn {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.12);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 600;
}

.ch-preview-link {
    color: var(--primary-color);
    text-decoration: underline;
}

.ch-preview-quote {
    font-style: italic;
    color: var(--text-muted);
}

/* 实战场景区（enrich） */
.ch-enrich {
    padding-top: var(--spacing-xl);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}

.ch-enrich-title {
    margin: 24px 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.ch-scenario-grid, .ch-practice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ch-scenario-grid article, .ch-practice-grid article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ch-scenario-grid article:hover, .ch-practice-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ch-scenario-grid h3, .ch-practice-grid h3 {
    margin-bottom: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ch-scenario-grid pre {
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 7px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.85;
    color: #41533a;
    overflow-x: auto;
}

.ch-scenario-grid p, .ch-practice-grid p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-muted);
}

.ch-warning-grid {
    margin-top: var(--spacing-lg);
}

.ch-warning {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 13px 18px;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 3px solid #dc2626;
    background: rgba(220, 38, 38, 0.06);
}

.ch-warning b {
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    color: #b91c1c;
}

.ch-warning span {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.ch-combo-grid pre {
    padding: 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.9;
    color: #41533a;
    overflow-x: auto;
}

@media (max-width: 991px) {
    .ch-nav-grid, .ch-scenario-grid, .ch-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ch-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .ch-nav-grid, .ch-scenario-grid, .ch-practice-grid, .ch-grid-2 {
        grid-template-columns: 1fr;
    }

    .ch-accordion-header {
        padding: 15px 16px;
    }

    .ch-accordion.is-open .ch-accordion-content {
        padding: 6px 16px 22px;
    }
}

/* ================================================================
   Web 安全清单（ws-）
   ================================================================ */

/* 严重度图例 */
.ws-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: var(--spacing-lg);
    padding: 14px 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.75);
}

.ws-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ws-legend-dot--critical, .ws-legend-dot--high, .ws-legend-dot--medium,
.ws-legend-dot--low, .ws-legend-dot--info {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* 严重度色板 */
.ws-legend-dot--critical, .ws-card-bar--critical { background: #dc2626; }
.ws-legend-dot--high,    .ws-card-bar--high    { background: #ea580c; }
.ws-legend-dot--medium,  .ws-card-bar--medium  { background: #ca8a04; }
.ws-legend-dot--low,     .ws-card-bar--low     { background: #2563eb; }
.ws-legend-dot--info,    .ws-card-bar--info    { background: #64748b; }

/* 主题卡网格 */
.ws-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ws-card {
    position: relative;
    padding: 22px 22px 22px 26px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ws-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
}

.ws-card-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.ws-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ws-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-light);
}

.ws-card-icon--critical { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.08); }
.ws-card-icon--high    { border-color: rgba(234, 88, 12, 0.35); background: rgba(234, 88, 12, 0.08); }
.ws-card-icon--medium  { border-color: rgba(202, 138, 4, 0.35); background: rgba(202, 138, 4, 0.08); }
.ws-card-icon--low     { border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.08); }
.ws-card-icon--info    { border-color: rgba(100, 116, 139, 0.35); background: rgba(100, 116, 139, 0.08); }

.ws-card-title-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ws-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.ws-card-badge {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

.ws-card-badge--critical { background: #dc2626; }
.ws-card-badge--high     { background: #ea580c; }
.ws-card-badge--medium   { background: #ca8a04; }
.ws-card-badge--low      { background: #2563eb; }
.ws-card-badge--info     { background: #64748b; }

.ws-card-desc {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.ws-card-defense {
    margin-bottom: 14px;
    padding: 12px 15px;
    border-radius: 8px;
    background: rgba(93, 151, 67, 0.07);
    border: 1px solid rgba(93, 151, 67, 0.14);
}

.ws-card-defense-title {
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ws-card-defense-text {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.ws-card-code {
    border-radius: 8px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    overflow: hidden;
}

.ws-card-code-title {
    padding: 8px 14px;
    border-bottom: 1px dashed rgba(93, 151, 67, 0.20);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ws-card-code pre {
    padding: 13px 15px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.85;
    color: #41533a;
    overflow-x: auto;
}

/* 轻量语法着色（浅底） */
.ws-cm { color: #8aa07c; font-style: italic; }
.ws-kw { color: #8839ef; font-weight: 600; }
.ws-fn { color: #0184bc; }
.ws-str { color: #4a8c33; }
.ws-num { color: #c2570c; }
.ws-annotation { color: #ca8a04; }

/* 汇总统计 */
.ws-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.ws-summary-item {
    padding: 20px 14px;
    text-align: center;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ws-summary-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ws-summary-num {
    display: block;
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ws-summary-num--critical { color: #dc2626; }
.ws-summary-num--high     { color: #ea580c; }
.ws-summary-num--medium   { color: #ca8a04; }
.ws-summary-num--info     { color: #64748b; }
.ws-summary-num--total    { color: var(--primary-color); }

.ws-summary-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* 最佳实践 */
.ws-practices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ws-practice-card {
    position: relative;
    padding: 22px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.ws-practice-number {
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.13);
    user-select: none;
}

.ws-practice-card h3 {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ws-practice-card p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* CTA */
.ws-cta {
    margin-top: var(--spacing-2xl);
    padding: 40px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(93, 151, 67, 0.30);
    background:
        radial-gradient(circle at 50% 0%, rgba(143, 201, 114, 0.28), transparent 60%),
        linear-gradient(160deg, rgba(93, 151, 67, 0.14), rgba(255, 255, 255, 0.90));
}

.ws-cta-title {
    margin-bottom: 10px;
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
    font-weight: 400;
    font-size: 30px;
    color: var(--text-primary);
}

.ws-cta-desc {
    margin-bottom: 20px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.ws-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 26px;
    border-radius: 9px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(93, 151, 67, 0.30);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ws-cta-btn:hover {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(93, 151, 67, 0.36);
}

/* enrich：映射 / 代码双栏 / 清单 / 运营 */
.ws-mapping-grid, .ws-ops-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ws-mapping-grid article, .ws-ops-grid article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ws-mapping-grid article:hover, .ws-ops-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ws-mapping-grid h3, .ws-ops-grid h3 {
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ws-mapping-grid p, .ws-ops-grid p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.ws-code-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.ws-code-duo pre {
    padding: 15px 17px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.85;
    color: #41533a;
    overflow-x: auto;
}

.ws-checklist {
    margin-top: var(--spacing-lg);
    padding: 20px 24px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.16);
    background: rgba(93, 151, 67, 0.06);
}

.ws-checklist h3 {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ws-checklist ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}

.ws-checklist li {
    position: relative;
    padding-left: 24px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.ws-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(93, 151, 67, 0.16);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
    .ws-grid, .ws-practices-grid, .ws-mapping-grid, .ws-ops-grid, .ws-code-duo {
        grid-template-columns: 1fr;
    }

    .ws-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ws-checklist ul {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   语言对比（lc-）与数据库对比（dc-）共享
   ================================================================ */

/* 对比表 */
.lc-table-wrap, .dc-table-wrap, .lc-matrix-wrap, .dc-matrix-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
}

.lc-table, .dc-table, .lc-matrix-table, .dc-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.lc-table th, .dc-table th, .lc-matrix-table th, .dc-matrix-table th {
    padding: 12px 16px;
    background: var(--primary-lighter);
    border-bottom: 2px solid rgba(93, 151, 67, 0.20);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
    text-align: left;
    white-space: nowrap;
}

.lc-table td, .dc-table td, .lc-matrix-table td, .dc-matrix-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: 1.75;
    vertical-align: middle;
}

.lc-table tbody tr, .dc-table tbody tr {
    transition: background-color var(--transition-fast);
}

.lc-table tbody tr:hover, .dc-table tbody tr:hover {
    background: rgba(93, 151, 67, 0.055);
}

.lc-table tbody tr:last-child td, .dc-table tbody tr:last-child td,
.lc-matrix-table tr:last-child td, .dc-matrix-table tr:last-child td {
    border-bottom: none;
}

/* 语言 / 数据库名单元格 */
.lc-table-lang, .dc-table-db {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.lc-table-lang-icon, .dc-table-db-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}

/* 品牌色（表头图标） */
.lc-table-lang-icon--js     { background: #eab308; color: #1a2e05; }
.lc-table-lang-icon--ts     { background: #3178c6; }
.lc-table-lang-icon--java   { background: #ea580c; }
.lc-table-lang-icon--python { background: #3776ab; }
.lc-table-lang-icon--rust   { background: #b7410e; }
.lc-table-lang-icon--go     { background: #00add8; }
.lc-table-lang-icon--csharp { background: #7c3aed; }
.lc-table-lang-icon--kotlin { background: #7f52ff; }
.lc-table-lang-icon--swift  { background: #f05138; }
.lc-table-lang-icon--php    { background: #777bb4; }

.dc-table-db-icon.dc-brand--mysql         { background: #4479a1; }
.dc-table-db-icon.dc-brand--postgresql    { background: #336791; }
.dc-table-db-icon.dc-brand--mariadb       { background: #00838a; }
.dc-table-db-icon.dc-brand--sqlite        { background: #003b57; }
.dc-table-db-icon.dc-brand--redis         { background: #dc382d; }
.dc-table-db-icon.dc-brand--mongodb       { background: #13aa52; }
.dc-table-db-icon.dc-brand--elasticsearch { background: #00a9e5; }
.dc-table-db-icon.dc-brand--clickhouse    { background: #f5c518; color: #3d3200; }

/* 表格小标签 */
.lc-table-tag {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.lc-table-tag--spaced {
    margin-left: 5px;
    background: rgba(59, 130, 246, 0.10);
    color: #2f66d0;
}

.lc-table-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* 评分点 */
.lc-rating, .dc-rating {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}

.lc-dot--filled, .dc-dot--filled {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 4px rgba(93, 151, 67, 0.42);
}

.lc-dot--empty, .dc-dot--empty {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2ecdb;
}

.dc-dot--half {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--primary-color) 50%, #e2ecdb 50%);
}

/* 详情卡片网格 */
.lc-cards-grid, .dc-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.lc-card, .dc-card {
    position: relative;
    padding: 22px 22px 22px 26px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.lc-card-bar, .dc-card-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color), rgba(93, 151, 67, 0.45));
}

.lc-card:hover, .dc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.14);
}

.lc-card-header, .dc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.lc-card-avatar, .dc-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* 卡片头像品牌色 */
.lc-card-avatar--js     { background: #eab308; color: #1a2e05; }
.lc-card-avatar--ts     { background: #3178c6; }
.lc-card-avatar--java   { background: #ea580c; }
.lc-card-avatar--python { background: #3776ab; }
.lc-card-avatar--rust   { background: #b7410e; }
.lc-card-avatar--go     { background: #00add8; }
.lc-card-avatar--csharp { background: #7c3aed; }
.lc-card-avatar--kotlin { background: #7f52ff; }
.lc-card-avatar--swift  { background: #f05138; }
.lc-card-avatar--php    { background: #777bb4; }

.dc-card-avatar.dc-brand-text--mysql         { background: #4479a1; }
.dc-card-avatar.dc-brand-text--postgresql    { background: #336791; }
.dc-card-avatar.dc-brand-text--mariadb       { background: #00838a; }
.dc-card-avatar.dc-brand-text--sqlite        { background: #003b57; }
.dc-card-avatar.dc-brand-text--redis         { background: #dc382d; }
.dc-card-avatar.dc-brand-text--mongodb       { background: #13aa52; }
.dc-card-avatar.dc-brand-text--elasticsearch { background: #00a9e5; }
.dc-card-avatar.dc-brand-text--clickhouse    { background: #f5c518; color: #3d3200; }

.lc-card-name, .dc-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.lc-card-version, .dc-card-version {
    margin-left: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 2px;
    white-space: nowrap;
}

.lc-card-info-item, .dc-card-info-item {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-light);
    font-size: 12.5px;
    line-height: 1.7;
}

.lc-card-info-label, .dc-card-info-label {
    flex: none;
    width: 74px;
    color: var(--text-muted);
}

.lc-card-info-value, .dc-card-info-value {
    color: var(--text-secondary);
}

.lc-card-desc, .dc-card-desc {
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.lc-card-desc--flush-top {
    margin-top: 4px;
}

.lc-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lc-card-tag {
    padding: 2px 11px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.10);
    color: var(--primary-dark);
    font-size: 11.5px;
    font-weight: 600;
}

.dc-card-features h4 {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
}

.dc-card-features ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px 16px;
}

.dc-card-features li {
    position: relative;
    padding-left: 16px;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.dc-card-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* enrich：选型卡片 / 代码对比 / 建议 */
.lc-enrich, .dc-enrich {
    padding-top: var(--spacing-xl);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}

.lc-enrich-title, .dc-enrich-title {
    margin: 26px 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.lc-choice-grid, .dc-workload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.lc-choice-card, .dc-workload-grid article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.lc-choice-card:hover, .dc-workload-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.lc-choice-card h3, .dc-workload-grid h3 {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.lc-choice-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lc-choice-columns h5 {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.lc-choice-columns > div:first-child h5 { color: var(--primary-dark); }
.lc-choice-columns > div:last-child h5 { color: #c2570c; }

.lc-choice-columns li {
    position: relative;
    padding-left: 15px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.lc-choice-columns > div:first-child li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.lc-choice-columns > div:last-child li::before {
    content: '!';
    position: absolute;
    left: 2px;
    color: #ea580c;
    font-weight: 700;
}

.lc-code-compare .lc-code-grid, .dc-ops-grid, .dc-arch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.lc-code-grid pre {
    padding: 15px 17px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.85;
    color: #41533a;
    overflow-x: auto;
}

.lc-team-advice ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
}

.lc-team-advice li {
    position: relative;
    padding: 12px 16px 12px 38px;
    border-radius: 8px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.lc-team-advice li::before {
    content: '◆';
    position: absolute;
    left: 16px;
    top: 12px;
    color: var(--primary-color);
    font-size: 11px;
}

.dc-ops-card, .dc-arch-card {
    padding: 18px 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.dc-ops-card:hover, .dc-arch-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.dc-ops-card strong, .dc-arch-card b {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-primary);
}

.dc-arch-card.dc-danger {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.05);
}

.dc-arch-card.dc-danger b {
    color: #b91c1c;
}

@media (max-width: 991px) {
    .lc-cards-grid, .dc-cards-grid, .lc-choice-grid, .dc-workload-grid,
    .lc-code-compare .lc-code-grid, .dc-ops-grid, .dc-arch-grid {
        grid-template-columns: 1fr;
    }

    .lc-team-advice ul {
        grid-template-columns: 1fr;
    }

    .dc-card-features ul {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   API 设计原则（ad-）
   ================================================================ */
.ad-card {
    padding: 26px 28px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-height) + 20px);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.ad-card + .ad-card {
    margin-top: var(--spacing-lg);
}

.ad-card:hover {
    border-color: rgba(93, 151, 67, 0.28);
    box-shadow: 0 10px 26px rgba(93, 151, 67, 0.10);
}

.ad-card-intro {
    background:
        linear-gradient(140deg, rgba(93, 151, 67, 0.10), rgba(255, 255, 255, 0.88) 55%);
    border-color: rgba(93, 151, 67, 0.28);
}

.ad-card-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}

.ad-card-num {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.32);
}

.ad-card-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
}

.ad-card-desc {
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.ad-subtitle {
    margin: 20px 0 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ad-code, .ad-code-sm {
    padding: 15px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.9;
    color: #41533a;
    white-space: pre-wrap;
    word-break: break-all;
}

.ad-code-sm {
    padding: 11px 14px;
    font-size: 12px;
}

.ad-code-comment {
    color: #8aa07c;
    font-style: italic;
}

.ad-code-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ad-code-block {
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    overflow: hidden;
}

.ad-code-tag {
    display: inline-block;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.ad-code-2xx { background: var(--primary-color); }
.ad-code-3xx { background: #2563eb; }
.ad-code-4xx { background: #ea580c; }
.ad-code-5xx { background: #dc2626; }

.ad-code-block pre {
    padding: 13px 16px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.85;
    color: #41533a;
    overflow-x: auto;
}

.ad-table-wrap {
    overflow-x: auto;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.75);
}

.ad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ad-table th {
    padding: 11px 15px;
    background: var(--primary-lighter);
    border-bottom: 2px solid rgba(93, 151, 67, 0.20);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
    text-align: left;
    white-space: nowrap;
}

.ad-table td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: 1.75;
    vertical-align: top;
}

.ad-table tbody tr:hover {
    background: rgba(93, 151, 67, 0.055);
}

.ad-table tbody tr:last-child td {
    border-bottom: none;
}

.ad-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.ad-two-col-item {
    padding: 18px 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.75);
}

.ad-two-col-item h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* HTTP 方法卡 */
.ad-method-grid {
    display: grid;
    gap: 12px;
}

.ad-method-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ad-method-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.ad-method-badge {
    flex: none;
    min-width: 74px;
    padding: 5px 10px;
    border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 800;
    text-align: center;
    color: #fff;
}

.ad-method-get    .ad-method-badge { background: var(--primary-color); }
.ad-method-post   .ad-method-badge { background: #2563eb; }
.ad-method-put    .ad-method-badge { background: #ca8a04; }
.ad-method-patch  .ad-method-badge { background: #7c3aed; }
.ad-method-delete .ad-method-badge { background: #dc2626; }

.ad-method-body strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
    color: var(--text-primary);
}

.ad-method-body p {
    margin-bottom: 6px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.ad-method-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: var(--primary-dark);
}

/* 认证卡 */
.ad-auth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ad-auth-card {
    padding: 22px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.ad-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(93, 151, 67, 0.10);
    border: 1px solid rgba(93, 151, 67, 0.16);
    color: var(--auth-color, var(--primary-color));
}

.ad-auth-card h3 {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ad-auth-card > p {
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.ad-list {
    margin-top: 10px;
}

.ad-list li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.ad-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.ad-list-sm li {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* REST 成熟度 */
.ad-maturity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.ad-maturity-item {
    padding: 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ad-maturity-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ad-maturity-level {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.12);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ad-maturity-item h3 {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.ad-maturity-item p {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* 工具格 */
.ad-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ad-tool-item {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.ad-tool-item:hover {
    transform: translateY(-2px);
    color: var(--primary-dark);
}

/* enrich */
.ad-enrich, .ad-contract {
    padding-top: var(--spacing-xl);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}

.ad-spec-grid, .ad-check-grid, .ad-contract-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ad-spec-grid article, .ad-check-grid > div, .ad-contract-grid article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ad-spec-grid article:hover, .ad-check-grid > div:hover, .ad-contract-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ad-spec-grid h3, .ad-check-grid h3, .ad-contract-grid h3 {
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ad-spec-grid p, .ad-check-grid p, .ad-contract-grid p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    .ad-code-group, .ad-two-col, .ad-auth-grid, .ad-maturity-grid,
    .ad-tools-grid, .ad-spec-grid, .ad-check-grid, .ad-contract-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   CSS 常用技巧（ct-）
   ================================================================ */

/* 分类粘性导航 */
.ct-nav {
    position: sticky;
    top: calc(var(--header-height) + 12px);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: var(--spacing-lg);
    border-radius: 12px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.ct-nav-link {
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.ct-nav-link:hover {
    color: var(--primary-dark);
    background: rgba(93, 151, 67, 0.12);
}

.ct-category-title {
    margin: var(--spacing-xl) 0 var(--spacing-md);
}

.ct-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ct-tip {
    position: relative;
    padding: 22px 22px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.ct-tip:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.30);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ct-tip-num {
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.15);
    user-select: none;
}

.ct-tip-title {
    margin-bottom: 8px;
    padding-right: 52px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ct-tip-desc {
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.ct-code {
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.85;
    color: #41533a;
    white-space: pre;
    overflow-x: auto;
}

.ct-comment {
    color: #8aa07c;
    font-style: italic;
}

/* enrich */
.ct-enrich, .ct-compat {
    padding-top: var(--spacing-xl);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}

.ct-extra-grid, .ct-compat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ct-extra-grid article, .ct-compat-grid article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ct-extra-grid article:hover, .ct-compat-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ct-extra-grid h3, .ct-compat-grid h3 {
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ct-extra-grid p, .ct-compat-grid p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.ct-extra-grid pre, .ct-compat-grid pre {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 7px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.8;
    color: #41533a;
    overflow-x: auto;
}

.ct-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: var(--spacing-md);
}

.ct-modern code {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(93, 151, 67, 0.20);
    background: rgba(93, 151, 67, 0.08);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.ct-modern code:hover {
    transform: translateY(-2px);
    background: rgba(93, 151, 67, 0.16);
}

.ct-troubleshoot {
    margin-top: var(--spacing-md);
    padding: 20px 24px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: rgba(93, 151, 67, 0.05);
    counter-reset: ctstep;
}

.ct-troubleshoot h3 {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ct-troubleshoot li {
    position: relative;
    padding: 7px 0 7px 40px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
    counter-increment: ctstep;
}

.ct-troubleshoot li::before {
    content: counter(ctstep, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 7px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-color);
}

@media (max-width: 991px) {
    .ct-grid, .ct-extra-grid, .ct-compat-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   npm 常用包推荐（np-）
   ================================================================ */

/* 分类粘性导航 */
.np-category-nav {
    position: sticky;
    top: calc(var(--header-height) + 12px);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: var(--spacing-lg);
    border-radius: 12px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.np-cat-link {
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.np-cat-link:hover {
    color: var(--primary-dark);
    background: rgba(93, 151, 67, 0.12);
}

.np-cat-title {
    margin: var(--spacing-xl) 0 var(--spacing-md);
}

.np-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.np-pkg {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.np-pkg:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.30);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.np-pkg-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.np-pkg-name {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-dark);
}

.np-pkg-version {
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

.np-pkg-desc {
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.np-pkg-install {
    margin-bottom: 12px;
    padding: 9px 14px;
    border-radius: 7px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: #41533a;
    overflow-x: auto;
    white-space: nowrap;
}

.np-pkg-install::before {
    content: '$ ';
    color: var(--primary-color);
    font-weight: 700;
}

code.np-pkg-install::before {
    content: '';
}

.np-pkg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.np-tag {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.10);
    color: var(--primary-dark);
    font-size: 11.5px;
    font-weight: 600;
}

/* enrich */
.np-enrich, .np-maintenance {
    padding-top: var(--spacing-xl);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}

.np-enrich-title {
    margin: 24px 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.np-principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.np-principles article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.np-principles h3 {
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.np-principles p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.np-extra-grid {
    grid-template-columns: repeat(4, 1fr);
}

.np-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.np-compare-card {
    padding: 18px 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.np-compare-card h4, .np-governance h3 {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.np-governance {
    margin-top: var(--spacing-lg);
    padding: 20px 24px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.16);
    background: rgba(93, 151, 67, 0.06);
}

.np-governance li {
    position: relative;
    padding: 5px 0 5px 24px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.np-governance li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(93, 151, 67, 0.16);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-warning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.np-warning-grid article {
    padding: 20px;
    border-radius: 9px;
    border-left: 3px solid #ea580c;
    border-top: 1px solid rgba(234, 88, 12, 0.18);
    border-right: 1px solid rgba(234, 88, 12, 0.18);
    border-bottom: 1px solid rgba(234, 88, 12, 0.18);
    background: rgba(234, 88, 12, 0.05);
}

.np-warning-grid h3 {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #c2570c;
}

.np-warning-grid p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

@media (max-width: 1199px) {
    .np-extra-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .np-grid, .np-principles, .np-compare-grid, .np-warning-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   浏览器调试技巧（bd-）
   ================================================================ */
.bd-panels {
    display: grid;
    gap: 14px;
}

.bd-panel {
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    scroll-margin-top: calc(var(--header-height) + 20px);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.bd-panel.bd-is-expanded {
    border-color: rgba(93, 151, 67, 0.34);
    box-shadow: 0 10px 26px rgba(93, 151, 67, 0.11);
}

.bd-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 22px;
    text-align: left;
    transition: background-color var(--transition-fast);
}

button.bd-panel-header:hover {
    background: rgba(93, 151, 67, 0.055);
}

.bd-panel-header-static {
    cursor: default;
}

.bd-panel-num {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 17px;
    font-weight: 800;
    color: rgba(93, 151, 67, 0.55);
}

.bd-panel-name {
    flex: 1;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.bd-panel-icon {
    flex: none;
    display: flex;
    color: var(--text-muted);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color var(--transition-fast);
}

.bd-panel.bd-is-expanded .bd-panel-icon {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.bd-panel-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bd-panel.bd-is-expanded .bd-panel-body,
.bd-panel-body.bd-panel-body-open {
    grid-template-rows: 1fr;
}

.bd-panel-body > .bd-panel-desc,
.bd-panel-body > .bd-tip-item,
.bd-panel-body > .bd-tips-compact {
    overflow: hidden;
}

.bd-panel-desc {
    padding: 4px 22px 12px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-muted);
    border-top: 1px dashed rgba(93, 151, 67, 0.22);
}

.bd-tip-item {
    padding: 12px 22px;
    border-top: 1px dashed rgba(93, 151, 67, 0.16);
}

.bd-tip-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    color: var(--primary-dark);
}

.bd-tip-item p {
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.bd-code {
    padding: 12px 14px;
    border-radius: 7px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.85;
    color: #41533a;
    white-space: pre-wrap;
    word-break: break-all;
}

.bd-comment {
    color: #8aa07c;
    font-style: italic;
}

/* 快捷键紧凑墙 */
.bd-tips-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 22px 22px;
    border-top: 1px dashed rgba(93, 151, 67, 0.22);
}

.bd-tip-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 8px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.bd-tip-mini:hover {
    transform: translateY(-2px);
    border-color: rgba(93, 151, 67, 0.35);
}

.bd-tip-mini kbd {
    flex: none;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid rgba(93, 151, 67, 0.25);
    border-bottom-width: 2px;
    background: var(--primary-lighter);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-dark);
}

/* enrich：问题配方 */
.bd-enrich {
    padding-top: var(--spacing-xl);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}

.bd-recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.bd-recipe-grid article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.bd-recipe-grid h3 {
    margin-bottom: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.bd-recipe-grid ol {
    counter-reset: bdstep;
}

.bd-recipe-grid li {
    position: relative;
    padding: 4px 0 4px 30px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    counter-increment: bdstep;
}

.bd-recipe-grid li::before {
    content: counter(bdstep);
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(93, 151, 67, 0.13);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd-deep-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.bd-deep-grid > div {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
}

.bd-deep-grid h3 {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.bd-deep-grid p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.bd-deep-grid pre {
    padding: 12px 14px;
    border-radius: 7px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.8;
    color: #41533a;
    overflow-x: auto;
}

@media (max-width: 991px) {
    .bd-tips-compact, .bd-recipe-grid, .bd-deep-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   色彩搭配推荐（cp-）
   ================================================================ */
.cp-palette {
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.cp-palette + .cp-palette {
    margin-top: var(--spacing-lg);
}

.cp-palette:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.30);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10);
}

.cp-palette-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.cp-palette-num {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 26px;
    font-weight: 800;
    color: rgba(93, 151, 67, 0.30);
}

.cp-palette-name {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.cp-palette-tag {
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: 11.5px;
    font-weight: 700;
}

/* 预览渐变（每套配色） */
.cp-palette-preview {
    height: 96px;
    border-radius: 9px;
    margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-normal);
}

.cp-palette:hover .cp-palette-preview {
    transform: scale(1.015);
}

.cp-palette--deep-space      .cp-palette-preview { background: linear-gradient(120deg, #0f172a, #1e3a8a, #38bdf8, #0ea5e9, #020617); }
.cp-palette--midnight-violet .cp-palette-preview { background: linear-gradient(120deg, #1a1a2e, #16213e, #0f3460, #e94560, #533483); }
.cp-palette--minimal-white   .cp-palette-preview { background: linear-gradient(120deg, #f8f9fa, #ffffff, #2563eb, #64748b, #1e293b); }
.cp-palette--hacker-green    .cp-palette-preview { background: linear-gradient(120deg, #1b1b1b, #0d2818, #00ff88, #00cc6a, #003d1a); }
.cp-palette--amber-dusk      .cp-palette-preview { background: linear-gradient(120deg, #1c1917, #451a03, #f59e0b, #d97706, #fbbf24); }
.cp-palette--ocean-heart     .cp-palette-preview { background: linear-gradient(120deg, #0f2b3d, #164e63, #06b6d4, #22d3ee, #0891b2); }
.cp-palette--rose-flame      .cp-palette-preview { background: linear-gradient(120deg, #2d0a1e, #881337, #f43f5e, #fb7185, #e11d48); }
.cp-palette--forest-realm    .cp-palette-preview { background: linear-gradient(120deg, #0f1f0f, #14532d, #22c55e, #4ade80, #166534); }
.cp-palette--cyberpunk       .cp-palette-preview { background: linear-gradient(120deg, #0d0221, #ff2a6d, #05d9e8, #ffce00, #7700ff); }
.cp-palette--japanese-wabi   .cp-palette-preview { background: linear-gradient(120deg, #fefae0, #faedcd, #bc6c25, #606c38, #283618); }
.cp-palette--morandi         .cp-palette-preview { background: linear-gradient(120deg, #8a7f7e, #a68a7c, #d4a373, #ccd5ae, #fefae0); }
.cp-palette--aurora          .cp-palette-preview { background: linear-gradient(120deg, #0c1220, #1a365d, #5d9743, #a78bfa, #38bdf8); }

/* 色值 chips */
.cp-palette-colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.cp-color-chip {
    position: relative;
    height: 58px;
    border-radius: 8px;
    background: var(--chip-color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cp-color-chip:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.cp-color-chip span {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
}

.cp-palette-desc {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.cp-palette-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cp-palette-tags span {
    padding: 2px 11px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.10);
    color: var(--primary-dark);
    font-size: 11.5px;
    font-weight: 600;
}

/* 配色建议 */
.cp-tips {
    margin-top: var(--spacing-2xl);
}

.cp-tips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.cp-tip-card {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.cp-tip-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
}

.cp-tip-card h3 {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.cp-tip-card p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* enrich：UI 落地 */
.cp-enrich, .cp-contrast {
    padding-top: var(--spacing-xl);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}

.cp-ui-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.cp-preview-card {
    padding: 22px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.cp-preview-card .cp-preview-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.cp-preview-warm .cp-preview-badge  { background: rgba(234, 88, 12, 0.12); color: #c2570c; }
.cp-preview-cool .cp-preview-badge  { background: rgba(59, 130, 246, 0.12); color: #2f66d0; }
.cp-preview-card .cp-preview-badge:first-child { background: rgba(93, 151, 67, 0.12); color: var(--primary-dark); }

.cp-preview-card h3 {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.cp-preview-card p {
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.cp-preview-card button {
    padding: 8px 20px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cp-preview-warm button { background: #ea580c; }
.cp-preview-cool button { background: #2563eb; }

.cp-preview-card button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.cp-method-grid, .cp-contrast-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.cp-method-grid article, .cp-contrast-grid article {
    padding: 20px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
}

.cp-method-grid h3, .cp-contrast-grid h3 {
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.cp-method-grid p, .cp-contrast-grid p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.cp-snippet {
    margin-top: var(--spacing-md);
}

.cp-snippet h3 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.cp-snippet pre {
    padding: 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.9;
    color: #41533a;
    overflow-x: auto;
}

.cp-do-dont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.cp-do-dont > div {
    padding: 18px 22px;
    border-radius: 9px;
}

.cp-do-dont > div:first-child {
    border: 1px solid rgba(93, 151, 67, 0.25);
    background: rgba(93, 151, 67, 0.06);
}

.cp-do-dont > div:last-child {
    border: 1px solid rgba(220, 38, 38, 0.22);
    background: rgba(220, 38, 38, 0.05);
}

.cp-do-dont h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
}

.cp-do-dont > div:first-child h4 { color: var(--primary-dark); }
.cp-do-dont > div:last-child h4 { color: #b91c1c; }

.cp-do-dont li {
    position: relative;
    padding: 4px 0 4px 20px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.cp-do-dont > div:first-child li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.cp-do-dont > div:last-child li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 700;
}

@media (max-width: 1199px) {
    .cp-tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .cp-palette-colors {
        grid-template-columns: repeat(5, 1fr);
    }

    .cp-ui-preview, .cp-method-grid, .cp-contrast-grid, .cp-do-dont {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .cp-palette-colors {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-tips-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   不息commit 专题页（cm-）
   ================================================================ */

/* 核心观点卡 */
.cm-insight {
    position: relative;
    padding: 24px 22px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.cm-insight:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.cm-insight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 13px;
    font-size: 25px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
    transition: transform var(--transition-normal);
}

.cm-insight:hover .cm-insight-icon {
    transform: scale(1.12) rotate(-8deg);
}

.cm-insight-tag {
    position: absolute;
    top: 20px;
    right: 18px;
}

.cm-insight h4 {
    margin-bottom: 8px;
    padding-right: 56px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-primary);
}

.cm-insight p {
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* 章节 */
.cm-chapter {
    display: grid;
    grid-template-columns: 218px 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.cm-chapter-side {
    position: relative;
    align-self: start;
}

.cm-chapter-num {
    display: block;
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
    font-size: 74px;
    line-height: 1;
    color: rgba(93, 151, 67, 0.22);
    user-select: none;
}

.cm-chapter-label {
    display: inline-block;
    margin: 8px 0 12px;
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.12);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.cm-chapter-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--text-primary);
}

.cm-chapter-subtitle {
    margin-top: 7px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
}

.cm-chapter-body > p {
    margin-bottom: 14px;
    font-size: 14.5px;
    line-height: 2.05;
    color: var(--text-secondary);
}

.cm-chapter-body > p strong {
    color: var(--primary-dark);
}

.cm-chapter-body .pg-quote {
    margin: 18px 0;
}

.cm-quote-large {
    font-size: 16.5px;
}

.cm-text-glow {
    color: var(--primary-dark);
    text-shadow: 0 0 14px rgba(93, 151, 67, 0.35);
}

.cm-text-danger {
    color: #dc2626;
    font-weight: 700;
}

/* 洞察高亮框 */
.cm-highlight {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 15px 18px;
    border-radius: 9px;
    border-left: 3px solid var(--primary-color);
    background: rgba(93, 151, 67, 0.07);
}

.cm-highlight--accent {
    border-left-color: #ea580c;
    background: rgba(234, 88, 12, 0.06);
}

.cm-highlight-icon {
    flex: none;
    font-size: 19px;
    line-height: 1.5;
}

.cm-highlight p {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.cm-highlight strong {
    color: var(--primary-dark);
}

.cm-highlight--accent strong {
    color: #c2570c;
}

/* 路线对比卡 */
.cm-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin: 18px 0;
}

.cm-compare {
    --cm-c: 93, 151, 67;
    position: relative;
    padding: 20px 20px 18px;
    border-radius: 9px;
    border: 1px solid rgba(var(--cm-c), 0.22);
    background: linear-gradient(160deg, rgba(var(--cm-c), 0.07), rgba(255, 255, 255, 0.85));
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.cm-compare:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(var(--cm-c), 0.15);
}

.cm-compare--hot    { --cm-c: 234, 88, 12; }
.cm-compare--stable { --cm-c: 37, 99, 235; }
.cm-compare--wide   { --cm-c: 124, 58, 237; }
.cm-compare--new    { --cm-c: 93, 151, 67; }

.cm-compare-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(var(--cm-c), 0.92);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.cm-compare h4 {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.cm-compare p {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* 正反案例 */
.cm-examples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: 18px;
}

.cm-example {
    padding: 20px;
    border-radius: 9px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.cm-example--bad {
    border: 1px solid rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.045);
}

.cm-example--good {
    border: 1px solid rgba(93, 151, 67, 0.30);
    background: rgba(93, 151, 67, 0.06);
}

.cm-example-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.cm-example-icon {
    font-size: 17px;
}

.cm-example-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.cm-example--bad .cm-example-label { color: #b91c1c; }
.cm-example--good .cm-example-label { color: var(--primary-dark); }

.cm-example p {
    font-size: 13px;
    line-height: 1.95;
    color: var(--text-secondary);
}

/* 时间线区 */
.cm-timeline {
    margin-top: 20px;
    padding: 20px 24px;
    border-radius: 10px;
    border: 1px solid rgba(93, 151, 67, 0.16);
    background: rgba(93, 151, 67, 0.05);
}

.cm-timeline-title {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.04em;
}

.cm-age {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 11px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.14);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
}

.cm-timeline .pg-timeline-item p {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* 终极一问 */
.cm-final {
    margin: 22px 0 18px;
    padding: 34px 24px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid rgba(93, 151, 67, 0.28);
    background:
        radial-gradient(circle at 50% 0%, rgba(143, 201, 114, 0.25), transparent 62%),
        linear-gradient(165deg, rgba(93, 151, 67, 0.12), rgba(255, 255, 255, 0.90));
}

.cm-final-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(93, 151, 67, 0.40);
    animation: floatY 3s ease-in-out infinite;
}

.cm-final p {
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.cm-final h4 {
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
    font-weight: 400;
    font-size: 30px;
    color: var(--text-primary);
}

.cm-final-copy {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 2;
    color: var(--text-secondary);
}

/* 金句卡 */
.cm-quotecard {
    position: relative;
    padding: 24px 22px 20px 52px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: linear-gradient(135deg, rgba(93, 151, 67, 0.08), rgba(255, 255, 255, 0.70));
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.cm-quotecard:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(93, 151, 67, 0.13);
}

.cm-quotecard::before {
    content: '\201C';
    position: absolute;
    left: 16px;
    top: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-color);
    opacity: 0.5;
}

.cm-quotecard p {
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--text-primary);
}

/* CTA */
.cm-cta {
    position: relative;
    padding: 48px 44px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(93, 151, 67, 0.30);
    background:
        radial-gradient(circle at 15% 20%, rgba(143, 201, 114, 0.26), transparent 46%),
        radial-gradient(circle at 85% 80%, rgba(93, 151, 67, 0.20), transparent 50%),
        linear-gradient(150deg, rgba(93, 151, 67, 0.14), rgba(255, 255, 255, 0.92));
    overflow: hidden;
}

.cm-cta-glyph {
    position: absolute;
    right: 20px;
    bottom: -30px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 110px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.09);
    user-select: none;
    pointer-events: none;
}

.cm-cta h2 {
    margin-bottom: 12px;
    font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
    font-weight: 400;
    font-size: 36px;
    color: var(--text-primary);
}

.cm-cta > p {
    margin-bottom: 24px;
    font-size: 14.5px;
    line-height: 2;
    color: var(--text-secondary);
}

.cm-cta-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .cm-chapter {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 24px 20px;
    }

    .cm-chapter-num {
        font-size: 56px;
    }

    .cm-compare-grid, .cm-examples {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   关于博主页（ab-）
   ================================================================ */

/* 头图：双栏（文字 + 印章头像） */
.ab-masthead-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-xl);
    align-items: center;
}

.ab-slogan {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ab-sub {
    margin-bottom: 18px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.ab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.ab-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 158px;
}

.ab-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(93, 151, 67, 0.40);
    animation: dnSpin 18s linear infinite;
}

/* 印泥圆盘层：与右侧 author-widget 头像同构的两层结构。
   圆盘（带圆角）只裁它自己的渐变背景；内层 img 无圆角，绝不被削角。
   此前把圆角/背景/边框全压在 img 上，border-radius:50% 会裁切 img 绘制内容，
   logo 笔画顶到方形上下边 → 圆裁切削掉 logo 上下尖端（即截图所见）。 */
.ab-avatar-wrap::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    border: 3px solid var(--primary-lighter);
    background:
        radial-gradient(circle at 50% 40%, #ffffff 0%, rgba(255, 255, 255, 0.95) 55%, var(--primary-lighter) 100%);
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.9),
        inset 0 -3px 8px rgba(93, 151, 67, 0.10),
        0 10px 28px rgba(93, 151, 67, 0.22);
}

/* 内层印章：方形完整显示，无 border-radius 故绝不裁切（logo 大小保持 116 不变） */
.ab-avatar-img {
    position: relative;
    z-index: 1;
    width: 116px;
    height: 116px;
    object-fit: contain;
    display: block;
    padding: 5px;
    filter: drop-shadow(0 2px 4px rgba(93, 151, 67, 0.18));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ab-avatar-wrap:hover .ab-avatar-img {
    transform: rotate(360deg) scale(1.05);
}

/* 关于我：文字 + 代码卡 */
.ab-about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.ab-about-text p {
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 2.05;
    color: var(--text-secondary);
}

.ab-about-text strong {
    color: var(--primary-dark);
}

.ab-code {
    border-radius: 10px;
    border: 1px solid rgba(93, 151, 67, 0.16);
    background: #f8fbf4;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ab-code-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(93, 151, 67, 0.14);
    background: rgba(93, 151, 67, 0.06);
}

.ab-code-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.ab-code-dot--red    { background: #f87171; }
.ab-code-dot--yellow { background: #fbbf24; }
.ab-code-dot--green  { background: #4ade80; }

.ab-code-title {
    margin-left: 8px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ab-code-body {
    padding: 16px 18px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.9;
    color: #41533a;
    overflow-x: auto;
}

.ab-kw  { color: #8839ef; font-weight: 600; }
.ab-var { color: #0184bc; }
.ab-str { color: #4a8c33; }

/* 个人档案 */
.ab-profile-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.ab-profile {
    padding: 20px 16px;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ab-profile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ab-profile-icon {
    display: block;
    margin-bottom: 9px;
    font-size: 26px;
}

.ab-profile-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    letter-spacing: 0.10em;
    color: var(--text-muted);
}

.ab-profile-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.6;
}

/* 三大方向面板 */
.ab-dir-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.ab-dir-intro h3 {
    margin: 12px 0 9px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-dir-intro > p {
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--text-secondary);
}

.ab-bullets li {
    position: relative;
    padding: 5px 0 5px 22px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.ab-bullets li::before {
    content: '▸';
    position: absolute;
    left: 4px;
    color: var(--primary-color);
    font-weight: 700;
}

.ab-skills {
    display: grid;
    gap: 12px;
}

.ab-skill {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ab-skill:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.ab-skill-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 20px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}

.ab-skill-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 3px;
}

.ab-skill-head h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-skill-level {
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.12);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

.ab-skill p {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

.ab-articles {
    margin-top: var(--spacing-lg);
}

.ab-articles h4 {
    margin-bottom: 11px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
}

.ab-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ab-articles-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ab-articles-grid a span {
    flex: none;
    color: var(--primary-color);
    transition: transform var(--transition-fast);
}

.ab-articles-grid a:hover {
    color: var(--primary-dark);
    border-color: rgba(93, 151, 67, 0.40);
    transform: translateX(3px);
}

.ab-articles-grid a:hover span {
    transform: translateX(3px);
}

/* 成长历程：年份卡片墙 */
.ab-milestones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.ab-milestone {
    position: relative;
    padding: 22px 22px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.12);
    border-top: 3px solid var(--primary-color);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ab-milestone:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ab-milestone-year {
    display: inline-block;
    margin-bottom: 9px;
    padding: 2px 13px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.13);
    color: var(--primary-dark);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    font-weight: 800;
}

.ab-milestone h3 {
    margin-bottom: 7px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-milestone p {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* 写作理念 */
.ab-philosophy {
    position: relative;
    padding: 24px 22px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ab-philosophy:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ab-philosophy-num {
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.13);
    user-select: none;
}

.ab-philosophy-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 26px;
}

.ab-philosophy h3 {
    margin-bottom: 7px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-philosophy p {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* 技术栈 */
.ab-stack-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.ab-stack {
    padding: 16px 12px;
    text-align: center;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.ab-stack:hover {
    transform: translateY(-3px);
    border-color: rgba(93, 151, 67, 0.38);
    box-shadow: var(--shadow-md);
}

.ab-stack-icon {
    display: block;
    margin-bottom: 7px;
    font-size: 23px;
}

.ab-stack h4 {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-stack-tag {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: 10.5px;
    font-weight: 700;
}

/* 网站架构 */
.ab-arch {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ab-arch:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.ab-arch-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 19px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}

.ab-arch-label {
    flex: none;
    width: 66px;
    font-size: 12px;
    color: var(--text-muted);
}

.ab-arch-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

/* 项目经历 */
.ab-project {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ab-project:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.ab-project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ab-project-icon {
    font-size: 26px;
}

.ab-project h3 {
    margin-bottom: 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-project p {
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.ab-project-techs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.ab-project-techs span {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(93, 151, 67, 0.10);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 600;
}

/* 开源与社区 */
.ab-oss-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ab-oss {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ab-oss:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(93, 151, 67, 0.12);
}

.ab-oss-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 22px;
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}

.ab-oss h3 {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-oss p {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.ab-oss strong {
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

/* 联系我 */
.ab-contact {
    padding: 22px 20px;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.ab-contact:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.40);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.14);
}

.ab-contact-icon {
    display: block;
    margin-bottom: 9px;
    font-size: 27px;
}

.ab-contact h4 {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-contact p {
    font-size: 12.5px;
    color: var(--text-muted);
    word-break: break-all;
}

@media (max-width: 1199px) {
    .ab-profile-grid, .ab-stack-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .ab-masthead-grid {
        grid-template-columns: 1fr;
    }

    .ab-avatar-wrap {
        order: -1;
        margin: 0 auto;
    }

    .ab-about-grid, .ab-dir-grid, .ab-oss-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767px) {
    .ab-profile-grid, .ab-stack-grid, .ab-milestones, .ab-articles-grid {
        grid-template-columns: 1fr;
    }

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

/* ================================================================
   文章分类页（cg-）
   ================================================================ */
.cg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.cg-card {
    --cg-c: 93, 151, 67;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.cg-card--frontend { --cg-c: 93, 151, 67; }
.cg-card--java     { --cg-c: 59, 130, 246; }
.cg-card--ai       { --cg-c: 147, 51, 234; }

.cg-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--cg-c), 0.42);
    box-shadow: 0 16px 34px rgba(var(--cg-c), 0.16);
    color: var(--text-primary);
}

.cg-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cg-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 24px;
    background: linear-gradient(150deg, rgba(var(--cg-c), 0.16), rgba(var(--cg-c), 0.05));
    border: 1px solid rgba(var(--cg-c), 0.24);
    transition: transform var(--transition-normal);
}

.cg-card:hover .cg-card-icon {
    transform: scale(1.12) rotate(-8deg);
}

.cg-card-count {
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(var(--cg-c), 0.11);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.cg-card-count b {
    font-size: 14px;
    font-weight: 800;
    color: rgb(var(--cg-c));
    font-variant-numeric: tabular-nums;
}

.cg-card-dir {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgb(var(--cg-c));
}

.cg-card-body h3 {
    margin-bottom: 7px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.45;
}

.cg-card-body p {
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.cg-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: rgb(var(--cg-c));
}

.cg-card-link span {
    transition: transform var(--transition-fast);
}

.cg-card:hover .cg-card-link span {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .cg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .cg-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- 17. 响应式 ---------- */
@media (max-width: 1199px) {
    .pg-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .pg-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .pg-section {
        margin-top: var(--spacing-xl);
    }

    .pg-grid-2,
    .pg-grid-3,
    .pg-grid-4 {
        grid-template-columns: 1fr;
    }

    .pg-masthead-glyph {
        right: -14px;
        font-size: 130px;
    }

    .pg-tabs {
        display: flex;
    }

    .pg-tab {
        flex: 1;
        justify-content: center;
    }

    .pg-accordion-header {
        padding: 15px 16px;
    }

    .pg-accordion-content {
        padding: 6px 16px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pg-marquee-track {
        animation: none;
    }

    .pg-overline-dot {
        animation: none;
    }
}