/* 熵加密 · 设计系统
   取值全部来自 landing-page-design 技能的令牌表：
   字体 Geist / Geist Mono；字号走 Tailwind 步进；间距走令牌表；圆角走 Tailwind 半径；
   动效基准曲线 cubic-bezier(0.22,1,0.36,1)；背景只用允许的深色；渐变只出现在 hero 标题文字上。
*/

/* ---------- 字体（自托管，无第三方请求） ---------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* 背景（技能允许的深色集合） */
  --bg: #000000;
  --surface: #181818;
  --surface-2: #1f1f1f;
  --surface-3: #272727;
  --surface-4: #313131;
  --olive: #131209;

  /* 文字 */
  /* 等宽字体：默认系统等宽，页面加载完再切到自托管 Geist Mono
     —— 字体推迟到 load 之后再取，首屏少 20 KB */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fg: #ffffff;
  --fg-muted: #9b9b9b;
  --fg-dim: #8a8a8a;   /* Lighthouse 对比度：从 #6b6b6b（3.9:1）提到 5.8:1 */
  --accent: #7aa2f7;
  --ok: #7ddf9a;
  --warn: #e6b673;
  --bad: #f2777a;

  /* 间距令牌 */
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px;
  --s-300: 24px; --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px;
  --s-800: 80px; --s-900: 96px;

  /* 圆角（Tailwind 半径） */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 999px;

  /* 动效 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* design-to-motion 的动效令牌 */
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --e2: cubic-bezier(0.33, 1, 0.68, 1);
  --io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 500ms;
  --dur-fast: 300ms;

  --maxw: 1080px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
code, kbd, pre { font-family: var(--font-mono); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-300); }
.narrow { max-width: 680px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.center { text-align: center; }

.skip {
  position: absolute; left: -9999px; top: var(--s-200); z-index: 100;
  background: var(--accent); color: #0b0d12; padding: var(--s-75) var(--s-200);
  border-radius: var(--r-md); font-weight: 600;
}
.skip:focus { left: var(--s-300); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: var(--s-200) 0;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-300);
  background: rgba(24, 24, 24, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--surface-4);
  border-radius: var(--r-full);
  padding: var(--s-75) var(--s-200);
}
.nav a { color: var(--fg-muted); font-size: 14px; transition: color var(--dur-fast) var(--ease); }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); }
.brand { display: flex; align-items: center; gap: var(--s-75); font-weight: 600; letter-spacing: -0.01em; }
.brand svg { width: 20px; height: 20px; }

/* ---------- 进场：页面先空，元素升起并去模糊 ---------- */
.appear {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
  transition:
    transform 800ms var(--e),
    opacity 600ms var(--e2),
    filter 600ms var(--e2);
  transition-delay: var(--d, 0ms);
}
body.in .appear { opacity: 1; transform: none; filter: none; }

/* 卡片内的小型视觉：脉冲环 */
.pulse { position: relative; display: inline-flex; }
.pulse::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: var(--r-full);
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(1);
  animation: pulse 2.1s var(--e2) infinite;
  pointer-events: none;
}
.pulse.d1::after { animation-delay: 0.7s; }
.pulse.d2::after { animation-delay: 1.4s; }
@keyframes pulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* 密文成形：裁切擦除 */
.wipe { clip-path: inset(0 100% 0 0); }
.wipe.in { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--io); }

/* ---------- CSP 严格模式（style-src 'self'）：动态样式一律走类名 ----------
   内联 style 属性会被 CSP 拦下，动画必须由类名驱动。 */
.wipe.in.w800 { transition-duration: 800ms; }
.wipe.in.w900 { transition-duration: 900ms; }
.fadeable { transition: opacity 400ms var(--e2); }
.fadeable.out { opacity: 0; }

