/* ==========================================================================
   云枢求职 · 官网共享样式（2026-10-09 建立）
   一个站点一份 token：颜色、圆角、阴影、动效只改这里，5 个页面共用。

   主题：dark（默认）/ aurora（极光渐变）/ light（浅色简洁）/ paper（纸感极简）
   形状规则（全局唯一，不许各处乱来）：
     卡片与面板 18px ｜ 按钮与输入框 12px ｜ 状态胶囊与 chip 999px
   动效：只用 transform / opacity，全部受 prefers-reduced-motion 控制。
   ========================================================================== */

/* ---------- 主题 1：暗黑科技（默认）：近黑底 + 电网格 + 电蓝霓虹 ---------- */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* 旧变量名别名：页面里历史内联样式还在用 --primary / --panel，一次映射过来，别的地方不用改 */
  --primary: var(--accent);
  --primary-text: var(--cta-text);
  --panel: var(--surface);
  --panel2: var(--surface-2);
  --radius: var(--r-card);
  --card-shadow: var(--shadow-1);
  --btn-shadow: 0 10px 26px color-mix(in srgb, var(--cta-to) 32%, transparent);
  --font-head: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  /* 2026-10-10 形状统一（用户：卡片/按钮跟背景不搭、很别扭）：
     全站只留三档圆角 —— 卡片 16 / 按钮与输入 10 / 小标签 8，胶囊仍是 999。
     （审计：改前页面上同时有 8 种圆角：6/8/10/12/16/18/20 + 胶囊） */
  --r-card: 16px;
  --r-btn: 10px;
  --r-input: 10px;
  --r-sm: 8px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 2026-10-10 配色重排（用户：颜色搭配很奇怪）：
     ① 底色/卡片改成**中性冷灰**（原来的六个海军蓝层次叠在一起像"蓝汤"）；
     ② 强调色**只留一个蓝**（--accent），把原来的青（#22d3ee）换成同色相的浅蓝（--accent-2），
        页面不再出现"蓝 + 青"两个色相同时当填充；
     ③ 卡片顶部高光从"蓝光"改成"白光"（中性），蓝色只留给可点/选中/关键数字。 */
  /* 2026-10-10（用户：全黑不好看）：底色从近黑抬到"深墨蓝"，再靠两层照片虚影给层次 */
  --bg: #080b13;
  --bg-2: #0d1220;
  --surface: #0f131c;
  --surface-2: #141924;
  --surface-3: #1a202c;
  --line: #222836;
  --line-2: #303847;
  --text: #edf1f8;
  --text-2: #c3cad7;
  --muted: #8c94a4;
  --accent: #4c8dff;
  --accent-2: #7fb2ff;
  --accent-text: #a9c9ff;
  --accent-soft: rgba(76, 141, 255, 0.12);
  --accent-line: rgba(96, 165, 255, 0.36);
  /* 按钮渐变压深一档：白字在渐变两端都要 ≥4.5:1（#3b82f6 那一端只有 3.68:1，达不到 AA） */
  --cta-from: #1e5be0;
  --cta-to: #2a6ef0;
  --cta-text: #ffffff;
  --halo-1: rgba(59, 130, 246, 0.34);
  --halo-2: rgba(96, 165, 250, 0.2);
  --ok: #2bd4a0;
  --warn: #f2c14e;
  --bad: #f8718f;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 4, 14, 0.6);
  --shadow-2: 0 30px 70px rgba(0, 4, 14, 0.7);
  --ring: rgba(126, 184, 255, 0.7);
  --skew: rgba(255, 255, 255, 0.04);
  /* 暗黑科技专属：电网格与霓虹光 */
  --grid-line: rgba(122, 152, 196, 0.06);
  --grid-size: 56px;
  --neon-1: rgba(76, 141, 255, 0.42);
  --neon-2: rgba(127, 178, 255, 0.24);
  --card-top: rgba(255, 255, 255, 0.05);
  --fx-opacity: 1;
  --glow-strength: 1;
}

/* ---------- 主题 2：霓虹极光（紫青撞色，用户可切） ---------- */
html[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #050718;
  --bg-2: #090e26;
  --surface: #0d1433;
  --surface-2: #131c45;
  --surface-3: #1b2657;
  --line: #212c5e;
  --line-2: #33417c;
  --text: #eef2ff;
  --text-2: #cdd6f5;
  --muted: #99a6d0;
  --accent: #8b5cf6;
  --accent-2: #2dd4bf;
  --accent-text: #c4b5fd;
  --accent-soft: rgba(139, 92, 246, 0.18);
  --accent-line: rgba(139, 92, 246, 0.4);
  --cta-from: #5b34d6;
  --cta-to: #7c3aed;
  --cta-text: #ffffff;
  --halo-1: rgba(139, 92, 246, 0.46);
  --halo-2: rgba(45, 212, 191, 0.34);
  --ok: #2ee6b0;
  --warn: #ffcf5c;
  --bad: #ff7a99;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 44px rgba(4, 6, 24, 0.55);
  --shadow-2: 0 30px 70px rgba(4, 6, 24, 0.6);
  --ring: rgba(196, 181, 253, 0.6);
  --skew: rgba(255, 255, 255, 0.04);
  --grid-line: rgba(139, 92, 246, 0.09);
  --grid-size: 56px;
  --neon-1: rgba(139, 92, 246, 0.55);
  --neon-2: rgba(45, 212, 191, 0.45);
  --card-top: rgba(196, 181, 253, 0.12);
  --fx-opacity: 1;
  --glow-strength: 1;
}

/* ---------- 主题 3：浅色简洁（冷白 + 品牌蓝） ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f9fd;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f5fb;
  --surface-3: #e9eff9;
  --line: #e2e8f3;
  --line-2: #d2dbec;
  --text: #0f1725;
  --text-2: #34405a;
  --muted: #5b6880;
  --accent: #1d6fe0;
  --accent-2: #0891b2;
  --accent-text: #1554d1;
  --accent-soft: rgba(29, 111, 224, 0.1);
  --accent-line: rgba(29, 111, 224, 0.26);
  --cta-from: #1554d1;
  --cta-to: #1d6fe0;
  --cta-text: #ffffff;
  --halo-1: rgba(29, 111, 224, 0.14);
  --halo-2: rgba(8, 145, 178, 0.1);
  --ok: #0f9d6e;
  --warn: #b5760a;
  --bad: #d64545;
  --shadow-1: 0 1px 2px rgba(16, 32, 64, 0.04), 0 14px 30px rgba(16, 32, 64, 0.08);
  --shadow-2: 0 24px 56px rgba(16, 32, 64, 0.12);
  --ring: rgba(29, 111, 224, 0.45);
  --skew: rgba(15, 23, 37, 0.035);
  --grid-line: rgba(29, 111, 224, 0.06);
  --grid-size: 56px;
  --neon-1: rgba(29, 111, 224, 0.28);
  --neon-2: rgba(8, 145, 178, 0.22);
  --card-top: rgba(29, 111, 224, 0.06);
  --fx-opacity: 0.42;
  --glow-strength: 0.35;
}

/* ---------- 主题 4：纸感极简（米白 + 墨色，刻意单色，唯一例外） ---------- */
html[data-theme="paper"] {
  color-scheme: light;
  --bg: #f6f4ef;
  --bg-2: #fffdf8;
  --surface: #fffdf8;
  --surface-2: #f1ede4;
  --surface-3: #e8e2d6;
  --line: #ddd6c8;
  --line-2: #c9c0ae;
  --text: #16150f;
  --text-2: #3b382e;
  --muted: #6b6555;
  --accent: #1f2937;
  --accent-2: #4b5563;
  --accent-text: #111827;
  --accent-soft: rgba(31, 41, 55, 0.08);
  --accent-line: rgba(31, 41, 55, 0.22);
  --cta-from: #16150f;
  --cta-to: #33312a;
  --cta-text: #fffdf8;
  --halo-1: rgba(31, 41, 55, 0.06);
  --halo-2: rgba(107, 101, 85, 0.06);
  --ok: #2f7d52;
  --warn: #96660f;
  --bad: #b03a3a;
  --shadow-1: 0 1px 0 rgba(22, 21, 15, 0.04), 0 10px 24px rgba(22, 21, 15, 0.06);
  --shadow-2: 0 20px 44px rgba(22, 21, 15, 0.1);
  --ring: rgba(31, 41, 55, 0.4);
  --skew: rgba(22, 21, 15, 0.03);
  --font-head: "Songti SC", "SimSun", Georgia, serif;
  --grid-line: rgba(31, 41, 55, 0.05);
  --grid-size: 64px;
  --neon-1: rgba(31, 41, 55, 0.16);
  --neon-2: rgba(107, 101, 85, 0.14);
  --card-top: rgba(31, 41, 55, 0.04);
  --fx-opacity: 0.3;
  --glow-strength: 0;
}

/* ============================ 基础 ============================ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  /* 底色不做"一整块黑"：上深墨蓝 → 中底部近黑，跟照片虚影叠出层次 */
  background-color: var(--bg);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, #0e1830) 0%, var(--bg) 34%, #06080f 100%);
  background-attachment: fixed;
}

body {
  position: relative;
  z-index: 0;
  margin: 0;
  background-color: transparent;
  color: var(--text);
  /* 版式对齐（2026-10-09 量参考站）：正文 16px / 行高 24px；颜色仍用我们自己的 */
  font: 16px/1.5 "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================ 暗黑科技：动态背景层 ============================
  三层全部 position:fixed + pointer-events:none，只做 transform / opacity，
  滚动时不重绘；prefers-reduced-motion 下由文件末尾的降级块整体冻住。
  动的理由：① 氛围（暗黑科技的空间感）② 层级（顶部光带把视线压回首屏）
  ========================================================================== */

/* 2026-10-10（用户：全黑不好看、背景可以配动态图片虚影）：
   背景改成「两层照片虚影 + 极光光晕 + 顶部/底部渐隐」——
   照片取首屏那 5 张图（/hero/hero-*.jpg），重度模糊 + 低透明度 + 极慢位移，
   既给出"空间/层次"又不抢内容；下面再压一层底色保证正文对比度。 */
body::before {
  content: "";
  position: fixed;
  inset: -25% -15%;
  z-index: -3;
  pointer-events: none;
  /* 上左：雪山那张；下右：森林那张 —— 两块虚影错开，形成斜向的光影层次 */
  background-image:
    linear-gradient(200deg, color-mix(in srgb, var(--bg) 62%, transparent) 34%, color-mix(in srgb, var(--bg) 88%, transparent) 66%),
    url("/hero/hero-1.jpg"),
    url("/hero/hero-2.jpg");
  background-size: 100% 100%, 78% 78%, 86% 86%;
  background-position: center, 6% 2%, 96% 92%;
  background-repeat: no-repeat;
  filter: blur(58px) saturate(135%);
  opacity: calc(var(--fx-opacity) * 0.5);
  will-change: transform;
  animation: ghostDrift 48s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* 极光光晕 + 顶部/底部渐隐（压住虚影，保证文字可读） */
  background:
    radial-gradient(46% 38% at 18% 8%, var(--halo-1), transparent 68%),
    radial-gradient(42% 36% at 86% 4%, var(--halo-2), transparent 66%),
    radial-gradient(54% 44% at 58% 96%, var(--halo-1), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 52%, transparent), transparent 24%),
    radial-gradient(130% 76% at 50% 118%, color-mix(in srgb, var(--bg) 94%, transparent), transparent 62%);
  opacity: calc(var(--fx-opacity) * 0.9);
  will-change: transform;
  animation: auroraDrift 30s ease-in-out infinite alternate;
}

.fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--fx-opacity);
}

/* 电网格：暗黑科技的底纹，顶部亮、往下淡出 */
.fx::before {
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(130% 78% at 50% -6%, #000 24%, transparent 76%);
  mask-image: radial-gradient(130% 78% at 50% -6%, #000 24%, transparent 76%);
}

/* 光标光斑：跟着指针走的冷色光，只在这一层，不挡点击 */
.fx i {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    640px circle at var(--px, 50%) var(--py, -10%),
    var(--neon-1),
    color-mix(in srgb, var(--neon-2) 55%, transparent) 30%,
    transparent 66%
  );
  opacity: calc(0.62 * var(--glow-strength));
  transition: opacity 0.4s var(--ease, ease);
}

/* 扫描光带：18 秒从顶部扫到底部一次，制造"仪表在工作"的感觉 */
.fx::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -30vh;
  height: 42vh;
  background: linear-gradient(90deg, transparent 8%, var(--neon-1) 46%, var(--neon-2) 58%, transparent 92%);
  filter: blur(36px);
  opacity: 0;
  will-change: transform, opacity;
  animation: scanSweep 18s linear infinite;
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, 2.5%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-1.5%, 3%, 0) scale(1.02);
  }
}

/* 背景照片虚影：48 秒一轮，位移很慢，像"远处有光在挪" */
@keyframes ghostDrift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) scale(1.04);
  }
  50% {
    transform: translate3d(2.5%, 2%, 0) scale(1.1);
  }
  100% {
    transform: translate3d(-1%, 2.5%, 0) scale(1.06);
  }
}

@keyframes scanSweep {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  8% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    transform: translate3d(0, 140vh, 0);
    opacity: 0;
  }
}

@keyframes edgeTravel {
  from {
    transform: translate3d(-120%, 0, 0);
  }
  to {
    transform: translate3d(560%, 0, 0);
  }
}

@keyframes ctaBreath {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.99);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderSpin {
  to {
    --border-angle: 360deg;
  }
}

