/* ==========================================================================
   朗晟英才 · 雏鹰 (Eaglet) — 官网 V1.0
   设计系统：结构参考 qdrant.tech，配色取自雏鹰品牌视觉
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* 墨色：深色底 / 正文 */
  --ink-900: #070a12;
  --ink-850: #0b1020;
  --ink-800: #161e33;
  --ink-750: #1d2740;
  --ink-700: #28324d;
  --ink-600: #3d4866;
  --ink-500: #576280;
  --ink-400: #8f98b2;
  --ink-300: #b9c1d4;

  /* 纸色：浅色底 */
  --paper: #ffffff;
  --paper-50: #f8fafd;
  --paper-100: #f0f3fa;
  --paper-200: #e1e5f0;
  --paper-300: #d4d9e6;

  /* 品牌：雏鹰紫（产品主色 #7C4DFF）+ 一级 logo 的青绿渐变 */
  /* ---- 方案 A · 赤霞（品牌红取自首屏主视觉的暖色星云）---- */
  --brand: #E14B2C; --brand-btn: #D24629; --brand-hover: #F2653F; --brand-bright: #FF8A66; --brand-deep: #9A2F21;
  --brand-tint: #FCEDE7; --brand-tint-2: #F7DCD1; --brand-rgb: 225 75 44; --brand-bright-rgb: 255 138 102;
  --brand-deep-rgb: 154 47 33; --brand-ink: #B33518;
  --ink-900: #070A12; --ink-850: #0B1020; --ink-850-rgb: 11 16 32; --ink-800: #161E33; --panel-2: #1B2230; --panel-2-hover: #232C3D;
  --paper: #FFFFFF; --paper-50: #F8FAFD; --paper-100: #F0F3FA; --paper-200: #E1E5F0; --paper-300: #D4D9E6;
  --sky: #1E9FBF; --sky-rgb: 30 159 191; --sky-bright: #6FD7EA;
  --teal: #2DB695; --teal-rgb: 45 182 149; --teal-bright: #5FD8B6;
  --indigo: #4E7BE8; --indigo-rgb: 78 123 232; --indigo-bright: #A6BBFF;
  --green: #1E8E4E; --green-rgb: 30 142 78; --amber: #D98A0B; --amber-rgb: 217 138 11;
  --rose: #C2213F; --rose-rgb: 194 33 63; --rose-bright: #FF9FB2;
  --bad: #7C8496; --bad-rgb: 124 132 150;
  --lime: #69D858; --lime-rgb: 105 216 88; --ember: #E2673F; --ember-rgb: 226 103 63; --ember-soft: #FFD9C7;
  --shadow-glow: 0 18px 45px rgb(var(--brand-rgb) / .28);

  /* 功能色 */

  /* 主视觉：取自首屏图片左侧留白区的深海军蓝（中位色 #010407）与画面星云的暖色 */
  --ink-image: #010407;
  --ember: #e2673f;

  /* 语义 */
  --fg: var(--ink-700);
  --fg-strong: var(--ink-900);
  --fg-muted: var(--ink-500);
  --fg-subtle: var(--ink-400);
  --border: var(--paper-300);
  --border-soft: var(--paper-200);

  /* 字体 */
  --font-sans: "Mona Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;

  /* 测度 */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 8.5vw, 128px);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* 阴影 */
  --shadow-card: 0 1px 2px rgba(22, 30, 51, 0.06);
  --shadow-lift: 0 10px 20px rgba(22, 30, 51, 0.1), 0 1px 2px rgba(22, 30, 51, 0.1);
  --shadow-glow: 0 18px 45px rgb(var(--brand-rgb) / 0.28);

  --nav-h: 68px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.18; color: var(--fg-strong); letter-spacing: -0.02em; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }   /* height:auto 压掉 HTML 上 width/height 属性给的高度：属性只用来占位，否则样式表一没跟上（换版本没换 ?v= 而读到旧的那份）窄容器里的图会被纵向拉长 */
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--brand); color: #fff; }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: 1360px; }

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight { padding-block: clamp(56px, 6vw, 88px); }

.section--paper { background: var(--paper); }
.section--paper-100 { background: var(--paper-100); }

.section--ink {
  background: var(--ink-900);
  color: var(--ink-300);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

.section--mesh {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgb(var(--brand-rgb) / 0.30), transparent 62%),
    radial-gradient(900px 460px at 92% 8%, rgb(var(--sky-rgb) / 0.22), transparent 60%),
    var(--ink-900);
  color: var(--ink-300);
}
.section--mesh h1, .section--mesh h2, .section--mesh h3, .section--mesh h4 { color: #fff; }

.rule { height: 1px; background: var(--border-soft); border: 0; margin: 0; }
.section--ink .rule { background: rgba(255, 255, 255, 0.1); }

/* ---------- 4. Type ---------- */
.display {
  font-size: clamp(2.75rem, 6.2vw, 5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); letter-spacing: -0.03em; }
.h2 { font-size: clamp(1.85rem, 3.5vw, 3rem); letter-spacing: -0.028em; }
.h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.h4 { font-size: 1.25rem; letter-spacing: -0.01em; }

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.62;
  color: var(--fg-muted);
  font-weight: 350;
}
.section--ink .lead, .section--mesh .lead { color: var(--ink-300); }

.body-sm { font-size: 0.9375rem; line-height: 1.65; color: var(--fg-muted); }
.body-xs { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-subtle); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.section--ink .eyebrow, .section--mesh .eyebrow { color: var(--brand-bright); }
.eyebrow--plain::before { display: none; }

.grad-text {
  background: linear-gradient(96deg, var(--brand) 0%, var(--sky) 58%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono { font-family: var(--font-mono); }

/* 只给读屏与搜索引擎的文字：不占版面、但仍留在无障碍树里（h1 这类摘掉可见标题后
   又不能丢的元素用它；§39 的 .tbl__cap 是同一手法的表格专用版） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.section-head { max-width: 780px; margin-bottom: clamp(40px, 4.5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .h2 + .lead { margin-top: 18px; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--sm { padding: 8px 14px; font-size: 0.8125rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgb(var(--brand-deep-rgb) / 0.24);
}
.btn--primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-glow); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--fg-strong);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--ink-700); background: var(--paper-100); }

/* 深色底上的次要按钮：实心块面，不用半透明玻璃 */
.btn--light {
  background: var(--panel-2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn--light:hover { background: var(--panel-2-hover); border-color: rgba(255, 255, 255, 0.34); }

/* 深色底上的描边次要按钮：白框白字、透明底 —— 与 .btn--light（同一场景的实心块面）互补。
   普通 .btn--ghost 在深色底上是深色字，几乎看不见，别拿它配深色首屏。 */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.btn--white { background: #fff; color: var(--ink-900); }
.btn--white:hover { background: var(--paper-100); transform: translateY(-1px); }

/* 文字链接 + 箭头 */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand);
}
.tlink::after {
  content: "";
  width: 14px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 50%, 62% 50%, 62% 0, 100% 50%, 62% 100%, 62% 50%, 0 50%);
  transition: transform .18s ease;
}
.tlink:hover::after { transform: translateX(3px); }
.section--ink .tlink, .section--mesh .tlink { color: var(--brand-bright); }

/* ---------- 6. Top navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(1, 4, 7, 0.93);      /* = --ink-image 的色相；留一点透光，但要压得住白底页 + 徽标 */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
}

/* 首屏是整幅主视觉时，导航完全透明，与画面顶部融为一色；
   滚动后（或移动端菜单展开时）再回到毛玻璃底 */
.nav--overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav--overlay.is-stuck {
  background: rgba(1, 4, 7, 0.93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }   /* 品牌徽标：按原比例放进方框，不拉伸 */
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
/* 品牌名已从组合标中去掉（站名只保留英文行），这一行是唯一的字标：
   比原来的副标题略大、亮一档，免得 32px 徽标旁边只剩一行灰字 */
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
}

/* 下拉菜单右对齐（登录）：基础规则里的 left: 0 定义在下方、同权重会盖掉 left: auto，
   min-width 290px 便只能向右溢出，861–1080px 与窄屏上都会多出一段横向可滚区域。
   改用复合选择器压过基础规则，让 right: 0 真正按右边缘对齐。 */
.nav__dropdown.nav__dropdown--right { left: auto; right: 0; }

.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: 8px; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--ink-300);
  transition: color .16s ease, background-color .16s ease;
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav__link[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
.nav__link[aria-current="page"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-bright);
  flex-shrink: 0;
}
.nav__caret {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
  transition: transform .18s ease;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 290px;
  padding: 8px;
  background: var(--ink-850);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__item:hover > .nav__link .nav__caret { transform: rotate(225deg) translateY(-1px); }

.nav__dropdown a {
  display: block;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  transition: background-color .15s ease;
}
.nav__dropdown a:hover { background: rgba(255, 255, 255, 0.08); }
.nav__dropdown .dd-title { display: block; font-size: 0.9375rem; color: #fff; font-weight: 500; }
.nav__dropdown .dd-desc { display: block; font-size: 0.8125rem; color: var(--ink-400); margin-top: 3px; }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
}
.nav__toggle span {
  position: relative;
  width: 16px; height: 1.5px;
  background: #fff;
  display: block;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1.5px;
  background: #fff;
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }

/* 移动端抽屉 */
.nav__mobile {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--ink-900);
  padding: 12px var(--gutter) 26px;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}
.nav__mobile.is-open { display: block; }
.nav__mobile-group { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav__mobile-group > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 8px;
}
.nav__mobile a { display: block; padding: 9px 0; color: var(--ink-300); font-size: 0.9375rem; }
.nav__mobile a:hover { color: #fff; }
.nav__mobile-cta { display: flex; gap: 10px; margin-top: 20px; }
.nav__mobile-cta .btn { flex: 1; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 132px) clamp(64px, 8vw, 116px);
  background: var(--ink-900);
  color: var(--ink-300);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 15%, transparent 78%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 14% 4%, rgb(var(--brand-rgb) / 0.42), transparent 64%),
    radial-gradient(680px 400px at 88% 16%, rgb(var(--sky-rgb) / 0.28), transparent 62%),
    radial-gradient(520px 320px at 62% 96%, rgb(var(--teal-rgb) / 0.18), transparent 66%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero .lead { color: var(--ink-300); max-width: 660px; margin-top: 24px; }

.hero--center { text-align: center; }
.hero--center .lead { margin-inline: auto; }
.hero--center .eyebrow { justify-content: center; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero--center .hero__actions { justify-content: center; }

.hero--compact { padding-block: clamp(56px, 6.5vw, 92px) clamp(48px, 5.5vw, 76px); }

/* 首屏主视觉：整张画面原样铺满一屏 —— 左半边是画面自带的净色区，
   标题与按钮就落在那里；不拉伸、不裁主体、全程不用蒙版 */
.hero--image {
  /* 连导航底边那 1px 描边一起压掉，首屏顶端不留白线 */
  margin-top: calc(-1 * var(--nav-h) - 1px);
  padding-block: 0;
  background: var(--ink-image);
  min-height: max(560px, 100svh);   /* 正好铺满一屏：下面那条指标只在下滑后出现 */
  overflow: clip;
}
.hero--image::before,
.hero--image::after { display: none; }          /* 关掉网格与辉光，画面自己出彩 */
.hero--image > .container {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--nav-h) + clamp(30px, 3.4vw, 56px)) clamp(40px, 5vw, 72px);
}
/* 文案只占画面留白的那一侧：留白右边界约在宽度的 41.5%，减去容器左缩进后再留 6px 余量 */
.hero__body { max-width: min(440px, calc(41.5vw - max(40px, 50vw - 560px) - 6px)); }
.hero--image h1 { max-width: none; }
.hero--image .display { font-size: clamp(2.2rem, 4.2vw, 3.9rem); text-wrap: balance; }
/* 「智能求职」是一个词，不能被折行拆到两行（配合 h1 里的 <br> 固定成「开启智能求职 / 新时代」） */
.hero--image .display .grad-text { white-space: nowrap; }
.hero--image .eyebrow { color: var(--ember-soft); }
.hero--image .eyebrow::before { background: var(--ember); }
.hero--image .lead { font-size: 1rem; line-height: 1.65; color: #c6d0e2; margin-top: 20px; }
.hero--image .hero__actions { margin-top: 30px; }

/* 画面：整幅铺满首屏、按左缘对齐 —— 留白在左、星云在右；
   宽屏时从下缘裁掉的只是星野，留白与主体都完整保留 */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* 信任/指标条 */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(48px, 5.5vw, 72px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.metric { background: rgb(var(--ink-850-rgb) / 0.72); padding: 24px 22px; }
.metric__value {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.metric__value small { font-size: 0.55em; font-weight: 500; margin-left: 3px; color: var(--brand-bright); }
.metric__label { font-size: 0.875rem; color: var(--ink-400); margin-top: 8px; }

/* 首屏下的关键指标：扁平条 + 发丝分割，不用玻璃卡片 */
.statband { background: var(--paper-50); border-bottom: 1px solid var(--paper-200); }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--paper-200);
  border-inline: 1px solid var(--paper-200);
}
.stat { background: var(--paper-50); padding: 26px 24px; }
.stat__value {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat__value small { font-size: 0.55em; font-weight: 500; margin-left: 3px; color: var(--brand); }
.stat__label { font-size: 0.875rem; color: var(--fg-muted); margin-top: 6px; }

/* ---------- 8. Cards & grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap-lg { gap: 32px; }

.card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .18s ease, box-shadow .18s ease, translate .18s ease, background-color .18s ease;
}
.card__title { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); margin-bottom: 9px; }
.card__desc { font-size: 0.9375rem; line-height: 1.62; color: var(--fg-muted); }
.card__foot { margin-top: 18px; padding-top: 0; }

a.card:hover, .card--hover:hover {
  background: #fff;
  border-color: var(--paper-200);
  box-shadow: var(--shadow-lift);
  /* translate 而不是 transform：入场动画 .is-in 的 transform:none 权重更高，会把 transform 版本吃掉 */
  translate: 0 -2px;
}
a.card { position: relative; overflow: hidden; }
a.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--sky));
  opacity: 0;
  transition: opacity .2s ease;
}
a.card:hover::before { opacity: 1; }

.card--dark {
  background: linear-gradient(var(--ink-800), var(--ink-850));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-300);
}
.card--dark .card__title { color: #fff; }
.card--dark .card__desc { color: var(--ink-300); }
a.card--dark:hover, .card--dark.card--hover:hover {
  background: linear-gradient(var(--ink-750), #101728);
  border-color: rgb(var(--brand-rgb) / 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.card--flat { background: #fff; }
.card--flat:hover { transform: none; box-shadow: var(--shadow-card); }

.card__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  margin-bottom: 18px;
  flex-shrink: 0;
}
.card__icon svg { width: 21px; height: 21px; }
.card--dark .card__icon { background: rgb(var(--brand-rgb) / 0.18); color: var(--brand-bright); }

.card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.card--dark .card__tag { color: var(--brand-bright); }

.card__list { margin-top: 16px; display: grid; gap: 8px; }
.card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.875rem;
  color: var(--fg-muted);
  line-height: 1.55;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}
.card--dark .card__list li { color: var(--ink-300); }
.card--dark .card__list li::before { background: var(--brand-bright); }

/* 徽标 / 状态 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--brand-tint);
  color: var(--brand-deep);
  border: 1px solid var(--brand-tint-2);
}
.pill--muted { background: var(--paper-100); color: var(--ink-500); border-color: var(--border); }
.pill--dark { background: rgb(var(--brand-rgb) / 0.16); color: var(--brand-bright); border-color: rgb(var(--brand-rgb) / 0.3); }
.pill--green { background: rgb(var(--green-rgb) / 0.1); color: var(--green); border-color: rgb(var(--green-rgb) / 0.24); }
.pill--amber { background: rgb(var(--amber-rgb) / 0.1); color: var(--amber); border-color: rgb(var(--amber-rgb) / 0.26); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }

/* ---------- 9. 七环节流程条 ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  counter-reset: flow;
}
.flow__step {
  position: relative;
  padding: 20px 15px;
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.flow__step:hover { border-color: var(--brand); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.flow__idx {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--brand);
  display: block;
  margin-bottom: 12px;
}
.flow__name { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); }
.flow__en {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: 4px;
  display: block;
}
.flow__desc { font-size: 0.8125rem; color: var(--fg-muted); margin-top: 11px; line-height: 1.55; }
.flow__step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 14px;
  height: 1px;
  background: var(--border);
}
.flow__step:last-child::after { display: none; }

.section--ink .flow__step, .section--mesh .flow__step {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.11);
}
.section--ink .flow__step:hover, .section--mesh .flow__step:hover { border-color: var(--brand); }
.section--ink .flow__name, .section--mesh .flow__name { color: #fff; }
.section--ink .flow__step::after, .section--mesh .flow__step::after { background: rgba(255, 255, 255, 0.14); }

/* ---------- 10. 四层架构图 ---------- */
.arch { display: grid; gap: 12px; }

.arch__layer {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 22px;
  align-items: center;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  position: relative;
}
.arch__layer + .arch__layer::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 84px;
  width: 1px;
  height: 12px;
  background: linear-gradient(rgb(var(--brand-rgb) / 0.7), rgb(var(--brand-rgb) / 0.15));
}
.arch__label { display: flex; flex-direction: column; gap: 5px; }
.arch__label b { color: #fff; font-size: 0.9375rem; font-weight: 600; }
.arch__label span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.arch__nodes { display: flex; flex-wrap: wrap; gap: 8px; }

.node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: #fff;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.node:hover { background: rgb(var(--brand-rgb) / 0.2); border-color: rgb(var(--brand-rgb) / 0.55); transform: translateY(-1px); }
.node small { font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-400); letter-spacing: 0.06em; }

.arch__layer--user { border-color: rgb(var(--brand-rgb) / 0.42); background: rgb(var(--brand-rgb) / 0.09); }
.arch__layer--app { border-color: rgb(var(--sky-rgb) / 0.38); background: rgb(var(--sky-rgb) / 0.08); }
.arch__layer--agent { border-color: rgb(var(--brand-bright-rgb) / 0.42); background: rgb(var(--brand-rgb) / 0.07); }
.arch__layer--base { border-color: rgb(var(--teal-rgb) / 0.36); background: rgb(var(--teal-rgb) / 0.07); }

/* 智能体矩阵：九张卡，5 列排两行（第二行 4 张） */
.agents {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.agent {
  padding: 20px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  transition: border-color .18s ease, translate .18s ease, box-shadow .18s ease;
}
.agent:hover {
  border-color: rgb(var(--brand-rgb) / 0.6);
  translate: 0 -3px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}
.agent__no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--brand-bright);
  letter-spacing: 0.12em;
}
.agent__name { color: #fff; font-weight: 600; font-size: 1rem; margin-top: 10px; }
.agent__en {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 4px;
  display: block;
}
.agent__desc { font-size: 0.8125rem; color: var(--ink-300); margin-top: 10px; line-height: 1.55; }

/* ---------- 11. 对话 / 调度演示 ---------- */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: start;
}

.chat {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(var(--ink-850), #0a0f1d);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.chat__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}
.chat__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.chat__who {
  margin-left: 6px;
  font-size: 0.8125rem;
  color: var(--ink-300);
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat__body { padding: 20px 18px; display: grid; gap: 16px; min-height: 340px; }

.msg { display: flex; gap: 11px; max-width: 92%; }
.msg__avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgb(var(--brand-rgb) / 0.22);
  color: var(--brand-bright);
  border: 1px solid rgb(var(--brand-rgb) / 0.34);
}
.msg__bubble {
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.62;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-300);
}
.msg--me { margin-left: auto; flex-direction: row-reverse; }
.msg--me .msg__avatar { background: rgb(var(--sky-rgb) / 0.22); color: var(--sky-bright); border-color: rgb(var(--sky-rgb) / 0.4); }
.msg--me .msg__bubble { background: rgb(var(--brand-rgb) / 0.16); border-color: rgb(var(--brand-rgb) / 0.32); color: #fff; }
.msg__bubble strong { color: #fff; font-weight: 600; }
.msg__meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-top: 8px;
  display: block;
}

.chat__panel {
  margin-top: 4px;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px dashed rgb(var(--brand-rgb) / 0.42);
  background: rgb(var(--brand-rgb) / 0.08);
}
.chat__panel-title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 9px;
}
.chat__panel-rows { display: grid; gap: 7px; }
.chat__panel-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--ink-300);
}
.chat__panel-row b { color: #fff; font-weight: 600; }

/* 调度管线 */
.pipe { display: grid; gap: 10px; }
.pipe__row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color .18s ease, background-color .18s ease;
}
.pipe__row:hover, .pipe__row.is-active {
  border-color: rgb(var(--brand-rgb) / 0.55);
  background: rgb(var(--brand-rgb) / 0.1);
}
.pipe__no {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--brand-bright);
}
.pipe__name { color: #fff; font-size: 0.9375rem; font-weight: 500; }
.pipe__desc { font-size: 0.8125rem; color: var(--ink-400); margin-top: 3px; }
.pipe__state {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}
.pipe__state--wait { color: var(--ink-500); }

/* ---------- 12. 对比表 ---------- */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.compare__col {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--paper-100);
  overflow: hidden;
}
.compare__head {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg-strong);
  background: #fff;
}
.compare__head span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: 3px;
  font-weight: 400;
}
.compare__body { padding: 8px 20px 20px; display: grid; gap: 0; }
.compare__row { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.compare__row:last-child { border-bottom: 0; }
.compare__k { font-size: 0.75rem; color: var(--fg-subtle); margin-bottom: 6px; }
.compare__v { font-size: 0.9375rem; color: var(--fg-strong); font-weight: 500; line-height: 1.5; }
.compare__col--bad .compare__v { color: var(--fg-muted); font-weight: 400; }
.compare__col--good { border-color: var(--brand-tint-2); background: #fff; box-shadow: var(--shadow-card); }
.compare__col--good .compare__head { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-deep); }
.compare__col--good .compare__v { color: var(--brand-deep); }

/* ---------- 13. 选项卡 ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tab {
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.875rem;
  color: var(--fg-muted);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tab:hover { border-color: var(--ink-700); color: var(--fg-strong); }
.tab[aria-selected="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.tab[aria-selected="true"]:hover { color: #fff; }
.tab__n {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  margin-left: 6px;
  opacity: .6;
}
/* 面板收起由 [hidden] 属性负责，无 JS 时该属性不写入，三个面板平铺着也能读；
   这里的 .js 规则只负责「首屏到 site.js 执行之间」那一刻：先只留激活面板，避免三块内容同时闪一下 */
[data-tab-panel][hidden] { display: none; }
.js .tapp { display: none; }
.js .tapp:not([hidden]) { display: block; }
html:not(.js) .tabs { display: none; }

/* ---------- 14. 项目库 ---------- */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project { display: flex; flex-direction: column; }
.project__cat {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.project__name { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); line-height: 1.4; }
.project__goal { font-size: 0.875rem; color: var(--fg-muted); margin-top: 12px; line-height: 1.6; }
.project__meta {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project__meta .pill { font-size: 0.6875rem; padding: 3px 9px; }

/* ---------- 15. 师资 ---------- */
.faculty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.faculty__card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--paper-100);
}
.faculty__photo {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgb(var(--brand-rgb) / 0.14), rgb(var(--sky-rgb) / 0.12)),
    var(--paper-200);
  border-bottom: 1px solid var(--border);
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 12px;
}
.faculty__body { padding: 18px 18px 20px; }
.faculty__name { font-size: 1rem; font-weight: 600; color: var(--fg-strong); }
.faculty__role { font-size: 0.8125rem; color: var(--brand); margin-top: 4px; }
.faculty__desc { font-size: 0.8125rem; color: var(--fg-muted); margin-top: 10px; line-height: 1.55; }

.notice {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  background: var(--paper-100);
  font-size: 0.875rem;
  color: var(--fg-muted);
  line-height: 1.6;
}
.notice b { color: var(--fg-strong); font-weight: 600; }