/* 工具页"封存"：密文逐字从下方 4px 升起、去模糊、依次浮现 */
.seal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  filter: blur(2px);
  transition:
    opacity 320ms var(--e2),
    transform 420ms var(--e),
    filter 320ms var(--e2);
}
.seal span.on { opacity: 1; transform: none; filter: none; }
.seal span.g0 { transition-delay: 0ms; }
.seal span.g1 { transition-delay: 12ms; }
.seal span.g2 { transition-delay: 24ms; }
.seal span.g3 { transition-delay: 36ms; }
.seal span.g4 { transition-delay: 48ms; }
.seal span.g5 { transition-delay: 60ms; }
.seal span.g6 { transition-delay: 72ms; }
.seal span.g7 { transition-delay: 84ms; }
.seal span.g8 { transition-delay: 96ms; }
.seal span.g9 { transition-delay: 108ms; }
.seal span.g10 { transition-delay: 120ms; }
.seal span.g11 { transition-delay: 132ms; }
.seal span.g12 { transition-delay: 144ms; }
.seal span.g13 { transition-delay: 156ms; }
.seal span.g14 { transition-delay: 168ms; }
.seal span.g15 { transition-delay: 180ms; }
.seal span.g16 { transition-delay: 192ms; }
.seal span.g17 { transition-delay: 204ms; }
.seal span.g18 { transition-delay: 216ms; }
.seal span.g19 { transition-delay: 228ms; }
.seal span.g20 { transition-delay: 240ms; }
.seal span.g21 { transition-delay: 252ms; }
.seal span.g22 { transition-delay: 264ms; }
.seal span.g23 { transition-delay: 276ms; }
.seal span.g24 { transition-delay: 288ms; }
.seal span.g25 { transition-delay: 300ms; }
.seal span.g26 { transition-delay: 312ms; }
.seal span.g27 { transition-delay: 324ms; }
.seal span.g28 { transition-delay: 336ms; }
.seal span.g29 { transition-delay: 348ms; }
.seal span.g30 { transition-delay: 360ms; }
.seal span.g31 { transition-delay: 372ms; }
.seal span.g32 { transition-delay: 384ms; }
.seal span.g33 { transition-delay: 396ms; }
.seal span.g34 { transition-delay: 408ms; }
.seal span.g35 { transition-delay: 420ms; }
.seal span.g36 { transition-delay: 432ms; }
.seal span.g37 { transition-delay: 444ms; }
.seal span.g38 { transition-delay: 456ms; }
.seal span.g39 { transition-delay: 468ms; }
.seal span.g40 { transition-delay: 480ms; }
.seal span.g41 { transition-delay: 492ms; }
.seal span.g42 { transition-delay: 504ms; }
.seal span.g43 { transition-delay: 516ms; }
.seal span.g44 { transition-delay: 528ms; }
.seal span.g45 { transition-delay: 540ms; }
.seal span.g46 { transition-delay: 552ms; }
.seal span.g47 { transition-delay: 564ms; }
.seal span.g48 { transition-delay: 576ms; }
.seal span.g49 { transition-delay: 588ms; }
.seal span.g50 { transition-delay: 600ms; }
.seal span.g51 { transition-delay: 612ms; }
.seal span.g52 { transition-delay: 624ms; }
.seal span.g53 { transition-delay: 636ms; }
.seal span.g54 { transition-delay: 648ms; }
.seal span.g55 { transition-delay: 660ms; }
.seal span.g56 { transition-delay: 672ms; }
.seal span.g57 { transition-delay: 684ms; }
.seal span.g58 { transition-delay: 696ms; }
.seal span.g59 { transition-delay: 708ms; }
.seal span.g60 { transition-delay: 720ms; }
.seal span.g61 { transition-delay: 732ms; }
.seal span.g62 { transition-delay: 744ms; }
.seal span.g63 { transition-delay: 756ms; }
.seal span.g64 { transition-delay: 768ms; }
.seal span.g65 { transition-delay: 780ms; }
.seal span.g66 { transition-delay: 792ms; }
.seal span.g67 { transition-delay: 804ms; }
.seal span.g68 { transition-delay: 816ms; }
.seal span.g69 { transition-delay: 828ms; }
.seal span.g70 { transition-delay: 840ms; }
.seal span.g71 { transition-delay: 852ms; }
.seal span.g72 { transition-delay: 864ms; }
.seal span.g73 { transition-delay: 876ms; }
.seal span.g74 { transition-delay: 888ms; }
.seal span.g75 { transition-delay: 900ms; }