@keyframes progressGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes gridDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -7%, 0);
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gradSweep {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* 顶部滚动进度条：一条 2px 霓虹线，随页面滚动从 0 长到 100% */
html::after {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 45;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px -2px var(--neon-2);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: calc(0.95 * var(--glow-strength));
  pointer-events: none;
}

/* 滚动驱动动画：Chrome 支持；不支持的浏览器就保持静态（进度条留在 0） */
@supports (animation-timeline: scroll()) {
  html::after {
    animation: progressGrow linear both;
    animation-timeline: scroll(root block);
  }

  .fx::before {
    animation: gridDrift linear both;
    animation-timeline: scroll(root block);
  }
}

/* 首屏分级入场：badge → 标题 → 副文 → 按钮 → 截图，一路淡入上移 */
.hero .badge,
.hero h1,
.hero .lead,
.hero .cta,
.hero .shot {
  opacity: 0;
  animation: riseIn 0.78s var(--ease, ease) both;
}

.hero h1 {
  animation-delay: 0.08s;
}

.hero .lead {
  animation-delay: 0.16s;
}

.hero .cta {
  animation-delay: 0.24s;
}

.hero .shot {
  animation-delay: 0.32s;
}

/* 标题里的高亮词：渐变光带缓慢来回扫 */
h1 em {
  background-size: 220% 100%;
  animation: gradSweep 7s ease-in-out infinite;
  filter: drop-shadow(0 0 26px var(--neon-1));
}

/* 内容层压在特效层之上 */
nav,
section,
header.hero,
footer,
main {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3,
h4,
.brand {
  font-family: var(--font-head, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.2;
  margin: 20px 0 16px;
  text-shadow: 0 0 46px var(--halo-1);
}

h2 {
  /* 参考站区块标题实测 32px / 700（比它小一眼能看出来） */
  font-size: clamp(23px, 2.9vw, 32px);
  line-height: 1.35;
  margin: 0 0 10px;
}

h3 {
  font-size: 17px;
  margin: 0 0 8px;
}

p {
  margin: 0 0 12px;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

b,
strong {
  font-weight: 700;
}

code,
kbd,
.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
}

/* 键盘焦点：整站统一，鼠标点击不显示描边 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-btn);
}

::selection {
  background: var(--accent-soft);
}

/* ============================ 布局 ============================ */
/* 首页：导航以下的内容整体按 110% 等比放大（用户 2026-10-09）；
   zoom 会让子元素按 1.1 倍排版，同时宽度仍按容器算，所以不会挤出横向滚动 */
body.page-home .page-zoom {
  zoom: 1.1;
}

/* 用户 2026-10-09：「每一个块的间距太挤了」——
   改前实测：相邻两段是 0px（分隔线直接贴在上一段的 CTA 上），参考站段间是 24px；
   这里给首页每一段补上下留白，分隔线上下各留 ~30px。 */
body.page-home .page-zoom > section {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* 「网申助手，应届生都在用」这条只是一行标题，上下收一点，别显得空 */
body.page-home .page-zoom > #helper-strip {
  padding-top: 24px;
  padding-bottom: 6px;
}

/* 用户口径：放大 110% 只针对网页版；窄屏（手机）关掉，否则整页会被撑宽 */
@media (max-width: 900px) {
  body.page-home .page-zoom {
    zoom: 1;
  }
}

.wrap {
  width: 100%;
  /* 2026-10-11 用户：「内容距屏幕左右的距离太宽了，各缩小三分之一，内容等比例放大」
     ＋「这个项目设计要统一」——
     首页有 1.1 倍缩放、其它页没有，所以这里给两套"等价值"，让**渲染出来**的内容边界处处一致：
       非首页（未缩放）：max-width 1540 + 左右 36  →  1440 视口下内容 36 / 76（右边给悬浮条让位）
       首页（×1.1）    ：max-width 1400 + 左右 33  →  渲染 1540 / 36.3（数值见下方 body.page-home 那条）
     改前是"全站一套 1400/33"，非首页会变成内容 1400 宽、左右只剩 20px，和首页对不齐 —— 这就是当时的不一致。 */
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 36px;
}

/* 右缘悬浮条（60 宽 + 右侧 8）会压住内容右边，所以只要它在的宽度区间（≥1280），
   右边多留 36px（33+36=69 → 渲染 76），左边仍是 33 —— 内容会略微偏左，
   换来的是悬浮条不会盖在内容上。 */
@media (min-width: 1280px) {
  .wrap {
    padding-right: 76px;
  }
}

/* 首页：内容整体 ×1.1（body.page-home .page-zoom 的 zoom:1.1），
   所以上面那两个值都要除以 1.1，渲染出来才和非首页一样。 */
body.page-home .wrap {
  max-width: 1400px;
  padding: 0 33px;
}

@media (min-width: 1280px) {
  body.page-home .wrap {
    padding-right: 69px;
  }
}

section {
  position: relative;
  padding: 48px 0;
}

section + section::before,
section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  inset: 0 24px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}

.sub {
  color: var(--muted);
  text-align: center;
  margin: 0 auto 34px;
  max-width: 660px;
}

/* 区块标题与副标题同一对齐方式（整站统一居中，别一个左一个中） */
section > h2 {
  text-align: center;
}

section > h2 + .sub {
  text-align: center;
}

/* ============================ 导航 ============================ */
nav {
  position: sticky;
  top: 0;
  /* 2026-10-11：20 → 60 —— 头像下拉菜单是从导航里"探出去"的浮层，
     原来导航只有 20，被页面里 z-index 40/45 的块盖住了（实测 elementFromPoint 命中的是 HEADER.hero）。
     60 仍然低于登录弹窗 90 / 联系弹窗 95，所以弹窗该盖还是盖。 */
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  height: 64px;
  padding: 0 50px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

nav::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 30%, var(--halo-2) 70%, transparent);
  opacity: 0.75;
  pointer-events: none;
}

/* 导航底边跑光：提示"这是一条活着的状态栏"，同时把视线收回顶栏 */
nav::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 18%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  filter: blur(0.5px);
  opacity: calc(0.55 * var(--glow-strength));
  pointer-events: none;
  will-change: transform;
  animation: edgeTravel 9s linear infinite;
}

nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

nav .brand img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  /* 新 logo 是深色圆盘：加一圈极淡描边，保证在四个主题（尤其深色）里都不糊 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.25);
}

nav .links {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  min-width: 0;
}

nav .links a {
  padding: 7px 11px;
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease, ease), background-color 0.18s var(--ease, ease);
}

nav .links a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

nav .links a.is-strong {
  color: var(--text);
}

/* 导航右侧的动作区：登录 / 注册等按钮（窄屏时跟着链接一起横向滑动） */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* 已登录时导航右上角显示账号。
   2026-10-11 改成"头像 + 下拉菜单"后，这里**不能再有 overflow:hidden / max-width**
   （那是老文字版用来截断账号的）——否则菜单会被裁掉、点开看不见（实测过）。 */
.nav-user {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.btn-sm {
  padding: 8px 15px;
  font-size: 13.5px;
  border-radius: var(--r-btn);
}

/* 导航里的 HOT 角标：只给"最想让人点进去"的两项用 */
.hot-tag {
  margin-left: 5px;
  padding: 1px 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cta-text);
  background-image: linear-gradient(120deg, var(--cta-from), var(--cta-to));
  border-radius: var(--r-pill);
  vertical-align: 1px;
}

/* ============================ 按钮 ============================ */
.btn,
a.btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease), border-color 0.18s var(--ease, ease),
    background-color 0.18s var(--ease, ease), filter 0.18s var(--ease, ease);
}

.btn.primary,
button.primary,
  /* 注：.hg-chip（首屏左栏 7 行分类）与 .rail-item（右缘悬浮条）以前漏在这串排除名单外，
     被全局按钮规则刷成"实心亮蓝药丸"——2026-10-10 配色重排时补上（用户：颜色很奇怪）。
     2026-10-11 又补 .nav-row（头像菜单里的「反馈与建议」那一行是 <button>，同一坑再踩一次：
     实测它被刷成一整条亮蓝）。 */
  button:not(.ghost):not(.dur-chip):not(.theme-opt):not(.theme-fab):not(.company-card):not(.login-tab):not(.link-btn):not(.input-action):not(.pane-switch):not(.hf-item):not(.hf-group):not(.rail-kefu):not(.hb-dot):not(.hg-tab):not(.qs-tab):not(.qs-chip):not(.bp-btn):not(.hg-chip):not(.rail-item):not(.nav-avatar):not(.nav-user-out):not(.cm-close-round):not(.nav-row):not(.fb-star) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  border-color: transparent;
  color: var(--cta-text);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 12px 30px color-mix(in srgb, var(--cta-to) 34%, transparent),
    0 0 44px -12px var(--neon-2);
}

/* 呼吸光环：主行动按钮持续轻微发光，让"下一步点哪儿"一眼可见 */
.btn.primary::before,
button.primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--neon-1), transparent 46%, var(--neon-2));
  filter: blur(12px);
  opacity: calc(0.5 * var(--glow-strength));
  pointer-events: none;
  will-change: transform, opacity;
  animation: ctaBreath 5.2s ease-in-out infinite;
}

.btn.primary::after,
button.primary::after {
  content: "";
  position: absolute;
  inset: 0 -60%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  transform: translateX(-70%);
  transition: transform 0.7s var(--ease, ease);
}

.btn.primary:hover,
button.primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--accent-line),
    0 18px 40px color-mix(in srgb, var(--cta-to) 44%, transparent),
    0 0 64px -10px var(--neon-2);
}

.btn.primary:hover::after {
  transform: translateX(70%);
}

.btn.ghost,
button.ghost {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-color: var(--line-2);
  color: var(--text);
}

.btn.ghost:hover,
button.ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

.btn:active,
button:active {
  transform: translateY(1px) scale(0.99);
}

button:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* ============================ 胶囊 / chip ============================ */
.badge,
.tag,
.pill,
.status,
.dur-chip {
  border-radius: var(--r-pill);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  font-size: 13px;
  color: var(--accent-text);
  background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--surface) 60%, transparent));
  border: 1px solid var(--accent-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 30px -10px var(--neon-1);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dur-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}

.dur-label {
  color: var(--muted);
  font-size: 13.5px;
}

.dur-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dur-chip {
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
}

.dur-chip:hover {
  color: var(--text);
  border-color: var(--line-2);
}

.dur-chip.on {
  color: var(--accent-text);
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* ============================ 卡片 / 面板 ============================ */
.card,
.mod,
.safe,
.panel,
.plan,
.shot,
.req .item,
details {
  border-radius: var(--r-card);
}

.card,
.mod,
.safe,
.req .item {
  position: relative;
  padding: 22px;
  background:
    linear-gradient(180deg, var(--card-top), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--skew)), var(--bg-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease), box-shadow 0.2s var(--ease, ease);
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* 卡片内光标高光：指针扫过时卡片局部亮起来（位置由 site.js 写进 --mx/--my） */
.card::after,
.mod::after,
.safe::after,
.req .item::after,
.plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 20%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease, ease);
}

.card.is-lit::after,
.mod.is-lit::after,
.safe.is-lit::after,
.req .item.is-lit::after,
.plan.is-lit::after {
  opacity: 0.85;
}

.card::before,
.mod::before,
.safe::before,
.req .item::before {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-top), transparent);
  pointer-events: none;
}

.card:hover,
.mod:hover,
.safe:hover {
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 44px -10px var(--neon-1), var(--shadow-2);
}

.card .ico,
.mod-head .ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  font-size: 19px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--surface-2) 80%, transparent));
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}

.card b {
  display: block;
  margin-bottom: 8px;
  font-size: 15.5px;
}

.card span {
  color: var(--muted);
  font-size: 14px;
}

.panel {
  padding: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--surface));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.mods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.mod {
  padding: 26px 28px;
}

.mod-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px;
}

.mod-head .ico {
  margin: 0;
  flex: 0 0 auto;
}

.mod-head b {
  display: block;
  font-size: 17px;
}

.mod-head span {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
}

.feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 6px 26px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.feats li {
  position: relative;
  margin: 5px 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 14px;
}

.feats li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.feats li b {
  color: var(--text);
  font-weight: 600;
}

.safety,
.req {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.safe b,
.req .item b {
  display: block;
  margin-bottom: 6px;
  font-size: 14.5px;
}

.safe span {
  color: var(--muted);
  font-size: 13.5px;
}

.safe.no b {
  color: var(--warn);
}

.req .item i {
  margin-right: 8px;
  font-style: normal;
  color: var(--accent-text);
}

/* 运行环境这类清单：用左侧一条强调线分组，不加装饰性圆点 */
.req .item {
  border-left: 2px solid var(--accent-line);
}

/* ============================ 首屏 ============================ */
/* 右缘悬浮工具条（对标参考站右缘的悬浮按钮组；窄屏隐藏，避免压住内容） */
.side-rail {
  position: fixed;
  z-index: 15;
  top: 44%;
  right: 8px;
  display: flex;
  flex-direction: column;
  /* 参考站那条是"一整块卡片"（FloatButton 群：54×70 的行、行间细线、整块圆角 8），不是一颗颗分开的方块 */
  gap: 0;
  width: 60px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(6px);
  transform: translateY(-50%);
  /* 可上下拖：拖动时别让浏览器当成滚动/选中 */
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.side-rail.dragging {
  cursor: grabbing;
}

.side-rail .rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 70px;
  padding: 8px 4px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.side-rail .rail-item:first-child {
  border-top: 0;
}

.side-rail .rail-item:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.side-rail .rail-item svg {
  display: block;
  color: var(--accent-text);
}

.side-rail a.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.side-rail .rail-item[aria-expanded="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* 2026-10-10：右缘「悬停出码」那个小浮层（.rail-pop + railPopIn 动画）整套已删 ——
   用户口径「鼠标放在按钮上面不要出现联系二维码，要点击才会出现弹窗」。
   联系二维码现在只在屏幕正中的 .contact-modal 里出现（样式见文件后半段）。 */

/* （旧的 .side-rail a:hover / .rail-kefu 各自描边的样式已在上面统一成 .rail-item） */

header.hero,
.hero {
  position: relative;
  padding: 72px 0 40px;
  text-align: center;
}

/* 首页首屏：按参考站排（左对齐、紧贴导航起） */
body.page-home header.hero {
  /* 下面接「网申助手…」那一段，底部多留一点（用户：块与块之间太挤） */
  padding: 30px 0 24px;
  text-align: left;
}

.lead {
  max-width: 660px;
  margin: 0 auto 28px;
  color: var(--text-2);
  font-size: 16.5px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.shot {
  position: relative;
  max-width: 960px;
  margin: 44px auto 0;
  padding: 8px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--accent-soft), transparent 42%), var(--surface);
  border: 1px solid var(--line-2);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
    0 40px 90px -34px var(--neon-1),
    var(--shadow-2);
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* 首屏截图里的横向扫描线：只压在边框内侧，透明度很低，不遮内容 */
.shot::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 26%;
  z-index: 2;
  background: linear-gradient(180deg, transparent, var(--neon-2) 55%, transparent);
  opacity: calc(0.22 * var(--glow-strength));
  pointer-events: none;
  will-change: transform;
  animation: shotScan 9s ease-in-out infinite;
}

@keyframes shotScan {
  0% {
    transform: translate3d(0, -12%, 0);
  }
  100% {
    transform: translate3d(0, 300%, 0);
  }
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-card) - 6px);
}