/* ---------- 16. 分栏内容 ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
.split--top { align-items: start; }

.list-check { display: grid; gap: 14px; }
.list-check li {
  position: relative;
  padding-left: 30px;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--fg-muted);
}
.list-check li b { color: var(--fg-strong); font-weight: 600; }
.list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2);
}
.list-check li::after {
  content: "";
  position: absolute;
  left: 6px; top: 0.62em;
  width: 5px; height: 9px;
  border: solid var(--brand);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}
.section--ink .list-check li, .section--mesh .list-check li { color: var(--ink-300); }
.section--ink .list-check li b, .section--mesh .list-check li b { color: #fff; }
.section--ink .list-check li::before, .section--mesh .list-check li::before {
  background: rgb(var(--brand-rgb) / 0.2); border-color: rgb(var(--brand-rgb) / 0.4);
}
.section--ink .list-check li::after, .section--mesh .list-check li::after { border-color: var(--brand-bright); }

/* ---------- 17. 时间线 / 阶段 ---------- */
.timeline { display: grid; gap: 0; border-left: 1px solid var(--border); }
.timeline__item { position: relative; padding: 0 0 34px 28px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -5px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
}
.timeline__step {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--brand);
  text-transform: uppercase;
}
.timeline__title { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); margin-top: 7px; }
.timeline__desc { font-size: 0.9375rem; color: var(--fg-muted); margin-top: 8px; line-height: 1.62; }
.timeline__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---------- 18. 数据看板示意 ---------- */
.board {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-50);
}
.board__title { font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); }
.board__body { padding: 20px; display: grid; gap: 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { padding: 15px; border-radius: var(--radius); background: var(--paper-100); border: 1px solid var(--border-soft); }
.kpi__v { font-size: 1.5rem; font-weight: 600; color: var(--fg-strong); letter-spacing: -0.02em; }
.kpi__l { font-size: 0.75rem; color: var(--fg-muted); margin-top: 5px; }
.kpi__d { font-family: var(--font-mono); font-size: 0.625rem; margin-top: 6px; color: var(--green); }

.bars { display: grid; gap: 10px; }
.bar__top { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--fg-muted); margin-bottom: 6px; }
.bar__top b { color: var(--fg-strong); font-weight: 600; }
.bar__track { height: 7px; border-radius: 999px; background: var(--paper-200); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--sky)); }

/* ---------- 19. CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(40px, 5.5vw, 76px) clamp(28px, 5vw, 64px);
  background: linear-gradient(120deg, var(--brand-deep) 0%, #2a1a63 42%, #0d3b47 100%);
  color: #fff;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 70% 100% at 100% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 0%, #000, transparent 72%);
  opacity: .6;
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; max-width: 720px; }
.cta .lead { color: rgba(255, 255, 255, 0.78); max-width: 620px; margin-top: 18px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- 20. 表格 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
table.tbl th, table.tbl td { padding: 15px 18px; text-align: left; font-size: 0.9375rem; border-bottom: 1px solid var(--border-soft); }
table.tbl th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
  background: var(--paper-50);
  white-space: nowrap;
}
table.tbl td { color: var(--fg-muted); }
table.tbl td b { color: var(--fg-strong); font-weight: 600; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: var(--paper-50); }

/* ---------- 21. 表单 ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--fg-strong); }
.field label i { color: var(--rose); font-style: normal; margin-left: 3px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fg-strong);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field__hint { font-size: 0.75rem; color: var(--fg-subtle); }
.field__err { font-size: 0.75rem; color: var(--rose); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--rose); }
.field.has-error .field__err { display: block; }

.form__status {
  display: none;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.6;
}
.form__status.is-shown { display: flex; }
.form__status--ok { background: rgb(var(--green-rgb) / 0.08); border: 1px solid rgb(var(--green-rgb) / 0.26); color: #0a5c3a; }
.form__status a { color: inherit; text-decoration: underline; font-weight: 500; }

/* ---------- 22. 联系信息 ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-card { padding: 24px; }
.contact-card__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 12px;
}
.contact-card__v { font-size: 1.0625rem; font-weight: 500; color: var(--fg-strong); word-break: break-all; }
.contact-card__v a { color: var(--brand); }
.contact-card__n { font-size: 0.8125rem; color: var(--fg-muted); margin-top: 8px; line-height: 1.6; }

/* ---------- 23. Footer ---------- */
.footer {
  background: var(--ink-900);
  color: var(--ink-400);
  padding-block: clamp(52px, 6vw, 76px) 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.footer__brand { display: grid; gap: 16px; align-content: start; }
.footer__brand .brand__sub { font-size: 0.75rem; }   /* 页脚字标比导航里大一档，沿用原 .brand__name 的比例关系 */
.footer__about { font-size: 0.875rem; line-height: 1.65; color: var(--ink-400); max-width: 300px; }
.footer__col h5 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
  margin: 0 0 14px;
}
.footer__col a { display: block; padding: 6px 0; font-size: 0.875rem; color: var(--ink-300); transition: color .15s ease; }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.8125rem;
  color: var(--ink-500);
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer__legal a:hover { color: #fff; }

/* ---------- 24. 动效 ---------- */
/* 无 JS 时内容默认可见；.js 由 <head> 内联脚本添加 */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  /* translate / box-shadow / border-color 也在列表里：入场结束后悬停提升才有过渡，否则是瞬移 */
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1),
    translate .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* 只延迟入场（opacity / transform）——对应 .is-in 里前两个 transition；
   悬停用的 translate / box-shadow / border-color 延迟为 0，否则悬停反馈会晚 70–280ms */
.reveal[data-delay="1"].is-in { transition-delay: .07s, .07s, 0s, 0s, 0s; }
.reveal[data-delay="2"].is-in { transition-delay: .14s, .14s, 0s, 0s, 0s; }
.reveal[data-delay="3"].is-in { transition-delay: .21s, .21s, 0s, 0s, 0s; }
.reveal[data-delay="4"].is-in { transition-delay: .28s, .28s, 0s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 首页 hero 里的浮层卡片 */
.hero__aside {
  display: grid;
  gap: 12px;
}
.hero__panel {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgb(var(--ink-850-rgb) / 0.66);
  backdrop-filter: blur(8px);
}
.hero__panel-k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 9px;
}
.hero__panel-v { color: #fff; font-size: 0.9375rem; }
.hero__panel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.875rem; }
.hero__panel-row + .hero__panel-row { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.hero__panel-row span { color: var(--ink-400); }
.hero__panel-row b { color: #fff; font-weight: 500; }

.hero--split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero--split h1 { max-width: 15ch; }

/* ---------- 25. 图示组件 ---------- */
/* 小图标（圆形/圆角底 + 线性图标） */
.ic {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
}
.ic svg { width: 16px; height: 16px; }
.ic--brand { background: rgb(var(--brand-rgb) / 0.16); color: var(--brand-bright); }
.ic--sky { background: rgb(var(--sky-rgb) / 0.16); color: var(--sky-bright); }
.ic--teal { background: rgb(var(--teal-rgb) / 0.18); color: var(--teal-bright); }
.ic--bad { background: rgb(var(--rose-rgb) / 0.16); color: var(--rose-bright); }
.ic--lime { background: rgb(var(--lime-rgb) / 0.16); color: #a6e88f; }
.ic--amber { background: rgb(var(--ember-rgb) / 0.18); color: #f0a184; }
.ic--light { background: var(--brand-tint); color: var(--brand-deep); }

/* 流程节点图标（六环节） */
.flow__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--brand-tint);
  color: var(--brand-deep);
}
.flow__icon svg { width: 19px; height: 19px; }
.section--ink .flow__icon, .section--mesh .flow__icon {
  background: rgb(var(--brand-rgb) / 0.2);
  color: var(--brand-bright);
}

/* 迷你图示容器（卡片内的小图） */
.mini {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
}
.mini svg { display: block; width: 100%; height: auto; }
.mini__cap {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 10px;
}
.card--dark .mini, .section--ink .mini, .section--mesh .mini {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.13);
}
.card--dark .mini__cap, .section--ink .mini__cap, .section--mesh .mini__cap { color: var(--ink-400); }

/* 三/四步小路径 */
.steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.steps__n {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--paper-50);
  font-size: 0.75rem;
  color: var(--fg-strong);
  text-align: center;
}
.steps__a { color: var(--brand); font-size: 0.75rem; flex-shrink: 0; }
.card--dark .steps__n, .section--ink .steps__n, .section--mesh .steps__n {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.card--dark .steps__a, .section--ink .steps__a, .section--mesh .steps__a { color: var(--brand-bright); }

/* 文档 → 文档（简历精修） */
.docs { display: flex; align-items: center; gap: 10px; }
.doc {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--paper-50);
  padding: 9px 10px;
}
.doc__t { font-size: 0.6875rem; color: var(--fg-subtle); margin-bottom: 6px; }
.doc__l { height: 5px; border-radius: 999px; background: var(--paper-200); margin-bottom: 5px; }
.doc__l:last-child { margin-bottom: 0; width: 62%; }
.doc--after { border-color: var(--brand-tint-2); background: var(--brand-tint); }
.doc--after .doc__l { background: rgb(var(--brand-rgb) / 0.34); }
.card--dark .doc, .section--ink .doc, .section--mesh .doc {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.card--dark .doc__l, .section--ink .doc__l, .section--mesh .doc__l { background: rgba(255, 255, 255, 0.2); }
.card--dark .doc--after, .section--ink .doc--after, .section--mesh .doc--after {
  background: rgb(var(--brand-rgb) / 0.2);
  border-color: rgb(var(--brand-rgb) / 0.42);
}

/* 横向条形（匹配度等） */
.mbars { display: grid; gap: 10px; }
.mbar__t { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--fg-muted); margin-bottom: 5px; }
.mbar__t b { color: var(--fg-strong); font-weight: 600; }
.mbar__k { height: 6px; border-radius: 999px; background: var(--paper-200); overflow: hidden; }
.mbar__f { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--sky)); }
.section--ink .mbar__t, .section--mesh .mbar__t, .card--dark .mbar__t { color: var(--ink-300); }
.section--ink .mbar__t b, .section--mesh .mbar__t b, .card--dark .mbar__t b { color: #fff; }
.section--ink .mbar__k, .section--mesh .mbar__k, .card--dark .mbar__k { background: rgba(255, 255, 255, 0.14); }

/* 痛点 → 解法 对照图 */
.vs {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  gap: 0;
  align-items: start;
}
.vs__col { display: grid; gap: 10px; }
.vs__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.vs__head span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 3px;
  font-weight: 400;
}
.vs__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.vs__row--bad { border-color: rgb(var(--rose-rgb) / 0.3); background: rgb(var(--rose-rgb) / 0.06); }
.vs__row--good { border-color: rgb(var(--teal-rgb) / 0.32); background: rgb(var(--teal-rgb) / 0.07); }
.vs__k { font-size: 0.9375rem; color: #fff; font-weight: 500; }
.vs__d { font-size: 0.8125rem; color: var(--ink-300); margin-top: 3px; line-height: 1.55; }
.vs__mid {
  display: grid;
  place-items: center;
  align-self: stretch;
  color: var(--brand-bright);
}
.vs__mid svg { width: 34px; height: 34px; }
.vs__mid::before,
.vs__mid::after {
  content: "";
  width: 1px;
  flex: 1;
  background: linear-gradient(rgb(var(--brand-rgb) / 0), rgb(var(--brand-rgb) / 0.45), rgb(var(--brand-rgb) / 0));
}

/* 对比矩阵：✓ / ✗ 图式 */
.matrix {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.matrix__row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  border-bottom: 1px solid var(--border-soft);
}
.matrix__row:last-child { border-bottom: 0; }
.matrix__c {
  padding: 16px 18px;
  font-size: 0.9375rem;
  color: var(--fg-muted);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  flex-wrap: wrap;
  border-left: 1px solid var(--border-soft);
}
.matrix__c:first-child { border-left: 0; }
.matrix__c b { color: var(--fg-strong); font-weight: 600; }
.matrix__c--k { color: var(--fg-strong); font-weight: 600; background: var(--paper-50); }
.matrix__lg { display: none; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 5px; }
.matrix__c--good { background: var(--brand-tint); }
.matrix__c--good b { color: var(--brand-deep); }

/* 矩阵里的对错标记：浅底上换成更实的颜色 */
.matrix .ic { width: 22px; height: 22px; border-radius: 7px; margin-top: 1px; }
.matrix .ic svg { width: 13px; height: 13px; }
.matrix .ic--bad { background: rgb(var(--rose-rgb) / 0.12); color: var(--rose); }
.matrix .ic--good { background: rgb(var(--green-rgb) / 0.12); color: var(--green); }
.matrix__row--head .matrix__c {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--paper-50);
  padding-block: 12px;
  align-items: center;
}
.matrix__row--head .matrix__c--good { background: var(--brand-tint); color: var(--brand-deep); }

/* 分层架构：紧凑版（首页引用画册的关键图示） */
.arch--compact .arch__layer { padding: 15px 18px; grid-template-columns: 150px 1fr; gap: 16px; }
.arch--compact .node { padding: 6px 11px; font-size: 0.8125rem; }

/* 调度链路小条 */
.chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chain__n {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.8125rem;
  color: #fff;
}
.chain__a { color: var(--brand-bright); }

/* 图例 */
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-400); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- 26. 响应式 ---------- */
@media (max-width: 1200px) {
  /* 中窄屏不再让文字压在画面上：文案落底色，画面整幅（原比例，不裁）接在下面 */
  .hero--image { display: flex; flex-direction: column; min-height: 0; }
  .hero--image > .container { order: 1; padding-block: calc(var(--nav-h) + 36px) 32px; }
  .hero__body { max-width: none; }
  .hero__media { order: 2; position: relative; inset: auto; }
  .hero__media img { width: 100%; height: auto; }
}

/* 超宽屏：画面被放大、留白那一列反而变窄，标题跟着收一号，别在窄列里挤成细长三行 */
@media (min-width: 1800px) {
  .hero--image .display { font-size: clamp(2.4rem, 2.6vw, 3.2rem); }
}

@media (max-width: 1080px) {
  /* 七环节折成 4+3：每行末张不画箭头 */
  .flow { grid-template-columns: repeat(4, 1fr); }
  .flow__step:nth-child(4n)::after { display: none; }
  .agents { grid-template-columns: repeat(3, 1fr); }
  .faculty { grid-template-columns: repeat(2, 1fr); }
  .projects { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .hero--split { grid-template-columns: 1fr; }
  .hero--split h1 { max-width: none; }
  .demo { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* 七环节再折成 3+3+1：3 列时要把上一段隐藏掉的那张箭头还原 */
  .flow { grid-template-columns: repeat(3, 1fr); }
  .flow__step:nth-child(3n)::after { display: none; }
  .flow__step:nth-child(4n):not(:last-child)::after { display: block; }
  .agents { grid-template-columns: repeat(2, 1fr); }
  .nav__menu, .nav__right .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left { grid-template-columns: 1fr; gap: 32px; }
  .arch__layer { grid-template-columns: 1fr; gap: 14px; }
  .arch__layer + .arch__layer::before { display: none; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .table-wrap { border-radius: var(--radius); }

  /* 对照图与矩阵改为纵向 */
  .vs { grid-template-columns: 1fr; gap: 20px; }
  .vs__mid { display: none; }
  .matrix__row { grid-template-columns: 1fr; }
  .matrix__row--head { display: none; }
  .matrix__c { border-left: 0; padding: 12px 16px; row-gap: 0; }
  .matrix__c--k { padding-bottom: 6px; }
  .matrix__lg { display: block; flex: 0 0 100%; }
}

@media (max-width: 620px) {
  :root { --nav-h: 60px; }
  .display { font-size: clamp(2.125rem, 10vw, 3rem); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow__step::after { display: none; }
  /* 两列时整行都不画箭头：≤860 那段为三列布局恢复过第 4 张的箭头，
     那条选择器权重更高，这里要用同样写法覆盖回来 */
  .flow__step:nth-child(4n):not(:last-child)::after { display: none; }
  .agents, .faculty, .projects { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* 窄屏首屏：收紧文字块间距，让主视觉在首屏就能露出 */
  .hero--image > .container { padding-block: calc(var(--nav-h) + 22px) 24px; }
  .hero--image h1 { max-width: none; }
  .hero--image .lead { font-size: 0.9375rem; margin-top: 16px; }
  .hero--image .hero__actions { margin-top: 22px; gap: 10px; }
  .stat { padding: 20px 18px; }
  .stat__value { font-size: 1.375rem; }
  .vs__row { padding: 12px 13px; }
  .mini { padding: 12px; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .brand__sub { display: none; }
}

@media print {
  .nav, .footer, .cta { display: none; }
}

/* ==== 方案 A · 语义重排 ==== */
.btn--primary { background: var(--brand-btn); }
.matrix__c--good, .compare__col--good { background: rgb(var(--green-rgb) / .08); border-color: rgb(var(--green-rgb) / .28); color: var(--green); }
.matrix__c--good b, .matrix__row--head .matrix__c--good, .compare__col--good .compare__head, .compare__col--good .compare__v { color: var(--green); }
.matrix .ic--bad, .ic--bad { background: rgb(var(--bad-rgb) / .16); color: var(--bad); }
.vs__row--bad { border-color: rgb(var(--bad-rgb) / .3); background: rgb(var(--bad-rgb) / .07); }
.vs__row--good { border-color: rgb(var(--teal-rgb) / .32); background: rgb(var(--teal-rgb) / .07); }
.arch__layer--user { border-color: rgb(var(--brand-rgb) / .42); background: rgb(var(--brand-rgb) / .09); }
.arch__layer--app { border-color: rgb(var(--sky-rgb) / .38); background: rgb(var(--sky-rgb) / .08); }
.arch__layer--agent { border-color: rgb(var(--indigo-rgb) / .42); background: rgb(var(--indigo-rgb) / .07); }
.arch__layer--base { border-color: rgb(var(--teal-rgb) / .36); background: rgb(var(--teal-rgb) / .07); }
.ic--sky { background: rgb(var(--sky-rgb) / .16); color: var(--sky-bright); }
.ic--teal { background: rgb(var(--teal-rgb) / .18); color: var(--teal-bright); }
.ic--brand { background: rgb(var(--brand-rgb) / .16); color: var(--brand-bright); }

/* ==== 实现校正（与配色方案无关，属原站既有缺陷）==== */
:root { --green-ink: #16713D; --amber-ink: #8A5A00; --teal-ink: #0F7A6B; }

/* 1) 浅底红字：主色直接当正文只有 4.0:1（AA 要 4.5）→ 浅底统一走深一档 */
.eyebrow, .tlink, .card__tag, .project__cat, .stat__value small, .flow__idx,
.timeline__step, .contact-card__v a, .steps__a { color: var(--brand-ink); }

/* 2) 深色带 / 深色卡上的同名元素保持亮档 */
.section--ink .eyebrow, .section--mesh .eyebrow, .hero:not(.hero--image) .eyebrow,
.section--ink .tlink, .section--mesh .tlink, .hero .tlink,
.section--ink .steps__a, .section--mesh .steps__a, .card--dark .steps__a,
.section--ink .card__tag, .section--mesh .card__tag, .card--dark .card__tag,
.section--ink .project__cat, .section--mesh .project__cat { color: var(--brand-bright); }
.faculty__role { color: var(--brand-bright); }

/* 3) 浅底绿字过亮（3.5–4.2:1）→ 文字走深一档；图标 / 色块仍用亮绿 */
.kpi__d, .pill--green, .matrix__c--good, .matrix__c--good b,
.matrix__row--head .matrix__c--good,
.compare__col--good .compare__head, .compare__col--good .compare__v { color: var(--green-ink); }
.matrix__row--head .matrix__c--good { background: rgb(var(--green-rgb) / .12); border-color: rgb(var(--green-rgb) / .28); }

/* 4) 红→青是互补插值、中段必过灰：进度条改同族暖渐变 */
.bar__fill, .mbar__f { background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
/* 首屏标题不再做渐变字：用 background 简写会连带把原规则的 background-clip:text 重置为
   border-box，整块渐变就会盖在文字上（字被色块遮住）；统一改为纯白实心字 */
.grad-text { background-image: none; -webkit-text-fill-color: #fff; color: #fff; }

/* 5) .pill--dark 实际落在浅底（首页 Match 徽标），深色配方在浅底只有 1.8:1 */
.pill--dark { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--brand-tint-2); }
.section--ink .pill--dark, .section--mesh .pill--dark, .card--dark .pill--dark {
  background: rgb(var(--brand-rgb) / .16); color: var(--brand-bright); border-color: rgb(var(--brand-rgb) / .3); }

/* 6) 另两处浅底强调色文字同样过亮：琥珀 2.4:1、青绿 2.6–3.1:1 */
.pill--amber { color: var(--amber-ink); }
.pipe__state { color: var(--teal-ink); }
.section--ink .pipe__state, .section--mesh .pipe__state, .card--dark .pipe__state { color: var(--teal); }

/* ==== 需求 3：首页菜单文字纯白（导航压在整幅主视觉上；滚动后的实底状态同样是深底）==== */
.nav--overlay .nav__link { color: #fff; }
.nav--overlay .nav__link:hover { background: rgba(255, 255, 255, 0.1); }

/* ==== 需求 4：去掉多色混色渐变，统一同族暖色 ==== */
/* 子页首屏辉光：品牌红 + 陶土橙 + 深红（原 紫 + 青 + 青绿） */
.hero::after {
  background:
    radial-gradient(760px 420px at 14% 4%, rgb(var(--brand-rgb) / .42), transparent 64%),
    radial-gradient(680px 400px at 88% 16%, rgb(var(--ember-rgb) / .26), transparent 62%),
    radial-gradient(520px 320px at 62% 96%, rgb(var(--brand-deep-rgb) / .30), transparent 66%);
}
/* 深色网格带：同族暖色双辉光（原 紫 + 青） */
.section--mesh {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgb(var(--brand-rgb) / .30), transparent 62%),
    radial-gradient(900px 460px at 92% 8%, rgb(var(--ember-rgb) / .20), transparent 60%),
    var(--ink-900);
}
/* CTA 大面板：深红 → 暖褐 → 近黑（原 紫 → 蓝紫 → 青黑）；白字全程 ≥ 7:1 */
.cta { background: linear-gradient(120deg, var(--brand-deep) 0%, #5A1C0F 52%, #2A0D07 100%); }
/* 卡片顶部高光线、导师照片占位：红 → 陶土橙（原 红 → 青） */
a.card::before { background: linear-gradient(90deg, var(--brand), var(--ember)); }
.faculty__photo { background: linear-gradient(135deg, rgb(var(--brand-rgb) / .16), rgb(var(--ember-rgb) / .12)), var(--paper-200); }

/* ==== 实现校正（续）：弱化文字达 AA + 「AI 处理链路」浅底配方 ==== */
/* 7a) 说明文字 / 表头 / 时间戳等弱化文字：浅底 2.3–2.9:1（AA 要 4.5）→ 降一档灰，
       在白 / paper-50 / paper-100 / paper-200 上都 ≥ 4.5:1 */
:root { --fg-subtle: #5C6780; }
/* 7b) 深底区段误用了为浅底设计的灰（--ink-500 在深底只有 2.7–3.3:1）→ 改深底灰（6.6–6.9:1） */
.footer__col h5, .footer__bottom, .msg__meta, .hero__panel-k { color: var(--ink-400); }
/* 7c) 同一批弱化文字出现在深色带 / 深色卡上时，仍用亮档（原 6.6:1） */
.card--dark .mini__cap, .section--ink .mini__cap, .section--mesh .mini__cap,
.card--dark .faculty__photo, .section--ink .faculty__photo, .section--mesh .faculty__photo,
.card--dark .body-xs, .section--ink .body-xs, .section--mesh .body-xs,
.card--dark .compare__k, .section--ink .compare__k, .card--dark .matrix__lg { color: var(--ink-400); }
/* 7d) 图例说明 / 输入框占位文字：同样落在浅底，改用浅底灰（6.1 / 5.7:1） */
.legend span { color: var(--fg-muted); }
.section--ink .legend span, .section--mesh .legend span, .card--dark .legend span { color: var(--ink-400); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-subtle); }

/* 8) 「AI 处理链路」默认按浅底画（解决方案页把它放在 section--paper 上，原深底配方导致
      白字白底、整段不可见），深底区段再切回深底配方 */
.pipe__row { border-color: var(--border); background: var(--paper-50); }
.pipe__row:hover, .pipe__row.is-active { border-color: rgb(var(--brand-rgb) / .5); background: rgb(var(--brand-rgb) / .08); }
.pipe__no { background: rgb(var(--brand-rgb) / .10); border-color: rgb(var(--brand-rgb) / .28); color: var(--brand-ink); }
.pipe__name { color: var(--fg-strong); }
.pipe__desc { color: var(--fg-muted); }
.section--ink .pipe__row, .section--mesh .pipe__row { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.035); }
.section--ink .pipe__row:hover, .section--ink .pipe__row.is-active,
.section--mesh .pipe__row:hover, .section--mesh .pipe__row.is-active { border-color: rgb(var(--brand-rgb) / .55); background: rgb(var(--brand-rgb) / .1); }
.section--ink .pipe__no, .section--mesh .pipe__no { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: var(--brand-bright); }
.section--ink .pipe__name, .section--mesh .pipe__name { color: #fff; }
.section--ink .pipe__desc, .section--mesh .pipe__desc { color: var(--ink-400); }

/* ==== 解决方案页（业务价值版）：两列对照 · 四步闭环 · 架构层业务说明 ==== */
.compare--2 { grid-template-columns: repeat(2, 1fr); }
.flow--4 { grid-template-columns: repeat(4, 1fr); }
.arch__biz { grid-column: 1 / -1; margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-300); }
.arch__biz b { color: #fff; font-weight: 600; }
@media (max-width: 1080px) {
  .compare--2 { grid-template-columns: 1fr; }
  .flow--4 { grid-template-columns: repeat(2, 1fr); }
  .flow--4 .flow__step:nth-child(2n)::after { display: none; }
}
@media (max-width: 620px) {
  .flow--4 { grid-template-columns: 1fr; }
}

/* ---------- 27. 产品优势 · 三块包装界面图 ---------- */
/* 三块界面复用第 28 节的组件（.mock / .mcard / .mkpis …），不再放真实截图：
   用官网配色把版式画出来，深色底上靠白色底衬托住，看起来仍是站内的一块界面。
   行距与上下留白都比正文区段紧一档——这一节要的是「一眼看到」，不是占满一屏。 */
.shots { display: grid; gap: clamp(28px, 3.4vw, 46px); }

.shots__row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(26px, 3.6vw, 52px);
  align-items: center;
}
.shots__row--flip { grid-template-columns: 0.85fr 1.15fr; }
.shots__row--flip .mock { order: 2; }
.shots__row--flip .shots__copy { order: 1; }

/* 深色底上的白色底衬：边框提亮、阴影加重，界面才不像一张贴上去的图 */
.section--ink .mock, .section--mesh .mock {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.38);
}

.shots__copy .h3 { margin-bottom: 12px; }
.shots__copy .lead { font-size: 0.9375rem; line-height: 1.68; }
.shots__copy .list-check { margin-top: 20px; }

.shots__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
  margin-top: clamp(22px, 2.6vw, 34px);
}

@media (max-width: 860px) {
  .shots__row, .shots__row--flip { grid-template-columns: 1fr; gap: 20px; }
  .shots__row--flip .mock, .shots__row--flip .shots__copy { order: initial; }
}

/* ---------- 28. 界面仿真（Mock：「平台界面速览」的两块屏幕） ---------- */
/* 版式照抄产品里的那两块界面（岗位看板 / 通用简历精修），配色全部换成官网的暖色令牌，
   所以在浅底区段里看起来仍像站内的一块界面，而不是一张拼贴的外来截图 */
/* 屏与文案并排成左右结构（第一屏左图右字，第二屏在 HTML 里把文案放在前面 → 左字右图）。
   屏只占 60% 宽，文案落在旁边的空档里，两屏叠起来的总高度比「文案在上、屏在下」少一截。 */
.mocks { display: grid; gap: clamp(26px, 3.4vw, 48px); }
.mockrow {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(26px, 3.6vw, 54px);
  align-items: center;
}
.mockrow--flip { grid-template-columns: 1fr 1.5fr; }
.mock__intro { max-width: 62ch; }
.mockrow .mock__intro { max-width: none; }
.mock__intro .h3 { margin: 12px 0 10px; }
.mock__intro .lead { font-size: 0.9375rem; }
.mock {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.mock__chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 15px;
  background: var(--paper-50);
  border-bottom: 1px solid var(--border-soft);
}
.mock__dots { display: inline-flex; gap: 6px; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-300); }
.mock__url { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--fg-muted); }
.mock__badge { margin-left: auto; }
.mock__body { padding: clamp(13px, 1.5vw, 18px); display: grid; gap: 10px; }
.mock__head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.mock__title { font-size: 1rem; font-weight: 600; color: var(--fg-strong); }
.mock__sub { font-size: 0.8125rem; color: var(--fg-muted); }
.mock__foot { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--fg-muted); }

/* 指标小卡：四格一行 */
.mkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.mkpi { padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--paper-50); }
.mkpi__v { font-size: 1.25rem; font-weight: 600; color: var(--fg-strong); letter-spacing: -0.01em; }
.mkpi__v small { font-size: 0.6875rem; font-weight: 500; color: var(--fg-muted); margin-left: 3px; }
.mkpi__l { font-size: 0.75rem; color: var(--fg-muted); margin-top: 3px; }

/* 面板网格 */
.mkcols { display: grid; gap: 10px; }
.mkcols--wide { grid-template-columns: 1.24fr 1fr; }
.mkcols--3 { grid-template-columns: repeat(3, 1fr); }
.mkcols--2 { grid-template-columns: 1fr 1fr; }
.mcard { padding: 12px 13px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: #fff; }
.mcard--fill { background: var(--paper-50); }
.mcard__h {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: 9px;
}

/* 排行 / 榜单表 */
.mtable { display: grid; gap: 8px; }
.mtable__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--fg-strong); }
.mtable__n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mtable__i { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.625rem; color: var(--brand-ink); background: var(--brand-tint); border-radius: 4px; padding: 1px 5px; }
.mtable__c { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-muted); text-align: right; white-space: nowrap; }
.mtable__c b { color: var(--fg-strong); font-weight: 600; }
.mtable__head { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }

/* 环形图 + 图例 */
.donut { display: flex; align-items: center; gap: 14px; }
.donut__ring { width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.donut__in {
  width: 66%; height: 66%; border-radius: 50%; background: #fff;
  display: grid; place-items: center; text-align: center;
  font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); line-height: 1.1;
}
.donut__in small { display: block; font-size: 0.5625rem; font-weight: 500; color: var(--fg-muted); margin-top: 2px; }
.mlegend { display: grid; gap: 7px; font-size: 0.75rem; color: var(--fg-muted); }
.mlegend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 7px; }
.mlegend b { color: var(--fg-strong); font-weight: 600; font-family: var(--font-mono); font-size: 0.6875rem; }

