/* Here is your custom css styles. */

:root {
    --easybr-blue-900: #0b2c72;
    --easybr-blue-800: #103a9d;
    --easybr-blue-700: #1d57d2;
    --easybr-blue-500: #2eb7ff;
    --easybr-cyan-300: #8fe4ff;
    --easybr-ink: #16304f;
    --easybr-muted: #60738f;
    --easybr-line: #d8e7fb;
    --easybr-surface: #ffffff;
    --easybr-surface-soft: #f5f9ff;
    --easybr-shadow: 0 24px 70px rgba(12, 38, 89, 0.12);
    --easybr-radius-lg: 28px;
    --easybr-radius-md: 22px;
    --easybr-radius-sm: 16px;
    /* PC 主内容区：1280 通栏版心 + 分断点 gutter（与下方 .container 规则一致） */
    --easybr-max-width: 1280px;
    /* 与 max-width 同阶：手机 100%，平板 1000，桌面 1280 */
    --easybr-content-max: 100%;
    --easybr-gutter: 16px;
    /* 帮助教程：左右翼 + 居中主列（与 helperdoc-layout 一致） */
    --helperdoc-nav-width: 292px;
    --helperdoc-outline-width: 196px;
    --helperdoc-center-max: 1080px;
    --helperdoc-side-gap: 36px;
}

body {
    background:
        radial-gradient(circle at top left, rgba(114, 204, 255, 0.12), transparent 30%),
        linear-gradient(180deg, #eef6ff 0%, #f7fbff 24%, #eef5fb 100%);
    color: var(--easybr-ink);
    overflow-x: hidden;
}

/* 分断点：与官网主容器一致，便于其它模块用 var(--easybr-gutter) 对齐通栏 */
@media only screen and (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --easybr-gutter: 24px;
        --easybr-content-max: 1000px;
    }
}

@media only screen and (min-width: 1200px) {
    :root {
        --easybr-gutter: 32px;
        --easybr-content-max: 1280px;
    }
}

.eb-page-shell,
.down-page,
.service-page-shell,
.contact-page,
.post-container,
main.content {
    position: relative;
}

/*
 * 版心：--easybr-content-max + --easybr-gutter
 * Materialize 对 .container 写了 width:90% / 85% / 70%（见 materialize.min.css）；
 * 若只写一条 width:100% 不加强，在部分层叠下仍会落到 70% 视宽，首页会像「没改仍偏窄」。
 * 用 body/main 提高优先级，并对 width、max-width、box-sizing 使用 !important 锁定覆盖。
 */
body .container,
main .container,
main.content .container,
footer .container,
.eb-container,
#navContainer,
.container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--easybr-content-max) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--easybr-gutter);
    padding-right: var(--easybr-gutter);
}

.eb-page-shell {
    padding: 28px 0 56px;
    background:
        radial-gradient(circle at top left, rgba(73, 146, 255, 0.11), transparent 32%),
        radial-gradient(circle at top right, rgba(38, 211, 198, 0.09), transparent 24%),
        linear-gradient(180deg, #f4f8ff 0%, #eef5fd 52%, #f6f9ff 100%);
}

.eb-page-hero,
.eb-panel,
.eb-card,
.eb-soft-card,
.eb-content-card,
.eb-list-card,
.eb-info-card {
    border-radius: var(--easybr-radius-lg);
    border: 1px solid rgba(197, 214, 242, 0.9);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 60px rgba(30, 62, 123, 0.08);
}

.eb-page-hero {
    padding: 34px;
}

.eb-page-hero h1,
.eb-page-heading h1,
.eb-page-heading h2,
.eb-section-title {
    margin: 0;
    color: #1b3358;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.eb-page-hero h1,
.eb-page-heading h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
}

.eb-section-title,
.eb-page-heading h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.22;
}

.eb-page-kicker,
.eb-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(37, 109, 245, 0.08);
    color: #255fd4;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eb-page-summary,
.eb-page-hero p,
.eb-page-heading p,
.eb-panel p,
.eb-card p,
.eb-info-card p,
.eb-content-card p,
.eb-content-card li,
.archive-summary,
.article-content .summary,
#articleContent p,
#articleContent li {
    color: var(--easybr-muted);
    line-height: 1.9;
}

.eb-chip-row,
.eb-meta-row,
.service-meta,
.down-meta,
.home-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eb-chip,
.eb-meta-row span,
.service-meta span,
.down-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(116, 151, 225, 0.22);
    background: rgba(255, 255, 255, 0.84);
    color: #1d3f7d;
    font-size: 0.92rem;
    font-weight: 600;
}

.eb-btn,
.eb-btn-secondary,
.home-btn,
.down-primary-btn,
.down-secondary-btn,
.service-page-btn,
.contact-btn,
.contact-btn-secondary,
.contact-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 152px;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.eb-btn:hover,
.eb-btn-secondary:hover,
.home-btn:hover,
.down-primary-btn:hover,
.down-secondary-btn:hover,
.service-page-btn:hover,
.contact-btn:hover,
.contact-btn-secondary:hover,
.contact-btn-light:hover {
    transform: translateY(-1px);
}

.eb-btn,
.home-btn-primary,
.down-primary-btn,
.service-page-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
    box-shadow: 0 16px 32px rgba(29, 87, 210, 0.18);
}

.eb-btn-secondary,
.home-btn-secondary,
.down-secondary-btn,
.service-page-btn,
.contact-btn-light {
    color: var(--easybr-blue-900);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(29, 87, 210, 0.18);
}

.eb-content-card {
    padding: 34px 38px;
}

.eb-post-grid .card,
.articles .card,
.cd-timeline-content .card,
.eb-list-card {
    overflow: hidden;
    border-radius: var(--easybr-radius-md);
    border: 1px solid rgba(198, 214, 241, 0.85);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 52px rgba(30, 62, 123, 0.08);
}

.articles .article,
.tags-posts .article,
.cd-timeline-content .article {
    margin-bottom: 24px;
}

.card .card-image img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.card .card-image .card-title {
    width: calc(100% - 24px);
    left: 12px;
    bottom: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(10, 28, 56, 0.02) 0%, rgba(10, 28, 56, 0.74) 100%);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.45;
}

.article-content {
    padding: 22px 22px 16px !important;
}

.publish-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: #6b7f9a;
    font-size: 0.92rem;
}

.article-tags {
    padding: 0 18px 18px !important;
    border-top: none !important;
}

.article-tags .chip,
.chip.bg-color {
    background: rgba(37, 109, 245, 0.08) !important;
    color: #1f56c5 !important;
    border: 1px solid rgba(98, 146, 245, 0.16);
    font-weight: 600;
}

.eb-archive-shell {
    padding: 18px 0 50px;
}

.eb-archive-head {
    margin-bottom: 26px;
}

.eb-archive-panel {
    padding: 28px 30px;
}

.eb-cloud-wrap .card,
#cd-timeline .cd-timeline-img.year,
#cd-timeline .cd-timeline-img.month,
#cd-timeline .cd-timeline-img.day {
    box-shadow: 0 16px 36px rgba(30, 62, 123, 0.08);
}

/* ---------- 分类索引 /categories/ ---------- */
.eb-categories-hub .eb-cat-hero .eb-cat-kicker {
    text-transform: none;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(14, 165, 233, 0.1) 100%);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: #1e40af;
}

.eb-categories-hub .eb-cat-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 248, 255, 0.94) 42%, rgba(255, 255, 255, 0.96) 100%),
        radial-gradient(ellipse 85% 70% at 92% -10%, rgba(59, 130, 246, 0.18), transparent 52%),
        radial-gradient(ellipse 60% 50% at 0% 105%, rgba(14, 165, 233, 0.12), transparent 48%);
    border: 1px solid rgba(163, 196, 243, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 28px 56px rgba(30, 64, 175, 0.07);
}

.eb-cat-hero-title {
    color: #0b2c72;
}