/* ============================ 步骤 ============================ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  counter-reset: s;
}

.step {
  position: relative;
  padding: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--skew)), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.step::before {
  counter-increment: s;
  content: "0" counter(s);
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  background-image: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step b {
  display: block;
  margin: 6px 0 6px;
}

.step span {
  color: var(--muted);
  font-size: 13.5px;
}

/* ============================ 价格 ============================ */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

.plan {
  position: relative;
  padding: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--surface));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease), box-shadow 0.2s var(--ease, ease);
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.plan:hover {
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}

.plan.hot {
  border-color: var(--accent-line);
  background:
    radial-gradient(420px 180px at 50% -20%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--surface));
}

.plan.hot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle),
    var(--neon-1),
    transparent 28%,
    var(--neon-2) 52%,
    transparent 74%,
    var(--neon-1)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: borderSpin 14s linear infinite;
}

/* 价格数字用等宽：对齐 + 仪表感，是暗黑科技风的关键细节 */
.plan .price,
.cards .card b,
.bar-value,
.order-id {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.plan .tag {
  position: absolute;
  top: -12px;
  left: 26px;
  padding: 4px 13px;
  font-size: 12px;
  color: var(--cta-text);
  background-image: linear-gradient(120deg, var(--cta-from), var(--cta-to));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cta-to) 34%, transparent);
}

.plan .price {
  margin: 14px 0 6px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan .price small {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

/* 「按剩余天数折算」这类说明文字不是数字，别跟着等宽字体一起放大 */
.plan .price.price-text {
  font-family: var(--font-head, "Microsoft YaHei", sans-serif);
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.plan ul {
  margin: 14px 0 20px;
  padding-left: 0;
  list-style: none;
}

.plan ul li {
  position: relative;
  margin: 7px 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
}

.plan ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.63em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.plan .btn {
  display: flex;
  width: 100%;
}

.plan.active {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2);
}

.price-note {
  max-width: 660px;
  margin: 22px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.plan-tip {
  margin-top: 14px;
  padding: 13px 15px;
  color: var(--muted);
  font-size: 13.5px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.plan-tip b {
  color: var(--text);
}

/* ============================ 风险 / 表格 / 折叠 ============================ */
.risk {
  padding: 22px;
  color: color-mix(in srgb, var(--warn) 62%, var(--text));
  font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 10%, transparent), transparent);
}

.risk b {
  color: var(--warn);
}

.risk ol {
  margin: 10px 0 0;
  padding-left: 20px;
}

.risk li + li {
  margin-top: 6px;
}

table.platforms {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

table.platforms th,
table.platforms td {
  padding: 13px 16px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}

table.platforms th {
  color: var(--muted);
  font-weight: 500;
  background: var(--surface-2);
}

table.platforms tr:last-child td {
  border-bottom: 0;
}

.pill {
  display: inline-block;
  padding: 3px 11px;
  font-size: 12px;
}

/* 投递榜企业表里公司名后面的小标签（照参考站那种"公司名 + 性质"的写法） */
.tag-mini {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.pill.ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 36%, transparent);
}

.pill.plan {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border: 1px solid var(--line);
}

details {
  margin-bottom: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--skew)), var(--surface));
  border: 1px solid var(--line);
  transition: border-color 0.2s var(--ease, ease);
}

details[open] {
  border-color: var(--accent-line);
}

summary {
  padding: 15px 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  float: right;
  color: var(--muted);
  font-weight: 400;
}

details[open] summary::after {
  content: "-";
}

details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 14px;
}

/* ============================ 表单 ============================ */
input,
select,
textarea {
  padding: 11px 14px;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  transition: border-color 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 86%, transparent);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-2);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.muted {
  color: var(--muted);
}

.status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}

.status-bar b {
  color: var(--text);
}

.msg {
  margin-top: 14px;
  padding: 12px 15px;
  font-size: 13.5px;
  border-radius: var(--r-btn);
}

.msg.err,
.err {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 34%, transparent);
}

.msg.info,
.info {
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.status {
  padding: 4px 13px;
  font-size: 13px;
}

.status.pending {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
}

.status.paid {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
}

/* ============================ 订单页 ============================ */
.code,
.code-input {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

.code {
  padding: 14px 18px;
  font-size: 22px;
  text-align: center;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-card);
  user-select: all;
}

.code-input {
  font-size: 19px;
  text-align: center;
}

.qr {
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.order-id-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.order-id {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.order-id-row code {
  flex: 1 1 220px;
  padding: 10px 12px;
  font-size: 15px;
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  user-select: all;
}

.steps {
  color: var(--muted);
  font-size: 14px;
}

ol.steps {
  margin: 10px 0;
  padding-left: 20px;
}

ol.steps b {
  color: var(--text);
}

/* ============================ 岗位列表 / 分页 ============================ */
.job {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.18s var(--ease, ease);
}

.job:hover {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.job:last-child {
  border-bottom: none;
}

.job .main {
  flex: 1;
  min-width: 0;
}

.job .title {
  font-weight: 600;
  font-size: 15px;
}

.job .salary {
  margin-left: 8px;
  font-size: 13.5px;
  color: var(--warn);
}

.job .sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}

.job a.origin {
  color: var(--accent-text);
  font-size: 13.5px;
  white-space: nowrap;
  text-decoration: none;
}

.job a.origin:hover {
  text-decoration: underline;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13.5px;
}

/* ============================ 只读面板 ============================ */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.cards .card {
  padding: 14px;
}

.cards .card b {
  display: block;
  margin: 0;
  font-size: 23px;
  letter-spacing: -0.01em;
}

.cards .card span {
  font-size: 12px;
}

.card.ok b {
  color: var(--ok);
}

.card.bad b {
  color: var(--bad);
}

.card.warn b {
  color: var(--warn);
}

.panel.advice {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
}

.panel.advice p {
  margin: 6px 0 0;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 12.5px;
}

.bar-label {
  width: 70px;
  color: var(--muted);
}

.bar-track {
  flex: 1;
  height: 9px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 80%, var(--surface-2));
  border-radius: var(--r-pill);
}

.bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: var(--r-pill);
  background-image: linear-gradient(90deg, var(--cta-from), var(--accent-2));
}

.bar-value {
  width: 34px;
  text-align: right;
  color: var(--muted);
}

/* ============================ 页脚 ============================ */
footer {
  position: relative;
  margin-top: 28px;
  padding: 30px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
  border-top: 1px solid var(--line);
}

footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 50%, transparent);
}

footer a {
  color: var(--accent-text);
}

/* 页脚站内导航：把不在顶栏的入口（下载 / 数据查询 / 功能全景）留住 */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

/* ============================ 主题切换器 ============================ */
.theme-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

.theme-fab:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

.theme-panel {
  position: fixed;
  right: 22px;
  bottom: 78px;
  z-index: 41;
  width: 268px;
  padding: 15px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}

.theme-panel h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.theme-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.theme-opt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}

.theme-opt:hover {
  border-color: var(--line-2);
  transform: none;
}

.theme-opt.active {
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.swatch {
  display: flex;
  gap: 4px;
}

.swatch i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 5px;
}

/* ============================ 工具类 ============================ */
.hide {
  display: none !important;
}

/* ============================ 内容区块组件（批 5） ============================ */
/* 事实条：用真实数字替代"看起来很厉害"的形容词 */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 8px auto 0;
  max-width: 960px;
}

.fact {
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.fact b {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
}

.fact span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 非对称分组：一组一张卡，避免"三列等宽卡片墙" */
.bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 16px;
}

.bento .card {
  display: flex;
  flex-direction: column;
}

.bento .card ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.bento .card li {
  position: relative;
  margin: 8px 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
}

.bento .card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.bento .card li b {
  color: var(--text);
  font-weight: 600;
}

.bento .card .kicker {
  margin-top: auto;
  padding-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
}

/* 适合谁 / 不适合谁：两列对照 */
.fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

.fit-col {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--bg-2));
}

.fit-col > b {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
}

.fit-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit-col li {
  position: relative;
  margin: 9px 0;
  padding-left: 24px;
  color: var(--muted);
  font-size: 14px;
}

.fit-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.fit-col.ok {
  border-color: color-mix(in srgb, var(--ok) 34%, transparent);
}

.fit-col.ok > b {
  color: var(--ok);
}

.fit-col.ok li::before {
  content: "✓";
  color: var(--ok);
}

.fit-col.no {
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

.fit-col.no > b {
  color: var(--warn);
}

.fit-col.no li::before {
  content: "×";
  color: var(--warn);
}

/* 模块索引：功能页顶部的一排锚点 */
.index-jump {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}

.index-jump a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: border-color 0.18s var(--ease, ease), transform 0.18s var(--ease, ease);
}

.index-jump a:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

.index-jump a b {
  font-size: 14.5px;
}

.index-jump a span {
  color: var(--muted);
  font-size: 12.5px;
}

/* 对比表：购买页"哪档适合你" */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 0 auto;
  max-width: 940px;
}

.compare .col {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--bg-2));
}

.compare .col.hot {
  border-color: var(--accent-line);
}

.compare h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.compare .who {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13.5px;
}

.compare ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare li {
  position: relative;
  margin: 8px 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
}

.compare li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* 结尾行动条：一屏收口 */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 26px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-card);
  background:
    radial-gradient(420px 160px at 12% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--bg-2));
  box-shadow: var(--shadow-1);
}

.cta-band b {
  display: block;
  font-size: 17px;
}

.cta-band span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
}

.cta-band .cta {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
  }
}

.center {
  text-align: center;
}

/* ============================ 首页信息门户组件（批 8） ============================ */
/* ---------- 首页-A：背书条 / 功能卡 / 卖点段 / 四栏页脚 ---------- */
/* ---------- 首页-B：首屏四宫格（筛选 / 库内榜 / 校招时间线 / 进度管理） ---------- */
/* ---------- 首页-C：信息速览段的 tabs / 统计 / 类型 chips ---------- */
/* ---------- 岗位列表页（对标参考站 /recruitment 列表页） ---------- */
.board-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.3fr);
  gap: 12px;
  /* 用户 2026-10-09「两边的高度对齐」：两张卡等高（取高的那张），
     左卡内部的 No.4-10 用 flex 把多出来的高度摊开，底部不留一大块空白 */
  align-items: stretch;
}

.board-grid > .hg-card {
  display: flex;
  flex-direction: column;
}

.board-grid .board-rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.board-table {
  background: transparent;
  border: 0;
}

/* （原「首页-E：求职进度管理」那一整段的 .pg-panel / .pg-timeline / .pg-cell / .pg-more /
   .pg-manage / .pg-counts 样式：2026-10-11 用户对着这一段说「删了」，页面整段移除后
   这些样式没有使用者了，一并删掉，不留死代码。首屏右栏那份"我的求职进度管理"用的是 .hg-stages，跟这里无关。） */

/* ---------- 首页-F：投递榜（参考站：黑底 TOP5 banner + 领奖台 + 两张榜） ---------- */
.board-banner {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 20px 24px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background:
    radial-gradient(420px 200px at 12% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--surface) 80%, #000) 0%, var(--bg) 100%);
}

.bb-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.bb-top5 {
  margin-top: 6px;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 55%, transparent);
}

.bb-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.bb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  text-align: center;
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--line);
}

.bb-rank {
  position: absolute;
  top: 6px;
  right: 9px;
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 700;
}

.bb-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04101f;
  font-size: 13px;
  font-weight: 700;
}

.bb-card b {
  font-size: 13px;
}

.bb-card i {
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.bb-num {
  color: var(--accent-text);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.pd-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.pd-card b {
  font-size: 14px;
}

.pd-name {
  color: var(--muted);
  font-size: 12px;
}

.pd-1 {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
}

.pd-2,
.pd-3 {
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
}

.board-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-rows li {
  display: grid;
  /* 参考站这一列是：名次 / 姓名 / 学校 / 专业 / 份数 */
  grid-template-columns: 56px 1fr 1fr 1.2fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.board-rows li:first-child {
  border-top: 0;
}

.board-table th,
.board-table td {
  padding: 9px 10px;
  font-size: 13px;
}

.qs-chip.pending {
  /* 占位标签（缺名单/规则）：文字压暗、点不动，跟能真筛的区分开 */
  color: var(--muted);
  cursor: not-allowed;
}

/* 2026-10-11 清查（信息项）：三个占位 chip 点了不筛列表，光靠"颜色暗一点"用户会以为筛选坏了 ——
   挂一个「待开放」小标；点下去还会给一句提示（见 site.js 里的 .qs-hint）。 */
.qs-chip.pending::after {
  content: '待开放';
  margin-left: 6px;
  padding: 1px 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  transform: translateY(-1px);
}

.qs-hint {
  margin: -8px 0 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- 图文指南页（对标参考站 /plugin-help 的"1/2/3/4 步 + 截图"版式） ---------- */
.notice-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--accent-text);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-btn);
}

.notice-bar b {
  color: var(--text);
}

.side-cards {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}

.side-card {
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.side-card.slot {
  border-style: dashed;
  border-color: var(--line-2);
}

.side-card > b {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.side-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .side-cards {
    grid-template-columns: 1fr;
  }
}

.guide-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
  margin-top: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.guide-step.flip > .guide-text {
  order: 2;
}

.guide-text h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.guide-text ol,
.guide-text ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
}

.guide-text li {
  margin: 6px 0;
}

.guide-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: calc(var(--r-card) - 4px);
}