/* 诊断维度：标签 + 条 + 分 */
.mdims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.mdim { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--fg-muted); }
.mdim__track { height: 6px; border-radius: 999px; background: var(--paper-200); overflow: hidden; }
.mdim__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
.mdim__v { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-strong); }

/* 分数环 */
.score { display: flex; align-items: center; gap: 18px; }
.score .donut__ring { width: 106px; height: 106px; }
.score__note { font-size: 0.75rem; color: var(--fg-muted); line-height: 1.6; }

/* 标签（问题 / 关键词 / ATS 检查） */
.mtags { display: flex; flex-wrap: wrap; gap: 7px; }
.mtag {
  font-size: 0.75rem; line-height: 1.5; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--paper-50); color: var(--fg-muted);
}
.mtag--warn { color: var(--amber-ink); border-color: rgb(var(--amber-rgb) / .3); background: rgb(var(--amber-rgb) / .08); }
.mtag--bad { color: var(--brand-ink); border-color: var(--brand-tint-2); background: var(--brand-tint); }
.mtag--ok { color: var(--green-ink); border-color: rgb(var(--green-rgb) / .28); background: rgb(var(--green-rgb) / .08); }

/* 原文 → 修改后 */
.diff { display: grid; gap: 8px; }
.diff__row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-size: 0.8125rem; line-height: 1.6; }
.diff__k { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; padding-top: 3px; }
.diff__row--before .diff__k { color: var(--fg-muted); }
.diff__row--after .diff__k { color: var(--brand-ink); }
.diff__text { padding: 9px 12px; border-radius: var(--radius); }
.diff__row--before .diff__text { background: var(--paper-50); border: 1px solid var(--border-soft); color: var(--fg-muted); text-decoration: line-through; text-decoration-color: rgb(var(--brand-rgb) / .35); }
.diff__row--after .diff__text { background: var(--brand-tint); border: 1px solid var(--brand-tint-2); color: var(--fg-strong); }

/* 对话气泡 */
.bubbles { display: grid; gap: 9px; }
.bubble { font-size: 0.8125rem; line-height: 1.6; padding: 9px 12px; border-radius: var(--radius-lg); max-width: 92%; }
.bubble--user { justify-self: end; background: var(--brand-tint); border: 1px solid var(--brand-tint-2); color: var(--brand-ink); }
.bubble--ai { justify-self: start; background: var(--paper-50); border: 1px solid var(--border-soft); color: var(--fg-muted); }
.bubble b { color: var(--fg-strong); font-weight: 600; }

@media (max-width: 1080px) {
  /* 屏回到整幅：文案在上、屏在下，两块屏都按同一个顺序读 */
  .mockrow, .mockrow--flip { grid-template-columns: 1fr; gap: 20px; }
  .mockrow .mock__intro { order: -1; max-width: 62ch; }
}
@media (max-width: 860px) {
  .mkpis { grid-template-columns: repeat(2, 1fr); }
  .mkcols--3, .mkcols--2, .mkcols--wide { grid-template-columns: 1fr; }
  .mdims { grid-template-columns: 1fr; }
  .donut { gap: 14px; }
}
@media (max-width: 620px) {
  .mtable__row { grid-template-columns: 1fr auto; }
  .mtable__c--m { display: none; }   /* 窄屏只留“招聘信息数”，公司数收起 */
  .mock__intro .h3 { margin-top: 8px; }
}

/* ---------- 29. 项目方向清单（服务页：只到 Title / 简介 / 价值） ---------- */
/* 两列杂志式排版：方向卡的条目数本来就不一样（1–4 个），高度差很大，
   行网格会让短卡下方空出一大块，所以按列紧凑堆叠，每张卡各按自己的高度排。 */
.dirs { columns: 2; column-gap: 22px; }
.dirs .dir { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 22px; }
.dirs .dir:last-child { margin-bottom: 0; }
.dir {
  position: relative;
  overflow: hidden;
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.dir--wide {
  /* 数据方向卡（3 个项目）独立在两列之外横向占满：示意图左栏 + 项目清单右两列 */
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; column-gap: 30px;
  margin-top: 22px;
}
.dir--wide .dir__head { grid-column: 1 / -1; }
.dir--wide .dir__art { grid-column: 1; }
.dir--wide .dir__list { grid-column: 2; margin-top: 0; grid-template-columns: repeat(2, 1fr); }
.dir__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dir__n {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  color: var(--brand-ink); background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2); border-radius: 4px; padding: 2px 6px;
}
.dir__title { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); }
.dir__count { margin-left: auto; font-size: 0.8125rem; color: var(--fg-muted); }
.dir__list { display: grid; gap: 18px; margin-top: 20px; }
.dir__item + .dir__item { border-top: 1px solid var(--border-soft); padding-top: 18px; }
.dir__name { font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); line-height: 1.45; }
.dir__desc { margin-top: 8px; font-size: 0.875rem; line-height: 1.62; color: var(--fg-muted); }
.dir__val { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font-size: 0.875rem; line-height: 1.6; color: var(--fg-strong); }
.dir__val span {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-ink);
  background: var(--brand-tint); border: 1px solid var(--brand-tint-2); border-radius: 4px; padding: 2px 6px;
}

/* 方向强调色：只用在图标、示意图和悬停描边上。
   小字（序号、价值标签）仍走品牌色，保证浅底上的对比度。 */
.dir--product { --da: var(--brand); --dar: var(--brand-rgb); }
.dir--dev     { --da: var(--sky);   --dar: var(--sky-rgb); }
.dir--algo    { --da: var(--amber); --dar: var(--amber-rgb); }
.dir--sec     { --da: var(--green); --dar: var(--green-rgb); }
.dir--data    { --da: var(--teal);  --dar: var(--teal-rgb); }

.dir { transition: translate .22s ease, box-shadow .22s ease, border-color .22s ease; }
/* 右上角柔光，卡片不再是纯白一块 */
.dir::before {
  content: ""; position: absolute; top: -78px; right: -78px; width: 210px; height: 210px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(var(--dar) / .16), transparent 68%);
}
.dir > * { position: relative; }
/* 用 translate 而非 transform：入场动画的 .is-in 已经占用了 transform */
.dirs .dir:hover { translate: 0 -3px; border-color: rgb(var(--dar) / .42); box-shadow: var(--shadow-lift); }

.dir .ic { width: 30px; height: 30px; border-radius: 9px; background: rgb(var(--dar) / .14); color: var(--da); }
.dir__art { margin-top: 18px; background: linear-gradient(180deg, rgb(var(--dar) / .07), #fff 74%); border-color: rgb(var(--dar) / .2); }

/* ---------- 30. 案例滚动墙 ---------- */
/* 两行反向匀速滚动，鼠标悬停 / 键盘聚焦时暂停；照片为作品截图（assets/img/cases，8 张 640×400） */
.wall { display: grid; gap: 20px; }
.wall__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
/* 每行三份拷贝：一次循环平移一份的宽度，3180px 以内的屏宽都不会露空隙 */
.wall__track { display: flex; width: max-content; animation: wall-x 96s linear infinite; }
.wall__track--rev { animation-direction: reverse; animation-duration: 112s; }
.wall__set { display: flex; gap: 18px; padding-right: 18px; }
@keyframes wall-x { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
.wall__viewport:hover .wall__track,
.wall__viewport:focus-within .wall__track { animation-play-state: paused; }

.case { flex: 0 0 auto; width: clamp(228px, 24vw, 300px); margin: 0; }
.case__shot {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--paper-100);
}
.case__shot img { width: 100%; height: 100%; object-fit: cover; }
.case__shot::after {
  content: ""; position: absolute; inset: 52% 0 0; pointer-events: none;
  background: linear-gradient(transparent, rgb(var(--ink-850-rgb) / .6));
}
.case__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  font-size: 0.6875rem; line-height: 1.5; padding: 2px 9px; border-radius: 999px;
  color: #fff; background: rgb(var(--ink-850-rgb) / .55);
  border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px);
}
.case__cap { margin-top: 12px; }
.case__cap b { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); }
.case__cap span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--fg-muted); }
.section--ink .case__shot, .section--mesh .case__shot { border-color: rgba(255, 255, 255, .12); background: var(--ink-800); }
.section--ink .case__cap b, .section--mesh .case__cap b { color: #fff; }
.section--ink .case__cap span, .section--mesh .case__cap span { color: var(--ink-400); }

/* 30.1 感谢墙：骨架和那三份拷贝都是上面那一套（.wall / .wall__track / .wall__set），
   换的只有卡片。登的是学员发来的原始聊天截图（assets/img/thanks/thanks-01..09.webp，
   420×560 = 2 倍图，正好 3:4），卡下一行只写方向：算法学员 / 产品学员 / 市场学员 /
   运营学员 / 商业分析学员 / Agent 开发学员，不再出现「实习」。
   案例墙一张 300px 宽、一排站三张半；这里一张 210px，一排站到近五张，靠的是窄卡：
   素材是竖版截图，卡片再窄正文就小过 13px（这九张的原文字号 26–94px/行，按 210/456
   缩下来是 13.5–18px，再缩就开始糊），所以 210px 是下限而不是随手取的数。 */
.thanks { flex: 0 0 auto; width: 210px; margin: 0; }
.thanks__shot {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--paper-100);
}
.thanks__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thanks__meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.thanks__tag {
  font-size: 0.6875rem; line-height: 1.6; padding: 1px 8px; border-radius: 999px;
  color: var(--brand-ink); background: rgb(var(--brand-rgb) / .1);
  border: 1px solid rgb(var(--brand-rgb) / .22);
}
.thanks__who { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--fg-muted); }
/* 卡片窄、一份拷贝长（9 张 ≈ 2052px），96s 抻到 140s，视觉速度才和案例墙一致 */
.wall--thanks .wall__track { animation-duration: 140s; }

/* ---------- 31. 私域对接（.cta 内的资料领取 / 顾问跟进） ---------- */
.follow { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 4vw, 54px); align-items: center; }
.follow__steps { display: grid; gap: 14px; margin-top: 26px; }
.follow__step { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.follow__n {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
}
.follow__step b { display: block; font-size: 0.9375rem; color: #fff; }
.follow__step span { font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.qr {
  padding: 22px; text-align: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lift);
}
.qr__box {
  width: 100%; max-width: 208px; aspect-ratio: 1; margin: 0 auto;
  display: grid; place-items: center; padding: 16px;
  border: 1px dashed var(--paper-300); border-radius: var(--radius-lg);
  background: var(--paper-50); color: var(--fg-subtle);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.9;
}
.qr__title { margin-top: 18px; font-size: 1rem; font-weight: 600; color: var(--fg-strong); }
.qr__note { margin-top: 8px; font-size: 0.8125rem; line-height: 1.6; color: var(--fg-muted); }
.qr__alt {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  display: grid; gap: 6px; font-size: 0.8125rem; color: var(--fg-muted);
}
.qr__alt a { color: var(--brand-ink); }

@media (max-width: 1080px) {
  .dir--wide { grid-template-columns: 1fr; row-gap: 20px; }
  .dir--wide .dir__art,
  .dir--wide .dir__list { grid-column: 1; }
  .dir--wide .dir__list { grid-template-columns: 1fr; }
  .follow { grid-template-columns: 1fr; gap: 30px; }
  .qr { max-width: 380px; }
}
@media (max-width: 860px) {
  .dirs { columns: 1; }
  .case { width: clamp(196px, 52vw, 260px); }
  .thanks { width: clamp(184px, 44vw, 196px); }
}
@media (max-width: 620px) {
  .dir { padding: 20px 20px 22px; }
  .case { width: 68vw; }
  .thanks { width: 56vw; }
  .wall__track { animation-duration: 62s; }
  .wall__track--rev { animation-duration: 72s; }
  .wall--thanks .wall__track { animation-duration: 90s; }
}

/* 动效降级：滚动墙停下并换行铺开，重复的两组收起 */
@media (prefers-reduced-motion: reduce) {
  .wall__viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .wall__track { animation-name: none; width: auto; }
  .wall__set { flex-wrap: wrap; padding-right: 0; }
  .wall__dup { display: none; }
  .case { width: clamp(228px, 24vw, 300px); }
  .thanks { width: clamp(196px, 15vw, 224px); }
}

/* 超过 3180px（一份拷贝已被视口吞掉）时停止滚动、直接换行铺开 */
@media (min-width: 3200px) {
  .wall__viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .wall__track { animation-name: none; width: auto; flex-wrap: wrap; }
  .wall__set { flex-wrap: wrap; padding-right: 0; }
  .wall__dup { display: none; }
}

/* ---------- 32. 求职体验工具（测评 / 简历诊断 / 岗位匹配） ---------- */
/* 32.1 外壳与栅格 */
.tapp {
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.tgrid { display: grid; gap: 18px; }
.tgrid--2 { grid-template-columns: repeat(2, 1fr); }
.tsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.tsplit--wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.tside { display: grid; gap: 16px; align-content: start; }
.tmeta { font-size: 0.8125rem; line-height: 1.7; color: var(--fg-subtle); }
.tmeta b { color: var(--fg-strong); font-family: var(--font-mono); }
.tlist { display: grid; gap: 8px; }
.tlist li { position: relative; padding-left: 16px; font-size: 0.875rem; line-height: 1.6; color: var(--fg-muted); }
.tlist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}

/* 32.2 开场与表单 */
.tintro { max-width: 720px; }
.tintro__title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.tintro__desc { margin-top: 12px; font-size: 0.9375rem; line-height: 1.72; color: var(--fg-muted); }
.tintro__list { margin-top: 22px; display: grid; gap: 10px; }
.tintro__list li { position: relative; padding-left: 18px; font-size: 0.875rem; line-height: 1.7; color: var(--fg-muted); }
.tintro__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}
.tintro__list b { color: var(--fg-strong); font-weight: 600; }
.tintro__actions, .tform__actions, .tresult-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tform { display: grid; gap: 22px; }
.tform__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tcheck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--fg-muted);
  cursor: pointer;
}
.tcheck input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.tempty { font-size: 0.8125rem; color: var(--fg-subtle); }
.tgood {
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgb(var(--green-rgb) / 0.26);
  background: rgb(var(--green-rgb) / 0.07);
  font-size: 0.9375rem;
  color: var(--fg-strong);
}
.tagain { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 32.3 题目流 */
.tq__meter { margin-bottom: 28px; }
.tq__meter-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.tq__meter-track { height: 4px; border-radius: 999px; background: var(--paper-200); overflow: hidden; }
.tq__meter-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transition: width .24s ease;
}
.tq { max-width: 780px; }
.tq__kind { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.tq__title { margin-top: 14px; font-size: clamp(1.125rem, 2.1vw, 1.4375rem); line-height: 1.5; }
.tq__opts { margin-top: 24px; display: grid; gap: 12px; }
.topt {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  background: var(--paper-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.topt:hover { background: var(--brand-tint); border-color: var(--brand-tint-2); }
.topt:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.16); }
.topt__k {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--brand-deep);
}
.topt:hover .topt__k { border-color: var(--brand-tint-2); }
.topt__t { padding-top: 3px; font-size: 0.9375rem; line-height: 1.62; color: var(--fg-strong); }
.tq__scale { margin-top: 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tscale {
  display: grid;
  gap: 7px;
  place-items: center;
  padding: 16px 8px;
  background: var(--paper-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tscale:hover { background: var(--brand-tint); border-color: var(--brand-tint-2); }
.tscale:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.16); }
.tscale__v { font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); line-height: 1; }
.tscale__l { font-size: 0.6875rem; line-height: 1.4; text-align: center; color: var(--fg-muted); }
.tq__hint { margin-top: 20px; font-size: 0.8125rem; line-height: 1.65; color: var(--fg-subtle); }
.tq__nav { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }

/* 32.4 报告 */
.treport { display: grid; }
.treport__title { font-size: 1.125rem; }
.treport__sub { margin-top: 9px; font-size: 0.875rem; line-height: 1.68; color: var(--fg-muted); }
.treport__head--gap { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border-soft); }

.tscores { display: grid; gap: 18px; align-content: start; }
.tscore { display: grid; gap: 8px; }
.tscore__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tscore__label { font-size: 0.875rem; color: var(--fg-muted); }
.tscore__val { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); }
.tscore__track { height: 6px; border-radius: 999px; background: var(--paper-100); overflow: hidden; }
.tscore__track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .5s ease; }
.tscore__note { font-size: 0.8125rem; line-height: 1.58; color: var(--fg-subtle); }
.tscore--ok .tscore__track i { background: var(--green); }
.tscore--ok .tscore__val { color: var(--green); }
.tscore--warn .tscore__track i { background: var(--amber); }
.tscore--warn .tscore__val { color: var(--amber); }
.tscore--bad .tscore__track i { background: var(--rose); }
.tscore--bad .tscore__val { color: var(--rose); }

.tsummary {
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--paper-50);
}
.tsummary__score { display: flex; align-items: baseline; gap: 10px; }
.tsummary__score b { font-family: var(--font-mono); font-size: clamp(1.875rem, 4vw, 2.375rem); font-weight: 600; line-height: 1; color: var(--fg-strong); }
.tsummary__score span { font-size: 0.8125rem; color: var(--fg-subtle); }
.tsummary__body { margin-top: 14px; display: grid; gap: 8px; }
.tsummary__head { font-size: 0.9375rem; line-height: 1.62; color: var(--fg-strong); }
.tsummary__sub { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-muted); }
.tsummary--ok { background: rgb(var(--green-rgb) / 0.06); border-color: rgb(var(--green-rgb) / 0.24); }
.tsummary--ok .tsummary__score b { color: var(--green); }
.tsummary--warn { background: rgb(var(--amber-rgb) / 0.07); border-color: rgb(var(--amber-rgb) / 0.28); }
.tsummary--warn .tsummary__score b { color: var(--amber); }
.tsummary--bad { background: rgb(var(--rose-rgb) / 0.06); border-color: rgb(var(--rose-rgb) / 0.22); }
.tsummary--bad .tsummary__score b { color: var(--rose); }