@supports (-webkit-background-clip: text) {
    .eb-cat-hero-title {
        background: linear-gradient(105deg, #0b2c72 0%, #1d4ed8 48%, #0e7490 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.eb-cat-hero-lead {
    max-width: 42rem;
    line-height: 1.65;
}

.eb-cat-hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(191, 219, 254, 0.65);
}

.eb-cat-hero-pill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    padding: 14px 20px;
    min-width: 120px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(191, 219, 254, 0.85);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.06);
}

.eb-cat-hero-stat-num {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1d4ed8;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.eb-cat-hero-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
}

.eb-cat-hero-stat-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 1px solid rgba(30, 64, 175, 0.35);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.28);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

.eb-cat-hero-stat-link:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(37, 99, 235, 0.35);
}

.eb-cat-hero-link-chevron {
    font-size: 0.72rem;
    opacity: 0.85;
    margin-left: 2px;
}

@media (max-width: 600px) {
    .eb-cat-hero-stat-link {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .eb-cat-hero-pill {
        flex: 1;
        min-width: calc(50% - 10px);
    }
}

.eb-cat-cloud-outer {
    margin-top: 8px;
}

.eb-cat-cloud-wrap {
    width: 100%;
}

.eb-cat-cloud-card {
    border-radius: var(--easybr-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(197, 214, 242, 0.9);
    box-shadow: 0 20px 50px rgba(30, 62, 123, 0.08);
}

.eb-cat-cloud-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 36px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.eb-cat-cloud-head-icon {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.14) 0%, rgba(56, 189, 248, 0.12) 100%);
    color: #1d4ed8;
    font-size: 1.5rem;
    border: 1px solid rgba(147, 197, 253, 0.55);
}

.eb-cat-cloud-title {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.22;
}

.eb-cat-cloud-sub {
    margin: 0;
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.65;
    color: #64748b;
    max-width: 52rem;
}

.eb-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 32px 36px 40px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.35) 0%, rgba(255, 255, 255, 0) 48%);
}

.eb-cat-tile {
    --eb-cat-accent: #3b82f6;
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 96px;
    padding: 26px 28px;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.14s ease;
}

.eb-cat-tile-accent-1 {
    --eb-cat-accent: #2563eb;
}

.eb-cat-tile-accent-2 {
    --eb-cat-accent: #0891b2;
}

.eb-cat-tile-accent-3 {
    --eb-cat-accent: #7c3aed;
}

.eb-cat-tile-accent-4 {
    --eb-cat-accent: #059669;
}

.eb-cat-tile-accent-5 {
    --eb-cat-accent: #d97706;
}

.eb-cat-tile:hover {
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(37, 99, 235, 0.12);
    transform: translateY(-3px);
}

.eb-cat-tile.is-active {
    border-color: rgba(37, 99, 235, 0.45);
    background: linear-gradient(165deg, #eff6ff 0%, #ffffff 55%);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.14);
}

.eb-cat-tile-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--eb-cat-accent);
    font-size: 1.7rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.eb-cat-tile-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.eb-cat-tile-name {
    font-weight: 800;
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    color: #0f172a;
    line-height: 1.38;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.eb-cat-tile-meta {
    font-size: clamp(0.9rem, 1vw, 0.98rem);
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.eb-cat-tile-go {
    flex-shrink: 0;
    align-self: center;
    min-width: 1.5rem;
    margin-left: 4px;
    color: #94a3b8;
    font-size: 1.05rem;
    transition: color 0.15s ease, transform 0.15s ease;
}

.eb-cat-tile:hover .eb-cat-tile-go {
    color: #2563eb;
    transform: translateX(3px);
}

@media only screen and (max-width: 600px) {
    .eb-cat-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 20px 32px;
    }

    .eb-cat-tile {
        min-height: 0;
        padding: 22px 20px;
    }

    .eb-cat-tile-icon {
        width: 60px;
        height: 60px;
        font-size: 1.45rem;
    }
}

.eb-cat-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 24px;
    text-align: center;
    color: #64748b;
}

.eb-cat-radar-outer {
    margin-bottom: 12px;
}

.eb-cat-radar-card {
    border-radius: var(--easybr-radius-lg);
    border: 1px solid rgba(197, 214, 242, 0.9);
    box-shadow: 0 20px 50px rgba(30, 62, 123, 0.08);
    overflow: hidden;
}

.eb-cat-radar-head {
    padding: 24px 26px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.eb-cat-radar-head-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.eb-cat-radar-badge {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.12) 0%, rgba(37, 99, 235, 0.12) 100%);
    color: #047857;
    font-size: 1.2rem;
    border: 1px solid rgba(167, 243, 208, 0.65);
}

.eb-cat-radar-title {
    margin: 0 0 8px;
    font-size: 1.42rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.eb-cat-radar-sub {
    margin: 0;
    font-size: 0.93rem;
    color: #64748b;
    line-height: 1.58;
}

.eb-cat-dist-chart-shell {
    padding: 12px 24px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.4) 100%);
}

.eb-cat-radar-chart {
    padding: 0 !important;
}

#cd-timeline .cd-timeline-img.year,
#cd-timeline .cd-timeline-img.month,
#cd-timeline .cd-timeline-img.day {
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
}

#cd-timeline .cd-timeline-content {
    box-shadow: none;
}

.post-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 0 28px;
}

.post-hero-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.post-hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
}

.post-hero-orb.orb-a {
    top: 20px;
    right: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(46, 183, 255, 0.26) 0%, rgba(46, 183, 255, 0) 72%);
}

.post-hero-orb.orb-b {
    left: -120px;
    top: 120px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(16, 58, 157, 0.14) 0%, rgba(16, 58, 157, 0) 72%);
}

.post-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(23, 64, 145, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 64, 145, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 92%);
}

.post-hero-doc {
    padding: 50px 0 18px;
}

.post-hero-doc-shell {
    position: relative;
    z-index: 1;
}

/*
 * 帮助教程 hero：与正文 helperdoc-body-anchor 同一套「两翼 1fr + 中间主列 max + 翼栏」栅格。
 * 标题/摘要只占主列轨，与中间白卡片左缘对齐；左目录/右 TOC 不占 hero 文案宽度。
 */
.post-hero-doc .helperdoc-hero-anchor {
    display: grid;
    width: 100%;
    max-width: none;
    margin: 15px 0;
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    column-gap: 0;
    align-items: start;
    /* 无左分类目录：1fr | 主列 | 缝 | 右栏宽 | 1fr */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, var(--helperdoc-center-max))
        var(--helperdoc-side-gap)
        var(--helperdoc-outline-width)
        minmax(0, 1fr);
}

.post-hero-doc .helperdoc-hero-anchor.helperdoc-hero-has-left-nav {
    grid-template-columns:
        minmax(0, 1fr)
        var(--helperdoc-nav-width)
        var(--helperdoc-side-gap)
        minmax(0, var(--helperdoc-center-max))
        var(--helperdoc-side-gap)
        var(--helperdoc-outline-width)
        minmax(0, 1fr);
}

/* 与 .helperdoc-article-shell .article-info 左右 30px 一致 */
.post-hero-doc .helperdoc-hero-copy {
    grid-column: 2;
    min-width: 0;
    padding: 0 30px;
    box-sizing: border-box;
}

.post-hero-doc .helperdoc-hero-anchor.helperdoc-hero-has-left-nav .helperdoc-hero-copy {
    grid-column: 4;
}

.post-hero-doc .post-hero-title {
    max-width: none;
    margin-bottom: 12px !important;
}

.post-hero-doc .post-hero-summary {
    max-width: 760px;
}

@media only screen and (max-width: 1500px) {
    .post-hero-doc .helperdoc-hero-anchor.helperdoc-hero-has-left-nav {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, var(--helperdoc-center-max))
            var(--helperdoc-side-gap)
            var(--helperdoc-outline-width)
            minmax(0, 1fr);
    }

    .post-hero-doc .helperdoc-hero-anchor.helperdoc-hero-has-left-nav .helperdoc-hero-copy {
        grid-column: 2;
    }
}