/* 截图/素材位：等用户给材料时直接换成 <img> */
.shot-slot {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 190px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px dashed var(--line-2);
  border-radius: calc(var(--r-card) - 4px);
}

.shot-slot b {
  color: var(--text-2);
  font-size: 14px;
}

.hl-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
  align-items: center;
}

.hl-col {
  display: grid;
  gap: 12px;
}

.hl-item {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.hl-item b {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.hl-item span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.review-card {
  padding: 16px 18px;
  color: var(--muted);
  font-size: 13px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
}

.review-card b {
  display: block;
  margin-bottom: 6px;
  color: var(--text-2);
}

.faq-numbered {
  counter-reset: q;
  display: grid;
  gap: 10px;
}

.faq-numbered details > summary::before {
  counter-increment: q;
  content: "Q" counter(q) ". ";
  color: var(--accent-text);
}

@media (max-width: 900px) {
  .guide-step,
  .hl-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .board-grid {
    grid-template-columns: 1fr;
  }
}

.jl-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.jl-title {
  font-size: 19px;
  font-weight: 700;
  background-image: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.jl-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
}

.jl-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jl-search input {
  min-width: 220px;
}

.jl-hot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.jl-hot-label {
  color: var(--muted);
  font-size: 12.5px;
}

.jl-filters {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.jl-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.jl-filter-row + .jl-filter-row {
  border-top: 1px dashed var(--line);
}

.jl-filter-label {
  flex: 0 0 68px;
  padding-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.jl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jl-list {
  display: grid;
  gap: 10px;
}

.jl-row {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.jl-row:hover {
  border-color: var(--accent-line);
}

.jl-side {
  display: grid;
  gap: 6px;
  align-content: center;
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
}

.jl-side .slot {
  padding: 6px 8px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
}

.jl-logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 2px;
  border-radius: 50%;
  object-fit: contain;
}

.jl-logo-ph {
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px dashed var(--line-2);
}

.jl-main .jl-job-title {
  font-size: 15.5px;
  font-weight: 600;
}

.jl-main .jl-company {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.jl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.jl-tags span {
  padding: 2px 9px;
  font-size: 11.5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--text-2);
}

.jl-tags span.salary {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
}

.jl-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.jl-actions .time {
  color: var(--muted);
  font-size: 11.5px;
}

@media (max-width: 760px) {
  .jl-row {
    grid-template-columns: 1fr;
  }

  .jl-actions {
    justify-items: start;
  }
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.stage-card {
  padding: 15px 17px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.stage-card.hot {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
}

.stage-card b {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
}

.stage-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

/* 参考站这三排（速览段 chips / 名企行业 / 钱多事少福利）都是「一张卡片 + 纯文字 tab」：
   卡片圆角 10、行高 52、内容居中；文字 17px/700，未选中=次要色，选中=品牌蓝 + 底部 2px 横线。
   （2026-10-09 用户：之前那排亮蓝色药丸跟参考站不像，改掉） */
.qs-tabs,
.qs-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* 24 → 20：速览段 11 个 chip 正好排成一行（参考站那排是 9 个，间距 26） */
  gap: 0 16px;
  min-height: 52px;
  margin: 4px 0 16px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.qs-tab,
.qs-chip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 0;
}

.qs-tab:hover,
.qs-chip:hover {
  color: var(--text);
}

.qs-tab i,
.qs-chip i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.7;
}

.qs-tab.on,
.qs-chip.on {
  color: var(--accent-text);
}

.qs-tab.on::after,
.qs-chip.on::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.qs-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

.qs-stats b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* （.qs-chips / .qs-chip 的样式跟 .qs-tabs / .qs-tab 合并在上面的"卡片 + 纯文字 tab"里） */

.qs-note {
  margin: 0 0 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.hero-grid {
  display: grid;
  /* 参考站首屏实测：左 220 / 中 600 / 右 320，栏间距 8。
     2026-10-11 用户：「第一张图（左筛选栏）的内容大一些，第二张图（中间大图）缩小一些，三者协调一点」——
     左 220 → **300**（内容跟着放大），中间由 1fr 自动收窄（1440 视口下 716 → 628），右栏 320 不动。
     三栏宽度比从 1 : 2.96 : 1.45 变成 1 : 1.90 : 1.07。 */
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: 8px;
  align-items: stretch;
}

.hero-grid .hg-side {
  display: grid;
  /* 2026-10-11 用户：「我的求职进度管理」放在投递榜**卡片的上面** →
     右栏 = 上「进度小卡」（自然高度，auto）+ 下「投递榜卡」（占满剩余，1fr），整栏仍与左/中两栏等高。 */
  grid-template-rows: auto 1fr;
  gap: 8px;
}

/* 进度小卡（贴在投递榜卡上方）：标题 + 4 个数字 + 「去管理」一颗按钮 */
.hg-progress {
  gap: 6px;
  padding: 10px 12px;
}

/* 标题行：左边「我的求职进度管理」，**右上角**「去管理」（2026-10-11 用户：「放在右上角」）。
   去管理原来在下面那排数字的最右边，现在提到标题这一行贴右缘。 */
.hg-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hg-card {
  display: flex;
  flex-direction: column;
  /* 参考站首屏面板内边距很紧（左面板 tab 直接贴顶）；圆角走全站统一 token */
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.hg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.hg-head b {
  font-size: 14px;
}

.hg-head .hg-note {
  color: var(--muted);
  font-size: 12px;
}

.hg-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  margin: 0 0 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hg-tab {
  /* 2026-10-11：两个 tab 各加一枚矢量小图标 → 这里改成 flex 居中，图标与文字一行 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 7px 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 45%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
}

.hg-tab-ico {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}

.hg-tab.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent-line);
}

.hg-tabs.slim {
  margin-bottom: 4px;
}

.hg-tabs.slim .hg-tab {
  padding: 4px 4px;
  font-size: 12.5px;
  border-radius: 4px;
}

/* 左面板：参考站是 tab 贴顶、内容到底、底部「全部职位」38px */
.hf-panel {
  position: relative;
  padding: 0 12px 6px;
  /* 2026-10-11 用户：「这为什么选择不了」——根因在这一行：
     这块面板吃过全站"磨砂玻璃"那套（backdrop-filter: blur(14px)），而**backdrop-filter 会创建层叠上下文**，
     于是里面那个 z-index:40 的分类大面板被关在面板自己的上下文里、压不住中间那栏轮播
     （`.hb-slides` 是 position:absolute + z-index:0，同样参与 header.hero 这一层，靠文档顺序赢）。
     结果：鼠标一移过去，命中的是轮播图片而不是面板 → 面板收起 = 用户眼里的"选择不了"。
     给面板一个 z-index，让整块（含大面板）压到轮播之上。 */
  z-index: 30;
}

.hf-panel .hg-tabs {
  margin-bottom: 4px;
}

/* 悬停弹出的大面板：对标参考站左栏那个"鼠标放上去弹分类"的交互 */
.hf-flyout {
  position: absolute;
  top: 0;
  /* 2026-10-11 用户：「这为什么选择不了」——原来这里跟左栏之间隔着 8px 的缝，
     鼠标从分类行横移进面板时会先"离开左栏"，收起的定时器抢在鼠标到达前把面板关了（实测复现）。
     缝收到 2px（鼠标一次移动就能跨过），配合 site.js 里把宽限从 420ms 提到 650ms。 */
  left: calc(100% + 2px);
  z-index: 40;
  /* 参考站是 w-[700px] h-[400px] overflow-y-auto */
  width: 700px;
  height: 400px;
  overflow: auto;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
}

/* 2026-10-11 清查 P1：这个"向右弹出"的面板是按参考站 700×400 做的，窄窗口里会跑出屏幕
   （实测 960 宽右出 118px、1024 宽右出 45px、单栏 834 宽右出 674px，右边的技能词看不到也点不到）。
   分两档收口：
   ① 901~1259px（三栏但窗口窄）：宽度跟着"右边界到屏幕边"的剩余空间走，永远不出屏；
   ② ≤900px（单栏）：改成覆盖在列表上方（left:0），按容器宽自适应 + 限高，不往右窜。 */
@media (min-width: 901px) {
  .hf-flyout {
    width: 700px;
    /* 不跟 `100%` 的包含块较劲（实测它在不同断点下宽度不一样）：
       按视口留出"左栏 + 间距 + 右缘悬浮条通道"380px 给别的元素，剩下的给面板。
       （注：这里的 100vw 是未缩放的视口宽，面板最终渲染还要 ×1.1，所以留白要多给一点。） */
    max-width: calc(100vw - 380px);
  }
}

@media (max-width: 900px) {
  .hf-flyout {
    left: 0;
    width: auto;
    max-width: calc(100vw - 32px);
    height: auto;
    max-height: 420px;
  }
}

.hf-flyout-title {
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

/* 参考站的排法：一行 = 方向 / 专业类（左列 130px）+ 该方向下的技能词 / 具体专业（右侧平铺 130px 一格） */
.hf-flyout-grid {
  display: block;
}

.hf-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.hf-group {
  flex: 0 0 130px;
  width: 130px;
  padding: 2px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
  background: none;
  border: 0;
}

.hf-group:hover {
  color: var(--accent-text);
}

.hf-items {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.hf-item {
  width: 130px;
  overflow: hidden;
  padding: 2px 0;
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
}

.hf-item:hover {
  color: var(--accent-text);
}

/* 左栏：参考站是一列"名称 + ›"的分类行（每行 41px） */
.hf-list {
  display: flex;
  flex-direction: column;
}

.hg-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* 左栏变宽之后把行也撑高一点，字跟着放大（用户：「第一张图的内容大一些」） */
  min-height: 45px;
  padding: 0 8px;
  font-size: 15px;
  text-align: left;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.hg-chip:hover,
.hg-chip.on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.hg-chip i {
  margin-left: auto;
  font-style: normal;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--muted);
}

.hg-chip .chev {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.hf-all {
  margin-top: auto;
  min-height: 42px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
}

.hf-all:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* 中栏：参考站是 600×364 的圆角大图（我们的图还没给，先用文字海报） */
.helper-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.helper-strip .hs-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 10px 12px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.hs-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.hero-mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-banner {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 300px;
  padding: 28px 32px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    radial-gradient(560px 260px at 10% -10%, var(--accent-soft), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 90%, var(--accent)), var(--bg-2));
}

/* 轮播图：铺满整块，压一层暗色渐晕保证文字可读 */
.hb-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hb-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease, ease);
}

.hb-slide.on {
  opacity: 1;
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 46%, transparent 78%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, transparent 52%);
}

.hb-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hb-dots {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.hb-dot {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text) 32%, transparent);
  transition: background 0.2s var(--ease, ease), width 0.2s var(--ease, ease);
}

.hb-dot.on {
  width: 40px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.hero-banner .lead {
  max-width: 520px;
  margin: 0;
  font-size: 15px;
  color: var(--text);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 80%, transparent);
}

.hero-banner h1 {
  /* 参考站这块是 600×364 的图；我们放文字海报，字号要能在两行内排下 */
  font-size: clamp(26px, 2.5vw, 36px);
  margin: 0;
}

.hero-banner .cta {
  justify-content: flex-start;
}

.hero-banner .bn-note {
  position: relative;
  z-index: 2;
  margin: 0;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: 12px;
}

.hg-rank {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hg-rank li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13.5px;
}

.hg-rank .rk {
  /* 2026-10-11 重做名次徽章：圆形奖牌盘 —— 内圈高光 + 底部内阴影 + 一圈外发光；
     前三名金/银/铜（深色数字），第四名往后统一品牌蓝渐层（白色数字）。 */
  display: grid;
  flex: none;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(165deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), inset 0 -4px 7px rgba(2, 6, 18, 0.3),
    0 7px 15px -9px color-mix(in srgb, var(--accent) 90%, transparent);
}

/* 前三名：金 / 银 / 铜奖牌（数字用深色，才像压出来的金属） */
.hg-rank .rk-1 {
  color: #3a2600;
  background: linear-gradient(165deg, #ffe9a6, #e2a12c);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), inset 0 -4px 7px rgba(70, 42, 0, 0.3),
    0 8px 16px -9px rgba(255, 206, 90, 0.95);
}

.hg-rank .rk-2 {
  color: #22303f;
  background: linear-gradient(165deg, #f4f8ff, #aab9cc);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), inset 0 -4px 7px rgba(34, 48, 63, 0.28),
    0 8px 16px -9px rgba(200, 215, 235, 0.9);
}

.hg-rank .rk-3 {
  color: #3a2210;
  background: linear-gradient(165deg, #f6c79b, #c0783c);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), inset 0 -4px 7px rgba(58, 34, 16, 0.3),
    0 8px 16px -9px rgba(230, 150, 90, 0.9);
}

/* 没有投递数据时的那一行（不编名字，也不留空白） */
.hg-rank-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* 榜行里的名字/企业名：太长就省略号（完整名字在 title 里） */
.hg-rank .rk-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hg-rank .bar {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
}

.hg-rank .bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.hg-rank .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

.hg-more {
  margin-top: auto;
  padding: 6px 0;
  text-align: center;
  text-decoration: none;
  color: var(--accent-text);
  font-size: 13px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.hg-more:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* （原 .hg-now / .hg-months 那几条：2026-10-11 用户要求把「校招时间线」整块删掉，
   连同它的月份格样式一起删，不给项目留死代码。页面下半部分那个独立「求职进度管理」段用的是
   .pg-* 一套，跟这里无关。） */

.hg-head2 {
  /* 2026-10-11：这块从投递榜卡底部挪到「卡片上面」的独立小卡后，
     不再需要贴底部用的 margin-top:auto 和那道人造分割线；
     再去掉下边距——标题现在和「去管理」同一行（右上角），行距交给 .hg-progress 的 gap。 */
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
}

.hg-stages {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.hg-stages span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
}

.hg-stages b {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-text);
}

.hg-stages i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
}

.hg-manage {
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--accent-text);
  font-size: 12.5px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026-10-11：左栏加宽到 300 之后，窄一点的窗口里中间那块会被挤瘦（实测 1024 视口只剩 252px），
   所以按窗口宽度分两档把三栏一起收，保持"左 / 中 / 右"的比例大致不变。
   注意：这两条必须写成"区间"（min-width + max-width）——只写 max-width 会盖掉上面那条 ≤900 的
   单列规则（同优先级、后声明的赢），390 宽的手机上会变回三栏、横向溢出（实测过）。 */
@media (min-width: 1025px) and (max-width: 1339px) {
  .hero-grid {
    grid-template-columns: 260px minmax(0, 1fr) 300px;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 240px minmax(0, 1fr) 280px;
  }
}

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 参考站这条实测：一句话 22px 粗体 + 竖线 + 三个「18px 文案 + 22px 粗体数字」，总高 33px */
  gap: 6px;
  /* 上：跟三栏拉开；下：跟四张卡拉开（参考站实测两处都是 20px） */
  padding: 26px 0 16px;
  background: none;
  border: 0;
}

.trust-bar .tb-title {
  /* 参考站是蓝色渐变文字 */
  background-image: linear-gradient(180deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 22px;
  font-weight: 700;
}

/* 竖线分隔（参考站的 ant-divider-vertical） */
.trust-bar .tb-sep {
  width: 1px;
  height: 16px;
  margin: 0 12px;
  background: var(--line-2);
}

.trust-bar .tb-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.trust-bar .tb-item b {
  background-image: linear-gradient(180deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trust-bar .tb-item span {
  color: var(--text-2);
  font-size: 18px;
}

.trust-bar .tb-cta {
  margin-left: auto;
}

/* 四张功能卡：参考站 271×82、圆角 16、标题 + 说明 + 右侧图标 */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 参考站实测：1156 宽里 4×271 + 3×24 间距 */
  gap: 24px;
  padding-bottom: 10px;
}

.hg-fcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 参考站四张卡实测：271×82、圆角 16、内边距 16、右侧图标 62×62 */
  height: 82px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, var(--card-top), transparent 55%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.18s var(--ease, ease), border-color 0.18s var(--ease, ease);
}

.hg-fcard:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}

/* 参考站：鼠标放上去标题变蓝（字号也从 14 → 15） */
.hg-fcard:hover b {
  color: var(--accent-text);
}

.hg-fcard .fc-txt {
  min-width: 0;
}

.hg-fcard b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  transition: color 0.18s var(--ease, ease);
}

.hg-fcard i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.hg-fcard .fico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  line-height: 0;
}

.hg-fcard .fico svg {
  display: block;
  width: 62px;
  height: 62px;
}

.func-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.func-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, var(--card-top), transparent 55%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: transform 0.18s var(--ease, ease), border-color 0.18s var(--ease, ease);
}

.func-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}

.func-card .fico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  font-size: 18px;
  border-radius: 12px;
  border: 1px solid var(--accent-line);
  background: linear-gradient(150deg, var(--accent-soft), transparent);
}