/* ---------- 版式工具类（替代内联 style，兼容 style-src 'self'） ---------- */
.page-pad { padding-top: 64px; padding-bottom: 96px; }
.sec-top { padding: 0 0 24px; }
.sec-top-lg { padding: 48px 0 0; }
.p-0 { padding: 0; }
.h1-page { font-size: 36px; line-height: 1.1; }
.h2-24 { font-size: 24px; }
.lead { margin-top: 12px; font-size: 18px; max-width: 680px; }
.fs-16 { font-size: 16px; }
.fs-13 { font-size: 13px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.m-0 { margin: 0; }
.m-0-12 { margin: 0 0 12px; }
.m-6-0 { margin: 6px 0 0; }
.grow { flex: 1; }
.w-auto { width: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.check-row { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--fg); }
.out-block { margin-top: 12px; min-height: 64px; }
.row-wrap { display: flex; gap: 24px; flex-wrap: wrap; }
.link-accent { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pad-120 { padding-top: 120px; }
.h1-48 { font-size: 48px; }
.h1-36 { font-size: 36px; }
.h2-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.mt-32 { margin-top: 32px; }
.sec-top-32 { padding-top: 32px; }
.d-0 { --d: 0ms; }
.d-60 { --d: 60ms; }
.d-120 { --d: 120ms; }
.d-190 { --d: 190ms; }
.d-250 { --d: 250ms; }
.d-310 { --d: 310ms; }
.d-370 { --d: 370ms; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-75);
  background: var(--fg); color: #0b0d12;
  border: 0; border-radius: var(--r-md);
  padding: var(--s-75) var(--s-100);
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--surface-4); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { font-size: 14px; padding: var(--s-50) var(--s-100); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Hero ---------- */
.hero { padding: var(--s-800) 0 var(--s-700); }
.hero h1 {
  font-size: 60px; line-height: 1.05; letter-spacing: -0.03em;
  background: linear-gradient(90deg, #ffffff 0%, #9b9b9b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { margin-top: var(--s-300); font-size: 18px; line-height: 1.55; color: var(--fg-muted); }
.hero .cta { margin-top: var(--s-400); display: flex; gap: var(--s-200); flex-wrap: wrap; align-items: center; }
.proof { margin-top: var(--s-200); font-size: 14px; color: var(--fg-dim); }
.proof b { color: var(--fg-muted); font-weight: 600; }

/* 密文预览 */
.cipher-preview {
  margin-top: var(--s-700);
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-xl);
  padding: var(--s-300);
}
.cipher-preview .label { font-size: 12px; color: var(--fg-dim); margin-bottom: var(--s-100); }
.cipher-line {
  font-family: var(--font-mono);
  font-size: 20px; line-height: 1.9; color: var(--fg);
  word-break: break-all; min-height: 76px;
}
.cipher-line .caret { color: var(--accent); }

/* ---------- Tagline reveal ---------- */
.tagline { padding: var(--s-800) 0; }
.tagline p {
  font-size: 48px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600;
}
.tagline .w { opacity: 0.28; transition: opacity 700ms var(--ease), transform 700ms var(--ease); transform: translateY(8px); }
.tagline .w.on { opacity: 1; transform: none; }

/* ---------- 区块 ---------- */
section { padding: var(--s-700) 0; }
.sec-head { max-width: 680px; margin-bottom: var(--s-500); }
.sec-head h2 { font-size: 36px; line-height: 1.1; }
.sec-head p { margin-top: var(--s-200); color: var(--fg-muted); font-size: 18px; line-height: 1.55; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-200); }
.card {
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-xl);
  padding: var(--s-300);
}
.card h3 { font-size: 20px; line-height: 1.4; margin-bottom: var(--s-100); }
.card p { color: var(--fg-muted); font-size: 14px; line-height: 1.7; }
.card .ico { width: 20px; height: 20px; color: var(--accent); margin-bottom: var(--s-200); }

.steps { display: grid; gap: var(--s-200); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-200); align-items: start;
  background: var(--surface); border: 1px solid var(--surface-3); border-radius: var(--r-xl); padding: var(--s-300); }
.step .n { font-family: var(--font-mono); color: var(--fg-dim); font-size: 14px; padding-top: 2px; }
.step h3 { font-size: 18px; margin-bottom: var(--s-50); }
.step p { color: var(--fg-muted); font-size: 14px; }

.faq details {
  border-bottom: 1px solid var(--surface-3);
  padding: var(--s-200) 0;
}
.faq summary {
  cursor: pointer; font-size: 18px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: var(--s-200); align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-dim); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "−"; }
.faq .a { margin-top: var(--s-200); color: var(--fg-muted); font-size: 14px; line-height: 1.8; max-width: 680px; }

.cta-final {
  background: var(--surface-2); border: 1px solid var(--surface-4);
  border-radius: var(--r-2xl); padding: var(--s-700) var(--s-400); text-align: center;
}
.cta-final h2 { font-size: 36px; }
.cta-final p { margin: var(--s-200) auto var(--s-400); color: var(--fg-muted); max-width: 560px; font-size: 18px; }

