:root {
  /* 背景三级（浅色：暖白底 → 纯白卡片 → 浅灰内凹）*/
  --bg-base: #FAFAFA; --bg-elevated: #FFFFFF; --bg-deep: #F1F5F9;
  /* surface（浅色：极淡 slate 叠加 / 内凹浅灰）*/
  --surface: rgba(15,23,42,.04); --surface-hover: rgba(15,23,42,.07);
  --surface-sunken: #F1F5F9;
  /* foreground 三级（深色文字，非纯黑）*/
  --fg: #0F172A; --fg-muted: #64748B; --fg-faint: #94A3B8;
  /* accent 电光蓝系（高饱和主行动点/高亮；浅色白底校准）*/
  --accent: #0052FF; --accent-hover: #0042D6; --accent-2: #4D7CFF;
  --accent-weak: rgba(0,82,255,.08); --accent-glow: rgba(0,82,255,.18);
  --accent-border: rgba(0,82,255,.28); --accent-ring: rgba(0,82,255,.45);
  --gradient-accent: linear-gradient(90deg, #0052FF, #4D7CFF);
  /* 语义色（浅色白底加深以保证 WCAG AA 对比）*/
  --good: #047857; --good-weak: rgba(4,120,87,.10); --good-border: rgba(4,120,87,.30);
  --bad: #DC2626;  --bad-weak: rgba(220,38,38,.10);
  --caution: #B45309; --caution-bg: rgba(180,83,9,.08); --caution-border: rgba(180,83,9,.28);
  /* border（浅色：实色浅灰）*/
  --border: #E2E8F0; --border-strong: #CBD5E1;
  /* 多层阴影（柔和投影让白卡浮起 + hover 电光蓝描边/抬升）*/
  --shadow-card:  0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.08);
  --shadow-hover: 0 8px 28px rgba(15,23,42,.12), 0 0 0 1px var(--accent-border);
  --shadow-lift:  0 20px 40px -15px rgba(0,82,255,.22), 0 0 0 1px var(--accent-border);
  --shadow-cta:   0 2px 12px rgba(0,82,255,.38), inset 0 1px 0 rgba(255,255,255,.28);
  --shadow-modal: 0 24px 60px rgba(15,23,42,.22), 0 0 0 1px var(--border);
  /* radius / 字体 / 缓动 */
  --r-card: 16px; --r-ctrl: 8px; --r-pill: 999px; --r-icon: 12px;
  --font-sans: "PingFang SC", system-ui, -apple-system, "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 220ms; --dur-slow: 300ms;
  /* 分类色（高饱和去「软紫」；5 维度互相区分；growth 复用 good 绿做正向语义）*/
  --c-content: #0E7490; --c-growth: var(--good); --c-user: #7C3AED; --c-act: #C2410C; --c-retain: #BE185D;
  /* 旧变量别名（兼容上百处引用，零全文替换）*/
  --bg: var(--bg-base); --card: var(--bg-elevated); --line: var(--border);
  --txt: var(--fg); --mut: var(--fg-muted);
  --acc: var(--accent); --acc2: var(--good); --warn: var(--bad);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base); color: var(--fg); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* 全站极淡径向渐变底（固定，不随滚动）*/
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 600px at 50% -8%, rgba(0,82,255,.05), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(0,82,255,.035), transparent 55%);
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
/* 提示词指定的全局渐变工具类（电光蓝签名渐变）*/
.bg-gradient-accent { background: var(--gradient-accent); }
/* 选中文字 + 细滚动条（极客感细节）*/
::selection { background: rgba(0,82,255,.15); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* ===== 顶部导航栏（sticky 毛玻璃）===== */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.80); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 18px; padding: 12px 20px; }
.brand { color: var(--fg); font-weight: 650; font-size: 16px; text-decoration: none; letter-spacing: -.01em; }
.brand::before { content: "●"; color: var(--accent); margin-right: 7px; font-size: 12px; vertical-align: 1px; }
.topnav-links { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.topnav-links a { color: var(--fg-muted); text-decoration: none; font-size: 14px; transition: color var(--dur) var(--ease); }
.topnav-links a:hover { color: var(--accent); }
.nav-cta {
  background: var(--gradient-accent); color: #fff; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 16px; border-radius: var(--r-ctrl); box-shadow: var(--shadow-cta);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,82,255,.40); }

/* ===== ① Hero 大屏（左文右装饰卡）===== */
.hero-section { position: relative; overflow: hidden; padding: clamp(56px,10vw,104px) 0; }
.hero-section::before {
  content: ""; position: absolute; top: -160px; right: -60px; width: 760px; height: 460px;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  filter: blur(50px); opacity: .55; pointer-events: none; z-index: 0;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-copy h1 { font-size: clamp(32px,6vw,54px); font-weight: 680; line-height: 1.12; letter-spacing: -.02em; color: var(--fg); margin: 16px 0 0; }
.hero-copy h1 .hl { white-space: nowrap; background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-sub { color: var(--fg-muted); font-size: clamp(15px,1.6vw,17px); line-height: 1.7; margin: 18px 0 0; max-width: 30em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn-primary {
  background: var(--gradient-accent); color: #fff; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: var(--r-ctrl); box-shadow: var(--shadow-cta);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,82,255,.42); }
.btn-primary:active { transform: scale(.98); }
.btn-ghost {
  background: var(--bg-elevated); color: var(--fg); text-decoration: none; font-size: 15px;
  padding: 12px 22px; border: 1px solid var(--border-strong); border-radius: var(--r-ctrl);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-ghost:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.hero-trust { color: var(--fg-muted); font-size: 13.5px; margin-top: 22px; }

/* Hero 右侧纯 CSS 抽象装饰（呼应参考图 mockup，不放业绩数字）*/
.hero-art { position: relative; min-height: 300px; }
.art-card { position: absolute; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px; }
.art-main { top: 16px; left: 6%; width: 66%; animation: artFloat 6s ease-in-out infinite; }
.art-metric { bottom: 8px; right: 2%; width: 52%; animation: artFloat 6s ease-in-out infinite -3s; }
.art-bar { height: 9px; border-radius: 6px; background: var(--surface-sunken); margin-bottom: 10px; }
.art-bar.w90 { width: 90%; } .art-bar.w70 { width: 70%; } .art-bar.w50 { width: 50%; } .art-bar.w40 { width: 40%; }
.art-tag { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--accent); background: var(--accent-weak); border-radius: var(--r-pill); padding: 3px 12px; }
.art-trend { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--good); background: var(--good-weak); border-radius: var(--r-pill); padding: 3px 10px; }
.art-spark { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-bottom: 12px; }
.art-spark i { flex: 1; background: linear-gradient(180deg, var(--accent), var(--accent-weak)); border-radius: 3px; }
.art-spark i:nth-child(1){height:40%}.art-spark i:nth-child(2){height:64%}.art-spark i:nth-child(3){height:48%}.art-spark i:nth-child(4){height:82%}.art-spark i:nth-child(5){height:100%}
.art-dots { position: absolute; top: -6px; right: -6px; width: 88px; height: 88px; z-index: -1; background-image: radial-gradient(var(--accent-border) 1.4px, transparent 1.4px); background-size: 14px 14px; opacity: .7; }
@keyframes artFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

section { padding: clamp(56px,9vw,96px) 0; scroll-margin-top: 64px; }
h2 {
  font-size: clamp(20px, 3.4vw, 26px); font-weight: 650; letter-spacing: -.01em; margin-bottom: 6px;
  background: linear-gradient(180deg, #0F172A, #475569);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
h3 { font-size: 17px; margin: 26px 0 12px; color: var(--fg-muted); }
.lead { color: var(--fg-muted); margin-bottom: 18px; }

/* 章节标签药丸（.pill 元素：mono 大写小字 + 圆点）*/
.pill {
  display: inline-flex; align-items: center; width: fit-content;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-weak); border: 1px solid var(--accent-border);
  border-radius: var(--r-pill); padding: 4px 12px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
/* 卡片基类（单一事实源；各卡片只留特有属性）*/
.card, .case-card, .method-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card { padding: 16px; }
.card:hover { box-shadow: var(--shadow-hover); border-color: var(--accent-border); }
.case-card:hover, .method-card:hover {
  box-shadow: var(--shadow-lift); border-color: var(--accent-border); transform: translateY(-6px);
}
.metric h4 { color: var(--acc); font-size: 15px; }
.metric .formula { font-family: var(--font-mono); color: var(--acc2); font-size: 13px; margin: 6px 0; }
.metric p { color: var(--mut); font-size: 13px; }

.calc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.calc h4 { margin-bottom: 10px; }
.calc label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); margin: 6px 0; }
.calc input { width: 110px; background: var(--bg-deep); border: 1px solid var(--line); color: var(--txt); border-radius: 7px; padding: 6px 8px; }
.calc button { margin-top: 10px; background: var(--acc); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.calc button:hover { opacity: .9; }
.out { margin-top: 12px; font-size: 14px; white-space: pre-line; }
.out .good { color: var(--acc2); }
.out .bad { color: var(--warn); }
.out .caution { color: var(--caution); }

.fw h4 { font-size: 15px; color: var(--acc2); }
.fw p { color: var(--mut); font-size: 13px; margin-top: 4px; }

.case-card { padding: 18px; margin-bottom: 14px; cursor: pointer; }
.case-card .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.case-card h3 { color: var(--txt); margin: 0; font-size: 18px; }
.case-card .tag { background: var(--accent-weak); color: var(--accent); font-size: 12px; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.case-card .one { color: var(--mut); margin-top: 6px; font-size: 14px; }
.metrics-line { margin-top: 8px; }
.metrics-line span { display: inline-block; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--good); font-size: 12px; padding: 2px 8px; border-radius: var(--r-ctrl); margin: 2px 4px 0 0; }
.teardown { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; display: none; }
.teardown.open { display: block; }
.teardown .step { margin-bottom: 12px; }
.teardown .step b { color: var(--acc); }
.teardown .insight { background: var(--good-weak); border-left: 3px solid var(--acc2); padding: 10px 12px; border-radius: 6px; margin-top: 6px; }
.soon { opacity: .55; }

/* —— 案例富文本拆解区块 —— */
.teardown .sec { margin-bottom: 20px; }
.teardown .sec > h4 { color: var(--acc); font-size: 15px; margin-bottom: 8px; }
.teardown p { color: var(--txt); font-size: 14px; margin-bottom: 8px; }
.teardown .note { color: var(--mut); font-size: 13px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.flow span { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; font-size: 13px; }
.flow i { color: var(--acc); font-style: normal; padding: 0 2px; }
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.phase { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--mut); }
.phase b { display: block; color: var(--acc2); margin-bottom: 3px; }
.tbl { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.tbl th { background: var(--surface-sunken); color: var(--mut); font-weight: 600; }
.tbl td.ns { color: var(--acc2); font-weight: 600; }
.tbl td.warn { color: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chips span { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; font-size: 13px; color: var(--mut); }
.chips b { color: var(--acc); }
.teardown ul, .teardown ol { margin: 6px 0 6px 20px; }
.teardown li { color: var(--mut); font-size: 13px; margin-bottom: 6px; line-height: 1.7; }
.method { margin-bottom: 10px; font-size: 14px; color: var(--txt); }
.method b { color: var(--acc2); }
.disclaimer { background: var(--caution-bg); border: 1px solid var(--caution-border); color: var(--caution); font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-bottom: 10px; line-height: 1.6; }
.tbl.inferred { opacity: .82; }
.tbl.inferred td.ns { color: var(--mut); font-weight: 500; }
.tbl.inferred td.warn { color: var(--mut); }
.foot-note { font-size: 12px; opacity: .8; margin-top: 6px; max-width: 760px; }

/* —— 研究方法说明区块 —— */
.research-method { background: var(--accent-weak); border-left: 3px solid var(--acc); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.research-method h4 { color: var(--acc); font-size: 15px; margin-bottom: 8px; }
.research-method p { color: var(--mut); font-size: 13px; margin-bottom: 6px; line-height: 1.7; }
.research-method p b { color: var(--txt); }
.research-method p:last-child { margin-bottom: 0; }

/* —— 可复用方法论卡片（绿色左竖线，区别于研究方法的蓝色）—— */
.reuse-method { margin-top: 4px; }
.reuse-method > h4 { color: var(--acc2); font-size: 15px; margin-bottom: 10px; }
.reuse-card { background: var(--good-weak); border-left: 3px solid var(--acc2); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.reuse-card .rm-name { color: var(--acc2); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.reuse-card p { color: var(--mut); font-size: 13px; margin-bottom: 6px; line-height: 1.7; }
.reuse-card p b { color: var(--txt); }
.reuse-card p:last-child { margin-bottom: 0; }

/* —— 复盘校准（案例内嵌：方法论预期 vs 现实校准 vs 认知迭代）—— */
.retro-hyp { color: var(--txt); font-size: 14px; background: var(--accent-weak); border-left: 3px solid var(--acc); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.retro-difftbl td:nth-child(2) { color: var(--mut); }
.retro-difftbl td:nth-child(3) { color: var(--txt); }
.retro-iter { color: var(--txt); font-size: 13.5px; line-height: 1.85; background: var(--good-weak); border-left: 3px solid var(--acc2); border-radius: 8px; padding: 12px 14px; margin-top: 12px; }
/* 复盘校准合集弹窗：每案一块，虚线分隔 */
.retro-case { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.retro-case:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.retro-case-title { color: var(--fg); font-size: 17px; margin: 0 0 8px; }

/* —— 关于 —— */
#about p { color: var(--mut); font-size: 14px; margin-bottom: 12px; max-width: 760px; line-height: 1.8; }
#about p b { color: var(--txt); }
#about a { color: var(--acc); text-decoration: none; }
#about a:hover { text-decoration: underline; }

/* —— 折叠态可见的「数据来源」tag（灰色，区别于蓝色分类 tag）—— */
.source-tag { display: inline-block; background: var(--surface); color: var(--mut); border: 1px solid var(--line); font-size: 12px; padding: 3px 10px; border-radius: 6px; margin-top: 8px; }

/* —— 指标速查弹窗 —— */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: none; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; z-index: 100; }
.modal-overlay.open { display: flex; }
.modal-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; max-width: 1000px; width: 100%; padding: 28px 28px 32px; position: relative; }
.modal-panel > h2 { margin-bottom: 16px; }
.modal-close { position: absolute; top: 16px; right: 18px; background: var(--card); border: 1px solid var(--line); color: var(--mut); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.modal-close:hover { color: var(--txt); border-color: var(--acc); }

/* ===== 深色页脚（呼应 stats 条收尾）===== */
footer {
  background-color: #0B1120;
  background-image: radial-gradient(circle, rgba(226,232,240,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  margin-top: 0; padding: 44px 0;
}
footer p { color: #94A3B8; font-size: 13px; }
footer .foot-note { color: #64748B; }

/* ===== 运营方法池 ===== */
.pool-badge { display: inline-block; margin-top: 6px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--acc2); border-radius: 8px; padding: 7px 14px; font-size: 13px; color: var(--mut); }

/* 分类筛选 chips */
.method-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 16px; }
.filter-label { font-size: 13px; color: var(--mut); margin-right: 4px; }
.filter-chip { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--fg-muted); border-radius: var(--r-pill); padding: 5px 14px; font-size: 13px; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.filter-chip.c-content { color: var(--c-content); }
.filter-chip.c-growth { color: var(--acc2); }
.filter-chip.c-user { color: var(--c-user); }
.filter-chip.c-act { color: var(--c-act); }
.filter-chip.c-retain { color: var(--c-retain); }
.filter-chip:hover { border-color: var(--fg); color: var(--fg); }
.filter-chip.active { background: var(--fg); border-color: var(--fg); color: #fff; font-weight: 600; }
.filter-chip i { font-style: normal; opacity: .65; font-size: 12px; margin-left: 3px; }
.pool-badge b { color: var(--acc2); }

.method-card { padding: 16px 18px; margin-bottom: 12px; cursor: pointer; }
.mc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mc-top h4 { font-size: 16px; color: var(--txt); margin: 0; }
.cat-badge { font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); color: var(--mut); }
.cat-badge.c-content { color: var(--c-content); }
.cat-badge.c-growth { color: var(--acc2); }
.cat-badge.c-user { color: var(--c-user); }
.cat-badge.c-act { color: var(--c-act); }
.cat-badge.c-retain { color: var(--c-retain); }
.core-logic { font-family: var(--font-mono); color: var(--acc2); font-size: 13px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; margin: 10px 0; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-tags span { font-size: 12px; color: var(--mut); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.mc-src { font-size: 12.5px; color: var(--mut); margin-top: 10px; }
.src-link { color: var(--acc); text-decoration: none; margin-right: 10px; }
.src-link:hover { text-decoration: underline; }
.mc-detail { display: none; margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.mc-detail.open { display: block; }
.mc-sec { margin-bottom: 14px; }
.mc-sec h5 { color: var(--acc); font-size: 13.5px; margin-bottom: 6px; }
.mc-sec p { font-size: 13.5px; color: var(--txt); margin-bottom: 6px; }
.mc-sec ol { margin: 4px 0 4px 18px; }
.mc-sec li { font-size: 13px; color: var(--mut); margin-bottom: 5px; line-height: 1.7; }
.mc-sec .ns, .ns { color: var(--acc2); font-weight: 600; }
.mc-sec .warn-txt, .warn-txt { color: var(--warn); }
.snippet { background: var(--good-weak); border-left: 3px solid var(--acc2); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px; color: var(--mut); }
.snippet b { display: block; color: var(--acc2); margin-bottom: 3px; }

.match-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; }
.match-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mut); flex: 1; min-width: 180px; }
.match-form input, .match-form select { background: var(--bg-deep); border: 1px solid var(--border); color: var(--fg); border-radius: var(--r-ctrl); padding: 9px 10px; font-size: 14px; font-variant-numeric: tabular-nums; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.match-form input:focus, .match-form select:focus, .calc input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.match-form button { background: var(--gradient-accent); color: #fff; border: 0; border-radius: var(--r-ctrl); box-shadow: var(--shadow-cta); padding: 10px 22px; cursor: pointer; font-size: 14px; font-weight: 500; height: 40px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.match-form button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,82,255,.42); }
.match-form button:active { transform: scale(.98); }

.match-empty { color: var(--mut); font-size: 14px; padding: 16px; background: var(--card); border: 1px dashed var(--line); border-radius: 10px; margin-top: 14px; }
.result-block { margin-top: 16px; }
.rb-title { font-size: 14px; color: var(--mut); margin-bottom: 8px; }
.match-card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 12px; padding: 16px 18px; }
.result-block.combo { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--acc2); border-radius: 12px; padding: 16px 18px; }
.result-block.combo .rb-title { color: var(--acc2); }
.combo-why { font-size: 13.5px; color: var(--txt); background: var(--good-weak); border-left: 3px solid var(--acc2); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.score-dots { font-size: 13px; color: var(--acc2); letter-spacing: 1px; white-space: nowrap; }
.score-dots b { font-family: var(--font-mono); color: var(--txt); margin-left: 4px; }
.match-reasons { font-size: 12.5px; color: var(--mut); margin: 8px 0; }
.match-reasons span { display: inline-block; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; margin: 2px 4px 0 0; color: var(--acc2); }
.mc-ns { font-size: 13.5px; margin: 8px 0; }
.other-list { display: flex; flex-wrap: wrap; gap: 8px; }
.other-item { font-size: 13px; color: var(--mut); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.other-item i { color: var(--acc); font-style: normal; }
.excluded-note { font-size: 12px; color: var(--mut); margin-top: 10px; opacity: .8; }

/* ===== 问题诊断台 ===== */
#diagnose .lead { max-width: 820px; }
.diag-form { margin-bottom: 4px; }
.diag-disc { margin: 16px 0 8px; }
.diag-degraded { background: var(--caution-bg); border: 1px solid var(--caution-border); color: var(--caution); font-size: 13px; padding: 10px 14px; border-radius: 8px; margin: 14px 0 6px; line-height: 1.6; }
.diag-loading { color: var(--mut); font-size: 14px; padding: 18px; background: var(--card); border: 1px dashed var(--line); border-radius: 10px; margin-top: 14px; animation: diagPulse 1.2s ease-in-out infinite; }
@keyframes diagPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 诊断结果区：复用案例拆解的排版，但因不在 .teardown 内，需补 #diag-result 作用域 */
#diag-result .sec { margin-bottom: 20px; }
#diag-result .sec > h4 { color: var(--acc); font-size: 15px; margin-bottom: 8px; }
#diag-result .sec p { color: var(--txt); font-size: 14px; margin-bottom: 8px; }
#diag-result ul, #diag-result ol { margin: 6px 0 6px 20px; }
#diag-result li { color: var(--mut); font-size: 13px; margin-bottom: 6px; line-height: 1.7; }
.diag-hyp { color: var(--mut); font-size: 12.5px; margin-bottom: 6px; }
.diag-foot { color: var(--mut); font-size: 12.5px; margin-top: 10px; }
.diag-foot.mut { opacity: .7; }

/* ④ 分层策略卡（绿色左竖线；内嵌的方法池方法卡为蓝色，形成层次）*/
.diag-strategy { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--acc2); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.ds-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-top b { color: var(--txt); font-size: 14.5px; }
.ds-layer { color: var(--mut); font-size: 12.5px; margin: 4px 0; }
.diag-strategy > p { color: var(--txt); font-size: 13.5px; margin: 4px 0; }
.ds-metric { font-size: 13px; }
.ds-method { margin-top: 10px; }
.diag-badge { font-size: 11.5px; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.diag-badge.reuse { background: var(--good-weak); border: 1px solid var(--good-border); color: var(--good); }
.diag-badge.origin { background: var(--accent-weak); border: 1px solid var(--accent-border); color: var(--accent); }
/* ④ 策略里的「原型方法」折叠入口（默认收起，点击展开完整打法；不显示匹配分）*/
.ds-origin { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ds-origin-toggle { background: none; border: 0; color: var(--acc); font-size: 13px; cursor: pointer; padding: 4px 0; text-align: left; font-family: inherit; }
.ds-origin-toggle:hover { text-decoration: underline; }
.ds-origin-toggle b { color: var(--acc2); }
.ds-caret { color: var(--mut); font-size: 12px; }
.ds-origin-detail { display: none; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); }
.ds-origin-detail.open { display: block; }

/* 案例库：网格卡片（点击弹窗看完整拆解，避免就地展开撑破网格）*/
#case-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
#case-list .case-card { margin-bottom: 0; }
.case-open-hint { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--acc); }
#case-modal-body > h2 { margin-bottom: 6px; }

/* ===== 微交互：滚动入场 + 焦点环（克制版；prefers-reduced-motion 全关）===== */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-ring); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .art-main, .art-metric { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== ② 深色数据条（反转对比切片）===== */
.stats-band {
  background-color: #0B1120;
  background-image: radial-gradient(circle, rgba(226,232,240,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: clamp(40px,7vw,68px) 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-mono); font-size: clamp(30px,5vw,46px); font-weight: 700; color: #DBEAFE; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 28px rgba(0,82,255,.35); }
.stat-label { display: block; color: #94A3B8; font-size: 13px; margin-top: 10px; }
.stat-pill { display: inline-block; margin-top: 10px; font-size: 11px; font-family: var(--font-mono); color: #93B4FF; background: rgba(0,82,255,.16); border: 1px solid rgba(0,82,255,.34); border-radius: var(--r-pill); padding: 2px 10px; }

/* ===== 区块标题区 ===== */
.section-head { margin-bottom: 28px; }
.section-head .pill { margin-bottom: 14px; }
.section-head h2 { margin-bottom: 10px; }
.section-head .lead { margin-bottom: 0; }
.section-head.center { text-align: center; }
.section-head.center .pill { margin-left: auto; margin-right: auto; }
.section-head.center .lead { margin-left: auto; margin-right: auto; max-width: 42em; }

/* ===== ③ 运营策略飞轮（解构→组装→推演→校准，方法池为轴心的 2×2 闭环）===== */
.overview { padding: clamp(56px,9vw,96px) 0; }
.loop-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; }
.loop-stage {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.loop-stage:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--accent-border); }
.ls-step { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--accent); background: var(--accent-weak); border: 1px solid var(--accent-border); border-radius: var(--r-pill); padding: 3px 12px; }
.loop-stage h3 { color: var(--fg); font-size: 16.5px; margin: 14px 0 8px; }
.loop-stage p { color: var(--fg-muted); font-size: 13.5px; line-height: 1.7; margin: 0 0 14px; flex: 1; }
.loop-stage p b { color: var(--fg); font-weight: 600; }
.ls-go { color: var(--accent); font-size: 13.5px; font-weight: 500; }
.loop-stage:hover .ls-go { text-decoration: underline; }
/* 中心轴心 hub：绝对居中，直径与 gap+padding 匹配，使其边缘落在卡片留白区、不压文字 */
.loop-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1.5px solid var(--accent-border); box-shadow: var(--shadow-lift);
}
.lh-icon { font-size: 22px; line-height: 1; color: var(--accent); }
.lh-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .02em; color: var(--fg-muted); margin-top: 1px; }
/* 顺时针流转箭头：放在 2×2 四条边中点，指示 01→02→03→04→01 */
.loop-arrow { position: absolute; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--accent-border); color: var(--accent); font-size: 15px; font-weight: 700; box-shadow: var(--shadow-card); }
.la-top { top: 25%; left: 50%; transform: translate(-50%,-50%); }
.la-right { top: 50%; left: 75%; transform: translate(-50%,-50%); }
.la-bottom { top: 75%; left: 50%; transform: translate(-50%,-50%); }
.la-left { top: 50%; left: 25%; transform: translate(-50%,-50%); }
.loop-axis { margin-top: 18px; text-align: center; color: var(--fg-muted); font-size: 13.5px; line-height: 1.7; background: var(--accent-weak); border: 1px dashed var(--accent-border); border-radius: var(--r-card); padding: 14px 18px; }
.loop-axis-badge { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 700; margin-right: 8px; }
.overview-tools { text-align: center; color: var(--fg-muted); font-size: 14px; margin-top: 26px; }
.overview-tools a { color: var(--accent); text-decoration: none; margin: 0 8px; cursor: pointer; }
.overview-tools a:hover { text-decoration: underline; }

/* ===== 深浅交替衬底 ===== */
section.alt { background: var(--surface-sunken); }

/* ===== 响应式 ===== */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { min-height: 220px; order: 2; }
  .loop-grid { grid-template-columns: 1fr; }
  .loop-hub, .loop-arrow { display: none; }
  .topnav-links { gap: 14px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav-inner { gap: 12px; padding: 10px 16px; }
  .topnav-links { display: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 18px; }
  .hero-art { display: none; }
  #case-list { grid-template-columns: 1fr; }
}