.func-card b {
  font-size: 15px;
}

.func-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.promo {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background:
    radial-gradient(420px 200px at 8% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--skew)), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

.promo h2 {
  text-align: left;
  margin-bottom: 10px;
}

.promo .promo-title {
  /* 参考站这一段的左标题是 32px/900，关键字用品牌色提亮 */
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--text);
}

.promo .promo-title em {
  font-style: normal;
  color: var(--accent-text);
  text-shadow: 0 0 26px var(--neon-1);
}

.promo .promo-cta {
  min-width: 240px;
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 700;
  /* 2026-10-10：跟全站按钮统一圆角（原来是参考站的 8px，跟其它按钮不是一个档） */
  border-radius: var(--r-btn);
}

.promo ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.promo li {
  position: relative;
  margin: 9px 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
}

.promo li::before {
  /* 参考站每条卖点前面是一个品牌色对勾 */
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-text);
  font-weight: 700;
}

.promo .promo-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.promo-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  /* 参考站右侧媒体位是 12px 圆角 */
  border-radius: 12px;
  box-shadow: 0 24px 60px -30px var(--neon-1);
}

.promo-visual .media-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* 四栏页脚（站内导航那行保留在最上面，回归锚点不动） */
/* 页脚四栏（2026-10-09 照参考站 ?cls=1 重排）：
   三列 200px + 1px 竖线 + 联系我们（左边距 100px）；列内 = 18px 标题 + 90px 分隔线 + 16px 链接列表（行高 46px） */
.foot-cols {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* 参考站是三列各 200px 紧排（0 / 200 / 400），再一根竖线，再「联系我们」左边距 100px */
  gap: 0;
  width: 100%;
  max-width: 1156px;
  margin: 6px auto 0;
  text-align: left;
}

.foot-cols > div:not(.foot-contact) {
  flex: 0 0 200px;
  width: 200px;
}

.foot-cols > div > b {
  display: block;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

/* 标题下那根 90px 分隔线：左侧 20px 品牌色 + 右侧灰线（参考站 w-[90px] + w-5 蓝条） */
.foot-cols .foot-sep {
  position: relative;
  display: block;
  width: 90px;
  height: 1px;
  margin: 30px 0;
  background: var(--line-2);
}

.foot-cols .foot-sep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.foot-cols a,
.foot-cols .foot-plain {
  display: block;
  color: var(--muted);
  font-size: 16px;
  line-height: 46px;
  text-decoration: none;
}

.foot-cols a:hover {
  color: var(--accent-text);
}

/* 三列与「联系我们」之间的 1px 竖线（参考站 w-[1px] h-[320px]） */
.foot-cols .foot-divider {
  align-self: stretch;
  width: 1px;
  min-height: 320px;
  background: var(--line);
}

.foot-cols .foot-contact {
  flex: 1;
  /* 参考站是 100px；2026-10-10 来了第三个二维码（公众号）后，收到 60px 才够三个 148 的框排一行
     （3×148 + 2×16 = 476 ≤ 1156−600−1−60 = 495；1366 视口因为整页 1.1 倍缩放刚好还剩 480.8，也放得下） */
  padding-left: 60px;
  /* 2026-10-11 清查 P0：flex 子项默认 min-width:auto，会被"最长不可断行的内容"（18px 的邮箱长串）
     顶住不肯收缩 → 901~965px 窗口下整页被撑出横向滚动（960 时 +17px，901 时 +76px）。
     这里允许它收缩，配合下面邮箱的 word-break，彻底消掉这条溢出。 */
  min-width: 0;
}

.foot-cols .foot-mail {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}

.foot-cols .foot-mail a {
  display: inline;
  color: var(--text);
  font-size: 18px;
  line-height: inherit;
  /* 邮箱是一整串没有空格的文本，窗口一窄就会把页面撑宽 —— 允许在任意位置断行 */
  word-break: break-all;
}

.foot-cols .foot-contact .qr-slots {
  margin-top: 40px;
}

.foot-cols .foot-help {
  margin-top: 18px;
}

.foot-bottom {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

/* 页脚二维码（参考站：132×132 方框、6px 白边、圆角 10，码下 16px 说明；码与码间距 20px） */
.qr-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* 2026-10-10：第三个码（公众号）进来后，20 → 16 让三个 148 的框能在「联系我们」这一栏里排成一行 */
  gap: 16px;
}

.qr-slot {
  /* 两个码等宽同高：说明文字最多两行，两块底部对齐（用户 2026-10-09「重新调整这一块的排版」） */
  display: flex;
  flex-direction: column;
  /* 2026-10-10 配色重排：132 → 116、去掉 6px 白描边（在深色页脚里太刺眼）
     2026-10-10 二次（用户：「这两个地方的二维码铺满一点，这么小干嘛」）：116 → 148，
     同时把图里的静区从 12% 收到 5.4%（见 tmp-out/*.before-tight 备份），码本体只占白框 66% → 82% */
  /* 2026-10-11 清查 P0：宽度要能跟着「联系我们」那一栏收（901~965px 时那栏只剩 ~190px，
     写死 148 会把整页撑出横向滚动）→ 改成 min(148, 100%)，图跟着等比缩。 */
  width: min(148px, 100%);
  min-height: 186px;
}

.qr-slot img {
  /* 二维码图是透明底黑块：垫白底 + 内白边（白边留在图内，不再做成"白框卡片"） */
  display: block;
  width: min(148px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.qr-slot i {
  display: grid;
  place-items: center;
  width: min(148px, 100%);
  aspect-ratio: 1 / 1;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
}

.qr-slot span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}

/* 还没材料的那个码：底色再压暗一点，跟真码区分（虚线框已在 .qr-slot i 里） */
.qr-slot-pending i {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* 窄屏：页脚竖排（桌面版完全照参考站，这里只是别让手机被三列 200px 撑宽） */
@media (max-width: 900px) {
  .foot-cols {
    flex-direction: column;
    gap: 22px;
  }

  .foot-cols > div:not(.foot-contact) {
    flex: none;
    width: 100%;
  }

  .foot-cols .foot-divider {
    display: none;
  }

  .foot-cols .foot-contact {
    padding-left: 0;
  }

  .foot-cols a,
  .foot-cols .foot-plain {
    line-height: 36px;
  }

  .foot-cols .foot-contact .qr-slots {
    margin-top: 20px;
  }
}

@media (max-width: 1279px) {
  /* 1280 以下内容会顶到右缘，工具条先收起来（参考站手机上也收起） */
  .side-rail {
    display: none;
  }
}

@media (max-width: 820px) {
  /* 窄屏：主推区「左文案 + 右媒体」两栏收成一栏（桌面 2 栏不受影响）。
     2026-10-11 补：上一轮按行号删「求职进度管理」样式时把本块收尾一起带走了，这里补回。 */
  .promo {
    grid-template-columns: 1fr;
  }

  /* 投递榜 banner 是「280px 固定左栏 + 右栏」两列：窄屏不收栏的话右栏只剩几十像素，
     下面那排 5 张 .bb-card 会顶出屏幕（2026-10-11 修：390 宽下整页被撑到 422）。 */
  .board-banner {
    grid-template-columns: 1fr;
  }
}

.login-wrap {
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- 登录弹窗（点导航「登录 / 注册」直接弹，不跳页） ----------
   结构与 .login-card 完全共用：弹窗只是把那张卡放进一个居中的框里。 */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(7px);
  animation: modalFade 0.18s ease both;
}

.login-modal[hidden] {
  display: none;
}

.login-modal-box {
  position: relative;
  width: min(520px, 100%);
  margin: auto;
  animation: modalRise 0.24s var(--ease) both;
}

.login-modal-box .login-card {
  box-shadow: var(--shadow-2);
}

.login-modal-close {
  position: absolute;
  /* 2026-10-10 用户口径：「关闭按钮放到卡片外面去，不要太远就行」
     —— 挪到卡片上方、和卡片右缘对齐，留 10px 间隙（按钮 34px + 10px = -44px） */
  top: -44px;
  right: 0;
  z-index: 1;
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

@keyframes modalFade {
  from {
    opacity: 0;
  }
}

@keyframes modalRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
}

@media (max-width: 560px) {
  .login-modal {
    align-items: flex-start;
    /* 顶部留出关闭按钮的位置（不然挪到卡片外面的按钮会顶出屏幕上沿） */
    padding: 56px 14px 14px;
  }

  .login-modal-box .login-card {
    padding: 18px;
  }
}

/* ---------- 联系二维码弹窗（客服 / 微信群 / 帮助中心） ----------
   2026-10-10 用户口径：「鼠标放在按钮上 → 旁边出现联系二维码；点一下 → 屏幕正中间的弹窗」。
   骨架复用上面那套 .login-modal（同一个遮罩、同一个"卡片外面右上角"的关闭按钮），
   内容用官网自己的 token 上色（不照抄参考图那套橙黄），保证和其它页面是一套语言。 */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(7px);
  animation: modalFade 0.18s ease both;
}

.contact-modal[hidden] {
  display: none;
}

.cm-box {
  position: relative;
  width: min(430px, 100%);
  margin: auto;
  animation: modalRise 0.24s var(--ease) both;
}

.cm-close {
  display: none; /* 2026-10-10：改用参考图那种"卡片正下方一颗圆形 ✕"，五个面板统一 */
}

.cm-close-round {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 16px auto 0;
  padding: 0;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}

.cm-close-round:hover {
  color: var(--text);
  border-color: var(--accent-line);
}

/* 右上角卡通助手：压在卡片上沿外("探出头")，跟参考图一样 */
.cm-mascot {
  position: absolute;
  /* 参考图那种"人物从卡片上沿探出来"：z-index 压在卡片下面，只有露在上沿外的那半截看得见
     （身体下半截被卡片挡住），所以 top 取 -74 让头 + 耳机 + 挥起来的手都在外面 */
  top: -92px;
  right: 14px;
  z-index: 0;
  width: 134px;
  height: 134px;
  pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(2, 6, 18, 0.5));
}

/* 星星装饰：纯 CSS 四角星（跟参考图那两颗小星星一个意思） */
.cm-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  background: linear-gradient(140deg, #fff, var(--accent-2));
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0.9;
  pointer-events: none;
}

.cm-spark-a {
  top: 22px;
  right: 132px;
  width: 18px;
  height: 18px;
}

.cm-spark-b {
  top: 108px;
  right: 26px;
  width: 13px;
  height: 13px;
  opacity: 0.65;
}

.cm-card {
  position: relative;
  z-index: 1; /* 盖住 .cm-mascot 的下半截（人物只露出卡片上沿那半截） */
  /* 2026-10-10 用户：「这些弹窗的大小、关闭按钮都一样，固定好一个数值就行」——
     五个面板统一 430 宽 × 672 高（内容少的那几张由 .cm-foot{margin-top:auto} 把底部链接压到底；
     672 = 最高的那张（校园大使 4 条"小条"要点，内容 669）+ 3px 余量，保证五张一模一样高），
     关闭按钮改用"卡片正下方圆形 ✕"34×34（五个面板统一，见 .cm-close-round）。 */
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 672px;
  overflow: hidden;
  padding: 20px 20px 22px;
  text-align: center;
  /* 卡片底色：左上蓝 + 右上青两道柔光叠在深色底上（不是平涂一块）——
     这是参考图那张"渐变卡"的做法，颜色仍取平台的 --accent / --accent-2 */
  background: radial-gradient(120% 74% at 6% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%),
    radial-gradient(90% 62% at 100% 4%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  border: 1px solid var(--accent-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px) saturate(115%);
}

/* 顶部一道渐变光带：整块弹窗的视觉焦点，跟全站"单一蓝强调色"一致 */
.cm-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}

/* 头部：图标块 + 标题/副标题（左对齐，比原来居中的药丸徽标更像一张"信息卡"） */
.cm-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
}