footer { border-top: 1px solid var(--surface-3); padding: var(--s-500) 0 var(--s-700); color: var(--fg-dim); font-size: 14px; }
footer .row { display: flex; gap: var(--s-300); flex-wrap: wrap; justify-content: space-between; }
footer a:hover { color: var(--fg-muted); }

/* ---------- 应用 ---------- */
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-200); }
@media (max-width: 900px) { .app-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--surface-3); border-radius: var(--r-xl); padding: var(--s-300); }
.panel h3 { font-size: 14px; color: var(--fg-dim); font-weight: 500; margin-bottom: var(--s-100); }
.field { margin-bottom: var(--s-200); }
.field label { display: block; font-size: 12px; color: var(--fg-dim); margin-bottom: var(--s-50); }
textarea, input[type="text"], select {
  width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid var(--surface-4); border-radius: var(--r-md);
  padding: var(--s-100); font-family: var(--font-mono); font-size: 14px;
  resize: vertical;
}
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent); }
.row { display: flex; gap: var(--s-100); flex-wrap: wrap; align-items: center; }
.out {
  background: var(--bg); border: 1px solid var(--surface-4); border-radius: var(--r-md);
  padding: var(--s-100); min-height: 96px; word-break: break-all;
  /* 多行输出（候选清单、群发结果、生成的口令）要保留换行，否则全挤成一段 */
  white-space: pre-wrap;
  font-family: var(--font-mono); font-size: 16px; line-height: 1.9;
}
.note { font-size: 12px; color: var(--fg-dim); line-height: 1.7; margin-top: var(--s-100); }
.warn { color: var(--warn); }
.err { color: var(--bad); }
.ok { color: var(--ok); }

/* 滚动显现 */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.on { opacity: 1; transform: none; }

@media print {
  .reveal { opacity: 1; transform: none; }
  .tagline .w { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 200ms !important; }
  .appear { opacity: 1 !important; transform: none !important; filter: none !important; }
  .pulse::after { display: none; }
  .wipe { clip-path: none !important; }
  .seal span { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal { opacity: 1; transform: none; }
  .tagline .w { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 现场试一条（落地页里的实时加密） ---------- */
.demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-300);
  align-items: start;
}
.demo-in, .demo-out {
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-2xl);
  padding: var(--s-300);
}
.demo label {
  display: block;
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: var(--s-50);
}
.demo textarea, .demo select { width: 100%; }
.demo-cipher {
  font-size: 16px;
  min-height: 76px;
  margin-bottom: var(--s-200);
}
.demo-row {
  display: flex;
  align-items: center;
  gap: var(--s-200);
  margin-top: var(--s-200);
  flex-wrap: wrap;
}
.demo-label { margin: 0; flex: none; }
.demo-row select { flex: 1; width: auto; min-width: 0; }
.demo-row .note { margin: 0; flex: 1; }
.demo-row .btn { margin-left: auto; }
@media (max-width: 760px) {
  .demo { grid-template-columns: 1fr; }
}

/* ---------- 两栏网格与分段控件 ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-300);
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.segmented {
  display: inline-flex;
  border: 1px solid var(--surface-4);
  border-radius: var(--r-md);
  overflow: hidden;
  flex: none;
}
.segmented .seg {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented .seg:hover { color: var(--fg); }
.segmented .seg.on {
  background: var(--fg);
  color: #0b0d12;
}

/* ---------- 口令二维码 ---------- */
#qrBox { margin-top: var(--s-200); }
.qr-mode {
  width: auto;
  flex: none;
  font-size: 12px;
  padding: 6px 8px;
}
.qr-svg {
  width: 220px;
  height: 220px;
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 0;
  display: block;
}