@media only screen and (max-width: 1260px) {
    .post-hero-doc .helperdoc-hero-anchor,
    .post-hero-doc .helperdoc-hero-anchor.helperdoc-hero-has-left-nav {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 12px;
        padding-right: 12px;
    }

    .post-hero-doc .helperdoc-hero-anchor .helperdoc-hero-copy {
        grid-column: 1;
        padding-left: max(12px, 30px);
        padding-right: max(12px, 30px);
    }
}

.post-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: 26px;
    align-items: center;
}

.post-hero-title {
    margin: 14px 0 14px !important;
    color: var(--easybr-blue-900);
    font-size: clamp(2.2rem, 4vw, 3.35rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.post-hero-summary {
    max-width: 760px;
    margin: 0;
    color: var(--easybr-muted);
    font-size: 1.08rem;
    line-height: 1.92;
}

.post-hero-meta,
.post-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.post-hero-meta {
    margin-top: 18px;
}

.post-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(116, 151, 225, 0.2);
    background: rgba(255, 255, 255, 0.84);
    color: var(--easybr-blue-900);
    font-size: 0.92rem;
    font-weight: 600;
}

.post-hero-actions {
    margin-top: 24px;
}

.post-hero-inline-link {
    display: inline-flex;
    align-items: center;
    color: var(--easybr-blue-800);
    font-weight: 700;
}

.post-hero-aside {
    display: grid;
    gap: 16px;
}

.post-hero-image-card,
.post-hero-side-card {
    border-radius: 28px;
    border: 1px solid rgba(197, 214, 242, 0.9);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 60px rgba(30, 62, 123, 0.08);
    overflow: hidden;
}

.post-hero-image-card img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.post-hero-side-card {
    padding: 20px 22px;
}

.post-hero-side-kicker {
    margin: 0 0 10px;
    color: #6a82a7;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.post-hero-side-card ul {
    margin: 0;
    padding-left: 18px;
}

.post-hero-side-card li + li {
    margin-top: 8px;
}

.post-hero-side-card li,
.post-hero-side-card a {
    color: var(--easybr-muted);
    line-height: 1.8;
}

.post-body-card {
    border-radius: 28px;
    border: 1px solid rgba(197, 214, 242, 0.9);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 60px rgba(30, 62, 123, 0.08) !important;
}

/*
 * 与下方 #main-content.l9 内卡片文字对齐：外列一层 gutter + .article-info 内 .row/.col 再一层，
 * 仅设 0.75rem 时标题会比标签/日期/正文偏左。
 */
.post-hero-shell .post-hero-main {
    padding-left: calc(2 * 0.75rem);
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
    .post-hero-shell .post-hero-main {
        padding-left: 0.75rem;
    }
}

/* 普通带 TOC 文章（非帮助教程三栏）：与顶部 hero 同宽居中，去掉旧版左侧目录的 330px 偏移 */
@media only screen and (min-width: 993px) {
    main.post-container.content:not(.helperdoc-page-shell) {
        width: min(var(--easybr-content-max), calc(100% - 2 * var(--easybr-gutter))) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* matery 默认 40px / 50px 左内边距 + 大屏 #artDetail 横向 padding，导致卡片内文比 H1 明显靠右 */
    main.post-container.content:not(.helperdoc-page-shell) #artDetail .article-info {
        padding: 20px 28px 1px 0;
        margin-bottom: -5px;
    }

    main.post-container.content:not(.helperdoc-page-shell) #artDetail .article-card-content {
        padding: 0 28px 20px 0;
    }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
    main.post-container.content:not(.helperdoc-page-shell) #artDetail .article-info {
        padding: 15px 20px 0 0;
        margin-bottom: -5px;
    }

    main.post-container.content:not(.helperdoc-page-shell) #artDetail .article-card-content {
        padding: 0 24px 20px 0;
    }
}

@media only screen and (min-width: 1418px) {
    main.post-container.content:not(.helperdoc-page-shell) #artDetail {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

#artDetail .article-info {
    border-radius: 28px 28px 0 0;
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.92) 0%, rgba(245, 249, 255, 0.92) 100%);
}

.eb-toc-widget {
    border-radius: 24px;
    border: 1px solid rgba(197, 214, 242, 0.9);
    box-shadow: 0 20px 48px rgba(30, 62, 123, 0.08) !important;
}

.eb-toc-widget .toc-title {
    color: var(--easybr-blue-900);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(197, 214, 242, 0.55);
    margin-bottom: 8px;
}

.eb-toc-widget .toc-title i {
    color: var(--easybr-blue-700);
    font-size: 0.95em;
}

.eb-related-widget ul {
    margin: 0;
    padding: 0 16px 16px;
    list-style: none;
}

.eb-related-widget li + li {
    margin-top: 4px;
}

.eb-related-widget li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--easybr-muted);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.55;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.eb-related-widget li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(96, 115, 143, 0.35);
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.eb-related-widget li a:hover {
    color: var(--easybr-blue-800);
    background: rgba(29, 87, 210, 0.06);
    font-weight: 600;
}

.eb-related-widget li a:hover::before {
    background: var(--easybr-blue-500);
}

.eb-related-widget li a.active-article {
    color: var(--easybr-blue-800);
    background: rgba(29, 87, 210, 0.08);
    font-weight: 700;
}

.eb-related-widget li a.active-article::before {
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgba(29, 87, 210, 0.12);
}

.helperdoc-article-shell .post-body-card {
    overflow: hidden;
    border-radius: 30px;
}

.helperdoc-article-shell .article-info {
    padding: 14px 30px;
    background: rgba(250, 252, 255, 0.92);
}

/* 文章页标签：低对比胶囊，替代默认高饱和 .chip / bg-color */
#artDetail .article-tag .chip {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    background: rgba(16, 58, 157, 0.07) !important;
    color: var(--easybr-blue-800) !important;
    border: 1px solid rgba(29, 87, 210, 0.16) !important;
    box-shadow: none !important;
}

#artDetail .article-tag a:hover .chip,
#artDetail .article-tag .chip:hover {
    background: rgba(29, 87, 210, 0.12) !important;
    border-color: rgba(29, 87, 210, 0.24) !important;
    color: var(--easybr-blue-900) !important;
}

.helperdoc-article-shell .post-cate .post-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(46, 183, 255, 0.1);
    color: var(--easybr-blue-800);
    border: 1px solid rgba(46, 183, 255, 0.22);
    text-decoration: none;
}

.helperdoc-article-shell .post-cate .post-category:hover {
    background: rgba(46, 183, 255, 0.16);
    color: var(--easybr-blue-900);
}

.helperdoc-article-shell .tag-cate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 0;
}

.helperdoc-article-shell .tag-cate > .col {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

.helperdoc-article-shell .tag-cate > .col:last-child {
    margin-left: auto;
}

.helperdoc-article-shell .article-tag,
.helperdoc-article-shell .post-cate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.helperdoc-article-shell .post-cate {
    justify-content: flex-end;
}

.helperdoc-article-shell .post-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(191, 210, 240, 0.8);
}

.helperdoc-article-shell .post-info > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #29415f;
    font-weight: 600;
}

.helperdoc-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    color: #29415f;
    font-weight: 600;
}

.helperdoc-article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0;
}

.helperdoc-article-shell .article-card-content {
    padding: 36px 30px 28px !important;
}

.helperdoc-article-shell #articleContent {
    color: #344764;
}

.helperdoc-article-shell #articleContent h2 {
    margin: 0 0 22px !important;
    font-size: clamp(2rem, 3vw, 2.4rem);
    line-height: 1.16;
}

.helperdoc-article-shell #articleContent h3 {
    margin-top: 40px !important;
    font-size: clamp(1.38rem, 2.4vw, 1.72rem);
}

.helperdoc-article-shell #articleContent h5 {
    font-size: 1.1rem;
    line-height: 1.55;
}