.cm-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  /* 图标块用强调色渐变（accent → accent-2），比原来的浅底更"活"，
     颜色仍取平台那两个蓝，不引第三种色 */
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 12px;
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--accent) 90%, transparent);
}

.cm-ico svg {
  width: 22px;
  height: 22px;
}

.cm-title {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.3;
}

.cm-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.cm-points {
  display: grid;
  gap: 8px;
  /* 2026-10-10 用户：「面板太板正」——去掉那个"外框 + 分行"的盒子，
     每条要点各自变成一颗圆角小条（见下面的 .cm-points li） */
  margin: 18px 0 0;
  padding: 0;
  background: none;
  border: 0;
  list-style: none;
  text-align: left;
}

.cm-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px;
}

/* 隔一条换成青色那档：排下来有节奏，不再是一列同色的"表格" */
.cm-points li:nth-child(even) {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.cm-points li::before {
  content: none; /* 换掉原来的小圆点：改用 li 里的 .cm-tick 彩色勾选圈 */
}

/* 彩色勾选圈（参考图那种"橙底白勾"，这里换成平台蓝，主题里也会跟着走） */
.cm-tick {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
}

.cm-tick::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 2.5px;
  width: 4px;
  height: 7.5px;
  border: solid var(--accent-text);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* 二维码底板永远白底：扫码要对比度，跟着主题变黑就扫不出来了 */
.cm-qr {
  /* 五个面板统一 300 的码框（图渲染 280px） */
  width: min(300px, 100%);
  max-width: 100%;
  margin: 18px auto 0;
  padding: 10px;
  background: #fff;
  /* 浅色主题下白卡贴白卡会糊在一起，给一道细描边区分 */
  border: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent);
  border-radius: var(--r-btn);
  box-shadow: 0 20px 44px -28px color-mix(in srgb, var(--accent) 85%, transparent);
}

.cm-qr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

.cm-tip {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
}

.cm-foot {
  display: block;
  /* 内容少的那几张卡：底部链接一律贴到卡片底部，五个面板看起来一样高 */
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line-2) 45%, transparent);
  color: var(--accent-text);
  font-size: 12.5px;
  text-decoration: none;
}

.cm-foot:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .contact-modal {
    align-items: flex-start;
    padding: 56px 14px 14px;
  }

  .cm-card {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal,
  .cm-box {
    animation: none;
  }
}

.login-card {
  position: relative;
  padding: 24px;
  /* flex 列 + .agree-row{order:99}：协议勾选条永远排在卡片最下面（用户口径 2026-10-10） */
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--card-top), transparent 55%), color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

.login-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}

.login-tab {
  padding: 9px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--r-btn) - 3px);
}

.login-tab:hover {
  color: var(--text);
}

.login-tab.on {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: var(--accent-line);
  box-shadow: 0 6px 18px -12px var(--neon-1);
}

.login-pane {
  display: none;
}

.login-pane.on {
  display: block;
}

/**
 * 四屏叠在同一个网格格里（2026-10-10 用户口径：「登录界面的大小就以注册页的大小为准，固定死了，
 * 不要每一次点其他的变来变去」）：
 *   · 四个 .login-pane 都占同一个格子 → 卡片高度 = 最高那一屏（注册页），点哪个都不再跳；
 *   · 非当前屏用 visibility:hidden（仍占位、但点不到也不会被键盘 Tab 到）。
 */
.login-panes {
  display: grid;
}

.login-panes > .login-pane {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  /* 字段贴顶、按钮贴底：登录 / 注册 / 忘记密码 三个按钮落在同一条水平线上
     （2026-10-10 用户口径：「登录按钮固定一下位置，注册也得一样」） */
  visibility: hidden;
}

/* 扫码那屏只有一个二维码占位框，保持垂直居中 */
.login-panes > .login-qr-only {
  justify-content: center;
}

/* 开门口令那屏（2026-10-11）：内容只有"身份已通过 + 一个口令框 + 一颗按钮"，
   所以整块居中、按钮跟输入框挨着 —— 不跟「登录 / 注册 / 忘记密码」那条按钮对齐线走
   （那三屏是一家人；这一屏是过了账号密码之后的第二道门）。 */
.login-panes > #pane-gate {
  justify-content: center;
}

.login-card .login-panes #pane-gate .login-submit {
  margin-top: 12px;
}

/* 主按钮贴住每一屏底部（选择器要压过后面的 .login-card .login-submit，否则 margin-top:16px 会赢） */
.login-card .login-panes .login-submit {
  margin-top: auto;
}

/* 忘记密码那屏的两块内容撑满高度，按钮才贴得住底 */
#setPwBox,
#resetPwBox {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.login-panes > .login-pane.on {
  visibility: visible;
}

/* 忘记密码那屏：新密码 / 再输一次 并排放，才装得进注册页的高度 */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ---------- 登录卡：按用户给的弹窗稿排版（Logo + 品牌名 + 输入行 + 一行链接 + 协议条） ---------- */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 2px 0 18px;
}

.login-brand img {
  border-radius: 16px;
}

.login-brand b {
  font-size: 17px;
  letter-spacing: 0.06em;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  transition: border-color 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease);
}

.input-row:hover {
  border-color: var(--line-2);
}

.input-row:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input-row .input-prefix {
  color: var(--muted);
  font-size: 14.5px;
}

.input-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  background: transparent;
  border: none;
}

.input-row input:focus {
  box-shadow: none;
}

/* 密码框右边的"眼睛"（显示 / 隐藏密码） */
.input-action {
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.input-action:hover {
  color: var(--text);
}

.login-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}

.login-links-spacer {
  flex: 1;
}

.link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--text);
  text-decoration: underline;
}

.agree-row {
  order: 99;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
  cursor: pointer;
}

.agree-row input[type='checkbox'] {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  padding: 0;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--line-2);
  border-radius: 4px;
  accent-color: var(--accent);
}

.agree-row a {
  color: var(--accent-text);
}

/* 卡片底部一行：记住登录在**左**、忘记密码在**右**（2026-10-10 用户口径：分别放左右两侧） */
.login-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
}

.login-foot .link-btn {
  font-size: 13px;
}

/* 扫码页把这一行"藏起来但仍占位"——否则卡片会矮 32px，切屏时高度又会跳
   （2026-10-10 用户口径：卡片高度固定死） */
.login-foot.ghost {
  visibility: hidden;
}

.remember-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

/* 卡片右上角：扫码 / 账号 切换（主流登录页的做法：角落一个单色图标，鼠标经过才给底色） */
.pane-switch {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
}

.pane-switch:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border-color: var(--line);
}

/* 卡片**里侧**的左上角：登录 ⇄ 注册（2026-10-10 用户口径：放卡片里侧，不要外侧）
   —— 与右上角的扫码/账号图标同一行（top:10 / 高 34），文字左缘和下面表单的 24px 对齐 */
.card-corner-link {
  position: absolute;
  top: 10px;
  left: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 6px;
}

/* 登录卡里的复选框（记住登录 / 协议）统一成同一种样子 */
.login-card input[type='checkbox'] {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--line-2);
  border-radius: 4px;
  accent-color: var(--accent);
}

.login-card .login-submit {
  width: 100%;
  margin-top: 16px;
  font-size: 16px;
}

.login-pane h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.login-pane .hint {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.field input {
  width: 100%;
}

.code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.login-submit {
  width: 100%;
  margin-top: 6px;
}

.login-status {
  margin-top: 14px;
  padding: 11px 14px;
  font-size: 13px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--muted);
}

/* 没有内容就不占地方：状态框只在真的有话要说时才出现（用户口径：不要摆没用的东西） */
.login-status:empty {
  display: none;
}

.login-status.ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 34%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.login-status.warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.login-status.err {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 34%, transparent);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}

.qr-box {
  position: relative;
  display: grid;
  place-items: center;
  /* 点一下 = 换一张新二维码（微信码只有 5 分钟有效期） */
  cursor: pointer;
  /* 二维码还是 200×200（真码出来时填满它） */
  margin: 12px auto 10px;
  width: 200px;
  height: 200px;
  padding: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
}

/* 拿到真二维码时：白底圆角卡 + 投影（和主流登录页一个观感） */
.login-qr-only.has-qr .qr-box {
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.qr-img {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.qr-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* 扫码页小标题 + 「微信扫一扫」胶囊 + 说明文案（2026-10-10 用户要求别太单调） */
.qr-head {
  margin-top: 2px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-text);
}

.qr-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 10px auto 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.qr-pill svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.qr-note {
  /* 始终占位（visibility 而不是 display）：否则二维码加载前后卡片会差一行高度，
     切屏时又会跳（2026-10-10 用户口径：卡片高度固定死） */
  visibility: hidden;
  margin: 10px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 只有真二维码在的时候才显示说明 */
/* 2026-10-11 修：这条原来没带 .on —— 子元素的 visibility:visible 会**盖掉**父屏的 visibility:hidden，
   于是切到账号 / 注册 / 开门口令那一屏时，这行"扫码关注…"还会横在卡片中间（实测截图 shots/admin-gate/1-gate-step.png）。 */
.login-qr-only.has-qr.on .qr-note {
  visibility: visible;
}

/* 二维码正中那个品牌角标（白底小方块 + logo；面积只占 3% 左右，不影响扫） */
.qr-logo {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  place-items: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.login-qr-only.has-qr .qr-logo {
  display: grid;
}

.qr-logo img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

/* 扫码页：状态文案只留在 DOM 里（排障 / 回归脚本读），界面上一个都不显示 */
.login-qr-only .login-status {
  display: none;
}

.qr-box.demo {
  border-color: var(--warn);
  color: var(--warn);
}

/* 配对码：没有"带参二维码"权限时的登录方式（关注公众号 + 发 6 位码） */
.pair-box {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.pair-box > b {
  display: block;
  margin-bottom: 6px;
  font-size: 14.5px;
}

.pair-code {
  margin: 12px 0;
  padding: 14px;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--accent-line);
  border-radius: var(--r-btn);
  user-select: all;
}

.pair-box.on {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
}

.demo-flag {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 13px;
  font-size: 12.5px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  border-radius: var(--r-btn);
}

html[data-demo='1'] .demo-flag {
  display: flex;
}

@media (max-width: 520px) {
  .login-tabs {
    grid-template-columns: 1fr;
  }
}

/* 岗位筛选条：和客户端 / 数据页用同一套查询参数（keyword / area / education） */
.more-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.more-details > summary {
  padding: 12px 18px;
  color: var(--text-2);
  font-size: 13.5px;
  cursor: pointer;
  list-style: none;
}

.more-details > summary::-webkit-details-marker {
  display: none;
}

.more-details > summary::before {
  content: "▸ ";
  color: var(--accent-text);
}

.more-details[open] > summary::before {
  content: "▾ ";
}

.more-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.more-body > section {
  padding: 36px 18px;
}

.more-body > section:first-child {
  padding-top: 28px;
}

.filter-details {
  max-width: 960px;
  margin: 14px auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.filter-details > summary {
  padding: 10px 16px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.filter-details > summary::-webkit-details-marker {
  display: none;
}

.filter-details > summary::before {
  content: "▸ ";
  color: var(--accent-text);
}

.filter-details[open] > summary::before {
  content: "▾ ";
}

.filter-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.filter-details .filter-bar {
  margin: 14px auto;
  border: 0;
  background: none;
  box-shadow: none;
}

.filter-details .filter-meta {
  margin: 0 auto 14px;
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) auto;
  gap: 10px;
  align-items: center;
  max-width: 960px;
  margin: 26px auto 0;
  padding: 14px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

.filter-bar input,
.filter-bar select {
  width: 100%;
}

.filter-meta {
  margin: 12px auto 0;
  max-width: 960px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* 岗位卡片：首页只展示最新几条，点标题跳原文 */
.job-cards {
  display: grid;
  /* 参考站：1156 内容宽里正好 4 列，卡宽 271、间距 24（和它的 flex-wrap 同款密度） */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 176px;
  padding: 14px 16px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--card-top), transparent 55%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  /* 参考站的岗位/名企/福利卡统一 8px 圆角（比我们的 18px 更紧凑，一眼能看出差别） */
  border-radius: var(--r-card);
  transition: transform 0.18s var(--ease, ease), border-color 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease);
}

.job-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2);
}

.job-card .jt {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
}

.job-card .jhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.job-card .jhead .jt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card .jdate {
  /* 参考站右上角是品牌色的发布日期，小一号、不换行 */
  color: var(--accent-text);
  font-size: 12.5px;
  white-space: nowrap;
}

.job-card .jdiv {
  height: 1px;
  margin: 2px 0;
  background: var(--line);
}

/* 卡底：公司行（圆形 logo + 公司名 + 性质），对齐参考站岗位卡下半段 */
.job-card .jco {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  min-width: 0;
}

.job-card .jlogo {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04101f;
  font-size: 14px;
  font-weight: 700;
}

/* 有真 logo 的公司：白底 + contain（和校园网申页的 logo 位一致；没表的仍走上面的字母牌） */
.job-card img.jlogo {
  display: block;
  object-fit: contain;
  padding: 2px;
  background: #fff;
}

.job-card .jname {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card .jcotype {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

/* 公司行右侧的投递链接：永远一行，不换行 */
.job-card .jco .jgo {
  flex: none;
  white-space: nowrap;
  font-size: 12.5px;
}

/* 内推码胶囊：参考站最显眼的一行；我们的内推码材料还没给，先留虚线接口位 */
.job-card .jcode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* 2026-10-10 降噪：这条"内推码：待补"整页 28 个，先是蓝底蓝边、再是虚线框都属于"每张卡都在喊"。
     现在收成一行安静的灰字（有真码时再加回胶囊样式）。 */
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-2);
  font-size: 12.5px;
}

.job-card .jcode b {
  color: var(--muted);
  font-weight: 600;
}

/* 首页岗位卡＝参考站的"公司卡"形态：2 个岗位块（标题+日期+标签）→ 公司行 → 内推码 */
.job-card.as-company {
  gap: 10px;
  /* 参考站这类卡 4 列 × 2 行（每卡 2 个岗位块）；我们公开页一公司可能只有 1 条，
     所以卡高交给内容撑，同一行的卡由栅格自动等高 */
  min-height: 176px;
}

.jc-jobs {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.je-job {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.je-job:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.job-card .jc {
  color: var(--muted);
  font-size: 13px;
}

.job-card .jrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.job-card .jtag {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--text-2);
}

/* 两枚真数据徽标：可直达网申（绿） / 快到截止日（黄） */
.job-card .jtag-ok {
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--ok);
}

.job-card .jtag-hot {
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
}

.job-card .jsalary {
  color: var(--warn);
  font-weight: 600;
}

.job-card .jfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.job-card .jgo {
  color: var(--accent-text);
  text-decoration: none;
  /* 2026-10-11 清查 P2（100 个模拟用户里 97 个命中）：原来点击区域只有 57×21px，
     低于 WCAG 2.5.8 的 24px 建议线，触屏/小鼠标不好点 → 抬到 26px 高并给一块可点底色。 */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: var(--r-sm);
}

.job-card .jgo:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* 岗位分布：复用 .bar-row / .bar-track / .bar-fill / .bar-value */
/* （原来的 .job-pager 翻页条样式已删：用户 2026-10-09 要求去掉上一页/下一页） */

/* 首页投递榜企业表的翻页条：一页 10 家、最多 50 家 */
.board-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
}

.board-pager .bp-note {
  margin-right: 6px;
}

.board-pager .bp-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}