.tband {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-sans);
  vertical-align: middle;
}
.tband--is-high { background: rgb(var(--green-rgb) / 0.12); color: var(--green); border: 1px solid rgb(var(--green-rgb) / 0.28); }
.tband--is-mid { background: rgb(var(--sky-rgb) / 0.12); color: #0f6b81; border: 1px solid rgb(var(--sky-rgb) / 0.3); }
.tband--is-low { background: rgb(var(--amber-rgb) / 0.12); color: var(--amber); border: 1px solid rgb(var(--amber-rgb) / 0.3); }
.tband--is-none { background: rgb(var(--bad-rgb) / 0.12); color: var(--bad); border: 1px solid rgb(var(--bad-rgb) / 0.3); }

.tpill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  background: var(--paper-100);
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.tpill--ok { background: rgb(var(--green-rgb) / 0.1); border-color: rgb(var(--green-rgb) / 0.26); color: var(--green); }
.tpill--warn { background: rgb(var(--amber-rgb) / 0.1); border-color: rgb(var(--amber-rgb) / 0.28); color: var(--amber); }
.tpill--muted { color: var(--fg-subtle); }

/* 四轴 */
.tax {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
}
.tax__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tax__label { font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); }
.tax__pick { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--brand-deep); }
.tax__track { margin-top: 14px; height: 6px; border-radius: 999px; background: var(--paper-200); overflow: hidden; }
.tax__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-bright)); }
.tax__meta { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tax__other { font-size: 0.75rem; color: var(--fg-subtle); }
.tax__desc { margin-top: 14px; font-size: 0.875rem; line-height: 1.68; color: var(--fg-muted); }
.tax__advice { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 0.875rem; line-height: 1.68; color: var(--fg); }

/* 雷达与方向簇 */
.tradar-wrap { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-50); }
.tradar { width: 100%; height: auto; color: var(--ink-700); }
.tradar__label { font-family: var(--font-mono); font-size: 11px; fill: var(--fg-muted); }
.tcode {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}
.tcode b { font-family: var(--font-mono); font-size: 1.125rem; letter-spacing: 0.08em; color: var(--brand-deep); }
.tcluster { margin-top: 22px; padding: 24px; border: 1px solid var(--brand-tint-2); border-radius: var(--radius-lg); background: var(--brand-tint); }
.tcluster__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-deep); }
.tcluster__name { margin-top: 10px; font-size: 1.1875rem; }
.tcluster__desc { margin-top: 10px; font-size: 0.875rem; line-height: 1.7; color: var(--fg); }
.tcluster__jobs { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tcluster__hint { margin-top: 16px; font-size: 0.8125rem; line-height: 1.65; color: var(--fg-muted); }

.tjob {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.tjob--hit { background: rgb(var(--green-rgb) / 0.08); border-color: rgb(var(--green-rgb) / 0.26); color: var(--green); }

/* 32.5 问题清单 */
.tissues { display: grid; gap: 26px; margin-top: 22px; }
.tissues__group { display: grid; gap: 12px; }
.tissues__level {
  display: inline-block;
  justify-self: start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.tissues__level--high { background: rgb(var(--rose-rgb) / 0.09); color: var(--rose); border: 1px solid rgb(var(--rose-rgb) / 0.24); }
.tissues__level--mid { background: rgb(var(--amber-rgb) / 0.1); color: var(--amber); border: 1px solid rgb(var(--amber-rgb) / 0.28); }
.tissues__level--low { background: var(--paper-100); color: var(--fg-subtle); border: 1px solid var(--border); }
.tissue { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-50); }
.tissue__head { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--fg-strong); }
.tissue__dim {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg-subtle);
  vertical-align: 1px;
}
.tissue__body { margin-top: 10px; font-size: 0.875rem; line-height: 1.72; color: var(--fg-muted); }

/* 32.6 关键词明细 */
.tkw { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tkw__col { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-50); }
.tkw__k { font-size: 0.8125rem; color: var(--fg-subtle); margin-bottom: 14px; }
.tkw__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* 32.7 可修正的抽取结果（无模型解析必有误差，全部人工可改） */
.ttuner { margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--paper-50); overflow: hidden; }
.ttuner__head { padding: 18px 22px; border-bottom: 1px solid var(--border); background: #fff; }
.ttuner__title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 1rem; font-weight: 600; color: var(--fg-strong); }
.ttuner__count { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--fg-subtle); }
.ttuner__hint { margin-top: 8px; font-size: 0.8125rem; line-height: 1.65; color: var(--fg-muted); }
.ttuner__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.ttuner__grid > * { padding: 20px 22px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ttuner__grid > *:nth-child(2n) { border-right: 0; }
.ttuner__tier-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ttuner__skills { display: grid; gap: 10px; }
.ttuner__sub { font-size: 0.75rem; color: var(--fg-subtle); }

.ttier { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 500; }
.ttier--required { background: rgb(var(--brand-rgb) / 0.12); color: var(--brand-deep); border: 1px solid rgb(var(--brand-rgb) / 0.3); }
.ttier--preferred { background: rgb(var(--sky-rgb) / 0.12); color: #0f6b81; border: 1px solid rgb(var(--sky-rgb) / 0.3); }
.ttier--bonus { background: var(--paper-100); color: var(--fg-subtle); border: 1px solid var(--border); }

.tskills { display: grid; gap: 10px; }
.tskill {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-areas: "mark term tier" ". state state";
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-50);
  font-size: 0.875rem;
}
.tskill.is-hit { background: rgb(var(--green-rgb) / 0.06); border-color: rgb(var(--green-rgb) / 0.22); }
.tskill__mark { grid-area: mark; font-size: 0.8125rem; color: var(--fg-subtle); text-align: center; }
.tskill.is-hit .tskill__mark { color: var(--green); }
.tskill__term { grid-area: term; color: var(--fg-strong); }
.tskill > .ttier { grid-area: tier; }
.tskill__state { grid-area: state; font-size: 0.75rem; color: var(--fg-subtle); }

.tchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchips--tight { margin-top: 4px; }
.tchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: border-color .16s ease, color .16s ease;
}
.tchip:hover { border-color: var(--rose); color: var(--rose); }
.tchip__x { font-size: 0.875rem; line-height: 1; color: var(--fg-subtle); }
.tchip:hover .tchip__x { color: var(--rose); }

/* 32.8 说明与转化 */
.tcallout { padding: 20px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--paper-50); }
.tcallout__title { font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); }
.tcallout__body { margin-top: 10px; font-size: 0.875rem; line-height: 1.7; color: var(--fg-muted); }
.tcallout__body > :first-child { margin-top: 0; }
.tcallout--ok { background: rgb(var(--green-rgb) / 0.06); border-color: rgb(var(--green-rgb) / 0.22); }
.tcallout--warn { background: rgb(var(--amber-rgb) / 0.07); border-color: rgb(var(--amber-rgb) / 0.26); }
.tcallout--bad { background: rgb(var(--rose-rgb) / 0.05); border-color: rgb(var(--rose-rgb) / 0.22); }

.tparts { display: grid; gap: 8px; }
.tpart { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: var(--fg-muted); }
.tpart b { font-family: var(--font-mono); font-weight: 600; color: var(--fg-strong); }

.tnote { margin-top: 22px; font-size: 0.8125rem; line-height: 1.7; color: var(--fg-subtle); }

.tcta {
  margin-top: 30px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: linear-gradient(var(--ink-800), var(--ink-850));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-300);
}
.tcta__head { font-size: 1.125rem; font-weight: 600; color: #fff; }
.tcta__desc { margin-top: 10px; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-300); }
.tcta__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.tcta .btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.tcta .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* 32.9 响应式 */
@media (max-width: 1080px) {
  .tsplit, .tsplit--wide { grid-template-columns: 1fr; }
  .tkw { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .tgrid--2 { grid-template-columns: 1fr; }
  .tform__row { grid-template-columns: 1fr; }
  .ttuner__grid { grid-template-columns: 1fr; }
  .ttuner__grid > * { border-right: 0; }
}
@media (max-width: 620px) {
  .tq__scale { gap: 6px; }
  .tscale { padding: 12px 4px; }
  .tscale__l { font-size: 0.625rem; }
  .topt { padding: 15px 16px; }
  .tintro__actions .btn, .tform__actions .btn, .tresult-actions .btn, .tagain .btn { width: 100%; justify-content: center; }
}

/* 打印：报告需要能直接存成 PDF 存档 */
@media print {
  .tq__meter, .tq__nav, .tcta, .tagain, .tresult-actions, .tapp > .tabs { display: none; }
  .tapp { border: 0; box-shadow: none; padding: 0; }
  .tissue, .tsummary, .tcallout, .tax, .tkw__col, .tcluster { break-inside: avoid; }
}

/* ---------- 33. 关于我们 · 品牌故事长文 ---------- */
/* 自述正文：单栏限宽，行高比正文松一档（长段落读起来不累） */
.story { max-width: 720px; }
.story > p {
  margin-top: 22px;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--fg-muted);
}
/* 开篇第一段当导语：大一号、深一档 */
.story > p:first-child {
  margin-top: 0;
  font-size: 1.1875rem;
  line-height: 1.78;
  color: var(--fg-strong);
}
.story strong { color: var(--fg-strong); font-weight: 600; }
.story--center { margin-inline: auto; }

/* 自述里唯一一句被拎出来的话 */
.story__quote {
  margin: 38px 0 0;
  padding: 2px 0 2px 24px;
  border-left: 2px solid var(--brand);
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}

/* 落款：一道发丝线把正文与署名分开 */
.story__sign { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--border-soft); }
.story__sign b { display: block; font-size: 1rem; font-weight: 600; color: var(--fg-strong); }
.story__sign span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* 侧栏「三个阶段」：时间线放进卡片里，和自述并排 */
.story-aside .timeline { margin-top: 6px; }
.story-aside .timeline__item { padding-bottom: 26px; }

@media (max-width: 620px) {
  .story > p { font-size: 1rem; line-height: 1.8; }
  .story > p:first-child { font-size: 1.0625rem; }
  .story__quote { margin-top: 30px; padding-left: 18px; }
}

/* 导航多一个「关于」之后，861–1080px 这一段会把链接挤到折行
   （flex 收缩 → 文字换行、导航条撑高）。收紧内边距与间距把宽度还回去，
   并把主菜单收进抽屉的临界从 860px 提到 920px：920px 以下放不下六项，
   抽屉里同样有「关于我们」，功能不减。
   2026-09 再加一个「订阅方案」（七项）之后重测：921px 仍是一行，但已经压到
   flex 的最小内容宽度（scrollWidth == clientWidth，一点余量都不剩），字体或字距
   稍有不同就会在 921–960 之间折行。临界因此按原来的余量提到 960px：961px 往上
   留 14px 以上余量，960px 往下走抽屉，抽屉里同样有「订阅方案」。 */
@media (max-width: 1080px) {
  .nav__inner { gap: 14px; }
  .nav__menu { gap: 0; margin-left: 0; }
  .nav__link { padding-inline: 8px; }
}
@media (max-width: 960px) {
  .nav__menu { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ---------- 34. 关于我们 · 插画 / 案例 / 团队 ---------- */

/* 34.1 插画取色
   浅色底一套灰蓝描边，深色底加 .art--dark 自动换成半透明白，插画本身不用改。
   每块插画用自己的 --da / --dar 指定强调色，沿用第 32 节 .dir--* 的写法。 */
.art {
  display: block;
  width: 100%;
  height: auto;
  --ag-line: #dfe4f2;
  --ag-line-2: #eef1f8;
  --ag-fill: #f8fafd;
  --ag-dim: #e6eaf5;
}
.art--dark {
  --ag-line: rgb(255 255 255 / 0.26);
  --ag-line-2: rgb(255 255 255 / 0.14);
  --ag-fill: rgb(255 255 255 / 0.05);
  --ag-dim: rgb(255 255 255 / 0.18);
}

.a-line, .a-line-2, .a-da, .a-dash, .a-dash-da { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a-line { stroke: var(--ag-line); stroke-width: 1.4; }
.a-line-2 { stroke: var(--ag-line-2); stroke-width: 1.4; }
.a-dash { stroke: var(--ag-line); stroke-width: 1.2; stroke-dasharray: 5 7; }
.a-dash-da { stroke: var(--da); stroke-width: 1.4; stroke-dasharray: 5 7; }
.a-fill { fill: var(--ag-fill); stroke: var(--ag-line); stroke-width: 1.4; }
.a-dim { fill: var(--ag-dim); stroke: none; }
.a-da { stroke: var(--da); stroke-width: 1.6; }
.a-da-fill { fill: rgb(var(--dar) / 0.14); stroke: var(--da); stroke-width: 1.4; }
.a-da-tint { fill: rgb(var(--dar) / 0.12); stroke: none; }
.a-da-bar { fill: var(--da); stroke: none; }
.a-star { fill: #fff; stroke: none; }
.a-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--fg-subtle); }
/* 插画里的中文标签：等宽字体栈没有汉字字形，会回退到系统黑体，
   9.5px 对汉字太小，单独提到 11px 并去掉字距 */
.a-lbl--cjk { font-size: 11px; letter-spacing: 0; }
.art--dark .a-lbl { fill: rgb(255 255 255 / 0.5); }

/* 太阳与雏鹰（插画带专用）：日面是暖色渐变，雏鹰用底色实填、只留一圈浅描边，
   挡在日面上就是剪影，飞出日面后只剩一圈轮廓——和首页那张星云图的暖色核心呼应，
   但那里是画面、这里是线稿，不重样 */
.a-sun-ring { fill: none; stroke: rgb(var(--brand-bright-rgb) / 0.34); stroke-width: 1.2; }
.a-eagle { fill: var(--ink-900); stroke: rgb(255 255 255 / 0.24); stroke-width: 1; stroke-linejoin: round; }

/* 34.2 首屏下方那条插画带：深色接着首屏，讲「从巢里出来的一条轨迹」 */

/* 带着插画带的深色首屏（目前只有 /about/ 用）：把下内边距收掉，
   整块内容往上挪，插画带里的人才有机会落进第一屏 */
.hero--banded {
  padding-block: clamp(48px, 5.4vw, 72px) clamp(24px, 2.6vw, 34px);
}
/* 首屏的三团光晕沿用站内「同族暖色」配方（第 1783 行那一条：品牌红 + 陶土橙 + 深红），
   别的页面都是这一套，这里不该再出现青、青绿。
   只有第三团的落点不同：站内是 62% 96%，在插画带上会被切出一条横线，这里提到 62%，
   配合下面的遮罩把光晕在交界处收到 0 */
.hero--banded::after {
  background:
    radial-gradient(760px 420px at 14% 4%, rgb(var(--brand-rgb) / 0.42), transparent 64%),
    radial-gradient(680px 400px at 88% 16%, rgb(var(--ember-rgb) / 0.26), transparent 62%),
    radial-gradient(520px 320px at 62% 62%, rgb(var(--brand-deep-rgb) / 0.30), transparent 66%);
}
/* 指标卡往下淡出：卡片底边和插画之间不留硬边。
   边框要整条去掉，不能只把颜色设成透明——渐变默认按 padding-box 铺开、按 border-box 裁剪，
   底下那一圈会被 repeat 补上渐变的「第一行」（白色 10%），正好成了一条亮线。
   origin/repeat 两个长手属性写在 background 简写之后，否则会被简写重置回默认值 */
.hero--banded .metrics {
  border-width: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 88%);
  background-origin: border-box;
  background-repeat: no-repeat;
}
.hero--banded .metric {
  background: linear-gradient(180deg, rgb(var(--ink-850-rgb) / 0.72) 56%, rgb(var(--ink-850-rgb) / 0) 100%);
}
.artband {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  /* 首屏也是深色，往上压一段把插画带提进第一屏。
     压掉的量必须小于 .hero--banded 的下内边距，否则插画带的底色会盖住首屏的指标行。 */
  margin-top: calc(-1 * clamp(20px, 2.2vw, 30px));
  padding-block: 0 clamp(22px, 2.6vw, 36px);
}
/* 两团色晕都从插画带内部起晕，配色沿用站内同族暖色（品牌红 + 陶土橙，同 .section--mesh），
   不再用青/青绿，和首屏、和其他页的深色带是一条色路。
   底色与首屏同为 ink-900，只要光晕在交界处为 0，上下就是一片连续的深色，看不到接缝。
   光晕本身的衰减到不了边，所以另加一道上下各收 30% 的遮罩，把两条边上的光晕按到 0 */
.artband::before {
  content: "";
  position: absolute;
  inset: 0 -10% 12%;
  background:
    radial-gradient(640px 300px at 12% 82%, rgb(var(--brand-rgb) / 0.20), transparent 66%),
    radial-gradient(760px 320px at 86% 44%, rgb(var(--ember-rgb) / 0.16), transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
}
.artband .container { position: relative; }
.artband__cap {
  margin-top: clamp(8px, 1.2vw, 16px);
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-400);
}

/* 34.3 三类学生案例 */
/* 案例卡与团队卡沿用第 32 节 .dir 的观感：白底、浅投影、右上角一层强调色柔光 */
.scase, .role { position: relative; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.scase::before, .role::before {
  content: "";
  position: absolute;
  top: -78px;
  right: -78px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(var(--dar) / 0.16), transparent 68%);
}
.scase { --da: var(--brand); --dar: var(--brand-rgb); }
.scase--switch { --da: var(--indigo); --dar: var(--indigo-rgb); }
.scase--overseas { --da: var(--sky); --dar: var(--sky-rgb); }
.scase .card__tag, .role .card__tag { color: var(--da); }
/* 插画框底色带一点强调色，与卡片本体分开 */
.scase .mini { margin-top: 18px; background: linear-gradient(180deg, rgb(var(--dar) / 0.07), #fff 74%); border-color: rgb(var(--dar) / 0.2); }
.scase__who { margin-bottom: 2px; font-size: 0.8125rem; color: var(--fg-subtle); }
.scase__quote {
  margin-top: 20px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--da);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--fg-strong);
}
.scase__rows { margin-top: 20px; }
.scase__row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.scase__row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.scase__k {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.scase__v { font-size: 0.9375rem; line-height: 1.7; color: var(--fg-muted); }
.scase__v b { color: var(--fg-strong); font-weight: 600; }

/* 34.4 团队：四种角色的徽记 + 四条线收敛到一条 */
.team__conv { margin-bottom: clamp(8px, 1.6vw, 18px); }
.team__cap {
  margin-top: clamp(4px, 1vw, 12px);
  text-align: center;
  font-size: 0.875rem;
  color: var(--fg-subtle);
}
.role--dev { --da: var(--sky); --dar: var(--sky-rgb); }
.role--pm { --da: var(--brand); --dar: var(--brand-rgb); }
.role--ai { --da: var(--teal); --dar: var(--teal-rgb); }
.role--career { --da: var(--green); --dar: var(--green-rgb); }
/* 角色徽记换成了人物头像牌（.face），尺寸在 34.5 里跟着 .face 一起定，
   顺序不能提前写在这里——同权重下后写的 .face 会把它盖掉。 */
.role .card__list li::before { background: var(--da); opacity: 0.5; }
.role__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8125rem;
  color: var(--fg-subtle);
}

@media (max-width: 860px) {
  .scase__row { grid-template-columns: 1fr; gap: 4px; }
  .scase__k { padding-top: 0; }
}
@media (max-width: 620px) {
  .scase__quote { font-size: 1rem; }
  .artband__cap { font-size: 0.8125rem; }
  .team__cap { font-size: 0.8125rem; }
}

/* ---------- 34.5 关于我们 · 人物插画（案例头像牌 / 团队的人） ---------- */

/* 人物是中性线稿 + 卡片自己的强调色：头发与衣服走 --dar，五官走 --ag-ink。
   七个人共用一套画法，换卡片配色就换人物质感。
   顺带补一个全局缺省：插画如果没有任何卡片给它 --da（艺术横幅就是这种），
   那句 stroke: var(--da) 会整体失效——轨迹线和鸟会整块消失。缺省到品牌红。 */
:root { --da: var(--brand); --dar: var(--brand-rgb); }
.art { --ag-ink: #98a2bd; }
.art--dark { --ag-ink: rgb(255 255 255 / 0.5); }

.a-skin { fill: var(--ag-fill); stroke: var(--ag-line); stroke-width: 1.6; }
.a-hair { fill: rgb(var(--dar) / 0.42); stroke: none; }
.a-wear { fill: rgb(var(--dar) / 0.16); stroke: rgb(var(--dar) / 0.5); stroke-width: 1.4; }
.a-feat { fill: none; stroke: var(--ag-ink); stroke-width: 1.6; stroke-linecap: round; }
.a-glass { fill: none; stroke: var(--da); stroke-width: 1.4; stroke-linecap: round; }
.a-ring { fill: none; stroke: rgb(var(--dar) / 0.3); stroke-width: 1.4; }
.a-badge { fill: #fff; stroke: rgb(var(--dar) / 0.45); stroke-width: 1.4; }
.a-badge-ic { fill: none; stroke: var(--da); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 头像牌：案例卡与团队角色卡共用同一个牌面，只有尺寸与 --da 不同 */
.face {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, rgb(var(--dar) / 0.16), rgb(var(--dar) / 0.02) 72%);
  box-shadow: 0 0 0 1px rgb(var(--dar) / 0.16), 0 10px 22px rgb(var(--dar) / 0.1);
}
.face svg { width: 100%; height: 100%; }
/* 必须写在 .face 之后：同权重，靠后生效 */
.role__face { width: 72px; height: 72px; margin-bottom: 18px; }
.scase__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.scase__head > div:first-child { min-width: 0; }

/* 案例板块开头的水印：三类人各自出发，最后收成一条线 */
.section--art { overflow: hidden; }
.section--art > .container { position: relative; z-index: 1; }
.storywash {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(190px, 24vw, 320px);
  pointer-events: none;
  z-index: 0;
}
.storywash svg { width: 100%; height: 100%; }

/* 使命板块结尾：把开头那条「出巢」的线收掉 */
.storyend { width: min(260px, 64%); margin: clamp(28px, 4vw, 44px) auto 0; }
.storyend svg { width: 100%; height: auto; }

@media (max-width: 620px) {
  .face { width: 66px; height: 66px; }
  .role__face { width: 62px; height: 62px; margin-bottom: 14px; }
  .scase__head { gap: 12px; }
}

/* ---------- 35. 雏鹰 AI 求职工作台（JD 定向精修） ---------- */
/* 新页面级的复用点都挂在第 32 节的工具外壳里，所以这里只补新增的零件，
   配色、圆角、间距一律沿用第 32 节的变量，不另起一套。
   本机那几台引擎一只一只退场，自己那一套零件跟着一起删（动了这里要看一眼
   assets/js/ 下还有谁在用同名类）：
   * 简历精修（A04）2026-10-04 改成学员端那一页，.twin 双窗 / .rftabs 页签 / .rfpane、
     .tcmp 前后对比、.tjob--miss / .tchips--ats 随 refine.js 一起删了。
   * 复盘 2026-10-05 改成学员端那一页（智能实习复盘），它那几件也随 review.js 删了：
     .tchange 改写对照（原 35.3）、.tstar__list STAR 原句列表（原 35.4）与 .field--half
     半宽字段（原 35.1）—— 它原先在本机渲染七维诊断与 STAR 口述稿，现在这些都在那一页里。
   剩下的两块（.tdraft 可编辑草稿、.tchips--skills 技能命中表）是 03 的 JD 定向精修
   还在用的（jd-refine.js），别跟着删。 */

/* 35.1 表单补充：错误态（第 32 节的 .field 只管正常态；JD 定向精修把没填的那一栏
   标红，chat.js 的 failReason 就是读这行 .field__hint.is-error 当理由的） */
.field textarea.is-error, .field input.is-error, .field select.is-error { border-color: var(--rose); }
.field__hint.is-error { color: var(--rose); }

/* 35.2 可编辑草稿：JD 定向精修的对齐稿（复盘的口述稿草稿 2026-10-05 随 review.js 删了） */
.tdraft {
  margin-top: 20px;
  width: 100%;
  min-height: 320px;
  resize: vertical;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--fg-strong);
}
.tdraft:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.16); }

/* 35.3 技能命中表：把第 32 节的整行 .tskill 压成 chip 形态（只有 03 的 JD 定向精修用） */
.tchips--skills { gap: 10px; }
.tchips--skills .tskill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
}
.tchips--skills .tskill__mark { font-size: 0.75rem; }
.tchips--skills .tskill__state { font-size: 0.6875rem; }
.tskill.is-miss { background: rgb(var(--rose-rgb) / 0.05); border-color: rgb(var(--rose-rgb) / 0.2); }
.tskill.is-miss .tskill__mark { color: var(--rose); }
.tskill.is-miss .tskill__term { color: var(--fg-muted); }

@media (max-width: 620px) {
  .tdraft { min-height: 240px; padding: 14px 16px; }
}

/* 草稿框要能整段打印出来，不能留内部滚动 */
@media print {
  .tdraft { min-height: 0; border: 0; background: none; padding: 0; }
}