.helperdoc-article-shell #articleContent p {
    margin: 0 0 16px;
}

.helperdoc-article-shell #articleContent strong {
    color: var(--easybr-blue-900);
}

.helperdoc-article-shell #articleContent a {
    color: #1d66db;
    text-decoration: underline;
    text-decoration-color: rgba(29, 102, 219, 0.28);
    text-underline-offset: 4px;
}

.helperdoc-article-shell #articleContent img {
    display: block;
    width: min(100%, 844px);
    margin: 30px auto;
    border-radius: 24px;
    border: 1px solid rgba(198, 214, 241, 0.92);
    box-shadow: 0 24px 52px rgba(30, 62, 123, 0.12);
}

.helperdoc-article-shell #articleContent > ol {
    counter-reset: helperdoc-item;
    margin: 30px 0 38px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 16px;
}

.helperdoc-article-shell #articleContent > ol > li {
    position: relative;
    padding: 22px 24px 22px 82px;
    border-radius: 24px;
    border: 1px solid rgba(197, 214, 242, 0.92);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(241, 247, 255, 0.94) 100%);
    box-shadow: 0 18px 40px rgba(30, 62, 123, 0.08);
}

.helperdoc-article-shell #articleContent > ol > li::before {
    counter-increment: helperdoc-item;
    content: counter(helperdoc-item, decimal-leading-zero);
    position: absolute;
    left: 22px;
    top: 20px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 14px 28px rgba(29, 87, 210, 0.2);
}

.helperdoc-article-shell #articleContent > ol > li > *:first-child {
    margin-top: 0 !important;
}

.helperdoc-article-shell #articleContent > ol > li > *:last-child {
    margin-bottom: 0 !important;
}

.helperdoc-article-shell #articleContent > ol > li p {
    margin-bottom: 0;
}

.helperdoc-article-shell .eb-post-cta {
    margin-top: 34px;
    background: linear-gradient(135deg, #eef5ff 0%, #f8fbff 100%);
    border-color: rgba(116, 151, 225, 0.22);
    box-shadow: 0 20px 44px rgba(30, 62, 123, 0.08);
}

.helperdoc-article-shell .eb-post-cta-copy h2 {
    color: var(--easybr-blue-900);
}

.helperdoc-article-shell .eb-post-cta-copy p {
    color: var(--easybr-muted);
}

.helperdoc-article-shell .eb-post-cta .eb-section-kicker,
.helperdoc-article-shell .eb-post-cta .post-hero-inline-link {
    color: var(--easybr-blue-800);
}

.helperdoc-article-shell .eb-post-cta .eb-btn-secondary {
    color: var(--easybr-blue-900);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(29, 87, 210, 0.18);
}

.post-hero-doc .post-hero-summary {
    max-width: 1060px;
    margin-top: 10px;
}

.eb-post-cta {
    margin: 26px 0 20px;
    padding: 24px 26px;
    border-radius: 24px;
    border: 1px solid rgba(116, 151, 225, 0.16);
    background: linear-gradient(135deg, rgba(11, 44, 114, 0.96) 0%, rgba(34, 115, 255, 0.96) 100%);
    box-shadow: 0 20px 40px rgba(29, 87, 210, 0.16);
}

.eb-post-cta-copy h2,
.eb-post-cta-copy p,
.eb-post-cta .eb-section-kicker,
.eb-post-cta .post-hero-inline-link {
    color: #fff;
}

.eb-post-cta-copy h2 {
    margin: 8px 0 10px !important;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.25;
}

.eb-post-cta-copy p {
    margin: 0;
    max-width: 900px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.82);
}

.eb-post-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.eb-post-cta .eb-btn-secondary {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

#articleContent,
#articleContent p,
#articleContent li,
#articleContent blockquote {
    font-size: 1.02rem;
}

#articleContent h1,
#articleContent h2,
#articleContent h3,
#articleContent h4 {
    color: #183153;
    font-weight: 800;
}

#articleContent blockquote {
    border-left: 4px solid #2d67d9;
    background: #f6faff;
    border-radius: 0 16px 16px 0;
}

/* 对比页：与帮助教程同一套 helperdoc 栅格；正文无 helperdoc-article-shell，单独对齐内边距 */
.compare-guide-page.helperdoc-page-shell #artDetail .article-card-content {
    padding: 36px 30px 28px !important;
}

@media only screen and (max-width: 992px) {
    .compare-guide-page.helperdoc-page-shell #artDetail .article-card-content {
        padding: 28px 22px 24px !important;
    }
}

.compare-guide-page #articleContent table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.35rem 0;
    font-size: 0.98rem;
    line-height: 1.55;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(116, 151, 225, 0.22);
    box-shadow: 0 10px 32px rgba(12, 38, 89, 0.07);
}

.compare-guide-page #articleContent thead {
    background: linear-gradient(180deg, #eaf2ff 0%, #e2ecfb 100%);
}

.compare-guide-page #articleContent th {
    color: var(--easybr-blue-900);
    font-weight: 800;
}

.compare-guide-page #articleContent th,
.compare-guide-page #articleContent td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(116, 151, 225, 0.18);
    vertical-align: top;
}

.compare-guide-page #articleContent tbody tr:last-child td {
    border-bottom: none;
}

.compare-guide-page #articleContent tbody tr:nth-child(even) {
    background: rgba(246, 250, 255, 0.65);
}

/* 对比指南侧栏列表内「相关入口」与次链（与 helperdoc-nav-content 并存） */
.helperdoc-layout .helperdoc-nav-content .compare-guide-nav-sub {
    margin: 14px 0 8px;
    padding: 0 16px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6680a6;
}

.helperdoc-layout .helperdoc-nav-content .compare-guide-nav-secondary {
    list-style: none;
    margin: 0 0 12px;
    padding: 0 8px 0 16px;
}

.helperdoc-layout .helperdoc-nav-content .compare-guide-nav-secondary a {
    font-weight: 500;
    font-size: 0.88rem;
}

.helperdoc-nav-drawer-body .compare-guide-nav-sub {
    margin: 14px 16px 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6680a6;
}

.helperdoc-nav-drawer-body .compare-guide-nav-secondary {
    list-style: none;
    margin: 0 0 16px;
    padding: 0 16px;
}

/* ── 对比指南页：视觉精修（与帮助教程同栅格，统一气质） ── */
body:has(main.compare-guide-page) .post-hero-doc .post-hero-backdrop .post-hero-grid {
    background-size: 40px 40px;
    opacity: 0.95;
}

body:has(main.compare-guide-page) .post-hero-doc .eb-page-kicker {
    box-shadow: 0 4px 18px rgba(12, 38, 89, 0.06);
}

body:has(main.compare-guide-page) .post-hero-doc .post-hero-title {
    background: linear-gradient(105deg, var(--easybr-blue-900) 0%, var(--easybr-blue-800) 42%, #1a6fd4 78%, var(--easybr-blue-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: -0.035em;
}

body:has(main.compare-guide-page) .post-hero-doc .post-hero-summary {
    font-size: 1.06rem;
    line-height: 1.88;
    color: #4a5d78;
}

main.compare-guide-page .helperdoc-nav-widget,
main.compare-guide-page .helperdoc-outline-widget {
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
    main.compare-guide-page .helperdoc-nav-widget:hover,
    main.compare-guide-page .helperdoc-outline-widget:hover {
        box-shadow: 0 26px 56px rgba(30, 62, 123, 0.11) !important;
        border-color: rgba(116, 151, 225, 0.38) !important;
    }
}

.compare-guide-page #artDetail .post-body-card {
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(116, 151, 225, 0.18);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.75) inset,
        0 26px 64px rgba(12, 38, 89, 0.09),
        0 8px 24px rgba(12, 38, 89, 0.04);
}

.compare-guide-page #articleContent > p:first-of-type {
    font-size: 1.08rem;
    line-height: 1.9;
    color: #3d4f66;
    margin-bottom: 1.35rem;
}