.board-pager .bp-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent-line);
}

.board-pager .bp-btn.on {
  color: var(--accent-text);
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}

.board-pager .bp-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.job-lock {
  margin-top: 18px;
  padding: 22px 24px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), color-mix(in srgb, var(--surface) 88%, transparent);
}

.job-lock b {
  display: block;
  font-size: 16px;
}

.job-lock p {
  margin: 8px auto 16px;
  max-width: 520px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.job-lock .cta {
  justify-content: center;
}

/* 热门名企：点一张卡 = 用这家公司名筛岗位（走公开的第 1 页） */
.company-grid {
  display: grid;
  /* 参考站：4 列 / 卡宽 271 / 间距 24（和岗位卡同一套栅格） */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.company-card {
  display: flex;
  flex-direction: column;
  /* 注意别用 flex-start：flex 子项会按 max-content 定宽，中文长公司名会把卡片撑破 */
  align-items: stretch;
  /* button 的默认 nowrap 会把长公司名顶出去，这里恢复换行 */
  white-space: normal;
  gap: 8px;
  padding: 16px;
  text-align: left;
  color: var(--text);
  background: linear-gradient(180deg, var(--card-top), transparent 55%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  /* 参考站名企卡同样是 8px 圆角 */
  border-radius: var(--r-card);
}

.company-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

.company-card .cname {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

.company-card .cmeta {
  color: var(--muted);
  font-size: 12.5px;
}

.company-card .cnum {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--accent-text);
}

/* 名企卡内部：logo + 公司名 / 性质与地区胶囊 / 内推码接口位 / 两行统计 —— 逐行对齐参考站 */
.company-card .chead {
  display: flex;
  align-items: center;
  gap: 9px;
}

.company-card .clogo {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04101f;
  font-size: 16px;
  font-weight: 700;
}

.company-card .chead .cname {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  line-height: 1.4;
}

.company-card .ctags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.company-card .ccode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* 同上：名企卡也收成一行灰字 */
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-2);
  font-size: 12.5px;
}

.company-card .ccode b {
  color: var(--muted);
  font-weight: 600;
}

.company-card .cstats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.company-card .cstats b {
  color: var(--text);
  font-weight: 600;
}

.company-card .cfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  /* 参考站这张卡的底部是一行"人数 + 助手用时"，两段都不能换行 */
  font-size: 12px;
  color: var(--muted);
}

.company-card .cfoot > span {
  white-space: nowrap;
}

.company-card .cpill {
  /* 12 张卡各一个浅蓝药丸也是杂源之一 → 改成安静的小字 */
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
}

.dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.dist-block {
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.dist-block h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.dist-block .bar-label {
  width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dist-block .bar-value {
  width: 62px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* 投递阶段流：客户端里真实的 6 个阶段 */
.stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.stage {
  padding: 8px 14px;
  font-size: 13.5px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.stage.hot {
  border-color: var(--accent-line);
  color: var(--accent-text);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}

.stage.arrow {
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--muted);
}

/* 校招时间线：一份通用节奏表，不是"官方日历" */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.tl-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.tl-item.now {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent), var(--surface);
}

.tl-item b {
  display: block;
  font-size: 14px;
}

.tl-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .filter-bar {
    grid-template-columns: 1fr;
  }
}

/* 窄屏密度：公司卡与数据条改成两列，别把页面拉成一万像素 */
@media (max-width: 640px) {
  .company-grid,
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-card {
    padding: 13px 14px;
  }

  .company-card .cname {
    font-size: 13px;
  }

  /* 手机 390 宽：卡底两段（人数 + 助手用时）nowrap 会把整页撑到 448 —— 让它们换行 */
  .company-card .cfoot {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 8px;
  }

  .fact {
    padding: 13px 14px;
  }

  .fact b {
    font-size: 19px;
  }
}

.link-accent {
  color: var(--accent-text);
  text-decoration: none;
}

.link-accent:hover {
  text-decoration: underline;
}

/* 2026-10-11 清查 P2：榜单表格里的「去投递」链接点击区域只有 46×20px（<24px 高）——
   表格单元格里的链接统一抬到 26px 高 + 一块可点底色。 */
td > .link-accent {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: var(--r-sm);
}

td > .link-accent:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  text-decoration: none;
}

/* 首页卡片也吃到同一套"3D 微倾 + 内高光"（指针在卡片里时由 site.js 写 --rx/--ry/--mx/--my） */
.company-card,
.hg-fcard,
.job-card {
  position: relative;
  transition: transform 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease), box-shadow 0.2s var(--ease, ease);
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.company-card::after,
.hg-fcard::after,
.job-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 20%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease, ease);
}

.company-card.is-lit::after,
.hg-fcard.is-lit::after,
.job-card.is-lit::after {
  opacity: 0.85;
}

.company-card:hover,
.hg-fcard:hover,
.job-card:hover {
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px);
}

/* ============================ 窄屏 ============================ */
@media (max-width: 820px) {
  /* 首页：四张功能卡改两列（放这里是因为要压过前面的基础规则） */
  .hero-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  nav {
    padding: 10px 16px;
    gap: 10px;
  }

  nav .links {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  nav .links::-webkit-scrollbar {
    display: none;
  }

  nav .links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 10px;
  }

  .wrap {
    padding: 0 18px;
  }

  header.hero,
  .hero {
    padding: 48px 0 28px;
  }

  section {
    padding: 46px 0;
  }

  section::before {
    inset: 0 18px auto;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theme-fab {
    right: 14px;
    bottom: 14px;
  }

  .theme-panel {
    right: 14px;
    left: 14px;
    width: auto;
    bottom: 68px;
  }
}

@media (max-width: 520px) {
  /* 窄屏：四张功能卡竖排、月份格两行，别把中文挤成竖条 */
  .hero-cards {
    grid-template-columns: 1fr;
  }

  .hg-months {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mod,
  .plan {
    padding: 20px;
  }

  .shot {
    padding: 6px;
  }
}

/* ============================ 动效降级 ============================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .card:hover,
  .mod:hover,
  .safe:hover,
  .plan:hover,
  .btn:hover,
  button:hover {
    transform: none;
  }

  .btn.primary::after,
  button.primary::after {
    display: none;
  }
}

/* 不支持毛玻璃时退回不透明底色，保证文字对比度 */
@media (prefers-reduced-transparency: reduce) {
  nav,
  .theme-panel,
  .theme-fab {
    background: var(--bg-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ======================= 卡片材质：跟照片虚影背景咬合的磨砂玻璃 =======================
   2026-10-10（用户：卡片和按钮跟背景不搭、很别扭）——
   背景现在是"深墨蓝 + 照片虚影"，卡片继续"平涂一块深色"就会像贴上去的贴纸；
   这里统一成：半透明底 + 背景模糊 + 顶部 1px 内高光 + 向下投影（阴影带蓝、不是纯黑）。
   放在文件末尾＝优先级高于前面各段自己的卡片样式。 */
.hg-card,
.job-card,
.company-card,
.qs-tabs,
.qs-chips,
.promo,
.promo-visual,
.bento .card {
  background: linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid color-mix(in srgb, var(--line-2) 52%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 22px 44px -30px rgba(2, 6, 18, 0.9);
}

/* 悬停只提亮描边与投影，不再放大位移（满屏卡片都在位移本身也是"杂"） */
.job-card:hover,
.company-card:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 26px 52px -30px rgba(2, 6, 18, 0.95);
}

/* 按钮：去掉那圈蓝色外发光（在照片背景上像贴纸），改成"顶部内高光 + 短投影" */
.btn.primary,
button.primary {
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 22px -14px rgba(37, 99, 235, 0.75);
}

.btn.ghost,
button.ghost {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-2) 62%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 右缘悬浮条 / 分页这类"小控件"跟卡片同一套材质与圆角 */
.side-rail {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-color: color-mix(in srgb, var(--line-2) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 50px -30px rgba(2, 6, 18, 0.95);
}

/* 主按钮原来背后还有一层 blur(12px) 的霓虹光晕（在照片虚影背景上就是"贴纸"）→ 关掉；
   全站按钮圆角/材质在上面已经统一（--r-btn / 内高光 + 短投影）。 */
.btn.primary::before,
button.primary::before {
  opacity: 0;
}
/* ======================= 导航"当前页"高亮 + 点击反馈 =======================
   2026-10-10（用户：点了没什么特别的，有时候都不知道点的是哪一个）——
   ① 当前页：实底胶囊 + 蓝色文字 + 底部一道短横线（一眼看出"我在哪一页"）；
   ② 悬停：淡底 + 提亮；③ 按下：轻微下沉（模拟真实按键）。 */
nav .links a.on {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
  position: relative;
}

/* ---------- 导航右上角：已登录 = 圆形头像 + 下拉菜单 ----------
   2026-10-11 用户：「这么简陋，改为头像，登录按钮在里面」——
   头像点开是菜单：账号信息 + 常用入口 + 退出登录（按钮都在菜单里）。 */
nav .nav-user {
  position: relative;
  display: flex;
  align-items: center;
}

nav .nav-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--accent) 95%, transparent);
}

nav .nav-avatar:hover {
  filter: brightness(1.08);
}

nav .nav-avatar:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

/* 微信头像（2026-10-11）：默认 SVG 与头像图**叠在同一个格子**里 ——
   图没加载出来 / 加载失败被摘掉时，下面那颗默认头像就在原位，不会出现空洞。 */
nav .nav-avatar > svg,
nav .nav-avatar-img {
  grid-area: 1 / 1;
}

nav .nav-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

nav .nav-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: 240px;
  padding: 8px;
  text-align: left;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  animation: modalRise 0.16s var(--ease) both;
}

nav .nav-user-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-2) 55%, transparent);
}

nav .nav-avatar-lg {
  width: 38px;
  height: 38px;
  box-shadow: none;
}

/* 账号菜单里那一行"客户端投递：累计 N · 成功 M"（2026-10-11 数据打通） */
nav .nav-user-stat {
  margin: 8px 8px 4px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

nav .nav-user-id b {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  word-break: break-all;
}

nav .nav-user-id span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  /* 副标题（已登录 · 手机号账号 · 广东·深圳）宁可截断也不换行：换行会把菜单撑高一档 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav .nav-user-menu a,
nav .nav-user-menu .nav-user-out {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
}

nav .nav-user-menu a:hover,
nav .nav-user-menu .nav-user-out:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---------- 头像菜单里新增的一组行（2026-10-11 用户参考截图：「添加这些」）----------
   用户协议 / 隐私协议 / 反馈与建议 / 使用风险告知 —— 参考图那种「圆角图标块 + 文字 + 右箭头」，
   「反馈与建议」那一行右侧还有一枚「打分 · 一句话」提示（说明点进去干什么）。 */
nav .nav-user-menu {
  /* 多了这一组之后菜单更高：屏幕不够高时自己滚，别顶出视口 */
  max-height: calc(100vh - 96px);
  overflow: auto;
}

/* 「用户协议」飞层打开的那几秒把 overflow 放开，否则飞层会被裁掉（实测踩过：坐标有、画面没有） */
nav .nav-user-menu.sub-open {
  overflow: visible;
}

nav .nav-user-sep {
  height: 1px;
  margin: 6px 8px;
  background: color-mix(in srgb, var(--line-2) 55%, transparent);
}

nav .nav-user-menu .nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
}