/* ---------- 36. 解决方案 · 导师 × 学员 全环节互动链路（原画） ---------- */
/* 36.1 这幅原画自带一套极简调色：品牌色只画「人与人的交接」，系统的动作走灰虚线。
   颜色全部取自设计系统 token，换配色方案时这幅画跟着走，不用单独改。 */
/* 全站 reset 不碰 figure，浏览器默认的 1em 40px 会把画缩进一圈，这里清掉 */
.mflow { margin: 0; }
.mflow__art { display: block; width: 100%; height: auto; }

/* 泳道底板 */
.mf-band { fill: var(--paper-50); }
.mf-band--ai { fill: none; stroke: var(--border); stroke-width: 1.2; stroke-dasharray: 5 7; }

/* 环节表头 */
.mf-stage__box { fill: var(--brand-tint); stroke: rgb(var(--brand-rgb) / 0.22); stroke-width: 1.2; }
.mf-stage__en { font-family: var(--font-mono); font-size: 9.6px; letter-spacing: 0.08em; fill: var(--brand-ink); }
.mf-stage__cn { font-size: 15px; font-weight: 600; fill: var(--fg-strong); }

/* 学员 / 导师的动作卡：导师卡描边带品牌色，一眼看出「人在把关」 */
.mf-card { fill: #fff; stroke: var(--border); stroke-width: 1.2; }
.mf-card--mentor { stroke: rgb(var(--brand-rgb) / 0.3); }
.mf-card__t { font-size: 12.5px; font-weight: 600; fill: var(--fg-strong); }
.mf-card__d { font-size: 12px; fill: var(--fg-muted); }

/* AI 产物：虚线小票，视觉上比两张人卡轻 */
.mf-pill { fill: #fff; stroke: var(--border); stroke-width: 1.1; stroke-dasharray: 4 4; }
.mf-pill__t { font-size: 10.5px; fill: var(--fg-muted); }

/* 左侧泳道名 */
.mf-lane__t { font-size: 13px; font-weight: 600; fill: var(--fg-strong); }
.mf-lane__e { font-family: var(--font-mono); font-size: 9.2px; letter-spacing: 0.08em; fill: var(--fg-subtle); }
.mf-lane__icon { fill: none; stroke: var(--fg-subtle); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.mf-lane__icon--ai { stroke: var(--ink-400); }
.mf-lane__icon--men { stroke: var(--brand); }

/* 三条走线：实线=学员提交，灰虚线=系统送审，品牌虚线=导师反馈 */
.mf-sub, .mf-send, .mf-fb { fill: none; stroke-linecap: round; }
.mf-sub { stroke: var(--brand); stroke-width: 1.5; }
.mf-send { stroke: var(--ink-400); stroke-width: 1.3; stroke-dasharray: 4 5; }
.mf-fb { stroke: var(--brand); stroke-width: 1.4; stroke-dasharray: 6 5; }
.mf-tip { fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mf-tip--ai { stroke: var(--ink-400); }
.mf-dots circle { fill: var(--brand); }

/* 底部结论条 */
.mf-out { fill: rgb(var(--brand-rgb) / 0.05); stroke: rgb(var(--brand-rgb) / 0.2); stroke-width: 1.2; }
.mf-out__div { stroke: rgb(var(--brand-rgb) / 0.2); stroke-width: 1.2; }
.mf-out__t { font-size: 11.5px; fill: var(--fg-muted); }
.mf-out__k { font-weight: 600; fill: var(--brand-ink); }
.mf-wing { fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; opacity: 0.4; }

/* 36.2 图例与说明 */
.mflow__legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.mflow__legend li { display: inline-flex; align-items: center; gap: 9px; font-size: 0.8125rem; color: var(--fg-muted); }
.mf-key { width: 28px; height: 10px; flex: 0 0 auto; }
.mf-key .mf-sub, .mf-key .mf-send, .mf-key .mf-fb { stroke-width: 1.6; }
.mflow__cap { margin-top: 16px; font-size: 0.875rem; line-height: 1.7; color: var(--fg-subtle); }

/* 36.3 窄屏可读版：原画是 2.5:1 的横幅，缩到 1080 以下字就不好认了，换成分段卡片 */
.mflow__list { display: none; }
.mfcard {
  padding: 16px 16px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.mfcard__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.mfcard__no { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--brand); }
.mfcard__name { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); }
.mfcard__en { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); }
.mfcard__row { display: grid; grid-template-columns: 52px 1fr; gap: 12px; margin-top: 12px; }
.mfcard__k { padding-top: 1px; font-size: 0.75rem; font-weight: 600; color: var(--fg-strong); }
.mfcard__k::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 2px;
  vertical-align: 1px;
  background: var(--brand);
}
.mfcard__row--ai .mfcard__k::before { background: var(--ink-400); }
.mfcard__v { font-size: 0.875rem; line-height: 1.65; color: var(--fg-muted); }

@media (max-width: 1080px) {
  .mflow__art { display: none; }
  .mflow__list { display: grid; gap: 14px; }
}
@media (max-width: 620px) {
  .mfcard__row { grid-template-columns: 1fr; gap: 4px; }
  .mfcard__k { padding-top: 0; }
}

/* ---------- 37. 雏鹰 AI 求职工作台 · 应用外壳（顶栏 / 左侧智能体列表 / 工作区） ---------- */
/* 第 35 节管那几个本机引擎产出的报告零件，这一节管外壳：让页面第一屏就是能用的工具，
   而不是先看一段介绍。工作区白卡仍然复用第 32 节的 .tapp，配色不另起一套。 */

/* 37.1 顶栏（工具名 + 两屏视图的切换 + 返回入口） */
.wbar { padding-top: clamp(24px, 3.4vw, 40px); }
.wbar__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.wbar__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; letter-spacing: -0.01em; color: var(--fg-strong); }
.wbar__sub { margin-top: 8px; font-size: 0.9375rem; line-height: 1.65; color: var(--fg-muted); }
/* 两屏视图的药丸：复用第 13 节的 .tabs / .tab（白底药丸、选中填深色），
   只压掉它自带的下边距（在这条横排里会把药丸顶起来）并把尺寸提一档 —— 它是这一页的主切换。 */
.wbar__tabs { margin-bottom: 0; }
.wbar__tabs .tab { padding: 10px 20px; font-size: 0.9375rem; }
/* 两屏的面板：收放照第 13 节 .tapp 的写法 —— JS 打开时先全收起，由 site.js 的 initViews
   放出激活的那一屏，免得首屏闪过两块；没开 JS 时这几条都不生效，两屏照旧平铺着读。 */
.js [data-view-panel] { display: none; }
.js [data-view-panel]:not([hidden]) { display: block; }
[data-view-panel][hidden] { display: none; }

/* 37.2 外壳栅格 */
/* 这一页比常规页宽一档：左栏和工作区并排，1200 的容器里工作区只剩 700 出头，
   对话框、卡片墙都会被挤成窄条。页面自己带 .page-workbench（见 body），
   导航与页脚也跟着一起放宽，否则内容的左右边缘对不齐。 */
.page-workbench .container { max-width: 1400px; }
.wshell { padding: clamp(20px, 2.6vw, 28px) 0 clamp(38px, 5vw, 64px); }
.wshell__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; }
.wmain { display: grid; gap: 18px; min-width: 0; }

/* 37.3 左侧智能体列表：深色，和站点的深色色带同一套变量。
   七环节那根轴加上挂在轴上的智能体比一屏高，所以左栏自己滚（吸顶的块再高也只能停在视口里，
   让它内部滚，栏脚那两句说明才够得着），滚动条压细压暗，不抢内容。 */
.wrail {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: grid;
  gap: 4px;
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
  padding: 14px;
  border-radius: var(--radius-xl);
  background: var(--ink-900);
  border: 1px solid var(--ink-850);
}
.wrail::-webkit-scrollbar { width: 8px; }
.wrail::-webkit-scrollbar-track { background: transparent; }
.wrail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 4px; }
.wrail::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); }
/* 栏头三件：栏名（带机器人记号）、数量、折叠按钮。横排时按中线对齐 ——
   栏名里有个 svg，按基线对齐会把这两段小字顶得一高一低。 */
.wrail__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px 12px; }
.wrail__k { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-bright); }
.wrail__k-ic { flex: 0 0 auto; width: 14px; height: 14px; }
/* 栏头第三件是折叠按钮，所以这一格靠 auto 外边距顶到右边，不跟着 space-between 居中 */
.wrail__n { margin-left: auto; font-size: 0.6875rem; color: rgba(255, 255, 255, .42); }
/* 栏体（调度入口 + 时间轴 + 栏脚）包一层：折叠时整块收起，栏里的选项卡按钮留在 DOM 里 */
.wrail__body { display: grid; gap: 4px; }

.wagent {
  position: relative;
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .18s ease;
}
.wagent:hover { background: rgba(255, 255, 255, .05); }
.wagent__top { display: flex; align-items: baseline; gap: 8px; }
.wagent__n { font-family: var(--font-mono); font-size: 0.6875rem; color: rgba(255, 255, 255, .4); }
.wagent__name { font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, .82); }
/* 一句介绍就一行：卡片宽度只有两档（栏 280 / 236），一折行整条就比邻居高一截，
   所以定死单行 —— 超了出省略号。各条文案都按窄档那 150px 量过（≤12 个汉字），
   哪条真出了省略号，是那条该改短，不是把这条松开。 */
.wagent__desc {
  font-size: 0.75rem; line-height: 1.5; color: rgba(255, 255, 255, .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 选中的那一只（加深）：底色从 8% 白的浅灰换成品牌色的实底、边框提到品牌亮色 ——
   左栏是深底，浅灰那层糊在同色的深底上看着像悬停（悬停是 .05 白），选中得压得住，
   一眼看出「现在在的就是这一只」。悬停仍是浅灰那层，选中比悬停深一档。 */
.wagent[aria-selected="true"] { background: rgb(var(--brand-rgb) / 0.3); border-color: rgb(var(--brand-bright-rgb) / 0.55); }
.wagent[aria-selected="true"] .wagent__name { color: #fff; }
.wagent[aria-selected="true"] .wagent__n { color: var(--brand-bright); }
.wagent[aria-selected="true"] .wagent__desc { color: rgba(255, 255, 255, .8); }
.wrail__foot { margin-top: 8px; padding: 14px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 5px; }
.wrail__foot b { font-size: 0.8125rem; font-weight: 600; color: #fff; }
.wrail__foot span { font-size: 0.75rem; line-height: 1.6; color: rgba(255, 255, 255, .48); }
/* 其余那几只（要登录的）：跟上面那句「数据不出浏览器」分开，免得看成一件事 */
.wrail__locked { padding-top: 9px; border-top: 1px dashed rgba(255, 255, 255, .12); }

/* 37.3.1 左栏收缩到左侧：宽屏下把「我的智能体」折成左边一条 56px 的窄带，工作区随之加宽，
   窄带顶上留一颗向外的箭头拉回来。折叠只在外壳（.wshell__grid）上加一个类，栏里的元素一个不减：
   轴上的选项卡按钮还在 DOM 里（不可见但点得到），chat.js / recruit.js 用 [data-tab] 找它们照旧，
   所以折叠时对话调度、招聘信息表的「交给 JD 面板」都不受影响。
   窄屏（≤860px）这一栏本来就是一排横滑的节点，没有可收的余地，所以这组规则整组写在宽屏里：
   视口一窄下来它们同时失效，栏头与这颗按钮也一起藏起来（见下面那条 860 的媒体查询）；
   宽度再回到宽屏时折叠态照旧，不额外记状态。 */
.wrail__fold {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.wrail__fold:hover { color: var(--brand-bright); border-color: rgba(var(--brand-bright-rgb) / .45); background: rgba(255, 255, 255, .07); }
.wrail__fold svg { width: 14px; height: 14px; transition: transform .26s ease; }

@media (min-width: 861px) {
  /* 列宽跟着一起收：窄带比栏头里的按钮宽一档，箭头与竖排的栏名都居中放得下 */
  .wshell__grid { transition: grid-template-columns .26s ease; }
  .wshell__grid.is-rail-folded { grid-template-columns: 56px minmax(0, 1fr); }

  .is-rail-folded .wrail { padding: 12px 0 14px; overflow: hidden; }
  /* 栏头转成竖排：箭头在上，机器人记号居中，栏名竖着写在下面（「我的智能体」五个字，正好一列）。
     机器人是这一栏收起来后最显眼的东西，所以放大到 20px；竖排只写在文字那一层上，
     .wrail__k 本身不动 writing-mode，免得把它的 flex 主轴也转过去。 */
  .is-rail-folded .wrail__head { flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 0; }
  .is-rail-folded .wrail__fold { order: -1; }
  .is-rail-folded .wrail__fold svg { transform: rotate(180deg); }
  .is-rail-folded .wrail__n { display: none; }
  .is-rail-folded .wrail__k { flex-direction: column; gap: 9px; }
  .is-rail-folded .wrail__k-ic { width: 20px; height: 20px; }
  .is-rail-folded .wrail__k-t { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .18em; }
  .is-rail-folded .wrail__body { display: none; }
}

/* 37.4 工作区里的工具头部（本机那三个引擎的 renderIntro 也产出这组类名） */
.tpanel { display: grid; gap: 22px; }
.tpanel .tnote { margin-top: 0; }
.tpanel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tpanel__title { font-size: 1.125rem; font-weight: 600; color: var(--fg-strong); }
.tpanel__sub { margin-top: 6px; max-width: 62ch; font-size: 0.875rem; line-height: 1.68; color: var(--fg-muted); }
.tpanel__k {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  white-space: nowrap;
  color: var(--brand-deep);
  background: rgb(var(--brand-rgb) / 0.1);
  border: 1px solid rgb(var(--brand-rgb) / 0.26);
}

/* 37.5 折叠说明：长解释收进这里，表单不再被文案挤到下面 */
.tmore { padding-top: 16px; border-top: 1px solid var(--border-soft); }
.tmore > summary { cursor: pointer; font-size: 0.8125rem; color: var(--fg-muted); list-style: none; }
.tmore > summary::-webkit-details-marker { display: none; }
.tmore > summary::before { content: "＋ "; font-family: var(--font-mono); color: var(--brand); }
.tmore[open] > summary::before { content: "－ "; }
.tmore > summary:hover { color: var(--fg-strong); }
.tmore__body { margin-top: 14px; display: grid; gap: 12px; }
.tmore .tintro__list { margin-top: 0; }
.tmore .tnote { margin-top: 0; }

/* 37.6 学员端面板（工作台右侧那六节：登录卡 / 嵌进来的学员端页面）
   六个面板各有一个 [data-stu-frame] 宿主，site.js 第 5.3 节按登录态往里写：
   没登录是一张登录卡（按钮开官网那个登录弹窗），登录了换成 iframe。
   只装当前这一个面板的 iframe；退出登录当场卸掉，不把上一个人的测评结果、规划报告、
   精修稿与刷题记录留在屏幕上。 */
.tstu { display: grid; gap: 12px; }
.tstu__gate {
  display: grid; gap: 10px; justify-items: start;
  max-width: 620px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px dashed rgb(var(--brand-rgb) / .3);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
}
.tstu__gate-t { font-size: 1rem; font-weight: 600; color: var(--fg-strong); }
.tstu__gate-p { font-size: 0.875rem; line-height: 1.7; color: var(--fg-muted); }
/* 那一侧认 embed=1 时会收起自己的左侧导航（见 apply/front/src/main.tsx），
   所以这里给足高度：短屏按 88vh 走，长屏封顶 1200px，面板里就是一块能滚的动作区。
   业主 2026-10-05 把这一档整体加高（原 76vh / 900px）：06 笔试那张卷子要一次铺开、
   上下翻着做，面板矮了就只能看见一两道题。 */
.tstu__frame {
  display: block;
  width: 100%;
  height: clamp(620px, 88vh, 1200px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
}

@media (max-width: 1080px) {
  .wshell__grid { grid-template-columns: 236px minmax(0, 1fr); }
}

/* 窄屏：左栏变成横向可滑的一排，工作区回到单栏；跟着站点一起把导航高度让出来 */
@media (max-width: 860px) {
  .wshell__grid { grid-template-columns: 1fr; }
  .wrail {
    position: static;
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 12px;
  }
  .wrail::-webkit-scrollbar { display: none; }
  /* 栏体是这一条横排里唯一还看得见的元素（栏头、栏脚都藏了），
     它自己摊成一行，里面「小助手 + 时间轴」的间距与从前一样是 8px */
  .wrail__body { display: flex; gap: 8px; }
  .wrail__head, .wrail__foot { display: none; }
  .wagent { flex: 0 0 auto; width: auto; padding: 10px 14px; border-color: rgba(255, 255, 255, .12); }
  .wagent__desc { display: none; }
  .wagent[aria-selected="true"] { border-color: var(--brand); }
}

@media (max-width: 620px) {
  .wbar__inner { align-items: flex-start; }
  .tpanel__k { display: none; }
}

/* ---------- 38. 雏鹰 AI 求职工作台 · 环节时间轴与对话调度（时间轴 / 对话框 / 调度回执） ---------- */
/* 第 37 节搭的外壳（顶栏、左栏、工作区）没动，这一节加三件事：
   左栏的七环节时间轴与挂在轴上的智能体、工作区里的对话框与消息流、以及面板上方的调度回执条。
   配色与圆角全部沿用既有 token，深色左栏继续用 37 节那套 rgba 白。 */

/* 38.1 顶部的横向阶段路径：左栏那根轴的横向速览——七环节摊成一行，能跑的智能体挂成小胶囊。
   机制与左栏完全一致：节点亮到哪一节、走过的线段画到哪里，都跟按钮的 aria-selected 走（:has()），
   胶囊与左栏的智能体同属一个选项卡组，点哪一处两处一起亮，所以这里不添 JS。 */
.wpath {
  margin-bottom: clamp(14px, 1.8vw, 20px);
  padding: 12px 16px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* 浅色底：这一条是「图」，不是工作区那张白卡（.tapp），免得和下面的白卡连成一片 */
  background: var(--paper-50);
  box-shadow: var(--shadow-card);
  /* 窄屏在卡里横滑，不把整页撑宽 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.wpath__cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.wpath__cap b { font-size: 0.8125rem; font-weight: 600; color: var(--fg-strong); }
.wpath__cap span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--fg-subtle); }

/* 卡片右端那颗折叠按钮：把整张卡片向上收起来，只留标题这一行，省下的高度让给下面的工作区。
   与左栏那颗（第 37.3.1 节）同一套做法——按钮自己带 aria-expanded，状态只落在 .wpath 的一个类上，
   箭头在 CSS 里转过来。align-self 单独写是因为标题行按基线对齐，而按钮里没有文字可对齐；
   margin-left:auto 把它顶到行尾，窄到一行放不下时它会跟着换行，仍在最右。 */
.wpath__fold {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.wpath__fold:hover { color: var(--brand); border-color: rgb(var(--brand-rgb) / .42); background: rgb(var(--brand-rgb) / .06); }
.wpath__fold svg { width: 13px; height: 13px; transition: transform .26s ease; }
/* 收起来：路径表整张藏掉，标题行的下边距也一并去掉，卡片就成了薄薄一条。
   藏的是列表本身而不是卡片的 overflow，所以按钮、标题、副题都还在原处，收放不重排。 */
.wpath.is-path-folded .wpath__cap { margin-bottom: 0; }
.wpath.is-path-folded .wpath__list { display: none; }
.wpath.is-path-folded .wpath__fold svg { transform: rotate(180deg); }

/* 列宽下限与下面那截线段是一组：每列 162px 起——左边 16px 让给圆点，剩 146px 正好放得下最长的一条
   胶囊（A05 JD 定向精修智能体，量出来 145px），所以胶囊在任何宽度下都单行不折；再窄就整条横滑。
   线段从本节点的圆心连到下一节点的圆心——left 5px 起、长 100% + 14px 的列间距，
   最后一节不画，所以路径的终点就是最后一个节点。 */
.wpath__list { display: grid; grid-template-columns: repeat(7, minmax(162px, 1fr)); gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.wpath__s { position: relative; display: grid; gap: 5px; align-content: start; padding: 0 0 0 16px; }
/* 节点圆点与线段：圆心落在每节顶边往下 10px 处（top 5px + 半径 5px），
   与 .wpath__hd 的 20px 行高对齐；线段在 top 9px（2px 高，圆心也在 10px），压在同一条水平线上。
   圆点填色跟横幅底色（--paper-50）一致，压住下面那段线。 */
.wpath__s::before {
  content: "";
  position: absolute; left: 0; top: 5px; width: 10px; height: 10px; box-sizing: border-box;
  border: 2px solid rgb(var(--brand-rgb) / .3); border-radius: 50%; background: var(--paper-50);
  transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease;
}
.wpath__s::after {
  content: "";
  position: absolute; left: 5px; top: 9px; width: calc(100% + 14px); height: 2px; border-radius: 2px;
  background: var(--border);
  transition: background-color .32s ease;
}
.wpath__s:last-child::after { display: none; }
.wpath__s--off::before { border-style: dashed; border-color: rgb(var(--brand-rgb) / .16); }
/* 走过的段与当前节点：只做装饰，按钮自身的选中态才是功能信号（与左栏同一条原则） */
.wpath__s:has(~ .wpath__s .wpath__b[aria-selected="true"])::after { background: rgb(var(--brand-rgb) / .45); }
.wpath__s:has(.wpath__b[aria-selected="true"])::before {
  border-color: var(--brand); background: var(--brand);
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .14);
  animation: wtlPulse 3.2s ease-out infinite;
}
.wpath__hd { display: flex; align-items: center; gap: 6px; min-height: 20px; line-height: 20px; }
.wpath__no { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-subtle); transition: color .2s ease; }
.wpath__n { font-size: 0.8125rem; font-weight: 600; color: var(--fg-strong); }
.wpath__s:has(.wpath__b[aria-selected="true"]) .wpath__no { color: var(--brand); }
/* 要读账号档案的六节：圆点与节点名压暗（.wpath__s--off），但节点下面那枚胶囊
   仍是真按钮 —— 点开的是本页右侧那个学员端面板（登录后嵌出来），不是死链，
   所以只是形状上的区分，不再是「只报名字、点不动」 */
.wpath__s--off .wpath__n { font-weight: 500; color: var(--fg-muted); }

.wpath__b {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 0.71875rem; font-weight: 500; line-height: 1.5;
  color: var(--fg-strong); text-align: left; white-space: nowrap; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}
.wpath__b-no { margin-right: 5px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--fg-subtle); transition: color .16s ease; }
/* 混在「本机就能跑」的那一节里、但要登录的那一枚（03 简历精修，与 A05 同挂在 03 上）：
   节点不是虚线（这一节整体不算 off），所以换成胶囊自己带虚线边 —— 与左栏、卡片上那几处
   「要登录」用的是同一个记号。 */
.wpath__b--stu { border-style: dashed; }
.wpath__b:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-1px); }
.wpath__b:hover .wpath__b-no { color: var(--brand); }
.wpath__b[aria-selected="true"] { border-color: var(--brand); background: rgb(var(--brand-rgb) / .09); color: var(--brand-deep); }
.wpath__b[aria-selected="true"] .wpath__b-no { color: var(--brand); }

/* 38.2 左栏的时间轴：七环节按求职先后排在一根轴上，能在这台机器上跑的智能体挂在节点下面。
   节点亮到哪一节、轴上的「走过的段」画到哪里，都交给 :has() 跟着按钮的 aria-selected 走，
   所以不另写 JS；:has() 没命中时只是不点亮，按钮自身的选中态照旧（这条是装饰，不能是唯一信号）。 */
.wtl { display: grid; gap: 9px; margin-top: 12px; }
.wtl__axis { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 10px 2px; }
.wtl__axis b { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, .72); }
.wtl__axis span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, .34); }

/* padding-left 30px 与轴上各元素的 -21 / -25px 是一组：轴画在容器内 10px 处（宽 2px），
   内容从 30px 起，节点圆点正好压在轴的中间。改一个数就要改这一组。
   .wtl__hd 的 line-height / min-height 与圆点的 top 是另一组：节点头固定 20px 高，
   行内边距 6px，圆心就落在每节顶边往下 16px 处（top 11px + 半径 5px），
   下面那截轴也按这个数接到下一节的圆心。 */
.wtl__list { margin: 0; padding: 0 0 0 30px; list-style: none; }
.wtl__s { position: relative; display: grid; gap: 3px; padding: 6px 0; }
/* 轴：一段一节地画——从本节的圆心连到下一节的圆心，最后一节不画，
   所以轴的终点就是最后一个节点，底下不会拖出一截尾巴。 */
.wtl__s::after {
  content: "";
  position: absolute; left: -21px; top: 16px; bottom: -16px; width: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .13);
  transition: background-color .32s ease;
}
.wtl__s:last-child::after { display: none; }
/* 节点：一颗 10px 的小圆点落在轴上 */
.wtl__s::before {
  content: "";
  position: absolute; left: -25px; top: 11px; width: 10px; height: 10px; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: var(--ink-900);
  transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease;
}
.wtl__s:hover::before { border-color: var(--brand-bright); }
/* 走过的段：选中的智能体所在节点以上的轴段换成品牌色，切换时自己走上去 */
.wtl__s:has(~ .wtl__s .wagent[aria-selected="true"])::after { background: rgb(var(--brand-rgb) / .55); }
.wtl__s:has(.wagent[aria-selected="true"])::before {
  border-color: var(--brand-bright);
  background: var(--brand);
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .16), 0 0 12px rgb(var(--brand-rgb) / .5);
  animation: wtlPulse 3.2s ease-out infinite;
}
@keyframes wtlPulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / .38), 0 0 12px rgb(var(--brand-rgb) / .5); }
  70% { box-shadow: 0 0 0 9px rgb(var(--brand-rgb) / 0), 0 0 12px rgb(var(--brand-rgb) / .5); }
  100% { box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 0), 0 0 12px rgb(var(--brand-rgb) / .5); }
}