.compare-guide-page #articleContent h2 {
    margin-top: 2.15rem !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(116, 151, 225, 0.2);
    font-size: clamp(1.45rem, 2.5vw, 1.75rem);
    letter-spacing: -0.02em;
}

.compare-guide-page #articleContent h2:first-of-type {
    margin-top: 0.35rem !important;
}

.compare-guide-page #articleContent h3 {
    margin-top: 1.35rem !important;
    font-size: 1.12rem;
    color: var(--easybr-blue-900);
}

.compare-guide-page #articleContent ul li {
    margin-bottom: 0.35rem;
}

.compare-guide-page #articleContent table {
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(12, 38, 89, 0.075);
}

.compare-guide-page #articleContent tbody tr {
    transition: background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .compare-guide-page #articleContent tbody tr:hover {
        background: rgba(230, 242, 255, 0.55) !important;
    }
}

.compare-guide-page #articleContent tbody td:first-child {
    font-weight: 600;
    color: var(--easybr-blue-900);
}

/* 底部 CTA：与帮助教程长文同款浅色卡，避免深色条突兀 */
main.compare-guide-page .eb-post-cta {
    margin-top: 36px;
    padding: 26px 28px;
    background: linear-gradient(145deg, #f0f6ff 0%, #f8fbff 48%, #ffffff 100%);
    border: 1px solid rgba(116, 151, 225, 0.24);
    box-shadow: 0 22px 48px rgba(30, 62, 123, 0.09);
}

main.compare-guide-page .eb-post-cta-copy h2 {
    color: var(--easybr-blue-900);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

main.compare-guide-page .eb-post-cta-copy p {
    color: var(--easybr-muted);
    line-height: 1.88;
}

main.compare-guide-page .eb-post-cta .eb-section-kicker,
main.compare-guide-page .eb-post-cta .post-hero-inline-link {
    color: var(--easybr-blue-800);
}

main.compare-guide-page .eb-post-cta .eb-btn {
    box-shadow: 0 12px 26px rgba(29, 87, 210, 0.18);
}

main.compare-guide-page .eb-post-cta .eb-btn-secondary {
    color: var(--easybr-blue-900);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(29, 87, 210, 0.2);
}

@media only screen and (max-width: 992px) {
    .eb-page-shell {
        padding: 22px 0 42px;
    }

    .post-hero-shell {
        grid-template-columns: 1fr;
    }

    .post-hero-aside {
        grid-template-columns: 1fr 1fr;
    }

    .eb-page-hero,
    .eb-content-card,
    .eb-archive-panel {
        padding: 24px 20px;
    }

    .helperdoc-article-shell .article-card-content {
        padding: 30px 24px 24px !important;
    }

    .helperdoc-article-shell .tag-cate {
        align-items: flex-start;
    }

    .helperdoc-article-shell .tag-cate > .col:last-child {
        margin-left: 0;
    }

    .helperdoc-article-shell .post-cate {
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 768px) {
    .eb-page-hero,
    .eb-content-card,
    .eb-archive-panel {
        border-radius: 22px;
    }

    .post-hero {
        padding-top: 120px;
    }

    .post-hero-doc {
        padding-top: 120px;
    }

    .post-hero-title {
        font-size: 2rem;
        line-height: 1.14;
    }

    .post-hero-summary {
        font-size: 1rem;
        line-height: 1.78;
    }

    .post-hero-image-card img {
        height: 180px;
    }

    .post-hero-aside {
        grid-template-columns: 1fr;
    }

    .post-hero-actions .eb-btn,
    .post-hero-actions .eb-btn-secondary,
    .eb-post-cta-actions .eb-btn,
    .eb-post-cta-actions .eb-btn-secondary {
        width: 100%;
    }

    .eb-post-cta {
        padding: 22px 20px;
    }

    .article-content {
        padding: 18px 18px 14px !important;
    }

    .card .card-image .card-title {
        font-size: 0.96rem;
    }

    .helperdoc-article-shell .article-info {
        padding: 12px 20px;
    }

    .helperdoc-article-shell .article-card-content {
        padding: 26px 18px 22px !important;
    }

    .helperdoc-article-shell #articleContent > ol > li {
        padding: 18px 18px 18px 68px;
        border-radius: 20px;
    }

    .helperdoc-article-shell #articleContent > ol > li::before {
        left: 18px;
        top: 18px;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 0.82rem;
    }
}

#headNav {
    /* 浅色：偏透明白→透明，少「灰感」，与正文浅蓝底融合 */
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.58) 0%,
        rgba(255, 255, 255, 0.32) 55%,
        rgba(255, 255, 255, 0.12) 100%
    ) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 10px 36px rgba(12, 38, 89, 0.04);
    height: 66px;
    line-height: 66px;
    border-bottom: 1px solid rgba(200, 218, 245, 0.42);
}

body.DarkMode #headNav {
    background: linear-gradient(
        180deg,
        rgba(18, 28, 48, 0.72) 0%,
        rgba(18, 28, 48, 0.38) 60%,
        rgba(18, 28, 48, 0.14) 100%
    ) !important;
    border-bottom: 1px solid rgba(80, 110, 160, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 28px rgba(0, 0, 0, 0.18);
}

#headNav .nav-wrapper {
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
    line-height: 1;
    /* 默认与版心一致；小屏在下方媒体查询中略增左内边距，与 .container#articles 内卡片列对齐 */
    padding: 0 2px;
}

#headNav .sidenav-trigger,
#headNav .sidenav-trigger i {
    color: var(--easybr-blue-900) !important;
}

/* 仅在中等及以下屏显示；≥993px 由 .hide-on-large-only 隐藏，勿用 display:!important 顶掉 */
@media only screen and (max-width: 992.99px) {
    /*
     * 顶栏为三块 flex 子项：Logo、sidenav-trigger、ul.nav-menu。
     * 若沿用 space-between，汉堡会落在视口正中，不符合常见移动端习惯。
     * 改为 flex-start + 给汉堡 margin-left:auto，使「菜单 + 搜索 + 昼夜」整组靠右贴齐。
     */
    #headNav .nav-wrapper {
        justify-content: flex-start;
        /* 版心 16px + 6px：与下方文章区卡片在窄屏上的左缘/内文节奏更接近（原 4px 时常见「顶栏更贴边」感） */
        padding: 0 2px 0 6px;
    }

    #headNav .sidenav-trigger {
        /* 与右侧 .nav-ico-only 同为 44px 触控区，避免整栏 66px 高度里图标视觉偏高 */
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        margin-left: auto;
        padding: 0;
        line-height: 1;
        float: none;
        flex-shrink: 0;
    }

    #headNav .sidenav-trigger i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.15em;
        min-width: 1.15em;
        height: 1.15em;
        font-size: 1.2rem;
        line-height: 1;
        margin: 0;
        padding: 0;
    }
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    height: 66px;
    padding: 0;
    position: static !important;
    transform: none !important;
}

.brand-logo a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 66px;
    padding: 0 4px 0 0;
    border-radius: 14px;
    transition: opacity 0.2s ease;
}

.brand-logo a:hover {
    opacity: 0.92;
}

.brand-logo .logo-span {
    color: var(--easybr-blue-900) !important;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: 1.38rem;
    line-height: 1.1;
}

/* 顶栏 logo：避免 inset 白高光在圆角下像「多一层白底」；覆盖 matery 的 padding-bottom 防止图标下沉错位 */
#headNav .brand-logo .logo-img {
    display: block;
    border-radius: 12px;
    height: 36px;
    width: auto;
    padding: 0 !important;
    margin: 0;
    vertical-align: middle;
    background: transparent;
    object-fit: contain;
    /* 用轻微外阴影即可；透明 PNG 时 drop-shadow 比双层 box-shadow 更干净 */
    box-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(20, 60, 150, 0.18));
}

.nav-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    height: 66px;
}