nav .nav-user-menu .nav-row:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

nav .nav-row-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 8px;
}

nav .nav-row-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

nav .nav-row-hint {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11.5px;
}

nav .nav-row-go {
  flex: 0 0 auto;
  color: var(--muted);
}

/**
 * 退出登录（2026-10-11 用户：「退出登录按钮重新设计」）
 * 旧版是菜单底部一行加粗白字，跟上面「图标块 + 文字」的行不是一套语言。
 * 现在：同一套行结构 + **危险色**（淡红图标块 / 悬停整行泛红 / 文字转浅红）+ 上方一条分隔线。
 * ⚠️ 这段必须写在 `.nav-row` / `.nav-row:hover` **后面**：同特异度时后写的赢，
 *    放前面时悬停会被通用的蓝色 hover 盖掉（实测踩过：悬停还是蓝的）。
 */
nav .nav-user-menu .nav-row-danger {
  margin-top: 6px;
  padding: 12px 8px 8px;
  border-top: 1px solid color-mix(in srgb, var(--line-2) 45%, transparent);
  border-radius: 0 0 var(--r-btn) var(--r-btn);
}

nav .nav-row-danger .nav-row-ico {
  color: #ff9b9b;
  background: color-mix(in srgb, #ff6b6b 16%, transparent);
}

nav .nav-user-menu .nav-row-danger:hover,
nav .nav-user-menu .nav-row-danger:focus-visible {
  color: #ffb3b3;
  background: color-mix(in srgb, #ff6b6b 14%, transparent);
  outline: none;
}

nav .nav-user-menu .nav-row-danger:hover .nav-row-ico,
nav .nav-user-menu .nav-row-danger:focus-visible .nav-row-ico {
  color: #fff;
  background: color-mix(in srgb, #ff6b6b 52%, transparent);
}

/* ---------- 「用户协议」那一行的悬停飞层（2026-10-11 用户：鼠标放上去看三个选项）----------
   飞层贴在菜单**左侧**（菜单在最右缘，往右会出屏）；hover / 键盘 focus 都出，触屏点这一行直接进整份协议。 */
nav .nav-term-wrap {
  position: relative;
}

nav .nav-sub {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  z-index: 60;
  min-width: 186px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  opacity: 0;
  visibility: hidden;
  transform: translateX(4px);
  transition: opacity 0.14s var(--ease), transform 0.14s var(--ease), visibility 0.14s;
}

nav .nav-term-wrap:hover .nav-sub,
nav .nav-term-wrap:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

nav .nav-sub a {
  display: block;
  padding: 8px 10px;
  color: var(--text-2);
  font-size: 13px;
  text-decoration: none;
  border-radius: var(--r-btn);
}

nav .nav-sub a:hover,
nav .nav-sub a:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: none;
}

/* 窄屏（手机的弹窗式导航）：飞层改成"压在菜单左边"可能出屏 → 落到这一行下方 */
@media (max-width: 900px) {
  nav .nav-sub {
    right: auto;
    left: 0;
    top: calc(100% + 6px);
    max-width: calc(100vw - 40px);
  }
}

/* ---------- 「反馈与建议」弹窗（头像菜单 → 反馈与建议）----------
   遮罩与入场动画沿用联系弹窗那一套（.contact-modal / .cm-box / .cm-close-round），
   这里只写卡片本体：1-5 分 + 一句话 + 选填联系方式。 */
.fb-card {
  position: relative;
  width: 100%;
  padding: 20px 20px 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
}

.fb-title {
  margin: 0 0 6px;
  font-size: 17px;
}

.fb-sub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

.fb-stars {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.fb-star {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 7px 0;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  cursor: pointer;
}

.fb-star b {
  font-size: 14px;
}

.fb-star span {
  color: var(--muted);
  font-size: 10.5px;
}

.fb-star:hover {
  color: var(--text);
  border-color: var(--accent-line);
}

.fb-star.on {
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.fb-star.on span {
  color: rgba(255, 255, 255, 0.85);
}

.fb-field {
  display: block;
  margin-bottom: 12px;
}

.fb-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.fb-field textarea,
.fb-field input {
  width: 100%;
  padding: 9px 11px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  resize: vertical;
}

.fb-field textarea:focus,
.fb-field input:focus {
  outline: none;
  border-color: var(--accent-line);
}

.fb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ---------- 简历工作台（/ai-resume.html）的左右留白：单独一套，按官网的【一半】给 ----------
   2026-10-11 用户最终口径：「左右两边的留白不要和其他页面一样了，AI简历页单独一个样式，
   左右两边的留白缩减一半」→ 官网留白 ÷ 2：
     官网（.wrap）：左 = m+36、右 = m+76（m = max(0, (vw-1540)/2)；≥1280 的 76 含 68 的悬浮条通道）
     本页（这里）  ：左 = m/2+18、右 = m/2+38 → 宽屏正好是官网的一半；
                    1280–1659 还没宽到"减半也不碰悬浮条"，右侧只能给物理最小值 68（60 宽 + 右 8）。
   实现：≥1660 用 `width: min(100%, calc((100% + 1540px) / 2))` 居中 —— 1848 视口实测
   左 95 / 右 115，正好是官网 190 / 230 的一半，且内容右边界不与悬浮条重叠。
   历史：第一轮「简历工作台、会员中心页也是一样」补了左边 36；第二轮「留白怎么和官网的不一样」
   对齐过官网 1540 居中；第三轮按上面这条改成"单独一套、官网一半"。
   ⚠️ 居中必须写死 `width:100%`：body.app-shell 是 flex column，.page-scroll 是交叉轴子项，
   只给 auto margin 会取消 stretch、把画布缩成内容宽（2026-10-11 实测 1364→469，页面废）。
   注意：页面样式在 /ai-resume.css（另一条线），所以这条写在我们这边、用 body.ar-page 限定作用域。 */
body.ar-page .ar-wrap {
  padding-left: 18px;
}

/* 2026-10-11：三颗动作已按用户要求移进画布框内部（见 ai-resume.html / ai-resume.css），
   这里不再需要给页面顶部的标题行写任何留白规则。 */

body.ar-page .ar-work {
  margin-right: 18px;
}

/* 左右两栏（连同整个工作区）的高度：**上距导航栏 20px、下距页面底 20px**
   （2026-10-11 用户：「左栏『简历模板』、右栏『我的简历』高度不要管以前的，
   上距离导航栏 20px，下距离页面低 20px」）。
   做法：宽屏把标题行（三颗动作）改成绝对定位、不再占流内高度，工作区上下各留 20px；
   窄屏（≤1080）三栏是上下堆叠、标题行仍在流内，保持原样。 */
@media (min-width: 1081px) {
  body.ar-page .ar-wrap {
    position: relative;
  }

  body.ar-page .ar-work {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* 两栏**等高**：都从导航下 20px 一直到底部 20px——「我的简历」即使没留档，也保持和左栏一样高
     （2026-10-11 用户：「这个卡片即使什么都没有，也是和左侧高度一样的」；R25 试过"按内容自适应"被否）。
     grid 默认就是 stretch，这里明确写出来防止以后被改回去。 */
  body.ar-page .ar-rail,
  body.ar-page .ar-mine {
    align-self: stretch;
  }
}

/* 右侧悬浮条只在 ≥1280 显示（见 .side-rail 断点）：60 宽 + 右 8 = 68，内容右留白不能小于它 */
@media (min-width: 1280px) {
  body.ar-page .ar-work {
    margin-right: 68px;
  }
}

/* 宽屏（≥1660）：留白正好是官网的一半 —— 宽度取 (100% + 1540px) / 2 居中 */
@media (min-width: 1660px) {
  body.ar-page .ar-wrap {
    width: min(100%, calc((100% + 1540px) / 2));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  body.ar-page .ar-work {
    margin-right: 38px;
  }
}

@media (max-width: 820px) {
  body.ar-page .ar-wrap {
    padding-left: 9px;
  }

  body.ar-page .ar-work {
    margin-right: 9px;
  }
}

nav .links a.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

nav .links a:hover {
  color: var(--text);
}

nav .links a:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ======================= 导航的"自家特色"：轨道光束 =======================
   2026-10-10（用户：这样没有一点自己的特点；当前页之间间隔太近了）——
   ① 间距：链接间距 6 → 14px，单条内边距加大（不再挤成一排字）；
   ② 特色：导航里加一条**轨道光束**（.nav-beam）——它是我们 logo 里那条"轨道"的延续：
      一条 3px 的渐变光带，停在"当前页"那一项下面；鼠标在导航里移动时它会顺着过去，
      鼠标离开就滑回当前页。既是"我在哪一页"的指示，也是鼠标位置的即时反馈。
   ③ 当前页不再用整块实底（那样太像通用后台），只保留蓝字 + 光束落点。 */
nav .links {
  gap: 14px;
}

nav .links a {
  padding: 8px 14px;
}

nav .links a.on {
  color: var(--accent-text);
  background: none;
  box-shadow: none;
}

nav .links a.on::after {
  display: none;
}

nav .links .nav-beam {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  width: var(--beam-w, 0px);
  border-radius: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-2) 78%, transparent);
  box-shadow: 0 0 12px -2px var(--neon-2);
  transform: translateX(var(--beam-x, 0));
  transition: transform 0.34s var(--ease, ease), width 0.34s var(--ease, ease), opacity 0.2s ease;
  opacity: 0.95;
}

nav .links .nav-beam::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px var(--accent-2);
}

@media (prefers-reduced-motion: reduce) {
  nav .links .nav-beam {
    transition: none;
  }
}

/* ======================= 2026-10-10 导航最终口径：与项目语言统一 =======================
   用户（样式 / 字体 / 点击 / 已选择和整个项目不搭配）——
   字体 13.5、圆角 10（按钮档）、间距收紧；当前页=淡蓝底+主色字+淡描边；
   悬停=浅底提亮；按下=下沉。跟随鼠标的光束/白点停用（旧脚本若仍注入也隐藏）。 */
nav .links {
  gap: 8px;
  font-size: 13.5px;
}

nav .links a {
  padding: 7px 12px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  transition: color 0.18s var(--ease, ease), background-color 0.18s var(--ease, ease),
    border-color 0.18s var(--ease, ease), transform 0.12s ease;
}

nav .links a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

nav .links a:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

nav .links a.on {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

nav .links a.on:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

nav .links a.on::after {
  display: none;
}

nav .links .nav-beam {
  display: none !important;
}

/* 2026-10-10 用户要求：官网下线「换主题」——即使浏览器缓存了旧脚本，也不显示 */
.theme-fab,
.theme-panel {
  display: none !important;
}

/* ======================= 2026-10-10 导航口径 v3：大气版 =======================
   用户（"怎么越做越小气"）：上一版收得太紧。这一版把留白与字号放大——
   导航 68 高、品牌 16.5 / logo 28、链接 14.5 / 间距 18 / 内边距 9×16；
   默认文字用 --text-2（比 muted 亮一档）；当前页 = 渐变淡胶囊 + 加粗 + 淡描边 + 轻投影；
   悬停 = 浅底提亮；按下 = 下沉。跟随鼠标的光束/白点保持停用。 */
nav {
  height: 68px;
  min-height: 68px;
  padding: 0 56px;
}

nav .brand {
  font-size: 16.5px;
  gap: 12px;
}

nav .brand img {
  width: 28px;
  height: 28px;
}

nav .links {
  gap: 18px;
  font-size: 14.5px;
}

nav .links a {
  padding: 9px 16px;
  border-radius: var(--r-btn);
  color: var(--text-2);
  font-weight: 500;
  border: 1px solid transparent;
}

nav .links a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

nav .links a:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

nav .links a.on {
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--accent-2) 14%, transparent)
  );
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}

nav .links a.on:hover {
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent-2) 18%, transparent)
  );
}

@media (max-width: 900px) {
  nav {
    height: 60px;
    min-height: 60px;
    padding: 0 16px;
  }
  nav .brand {
    font-size: 15.5px;
  }
  nav .brand img {
    width: 26px;
    height: 26px;
  }
  nav .links {
    gap: 12px;
    font-size: 13.5px;
  }
  nav .links a {
    padding: 8px 12px;
  }
}

/* ======================= 2026-10-10 导航「登录 / 注册」重新设计 =======================
   用户（"这个重新设计"）——原来是一颗扁平的 ghost 小方块。改成渐变主按钮：
   内高光 + 轻投影 + 悬停上浮 + 按下回弹；只作用于"未登录"的那个链接，
   登录后的「退出」按钮（#navLogout）保持原来的幽灵样式。 */
nav .nav-actions a[href="/login.html"] {
  position: relative;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cta-text);
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
  border-radius: var(--r-btn);
  background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--cta-to) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

nav .nav-actions a[href="/login.html"]:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--cta-to) 95%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

nav .nav-actions a[href="/login.html"]:active {
  transform: translateY(1px);
  filter: brightness(0.98);
}

nav .nav-actions a[href="/login.html"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  nav .nav-actions a[href="/login.html"] {
    padding: 9px 16px;
    font-size: 13.5px;
  }
}

/* ============================ 应用壳布局 ============================
   2026-10-10（用户：最顶上的这一部分是固定住的，下面的内容怎么上下滑动都和这个无关）：
   带 .app-shell 的页面 = 顶栏固定在视口顶部，内容放进 .page-scroll 里自己滚。
   这样滚动的是内容区本身，内容不会钻到顶栏下面，遮罩/弹窗也只覆盖内容区、跟顶栏互不影响。 */
body.app-shell {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app-shell nav {
  flex: 0 0 auto;
}

body.app-shell .page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}