/* 环节头：图标与编号照抄首页七环节那一排（同一批 svg），选中的那一节点一并亮起来。
   行高写死 20px：节点头就是 20px 高，圆点圆心固定在顶边往下 17px（见上面那组数）。 */
.wtl__hd { display: flex; align-items: center; gap: 7px; min-height: 20px; line-height: 20px; }
.wtl__ic { flex: 0 0 auto; display: inline-flex; color: rgba(255, 255, 255, .42); transition: color .2s ease, opacity .2s ease; }
.wtl__ic svg { width: 15px; height: 15px; }
.wtl__no { font-family: var(--font-mono); font-size: 0.6875rem; color: rgba(255, 255, 255, .4); transition: color .2s ease; }
.wtl__n { font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, .9); }
.wtl__en { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, .3); }
.wtl__s:has(.wagent[aria-selected="true"]) .wtl__ic { color: var(--brand-bright); }
.wtl__s:has(.wagent[aria-selected="true"]) .wtl__no { color: var(--brand-bright); }
.wtl__s:has(.wagent[aria-selected="true"]) .wtl__n { color: #fff; }

/* 要读账号档案的六节：节点改成虚线，挂在节点下面的智能体卡片也留住虚线边（.wagent--stu）——
   形状与轴上能跑的那几个同族（都是挂在这一节的智能体），右边那枚状态标记（「学员端」）
   只剩 04 匹配 / 05 投递两张还挂着：有页面的四节（01 测评 / 02 规划 / 03 简历精修 / 06 笔试）
   编号与标记都不写（业主 2026-10-04 起逐节改的）。
   03 简历那一节是混合的：JD 定向精修本机就能跑（实线卡片），简历精修要登录（虚线卡片，
   节点不算 off，所以那条虚线只落在卡片自己身上）。
   它们和上面那几张一样是选项卡按钮（带 data-tab），点开的是工作区里对应的那个面板：
   登录过了就嵌出学员端那一页，没登录先给一张登录卡（见 site.js 第 5.3 节）。
   卡片本身仍是 <a href>：禁用 JS、⌘/中键点它就是整页去学员端，所以名字不再压到看不清。 */
.wtl__s--off::before { border-style: dashed; border-color: rgba(255, 255, 255, .2); }
.wtl__s--off .wtl__ic { opacity: .55; }
.wtl__s--off .wtl__n { font-weight: 500; color: rgba(255, 255, 255, .6); }

.wagent--stu { border-style: dashed; border-color: rgba(255, 255, 255, .18); text-decoration: none; }
.wagent--stu:hover { border-color: rgba(var(--brand-bright-rgb) / .45); }
.wagent--stu .wagent__n { color: rgba(255, 255, 255, .4); }
.wagent--stu .wagent__name { color: rgba(255, 255, 255, .78); }
.wagent--stu .wtl__tag { margin-left: auto; }

.wtl__tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(255, 255, 255, .45);
}

/* 38.3 挂在轴上的智能体：比环节头缩进一档、比左栏那几个按钮矮一点，
   悬停时从轴上引一条小横线连过来、再往右挪 2px，看得出它是挂在轴上这一节的。 */
.wtl__s .wagent { padding: 10px 12px; }
.wtl__s .wagent::before {
  content: "";
  position: absolute; left: -19px; top: 50%; width: 19px; height: 1px;
  background: transparent;
  transition: background-color .2s ease;
}
.wtl__s .wagent:hover::before,
.wtl__s .wagent[aria-selected="true"]::before { background: rgb(var(--brand-bright-rgb) / .5); }
.wtl__s .wagent:hover { transform: translateX(2px); }

/* 38.4 调度入口：它不属于任何环节（把一句话派给轴上那两个本机引擎），所以摆在轴外、轴的上方。
   它选着的时候，七个节点自上而下依次亮一下（两轮就停），示意它带你走一遍七环节；
   一旦选中轴上某个智能体，这一趟就让给「走过的段」，节点换成常亮的那一颗。 */
.wagent--dispatcher { background: rgba(var(--brand-rgb) / 0.14); border-color: rgba(var(--brand-bright-rgb) / 0.28); }
.wagent--dispatcher:hover { background: rgba(var(--brand-rgb) / 0.2); }
.wagent--dispatcher .wagent__n { color: var(--brand-bright); letter-spacing: 0.1em; }
/* 选中：和平常那层 0.14 的底色拉开（选中一律 0.3，见 37.3 那条），边框换实色 */
.wagent--dispatcher[aria-selected="true"] { background: rgba(var(--brand-rgb) / 0.3); border-color: var(--brand-bright); }
.wagent--dispatcher[aria-selected="true"] .wagent__name { color: #fff; }
.wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s::before {
  animation: wtlWalk 4.9s ease-out 2;
}
.wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s:nth-child(2)::before { animation-delay: .55s; }
.wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s:nth-child(3)::before { animation-delay: 1.1s; }
.wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s:nth-child(4)::before { animation-delay: 1.65s; }
.wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s:nth-child(5)::before { animation-delay: 2.2s; }
.wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s:nth-child(6)::before { animation-delay: 2.75s; }
.wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s:nth-child(7)::before { animation-delay: 3.3s; }
@keyframes wtlWalk {
  0% { border-color: var(--brand-bright); box-shadow: 0 0 0 1px rgb(var(--brand-rgb) / .34); }
  9% { border-color: var(--brand-bright); box-shadow: 0 0 0 6px rgb(var(--brand-rgb) / .08); }
  16%, 100% { border-color: rgba(255, 255, 255, .3); box-shadow: 0 0 0 6px rgb(var(--brand-rgb) / 0); }
}
@media (prefers-reduced-motion: reduce) {
  /* 上面那条全局规则把时长压到 .001ms，无限循环会变成空转，这里把几处动画直接停掉 */
  .wagent--dispatcher[aria-selected="true"] + .wtl .wtl__s::before { animation: none; }
  .wtl__s:has(.wagent[aria-selected="true"])::before { animation: none; }
  .wpath__s:has(.wpath__b[aria-selected="true"])::before { animation: none; }
}

/* ---------- 旧工作台壳子的「另外四个环节」入口（eaglet 保留段，不属于上面这套编号） ---------- */
/* 新版工作台改掉了这个入口，eaglet 的工作台壳子仍是旧的那一版、还在用它，所以保留。 */
.wrail__more { font-size: 0.71875rem; line-height: 1.55; color: rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .16); padding-bottom: 8px; }
.wrail__more:hover { color: var(--brand-bright); border-bottom-color: rgba(var(--brand-bright-rgb) / 0.4); }

/* 38.5 打开智能体时浮在上方的调度回执条 */
.wroute {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid rgb(var(--brand-rgb) / 0.24);
  border-radius: var(--radius-lg);
  background: var(--brand-tint);
  font-size: 0.8125rem;
}
.wroute[hidden] { display: none; }
.wroute__k { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--brand-deep); }
.wroute__t { flex: 1 1 auto; min-width: 0; line-height: 1.6; color: var(--fg-strong); }
.wroute__back {
  flex: 0 0 auto;
  padding: 4px 11px;
  border: 1px solid rgb(var(--brand-rgb) / 0.3);
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
  color: var(--brand-deep);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.wroute__back:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 38.6 对话框本体 */
.tchat { display: grid; gap: 18px; }
.tchat__log { display: grid; gap: 16px; max-height: min(520px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
/* 空状态与消息流互斥：display 是 grid，hidden 得自己兜一句才盖得住 */
.tchat__log[hidden], .tchat__start[hidden] { display: none; }

/* 空状态：四句示例 + 一张按环节分组的智能体卡表，点一句直接派发，点卡片进面板。
   卡片墙是这一屏的主角，所以兜着的这块只留一圈浅边，别把它再往里挤一层。 */
.tchat__start { display: grid; gap: 14px; padding: 15px 16px 17px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--paper-50); }
.tchat__start-t { font-size: 0.8125rem; font-weight: 600; color: var(--fg-strong); }
.tchat__ideas { display: flex; flex-wrap: wrap; gap: 10px; }
.tchat__idea {
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tchat__idea:hover { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-ink); }
/* 追问建议与卡片上的「试这句」比示例句轻一档，别和上面那排抢注意力 */
.tchat__idea--sm { padding: 5px 12px; font-size: 0.75rem; }

/* 38.7 分环节的智能体卡片：一个环节一组，本机能跑的挂「进入使用」，
   要登录的只给一个「在右侧打开」并写明为什么——不做成假入口。
   每组一个强调色（--wc），落在卡片上沿的细线、角上的光晕、编号与状态点上；
   颜色全部取自既有 token，深色带上的那套不动。 */
.wcards { display: grid; gap: 16px; }
.wcards__g { display: grid; gap: 10px; --wc: var(--brand); --wc-rgb: var(--brand-rgb); }
.wcards__g:nth-of-type(2) { --wc: var(--amber); --wc-rgb: var(--amber-rgb); }
.wcards__g:nth-of-type(3) { --wc: var(--teal); --wc-rgb: var(--teal-rgb); }
.wcards__g.is-locked { --wc: var(--ink-400); --wc-rgb: 143 152 178; }
.wcards__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wcards__no { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--wc); }
.wcards__head b { font-size: 0.875rem; font-weight: 600; color: var(--fg-strong); }
.wcards__en { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); }
/* 本机那几组排在 240 一档的网格上；下面「其余四个环节」那一组压小一号，正好一排四个。
   03 组里那张要登录的卡也走 .wcard--locked 的虚线边，但格子随它所在的组，不跟着变小 ——
   它是这一组里的第二张，和 JD 定向精修并排。 */
.wcards__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.wcards__g.is-locked .wcards__row { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }

.wcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 17px 18px 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(126% 88% at 100% 0%, rgb(var(--wc-rgb) / 0.1), transparent 62%),
    #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* 上沿一道强调色：默认半隐，鼠标停上去才亮起来 */
.wcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--wc), rgb(var(--wc-rgb) / 0));
  opacity: .5;
  transition: opacity .18s ease;
}
.wcard:not(.wcard--locked):hover { transform: translateY(-2px); border-color: rgb(var(--wc-rgb) / 0.4); box-shadow: var(--shadow-lift); }
.wcard:not(.wcard--locked):hover::before { opacity: 1; }
.wcard:not(.wcard--locked):hover .wcard__name { color: var(--wc); }
.wcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 没有编号位的卡片（01 测评那一张，见 chat.js 的 lockCardHTML）：状态字单独占一行时
   space-between 会把它按到左边，给它自己一个 auto 外边距，仍旧靠右对齐。 */
.wcard__top > .wcard__state:only-child { margin-left: auto; }
.wcard__no { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; color: var(--wc); }
.wcard__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid rgb(var(--wc-rgb) / 0.3);
  border-radius: 999px;
  background: rgb(var(--wc-rgb) / 0.06);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--wc);
}
.wcard__state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(var(--wc-rgb) / 0.16); }
.wcard__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--fg-strong); transition: color .18s ease; }
.wcard__desc { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-muted); }
.wcard__need { font-size: 0.75rem; line-height: 1.65; color: var(--fg-subtle); }
.wcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.wcard__acts .btn--ghost:hover { border-color: rgb(var(--wc-rgb) / 0.5); background: rgb(var(--wc-rgb) / 0.08); color: var(--wc); }
.wcard--locked { border-style: dashed; background: var(--paper-50); }
.wcard--locked .wcard__name, .wcard--locked .wcard__desc, .wcard--locked .wcard__no { color: var(--fg-subtle); }
.wcard--locked .wcard__state { border-color: var(--border); background: transparent; }
.wcard--locked .wcard__state::before { background: none; border: 1px solid currentColor; box-shadow: none; }
.wcards__g.is-locked .wcards__head b { font-weight: 500; color: var(--fg-subtle); }

/* 消息流 */
.tmsg { display: grid; gap: 6px; max-width: 78ch; min-width: 0; }
.tmsg--you { justify-self: end; justify-items: end; max-width: 68ch; }
.tmsg__who { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); }
.tmsg__text {
  padding: 12px 16px;
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg-strong);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.tmsg__body { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-50); }
.tmsg__lead { font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--fg-strong); }
/* 步骤轨迹：识别 → 派发 → 填入 → 跑完，编号是顺序，也是「每一步都能核对」的意思 */
.tmsg__why { margin-top: 10px; display: grid; gap: 7px; counter-reset: tstep; }
.tmsg__why li { position: relative; padding-left: 25px; font-size: 0.8125rem; line-height: 1.65; color: var(--fg-muted); }
.tmsg__why li::before {
  counter-increment: tstep;
  content: counter(tstep);
  position: absolute;
  left: 0; top: 0.2em;
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(var(--brand-rgb) / 0.1);
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1;
}
/* 引擎算出来的条目：追问「怎么提高」时摊开的清单 */
.tmsg__items { margin-top: 12px; display: grid; gap: 8px; }
.tmsg__items li {
  display: grid;
  gap: 4px;
  padding: 10px 13px;
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #fff;
}
.tmsg__items b { font-size: 0.8125rem; font-weight: 600; line-height: 1.6; color: var(--fg-strong); }
.tmsg__items span { font-size: 0.75rem; line-height: 1.7; color: var(--fg-muted); }
.tmsg__more { margin-top: 8px; font-size: 0.75rem; line-height: 1.6; color: var(--fg-subtle); }
.tmsg__note { margin-top: 10px; font-size: 0.8125rem; line-height: 1.65; color: var(--fg-subtle); }
.tmsg__quick { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tmsg__acts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.tmsg--busy .tmsg__text { background: var(--paper-100); border-color: var(--border-soft); font-size: 0.8125rem; color: var(--fg-subtle); }

/* 输入区：整个工作台最大的一个框 */
.tchat__composer { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.tchat__label { font-size: 0.8125rem; font-weight: 600; color: var(--fg-strong); }
.tchat__input {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg-strong);
}
.tchat__input::placeholder { color: var(--fg-subtle); }
.tchat__input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.16); }
.tchat__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tchat__meter { font-size: 0.75rem; line-height: 1.6; color: var(--fg-subtle); }

@media (max-width: 860px) {
  /* 左栏变成横滑的一排：轴跟着横过来，一节一段，节与节之间用竖线分开，
     节点小圆点从轴上回到编号前面，环节仍然连成一条线 */
  .wtl { flex: 0 0 auto; display: flex; gap: 0; margin: 0; }
  .wtl__axis { display: none; }
  .wtl__list { display: flex; align-items: center; gap: 0; padding: 0; }
  .wtl__s::after, .wtl__s .wagent::before { display: none; }
  .wtl__s {
    display: flex; flex: 0 0 auto; align-items: center; gap: 8px;
    padding: 0 0 0 10px; margin: 0 0 0 4px;
    border-left: 1px solid rgba(255, 255, 255, .14);
  }
  .wtl__s::before { position: static; flex: 0 0 auto; }
  .wtl__hd { gap: 6px; }
  .wtl__en { display: none; }
  /* 这一排横滑里八张卡片都留着：那几张「要登录」的卡点开也是在同一个工作区里
     换面板（登录后嵌出学员端那一页），不换页，所以没有从前「别把人整页送走」的顾虑 */
  .wtl__s .wagent { padding: 10px 14px; }
  .wroute { flex-wrap: wrap; gap: 8px 12px; }
  .tchat__log { max-height: 380px; }
}

@media (max-width: 620px) {
  .tmsg { max-width: none; }
  .wcards__row, .wcards__g.is-locked .wcards__row { grid-template-columns: 1fr; }
  .tchat__row { justify-content: flex-start; }
  .tchat__input { min-height: 88px; font-size: 0.9375rem; }
}

@media print {
  .wroute, .tchat { display: none; }
}

/* ---------- 39. 招聘信息表 · 汇总表（筛选标签 / 列头排序 / 翻页 / 展开行） ---------- */
/* 招聘信息表不是智能体，也不在工作台里：它在 /experience/agents/ 页面下方单独成节
   （#jobs），把运维端那张招聘信息表（飞书表格定时同步，两千多条）按页摊开。表格复用
   第 20 节的 .table-wrap / table.tbl，标签沿用第 32 节 .tjob 的观感，颜色与圆角全部取
   既有 token，不另起一套。覆盖第 20 节的选择器都带上 table.tbl--jobs，靠同级特异性 +
   靠后取胜。 */

/* 39.1 宽一档的数据面带：这一节是招聘信息表（从飞书同步）的落地表，横着比站内其它区块多占
   一档——视口不够宽时直接铺满，只有超宽屏才用 1760px 兜住；左右内边距收到 clamp 的一档，
   把省下来的宽度给筛选区与表格。这一页的 body 带 .page-workbench，其它区块的容器上限是
   1400，这里同级特异性 + 靠后取胜把它顶开 */
.section--board .container { max-width: 1760px; padding-inline: clamp(16px, 2.2vw, 40px); }

/* 39.2 筛选区：招聘类型、笔试要求连成一条快筛带，关键词与三个下拉压到底下一行 */
.jbar { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-50); }
.jbar__row { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; }
/* 一组标签：自己的标签名 + 自己的 chip 串，宽屏上几组并排，窄屏上整组折行 */
.jbar__group { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
.jbar__label { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 600; color: var(--fg-strong); }
.jbar__chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.jbar__hint { flex: 0 1 auto; font-size: 0.75rem; color: var(--fg-subtle); }
.jchip { position: relative; display: inline-flex; cursor: pointer; }
.jchip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jchip span { display: inline-block; padding: 5px 13px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 0.8125rem; line-height: 1.5; color: var(--fg-muted); transition: border-color .16s ease, background .16s ease, color .16s ease; }
.jchip:hover span { border-color: var(--brand-tint-2); color: var(--fg-strong); }
.jchip input:checked + span { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-ink); font-weight: 600; }
.jchip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.jbar__row--more { align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--border-soft); }
/* 四道文字条件排一行：关键词最宽，三个下拉等宽；再窄就自己折行，不挤成一列 */
.jbar__row--more .field { flex: 1 1 168px; gap: 6px; }
.jbar__row--more .field--q { flex: 2 1 260px; }
.jbar__side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.jbar__count { margin-top: 14px; font-size: 0.8125rem; line-height: 1.7; color: var(--fg-subtle); }
.jbar__count b { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--fg-strong); }

/* 39.3 表：列头点一下换排序，公司那一列压着行业与岗位数，链接是两颗小胶囊 */
table.tbl--jobs { min-width: 1040px; }
table.tbl--jobs .col-company { min-width: 170px; }
/* 行业那一列放的是彩色标签（39.9）：宽度按最长的一个组名（「咨询/专业/法律」）给，
   标签自己不折行，装不下就省略号 */
table.tbl--jobs .col-industry { width: 132px; }
table.tbl--jobs .col-positions { min-width: 300px; }
table.tbl--jobs .col-location { min-width: 132px; }
table.tbl--jobs .col-batch, table.tbl--jobs .col-grad, table.tbl--jobs .col-degree { width: 104px; }
table.tbl--jobs .col-deadline { width: 116px; white-space: nowrap; }
table.tbl--jobs .col-links { width: 128px; white-space: nowrap; }
/* 公告 / 投递这两颗链接：跟筛选标签一个观感，点它们是去外链、不算展开这一行 */
.jlink { display: inline-block; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 0.75rem; line-height: 1.5; color: var(--brand-deep); text-decoration: none; transition: border-color .16s ease, background .16s ease; }
.jlink + .jlink { margin-left: 6px; }
.jlink:hover { border-color: var(--brand-tint-2); background: var(--brand-tint); }
/* 源表里有 23 行这两格不是链接，写的是「查看详情」「立即投递」或者只有一个邮箱：
   这类不做成胶囊的观感，只留一段小字（长了自己收），邮箱那截给 mailto 的样式 */
.jlink--plain { padding: 3px 0; border: 0; background: none; color: var(--fg-subtle); }
.jlink--plain a { color: var(--brand-deep); }
.jlink--plain:hover { border: 0; background: none; }
.jlink--plain a:hover { text-decoration: underline; }
table.tbl--jobs th, table.tbl--jobs td { padding: 12px 16px; font-size: 0.875rem; vertical-align: middle; }
table.tbl--jobs thead th { background: var(--paper-50); }
/* 正文第一列是行表头，不该继承表头那条等宽大写字 */
table.tbl--jobs tbody th { background: transparent; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-strong); white-space: normal; }
table.tbl--jobs tbody tr:hover > * { background: var(--paper-50); }
table.tbl--jobs tbody tr.jrow--last > * { border-bottom: 0; }
.tbl__cap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tbl__sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.tbl__sort i { font-style: normal; font-size: 0.75rem; color: var(--fg-subtle); }
.tbl__sort:hover { color: var(--brand-deep); }
.tbl__sort:hover i, .tbl--jobs th[aria-sort="ascending"] .tbl__sort i, .tbl--jobs th[aria-sort="descending"] .tbl__sort i { color: var(--brand); }

/* 39.4 行：整行可点，岗位多的行在末尾补一句「等 N 个」 */
.jrow { cursor: pointer; }
.jrow__open { display: grid; gap: 7px; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.jrow__title { color: var(--fg-strong); }
.jrow__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jrow__sub { display: none; font-size: 0.75rem; color: var(--fg-subtle); }
.jrow__more { margin-left: 6px; font-size: 0.75rem; color: var(--fg-subtle); }
.col-go { width: 44px; text-align: center; }
.jrow__chev { display: inline-block; font-size: 0.75rem; color: var(--fg-subtle); transition: transform .16s ease; }
.jrow.is-open > * { background: var(--paper-50); }
.jrow.is-open .jrow__chev { transform: rotate(180deg); color: var(--brand); }

/* 39.5 展开行：在招岗位与这张表里的一行（含公告 / 投递链接），末尾一个去 JD 定向精修的出口 */
.jrow__detail > td { padding: 0 16px 18px; background: var(--paper-50); border-bottom: 0; }
.jrow__jd { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.jrow__jdrow { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; font-size: 0.8125rem; line-height: 1.75; }
.jrow__jdrow b { font-weight: 600; color: var(--fg-strong); }
/* 这一节能宽到 1760px，岗位一串能拉出几百字，给正文留一道行宽上限 */
.jrow__jdrow p { max-width: 92ch; color: var(--fg-muted); }
.jrow__act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.jrow__tip { font-size: 0.75rem; line-height: 1.6; color: var(--fg-subtle); }

/* 39.6 分页条：表格上下各一条，上面那条不带「每页」选择 */
.jpager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 0.8125rem; color: var(--fg-subtle); }
.jpager__pos b { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--fg-strong); }
.jpager__size { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.jpager__size select { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font: inherit; color: var(--fg-strong); }
.jpager .btn[disabled] { opacity: .45; cursor: not-allowed; }
#tr-pager-top .jpager { margin-top: 0; }
/* 计数条与上分页条并成一行：左边说这一页有多少条、筛了什么，右边翻页。两条各占一行时，
   表头上方白白多出三十几像素——这一屏的高度要留给表格 */
.jbar__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }
.jbar__meta .jbar__count { margin-top: 0; }

/* 39.7 空态 */
.jrow__empty > td { padding: 26px 22px; }
.jrow__empty p { font-size: 0.875rem; line-height: 1.7; color: var(--fg-muted); }
.jrow__empty .btn { margin-top: 14px; }