/* ---------- 工具页步骤导航（长页面用） ---------- */
.stepnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--surface-2);
}
.stepnav-inner {
  display: flex;
  gap: var(--s-100);
  overflow-x: auto;
  scrollbar-width: none;
}
.stepnav-inner::-webkit-scrollbar { display: none; }
.stepnav a {
  flex: none;
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
  padding: var(--s-100) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.stepnav a:hover { color: var(--fg); border-bottom-color: var(--accent); }
/* 锚点跳转时留出吸顶导航的高度 */
#main .panel { scroll-margin-top: 72px; }

/* ---------- 会话记录 ---------- */
.session-log { display: flex; flex-direction: column; gap: var(--s-75); }
.session-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-200);
  align-items: baseline;
  border-bottom: 1px solid var(--surface-2);
  padding-bottom: var(--s-75);
}
.session-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
}
.session-body { font-size: 14px; color: var(--fg); word-break: break-all; }
.check-out { display: flex; flex-direction: column; gap: var(--s-100); }
.check-item {
  border-left: 2px solid var(--surface-4);
  padding-left: var(--s-200);
}
.check-item.ok { border-left-color: var(--ok); }
.check-item.bad { border-left-color: var(--bad); }
.check-head {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  word-break: break-all;
}
.check-body { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.check-spell {
  font-size: 13px;
  color: var(--accent);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.reply-label {
  display: block;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: var(--s-100);
}
.session-reply {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 词级密文分层着色 ---------- */
#cipher .lv-word { color: var(--accent); }
#cipher .lv-char { color: var(--fg); }
#cipher .lv-symbol { color: var(--warn); }
#layerLegend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-200);
  margin-top: var(--s-100);
}
#layerLegend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
#layerLegend .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  display: inline-block;
}
#layerLegend .dot.lv-word { background: var(--accent); }
#layerLegend .dot.lv-char { background: var(--fg); }
#layerLegend .dot.lv-symbol { background: var(--warn); }
#layerLegend b { color: var(--fg); font-weight: 600; }

/* ---------- 一轮完整的加密通话（落地页演示） ---------- */
.call-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-300);
  align-items: start;
}
.call-step {
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-xl);
  padding: var(--s-300);
  position: relative;
}
.call-step .n {
  width: 24px; height: 24px;
  border-radius: var(--r-full);
  background: var(--surface-4);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-200);
}
.call-label {
  display: block;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: var(--s-100);
}
.call-ciphers { display: flex; flex-direction: column; gap: var(--s-100); }
.call-session {
  width: 100%;
  margin-bottom: var(--s-100);
  font-family: var(--font-mono);
  font-size: 12px;
}
.call-cipher {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-md);
  padding: var(--s-100);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  word-break: break-all;
}
.call-cipher:hover { border-color: var(--surface-4); transform: translateY(-1px); }
.call-cipher.hit { border-color: var(--accent); }
.call-row { margin-top: var(--s-200); align-items: center; }
@media (max-width: 900px) {
  .call-demo { grid-template-columns: 1fr; }
}

/* ---------- 运营看板 ---------- */
.stat-big {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: var(--s-100) 0 var(--s-50);
}
.funnel, .daybars { display: flex; flex-direction: column; gap: var(--s-100); }
.funnel { min-height: 420px; }
.funnel-row, .day-row {
  display: grid;
  grid-template-columns: 180px 1fr 72px;
  align-items: center;
  gap: var(--s-200);
}
.funnel-name { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.funnel-event { font-family: var(--font-mono); font-size: 13px; color: var(--fg); }
.funnel-desc { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel-name, .day-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funnel-count, .day-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  text-align: right;
}
.funnel-bar, .day-bar { display: block; width: 100%; }
.bar { display: block; width: 100%; height: 8px; }
.bar-fill { fill: var(--accent); }
.day-fill { fill: var(--fg-muted); }
@media (max-width: 640px) {
  .funnel-row, .day-row { grid-template-columns: 120px 1fr 56px; }
}

/* ---------- 收尾覆盖：组件规则晚于工具类，这里统一优先级 ---------- */
.cipher-line.fs-16 { font-size: 16px; color: var(--fg-muted); }
.mono.fs-13 { font-size: 13px; color: var(--fg-muted); }
.cipher-preview .label.mt-24 { margin-top: 24px; }

/* 认领候选：能解出的每条会话串一张卡，差异字高亮 */
.claim-cards { display: flex; flex-direction: column; gap: var(--s-75); margin-top: var(--s-100); }
.claim-card { border: 1px solid var(--surface-3); border-radius: var(--r-lg); padding: var(--s-100) var(--s-150); background: var(--surface-2); }
.claim-card.is-best { border-color: var(--accent); }
.claim-head { display: flex; align-items: baseline; gap: var(--s-75); flex-wrap: wrap; }
.claim-tag { font-size: 12px; color: var(--fg); font-weight: 600; }
.claim-meta { font-size: 12px; color: var(--fg-dim); }
.claim-text { font-size: 15px; line-height: 1.9; margin-top: var(--s-50); word-break: break-all; }
.claim-diff { background: rgba(230, 182, 115, 0.22); color: var(--warn); border-radius: 3px; }
.claim-actions { display: flex; gap: var(--s-75); margin-top: var(--s-75); }
.claim-failed { margin: 0; }

html.fonts-late { --font-mono: "Geist Mono", ui-monospace, monospace; }

/* 看板：关键路径（产品动作链） */
/* 预留高度：数据回来之前先占位，避免内容注入把下面的区块推下去（CLS） */
.path-list { display: flex; flex-direction: column; gap: var(--s-100); min-height: 320px; }
.path-row {
  display: grid;
  grid-template-columns: 200px 1fr 64px 84px;
  align-items: center;
  gap: var(--s-200);
}
.path-name { font-size: 14px; color: var(--fg); }
.path-hint { font-size: 12px; color: var(--fg-dim); }
.path-bar { display: block; width: 100%; }
.path-count { font-family: var(--font-mono); font-size: 13px; color: var(--fg); text-align: right; }
.path-pct { font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted); text-align: right; }
.path-bar-fill { fill: var(--accent); }
.path-bar-fill.zero { fill: var(--surface-4); }
@media (max-width: 640px) {
  .path-row { grid-template-columns: 140px 1fr 56px; }
  .path-pct { display: none; }
}