.nav-menu > li {
    height: 66px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-menu > li > a {
    color: #243b56 !important;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    border-radius: 12px;
    padding: 0 13px;
    height: 40px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.nav-menu > li > a:hover {
    background: rgba(27, 87, 210, 0.09);
    color: var(--easybr-blue-800) !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.nav-menu > li > a i {
    font-size: 0.88em;
    margin-right: 6px;
    opacity: 0.75;
    transition: opacity 0.18s ease;
}

.nav-menu > li > a:hover i {
    opacity: 0.95;
}

/* 搜索、昼夜：44px 触控区；图标用自然盒模型，避免 display:block+强宽高把 FA glyph 压成扁条（PC 尤其明显） */
#headNav .nav-menu > li > a.modal-trigger,
#headNav .nav-menu > li > a[href="javascript:;"][onclick*="switchNightMode"],
#headNav .nav-menu > li > a.nav-ico-only {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    color: #334e6c !important;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#headNav .nav-menu > li > a.modal-trigger i,
#headNav .nav-menu > li > a[href="javascript:;"][onclick*="switchNightMode"] i,
#headNav .nav-menu > li > a.nav-ico-only i {
    display: block;
    margin: 0 !important;
    width: 1.15em;
    min-width: 1.15em;
    height: 1.15em;
    text-align: center;
    line-height: 1.15em;
    font-size: 1.2rem;
    flex-shrink: 0;
    opacity: 0.9;
    font-style: normal;
}

#headNav .nav-menu > li > a span {
    white-space: nowrap;
}

#headNav .nav-menu > li > a:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.5);
    outline-offset: 2px;
}

.nav-link-cta {
    margin-left: 6px;
    padding: 0 18px !important;
}

.nav-link-cta-primary {
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(33, 79, 194, 0.18);
}

.nav-link-cta-primary:hover {
    background: linear-gradient(135deg, var(--easybr-blue-800) 0%, var(--easybr-blue-500) 100%) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(33, 79, 194, 0.22);
}

.nav-link-cta-secondary {
    border: 1px solid rgba(29, 87, 210, 0.18);
    background: rgba(255, 255, 255, 0.9);
}

.nav-link-soft {
    background: rgba(16, 58, 157, 0.06);
}

/* ---------- 移动端抽屉 #mobile-nav：与顶栏一致的版式，去掉 matery 负边距/负 margin 叠字 ---------- */
header .side-nav#mobile-nav,
#mobile-nav.side-nav.sidenav {
    width: min(300px, 88vw);
    max-width: 300px;
    padding: 0;
    box-shadow: 4px 0 32px rgba(12, 38, 89, 0.12);
    background: #fff;
}

header .side-nav#mobile-nav .mobile-head.bg-color {
    margin: 0;
    padding: 20px 18px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(165deg, #0f2d6b 0%, #1d57d2 52%, #2563eb 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

header .side-nav#mobile-nav .mobile-head img.logo-img {
    margin-top: 0 !important;
    width: 52px !important;
    height: 52px !important;
    max-width: none;
    object-fit: contain;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

header .side-nav#mobile-nav .mobile-head .logo-name {
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 1.12rem !important;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #fff !important;
    width: 100%;
}

header .side-nav#mobile-nav .mobile-head .logo-desc {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    max-height: 4.65em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

header .side-nav#mobile-nav .menu-list.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 20px;
}

header .side-nav#mobile-nav .menu-list li {
    margin-left: 0 !important;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

header .side-nav#mobile-nav .menu-list li.divider {
    margin: 8px 18px;
    width: auto;
    background-color: rgba(15, 45, 107, 0.08);
}

header .side-nav#mobile-nav .menu-list > li.m-nav-item {
    border-bottom: 1px solid rgba(15, 45, 107, 0.06);
}

header .side-nav#mobile-nav .menu-list > li.m-nav-item:last-child {
    border-bottom: none;
}

header .side-nav#mobile-nav .menu-list a {
    height: auto !important;
    min-height: 48px;
    line-height: 1.35 !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    color: #243b56 !important;
    font-weight: 600;
    font-size: 0.94rem;
    border-radius: 0;
}

header .side-nav#mobile-nav .menu-list a:hover,
header .side-nav#mobile-nav .menu-list a:focus-visible {
    background: rgba(29, 87, 210, 0.07) !important;
    color: var(--easybr-blue-800) !important;
}

header .side-nav#mobile-nav .m-nav-item.m-nav-show {
    background: transparent !important;
    color: inherit !important;
}

header .side-nav#mobile-nav .m-nav-item.m-nav-show > a {
    background: rgba(29, 87, 210, 0.09) !important;
    color: var(--easybr-blue-900) !important;
}

header .side-nav#mobile-nav .m-nav-item .m-icon {
    margin-left: auto;
    padding-left: 8px;
    flex-shrink: 0;
    color: #64748b;
}

header .side-nav#mobile-nav .m-nav-item .m-icon i {
    font-size: 0.75rem;
}

#mobile-nav .mobile-menu-list a > i.fa-fw:first-of-type,
#mobile-nav .mobile-menu-list a > i.fas.fa-fw:first-of-type,
#mobile-nav .mobile-menu-list a > i.fab.fa-fw:first-of-type {
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    margin-left: 0 !important;
    margin-right: 12px !important;
    text-align: center;
    font-size: 1.05rem !important;
    color: #3d5a80 !important;
}

header .side-nav#mobile-nav .m-nav-item ul {
    margin: 0;
    padding: 4px 0 8px;
    background: rgba(245, 249, 255, 0.98);
    border-top: 1px solid rgba(15, 45, 107, 0.06);
}

header .side-nav#mobile-nav .m-nav-item ul li {
    width: 100% !important;
    height: auto !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin: 0;
    padding: 0;
}

header .side-nav#mobile-nav .m-nav-item ul a {
    margin-left: 0 !important;
    min-height: 44px;
    padding: 10px 18px 10px 48px !important;
    justify-content: flex-start;
    font-size: 0.9rem !important;
    font-weight: 500;
    color: #3d4f66 !important;
}

header .side-nav#mobile-nav .m-nav-item ul a i {
    position: static !important;
    left: auto !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    text-align: center;
    opacity: 0.85;
}

/* 深色模式：抽屉整体 invert 会糊成一团，仅取消抽屉滤镜，单独配色 */
body.DarkMode header .side-nav#mobile-nav {
    filter: none !important;
    background: #1a2332;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.35);
}

body.DarkMode header .side-nav#mobile-nav .menu-list a,
body.DarkMode header .side-nav#mobile-nav .mobile-menu-list a i {
    color: rgba(255, 255, 255, 0.88) !important;
}

body.DarkMode header .side-nav#mobile-nav .menu-list a:hover,
body.DarkMode header .side-nav#mobile-nav .m-nav-item.m-nav-show > a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

body.DarkMode header .side-nav#mobile-nav .m-nav-item ul {
    background: rgba(0, 0, 0, 0.2);
}

body.DarkMode header .side-nav#mobile-nav .m-nav-item ul a {
    color: rgba(255, 255, 255, 0.78) !important;
}

.home-hero {
    position: relative;
    overflow: hidden;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 50px 0 30px;
}

.home-hero-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(4px);
}

.home-hero-orb.orb-a {
    top: 40px;
    right: -80px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(62, 191, 255, 0.32) 0%, rgba(62, 191, 255, 0) 72%);
}

.home-hero-orb.orb-b {
    top: 180px;
    left: -120px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 58, 157, 0.18) 0%, rgba(16, 58, 157, 0) 68%);
}

.home-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(23, 64, 145, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 64, 145, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 88%);
}

.home-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 34px;
    align-items: center;
    min-width: 0;
}

.home-hero-copy {
    min-width: 0;
    overflow-x: hidden;
}

.home-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--easybr-blue-900);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(116, 151, 225, 0.22);
    box-shadow: 0 12px 30px rgba(12, 38, 89, 0.08);
}

.home-kicker-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
    box-shadow: 0 0 0 8px rgba(46, 183, 255, 0.12);
}