/* 39.8 顶部的收拢：这一屏是拿来看表的，不是拿来读的。这一节现在没有标题（眉标与 h2 都去掉了，
   区块名在 HTML 的 aria-label 上），进来就是筛选区，所以上边距按页内区块最小的那一档给，
   筛选区与计数条也各自收一档。省下来的高度全让给表格，让表头连着几条记录落在第一屏里：
   1440×900 下表头顶在 520px 上下，而页面的固定开销是导航 69 + 工作台顶栏 86 = 155px。
   改这一块要连着量一遍顶到哪儿了。 */
.section--board { padding-top: clamp(18px, 2.2vw, 28px); }
/* 861px 往上筛选区本来就在两行里排得开，内边距再收一档；手机上维持原来那档 */
@media (min-width: 861px) {
  .section--board .jbar { padding: 14px 16px; gap: 10px; }
  .section--board .jbar__row--more { padding-top: 10px; }
}

/* 39.9 行业标签与行业筛选行：表里那一列（.jind）与筛选行里那一排（.jchip 加色族）
   用的是同一套色族——同色即同组，还没点就已经是这张表的图例。
   源表那一格的写法有一百多种（「国央企、金融」写两三个，「信息技术/软件开发/…」塞一整串），
   组是站内按关键词归出来的（recruit.js 第二节），所以标签上是组名，原写法在 title 与展开行里。
   色族只声明 --ja（文字）/ --jar（底与描边的 rgb 三元组）两个变量，值全部取第 1 节的既有
   token，只把文字色压深一档：浅底上的对比度都在 4.5:1 以上（最小的是 lime 的 4.65:1）。 */
.jind {
  display: inline-block; max-width: 100%; padding: 2px 8px;
  border: 1px solid rgb(var(--jar) / .26); border-radius: 999px;
  background: rgb(var(--jar) / .1);
  font-size: 0.75rem; line-height: 1.6; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
  color: var(--ja);
}
/* 一格写了两三个组的竖着排，别把标签自己挤成两行 */
.jinds { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* 色族：表里的标签与筛选行里的标签共用。slate 的三元组是 ink-600（#3D4866），
   mist 借的是 --bad-rgb，两个都是既有的灰，不新开色 */
.jchip { --ja: var(--brand-ink); --jar: var(--brand-rgb); }
.jcol--brand { --ja: var(--brand-ink); --jar: var(--brand-rgb); }
.jcol--indigo { --ja: #2F53B8; --jar: var(--indigo-rgb); }
.jcol--sky { --ja: #0E6A82; --jar: var(--sky-rgb); }
.jcol--teal { --ja: #0F6B57; --jar: var(--teal-rgb); }
.jcol--green { --ja: #16703D; --jar: var(--green-rgb); }
.jcol--amber { --ja: #8A5806; --jar: var(--amber-rgb); }
.jcol--rose { --ja: #9E1B33; --jar: var(--rose-rgb); }
.jcol--ember { --ja: #A63C1C; --jar: var(--ember-rgb); }
.jcol--lime { --ja: #4A7A22; --jar: var(--lime-rgb); }
.jcol--slate { --ja: var(--ink-600); --jar: 61 72 102; }
.jcol--mist { --ja: #5A6280; --jar: var(--bad-rgb); }

/* 筛选行里那一排：没带色族的那颗（「全部」）还是品牌色，与另两排标签一致；
   带色族的按自己的色走，选中态比通用 .jchip 重一档——同色加深 + 描边收紧 */
.jbar__row--ind .jchip span { border-color: rgb(var(--jar) / .3); color: var(--ja); }
.jbar__row--ind .jchip:hover span { border-color: rgb(var(--jar) / .55); background: rgb(var(--jar) / .07); color: var(--ja); }
.jbar__row--ind .jchip input:checked + span { background: rgb(var(--jar) / .14); border-color: rgb(var(--jar) / .55); color: var(--ja); font-weight: 600; }

@media (max-width: 1080px) {
  /* 窄一档先收起学历层次，表还是横向放得下 */
  table.tbl--jobs { min-width: 920px; }
  table.tbl--jobs .col-degree { display: none; }
}
/* 宽屏上把筛选区摊平：条件那一行五块各占一列铺满整行，不再让操作按钮掉到第二行 */
@media (min-width: 1081px) {
  .jbar__row--more {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr)) auto;
    gap: 14px 18px;
    align-items: end;
  }
  .jbar__row--more .field, .jbar__row--more .field--q { flex: none; }
  .jbar__side { margin-left: 0; justify-content: flex-end; }
}
/* 再宽也不把三组标签硬并成一排：技能标签比另两组宽得多，挤进剩下的那点宽度反而要折三行 */
@media (max-width: 860px) {
  /* 行业与届次一起收起：行业折进公司名下面那行，岗位名那一列得留够宽度 */
  table.tbl--jobs { min-width: 760px; }
  table.tbl--jobs .col-industry, table.tbl--jobs .col-grad { display: none; }
  .jbar { padding: 18px; }
}
@media (max-width: 620px) {
  /* 手机上只留公司 / 在招岗位 / 截止 / 链接四列，行业折进公司名下面 */
  table.tbl--jobs { min-width: 0; }
  table.tbl--jobs .col-location, table.tbl--jobs .col-batch { display: none; }
  table.tbl--jobs th, table.tbl--jobs td { padding: 11px 12px; }
  .col-go { width: 32px; }
  .jrow__sub { display: block; }
  .jpager__size { margin-left: 0; }
  .jbar { padding: 16px; }
  .jbar__row--more .field { flex: 1 1 100%; }
  .jbar__side { width: 100%; margin-left: 0; justify-content: space-between; }
  .jrow__jdrow { grid-template-columns: 1fr; gap: 4px; }
  /* 行业那一排横着滑：二十来个标签在手机上折行要占掉小半屏，把表格推得老远。
     表里的行业列这时也收起来了，筛选照旧可用 */
  .jbar__row--ind .jbar__group { display: block; }
  .jbar__row--ind .jbar__label { display: block; margin-bottom: 8px; }
  .jbar__row--ind .jbar__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .jbar__row--ind .jchip { flex: 0 0 auto; }
}

@media print {
  /* 筛选标签、展开记号与派发按钮都是屏幕上的动作 */
  .jbar, .jrow__act, .col-go { display: none; }
  .table-wrap { overflow: visible; }
  .jrow { cursor: auto; }
  .jrow, .jrow__jd { break-inside: avoid; }
}


/* ---------- 40. 官网自助注册与套餐（/join/） ---------- */
/* C 端唯一「留下信息」的入口。套餐卡把版本、时长与能力点位一次说清，表单只收信息、
   不收款——没有 ICP 许可证，在线支付开不了，收款与开通都在私域里人工完成。
   卡片上的版本、价格、时长、点位全部来自后台套餐表（GET /api/public/packages），
   页面不写死任何一档：改价、上下架、调整点位都只动后台，这里自动跟着变。
   按版本聚合：一个版本一张卡，月/季度/年三个价格并排在卡里（.plan__durs），
   点哪一格就选哪一档——不再有页面顶部的时长切换条，比较三个时长不必来回切。 */

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.plans__empty {
  /* 套餐没加载出来时这里只有一句话，别让它占着四列里的一列 */
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* 卡内的时长价格预览：月 / 季度 / 年 三格等宽并列。三格是同一张卡里三个平行的选项，
   所以做成三列而不是一行胶囊——价格本身要对齐着看。点哪一格就选哪一档。 */
.plan__durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.plan__dur {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-50);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plan__dur:hover { border-color: var(--brand); background: #fff; }
.plan__dur.is-on { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.1); }
.plan__durlabel { font-size: 0.75rem; color: var(--fg-muted); }
.plan__dur.is-on .plan__durlabel { color: var(--brand-ink); font-weight: 600; }
.plan__durprice { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); letter-spacing: -0.01em; }
/* 私域咨询与未配置：价格位置没有数字，字号退回正文，别让人以为标错了价 */
.plan__dur--quote .plan__durprice { font-size: 0.8125rem; font-weight: 500; color: var(--amber-ink); letter-spacing: 0; }
.plan__dur--off { border-style: dashed; background: transparent; cursor: default; }
.plan__durprice--none { font-size: 0.8125rem; font-weight: 400; color: var(--fg-subtle); }

/* 提交结果（成功 / 未过校验）。内容统一塞进一个 <span>，靠这里的 column 排布分行：
   .form__status 是 flex 容器，句子里的每个节点都会被 gap 拆成各自独立的块 */
.form__status--join { flex-direction: column; gap: 8px; align-items: flex-start; }
.form__status--bad {
  background: rgb(var(--rose-rgb) / 0.08);
  border: 1px solid rgb(var(--rose-rgb) / 0.26);
  color: var(--rose);
}

/* 蜜罐：真人看不见的字段，机器人会填。移出视口而不是 display:none ——
   有些提交器会跳过 display:none 的字段，那样这道门就白设了 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.plan { padding: 26px; display: flex; flex-direction: column; }
.plan__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan__name { font-size: 1.1875rem; font-weight: 600; color: var(--fg-strong); }
.plan__desc { font-size: 0.875rem; line-height: 1.62; color: var(--fg-muted); margin-top: 10px; min-height: 2.9em; }
.plan__caps {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.plan__cap { display: flex; gap: 9px; font-size: 0.8125rem; line-height: 1.5; color: var(--fg-muted); }
.plan__no { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--brand-ink); flex: 0 0 auto; padding-top: 2px; }
.plan__stage { color: var(--fg-subtle); }
/* 按钮沉到卡底：四张卡的点位数不一样长，按钮要对齐在同一水平线上 */
.plan__pick { margin-top: auto; padding-top: 22px; }
.plan.is-picked { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.12); }
.plan.is-picked .plan__name { color: var(--brand-ink); }
.plan.is-picked .plan__pick .btn { pointer-events: none; }

/* 私域联系：把「加谁、怎么付」写清楚，这一段是表单之外的第二条转化路径 */
.join-contact { display: grid; gap: 14px; margin-top: 20px; }
.join-contact__row { display: flex; gap: 12px; align-items: flex-start; }
.join-contact__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  flex: 0 0 62px;
  padding-top: 3px;
}
.join-contact__v { font-size: 0.9375rem; color: #fff; word-break: break-all; }
.join-contact__v a { color: var(--brand-bright); }

/* 深色卡里的时间轴：默认配方是给浅底画的，白点白线在深底上会整段消失 */
.card--dark .timeline { border-left-color: rgba(255, 255, 255, 0.16); }
.card--dark .timeline__item::before { background: var(--ink-850); border-color: var(--brand-bright); }
.card--dark .timeline__step { color: var(--brand-bright); }
.card--dark .timeline__title { color: #fff; }
.card--dark .timeline__desc { color: var(--ink-300); }

@media (max-width: 1080px) {
  /* 四张版本卡两两成对，正好占满两行 */
  .plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* 四个版本是拿来纵向比较的，折成 3+1 会留下一个孤零零的第四张，不如整列铺开 */
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .plan { padding: 22px; }
  /* 三格的价格在窄屏上还放得下，但内边距得收一收，¥12999 这类五位数不能被挤断 */
  .plan__dur { padding: 9px 8px 10px; }
  .plan__durprice { font-size: 0.9375rem; }
  .join-contact__k { flex: 0 0 100%; padding-top: 0; }
  .join-contact__row { flex-direction: column; gap: 4px; }
}

/* ---------- 41. 订阅方案（/subscribe/）：五档阶梯 + 服务清单 ---------- */
/* 定价页的正文是那张服务清单：五档能用的能力完全一样，差别只有三处——能用多久、含不含项目、
   有没有人工答疑（措辞按读者视角，别写回「卖的是一段时间」那类卖方总结句）。所以卡片不按能力
   分层（没有任何一档写成「解锁更多智能体」），只把「用多久、含不含项目、有没有人工」三件事
   说清。三条只产品档公开挂价，两条含项目档在交付条件做齐之前只在私域报价，价格位置因此没有
   数字、字号退回正文（与 /join/ 的「价格私域咨询」同一处理）。 */

/* 六列栅格：只产品档各占 2 列（一行三张），含项目档各占 3 列（一行两张）。
   「三条台阶 + 两条收入」的层级因此在版面上就成立，不必再加一层小标题。 */
.subs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: stretch; }
.subs__card { grid-column: span 2; }
.subs__card--proj { grid-column: span 3; }
/* 主推档描边：整页只有一条主推，边框是不比大小就能认出来的记号 */
.subs__card--lead { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.1); }
.subs__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.subs__name { font-size: 1.1875rem; font-weight: 600; color: var(--fg-strong); }
.subs__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 16px;
  font-size: 2rem;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}
.subs__price small { font-size: 0.9375rem; font-weight: 500; color: var(--fg-muted); letter-spacing: 0; }
/* 私域报价：价格位置没有数字。字号回落到与小字同档，别让「私域报价」四个字被读成一个价格 */
.subs__price--quote { font-size: 1.25rem; color: var(--amber-ink); letter-spacing: 0; }
.subs__quote { font-size: 0.875rem; line-height: 1.62; color: var(--fg-muted); margin-top: 10px; }
.subs__list { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.subs__list li.subs__no { color: var(--fg-subtle); }
.subs__list li.subs__no::before { background: var(--fg-subtle); opacity: 0.5; }
/* 卡底注脚（价格对比 / 私域报价 / 订阅起点）：五张卡的清单长短不一，这一段跟在清单后面，
   沉到卡底的是下面那颗 CTA —— 五张卡的行动按钮要对齐在同一水平线上 */
.subs__note { padding-top: 18px; font-size: 0.8125rem; line-height: 1.6; color: var(--fg-subtle); }
.subs__act { margin-top: auto; padding-top: 16px; }
.subs__act .btn { width: 100%; justify-content: center; }

/* 服务清单：六列（一列服务 + 五档）。表头是中文档位名，不套 .tbl 默认的等宽大写字距——
   那是给英文列头用的；档位名下面单起一行放价格，五档的价格沿同一水平线对齐着看。 */
.subs-table table.tbl { min-width: 1040px; }
.subs-table table.tbl th {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  white-space: normal;
  vertical-align: bottom;
}
.subs-table table.tbl th strong { display: block; margin-top: 5px; font-size: 0.9375rem; font-weight: 600; color: var(--fg-strong); }
.subs-table table.tbl th strong.is-quote { font-size: 0.8125rem; font-weight: 500; color: var(--amber-ink); }
.subs-table table.tbl th.is-lead { background: var(--brand-tint); color: var(--brand-ink); }
.subs-table table.tbl th.is-lead strong { color: var(--brand-ink); }
/* 第一列是标签列（最长的要放十个编号），给它一个固定占比，五档的列宽才会一致 */
.subs-table table.tbl th:first-child, .subs-table table.tbl td:first-child { width: 32%; }
.subs-table table.tbl td { vertical-align: top; }
.subs-table table.tbl td:first-child { color: var(--fg-strong); font-weight: 500; }
.subs-table table.tbl th:not(:first-child), .subs-table table.tbl td:not(:first-child) { text-align: center; }
.subs-table .is-yes { color: var(--brand-ink); font-weight: 600; }
.subs-table .is-no { color: var(--fg-subtle); }
.subs-table .is-num { color: var(--fg-strong); font-weight: 600; }
.subs-table .tbl__sub { display: block; margin-top: 5px; font-size: 0.75rem; font-weight: 400; line-height: 1.5; color: var(--fg-subtle); }

@media (max-width: 1080px) {
  /* 六列放不下就折成两列；末位那张占满整行，五行正好排成 2 + 2 + 1 */
  .subs { grid-template-columns: repeat(2, 1fr); }
  .subs__card, .subs__card--proj { grid-column: span 1; }
  .subs__card:last-child { grid-column: span 2; }
}
@media (max-width: 860px) {
  /* 五档是拿来纵向比较的：折成 2 + 2 + 1 时每张卡只剩半屏宽，整列铺开更好读 */
  .subs { grid-template-columns: 1fr; }
  .subs__card:last-child { grid-column: auto; }
}
@media (max-width: 620px) {
  .subs__card { padding: 22px; }
  .subs__price { font-size: 1.75rem; }
  .subs-table .tbl__sub { font-size: 0.6875rem; }
}

/* ---------- 42. 注册 / 登录弹窗 ---------- */
/* 导航右上角那颗按钮弹出来的那块。面板本身由 site.js 建（见它第 8.5 节）——
   官网没有 include 机制，把这块 markup 抄进 11 个页面就是留 11 份要同步的副本。
   弹窗直接打 apply 服务那两条接口，所以这里的样式只管「长得像官网」，
   不掺任何业务判断。 */
.auth {
  position: fixed;
  inset: 0;
  z-index: 300;                 /* 压在导航（100）与移动端抽屉之上 */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(7 10 18 / 0.55);
}
.auth.is-open { display: flex; }

.auth__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: 0 24px 60px rgb(7 10 18 / 0.28);
}

.auth__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg-subtle);
}
.auth__close:hover { border-color: var(--border); color: var(--fg-strong); }

/* 登录 / 注册两页并排，与站内那套胶囊选项卡（.tab）同形 */
.auth__tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.auth__tab {
  padding: 9px 17px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.875rem;
  color: var(--fg-muted);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.auth__tab:hover { border-color: var(--ink-700); color: var(--fg-strong); }
.auth__tab[aria-selected="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.auth__tab[aria-selected="true"]:hover { color: #fff; }

.auth__title { font-size: 1.25rem; font-weight: 600; color: var(--fg-strong); }
.auth__desc { margin-top: 10px; font-size: 0.875rem; line-height: 1.7; color: var(--fg-muted); }

.auth__form { margin-top: 22px; }
.auth__hint { font-size: 0.75rem; line-height: 1.6; color: var(--fg-subtle); }

/* 口令框右侧那颗「睁眼 / 闭眼」（按钮由 site.js 第 8.5 节建）。
   它浮在输入框里，所以输入框右边留出它的宽度；按下的状态记在 aria-pressed 上，
   看不出图标该换哪张就跟着那个属性走 */
.auth__pass { position: relative; display: grid; }
.auth__pass input { padding-right: 48px; }
.auth__eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--fg-subtle);
}
.auth__eye:hover { border-color: var(--border); color: var(--fg-strong); }
.auth__eye svg { width: 18px; height: 18px; }
.auth__eye-shut,
.auth__eye[aria-pressed="true"] .auth__eye-open { display: none; }
.auth__eye[aria-pressed="true"] .auth__eye-shut { display: block; }

.auth__submit { width: 100%; margin-top: 4px; }
.auth__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--fg-muted);
}
.auth__foot a { color: var(--brand-ink); text-decoration: underline; }

/* 协议行（注册页签是一颗必须勾的复选框，登录页签是一句告知，内容由 site.js 换）。
   放在提交按钮下面：勾了才能提交，所以它得在按下去之前就看得见。 */
.auth__consent {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--fg-muted);
}
.auth__consent a { color: var(--brand-ink); text-decoration: underline; }
.auth__check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.auth__check input { flex: none; width: auto; margin: 3px 0 0; accent-color: var(--brand); }
/* 没勾就提交时整行标红，和输入框的 .field.has-error 同一套读法 */
.auth__consent.has-error { color: var(--rose); }
.auth__consent.has-error a { color: var(--rose); }

/* 提交中先禁掉按钮：连点两下发两次登录，第二发会被限流算成一次失败 */
.auth__submit[disabled] { opacity: .6; cursor: default; }

@media (max-width: 620px) {
  .auth { padding: 16px; }
  .auth__panel { padding: 26px 22px; }
}

/* ---------- 43. 简历填报插件（求职体验页 #plugin）：说明 + 演示位 + 四步 ---------- */
/* 这一节落在深色首屏下面的浅底上。演示位与说明并排成左右结构（图左字右，同首页那两块
   界面仿真 .mockrow 的口径），演示位占六成宽：它要放的是「表单 + 侧栏」的画面，窄了看不清
   字段标签。
   演示位有两种画面、只让一种露面：真录屏（.plugdemo__video，文件还没录）和一段用代码演的
   界面演示（.plugsim），site.js 第 8.6 节探到视频在就换成前者——两态互斥靠 [hidden]，
   两条显式规则写在下面（作者样式里的 display 会盖掉浏览器的 [hidden]）。
   .plugsim 整段按「框自己的宽度」缩放：字号用 cqw（容器是外面那个 .plugdemo__frame）、
   里面一律 em，所以桌面、单列、手机三档都不用单独调尺寸。没有 JS、或者用户开了「减少动态
   效果」时它不演，就静态摆着填完之后的样子（也就是原来海报的位置）——所以值、清单、覆盖率
   默认都是可见的，要演的那部分才由 .plugsim--anim 藏起来。
   四步与下载按钮另起一行，压在节的下半段。 */
.plug {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(28px, 3.6vw, 52px);
  align-items: start;
}
.plug__intro { max-width: 58ch; }

/* 五条「它做什么」：序号用计数器，写几条就排到几 */
.plug__facts { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: plugfact; }
.plug__facts li { position: relative; padding-left: 33px; font-size: 0.9375rem; line-height: 1.62; color: var(--fg-muted); }
.plug__facts li::before {
  counter-increment: plugfact;
  content: counter(plugfact, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.plug__facts b { color: var(--fg-strong); font-weight: 600; }
.plug__note { margin: 16px 0 0; }

/* 演示位：播放器按自己的画幅撑高；界面演示整块随框缩放 */
.plugdemo { margin: 0; }
.plugdemo__frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--ink-900);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  /* 演示里的字号按这个框的宽度算（cqw），所以容器就是它 */
  container-type: inline-size;
}
.plugdemo__video { display: block; width: 100%; height: auto; }

/* 界面演示：一扇仿真的浏览器窗口——顶条 + 左边的网申表 + 右边的插件侧栏 */
.plugsim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  margin: clamp(9px, 2.6cqw, 17px);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.34);
  font-size: 10px;                        /* 不认 cqw 的浏览器退回这一行 */
  font-size: clamp(7px, 1.62cqw, 13px);
  overflow: hidden;
}

.plugsim__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0.9em; background: var(--paper-100); border-bottom: 1px solid var(--border-soft); }
.plugsim__dots { display: flex; gap: 0.32em; }
.plugsim__dots i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--paper-300); }
.plugsim__url {
  flex: 1;
  min-width: 0;
  padding: 0.3em 0.9em;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--paper);
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: 0.78em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 左栏：那张网申表。值默认是看得见的（静态那一版就是填完的样子），
   演起来之后由 .plugsim--anim 把「还没轮到」的收起来 */
.plugsim__page { padding: 1.1em 1.3em 1.2em; background: var(--paper); }
.plugsim__ttl { margin: 0 0 0.95em; font-size: 1.15em; font-weight: 600; color: var(--fg-strong); }
.plugsim__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7em 1.05em; }
.plugf { display: flex; flex-direction: column; gap: 0.32em; min-width: 0; }
.plugf__k { font-size: 0.85em; font-weight: 600; color: var(--ink-700); }
.plugf__box {
  display: flex;
  align-items: center;
  min-height: 2.05em;
  padding: 0.28em 0.65em;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius-sm);
  background: var(--paper-50);
  transition: background-color 300ms ease, border-color 300ms ease;
}
.plugf--area .plugf__box { display: block; min-height: 2.95em; overflow: hidden; }
.plugf__v {
  display: block;
  min-width: 0;
  font-size: 0.92em;
  line-height: 1.35;
  color: var(--fg-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 260ms ease, transform 260ms ease;
}
.plugf--area .plugf__v { white-space: normal; }

/* 右栏：插件侧栏（账号 + 那颗按钮 + 清单 + 撤销） */
.plugsim__panel { display: flex; flex-direction: column; gap: 0.7em; padding: 1.1em 1em; background: var(--paper-50); border-left: 1px solid var(--border-soft); }
.plugsim__me { display: flex; align-items: center; gap: 0.55em; margin: 0; min-width: 0; }
.plugsim__ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 0.9em;
  font-weight: 600;
}
.plugsim__me-t { min-width: 0; }
.plugsim__me-t b { display: block; font-size: 0.9em; color: var(--fg-strong); }
.plugsim__me-t em { display: block; font-style: normal; font-size: 0.75em; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plugsim__btn {
  padding: 0.62em 0.7em;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-size: 0.88em;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  transition: background-color 200ms ease, transform 200ms ease;
}
/* 按下那一下：底色压深、微微缩小，再放一圈扩散出去的光环（光环只播一次） */
.plugsim__btn.is-press { background: var(--brand-deep); transform: scale(0.97); animation: plugpress 700ms ease-out; }
@keyframes plugpress {
  from { box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 0.32); }
  to { box-shadow: 0 0 0 1em rgb(var(--brand-rgb) / 0); }
}
.plugsim__report { display: flex; flex-direction: column; }
.plugsim__cover { margin: 0 0 0.25em; font-size: 0.92em; font-weight: 600; color: var(--fg-strong); }
.plugr {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.34em 0;
  border-bottom: 1px solid var(--border-soft);
  transition: opacity 300ms ease, transform 300ms ease;
}
.plugr:last-of-type { border-bottom: 0; }
.plugr__k { flex: none; font-size: 0.88em; font-weight: 600; color: var(--fg-strong); }
.plugr__v { flex: 1; min-width: 0; font-size: 0.82em; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plugr__t { flex: none; padding: 0.1em 0.45em; border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink); font-size: 0.68em; }
.plugr--skip .plugr__t { background: transparent; border: 1px dashed var(--paper-300); color: var(--fg-subtle); }
.plugsim__note { margin: 0.45em 0 0; font-size: 0.78em; line-height: 1.5; color: var(--fg-subtle); }
.plugsim__undo {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.5em 1.1em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--fg-strong);
  font-size: 0.85em;
  font-weight: 600;
}
.plugsim__cover, .plugsim__note, .plugsim__undo { transition: opacity 300ms ease; }