/* 落地页：给 AI 的一条龙 —— 命令行一行 + 复制 */
.code-line {
  display: block; background: var(--bg); border: 1px solid var(--surface-4);
  border-radius: var(--r-md); padding: var(--s-100) var(--s-150);
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
  word-break: break-all;
}

/* 看板：事件目录 */
.catalog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-100) var(--s-300); }
.catalog-item { display: flex; flex-direction: column; gap: 2px; }
.catalog-name { font-family: var(--font-mono); font-size: 13px; color: var(--fg); }
.catalog-desc { font-size: 12px; color: var(--fg-dim); }

.never-box { border-top: 1px solid var(--surface-3); padding-top: var(--s-200); }
.never-list { margin: var(--s-100) 0 0; padding-left: var(--s-300); columns: 2; column-gap: var(--s-300); }
.never-list li { font-size: 13px; color: var(--fg-muted); line-height: 1.9; break-inside: avoid; }
@media (max-width: 640px) { .never-list { columns: 1; } }

.funnel-row.is-clickable { cursor: pointer; border-radius: var(--r-sm); }
.funnel-row.is-clickable:hover { background: var(--surface-2); }
.funnel-row.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip {
  background: var(--surface-3); color: var(--fg); border: 1px solid var(--surface-4);
  border-radius: var(--r-full); padding: var(--s-50) var(--s-100);
  font-size: 12px; font-family: var(--font-mono);
}
.chip:hover { border-color: var(--accent); }

/* 看板：每天 × 事件 热力表 */
.heat-wrap { overflow-x: auto; }
.heat-table { border-collapse: separate; border-spacing: 2px; width: 100%; }
.heat-head { font-size: 11px; color: var(--fg-dim); font-weight: 400; text-align: center; padding: 0 2px; white-space: nowrap; }
.heat-label { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); text-align: left; font-weight: 400; white-space: nowrap; padding-right: var(--s-100); }
.heat-cell { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg); min-width: 18px; padding: var(--s-50) 2px; border-radius: 3px; }
.heat-0 { background: var(--surface-2); }
.heat-1 { background: rgba(122, 162, 247, 0.22); }
.heat-2 { background: rgba(122, 162, 247, 0.42); }
.heat-3 { background: rgba(122, 162, 247, 0.66); }
.heat-4 { background: rgba(122, 162, 247, 0.92); color: var(--bg); }

.heat-legend { align-items: center; gap: var(--s-50); }
.heat-legend .heat-cell { width: 16px; min-width: 16px; height: 14px; padding: 0; }

/* 落地页：常见问题的快捷入口 */
.faq-jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75); margin-bottom: var(--s-200); }
.jump-chip {
  font-size: 13px; color: var(--fg-muted); text-decoration: none;
  border: 1px solid var(--surface-4); border-radius: var(--r-full);
  padding: var(--s-50) var(--s-100);
  transition: border-color 300ms var(--ease), color 300ms var(--ease);
}
.jump-chip:hover { color: var(--fg); border-color: var(--accent); }

/* 群发结果：每人一行，各自复制 */
.group-list { display: flex; flex-direction: column; gap: var(--s-50); margin-top: var(--s-100); }
.group-item { display: flex; align-items: center; gap: var(--s-100); }
.group-idx { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); min-width: 24px; }
.group-text { flex: 1; font-family: var(--font-mono); font-size: 13px; color: var(--fg); word-break: break-all; }

.session-del {
  background: transparent; border: none; color: var(--fg-dim);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 var(--s-50);
  border-radius: var(--r-sm);
}
.session-del:hover { color: var(--bad); }
.session-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }