/*
 * 案例模块版式（/cases/ 列表 + /cases/{slug}/ 详情，PC 与手机共用一套响应式）。
 * 版式参考新站 www.eqid.cn/cases：深色首屏 + 1px 分隔的指标条 + 精选大卡 +
 * 分隔式案例列表 + 交付承诺 + 真实截图墙 + FAQ + 深色询价 CTA；正文以文字与 DOM 结构承载，不用装饰性假图。
 * 命名统一在 .yqc-root 之下，避免与主题其它样式相互污染。
 */
.yqc-root {
    --qc-ink: #0f172a;
    --qc-ink-2: #334155;
    --qc-mute: #64748b;
    --qc-faint: #94a3b8;
    --qc-line: #e2e8f0;
    --qc-line-soft: #eef2f7;
    --qc-band: #f8fafc;
    --qc-brand: #2065c4;
    --qc-deep: #143d7a;
    --qc-night-1: #0b1526;
    --qc-night-2: #14213f;
    --qc-ok: #15803d;
    --qc-warn: #b45309;
    --qc-r: 14px;
    background: #fff;
    color: var(--qc-ink);
    font-size: 15px;
    line-height: 1.75;
}
.yqc-root .yqc-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.yqc-root section { padding: 62px 0; }
.yqc-root section.yqc-tight { padding-bottom: 52px; }
.yqc-root h1, .yqc-root h2, .yqc-root h3, .yqc-root h4 { margin: 0; font-weight: 700; letter-spacing: -.2px; }
.yqc-root p { margin: 0; }
.yqc-root a { color: inherit; text-decoration: none; }
.yqc-root ul, .yqc-root ol, .yqc-root dl, .yqc-root dd, .yqc-root figure { margin: 0; padding: 0; list-style: none; }

/* ---------- 深色首屏 ---------- */
.yqc-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(155deg, var(--qc-night-1) 0%, var(--qc-night-2) 46%, var(--qc-deep) 100%);
    padding: 76px 0 62px;
}
.yqc-hero::before, .yqc-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(64, 128, 220, .34), rgba(64, 128, 220, 0) 70%);
}
.yqc-hero::before { width: 460px; height: 460px; top: -120px; left: 8%; }
.yqc-hero::after { width: 380px; height: 380px; bottom: -140px; right: 6%; }
.yqc-hero .yqc-wrap { position: relative; z-index: 1; }
.yqc-crumb { font-size: 12.5px; color: rgba(255, 255, 255, .58); margin-bottom: 22px; }
.yqc-crumb a { color: rgba(255, 255, 255, .78); }
.yqc-crumb a:hover { color: #fff; }
.yqc-crumb i { font-style: normal; margin: 0 7px; color: rgba(255, 255, 255, .38); }
.yqc-h1 { font-size: 34px; line-height: 1.32; }
.yqc-h1 .sub { display: block; margin-top: 10px; font-size: 17px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .64); }
.yqc-lead { margin-top: 18px; max-width: 760px; font-size: 15px; line-height: 1.95; color: rgba(255, 255, 255, .82); }
.yqc-lead strong { color: #fff; }
.yqc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.yqc-pills span { font-size: 12px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .88); }
/* 「一句话概括」：结论先行，供爬虫与 AI 直接摘取 */
.yqc-gist { margin-top: 18px; max-width: 820px; padding: 13px 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .09); font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .9); }
.yqc-gist b { color: #fff; }

/* 指标条：1px 缝隙的深色格，避免一张张浮起的小卡片 */
.yqc-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 34px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; overflow: hidden; }
.yqc-metrics > div { padding: 18px 20px; background: rgba(6, 15, 30, .42); }
.yqc-metrics b { display: block; font-size: 25px; font-weight: 700; letter-spacing: -.6px; }
.yqc-metrics span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.65; color: rgba(255, 255, 255, .62); }
.yqc-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.yqc-hero-btns a { padding: 11px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.yqc-hero-btns .solid { background: #fff; color: var(--qc-night-1); }
.yqc-hero-btns .solid:hover { background: #eaf1fb; }
.yqc-hero-btns .ghost { border: 1px solid rgba(255, 255, 255, .38); color: rgba(255, 255, 255, .9); }
.yqc-hero-btns .ghost:hover { background: rgba(255, 255, 255, .1); }

/* ---------- 区块通用 ---------- */
.yqc-band { background: var(--qc-band); border-top: 1px solid var(--qc-line-soft); border-bottom: 1px solid var(--qc-line-soft); }
.yqc-eyebrow { margin-bottom: 24px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--qc-faint); }
.yqc-h2 { font-size: 26px; line-height: 1.4; }
.yqc-sub { margin-top: 9px; max-width: 780px; font-size: 14px; line-height: 1.9; color: var(--qc-mute); }
.yqc-arrow { display: inline-block; width: 16px; height: 10px; position: relative; vertical-align: middle; }
.yqc-arrow::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 1px; background: currentColor; }
.yqc-arrow::after { content: ''; position: absolute; right: 0; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
/* 少量间距修饰，模板里不写内联样式 */
.yqc-mb-lg { margin-bottom: 22px; }
.yqc-mt-lg { margin-top: 24px; }
.yqc-mt-md { margin-top: 16px; }
.yqc-link { color: inherit; }
.yqc-link:hover { color: var(--qc-brand); }

/* ---------- 精选大卡 ---------- */
.yqc-feat {
    position: relative; display: block; overflow: hidden; padding: 38px 40px;
    border: 1px solid var(--qc-line); border-radius: 20px;
    background: linear-gradient(140deg, #f7f9fc 0%, #fff 62%);
    transition: border-color .22s, box-shadow .22s;
}
.yqc-feat::before { content: ''; position: absolute; top: -90px; right: -70px; width: 300px; height: 300px; border-radius: 50%; background: rgba(32, 101, 196, .07); }
.yqc-feat:hover { border-color: #cbd5e1; box-shadow: 0 14px 38px rgba(15, 23, 42, .07); }
.yqc-feat > * { position: relative; }
.yqc-feat .tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--qc-ink); color: #fff; font-size: 12px; font-weight: 600; }
.yqc-feat .meta { display: inline; margin-left: 10px; font-size: 12.5px; color: var(--qc-faint); }
.yqc-feat h3 { margin-top: 16px; font-size: 27px; line-height: 1.35; }
.yqc-feat:hover h3 { color: var(--qc-brand); }
.yqc-feat .s { margin-top: 8px; font-size: 15.5px; font-weight: 600; color: var(--qc-ink-2); }
.yqc-feat p.d { margin-top: 12px; max-width: 720px; font-size: 14px; line-height: 1.9; color: var(--qc-mute); }
.yqc-feat .more { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; font-size: 14px; font-weight: 700; color: var(--qc-brand); }

/* ---------- 案例分隔列表 ---------- */
.yqc-rows { border-top: 1px solid var(--qc-line-soft); }
.yqc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--qc-line-soft); transition: background .18s; }
.yqc-row:hover { background: #fbfcfe; }
.yqc-row .main { min-width: 0; }
.yqc-chip { display: inline-block; padding: 2px 9px; border-radius: 5px; background: #eaf2fd; color: var(--qc-brand); font-size: 11.5px; font-weight: 700; }
.yqc-row h3 { margin-top: 8px; font-size: 18.5px; line-height: 1.5; }
.yqc-row:hover h3 { color: var(--qc-brand); }
.yqc-row .s { margin-top: 5px; max-width: 760px; font-size: 13.5px; line-height: 1.8; color: var(--qc-mute); }
.yqc-row .side { display: flex; align-items: center; gap: 16px; flex-shrink: 0; padding-top: 4px; color: var(--qc-faint); font-size: 12px; white-space: nowrap; }
.yqc-row .side .yqc-arrow { color: #cbd5e1; transition: transform .18s, color .18s; }
.yqc-row:hover .side .yqc-arrow { color: var(--qc-brand); transform: translateX(3px); }

/* ---------- 交付承诺 ---------- */
.yqc-deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.yqc-deliver .rule { width: 44px; height: 1px; margin-bottom: 18px; background: var(--qc-ink); }
.yqc-deliver h3 { font-size: 17px; }
.yqc-deliver p { margin-top: 8px; font-size: 14px; line-height: 1.9; color: var(--qc-mute); }
.yqc-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.yqc-btns a { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.yqc-btns .dark { background: var(--qc-ink); color: #fff; }
.yqc-btns .dark:hover { background: #1e293b; }
.yqc-btns .line { border: 1px solid var(--qc-line); color: var(--qc-ink-2); }
.yqc-btns .line:hover { border-color: var(--qc-brand); color: var(--qc-brand); }

/* ---------- 真实截图墙 ---------- */
.yqc-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.yqc-shot { border: 1px solid var(--qc-line-soft); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .22s, box-shadow .22s; }
.yqc-shot:hover { border-color: #dbe3ec; box-shadow: 0 10px 26px rgba(15, 23, 42, .07); }
/* 截图多为竖屏手机长图：格位用 3:4 竖帧 + contain，既能看清界面，也不会裁掉内容 */
.yqc-shot .ph { position: relative; padding-top: 132%; background: #f1f5f9; overflow: hidden; }
.yqc-shot .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.yqc-shot:hover .ph img { transform: scale(1.015); }
.yqc-shot figcaption { padding: 12px 14px 14px; }
.yqc-shot b { display: block; font-size: 14px; font-weight: 600; color: var(--qc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yqc-shot span { display: block; margin-top: 4px; font-size: 12px; color: var(--qc-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yqc-note { margin-top: 22px; padding: 14px 18px; border: 1px dashed var(--qc-line); border-radius: 10px; background: var(--qc-band); font-size: 13px; line-height: 1.85; color: var(--qc-mute); }
.yqc-note b { color: var(--qc-ink); }

/* ---------- FAQ ---------- */
.yqc-faq { max-width: 860px; }
.yqc-faq details { border-bottom: 1px solid var(--qc-line); padding: 2px 0; }
.yqc-faq summary { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 30px 19px 0; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--qc-ink); list-style: none; }
.yqc-faq summary::-webkit-details-marker { display: none; }
.yqc-faq summary::after { content: '+'; position: absolute; right: 4px; top: 17px; font-size: 20px; font-weight: 400; color: var(--qc-faint); transition: transform .2s, color .2s; }
.yqc-faq details[open] summary::after { content: '−'; color: var(--qc-brand); }
.yqc-faq .a { padding: 0 40px 20px 0; font-size: 14px; line-height: 1.95; color: var(--qc-mute); }

/* ---------- 深色询价 CTA ---------- */
.yqc-cta { background: linear-gradient(150deg, var(--qc-night-1), var(--qc-deep)); color: #fff; text-align: center; }
.yqc-cta h2 { font-size: 27px; }
.yqc-cta p { margin: 12px auto 0; max-width: 620px; font-size: 14.5px; line-height: 1.9; color: rgba(255, 255, 255, .74); }
.yqc-cta .yqc-btns { justify-content: center; }
.yqc-cta .solid { background: #fff; color: var(--qc-night-1); }
.yqc-cta .solid:hover { background: #eaf1fb; }
.yqc-cta .ghost { border: 1px solid rgba(255, 255, 255, .38); color: rgba(255, 255, 255, .92); }
.yqc-cta .ghost:hover { background: rgba(255, 255, 255, .1); }

/* ---------- 详情页：关键指标 / 事实表 / 卡格 ---------- */
.yqc-kstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--qc-line); border: 1px solid var(--qc-line); border-radius: var(--qc-r); overflow: hidden; }
.yqc-kstats > div { padding: 18px 20px; background: #fff; }
.yqc-kstats b { display: block; font-size: 22px; color: var(--qc-deep); letter-spacing: -.4px; }
.yqc-kstats span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--qc-mute); }
.yqc-facts { border: 1px solid var(--qc-line); border-radius: var(--qc-r); overflow: hidden; background: #fff; }
.yqc-facts .r { display: grid; grid-template-columns: 176px 1fr; }
.yqc-facts .r + .r { border-top: 1px solid var(--qc-line-soft); }
.yqc-facts dt { padding: 14px 20px; background: var(--qc-band); font-size: 13.5px; font-weight: 600; color: var(--qc-ink-2); }
.yqc-facts dd { margin: 0; padding: 14px 22px; font-size: 14px; line-height: 1.85; color: var(--qc-mute); }
.yqc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yqc-cards.two { grid-template-columns: repeat(2, 1fr); }
.yqc-card { position: relative; padding: 22px 24px; border: 1px solid var(--qc-line); border-radius: var(--qc-r); background: #fff; transition: border-color .2s, box-shadow .2s; }
.yqc-card:hover { border-color: #d5dde8; box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
.yqc-card .no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 11px; border-radius: 50%; background: var(--qc-brand); color: #fff; font-size: 12.5px; font-weight: 700; }
.yqc-card h3 { font-size: 16.5px; }
.yqc-card p { margin-top: 8px; font-size: 13.5px; line-height: 1.9; color: var(--qc-mute); }

/* ---------- 详情页：架构图谱（DOM 绘制，文字可被抓取） ---------- */
.yqc-arch { padding: 22px; border: 1px solid var(--qc-line); border-radius: 18px; background: linear-gradient(180deg, #fff, var(--qc-band)); }
.yqc-arch > figcaption { margin-bottom: 18px; font-size: 12.5px; font-weight: 600; color: var(--qc-mute); }
.yqc-layer { padding: 14px; border-radius: 12px; border: 1px solid var(--qc-line); background: #fff; }
.yqc-layer > .lb { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: var(--qc-mute); }
.yqc-layer .cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 11px; }
.yqc-layer .cells.c4 { grid-template-columns: repeat(4, 1fr); }
.yqc-layer .cells.c2 { grid-template-columns: repeat(2, 1fr); }
.yqc-cell { padding: 10px 12px; border: 1px solid var(--qc-line-soft); border-radius: 9px; background: var(--qc-band); }
.yqc-cell b { display: block; font-size: 13px; font-weight: 600; color: var(--qc-ink); }
.yqc-cell span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.7; color: var(--qc-mute); }
/* 只写职责、没有明细项的层：一句整话，不伪造成卡片 */
.yqc-layer .yqc-layer-d { margin-top: 9px; font-size: 13px; line-height: 1.85; color: var(--qc-ink-2); }
.yqc-l1 { border-color: #cfe0f7; background: #f2f7fe; }
.yqc-l1 > .lb { color: var(--qc-brand); }
.yqc-l2 { border-color: #d7dee8; background: #f4f6f9; }
.yqc-l3 { border-color: #ded8f2; background: #f7f5fd; }
.yqc-flow { display: flex; align-items: center; justify-content: center; height: 26px; }
.yqc-flow i { position: relative; display: block; width: 1px; height: 100%; background: var(--qc-line); }
.yqc-flow i::after { content: ''; position: absolute; left: -3px; bottom: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid var(--qc-faint); }
.yqc-stack { margin-top: 20px; padding: 20px 22px; border: 1px solid var(--qc-line-soft); border-radius: var(--qc-r); background: var(--qc-band); }
.yqc-stack h3 { font-size: 15px; }
.yqc-stack .g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; margin-top: 12px; }
.yqc-stack .g div { display: flex; gap: 6px; font-size: 13.5px; line-height: 1.8; }
.yqc-stack dt { color: var(--qc-mute); white-space: nowrap; }
.yqc-stack dd { margin: 0; color: var(--qc-ink-2); }
.yqc-stack > p { margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: var(--qc-faint); }

/* ---------- 详情页：适用边界 / 本页信息 / 相关案例 ---------- */
.yqc-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.yqc-scope > div { padding: 22px 24px; border-radius: var(--qc-r); border: 1px solid #cfe9d8; background: #f2fbf5; }
.yqc-scope > div.no { border-color: #f3e0c6; background: #fdf7ee; }
.yqc-scope h3 { font-size: 15px; color: var(--qc-ok); }
.yqc-scope > div.no h3 { color: var(--qc-warn); }
.yqc-scope li { display: flex; gap: 9px; margin-top: 11px; font-size: 13.5px; line-height: 1.85; color: var(--qc-ink-2); }
.yqc-scope li::before { content: '✓'; flex-shrink: 0; color: var(--qc-ok); font-weight: 700; }
.yqc-scope > div.no li::before { content: '—'; color: var(--qc-warn); }
.yqc-infoline { padding: 18px 0; border: 1px solid var(--qc-line-soft); border-radius: var(--qc-r); background: var(--qc-band); }
.yqc-infoline h3 { padding: 0 22px; font-size: 14px; }
.yqc-infoline ul { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 10px 22px 0; }
.yqc-infoline li { font-size: 12.5px; color: var(--qc-mute); }
.yqc-infoline li b { color: var(--qc-ink-2); font-weight: 600; }
.yqc-infoline .yqc-back { color: var(--qc-brand); font-weight: 600; }
.yqc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yqc-related a { display: block; padding: 20px 22px; border: 1px solid var(--qc-line); border-radius: var(--qc-r); background: #fff; transition: border-color .2s, box-shadow .2s; }
.yqc-related a:hover { border-color: var(--qc-brand); box-shadow: 0 8px 22px rgba(15, 23, 42, .06); }
.yqc-related .k { font-size: 11.5px; font-weight: 700; color: var(--qc-brand); }
.yqc-related b { display: block; margin: 8px 0 6px; font-size: 15px; color: var(--qc-ink); }
.yqc-related span.d { display: block; font-size: 12.5px; line-height: 1.8; color: var(--qc-mute); }

/* ---------- 手机端常驻询价条（仅 is_mobile 输出） ---------- */
.yqc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; gap: 10px; padding: 10px 14px calc(10px + constant(safe-area-inset-bottom)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--qc-line); box-shadow: 0 -4px 18px rgba(15, 23, 42, .06); }
.yqc-bar a { flex: 1; padding: 12px 0; border-radius: 10px; text-align: center; font-size: 14.5px; font-weight: 700; }
.yqc-bar .tel { border: 1px solid var(--qc-brand); color: var(--qc-brand); }
.yqc-bar .note { background: var(--qc-brand); color: #fff; }
.yqc-root.has-bar { padding-bottom: 76px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .yqc-root section { padding: 48px 0; }
    .yqc-wall { grid-template-columns: repeat(3, 1fr); }
    .yqc-cards { grid-template-columns: repeat(2, 1fr); }
    .yqc-related { grid-template-columns: 1fr 1fr; }
    .yqc-layer .cells.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
    .yqc-root { font-size: 14.5px; }
    .yqc-root .yqc-wrap { padding: 0 18px; }
    .yqc-root section { padding: 36px 0; }
    .yqc-hero { padding: 46px 0 42px; }
    .yqc-crumb { margin-bottom: 16px; }
    .yqc-h1 { font-size: 23px; line-height: 1.4; }
    .yqc-h1 .sub { margin-top: 8px; font-size: 14.5px; }
    .yqc-lead { margin-top: 14px; font-size: 14px; }
    .yqc-metrics, .yqc-kstats { grid-template-columns: 1fr 1fr; }
    .yqc-metrics { margin-top: 22px; }
    .yqc-metrics b { font-size: 20px; }
    .yqc-h2 { font-size: 21px; }
    .yqc-feat { padding: 24px 20px; border-radius: 16px; }
    .yqc-feat h3 { font-size: 21px; }
    .yqc-row { flex-direction: column; gap: 10px; padding: 20px 0; }
    .yqc-row .side { display: none; }
    .yqc-deliver { grid-template-columns: 1fr; gap: 24px; }
    .yqc-wall { grid-template-columns: 1fr 1fr; gap: 12px; }
    .yqc-cards, .yqc-cards.two, .yqc-scope, .yqc-related { grid-template-columns: 1fr; }
    .yqc-facts .r { grid-template-columns: 1fr; }
    .yqc-facts .r + .r { border-top: 1px solid var(--qc-line); }
    .yqc-facts dt { padding-bottom: 0; border: 0; background: #fff; }
    .yqc-facts dd { padding-top: 4px; }
    .yqc-stack .g { grid-template-columns: 1fr; }
    .yqc-arch { padding: 14px; }
    .yqc-layer .cells, .yqc-layer .cells.c4, .yqc-layer .cells.c2 { grid-template-columns: 1fr; }
    .yqc-faq summary { font-size: 15px; padding-top: 16px; padding-bottom: 16px; }
}