.home-hero-title {
    display: block;
    box-sizing: border-box;
    margin: 18px 0 12px !important;
    font-size: clamp(2.2rem, 4.2vw, 3.45rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: var(--easybr-blue-900);
    max-width: 100%;
    width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.home-hero-sub {
    margin: 0 0 16px;
    max-width: 38rem;
    font-size: clamp(1.02rem, 1.35vw, 1.18rem);
    font-weight: 600;
    line-height: 1.55;
    color: var(--easybr-blue-800);
}

.easybr-gradient-heading {
    background: linear-gradient(105deg, var(--easybr-blue-900) 0%, var(--easybr-blue-800) 38%, #1a6fd4 72%, var(--easybr-blue-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.home-hero-lead {
    max-width: 700px;
    margin: 0;
    color: var(--easybr-muted);
    font-size: 1.12rem;
    line-height: 1.95;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 152px;
    height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.home-btn:hover {
    transform: translateY(-1px);
}

.home-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
    box-shadow: 0 18px 36px rgba(29, 87, 210, 0.2);
}

.home-btn-secondary {
    color: var(--easybr-blue-900);
    border: 1px solid rgba(29, 87, 210, 0.18);
    background: rgba(255, 255, 255, 0.88);
}

.home-inline-link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: var(--easybr-blue-800);
}

.home-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.home-hero-proof span,
.hero-scene-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(116, 151, 225, 0.22);
    color: var(--easybr-blue-900);
    font-size: 0.92rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.76);
}

/* 优势三卡：用「一整块实底」包起来，避免半透卡叠在浅蓝/网格上像单独一条色带；与左栏同宽、视觉对齐 CTA 行 */
.home-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 26px;
    max-width: 100%;
    padding: 3px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(116, 151, 225, 0.22);
    box-shadow: 0 10px 32px rgba(12, 38, 89, 0.07);
    overflow: hidden;
}

.home-stat-card {
    margin: 0;
    padding: 16px 12px;
    min-height: 5.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-stat-card:not(:last-child) {
    border-right: 1px solid rgba(116, 151, 225, 0.2);
}

.home-stat-card strong,
.hero-metric-card strong {
    display: block;
    color: var(--easybr-blue-900);
    font-size: 1.02rem;
    margin-bottom: 8px;
    max-width: 100%;
}

.home-stat-card span,
.hero-metric-card span,
.home-quick-card p,
.home-posts-headline p {
    color: var(--easybr-muted);
    line-height: 1.75;
}

.home-hero-visual {
    position: relative;
}

.hero-showcase {
    display: grid;
    gap: 18px;
}

.hero-showcase-card {
    padding: 24px;
    border-radius: 30px;
    border: 1px solid rgba(147, 184, 240, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 248, 255, 0.95) 100%);
    box-shadow: var(--easybr-shadow);
}

.hero-showcase-primary {
    position: relative;
    overflow: hidden;
}

.hero-showcase-primary::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 183, 255, 0.18) 0%, rgba(46, 183, 255, 0) 70%);
}

.hero-showcase-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.hero-side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--easybr-blue-900);
}

.hero-side-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #6f2cff 0%, #255cff 100%);
}

.hero-showcase-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-showcase-brand h2 {
    margin: 0 !important;
    color: var(--easybr-blue-900);
}

.hero-showcase-lead {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    color: var(--easybr-muted);
    line-height: 1.85;
}

.hero-panel-kicker,
.home-section-label,
.home-quick-tag {
    margin: 0 0 8px;
    color: #6680a6;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-dashboard-head h2,
.home-posts-headline h2 {
    margin: 0 !important;
    color: var(--easybr-blue-900);
}

.hero-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--easybr-blue-800);
    font-size: 0.88rem;
    font-weight: 700;
    background: rgba(46, 183, 255, 0.12);
}

.hero-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.hero-metric-card {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
    border: 1px solid rgba(116, 151, 225, 0.14);
}

.hero-scene-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.hero-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.hero-mini-stats > div {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(116, 151, 225, 0.14);
}

.hero-mini-stats strong {
    display: block;
    margin-bottom: 8px;
    color: var(--easybr-blue-900);
    font-size: 1rem;
}

.hero-mini-stats span {
    color: var(--easybr-muted);
    line-height: 1.7;
}

.hero-contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--easybr-blue-900) 0%, var(--easybr-blue-700) 100%);
    box-shadow: 0 18px 34px rgba(29, 87, 210, 0.18);
}

.hero-contact-card p,
.hero-contact-card strong,
.hero-contact-card a {
    color: #fff;
    margin: 0;
}

.hero-contact-card p {
    opacity: 0.78;
    font-size: 0.92rem;
}

.hero-contact-card strong {
    display: block;
    margin-top: 4px;
    font-size: 1.05rem;
}

.hero-contact-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 700;
}

.home-quick-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.home-quick-card {
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(243, 249, 255, 0.94) 100%);
    border: 1px solid rgba(116, 151, 225, 0.16);
    box-shadow: 0 20px 46px rgba(12, 38, 89, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-quick-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 52px rgba(12, 38, 89, 0.12);
}

.home-quick-card h3 {
    margin: 0 0 12px !important;
    color: var(--easybr-blue-900);
    font-size: 1.6rem;
    line-height: 1.3;
}

.home-quick-action,
.home-posts-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--easybr-blue-800);
    font-weight: 700;
}

/* 首页 · 选型与方案（全宽色带 + 四卡） */
/* 首页：产品/功能/场景/服务/对比/EN 总览入口（GEO 信息架构条） */
.home-ia-strip {
    position: relative;
    margin-top: 0;
    padding: 36px 0 28px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(116, 151, 225, 0.12);
}

.home-ia-strip-inner {
    position: relative;
    z-index: 1;
}

.home-ia-strip-lead {
    margin: 0 0 18px;
    max-width: 52rem;
    color: var(--easybr-slate-600, #475569);
    font-size: 0.95rem;
    line-height: 1.55;
}

.home-ia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.home-ia-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(116, 151, 225, 0.22);
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.home-ia-item:hover {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.home-ia-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--easybr-blue-900, #0f172a);
}

.home-ia-desc {
    font-size: 0.8rem;
    color: var(--easybr-slate-500, #64748b);
}

@media (max-width: 600px) {
    .home-ia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.home-picks-section {
    position: relative;
    margin-top: 8px;
    padding: 44px 0 36px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(77, 217, 255, 0.14), transparent 55%),
        linear-gradient(180deg, #e8f2ff 0%, #f4f9ff 45%, transparent 100%);
    border-top: 1px solid rgba(116, 151, 225, 0.18);
    border-bottom: 1px solid rgba(116, 151, 225, 0.12);
}

.home-picks-inner {
    position: relative;
    z-index: 1;
}

.home-picks-head {
    max-width: 720px;
    margin-bottom: 22px;
}

.home-picks-head h2 {
    margin: 8px 0 0 !important;
    color: var(--easybr-blue-900);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.home-picks-head p {
    margin: 12px 0 0;
    color: var(--easybr-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.home-surface-main .card {
    background: transparent;
    border: none;
    box-shadow: none !important;
}

.home-surface-main .card .card-content {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 601px) {
    .home-surface-main .card .card-content {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.home-surface {
    margin-top: 12px;
}

.home-surface .card {
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 249, 255, 0.96) 100%);
    border: 1px solid rgba(116, 151, 225, 0.14);
    box-shadow: var(--easybr-shadow) !important;
}

.home-surface .card-content {
    padding: 34px 32px;
}

.home-hero [data-aos],
.home-quick-grid [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

.home-page .title.center-align {
    margin: 0 0 14px !important;
    color: var(--easybr-blue-900);
    font-size: 2.3rem;
    letter-spacing: -0.02em;
}

.home-page .service-lead,
.home-page .faq-lead {
    color: var(--easybr-muted);
}

.home-page .service-item,
.home-page .faq-item,
.home-page .use_scene_details,
.home-page .itemize,
.home-page .down .card {
    border-radius: 24px !important;
    border: 1px solid rgba(116, 151, 225, 0.14);
    box-shadow: 0 18px 38px rgba(12, 38, 89, 0.08) !important;
}

.home-page .use_scene_details {
    padding: 28px 24px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.home-page .itemize {
    height: 100%;
    overflow: hidden;
}

.home-page .down .card {
    background: linear-gradient(145deg, #133b98 0%, #1f6fff 100%);
}

.home-page [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

.home-posts-head {
    margin-top: 36px;
    margin-bottom: 22px;
}

.home-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-featured-card {
    padding: 22px 20px;
    border-radius: 24px;
    border: 1px solid rgba(116, 151, 225, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.94) 100%);
    box-shadow: 0 18px 38px rgba(12, 38, 89, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 52px rgba(12, 38, 89, 0.12);
}

.home-featured-card h3 {
    margin: 0 0 10px !important;
    color: var(--easybr-blue-900);
    font-size: 1.35rem;
    line-height: 1.35;
}

.home-featured-card p {
    margin: 0;
    color: var(--easybr-muted);
    line-height: 1.78;
}

.home-posts-headline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.home-posts-headline p {
    margin: 12px 0 0;
    max-width: 720px;
}

/* 首页文章列表：用 Grid auto-fit 避免首行仅 2 篇时 Materialize 三列下右侧空一轨；卡片纵向 flex 对齐底部标签区，视觉等高 */
main.content.home-page #articles.container.articles {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

main.content.home-page #articles .article-row.row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    justify-items: stretch;
}

main.content.home-page #articles .article-row > .article {
    /* 覆盖 masonry 可能留下的内联定位（样式表中 !important 可压过非 !important 的内联） */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0;
    float: none !important;
    right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

main.content.home-page .articles .article .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main.content.home-page .articles .article .card > a {
    flex-shrink: 0;
}

main.content.home-page .articles .article .card .card-content.article-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

main.content.home-page .articles .article .card .article-content .summary {
    flex: 1 1 auto;
    min-height: 0;
}

/* 多行省略（.block-with-text）与 flex 同用时，避免撑开/与下方日期行叠字 */
main.content.home-page .articles .article .card .article-content .summary.block-with-text {
    flex: 0 1 auto;
    margin-bottom: 10px;
}

main.content.home-page .articles .article .card .article-content .publish-info {
    flex-shrink: 0;
}

main.content.home-page .articles .article .card .card-action.article-tags {
    margin-top: auto;
    flex-shrink: 0;
}

.articles .article .card {
    border-radius: 24px;
    border: 1px solid rgba(116, 151, 225, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.96) 100%);
    box-shadow: 0 18px 38px rgba(12, 38, 89, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.articles .article .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 54px rgba(12, 38, 89, 0.12) !important;
}

.articles .card .card-image img {
    height: 220px;
}

.articles .card .card-image .card-title {
    width: calc(100% - 32px);
    padding: 14px 16px !important;
    border-radius: 18px;
    left: 16px;
    bottom: 16px;
    background: linear-gradient(180deg, rgba(7, 23, 58, 0.1) 0%, rgba(7, 23, 58, 0.72) 100%);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.45;
}

.articles .article-content {
    padding: 20px 22px 18px !important;
}

.articles .article-content .summary {
    color: var(--easybr-muted);
    line-height: 1.8;
}

.articles .publish-info,
.articles .publish-info a {
    color: #6d7f99 !important;
}

@media only screen and (max-width: 992px) {
    .home-hero-shell,
    .home-quick-grid,
    .home-hero-stats,
    .home-featured-grid {
        grid-template-columns: 1fr;
    }

    .home-stat-card:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(116, 151, 225, 0.2);
    }

    .hero-dashboard-main,
    .hero-metric-grid,
    .hero-mini-stats {
        grid-template-columns: 1fr;
    }

    .home-posts-headline {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-row,
    .tags-posts,
    .prev-next .article-row {
        display: block;
    }

    /* 首页文章区仍用 Grid（平板两列、窄屏一列），保留卡片 flex 等高 */
    main.content.home-page #articles .article-row.row {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
    }

    @media only screen and (min-width: 600px) {
        main.content.home-page #articles .article-row.row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .article-row > .article,
    .tags-posts > .article,
    .prev-next .article-row > .article,
    #cd-timeline .article {
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .articles .article .card,
    .prev-next .article .card,
    #cd-timeline .article .card {
        width: 100%;
    }

    .paging {
        margin: 20px auto 24px;
    }

    .paging .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 !important;
    }

    .paging .col.s6,
    .paging .col.m4,
    .paging .col.l4 {
        width: auto !important;
        min-height: 0;
        padding: 0;
    }

    .paging .btn-floating.btn-large {
        width: 54px;
        height: 54px;
        line-height: 54px;
    }

    .paging i {
        font-size: 1.9rem;
        line-height: 54px;
    }
}

@media only screen and (max-width: 768px) {
    #headNav .nav-wrapper {
        border-radius: 0 0 16px 16px;
    }

    .home-hero {
        padding-top: 132px;
    }

    /* 双列布局第二轨有 minmax(360px)——右侧区 display:none 后空列仍会占位，小屏会整体超出视口，H1 像被“截断” */
    .home-hero-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    main.content.home-page {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* 首页文章区（≤768px）：摘要与标签左右内边距一致，避免卡片内文与标签区横向不对齐 */
    main.content.home-page .articles .article .card .card-content.article-content {
        padding: 18px 18px 14px !important;
    }

    main.content.home-page .articles .article .card .card-action.article-tags {
        padding: 0 18px 16px !important;
    }

    .home-hero-title {
        font-size: clamp(1.5rem, 5.8vw, 2rem);
        line-height: 1.18;
        letter-spacing: -0.03em;
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

    .home-hero-sub {
        font-size: clamp(0.95rem, 3.6vw, 1.05rem);
        line-height: 1.52;
        margin-bottom: 14px;
    }

    .home-hero-copy {
        padding-top: 8px;
    }

    .home-hero-lead {
        font-size: 1rem;
        line-height: 1.78;
    }

    .home-kicker {
        font-size: 0.84rem;
        padding: 8px 12px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-hero-actions {
        gap: 10px;
    }

    .home-hero-visual {
        display: none;
    }

    .home-hero-proof {
        gap: 8px;
    }

    .home-hero-proof span {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.84rem;
    }

    .home-btn,
    .hero-contact-card a {
        width: 100%;
    }

    .hero-contact-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-quick-card,
    .home-surface .card-content {
        padding: 22px 18px;
    }

    .home-page .title.center-align {
        font-size: 1.9rem;
    }

    .articles .card .card-image img {
        height: 200px;
    }

    .articles,
    .prev-next,
    #cd-timeline {
        margin-top: 0;
    }

    .articles .article,
    .prev-next .article,
    #cd-timeline .article {
        margin-bottom: 18px;
    }

    .top-scroll {
        right: 16px !important;
        bottom: 18px !important;
    }
}

/* 首页价格方案：四档表头统一为蓝系渐变，与全站主视觉一致（替代原绿/紫/金） */
.eb-price-grid .itemize .eb-price-head-t1 {
    background: linear-gradient(145deg, #123b91 0%, #1d57d2 48%, #2563eb 100%) !important;
}

.eb-price-grid .itemize .eb-price-head-t2 {
    background: linear-gradient(145deg, #153e9c 0%, #205fe9 52%, #3b82f6 100%) !important;
}

.eb-price-grid .itemize .eb-price-head-t3 {
    background: linear-gradient(145deg, #0f2d6b 0%, #1e4fc4 50%, #1d4ed8 100%) !important;
}

.eb-price-grid .itemize .eb-price-head-t4 {
    background: linear-gradient(145deg, #172554 0%, #1e3a8a 55%, #1d4ed8 100%) !important;
}