/* 「还没轮到」的那一半：只有 JS 加上 .plugsim--anim 之后才藏。
   藏与露写在一处（:not 选择器说的是「没点亮、又不是那格本来就有内容的」），
   不靠两条规则的先后顺序压权重 —— 谁在文件后面谁赢这种账太难维护。 */
.plugsim--anim .plugf:not(.is-on):not(.plugf--has) .plugf__v { opacity: 0; transform: translateY(0.2em); }
.plugsim--anim .plugr:not(.is-on) { opacity: 0; transform: translateX(0.5em); }
.plugsim--anim .plugsim__cover:not(.is-on),
.plugsim--anim .plugsim__note:not(.is-on),
.plugsim--anim .plugsim__undo:not(.is-on) { opacity: 0; }

/* 轮到这一格：底色闪一下（keyframes 只播一次，落回常态），值是淡入。
   邮箱那格本来就有内容，闪的是虚线边——意思是「看见了，但没动它」。 */
.plugf.is-on .plugf__box { animation: plugflash 1.1s ease-out; }
.plugf--has.is-on .plugf__box { animation: plugskip 1.1s ease-out; }
.plugf.is-on .plugf__v { opacity: 1; transform: none; }
.plugf--has .plugf__v { opacity: 1; transform: none; color: var(--fg-subtle); }
@keyframes plugflash { from { background-color: var(--brand-tint); border-color: var(--brand-tint-2); } }
@keyframes plugskip { 50% { border-color: var(--brand-tint-2); border-style: dashed; } }

/* [hidden] 必须显式写：.plugdemo__video 与 .plugsim 都有自己的 display，
   少了这两条，没有视频时播放器会与演示画面一起出现 */
.plugdemo__video[hidden], .plugsim[hidden] { display: none; }

/* 四步：窄屏 2 列 / 单列（见文件末尾的响应式） */
.plugsteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.plugsteps li { padding: 18px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--paper-50); }
.plugsteps__n {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.plugsteps b { display: block; font-size: 1rem; color: var(--fg-strong); }
.plugsteps p { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--fg-muted); }
.plugsteps code {
  padding: 1px 5px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--paper-100);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-strong);
}

/* 下载那一行：按钮 + 一句「还没上架商店」的实话 */
.plug__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(26px, 3vw, 36px);
}
.plug__cta .body-xs { margin: 0; max-width: 66ch; }

@media (max-width: 980px) {
  .plug { grid-template-columns: 1fr; }
  .plug__intro { max-width: none; }
  .plugsteps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .plugsteps { grid-template-columns: 1fr; }
}

/* ---------- 44. 智能体演示（求职体验页 #agents）：两张工作台示意图 + 说明 + 一颗去工作台的按钮 ---------- */
/* 这一节只做介绍，两行都是「示意图在上、说明在下」，不做左右分栏。
   图不是截图，是画在 DOM 里的（.wbsim）：那台工作台是 11–13 px 的密集界面，截图放到网页上
   总要缩一道、在高分屏上还要再放大一次，怎么拍都是糊的；画出来的字是真文字，缩放到哪一档
   都清晰，改文案也不必重拍。图注里写「示意图」就是这个意思。
   整块按框宽缩放（字号用 cqw，照插件那节的 .plugsim 口径，只是这里字号更大：桌面 12.5px 封顶、
   窄屏 8px 兜底），里面一律 em，所以桌面 / 平板 / 手机三档都不用另调。cqw 要有个祖先容器，
   所以容器是 figure 本身（content box 和下面那块一样宽，见 .agentdemo__fig）。
   结构与文案照工作台现况写（experience/agents/index.html 与 /assets/js 的 agents-data / chat / recruit）；
   招聘信息表里那两行是示意，真数据会随同步过期，别换成真公司（口径见 services/site/README.md）。
   框用白底、细边框、抬起的阴影，压在 paper-100 的浅灰底上才立得起来；图注与说明守站内行宽。
   按钮那行的排法与插件那节一致（对照 .plug__cta），不另造视觉。 */
.agentdemo__rows { display: grid; gap: clamp(40px, 5vw, 72px); }
.agentdemo__row { display: grid; gap: clamp(20px, 2.6vw, 30px); }

.agentdemo__fig { margin: 0; container-type: inline-size; }   /* 容器只为下面那张图的 cqw 服务 */
.agentdemo__fig figcaption {
  margin-top: 12px;
  max-width: 78ch;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--fg-muted);
}

/* —— 示意图本体（.wbsim）：一扇工作台的窗口，两块屏共用那条顶栏 —— */
.wbsim {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  font-size: 12px;                             /* 不认 cqw 的浏览器退回这一行 */
  font-size: clamp(8px, 1.12cqw, 12.5px);
  line-height: 1.5;
  color: var(--fg-strong);
}

.wbsim__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 0.62em 0.9em;
  background: var(--paper-100);
  border-bottom: 1px solid var(--border-soft);
}
.wbsim__name { font-weight: 600; letter-spacing: -0.01em; }
.wbsim__tabs { display: flex; gap: 0.34em; }
.wbsim__tab { padding: 0.24em 0.8em; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 0.92em; color: var(--fg-muted); }
.wbsim__tab.is-on { border-color: var(--brand); background: var(--brand); font-weight: 600; color: #fff; }

/* 第一块屏：七环节路径 + 左栏「我的智能体」 + 右边小助手的工作区 */
.wbsim__path { padding: 0.85em 0.95em 0.95em; background: var(--paper-50); border-bottom: 1px solid var(--border-soft); }
.wbsim__cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5em; margin: 0 0 0.7em; }
.wbsim__cap b { font-size: 0.9em; }
.wbsim__cap span { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.04em; color: var(--fg-subtle); }

/* 轴：每节一个点，点下面才是编号、名字与挂着的智能体；连线从本节点连到下一个节点，
   末节不画，所以整条线正好停在 07 那个点上，跟工作台上那条时间轴一个样子 */
.wbsim__steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.7em; }
.wbsim__step { position: relative; display: grid; gap: 0.2em; align-content: start; padding-top: 0.95em; min-width: 0; }
.wbsim__step::before,
.wbsim__step::after { content: ""; position: absolute; top: 0.28em; }
.wbsim__step::before { left: 0; width: 0.58em; height: 0.58em; border-radius: 50%; background: var(--brand); }
.wbsim__step::after { left: 0.58em; right: -0.7em; height: 1px; background: var(--border-soft); }
.wbsim__step:last-child::after { display: none; }
.wbsim__step.is-off::before { background: var(--paper-300); }
.wbsim__step.is-off b,
.wbsim__step.is-off .wbsim__no { font-weight: 500; color: var(--fg-muted); }   /* 要读学员端的几节压暗，能跑的四处才跳得出来 */
.wbsim__no { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.06em; color: var(--fg-subtle); }
.wbsim__steps b { font-size: 0.95em; }
.wbsim__an { font-size: 0.72em; line-height: 1.4; color: var(--fg-subtle); }
.wbsim__ags { display: flex; flex-wrap: wrap; gap: 0.24em; }
.wbsim__ags em {
  padding: 0.06em 0.34em;
  border: 1px solid var(--brand-tint-2); border-radius: var(--radius-sm);
  background: var(--brand-tint);
  font-family: var(--font-mono); font-size: 0.72em; font-style: normal; color: var(--brand-ink);
}
/* 同一节里要登录的那一枚（03 简历里的简历精修，与 A05 并排）：工作台上它是带虚线边、
   不带编号的一颗，这里跟着画 —— 反过来，实线的那几颗才是本机就能跑的。 */
.wbsim__ags em.is-stu { border-style: dashed; border-color: var(--border); background: none; color: var(--fg-subtle); }

.wbsim__body { display: grid; grid-template-columns: 15.5em minmax(0, 1fr); }
.wbsim__rail { display: grid; gap: 0.34em; align-content: start; padding: 0.85em 0.8em; background: var(--paper-50); border-right: 1px solid var(--border-soft); }
.wbsim__railhd { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; margin: 0 0 0.3em; }
.wbsim__railhd b { font-size: 0.95em; }
.wbsim__railhd span { font-family: var(--font-mono); font-size: 0.68em; color: var(--fg-subtle); }
.wbsim__ag { display: flex; align-items: center; gap: 0.45em; padding: 0.34em 0.5em; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--paper); }
.wbsim__ag b { flex: none; padding: 0.04em 0.3em; border-radius: var(--radius-sm); background: var(--paper-200); font-family: var(--font-mono); font-size: 0.68em; color: var(--fg-muted); }
.wbsim__ag span { min-width: 0; font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbsim__ag.is-on { border-color: var(--brand); background: var(--brand-tint); }
.wbsim__ag.is-on b { background: var(--brand); color: #fff; }
.wbsim__ag.is-on span { font-weight: 600; color: var(--brand-ink); }
/* 要登录的那一张（03 里的简历精修）：同一条记号 —— 虚线边 + 一枚「要登录」，没有编号位
   （工作台那一侧也不写它的编号）。实线的才是本机就能跑的。 */
.wbsim__ag.is-stu { border-style: dashed; background: var(--paper-50); }
.wbsim__ag.is-stu > span:first-child { color: var(--fg-muted); }
.wbsim__tag { flex: none; margin-left: auto; padding: 0.04em 0.4em; border: 1px dashed var(--border); border-radius: 999px; font-size: 0.62em; color: var(--fg-subtle); }
.wbsim__note { margin: 0.35em 0 0; font-size: 0.72em; line-height: 1.5; color: var(--fg-subtle); }
.wbsim__more { margin: 0.2em 0 0; font-size: 0.8em; font-weight: 600; color: var(--brand-ink); }

.wbsim__panel { display: grid; gap: 0.5em; align-content: start; padding: 0.85em 0.95em; }
.wbsim__panelhd { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; margin: 0 0 0.15em; }
.wbsim__panelhd b { font-size: 1em; }
.wbsim__panelhd span { padding: 0.1em 0.5em; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-mono); font-size: 0.68em; color: var(--fg-muted); }
.wbsim__msg { display: flex; align-items: flex-start; gap: 0.5em; padding: 0.45em 0.6em; border-radius: var(--radius); background: var(--paper-100); font-size: 0.88em; }
.wbsim__msg.is-me { background: var(--brand-tint); color: var(--brand-ink); }
.wbsim__who { flex: none; font-weight: 600; }
.wbsim__why { margin: 0; padding-left: 0.6em; border-left: 2px solid var(--border-soft); font-size: 0.78em; line-height: 1.55; color: var(--fg-muted); }
.wbsim__composer { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: 0.2em 0 0; padding: 0.42em 0.5em 0.42em 0.7em; border: 1px solid var(--border); border-radius: 999px; font-size: 0.82em; color: var(--fg-subtle); }
.wbsim__send { flex: none; padding: 0.16em 0.75em; border-radius: 999px; background: var(--brand); font-size: 0.9em; font-weight: 600; color: #fff; }

/* 第二块屏：三排筛选 + 计数条 + 那张一行一家公司的表。表比窄屏宽，所以给它自己一条横向滚动
   （工作台上那张表也是这样滚的）；min-width 用 em，跟着字号一起缩，行里就不必再断点。 */
.wbsim__filters { display: grid; gap: 0.5em; padding: 0.85em 0.95em; background: var(--paper-50); border-bottom: 1px solid var(--border-soft); }
.wbsim__frow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.32em 0.45em; margin: 0; }
.wbsim__flabel { font-size: 0.82em; font-weight: 600; color: var(--fg-muted); }
.wbsim__chip { padding: 0.16em 0.55em; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); font-size: 0.78em; color: var(--fg-muted); }
.wbsim__chip.is-on { border-color: var(--brand); background: var(--brand-tint); font-weight: 600; color: var(--brand-ink); }
.wbsim__fmore { font-size: 0.72em; color: var(--fg-subtle); }
.wbsim__fq { display: flex; align-items: center; gap: 0.4em; flex: 1 1 13em; min-width: 0; padding: 0.3em 0.7em; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); font-size: 0.78em; color: var(--fg-subtle); }
.wbsim__fq b { font-weight: 600; color: var(--fg-muted); }
.wbsim__fsel { padding: 0.3em 0.7em; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); font-size: 0.78em; color: var(--fg-muted); }
.wbsim__freset { margin-left: auto; padding: 0.3em 0.7em; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--paper-100); font-size: 0.78em; color: var(--fg-muted); }
.wbsim__count { margin: 0; padding: 0.62em 0.95em; border-bottom: 1px solid var(--border-soft); font-size: 0.82em; color: var(--fg-muted); }
.wbsim__count b { color: var(--fg-strong); }

.wbsim__table { overflow-x: auto; }
.wbsim__row,
.wbsim__detail { min-width: 60em; }
.wbsim__row { display: grid; align-items: center; gap: 0.5em; padding: 0.5em 0.95em; border-bottom: 1px solid var(--border-soft); font-size: 0.82em;
  grid-template-columns: minmax(6.5em, 1fr) 5.4em minmax(8em, 1.6fr) 6.6em 4.6em 4.4em 4.6em 5.6em 7.2em 2.6em; }
.wbsim__row:last-child { border-bottom: 0; }
.wbsim__row.is-head { padding-block: 0.45em; background: var(--paper-100); font-size: 0.74em; font-weight: 600; color: var(--fg-muted); }
.wbsim__row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbsim__row .is-sort i { font-style: normal; color: var(--fg-subtle); }
.wbsim__row .is-go { text-align: center; color: var(--fg-subtle); }
.wbsim__ind { padding: 0.1em 0.4em; border-radius: 999px; background: var(--paper-200); font-size: 0.92em; font-style: normal; color: var(--fg-muted); }
.wbsim__lk { margin-right: 0.5em; color: var(--brand-ink); }

.wbsim__detail { display: grid; gap: 0.4em; padding: 0.7em 0.95em 0.8em; background: var(--paper-50); border-bottom: 1px solid var(--border-soft); }
.wbsim__jd { display: flex; gap: 0.6em; margin: 0; font-size: 0.78em; line-height: 1.55; color: var(--fg-muted); }
.wbsim__jd b { flex: none; color: var(--fg-strong); }
.wbsim__ask { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em 0.7em; margin: 0.15em 0 0; }
.wbsim__askbtn { padding: 0.28em 0.8em; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--brand-tint); font-size: 0.82em; font-weight: 600; color: var(--brand-ink); }
.wbsim__tip { font-size: 0.74em; color: var(--fg-subtle); }

.agentdemo__copy {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
}
.agentdemo__copy .h3 { margin: 0 0 10px; }
.agentdemo__copy p { font-size: 0.9375rem; line-height: 1.72; color: var(--fg-muted); }

.agentdemo__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(30px, 3.6vw, 44px);
}
.agentdemo__cta .body-xs { margin: 0; max-width: 66ch; }

/* 窄屏：说明回到单栏，三颗要点跟在那段话下面 */
@media (max-width: 860px) {
  .agentdemo__copy { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- 45. 法律文件（/terms/ 用户协议、/privacy/ 隐私政策、
   插件隐私政策 /products/apply/privacy/） ----------
   这几页只有正文：一个 hero 抬头，下面一列限宽的 `.legal`。样式按「读」来调——
   行高比站内正文松一档、段距固定，标题不用品牌色，免得读成营销文案。
   页脚那三颗链接、以及登录弹窗里的协议行，落到这里；改法见 site/README.md。
   本节末尾那层大弹窗（.legalmodal）现在装两种东西：协议正文，以及学员端的「我的简历 /
   我的投递」（头像菜单那两颗，--app 一档尺寸）—— 两种都往地址上带 embed=1，见那两段。

   列表的标记必须**原地补回来**：站点的 reset（§2）把 ul/ol 清成了无符号无缩进，
   而这几页通篇靠条目分点，读不出层级就没法引用，所以下面 list-style 那两条不是装饰。 */
.legal { max-width: 78ch; }
.legal__meta { margin-top: 16px; font-size: 0.875rem; color: var(--fg-subtle); }
.legal h2 { margin: 46px 0 14px; font-size: 1.125rem; font-weight: 600; color: var(--fg-strong); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 26px 0 10px; font-size: 1rem; font-weight: 600; color: var(--fg-strong); }
.legal p { margin: 0 0 14px; font-size: 0.9375rem; line-height: 1.85; color: var(--fg-muted); }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 1.4em; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; padding-left: 1.6em; }
.legal li { margin: 7px 0; font-size: 0.9375rem; line-height: 1.8; color: var(--fg-muted); }
.legal li::marker { color: var(--brand); }
.legal strong { color: var(--fg-strong); }
.legal code { padding: 1px 5px; border-radius: 5px; background: var(--paper-100); font-family: var(--font-mono); font-size: 0.875em; color: var(--fg-strong); overflow-wrap: anywhere; }
.legal a { color: var(--brand-ink); text-decoration: underline; }
.legal__note {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
}
.legal__note p:last-child { margin-bottom: 0; }

/* 窄屏：正文那两档字号往上收一点（手机上一行放不下几个字），段前距也跟着缩 */
@media (max-width: 620px) {
  .legal h2 { margin-top: 40px; }
  .legal p, .legal li { font-size: 0.9688rem; }
  .legal__note { padding: 16px; }
}

/* —— 大窗口弹窗（.legalmodal，DOM 由 site.js 第 8.7 节建）——
   比登录弹窗（400px 那一块）宽得多：它装的是整篇正文或整整一页应用。
   标题栏 + 一块撑满剩余高度的 iframe，高度顶到视口留 24px 边。
   类名是最早的名字（当初只为协议正文而建），学员端那两页共用这一层，尺寸见 --app。 */
.legalmodal {
  position: fixed;
  inset: 0;
  z-index: 320;                 /* 压在登录弹窗（300）之上：协议正是从那里点开的 */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(7 10 18 / 0.55);
}
.legalmodal.is-open { display: flex; }

.legalmodal__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  height: calc(100vh - 48px);
  max-height: 820px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: 0 24px 60px rgb(7 10 18 / 0.28);
}

.legalmodal__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px 15px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.legalmodal__title { font-size: 1.0625rem; font-weight: 600; color: var(--fg-strong); }
.legalmodal__close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg-subtle);
}
.legalmodal__close:hover { border-color: var(--border); color: var(--fg-strong); }

.legalmodal__frame { flex: 1; width: 100%; border: 0; background: var(--paper); }

/* 学员端那两页（我的简历 / 我的投递）：同一层弹窗，装的是整整一页应用，所以比协议正文
   再宽一档，也不封顶 820px 的高 —— 仪表盘自己就是一张 1400px 宽的板子（SPA 的
   .page__inner--board），面板小了卡片网格会塌回一列。窄屏那档（<=640px）不用改：
   下面那条媒体查询本来就把弹窗铺到只剩 12px 边。 */
.legalmodal--app .legalmodal__panel {
  max-width: 1280px;
  max-height: none;
}

@media (max-width: 640px) {
  .legalmodal { padding: 12px; }
  .legalmodal__panel { height: calc(100vh - 24px); max-height: none; border-radius: var(--radius-lg); }
  .legalmodal__bar { padding: 12px 12px 12px 16px; }
}

/* —— embed=1：这两页被阅读弹窗的 iframe（或 apply 侧同一个 iframe）打开时，
   收起站壳（导航、页脚）并把抬头压扁，只留「标题 + 版本行 + 正文」，
   在 iframe 里看起来就是一篇文档。标记加在 <html> 上，由那两页 <head> 里的
   内联脚本写上（在样式之前，所以不会先闪一下导航）；整页直接打开时不带这个
   参数，一切照旧。 */
html.is-embed .nav,
html.is-embed .footer { display: none; }
html.is-embed .hero--compact { padding-block: 34px 14px; }
html.is-embed .section--tight { padding-block: 0 56px; }

/* ---------- 46. 登录态（导航右上角的头像菜单） ---------- */
/* 登录之后，13 页导航里那两颗 <a data-auth>（桌面在 .nav__right，移动在
   .nav__mobile-cta）由 site.js 原地换成这一块「头像 + 菜单」；退出再换回来。
   访客与禁用 JS 时这块根本不出现，导航照旧是「注册 / 登录」那颗链接 ——
   状态由 GET /apply/api/me 问出来，见 site.js 第 8.5 节。

   菜单本体复用第 6 节的 .nav__dropdown（深色底、圆角、阴影、右侧对齐），
   只把「悬停展开」换成点击展开：.navuser.is-open。 */
.navuser { position: relative; }

.navuser__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.navuser__btn:hover { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.07); }
.navuser.is-open .nav__caret { transform: rotate(225deg) translateY(-1px); }

.navuser__avatar {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1;
}

/* 账号名可能很长：单行截断，别把导航挤歪 */
.navuser__name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.navuser__menu { min-width: 232px; }
.navuser.is-open .navuser__menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* 「退出登录」与菜单里的 <a> 同形：只是它是按钮，不是链接 */
.navuser__out {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink-300);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.navuser__out:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* 移动抽屉里换成一整行：菜单就地展开（static），不浮在页面上 ——
   抽屉里做绝对定位的下拉会和它自己的滚动条打架。 */
.nav__mobile .navuser { width: 100%; }
.nav__mobile .navuser__btn { width: 100%; justify-content: flex-start; }
.nav__mobile .navuser__menu {
  position: static;
  display: none;
  min-width: 0;
  margin-top: 8px;
  box-shadow: none;
}
.nav__mobile .navuser.is-open .navuser__menu { display: block; }

/* ---------- 41. 扩展隐私政策（/products/apply/privacy/） ---------- */
/* 法律文本：单栏限宽，段落与列表都比普通正文松一档。站点的 reset 把 ul/ol 清成了
   无符号无缩进（见 §2），所以这里要把标记补回来 —— 正文里的条目读不出层级就没法引用。 */
.legal { max-width: 760px; }
.legal > h2 {
  margin-top: 54px;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
}
.legal > h2:first-child { margin-top: 0; }
.legal h3 {
  margin-top: 30px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg-strong);
}
.legal p {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.82;
  color: var(--fg-muted);
}
.legal h2 + p,
.legal h3 + p { margin-top: 12px; }
.legal strong { color: var(--fg-strong); font-weight: 600; }
.legal a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--brand-hover); }
.legal code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--paper-100);
  color: var(--fg-strong);
  /* 只在实在放不下时才断：break-all 会把 http://localhost 拆成 http://localh / ost */
  overflow-wrap: anywhere;
}
.legal ul, .legal ol { margin-top: 16px; padding-left: 1.4em; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; padding-left: 1.6em; }
.legal li {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--fg-muted);
}
.legal li + li { margin-top: 9px; }
.legal li::marker { color: var(--brand); }
.legal li > ul, .legal li > ol { margin-top: 9px; }
/* 一段被拎出来的提醒（传输安全 / 不做的事） */
.legal__note {
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand-tint);
}
.legal__note p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.7; }
.legal__note p:first-child { margin-top: 0; }
.legal__note strong { color: var(--brand-ink); }
/* 生效日期那一行：等宽小字，与正文拉开一档 */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
}

@media (max-width: 620px) {
  .legal > h2 { margin-top: 40px; }
  .legal p, .legal li { font-size: 0.9688rem; }
  .legal__note { padding: 16px; }
}