/* ===========================================================
   EduCompass — 视觉系统
   克制、留白、可读。浅色深色自动跟随系统。
   =========================================================== */

:root {
  /* ── 字体 ────────────────────────────────────────────────
     中文永远走系统栈（PingFang SC / 微软雅黑），所以拉丁字体必须挑
     能和 PingFang 并排站得住的：x-height 接近、字重接近、不能是压缩体。
     之前的 Barlow Condensed 没有中文字形，中文标题一直在偷偷回落，
     等于给大多数用户看的根本不是选定的那套字。 */
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Sora", "PingFang SC", "Microsoft YaHei", var(--font-sans);
  --font-cond: var(--font-display);        /* 旧别名，逐步淘汰 */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── 字号：9 级，比例 1.2 ─────────────────────────────
     替代原来散落的 45 个字号。不在这张表上的字号都算 bug。 */
  --t-display: clamp(34px, 5vw, 52px);
  --t-h1:      clamp(27px, 3.6vw, 34px);
  --t-h2:      clamp(22px, 2.6vw, 26px);
  --t-h3:      20px;
  --t-lead:    18px;
  --t-body:    16px;
  --t-sm:      14px;
  --t-micro:   13px;
  --t-label:   12px;

  /* ── 间距：4px 基数，9 级 ─────────────────────────────
     替代原来 40 个 margin / 35 个 padding / 22 个 gap 值。 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* 正文行宽上限。原来能跑到 136 字符，眼睛换行会丢行。 */
  --measure: 68ch;

  /* ── 中性色：暖白纸感 ─────────────────────────────────
     原来是带蓝味的冷灰（#F4F7FB），配上纯蓝强调色，整体偏"科技产品"。
     换成微暖的象牙白，同一套蓝立刻读起来像出版物而不是仪表盘。
     交互态（hover / 选中）仍然用蓝色调，那是语义，不跟着变暖。 */
  --bg:            #F8F6F2;
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     #F1EDE6;
  --bg-hover:      #EAF1FB;
  --surface-line:  #E6E0D6;
  --surface-line-strong: #CFC6B7;
  /* 测评路径图的连接线。它不是装饰性描边，而是这张图要表达的东西本身，
     所以按「非文本对比度 ≥3:1」取值，比 --surface-line-strong 明显更实。 */
  --ap-line:       #8A8372;

  --text:          #0F1B2D;
  --text-secondary:#55657E;
  --text-tertiary: #5E6B7E;
  --heading:       #0F1B2D;

  /* ── 品牌：一个蓝色家族，取自罗盘标志 ─────────────────
     原来同屏有三种蓝（青 #00bcd4、深蓝 #005991、标志蓝 #1b3a6b）
     外加一个绿色主按钮，看起来像三个产品拼在一起。现在只留这一支。 */
  --deep:          #16346B;   /* 标题、导航选中态 */
  --accent:        #2F6FC4;   /* 主操作色：按钮与链接唯一的蓝，白底 5.02:1 */
  --accent-hover:  #16346B;
  --accent-soft:   #EAF1FB;
  --accent-text:   #ffffff;
  --cyan:          #7FB3E8;   /* 仅装饰：分隔条、进度条，不承载文字 */

  /* ── 语义色：三段旅程各自一个颜色，用户看多了会形成记忆 ──
     蓝 = 探索 / 绿 = 体验 / 琥珀 = 决定。灰 = 传统路径、次要信息。
     只有这三个，不给每个节点配一种颜色——那是彩虹不是系统。
     深色值供文字用（浅底上 ≥4.5:1），soft 供底色用。 */
  --explore:       #2F6FC4;
  --explore-soft:  #E8F0FA;
  --experience:    #3F6B5E;
  --experience-soft:#E6EEEA;
  --decide:        #8A5A14;
  --decide-soft:   #F6EEDF;
  --muted-path:    #6E695E;   /* 传统路径：不批判，只是压低。暖底上 5.0:1，够做正文 */

  /* 主按钮跟品牌同色。原来的绿色 #237a3f 是从参考站带过来的，
     和蓝色标志放一起像两个产品，现在绿色只回去表示"好"。 */
  --cta:           #2F6FC4;
  --cta-hover:     #16346B;
  --cta-text:      #ffffff;

  /* 封面渐变收进同一支蓝。白字对最亮端仍需 ≥4.5:1。 */
  --grad-hero:     linear-gradient(160deg, #1B3E77 0%, #0C1E3F 100%);
  --grad-band:     linear-gradient(120deg, #1B3E77 0%, #12305F 100%);
  --grad-deco:     linear-gradient(120deg, #7FB3E8 0%, #2F6FC4 100%);

  /* 语义色只表示含义，不做装饰 */
  --good:          #1E7A4C;
  --good-soft:     #E8F5EE;
  --mid:           #986209;
  --mid-soft:      #FBF2E0;
  --hard:          #B3352B;
  --hard-soft:     #FBECEA;
  --faith:         #6b46c1;
  --faith-soft:    rgba(107, 70, 193, 0.10);

  /* 标志配色。--logo-accent 是罗盘针的橙，全站唯一的暖色，
     一屏出现超过两次就不再是重点了。 */
  --logo-deep:   #16346B;
  --logo-mid:    #2F6FC4;
  --logo-light:  #7FB3E8;
  --logo-accent: #C9541C;
  --logo-face:   #ffffff;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1:  0 1px 2px rgba(15,27,45,.04), 0 2px 8px rgba(15,27,45,.05);
  --shadow-2:  0 2px 6px rgba(15,27,45,.05), 0 10px 28px rgba(15,27,45,.09);
  --shadow-3:  0 12px 28px rgba(15,27,45,.12), 0 28px 64px rgba(15,27,45,.16);

  --maxw: 1160px;
  /* 顶栏比正文列宽：8 个导航项 + 账户 + 语言放不进 1160 会折行 */
  --maxw-bar: 1400px;
  /* 统一页边距：窄屏 1.1rem，宽屏最多 5rem，避免内容贴边 */
  --gutter: clamp(1.1rem, 5.5vw, 5rem);
  --dur: .22s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 深色不是把浅色反过来：底色带蓝味，品牌蓝整体提亮到能在深底上读。 */
    --bg:            #0D131C;
    --bg-elevated:   #161F2B;
    --bg-sunken:     #141C27;
    --bg-hover:      #1D2938;
    --surface-line:  #24303F;
    --surface-line-strong: #35455A;
    --ap-line:       #5B6E86;

    --text:          #E9EFF8;
    --text-secondary:#A7B6CB;
    --text-tertiary: #7C8CA3;
    --heading:       #E9EFF8;

    --deep:          #A9D2F5;
    --accent:        #7FB3E8;
    --accent-hover:  #A9D2F5;
    --accent-soft:   #17293F;
    --accent-text:   #0D131C;
    --cyan:          #7FB3E8;

    /* 语义色的深色版：同样是蓝/绿/琥珀，但提亮到能在深底上读 */
    --explore:       #7FB3E8;
    --explore-soft:  #17293F;
    --experience:    #86C2AE;
    --experience-soft:#16261F;
    --decide:        #E0B054;
    --decide-soft:   #2A2213;
    --muted-path:    #8D97A6;

    --cta:           #7FB3E8;
    --cta-hover:     #A9D2F5;
    --cta-text:      #0D131C;

    --grad-hero:     linear-gradient(160deg, #16346B 0%, #0A1730 100%);
    --grad-band:     linear-gradient(120deg, #16346B 0%, #0F2551 100%);
    --grad-deco:     linear-gradient(120deg, #7FB3E8 0%, #2F6FC4 100%);

    --good:          #57C98A;  --good-soft: #15271D;
    --mid:           #E0B054;  --mid-soft:  #2A2213;
    --hard:          #F08076;  --hard-soft: #2C1917;
    --faith:         #b794f6;  --faith-soft: rgba(183, 148, 246, .16);

    --logo-deep:   #A9D2F5;
    --logo-mid:    #7FB3E8;
    --logo-light:  #CBE7FA;
    --logo-accent: #FF9A63;
    --logo-face:   #0D131C;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
    --shadow-3: 0 18px 44px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }

/* hidden 属性必须压过组件自身的 display，否则徽标等元素藏不住 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

h1, h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--heading);
}
h3, h4 { margin: 0; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--heading); }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); letter-spacing: -0.025em; }
h3 { font-family: var(--font-cond); font-size: 1.22rem; letter-spacing: .01em; }
p  { margin: 0 0 .8em; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 焦点可见性：键盘用户必须始终看得见自己在哪里 */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--accent-text);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 顶栏 ───────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--surface-line);
}
.topbar__inner {
  max-width: var(--maxw-bar); margin: 0 auto;
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem var(--gutter); min-height: 54px;
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.06rem; color: var(--text);
  letter-spacing: -0.02em; flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand .logo { flex-shrink: 0; display: block; }
.brand__name { font-family: var(--font-display); letter-spacing: -.02em; }
.brand__name b { font-weight: inherit; color: var(--logo-deep); }
.brand__name i { font-style: normal; font-weight: inherit; color: var(--logo-mid); }
.brand__sub { font-size: .74rem; color: var(--text-tertiary); font-weight: 400; }

/* 绝不换行。以前是 flex-wrap: wrap，宽度差几像素就会把最后一项甩到第二行，
   顶栏从 54px 撑到 95px——比放不下更难看。放不下就横向滚。 */
.nav {
  display: flex; gap: .15rem; margin-left: auto; flex-wrap: nowrap;
  min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
/* 账户与语言独立成组：它们绝不能跟着 nav 一起横向滚走 */
.topbar__actions { display: flex; align-items: center; gap: .1rem; flex-shrink: 0; }
/* 我的清单：和账户按钮同一族，但压低存在感，不跟主 CTA 抢注意力 */
.acctbtn--ghost {
  border-color: var(--surface-line-strong); color: var(--text-secondary); font-weight: 600;
}
.acctbtn--ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent); }
/* 图标只在按钮塌成方块（≤480px）时才需要——有文字的时候它纯属占宽度，
   而顶栏在 1440px 上就已经只剩十来像素富余了。 */
.acctbtn--ghost > span[aria-hidden] { display: none; }
@media (max-width: 480px) { .acctbtn--ghost > span[aria-hidden] { display: inline-flex; } }
.acctbtn--ghost[aria-current="page"] {
  background: var(--accent-soft); border-color: var(--accent-soft); color: var(--deep); font-weight: 700;
}
.nav__link {
  position: relative;
  padding: .42rem .62rem; border-radius: var(--radius-sm);
  font-size: .875rem; color: var(--text-secondary); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
/* 选中态用 --deep 而不是 --accent：accent 压在 accent-soft 上只有 4.41:1，
   deep 是 10.63:1，而且深色本来就该是选中态的语义。 */
.nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--deep); font-weight: 700; }
/* 导航栏的账户按钮 */
.acctbtn {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  margin-left: .45rem; padding: .34rem .7rem;
  font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: transparent; color: var(--accent); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acctbtn:hover { background: var(--accent); color: var(--accent-text); }

.langswitch {
  display: inline-flex; align-items: center; gap: 0; margin-left: .5rem; flex-shrink: 0;
  border: 1px solid var(--surface-line-strong); border-radius: var(--radius-sm); padding: 2px;
  background: var(--bg-elevated);
}
.langswitch button {
  border: none; background: none; font: inherit; font-size: .78rem; font-weight: 700;
  padding: .24rem .6rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-tertiary);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.langswitch button:hover { color: var(--text); }
.langswitch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

.nav__badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: .3rem;
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-sm); font-size: .68rem; font-weight: 700; text-align: center;
  line-height: 18px; vertical-align: 1px;
}

/* 窄屏：导航换到第二行并横向滚动，避免竖着堆成一大坨把内容顶下去 */
@media (max-width: 1360px) { .brand__sub { display: none; } }
/* ≥　940px：导航单行排完，但必须收紧。
   不设上界：1361px 以上 brand__sub 会显出来，而容器被 --maxw-bar 封顶，
   屏幕越宽导航可用宽反而越少——宽屏同样会溢出。
   940 是按当前五项量出来的：900px 上英文刚好齐平，880px 溢 7px，
   留一档余量。主导航从七项收到五项之前这个数是 1240。 */
@media (min-width: 940px) {
  .nav__link { padding: .38rem .45rem; font-size: .82rem; }
  .nav { gap: .08rem; }
  .nav__sep { margin: var(--s2) var(--s1); }
  .acctbtn { padding: .3rem .55rem; font-size: .75rem; }
  .acctbtn span[aria-hidden] { display: none; }
  .langswitch button { padding: .22rem .45rem; font-size: .74rem; }
  .topbar__inner { gap: .4rem; }
}

/* ≤939px：一行装不下了，整条导航移到第二行占满宽度。
   以前这个断点在 720px，中间那段把导航压成 250px 宽的横向滚动条，
   等于把一半的入口藏了起来。之后为了塞下七项一路提到 1239，
   现在主导航只有五项，收回 939——1000px 的笔记本重新回到单行。 */
@media (max-width: 939px) {
  .topbar__inner {
    position: relative;
    flex-wrap: wrap; gap: .35rem; padding: .5rem .9rem .35rem;
  }
  .brand { flex: 1; min-width: 0; overflow: hidden; }
  .topbar__actions { margin-left: auto; }
  .brand__sub { display: none; }
  .nav {
    order: 3; margin-left: 0; width: 100%;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: .2rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  /* 右缘淡出，告诉用户后面还有——否则"探索大…"被切一半看着就是排版坏了。
     滚到底时由 JS 摘掉 .nav--more，淡出随之消失。 */
  .nav.nav--more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .nav__link { flex: 0 0 auto; padding: .38rem .6rem; font-size: .84rem; }
  .acctbtn { margin-left: .3rem; padding: .3rem .55rem; font-size: .74rem; }
  .acctbtn span[aria-hidden] { display: none; }
  .langswitch { margin-left: .25rem; }
  .langswitch button { padding: .22rem .48rem; font-size: .74rem; }
}

/* ── 首页封面 ───────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: min(72vh, 660px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  text-align: center;
  background: var(--grad-hero);
  color: #fff;
  border-bottom: none;
}
/* 极光层：两团柔和的光晕让纯色渐变有纵深。
   注意最亮处仍不能超过 #0a7286，否则白字对比度掉到 4.5 以下。 */
.hero::before {
  content: ''; position: absolute; inset: -20%; pointer-events: none;
  background:
    /* 三层极光的不透明度是算出来的：即使三层完全重叠、再叠上斜纹，
       白字对底色仍有 4.64:1，仍然过 AA。调高任何一层都会跌破 4.5。 */
    /* 三层极光收进新的蓝色家族。底色 #1B3E77 白字 10.3:1，
       余量足够，所以这里可以比旧版更明显一点。 */
    radial-gradient(38% 46% at 22% 18%, rgba(127,179,232,.20), transparent 62%),
    radial-gradient(42% 40% at 82% 74%, rgba(47,111,196,.30), transparent 66%),
    radial-gradient(30% 34% at 68% 8%,  rgba(169,210,245,.12), transparent 60%);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%,-2%,0) scale(1.06); }
  100% { transform: translate3d(-2%,2.5%,0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* 斜向细纹 + 底部渐隐，衔接下一屏 */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, transparent 74%, rgba(0,40,66,.28) 100%);
}
/* 首屏改成一列 flex + 单一 gap。原来六段间距是 25/8/19/21/31/74，
   六个值没有一个落在间距梯度上，看起来就是"每段各调各的"。 */
.hero__inner {
  max-width: 780px; margin: 0 auto; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--s5);
}
.hero__eyebrow {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin: 0;
}
.hero__compass {
  display: inline-block; line-height: 0; margin: 0;
  filter: drop-shadow(0 6px 26px rgba(0,0,0,.28));
  animation: floaty 7s ease-in-out infinite;
}
.hero__compass svg { width: clamp(62px, 11vw, 92px); height: auto; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .hero__compass { animation: none; } }

.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--t-display); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.08; margin: 0; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}

.hero__title {
  font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 400; color: rgba(255,255,255,.94);
  letter-spacing: .05em; margin: 0 0 1.1rem;
}
.hero__brandline {
  font-family: var(--font-cond);
  font-size: clamp(1.05rem, 2.5vw, 1.45rem); font-weight: 600;
  color: rgba(255,255,255,.95); letter-spacing: .06em; margin: 0 0 1.15rem;
}
.hero__rule {
  width: 66px; height: 4px; margin: 0 auto 1.3rem;
  background: rgba(255,255,255,.85);
}
.hero__lede {
  font-size: clamp(1rem, 1.9vw, 1.2rem); color: rgba(255,255,255,.95);
  line-height: 1.7; max-width: 46ch; margin: 0;
}
.hero__cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin: var(--s2) 0 0; }
/* .btn--hero 已删除：它被系统层的 .btn 覆盖，改用 .btn--lg */

.hero__stats {
  display: flex; justify-content: center; gap: clamp(1.2rem, 5vw, 3rem); flex-wrap: wrap;
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.28);
}

/* ── 第二屏：为什么方向重要 ─────────────────────────── */
.why {
  position: relative;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--surface-line);
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}
.why::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-deco);
}
.why__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.why__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.15; color: var(--heading); margin: 0 0 1.1rem;
}
.why__title::after {
  content: ''; display: block; width: 60px; height: 4px; margin: 1rem auto 0;
  background: var(--grad-deco);
}
.why__body {
  font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.85;
  color: var(--text-secondary); max-width: 42ch; margin: 1.5rem auto 0;
}
.why__stats {
  display: flex; justify-content: center; gap: clamp(1.4rem, 6vw, 3.5rem);
  flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 1px solid var(--surface-line);
}
.wstat__n {
  font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.wstat__l { font-size: .78rem; color: var(--text-tertiary); margin-top: .15rem;
  text-transform: uppercase; letter-spacing: .08em; }

/* ── 六步路径 Student → … → Future ─────────────────── */
.journey { padding: clamp(2.8rem, 6vw, 4.5rem) var(--gutter); background: var(--bg); }
.journey__inner { max-width: var(--maxw); margin: 0 auto; }

.jn {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  position: relative;
}
/* 连接线挂在每个节点上（而不是容器上），横向滚动时才会跟着内容走 */
.jn__item { position: relative; z-index: 1; }
.jn__item + .jn__item::before {
  content: ''; position: absolute; top: 30px; right: 50%; left: -50%; height: 3px;
  background: var(--cyan); opacity: .32; z-index: 0;
}
.jn__node {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .3rem; padding: 0 .5rem; color: inherit; text-decoration: none; height: 100%;
}
.jn__node:hover { text-decoration: none; }
.jn__dot {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--bg-elevated); border: 3px solid var(--cyan);
  box-shadow: var(--shadow-1); margin-bottom: .35rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.jn__node:hover .jn__dot { transform: translateY(-4px) scale(1.06); box-shadow: var(--shadow-2); }
.jn__node--start .jn__dot { background: var(--grad-deco); border-color: transparent; }
.jn__en {
  font-family: var(--font-cond); font-size: 1.12rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
}
.jn__zh { font-size: .875rem; font-weight: 600; color: var(--heading); }
.jn__d { font-size: .76rem; color: var(--text-tertiary); line-height: 1.5; max-width: 17ch; }

/* 窄屏：改成横向可滚动的一条路径 */
@media (max-width: 860px) {
  .jn {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .2rem; padding-bottom: .6rem; scrollbar-width: none;
  }
  .jn::-webkit-scrollbar { display: none; }
  .jn__item { scroll-snap-align: center; }
  .jn__d { display: none; }
  /* 露出下一个节点的一部分，让"可以左右滑"这件事自己说明白 */
  .jn__dot { width: 52px; height: 52px; font-size: 1.3rem; }
  .jn__item + .jn__item::before { top: 26px; }
}
@media (max-width: 860px) { .jn { grid-auto-columns: 40%; } }
@media (max-width: 480px) { .jn { grid-auto-columns: 46%; } }
.hstat__n {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 700; letter-spacing: -.03em;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.hstat__l { font-size: .78rem; color: rgba(255,255,255,.93); margin-top: .12rem;
  text-transform: uppercase; letter-spacing: .08em; }

.hero__scroll {
  margin-top: 2rem; font-size: .78rem; color: rgba(255,255,255,.93);
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: .2rem;
}
.hero__scroll span:last-child { animation: bob 2s ease-in-out infinite; font-size: 1.1rem; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll span:last-child { animation: none; } }

/* 首页模块卡 */
.modcard {
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  padding: 1.15rem 1.2rem; border-radius: var(--radius-lg);
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  box-shadow: var(--shadow-1); color: inherit; position: relative;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.modcard::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-deco); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.modcard:hover::before, .modcard:focus-visible::before { opacity: 1; }
.modcard:hover { text-decoration: none; box-shadow: var(--shadow-2);
  border-color: var(--surface-line-strong); transform: translateY(-2px); }
.modcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.modcard__icon { font-size: 1.5rem; line-height: 1; }
.modcard__step { font-size: .72rem; font-weight: 700; color: var(--accent);
  letter-spacing: .09em; text-transform: uppercase; }
.modcard__t { font-family: var(--font-cond); font-size: 1.22rem; font-weight: 700; letter-spacing: .01em; }
.modcard__d { font-size: .845rem; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.modcard__go { font-size: .82rem; color: var(--accent); font-weight: 500; }

/* ── 布局 ───────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--gutter) 5rem; }
/* 首页 editorial 段落用的版心：hero 之后直接进内容，不要再压一段顶部留白 */
.wrap--ed { padding-top: 0; padding-bottom: clamp(2rem, 5vw, 3.5rem); }

/* 窄屏的首屏高度：585px 占掉 812 视口的七成，往下什么都看不见。
   「往下看」在手机上本来就是多余的——内容就在下面，人会滑。
   去掉它再收一点上下留白，首屏回到六成左右。 */
@media (max-width: 560px) {
  /* min-height: min(72vh,660px) 是撑高的真正原因，只改 padding 没用 */
  .hero { min-height: 0; padding-top: 2rem; padding-bottom: 2.25rem; }
  .hero__scroll { display: none; }
}
@media (max-width: 480px) { .wrap { padding: 1.25rem var(--gutter) 4rem; } }
/* 首页自带整幅封面，外层容器不能再加内边距和宽度限制 */
.wrap--flush { max-width: none; padding: 0 0 3rem; }
.wrap--flush .wrap { max-width: var(--maxw); padding-top: 2.5rem; }
.view { animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { margin-bottom: 1.5rem; max-width: 65ch; }
.page-head--slim { margin-bottom: 1rem; }
.page-head--slim h1 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.05rem); }
.page-head--slim p { font-size: .93rem; margin-bottom: 0; }
.page-head p { color: var(--text-secondary); font-size: 1.02rem; margin-bottom: 0; }
.eyebrow {
  display: inline-block; font-family: var(--font-cond);
  font-size: 1.18rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent); margin-bottom: .5rem; line-height: 1.3;
  text-transform: uppercase;
}
@media (max-width: 560px) { .eyebrow { font-size: .95rem; } }

/* ── 数据时效提示 ───────────────────────────────────── */
.freshness {
  display: flex; align-items: flex-start; gap: .7rem;
  background: var(--mid-soft); border: 1px solid color-mix(in srgb, var(--mid) 28%, transparent);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.5rem;
  font-size: .855rem; color: var(--text-secondary); line-height: 1.5;
}
.freshness strong { color: var(--text); font-weight: 600; }
.freshness__icon { flex-shrink: 0; font-size: 1rem; line-height: 1.45; }

/* 折叠版：默认只占一行，点开才展开全文 */
.datanote { margin-bottom: 1rem; }
.datanote > summary {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  list-style: none; font-size: .8rem; color: var(--text-tertiary);
  padding: .3rem .6rem; border-radius: var(--radius-pill); background: var(--bg-sunken);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.datanote > summary::-webkit-details-marker { display: none; }
.datanote > summary:hover { background: var(--bg-hover); color: var(--text-secondary); }
.datanote > summary::after { content: '展开'; font-size: .74rem; opacity: .7; }
.datanote[open] > summary::after { content: '收起'; }
.datanote__body {
  margin-top: .55rem; font-size: .845rem; line-height: 1.6; color: var(--text-secondary);
  background: var(--mid-soft); border-left: 3px solid var(--mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .75rem .9rem;
}
.datanote__body strong { color: var(--text); }

/* ── 按钮 ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
  font: inherit; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em;
  padding: .62rem 1.15rem; border-radius: var(--radius-sm);
  border: 1px solid var(--surface-line-strong);
  background: var(--bg-elevated); color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform .1s var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
/* 行动按钮用绿色，与 waicy 一致；文案为英文时转大写，中文不转 */
.btn--primary {
  background: var(--cta); color: var(--cta-text); border-color: transparent; font-weight: 700;
}
.btn--primary:hover { background: var(--cta-hover); }
:root[lang="en"] .btn, html[lang="en"] .btn { text-transform: uppercase; letter-spacing: .07em; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--sm { padding: .4rem .8rem; font-size: .76rem; letter-spacing: .03em; }
.btn--block { width: 100%; }
.btn--danger { color: var(--hard); border-color: color-mix(in srgb, var(--hard) 40%, transparent); }
.btn--danger:hover { background: var(--hard-soft); }

/* ── 表单控件 ───────────────────────────────────────── */
label { font-size: .855rem; font-weight: 500; color: var(--text); }

.field { margin-bottom: 1.1rem; }
.field > label { display: block; margin-bottom: .4rem; }
.field__hint { font-size: .775rem; color: var(--text-tertiary); margin-top: .32rem; line-height: 1.45; }

input[type="text"], input[type="search"], select, textarea {
  width: 100%; font: inherit; font-size: .9rem;
  padding: .58rem .8rem;
  color: var(--text); background: var(--bg-elevated);
  border: 1px solid var(--surface-line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
select { cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }

.searchbar { position: relative; }
.searchbar input {
  padding-left: 2.4rem; font-size: 1rem; padding-top: .72rem; padding-bottom: .72rem;
  border-radius: var(--radius-sm);
}
.searchbar__icon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); pointer-events: none; font-size: .95rem;
}
.searchbar__clear {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  border: none; background: var(--bg-sunken); color: var(--text-secondary);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: .8rem;
  display: grid; place-items: center; padding: 0;
}
.searchbar__clear:hover { background: var(--surface-line-strong); }

/* 复选/单选组 */
.checks { display: flex; flex-direction: column; gap: .1rem; }
.check {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .34rem .45rem; border-radius: var(--radius-sm);
  cursor: pointer; font-size: .855rem; font-weight: 400; color: var(--text-secondary);
  transition: background var(--dur) var(--ease);
}
.check:hover { background: var(--bg-hover); color: var(--text); }
.check input { margin: .28rem 0 0; accent-color: var(--accent); flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; }
.check__count { margin-left: auto; font-size: .74rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

input[type="range"] {
  width: 100%; accent-color: var(--accent); cursor: pointer; height: 22px;
}

/* ── 权重面板 ───────────────────────────────────────── */
.weights {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-1);
  margin-bottom: 1.25rem;
}
.weights__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.weights__head h2 { font-size: 1.02rem; }
.weights__head p { font-size: .82rem; color: var(--text-tertiary); margin: 0; }
.weights__grid {
  display: grid; gap: .75rem 1.5rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.weight__row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.weight__row label { font-size: .83rem; }
.weight__val { font-size: .76rem; color: var(--accent); font-weight: 600; }
.weight__val[data-level="0"] { color: var(--text-tertiary); }

/* ── 结果布局 ───────────────────────────────────────── */
.explore { display: grid; grid-template-columns: 268px 1fr; gap: 1.75rem; align-items: start; }
@media (max-width: 900px) { .explore { grid-template-columns: 1fr; } }

.filters {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 1.1rem; box-shadow: var(--shadow-1);
  position: sticky; top: 74px; max-height: calc(100vh - 96px); overflow-y: auto;
}
@media (max-width: 900px) { .filters { position: static; max-height: none; } }
@media (max-width: 420px) {
  .bar { grid-template-columns: 84px 1fr 28px; font-size: .715rem; }
  .card__foot .btn { flex: 1 1 auto; }
}
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.filters__head h2 { font-size: .96rem; }

.fgroup { border-top: 1px solid var(--surface-line); padding: .55rem 0; }
.fgroup:first-of-type { border-top: none; }
.fgroup > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: .3rem 0; font-size: .855rem; font-weight: 600;
  list-style: none; color: var(--text);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after {
  content: '›'; font-size: 1.15rem; color: var(--text-tertiary);
  transition: transform var(--dur) var(--ease); transform: rotate(90deg);
}
.fgroup:not([open]) > summary::after { transform: rotate(0deg); }
.fgroup__body { padding-top: .4rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .34rem;
  background: var(--accent-soft); color: var(--deep);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-sm); padding: .24rem .5rem .24rem .68rem;
  font-size: .78rem; font-weight: 500;
}
.chip button {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 2px 3px; border-radius: 50%; opacity: .85;
}
.chip button:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 20%, transparent); }

.toolbar {
  position: sticky; top: 54px; z-index: 30;
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .7rem 0 .6rem; margin-bottom: .2rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.toolbar .searchbar { flex: 1 1 220px; min-width: 0; }
.toolbar .searchbar input { padding-top: .55rem; padding-bottom: .55rem; font-size: .92rem; }
@media (max-width: 720px) { .toolbar { top: 84px; } }

.toolbar__btn { position: relative; }
.toolbar__btn .pill {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: .15rem; background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-sm); font-size: .68rem; font-weight: 700; line-height: 1;
}

/* 偏好面板：默认收起，摘要一行说明当前设置 */
.prefs { margin-bottom: 1rem; }
.prefs > summary {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none;
  padding: .6rem .9rem; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  font-size: .865rem; box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease);
}
.prefs > summary::-webkit-details-marker { display: none; }
.prefs > summary:hover { border-color: var(--surface-line-strong); }
.prefs__label { font-weight: 600; flex-shrink: 0; }
.prefs__summary {
  color: var(--text-tertiary); font-size: .82rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.prefs__chev { margin-left: auto; color: var(--text-tertiary); font-size: 1.05rem;
  transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.prefs[open] .prefs__chev { transform: rotate(90deg); }
.prefs .weights { margin: .5rem 0 0; }

.results__bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.results__count { font-size: .875rem; color: var(--text-secondary); }
.results__count strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .results__count .muted-note { display: none; } }
.results__sort { margin-left: auto; display: flex; align-items: center; gap: .45rem; }
.results__sort label { font-size: .8rem; color: var(--text-tertiary); }
.results__sort select { width: auto; font-size: .82rem; padding: .34rem 1.9rem .34rem .65rem; }

.cards { display: grid; gap: .85rem; }
.cards--grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

/* 紧凑卡片：只放做初筛需要的信息，其余全部收进详情抽屉 */
.ccard {
  position: relative; display: flex; gap: .85rem; align-items: flex-start;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius); padding: .9rem 1rem;
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform .12s var(--ease);
}
.ccard:hover { box-shadow: var(--shadow-2); border-color: var(--surface-line-strong); }
.ccard:active { transform: scale(.994); }
.ccard:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ccard__main { flex: 1; min-width: 0; }
.ccard__h { font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit; }
.ccard__title {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; color: var(--text);
  background: none; border: none; padding: 0; margin: 0; text-align: left;
  font-family: inherit; cursor: pointer; line-height: 1.3;
}
.ccard__title::after { content: ''; position: absolute; inset: 0; }
.ccard__title:focus-visible { outline: none; }
.name-en {
  font-weight: 400; color: var(--text-tertiary); font-size: .88em;
  margin-left: .35em; letter-spacing: 0;
}
.fold__title .name-en, .ccard__title .name-en { display: block; margin: .12rem 0 0; font-size: .8rem; }

.ccard__uni {
  font-size: .83rem; color: var(--text-secondary); margin-top: .2rem;
  display: flex; align-items: baseline; gap: .35rem; min-width: 0;
}
/* 只让校名部分省略号截断；QS 徽标固定不被裁掉，否则加了等于没加 */
.ccard__uniname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ccard__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: .22rem .8rem;
  margin: .6rem 0 0; font-size: .78rem; color: var(--text-tertiary);
}
.ccard__facts span { display: flex; gap: .35rem; min-width: 0; }
.ccard__facts b {
  font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 400px) { .ccard__facts { grid-template-columns: 1fr; } }
.ccard__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

/* 匹配度的构成：只列真正计入的维度，让分数不是黑箱 */
.ccard__basis {
  display: flex; flex-wrap: wrap; gap: .2rem .7rem;
  margin: .5rem 0 0; padding-top: .45rem;
  border-top: 1px dashed var(--surface-line);
  font-size: .74rem; color: var(--text-tertiary);
}
.ccard__basis span { display: inline-flex; gap: .25rem; align-items: baseline; }
.ccard__basis i { font-style: normal; }
.ccard__basis b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mb--good { color: var(--good); }
.mb--mid  { color: var(--mid); }
.mb--hard { color: var(--hard); }
.vb--ok { color: var(--good); }
.vb--no { color: var(--hard); }

.matchnote {
  margin: .35rem 0 0; font-size: .8rem; color: var(--text-secondary); line-height: 1.55;
}
.matchnote strong { color: var(--accent); }
.matchnote__off { color: var(--text-tertiary); }
.matchnote__unset {
  display: inline-block; padding: .5rem .8rem; border-radius: var(--radius-sm);
  background: var(--mid-soft); border-left: 3px solid var(--mid); color: var(--text-secondary);
}
.ccard__basis--cta { color: var(--text-tertiary); font-style: italic; }
.weights__cta {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  font-size: .875rem; line-height: 1.65; color: var(--text-secondary);
}

/* 抽屉里的匹配度算式 */
.mm { font-size: .84rem; }
.mm td, .mm th { padding: .45rem .7rem; }
.mm__score { font-weight: 700; font-variant-numeric: tabular-nums; }
.mm--good { color: var(--good); } .mm--mid { color: var(--mid); } .mm--hard { color: var(--hard); }
.mm--off td { opacity: .45; }
.mm tfoot td { border-top: 1px solid var(--surface-line-strong); background: var(--bg-sunken); }
.mm__result td { font-size: .95rem; }
.ccard__side { display: flex; flex-direction: column; align-items: center; gap: .45rem; flex-shrink: 0; }

/* 匹配度圆环 */
.ring { position: relative; width: 46px; height: 46px; }
.ring svg { width: 46px; height: 46px; transform: rotate(-90deg); display: block; }
.ring__bg { fill: none; stroke: var(--bg-sunken); stroke-width: 4; }
.ring__fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset .5s var(--ease); }
.ring__fg--good { stroke: var(--good); }
.ring__fg--mid  { stroke: var(--mid); }
.ring__fg--hard { stroke: var(--hard); }
.ring__fg--none { stroke: transparent; }
.ring__num--none { color: var(--text-tertiary); font-weight: 400; }
.ring__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text);
}
.ring__cap { font-size: .64rem; color: var(--text-tertiary); letter-spacing: .03em; }

/* 收藏按钮：图标式，位于卡片右上，压在整卡点击区之上 */
.star {
  position: relative; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--surface-line-strong); background: var(--bg-elevated);
  color: var(--text-tertiary); font-size: .95rem; line-height: 1;
  transition: all var(--dur) var(--ease);
}
.star:hover { background: var(--bg-hover); color: var(--text); }
.star[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── 结果卡片 ───────────────────────────────────────── */
.card {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--surface-line-strong); }
.card:focus-within { border-color: var(--accent); }

.card__top { display: flex; gap: 1rem; align-items: flex-start; }
.card__main { min-width: 0; flex: 1; }
.card__prog {
  font-size: 1.09rem; font-weight: 600; letter-spacing: -.018em; color: var(--text);
  background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit;
}
.card__prog:hover { color: var(--accent); }
.card__uni { font-size: .875rem; color: var(--text-secondary); margin-top: .18rem; }
.card__uni .sep { color: var(--text-tertiary); margin: 0 .35rem; }
.card__en { font-size: .77rem; color: var(--text-tertiary); margin-top: .1rem; }

.score {
  flex-shrink: 0; text-align: center; min-width: 62px;
  padding: .35rem .1rem; border-radius: var(--radius); background: var(--bg-sunken);
}
.score__num { font-size: 1.45rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--accent); }
.score__label { font-size: .66rem; color: var(--text-tertiary); letter-spacing: .04em; }

.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.badge {
  font-size: .735rem; font-weight: 600; padding: .18rem .5rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); color: var(--text-secondary); white-space: nowrap;
}
.badge--good  { background: var(--good-soft);  color: var(--good); }
.badge--mid   { background: var(--mid-soft);   color: var(--mid); }
.badge--hard  { background: var(--hard-soft);  color: var(--hard); }
.badge--faith { background: var(--faith-soft); color: var(--faith); }
.badge--accent{ background: var(--accent-soft);color: var(--accent); }

.bars { display: grid; gap: .3rem; margin-top: .85rem; }
.bar { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: .5rem; font-size: .75rem; }
.bar__label { color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__track { height: 5px; background: var(--bg-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.bar__fill {
  /* display:block 是必须的：这是 span，而它的父元素不是 grid 容器，
     行内元素会忽略宽高，进度条会整条画不出来。 */
  display: block; height: 100%; background: var(--accent);
  border-radius: var(--radius-sm); transition: width .4s var(--ease);
}
.bar__fill--good { background: var(--good); }
.bar__fill--mid  { background: var(--mid); }
.bar__fill--hard { background: var(--hard); }
.bar__val { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bar--muted .bar__label, .bar--muted .bar__val { opacity: .45; }

.card__foot {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--surface-line);
}
.card__note { font-size: .8rem; color: var(--text-tertiary); flex: 1; min-width: 180px; line-height: 1.5; }

.save-btn { border-color: var(--surface-line-strong); }
.save-btn[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ── 空 / 加载状态 ──────────────────────────────────── */
.empty {
  text-align: center; padding: 3rem 1.5rem;
  background: var(--bg-elevated); border: 1px dashed var(--surface-line-strong);
  border-radius: var(--radius-lg);
}
.empty__icon { font-size: 2.2rem; margin-bottom: .6rem; opacity: .55; }
.empty h2, .empty h3 { margin-bottom: .4rem; font-size: 1.08rem; }
.empty p { color: var(--text-secondary); font-size: .9rem; max-width: 44ch; margin: 0 auto .9rem; }
.empty__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

.loadmore {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.4rem 1rem .4rem;
}
.loadmore p { font-size: .8rem; color: var(--text-tertiary); margin: 0; }

.skeleton { display: grid; gap: .85rem; }
.skel-card {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 1.05rem 1.15rem; height: 168px;
}
.skel-line { height: 11px; border-radius: var(--radius-sm); background: var(--bg-sunken); margin-bottom: .7rem;
  animation: pulse 1.5s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ── 详情抽屉 ───────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.42); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: min(560px, 100%); background: var(--bg-elevated);
  border-left: 1px solid var(--surface-line);
  box-shadow: var(--shadow-3); overflow-y: auto;
  transform: translateX(100%); transition: transform .28s var(--ease);
}
.drawer.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
@media (max-width: 600px) {
  .drawer { width: 100%; top: auto; height: 92vh; border-left: none;
    border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
    transform: translateY(100%); }
}

/* ── 筛选面板：就地展开在搜索框下面 ──────────────────
   以前是左侧滑出的模态抽屉，盖住整页、只有一个 ✕ 能退出，
   用户既看不出自己开着筛选，也不知道怎么回到结果。
   改成长在工具条下方的一块：结果始终在它下面可见，改一个条件
   就能看到条数变化，不存在"要不要确认"的问题。
   面板是整幅宽度，所以各组条件横排成网格，而不是抽屉里那种一长条竖列。 */
.fpanel {
  margin: var(--s3) 0 var(--s4);
  border: 1px solid var(--surface-line-strong); border-radius: var(--radius-lg);
  background: var(--bg-elevated); box-shadow: var(--shadow-1);
  animation: fpanel-in .18s var(--ease) both;
}
@keyframes fpanel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fpanel__head {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--surface-line);
}
.fpanel__head h2 { font-size: 1rem; margin: 0; }
/* 实时读数紧跟标题：它是"改完还剩多少"，不是一个要按的按钮 */
.fpanel__count {
  font-size: .82rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; margin-right: auto;
}
.fpanel__count--zero { color: var(--deep); font-weight: 700; }
.fpanel__body { padding: var(--s4) var(--s5) var(--s5); }
/* 抽屉那套贴边、限高、独立卡片的样式在这里全要卸掉 */
.fpanel .filters {
  position: static; max-height: none; padding: 0; border: none;
  box-shadow: none; background: transparent;
  display: grid; gap: 0 var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
/* 网格里每组自带上边框会在列首重复画线，改成各组独立成块 */
.fpanel .fgroup { border-top: none; border-bottom: 1px solid var(--surface-line); }
.fpanel .fgroup:last-child { border-bottom: none; }

/* 展开时让筛选按钮看得出是"开着的" */
.toolbar__btn--on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--deep); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) { .fpanel { animation: none; } }
@media (max-width: 560px) {
  .fpanel__head { padding: var(--s3) var(--s4); }
  .fpanel__body { padding: var(--s3) var(--s4) var(--s4); }
  .fpanel .filters { grid-template-columns: 1fr; }
}

.drawer__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.35rem .9rem;
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  backdrop-filter: blur(18px); border-bottom: 1px solid var(--surface-line);
}
.drawer__close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--bg-sunken); color: var(--text-secondary); cursor: pointer;
  font-size: 1.05rem; display: grid; place-items: center; padding: 0;
}
.drawer__close:hover { background: var(--surface-line-strong); color: var(--text); }
.drawer__body { padding: 1.15rem 1.35rem 3rem; }

.dtabs {
  position: sticky; top: 0; z-index: 2;
  display: flex; gap: .2rem; padding: .55rem 1.35rem;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(18px); border-bottom: 1px solid var(--surface-line);
  overflow-x: auto; scrollbar-width: none;
}
.dtabs::-webkit-scrollbar { display: none; }
.dtab {
  flex: 0 0 auto; border: none; background: none; font: inherit; cursor: pointer;
  padding: .38rem .72rem; border-radius: var(--radius-sm); font-size: .845rem; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dtab:hover { background: var(--bg-hover); color: var(--text); }
.dtab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dpanel[hidden] { display: none; }
@media (max-width: 480px) {
  .drawer__head { padding: .9rem 1rem .75rem; }
  .drawer__body { padding: 1rem 1rem 2.5rem; }
  .dl { grid-template-columns: 1fr auto; }
}

.dsec { margin-bottom: 1.6rem; }
.dsec > h3 {
  font-family: var(--font-cond); font-size: 1.1rem; letter-spacing: .04em;
  color: var(--accent); font-weight: 700; margin-bottom: .6rem;
  padding-bottom: .3rem; border-bottom: 2px solid var(--accent-soft);
}
.dl { display: grid; grid-template-columns: auto 1fr; gap: .42rem 1rem; font-size: .875rem; }
.dl dt { color: var(--text-tertiary); }
.dl dd { margin: 0; color: var(--text); text-align: right; }
.prose { font-size: .885rem; color: var(--text-secondary); line-height: 1.65; }
.prose strong { color: var(--text); font-weight: 600; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag {
  font-size: .78rem; padding: .22rem .58rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); color: var(--text-secondary);
}
.tag--warn { background: var(--mid-soft); color: var(--mid); }

.linklist { display: grid; gap: .4rem; }
.linkrow {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .75rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); font-size: .855rem;
  transition: background var(--dur) var(--ease);
}
.linkrow:hover { background: var(--bg-hover); text-decoration: none; }
.linkrow__arrow { color: var(--text-tertiary); flex-shrink: 0; }

.callout {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: .7rem .9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .845rem; color: var(--text-secondary); line-height: 1.6;
}
.callout--warn { border-color: var(--mid); background: var(--mid-soft); }
.callout--hard { border-color: var(--hard); background: var(--hard-soft); }
.callout strong { color: var(--text); }

/* ── 通用面板 / 网格 ────────────────────────────────── */
.panel {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-1);
}

/* 折叠卡：摘要常驻，正文点开才出现 */
.fold {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.fold[open] { border-color: var(--surface-line-strong); }
.fold > summary {
  display: flex; align-items: center; gap: .75rem; cursor: pointer;
  padding: .9rem 1rem; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--bg-hover); }
.fold__main { flex: 1; min-width: 0; }
.fold__title { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.fold__sub { font-size: .8rem; color: var(--text-tertiary); margin-top: .18rem;
  overflow: hidden; text-overflow: ellipsis; }
.fold__chev { color: var(--text-tertiary); font-size: 1.15rem; flex-shrink: 0;
  transition: transform var(--dur) var(--ease); }
.fold[open] > summary .fold__chev { transform: rotate(90deg); }
.fold__body { padding: 0 1rem 1.1rem; border-top: 1px solid var(--surface-line); padding-top: .9rem; }
.folds { display: grid; gap: .6rem; }

/* ── 探索页的分区标签 ───────────────────────────────── */

/* ── 就业市场卡 ─────────────────────────────────────── */
/* min() 包一层：窄屏下轨道不会硬撑到 340px，否则 375px 视口会横向溢出。 */
.mktgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.mkt {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: .7rem;
}
.mkt__head { display: flex; align-items: center; gap: .7rem; }
.mkt__flag { font-size: 2rem; line-height: 1; }
.mkt__name { font-family: var(--font-cond); font-size: 1.3rem; margin: 0; }
.mkt__en { font-size: .76rem; color: var(--text-tertiary); }
.mkt__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
  padding: .7rem 0; border-top: 1px solid var(--surface-line); border-bottom: 1px solid var(--surface-line);
  text-align: center;
}
.mkt__stats b {
  display: block; font-family: var(--font-display); font-size: 1.12rem;
  color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.mkt__stats span { font-size: .68rem; color: var(--text-tertiary); line-height: 1.35; display: block; margin-top: .1rem; }
.mkt__sectors p { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 0 0 .4rem; }
.mkt__tag { font-size: .72rem; font-weight: 700; padding: .16rem .45rem; border-radius: var(--radius-sm); }
.mkt__tag--hot { background: var(--good-soft); color: var(--good); }
.mkt__tag--cold { background: var(--hard-soft); color: var(--hard); }
.mkt__foot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }

/* ── 职业蓝图卡 ─────────────────────────────────────── */
.bpgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.bp {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-left: 4px solid var(--cyan);
  border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.bp__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.bp__flag { font-size: 2rem; line-height: 1; }
.bp__name { font-family: var(--font-cond); font-size: 1.3rem; margin: 0; }
.bp__title { font-size: .84rem; color: var(--accent); font-weight: 600; margin: .1rem 0 0; }
.bp__lbl {
  font-family: var(--font-cond); font-size: .92rem; letter-spacing: .04em;
  color: var(--text-tertiary); text-transform: uppercase; margin: .8rem 0 .35rem;
}
.bp__path { font-size: .875rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.bp__keys { margin: 0; padding-left: 1.1rem; font-size: .85rem; line-height: 1.65; color: var(--text-secondary); }
.bp__keys li { margin-bottom: .25rem; }

/* ── 探索页顶部的大搜索框 ───────────────────────────── */
.bigsearch {
  position: relative; display: flex; gap: .5rem; align-items: stretch;
  max-width: 640px; margin: 0 auto 0.4rem;
}
.bigsearch__icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); pointer-events: none; font-size: 1.1rem; z-index: 1;
}
.bigsearch input {
  flex: 1; min-width: 0;
  padding: .85rem 1rem .85rem 2.7rem; font-size: 1rem;
  border-radius: var(--radius); border: 2px solid var(--surface-line-strong);
  background: var(--bg-elevated);
}
.bigsearch input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bigsearch .btn { flex-shrink: 0; padding-left: 1.5rem; padding-right: 1.5rem; }
.quickpick { max-width: 760px; margin: .9rem auto .2rem; display: grid; gap: .5rem; }
.quickpick__row {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center;
}
.quickpick__lbl { font-size: .78rem; color: var(--text-tertiary); margin-right: .2rem; }
.qp {
  border: 1px solid var(--surface-line-strong); background: var(--bg-elevated);
  font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-secondary); white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.qp:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.bigsearch__hint {
  text-align: center; font-size: .82rem; color: var(--text-tertiary);
  margin: 0 0 1.6rem;
}
@media (max-width: 520px) {
  .bigsearch { flex-direction: column; }
  .bigsearch .btn { width: 100%; }
}

/* ── 主题合集卡（探索页先给方向）─────────────────── */
.themes { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.theme {
  display: flex; flex-direction: column; gap: .45rem; text-align: left; height: 100%;
  padding: 1.15rem 1.2rem; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  box-shadow: var(--shadow-1); font: inherit; color: inherit;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme { position: relative; overflow: hidden; }
.theme::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-deco); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.theme:hover::before { opacity: 1; }
.theme:hover { box-shadow: var(--shadow-2); border-color: var(--accent); transform: translateY(-2px); }
.theme__icon { font-size: 1.65rem; line-height: 1; }
.theme__t { font-family: var(--font-cond); font-size: 1.26rem; font-weight: 700; letter-spacing: .01em; }
.theme__tag {
  display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 600;
  padding: .14rem .5rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
}
.theme__d { font-size: .845rem; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.theme__n { font-size: .8rem; color: var(--text-tertiary); }

/* 探索页里通往「就业市场 / 职业探索」的两块入口。
   与主题卡共用网格，靠左边框和沉底色区分：点进去看到的是国家，不是专业列表。
   必须排在 .theme 之后，否则 .theme 的 background 会把它盖掉。 */
.theme--nav { background: var(--bg-sunken); border-left: 3px solid var(--accent); }
.theme--nav .theme__n { color: var(--accent); font-weight: 600; }
/* 标签底色不能沿用 --accent-soft：叠在 --bg-sunken 上只有 4.45:1，差一点点过不了 AA。
   换成不透明的 elevated 底，重新拿回对比度。 */
.theme--nav .theme__tag { background: var(--bg-elevated); }

/* 窄页面：登录、账号这种只有一列表单的页 */
.view--narrow { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* 后台的 JSON 编辑框。等宽字体 + 可拉高，别用默认的两行 textarea */
.adm__ta {
  width: 100%; min-height: 26rem; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.55; white-space: pre; overflow-wrap: normal;
  overflow-x: auto; tab-size: 2;
  padding: .8rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--surface-line-strong); background: var(--bg-elevated); color: var(--text);
}
.callout--good { border-color: var(--good); background: var(--good-soft); }

/* 分区页顶部的返回 / 跳到另一个分区 */
.secnav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }

/* ── 申请规划：从清单导入的录取要求卡 ─────────────── */
.reqgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.req {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1);
}
.req__head { border-bottom: 1px solid var(--surface-line); padding-bottom: .7rem; margin-bottom: .2rem; }
.req__title { font-family: var(--font-cond); font-size: 1.15rem; font-weight: 700; margin: 0; }
.req__uni { font-size: .85rem; color: var(--text-secondary); margin: .25rem 0 .45rem; }
.req__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.req__sec { margin-top: .9rem; }
.req__h {
  font-family: var(--font-cond); font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .35rem;
}
.req__ul { margin: 0; padding-left: 1.1rem; }
.req__ul li { font-size: .855rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: .25rem; }
.req__p { font-size: .855rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }
/* 分数带用定义列表：左列是考什么，右列是要考到多少 */
.req__dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0; }
.req__dl dt { font-size: .8rem; color: var(--text-tertiary); }
.req__dl dd { font-size: .855rem; font-weight: 600; margin: 0; }
.req__foot { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--surface-line); font-size: .82rem; }
.panel--empty { text-align: center; padding: 1.6rem 1.2rem; }

/* 卡片上的 QS 排名徽标：只在前 300 显示，再往后这个数字对选校没有参考价值 */
.qsbadge {
  display: inline-block; flex: none; padding: .05rem .4rem; border-radius: var(--radius-sm);
  font-size: .7rem; font-weight: 700; letter-spacing: .01em;
  background: var(--accent-soft); color: var(--accent); vertical-align: .06em;
}
/* 筛选层里的排名档：一组互斥按钮 */
.qpick { display: flex; flex-wrap: wrap; gap: .4rem; }
.qp--on { background: var(--cta); color: var(--cta-text); border-color: transparent; font-weight: 700; }

/* 快捷选项的确认条：选了才出现，避免空条占位 */
.quickpick__hint { font-size: .78rem; color: var(--text-tertiary); margin: .5rem 0 0; text-align: center; }
.qpbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .8rem; margin-top: .7rem; padding: .6rem .9rem;
  background: var(--bg-sunken); border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
}
.qpbar__sel { font-size: .85rem; color: var(--text-secondary); }
.qpbar__sel b { color: var(--text); font-weight: 700; }
.qpbar__actions { display: flex; gap: .4rem; }
.qpbar__none { flex-basis: 100%; text-align: center; font-size: .8rem; color: var(--text-tertiary); }

/* ── 国家大方块（工签与移民页）──────────────────── */
.ctiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ctile {
  position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%;
  padding: 1.3rem 1.25rem; border-radius: var(--radius-lg); cursor: pointer; text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  box-shadow: var(--shadow-1); font: inherit; color: inherit;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ctile { overflow: hidden; }
.ctile::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-deco);
}
.ctile:hover { box-shadow: var(--shadow-2); border-color: var(--accent); transform: translateY(-2px); }
.ctile__flag { font-size: 2.5rem; line-height: 1; }
.ctile__name { font-family: var(--font-cond); font-size: 1.4rem; font-weight: 700; letter-spacing: .01em; }
.ctile__en { font-size: .78rem; color: var(--text-tertiary); margin-top: -.28rem; }
.ctile__rows { display: grid; gap: .3rem; margin-top: .15rem; }
.ctile__row { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; }
.ctile__row span:first-child { color: var(--text-tertiary); }
.ctile__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ctile__meter { height: 5px; border-radius: var(--radius-sm); background: var(--bg-sunken); overflow: hidden; margin-top: .1rem; }
.ctile__meterfill { display: block; height: 100%; border-radius: var(--radius-sm); background: var(--grad-deco); }
.ctile__go { font-size: .82rem; color: var(--accent); font-weight: 500; margin-top: auto; padding-top: .3rem; }

/* ── 游学卡 ─────────────────────────────────────────── */
.tourgrid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tour {
  display: flex; flex-direction: column; gap: .5rem; height: 100%; text-align: left;
  padding: 1.1rem 1.15rem; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  box-shadow: var(--shadow-1); font: inherit; color: inherit;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tour:hover { box-shadow: var(--shadow-2); border-color: var(--surface-line-strong); }
.tour__t { font-size: 1.04rem; font-weight: 600; letter-spacing: -.015em; }
.tour__meta { font-size: .8rem; color: var(--text-secondary); }
.tour__facts { display: grid; grid-template-columns: 1fr 1fr; gap: .22rem .8rem; font-size: .78rem; color: var(--text-tertiary); margin-top: .2rem; }
.tour__facts b { font-weight: 600; color: var(--text-secondary); }
.stars { letter-spacing: .06em; font-size: .8rem; color: var(--mid); }
.stars--dim { color: var(--text-tertiary); opacity: .45; }

/* 分类筛选按钮条 */
.catbar { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.catbtn {
  border: 1px solid var(--surface-line-strong); background: var(--bg-elevated);
  font: inherit; font-size: .845rem; padding: .42rem .9rem; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-secondary);
  transition: all var(--dur) var(--ease);
}
.catbtn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
/* 计数为 0 的选项直接禁用：点了也只会得到一个空列表，
   不如让它一眼看上去就是走不通的。用底色和边框表达"不可选"，
   不用 opacity——那会把文字对比度压到 3.4:1，而"(0)"正是要看清的信息。 */
.catbtn:disabled {
  cursor: not-allowed;
  background: var(--bg-sunken); border-color: var(--surface-line);
  color: var(--text-tertiary);
}
.catbtn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600;
}

/* 折叠卡正文比抽屉宽得多，定义列表要左对齐、标签列定宽，
   否则数值会贴在右侧形成一条又窄又难读的竖条。 */
.fold__body .dl { grid-template-columns: 5.5em 1fr; gap: .4rem 1.1rem; }
.fold__body .dl dd { text-align: left; }
@media (max-width: 520px) { .fold__body .dl { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .fold__body .dl dd { margin-bottom: .45rem; } }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

/* ── 测试 ───────────────────────────────────────────── */
.quiz__progress {
  position: sticky; top: 54px; z-index: 20; padding: .7rem 0 .55rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
}
@media (max-width: 720px) { .quiz__progress { top: 84px; } .filters { top: 96px; } }

.progress__track { height: 5px; background: var(--bg-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); border-radius: var(--radius-sm); transition: width .3s var(--ease); }
.progress__text { font-size: .78rem; color: var(--text-tertiary); margin-top: .35rem;
  display: flex; justify-content: space-between; }

/* 分步测试：一屏 6 题，不再一次性铺 28 题 */
.qstep__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.qstep__no { font-size: .78rem; color: var(--accent); font-weight: 600; letter-spacing: .05em; }
.qnav {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  position: sticky; bottom: 0; padding: .85rem 0;
  background: linear-gradient(transparent, var(--bg) 32%);
}
.qdots { display: flex; gap: .3rem; margin-left: auto; }
.qdot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-line-strong); border: none; padding: 0; cursor: pointer; }
.qdot--done { background: var(--good); }
.qdot--current { background: var(--accent); transform: scale(1.35); }

.qitem { border-bottom: 1px solid var(--surface-line); padding: 1.05rem 0; }
.qitem:last-child { border-bottom: none; }
.qitem legend, .qitem__q { font-size: .95rem; font-weight: 500; margin-bottom: .65rem; color: var(--text); }
.qitem fieldset { border: none; margin: 0; padding: 0; }
.scale { display: flex; gap: .4rem; flex-wrap: wrap; }
.scale__opt { flex: 1 1 96px; }
.scale__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.scale__opt span {
  display: block; text-align: center; padding: .5rem .3rem; font-size: .78rem;
  border: 1px solid var(--surface-line-strong); border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer; transition: all var(--dur) var(--ease);
  line-height: 1.35;
}
.scale__opt span:hover { border-color: var(--accent); color: var(--text); }
.scale__opt input:checked + span {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent); font-weight: 600;
}
.scale__opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.riasec-grid { display: grid; gap: .55rem; }
.riasec-row { display: grid; grid-template-columns: 108px 1fr 40px; align-items: center; gap: .7rem; font-size: .855rem; }
.riasec-row__bar { display: block; height: 8px; background: var(--bg-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.riasec-row__fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-sm); transition: width .5s var(--ease); }
.riasec-row--top .riasec-row__fill { background: var(--good); }
.riasec-row__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ── 时间表 ─────────────────────────────────────────── */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px;
  background: var(--surface-line-strong);
}
.tphase { position: relative; margin-bottom: 1.5rem; }
.tphase::before {
  content: ''; position: absolute; left: -1.6rem; top: 7px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg-elevated); border: 3px solid var(--accent);
}
.tphase--done::before { background: var(--good); border-color: var(--good); }
.tphase__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tphase__name { font-size: 1.02rem; font-weight: 600; }
.tphase__when { font-size: .8rem; color: var(--text-tertiary); }
.ttask {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem .7rem; border-radius: var(--radius-sm); margin-bottom: .3rem;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  transition: background var(--dur) var(--ease);
}
.ttask:hover { background: var(--bg-hover); }
.ttask input { margin-top: .3rem; accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.ttask__text { font-size: .875rem; cursor: pointer; }
.ttask__why { font-size: .78rem; color: var(--text-tertiary); margin-top: .18rem; line-height: 1.5; }
.ttask.is-done .ttask__text { text-decoration: line-through; color: var(--text-tertiary); }

/* ── 表格 ───────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--surface-line); }
table { width: 100%; border-collapse: collapse; font-size: .855rem; background: var(--bg-elevated); }
th, td { padding: .62rem .8rem; text-align: left; border-bottom: 1px solid var(--surface-line); vertical-align: top; }
th { font-weight: 600; font-size: .78rem; color: var(--text-tertiary); background: var(--bg-sunken);
  position: sticky; top: 0; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-hover); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 职业测试介绍与外部测评 ─────────────────────────── */
.intro {
  background: var(--grad-band); color: #fff;
  border-radius: var(--radius-lg); padding: 1.6rem 1.5rem 1.4rem;
  margin-bottom: 1.25rem; position: relative; overflow: hidden;
}
.intro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px);
}
.intro > * { position: relative; z-index: 1; }
/* 渐变底上的说明文字必须转成浅色，否则用的是深灰、几乎看不清 */
.intro .field__hint { color: rgba(255,255,255,.93); }
.intro a:not(.assess__card) { color: #fff; text-decoration: underline; }
.intro__title {
  font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.8vw, 2rem);
  font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 .7rem; line-height: 1.2;
}
.intro__body { font-size: .95rem; line-height: 1.75; color: rgba(255,255,255,.94); margin: 0 0 1.2rem; }
.intro__end {
  font-size: 1rem; font-weight: 600; color: #fff; margin: 0;
  padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.3);
}

.assess { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.assess__card {
  display: flex; flex-direction: column; gap: .4rem;
  /* 必须用主题变量而不是写死白色：写死白底会在深色模式下配上浅色文字，等于看不见 */
  background: var(--bg-elevated); border-radius: var(--radius);
  padding: 1rem 1.1rem; color: var(--text); text-decoration: none;
  border: 1px solid var(--surface-line-strong);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.assess__card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-3); }
.assess__card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.assess__head { display: flex; align-items: baseline; gap: .4rem; }
.assess__icon { flex-shrink: 0; }
.assess__name { font-family: var(--font-cond); font-size: 1.14rem; font-weight: 700; color: var(--heading); }
.assess__org { font-size: .78rem; color: var(--text-tertiary); }
.assess__desc { font-size: .875rem; line-height: 1.65; color: var(--text-secondary); flex: 1; }
.assess__meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.assess__go { font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .03em; }

.panel--own { border-left: 4px solid var(--cta); }

/* ── 报告 ───────────────────────────────────────────── */
.rptlist { display: grid; gap: .7rem; }
.rptcard {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-left: 4px solid var(--cyan);
  border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-1);
}
.rptcard__main { flex: 1; min-width: 200px; }
.rptcard__t { font-family: var(--font-cond); font-size: 1.2rem; font-weight: 700; margin: 0; }
.rptcard__meta { font-size: .78rem; color: var(--text-tertiary); margin: .15rem 0 .5rem; }
.rptcard__dirs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .4rem; }
.rptcard__progs { font-size: .85rem; color: var(--text-secondary); margin: 0; }
.rptcard__actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

.rptrow { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0;
  border-bottom: 1px solid var(--surface-line); }
.rptrow:last-child { border-bottom: none; }
.rptrow__n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: .76rem; font-weight: 700; display: grid; place-items: center;
}
.rptrow__t { font-weight: 600; font-size: .95rem; display: flex; gap: .4rem;
  align-items: baseline; flex-wrap: wrap; }
.rptrow__d { font-size: .82rem; color: var(--text-secondary); line-height: 1.6; margin: .2rem 0 0; }
.rptmkt { padding: .7rem 0; border-bottom: 1px solid var(--surface-line); }
.rptmkt:last-child { border-bottom: none; }
.rptmkt__stats { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .3rem;
  font-size: .8rem; color: var(--text-tertiary); }
.rptmkt__stats b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── 提示条 ─────────────────────────────────────────── */
#toast-host {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: center;
  pointer-events: none; width: max-content; max-width: calc(100vw - 2rem);
}
.toast {
  background: var(--deep); color: #fff;
  padding: .68rem 1.15rem; border-radius: var(--radius-sm); font-size: .855rem; font-weight: 500;
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(12px); transition: all var(--dur) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast--warn { background: var(--mid); color: #fff; }

/* ── 页脚 ───────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--surface-line); margin-top: 3rem;
  padding: 1.75rem var(--gutter) 2.5rem; font-size: .8rem; color: var(--text-tertiary);
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; gap: .5rem; }
.footer a { color: var(--text-secondary); }

@media print {
  .topbar, .filters, .footer, #toast-host, .btn, .weights { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .panel { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}

/* ── 曲线路径 ─────────────────────────────────────────
   四段结构里，"省了什么"与"代价与风险"用左边框区分冷暖，
   两段篇幅刻意对等：只讲好处的是中介话术，不是规划工具。 */
.pwtabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.pwgrid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.pw {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-1);
}
.pw__head { border-bottom: 1px solid var(--surface-line); padding-bottom: .8rem; }
.pw__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
.pw__title { font-family: var(--font-cond); font-size: 1.22rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.3; }
.pw__rates { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: 0; font-size: .78rem; color: var(--text-tertiary); }
.pw__rate { letter-spacing: .08em; color: var(--accent); margin-left: .25rem; }
.pw__sec { margin-top: .95rem; }
.pw__h {
  font-family: var(--font-cond); font-size: .76rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 .3rem;
}
.pw__sec p { font-size: .89rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.pw__sec--good, .pw__sec--risk, .pw__sec--visa {
  padding: .7rem .9rem; border-radius: var(--radius); border-left: 3px solid;
}
.pw__sec--good { background: var(--good-soft); border-left-color: var(--good); }
.pw__sec--good .pw__h { color: var(--good); }
.pw__sec--risk { background: var(--hard-soft); border-left-color: var(--hard); }
.pw__sec--risk .pw__h { color: var(--hard); }
.pw__sec--visa { background: var(--accent-soft); border-left-color: var(--accent); }
.pw__sec--visa .pw__h { color: var(--accent); }
.pw__ul { margin: 0; padding-left: 1.1rem; }
.pw__ul li { font-size: .86rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: .2rem; }
.pw__foot { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--surface-line); font-size: .83rem; overflow-wrap: anywhere; }
.pwtraps { margin: 0; padding-left: 1.3rem; }
.pwtraps li { font-size: .89rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: .7rem; }

/* 小徽标与标签走全圆角，和放大后的卡片圆角呼应，视觉上不再"硬邦邦" */
.badge, .chip, .pill, .qsbadge, .mkt__tag, .theme__tag, .qp, .etab { border-radius: var(--radius-pill); }
.qp { padding-left: .85rem; padding-right: .85rem; }
.chip { padding-left: .7rem; }

/* ══ 手机适配 ═══════════════════════════════════════════
   两条硬规则，凡是手机上要点的东西都得满足：
   1. 触控目标不小于 44×44（Apple HIG / WCAG 2.5.5 的实际下限）；
   2. 正文类文字不小于 13px，输入框不小于 16px（低于 16px iOS 会自动放大页面）。
   桌面端不受影响——这一整段只在 ≤720px 生效。 */
@media (max-width: 720px) {
  /* 顶栏：导航、语言、账户按钮原来只有 27–34px 高 */
  .nav__link { min-height: 44px; display: flex; align-items: center; padding: .5rem .7rem; font-size: .9rem; }
  .langswitch button { min-height: 40px; min-width: 44px; padding: .4rem .6rem; font-size: .82rem; }
  .acctbtn { min-height: 40px; padding: .45rem .7rem; font-size: .8rem; }
  .brand { min-height: 44px; display: flex; align-items: center; }

  /* 按钮与快捷选项 */
  .btn { min-height: 44px; padding: .62rem 1.05rem; }
  .btn--sm { min-height: 40px; font-size: .84rem; padding: .5rem .85rem; }
  .qp { min-height: 44px; display: inline-flex; align-items: center; font-size: .86rem; }
  .etab { min-height: 44px; }

  /* 复选框：16px 的方块在手机上几乎点不中，放大并加大点击区 */
  .check input[type="checkbox"], .ttask input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
  .check { min-height: 44px; align-items: center; padding: .3rem 0; }
  .ttask { padding: .35rem 0; }
  .ttask__text { min-height: 34px; display: flex; align-items: center; }

  /* 测评进度圆点原来只有 8×8：外框撑到 44，圆点本身仍是小的 */
  .qdot {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0;
  }
  .qdot::before {
    content: ''; width: 10px; height: 10px; border-radius: var(--radius-pill);
    background: var(--surface-line-strong);
  }
  /* 基础样式里 --current 用 transform 放大圆点，这里圆点是 ::before，
     必须把 transform 归零，否则整个 44px 的点击框被一起放大、互相重叠 */
  .qdot--current { transform: none; }
  .qdot--current::before { width: 13px; height: 13px; background: var(--accent); }
  .qdot--done::before { background: var(--good); }
  .qdots { gap: 0; }

  /* 表单控件：低于 16px 时 iOS 会强制放大整页 */
  input[type="text"], input[type="search"], input[type="email"], input[type="number"],
  select, textarea { font-size: 16px; min-height: 44px; }
  input[type="range"] { height: 34px; }

  /* 最小字号兜底：徽标、提示、说明文字原来低到 10.2px */
  .badge, .pill, .qsbadge, .mkt__tag, .theme__tag, .ring__cap,
  .field__hint, .quickpick__lbl, .quickpick__hint, .ccard__basis,
  .mkt__stats span, .req__dl dt, .ttask__why, .pw__h, .pw__rates { font-size: .82rem; line-height: 1.5; }
  .theme__d, .req__ul li, .req__p { font-size: .9rem; }

  /* 链接与可点文字也要够大 */
  .req__foot a, .mkt__foot a, .ccard__title { min-height: 34px; }

  /* 卡片内边距在小屏上收一点，换回内容宽度 */
  .req, .mkt, .bp, .theme, .panel { padding-left: 1rem; padding-right: 1rem; }

  /* 这几个控件有更具体的规则，泛选择器压不住，只能点名 */
  #q, #sort, #bigsearch, #intake-year, .toolbar input, .toolbar select { font-size: 16px; }
  /* JSON 编辑框在手机上也要 16px，否则聚焦时 iOS 会把整页放大 */
  .adm__ta { font-size: 16px; min-height: 20rem; }

  /* 可折叠标题（数据快照、时间表阶段）也是要点的 */
  #app summary, .datanote summary, .fold summary, .fgroup summary {
    min-height: 44px; display: flex; align-items: center;
  }
  .fold summary, .fgroup summary { gap: .5rem; }

  /* 收藏星标与游学分类按钮 */
  .star { width: 44px; height: 44px; font-size: 1.15rem; }
  .catbtn { min-height: 44px; }

  /* 剩下这些小字都在 10.9–12.4px 之间，手机上偏吃力 */
  .pill, .name-en, .weight__val, .qstep__no, .ctile__en,
  .progress__text, .ccard__facts, .ccard__facts span,
  .tour__facts, .tour__facts span, .datanote summary { font-size: .82rem; }
  .ccard__uni, .ccard__basis { font-size: .84rem; }

  /* 最后几个被更具体的规则压住的，逐个点名 */
  .toolbar__btn .pill { font-size: .8rem; }
  .jn__d { font-size: .84rem; }
  .modcard__step { font-size: .8rem; }
  .ccard__title { min-height: 44px; }
  /* 滑块：34px 高的轨道在手机上不好按住拖动 */
  input[type="range"] { height: 44px; }
  /* 勾选行整行都要够高，label[for] 才是真正好点的那块区域 */
  .ttask { min-height: 44px; align-items: center; }
  .ttask input[type="checkbox"] { width: 24px; height: 24px; }
  /* 抽屉与滑出层的关闭按钮 */
  .drawer__close { width: 44px; height: 44px; font-size: 1.1rem; }
}

/* 超窄屏（≤380px）：把两列的地方压成一列 */
@media (max-width: 380px) {
  .req__dl { grid-template-columns: 1fr; gap: .05rem; }
  .req__dl dt { margin-top: .35rem; }
  .qpbar { flex-direction: column; align-items: stretch; }
  .qpbar__actions { justify-content: stretch; }
  .qpbar__actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════
   系统层 — 统一的卡片、按钮、筹码与排印
   这一段刻意放在文件末尾：它用同名选择器收编前面各自为政的组件，
   让 13 种卡片、16 种按钮收敛成一套。后面若要删旧规则，从上面删。
   ═══════════════════════════════════════════════════════════ */

/* ── 排印 ─────────────────────────────────────────────── */
body { font-size: var(--t-body); }
h1 { font-size: var(--t-h1); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h3 { font-size: var(--t-h3); font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: var(--t-body); font-family: var(--font-display); font-weight: 600; }

/* 正文行宽上限：原来能跑到 136 字符 */
.view > p, .page-head p, .callout, .field__hint, .pw__sec p, .bp__d, .mkt__note { max-width: var(--measure); }

/* 等宽只留给标签、分数与日期这类需要对齐的内容 */
.eyebrow, .card__eyebrow, .pw__h, .adm__ta, .qsbadge, .fact {
  font-family: var(--font-mono); letter-spacing: .07em;
}
.eyebrow { font-size: var(--t-label); text-transform: uppercase; }
[class*="__facts"] b, .metric__n, .ring__n, .mkt__stats b { font-variant-numeric: tabular-nums; }

/* ── 按钮：3 变体 × 3 尺寸 ────────────────────────────── */
.btn {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--t-sm); line-height: 1;
  height: 44px; padding: 0 var(--s5); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  border: 1px solid var(--surface-line-strong); background: var(--bg-elevated); color: var(--text);
  cursor: pointer; text-transform: none; letter-spacing: 0;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.btn--primary { background: var(--cta); color: var(--cta-text); border-color: transparent; }
.btn--primary:hover { background: var(--cta-hover); color: var(--cta-text); border-color: transparent; }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-secondary); padding: 0 var(--s3); }
.btn--ghost:hover { background: var(--bg-sunken); color: var(--text); border-color: transparent; }
.btn--sm { height: 36px; font-size: var(--t-micro); padding: 0 var(--s4); }
.btn--lg { height: 52px; font-size: var(--t-body); padding: 0 var(--s6); }
/* 英文界面原本给按钮加了全大写 + 字距，和中文并排时会跳字号，去掉 */
:root[lang="en"] .btn, html[lang="en"] .btn { text-transform: none; letter-spacing: 0; }

/* ── 筹码：筛选态控件，收编 .qp / .catbtn / .etab ────── */
.qp, .catbtn, .etab {
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; line-height: 1;
  min-height: 40px; padding: 0 var(--s4); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--surface-line-strong); background: var(--bg-elevated);
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.qp:hover, .catbtn:hover, .etab:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.qp--on, .catbtn.is-on, .etab[aria-selected="true"],
.qp[aria-pressed="true"], .catbtn[aria-pressed="true"] {
  background: var(--deep); border-color: var(--deep); color: var(--bg-elevated); font-weight: 600;
}

/* ── 卡片：一个底座 + 修饰符，收编 13 种自定义卡片 ───── */
.ccard, .modcard, .theme, .tour, .ctile, .mkt, .bp, .pw, .panel, .req, .assess__card {
  background: var(--bg-elevated);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s5);
}
.ccard, .modcard, .theme, .tour, .ctile {
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.ccard:hover, .modcard:hover, .theme:hover, .tour:hover, .ctile:hover {
  box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--surface-line-strong);
}
/* 强调卡只用左边一道橙线，且一屏最多一处 */
.theme--nav, .pw__sec--risk { border-left: 3px solid var(--logo-accent); }
.theme--nav { background: var(--bg-elevated); }

/* 主题卡原来靠顶部渐变条做悬浮反馈，和新的抬升效果重复 */
.theme::before, .modcard::before { display: none; }

/* ── 徽标与筹码文字 ───────────────────────────────────── */
.badge, .chip, .pill, .qsbadge, .mkt__tag, .theme__tag { font-size: var(--t-micro); }

@media (max-width: 720px) {
  .ccard, .modcard, .theme, .tour, .ctile, .mkt, .bp, .pw, .panel, .req { padding: var(--s4); }
  /* label 档在手机上提到 13px：12px 的全大写小字在小屏上偏吃力 */
  .eyebrow, .card__eyebrow, .pw__h, .mkt__en, .catbar__lbl { font-size: var(--t-micro); }
  .btn { height: 44px; }
  .qp, .catbtn, .etab { min-height: 44px; }
}

/* 徽标压在浅色底上时，--accent 只有 4.41:1，差一点点过不了 AA；
   --deep 在同一个底上是 10.63:1。凡是「深色字 + 浅色底」的小标签一律用 deep。 */
.badge--accent, .qsbadge, .theme__tag, .mkt__tag--hot,
.pw__sec--visa .pw__h, .card__eyebrow { color: var(--deep); }
/* 同理：链接压在 --bg-sunken 上是 4.45:1，也要换成 deep */
.linkrow a, .linkrow span { color: var(--deep); }

/* ── 图标 ─────────────────────────────────────────────────
   全部继承 currentColor，深浅色自动跟随；主题卡的图标用品牌蓝，
   不再是一堆各自为政的彩色 emoji。 */
.ico { display: block; flex: none; }
.theme__icon, .modcard__icon, .jn__dot {
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.theme__icon { width: 26px; height: 26px; font-size: 0; }
.modcard__icon { width: 28px; height: 28px; font-size: 0; }
.jn__dot { color: var(--bg-elevated); }

/* 深色封面上的次要按钮：描边 + 半透明底，不能用浅色系的 .btn 默认样式 */
.btn--onDark {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); color: #fff;
}
.btn--onDark:hover { background: rgba(255,255,255,.20); border-color: #fff; color: #fff; }

/* 主按钮不能比次按钮窄。上一轮次按钮 212px、主按钮 130px，
   视觉上反而是次要动作更重，层级是反的。 */
.hero__cta .btn--primary { min-width: 168px; }
.hero__scroll { margin-top: var(--s2); }

/* ── 偏好面板：压扁，不折叠 ─────────────────────────────
   原来这一块 379px，把结果整个推到首屏之外（第一张卡在 880px 处）。
   面板必须保持展开（用户明确要求过），所以改成压缩而不是收起：
   五个滑块排成一行，说明文字收进 title 提示。约 379px → 150px。 */
.weights__grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
/* 五个维度要么一行排完，要么整齐分两行。auto-fit 在宽屏下排成 4+1，
   落单的第五个看起来像是坏了。 */
@media (min-width: 1040px) { .weights__grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 700px) and (max-width: 1039px) { .weights__grid { grid-template-columns: repeat(3, 1fr); } }
/* 面板里那句提示和标题栏的「还没设置」重复，压成一行小字 */
.weights__cta { font-size: var(--t-sm); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.weight { display: flex; flex-direction: column; gap: var(--s2); }
.weight__row label { font-size: var(--t-sm); font-weight: 500; }
.weight__val { font-size: var(--t-micro); }
.prefs { margin-bottom: var(--s5); }

/* 同一句「还没设置偏好」原来出现两次：面板里一次、结果计数下面又一次。
   留面板里那句（离滑块最近，能立刻行动），去掉下面重复的那条。 */
.matchnote .matchnote__unset { display: none; }
.matchnote:has(.matchnote__unset) { display: none; }

/* 程序化聚焦（路由切换后把焦点移到 h1 供屏幕阅读器播报）不应该画焦点环。
   键盘 Tab 到的元素仍然有，因为它们不是 tabindex="-1"。 */
#app h1[tabindex="-1"]:focus,
#app h1[tabindex="-1"]:focus-visible { outline: none; }
.empty__icon { color: var(--text-tertiary); display: flex; justify-content: center; }
.empty__icon--warn { color: var(--mid); }

/* ── 窄屏顶栏：给品牌留出呼吸 ─────────────────────────
   375px 下字标右边缘离账户按钮只有 11px，虽然没真的被裁掉，
   但挤成这样品牌是立不住的。账户按钮在窄屏收成纯图标，
   让出约 80px；aria-label 保留，屏幕阅读器读到的还是完整文案。 */
@media (max-width: 480px) {
  .acctbtn { font-size: 0; padding: 0; width: 44px; justify-content: center; }
  .acctbtn svg, .acctbtn span[aria-hidden] { font-size: 1rem; display: inline-flex; }
  /* 塌成方块后文字没了，但"清单里有几个"这个信息必须留着 */
  .acctbtn__label { display: none; }
  .acctbtn .nav__badge {
    position: absolute; top: -5px; right: -5px; margin: 0;
    font-size: .62rem; min-width: 15px; line-height: 15px;
  }
  .acctbtn--ghost { position: relative; overflow: visible; }
  /* 工具区多了「我的清单」这一格，语言开关得让出宽度，
     否则品牌名会被 .brand 的 overflow 剪掉半个字。 */
  .langswitch { margin-left: .2rem; }
  .langswitch button { padding: .3rem .38rem; font-size: .72rem; }
  .acctbtn { margin-left: .2rem; }
  .brand { gap: .35rem; }
  .brand__name { font-size: .95rem; }
  .brand { padding-right: var(--s3); }
  .brand__name { font-size: 1.02rem; }

  .hero__tagline { font-size: 30px; }

  /* 视图把中文主标题按逗号切成了 span。窄屏上整句放不下，
     而 CJK 能在任意两字之间断，「下一站」会被切成「下一／站」；
     按 em 限宽治不了——第二个分句比第一个长。这里让每个分句独占一行，
     断点必然落在标点上。只在这个断点生效：宽屏整句放得下一行，
     强制分行反而平白多出一行。英文只有一个 span，两边都不受影响。 */
  .hero__tagline span { display: block; }

  .hero__inner { gap: var(--s4); }
}

/* ── 五阶段导航 ───────────────────────────────────────
   序号是有意义的：它就是产品的顺序，不是装饰编号。 */
.nav__stage { display: inline-flex; align-items: center; gap: var(--s2); }
.nav__n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  display: inline-grid; place-items: center; flex: none;
  background: var(--bg-sunken); color: var(--text-tertiary);
}
.nav__link[aria-current="page"] .nav__n { background: var(--deep); color: var(--bg-elevated); }
.nav__sep { width: 1px; align-self: stretch; margin: var(--s2) var(--s2); background: var(--surface-line); flex: none; }

/* 院校卡网格 */
.ctiles { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ctile { display: flex; flex-direction: column; gap: var(--s2); text-align: left; cursor: pointer; }
.ctile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.ctile__flag { font-size: 1.3rem; line-height: 1; }
.ctile__name { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.ctile__meta { font-size: var(--t-sm); color: var(--text-secondary); }
.ctile__facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-micro); color: var(--text-secondary); }
.ctile__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--surface-line);
}
.ctile__n { font-size: var(--t-micro); color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
  .nav__n { display: none; }        /* 手机上横向空间紧张，序号让位给文字 */
  .nav__sep { display: none; }
}

/* iPhone SE / mini 这类宽度：品牌名 + 三个工具按钮怎么排都装不下。
   与其把「EduCompass」剪成「EduCompas」，不如只留标识——
   罗盘本身就是品牌，宽度一够字标自己就回来了。 */
@media (max-width: 374px) {
  .brand__name { display: none; }
}

/* 自动更新指标的标记：小、克制，不能让它盖过数字本身 */
.fresh {
  display: inline-block; margin-left: var(--s2); vertical-align: .18em;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; padding: 1px var(--s2); border-radius: var(--radius-pill);
  background: var(--good-soft); color: var(--good); text-decoration: none;
}
.fresh:hover { background: var(--good); color: var(--bg-elevated); text-decoration: none; }

/* 有筛选条件时才出现的两个 × 按钮，此前一直没被扫描覆盖到：
   chip 里的只有 15×19，搜索框的 24×24，手机上都点不中。 */
@media (max-width: 720px) {
  .chip { padding-right: .2rem; }
  .chip button {
    width: 44px; height: 44px; padding: 0;
    display: inline-grid; place-items: center; font-size: 1.05rem;
  }
  .searchbar__clear { width: 44px; height: 44px; right: .25rem; font-size: 1rem; }
}

/* ── 页内搜索框（职业页 / 院校页顶部）───────────────── */
.pagesearch {
  display: flex; align-items: center; gap: var(--s2); position: relative;
  margin-top: var(--s5);
}
.pagesearch__icon {
  position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); pointer-events: none; display: flex;
}
.pagesearch input {
  flex: 1; min-width: 0; height: 48px;
  padding: 0 var(--s8) 0 calc(var(--s3) + 26px);
  font-size: var(--t-body); border-radius: var(--radius);
  border: 1px solid var(--surface-line-strong); background: var(--bg-elevated); color: var(--text);
}
.pagesearch input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.pagesearch__clear {
  position: absolute; right: 108px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: var(--radius-pill); border: none;
  background: var(--bg-sunken); color: var(--text-secondary);
  cursor: pointer; display: grid; place-items: center; font-size: 1rem;
}
.pagesearch__clear:hover { background: var(--surface-line-strong); }

/* ── 职业分析卡 ───────────────────────────────────────── */
.crgrid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.cr {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--s5);
}
.cr__head { border-bottom: 1px solid var(--surface-line); padding-bottom: var(--s4); }
.cr__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.cr__title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s2); line-height: 1.3; }
.cr__note { font-size: var(--t-sm); color: var(--text-secondary); margin: 0; line-height: 1.65; }

.cr__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s4); }
.cr__stat { text-align: center; padding: var(--s3) var(--s1); background: var(--bg-sunken); border-radius: var(--radius-sm); }
.cr__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lead); font-variant-numeric: tabular-nums; }
.cr__n--good { color: var(--good); } .cr__n--mid { color: var(--mid); } .cr__n--hard { color: var(--hard); }
.cr__l { display: block; margin-top: var(--s1); font-size: var(--t-label); color: var(--text-tertiary); line-height: 1.35; }

.cr__sec { margin-top: var(--s5); }
.cr__h { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 var(--s3); font-weight: 500; }
.cr__body { font-size: var(--t-sm); color: var(--text-secondary); margin: 0; line-height: 1.7; }
.cr__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.crtag {
  font-size: var(--t-micro); padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--deep);
}
.crtag--gap { background: var(--mid-soft); color: var(--mid); }
.cr__sec--pr { padding: var(--s4); background: var(--bg-sunken); border-radius: var(--radius); border-left: 3px solid var(--accent); }
.cr__foot-note { font-size: var(--t-label); color: var(--text-tertiary); margin: var(--s3) 0 0; line-height: 1.5; }

.crbars { display: flex; flex-direction: column; gap: var(--s2); }
.crbar { display: grid; grid-template-columns: 8.5rem 1fr 2.2rem; gap: var(--s3); align-items: center; }
.crbar__k { font-size: var(--t-micro); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crbar__track { height: 8px; background: var(--bg-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.crbar__fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.crbar__v { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-secondary);
  text-align: right; font-variant-numeric: tabular-nums; }
.cr__actions { margin: var(--s5) 0 0; }

@media (max-width: 560px) {
  .cr__stats { grid-template-columns: repeat(2, 1fr); }
  .crbar { grid-template-columns: 6.5rem 1fr 2rem; }
  .pagesearch { flex-wrap: wrap; }
  .pagesearch input { flex: 1 1 100%; }
  .pagesearch .btn { flex: 1; }
  .pagesearch__clear { right: var(--s2); top: 24px; }
}

/* 游学页的三条筛选：先按年龄，再按国家地区，最后按类别 */
.catbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.catbar--age { margin-bottom: var(--s3); }
/* 桌面上这层壳不该存在：display: contents 让按钮直接参与 .catbar 的
   flex 换行，和加壳之前一模一样。只有手机上它才变成真正的横滑容器。 */
.catbar__row { display: contents; }
.catbar__lbl {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-tertiary); margin-right: var(--s2);
}
@media (max-width: 560px) { .catbar__lbl { flex-basis: 100%; margin-bottom: var(--s1); } }

/* 手机上三条筛选一共折成十几行，第一张卡片要滑过一屏半才看得见。
   改成每条一行横滑：标题仍单独占一行，按钮不再换行。 */
@media (max-width: 720px) {
  .catbar__row {
    display: flex; gap: var(--s2); align-items: center;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .catbar__row::-webkit-scrollbar { display: none; }
  .catbar__row.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .catbar__row .catbtn { flex: 0 0 auto; }
  .catbar { display: block; margin-bottom: var(--s3); }
  .catbar__lbl { display: block; margin: 0 0 var(--s1); }
}

/* ══ 认识 EduCompass ═══════════════════════════════════
   这一版的取舍：
   · 层级——全页只有 .ab-h1 一个最强级别。H2 明显小一档，H3 更小，
     正文与 lede 各只有一种尺寸。不再每段自定字号。
   · 颜色——不给 section 配底色。分段靠 --ab-gap 的留白加一条发丝线。
     全页只有一个强调色（--accent / --deep），其余是中性灰阶。
   · 图标——只有 Explore / Experience / Decide 三个，同尺寸同描边同色。
     其他段落零图标；箭头与连接线一律 CSS 画，不再塞 SVG。
   · 动效——只有 hover 位移与 hero 的一次性路径描出。 */

/* 两页共用同一套 editorial 令牌。首页挂 .edpage、认识页挂 .ab，
   类名不同但走同一份变量与 .ab-* 组件——两页必须看上去是同一个产品。 */
.ab, .edpage {
  /* 段间留白比上一版大一档：editorial 的呼吸感主要来自这里 */
  --ab-gap: clamp(3.5rem, 8vw, 6.5rem);
  --ab-measure: 34rem;
}

.ab-sec { padding-block: var(--ab-gap); }
.ab-sec--rule { border-top: 1px solid var(--surface-line); }
/* 页内锚点要躲开粘性顶栏：单行 55px，≤939px 导航换到第二行后是 89px。 */
.ab-sec[id] { scroll-margin-top: 68px; }
@media (max-width: 939px) { .ab-sec[id] { scroll-margin-top: 102px; } }
.ab-sec:focus { outline: none; }

/* ── 字阶：全页只有这几种 ─────────────────────────── */
.ab-eyebrow {
  margin: 0 0 var(--s4); font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  /* 12px 以下的常规字重要 4.5:1，--text-tertiary 在浅底上不够 */
  color: var(--text-secondary);
}
.ab-h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.12; letter-spacing: -.035em;
}
.ab-h1 span { display: block; }
.ab-h1 span:last-child { color: var(--accent); }
.ab-h1__sub {
  margin: var(--s4) 0 0; font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--text-secondary); font-variant-ligatures: none; letter-spacing: -.01em;
}
.ab-h2 {
  margin: 0 0 var(--s4); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 2.7vw, 2.05rem); line-height: 1.28; letter-spacing: -.025em;
  max-width: 20em;
}
.ab-h2--en { font-variant-ligatures: none; }
.ab-lede {
  margin: 0 0 var(--s5); font-size: clamp(1rem, 1.35vw, 1.13rem); line-height: 1.65;
  color: var(--text-secondary); max-width: var(--ab-measure);
}
.ab-lede--tight { margin-bottom: var(--s3); }
.ab-body {
  margin: 0 0 var(--s5); font-size: .95rem; line-height: 1.8;
  color: var(--text-secondary); max-width: var(--ab-measure);
}
.ab-body--wide { max-width: 40rem; }

/* ── Hero ─────────────────────────────────────────── */
.ab-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 7.5vw, 6rem) clamp(3rem, 7vw, 5.5rem);
}
/* 背景语言：一条很淡的路线 + 几个节点 + 一枚罗盘刻度。
   它是氛围，不是插画——所以压到 .14 透明度，永远不跟标题争。 */
.ab-hero__mark {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--accent); opacity: .16; pointer-events: none;
}
.ab-hero__mark path[stroke-dasharray] {
  stroke-dasharray: 3 7; stroke-dashoffset: 0;
  animation: ab-draw 1.6s var(--ease) both;
}
@keyframes ab-draw { from { stroke-dashoffset: 260; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
.ab-hero__inner { position: relative; max-width: 44rem; }
.ab-hero__lead {
  margin: var(--s5) 0 0; font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.75;
  color: var(--text-secondary); max-width: 30rem;
}
.ab-hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

/* ── JOURNEY：Explore → Experience → Decide ───────── */
.ab-journey {
  list-style: none; margin: var(--s7) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6);
}
/* 三步之间的连接线：这是"一条路径"而不是三张并列的卡片，
   全靠这条发丝线表达，所以它必须穿过去，而不是停在卡片边界。 */
.ab-journey::before {
  content: ""; position: absolute; top: 21px; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(to right, transparent,
    var(--surface-line-strong) 10%, var(--surface-line-strong) 90%, transparent);
}
.ab-jstep { position: relative; }
.ab-jstep__icon {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  /* 三个圈同一个中性底色，不分色——分色就变成 feature cards 了 */
  background: var(--bg); border: 1px solid var(--surface-line-strong);
  color: var(--deep); margin-bottom: var(--s4);
}
.ab-jstep__n {
  display: block; margin-bottom: var(--s2);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  color: var(--text-secondary);
}
.ab-jstep__en {
  margin: 0; font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--deep);
}
.ab-jstep__zh {
  margin: var(--s2) 0 var(--s2); font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
}
.ab-jstep__meta { margin: 0; font-size: .82rem; line-height: 1.7; color: var(--text-secondary); }

/* ── 三个问题 ─────────────────────────────────────── */
.ab-qs {
  list-style: none; margin: 0 0 var(--s6); padding: 0;
  display: grid; gap: var(--s3); max-width: 38rem; counter-reset: abq;
}
.ab-qs li {
  position: relative; padding-left: var(--s6); counter-increment: abq;
  font-size: 1.02rem; line-height: 1.6; color: var(--text);
}
.ab-qs li::before {
  content: counter(abq, decimal-leading-zero); position: absolute; left: 0; top: .25em;
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary);
}

/* ── 通用横向流程：Self → Experience → … ──────────── */
.ab-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.ab-flow li {
  position: relative; margin: 0 2.1rem var(--s3) 0;
  padding: .34rem .8rem; border: 1px solid var(--surface-line-strong);
  border-radius: var(--radius-pill); font-size: .85rem; white-space: nowrap;
}
.ab-flow li:last-child { margin-right: 0; }
/* 箭头画在两个节点之间的空隙里，不塞进胶囊内部 */
.ab-flow li:not(:last-child)::after {
  content: "→"; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: 2.1rem; text-align: center; color: var(--text-secondary);
}
.ab-flow--path li:last-child { border-color: var(--accent); color: var(--deep); }

/* ── CONNECT THE DOTS：全页视觉记忆点 ─────────────── */
.ab-dots__head { max-width: 38rem; }
.ab-ladder {
  list-style: none; margin: var(--s6) 0 0; padding: 0 0 0 var(--s6);
  position: relative; display: grid; gap: var(--s4); max-width: 20rem;
}
.ab-ladder::before {
  content: ""; position: absolute; left: 4px; top: .7em; bottom: .7em;
  width: 1px; background: var(--surface-line-strong);
}
.ab-ladder li { position: relative; }
.ab-ladder li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s6) + 1px); top: .45em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--accent); background: var(--bg);
}
.ab-ladder li:last-child::before { background: var(--accent); }
.ab-ladder span { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: -.01em; }
.ab-dots__aside {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.35; letter-spacing: -.025em;
  color: var(--deep); max-width: 16em; font-variant-ligatures: none;
}
@media (min-width: 861px) {
  .ab-dots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
  .ab-dots__head { grid-column: 1 / -1; }
  .ab-dots__aside { align-self: center; }
}
@media (max-width: 860px) { .ab-dots__aside { margin-top: var(--s6); } }

/* ── 短期项目的视觉锚句 ───────────────────────────── */
.ab-anchor {
  margin: var(--s7) 0 0; padding: var(--s2) 0 var(--s2) var(--s5);
  border-left: 2px solid var(--accent); max-width: 32rem;
}
.ab-anchor__zh {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.35; letter-spacing: -.025em;
}
.ab-anchor__en {
  margin: var(--s2) 0 0; font-size: .88rem; color: var(--text-secondary);
  font-variant-ligatures: none;
}
.ab-more { margin: var(--s6) 0 0; font-size: .9rem; }
.ab-more a { font-weight: 600; }

/* ── OUR ROLE 的三个词 ────────────────────────────── */
.ab-words {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s5) clamp(2rem, 6vw, 4.5rem);
}
.ab-words b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.3vw, 1.75rem); letter-spacing: -.03em;
  font-variant-ligatures: none;
}
.ab-words span { font-size: .85rem; color: var(--text-secondary); }

/* ── 学生 / 家长：两块干净的编排，不是两张卡 ───────── */
.ab-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) clamp(2rem, 6vw, 5rem); }
.ab-two__en {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.38; letter-spacing: -.025em;
  font-variant-ligatures: none;
}
.ab-two__zh { margin: var(--s3) 0 0; font-size: .95rem; line-height: 1.75; color: var(--text-secondary); }

/* ── WHERE SHOULD I START：清单，不是五张彩色卡 ───── */
.ab-start { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--surface-line); }
.ab-start__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s3); border-bottom: 1px solid var(--surface-line);
  color: inherit; text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.ab-start__row:hover, .ab-start__row:focus-visible { background: var(--bg-hover); text-decoration: none; }
.ab-start__n { font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); }
.ab-start__t { font-size: 1.02rem; font-weight: 600; }
.ab-start__go { font-size: .85rem; color: var(--text-secondary); }
.ab-start__arrow {
  color: var(--deep); font-size: 1rem;
  transition: transform var(--dur) var(--ease);
}
.ab-start__row:hover .ab-start__arrow { transform: translateX(4px); }

/* ── 收束：全页唯一一块有底色的区域 ───────────────── */
.ab-close {
  margin-top: var(--ab-gap); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg); background: var(--bg-sunken); text-align: center;
}
.ab-close .ab-h2 { max-width: none; }
.ab-close__zh {
  margin: 0 0 var(--s6); font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text-secondary);
}
.ab-close__en2 {
  margin: 0 0 var(--s6); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing: -.025em; line-height: 1.35;
  font-variant-ligatures: none;
}

/* 首页「是什么」下面那行安静的收录量。放这里而不是做成四个大数字：
   首页要的是"能帮我什么"，不是一块数据看板。 */
.ab-microstat {
  margin: var(--s5) 0 0; font-size: .84rem; color: var(--text-tertiary);
}

/* Hero 的问句：比首页 slogan 收一档，问句本来就不该喊 */
.ab-h1--q { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.2; max-width: 16em; }

/* 传统顺序 vs 重排后的顺序 */
.ab-order { display: grid; gap: var(--s7); margin-top: var(--s6); }
@media (min-width: 861px) { .ab-order { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-order__block h3 { margin-bottom: var(--s4); }
/* 旧顺序压低存在感：它是被我们否定的那条，不该和新顺序抢眼 */
.ab-flow--muted li { color: var(--text-tertiary); border-color: var(--surface-line); }
.ab-flow--muted li:not(:last-child)::after { color: var(--surface-line-strong); }
/* 循环：最后一环回到开头，所以末项也带箭头 */
.ab-flow--loop li:last-child::after {
  content: "↺"; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: 2.1rem; text-align: center; color: var(--text-secondary);
}

.ab-h3 {
  margin: 0 0 var(--s3); font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.015em;
}

/* 三步深讲版：比首页那版多一行说明，所以给它更松的行距 */
.ab-journey--deep .ab-jstep__zh { font-size: 1.05rem; line-height: 1.45; }
.ab-journey--deep .ab-jstep__meta { margin-top: var(--s2); }

/* 引句：整段话本身就是版面重点，不套框、不加引号图形 */
.ab-pull {
  margin: var(--s7) 0 0; padding-left: var(--s5); border-left: 2px solid var(--accent);
  max-width: 34rem;
}
.ab-pull__en {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.4; letter-spacing: -.02em;
  font-variant-ligatures: none;
}
.ab-pull__zh { margin: var(--s3) 0 0; font-size: .92rem; color: var(--text-secondary); }

/* 「一次我不喜欢」：全页留白最大的一段，靠字号与空白说话 */
.ab-statement { text-align: center; }
.ab-statement__zh {
  margin: var(--s5) auto var(--s4); max-width: 18em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.25; letter-spacing: -.03em;
}
.ab-statement__en {
  margin: 0 auto var(--s6); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--accent);
  letter-spacing: -.02em; font-variant-ligatures: none;
}
.ab-statement__body {
  max-width: 32rem; margin-inline: auto; display: grid; gap: var(--s3);
  font-size: .95rem; line-height: 1.8; color: var(--text-secondary);
}
.ab-statement__body p { margin: 0; }

/* 工具边界：必要但不该抢版面，压到最低存在感 */
.ab-fineprint .ab-body { font-size: .86rem; }
.ab-fineprint { padding-bottom: var(--s6); }

/* ── 移动端：所有横向流程改竖排 ───────────────────── */
@media (max-width: 860px) {
  .ab-hero { padding-block: clamp(2rem, 8vw, 3rem) clamp(2.25rem, 8vw, 3rem); }
  .ab-hero__mark { opacity: .1; }
  .ab-two { grid-template-columns: 1fr; }
  /* JOURNEY 变成竖向时间线：连接线从横向改到左侧竖向 */
  .ab-journey { grid-template-columns: 1fr; gap: var(--s6); padding-left: calc(21px + var(--s4)); }
  .ab-journey::before {
    top: 21px; bottom: 21px; left: 21px; right: auto; width: 1px; height: auto;
    background: var(--surface-line-strong);
  }
  .ab-jstep__icon { position: absolute; left: calc(-21px - var(--s4)); top: 0; margin-bottom: 0; }
  .ab-jstep__n { margin-bottom: var(--s1); }
  /* 横向流程在窄屏硬塞会挤成一团，改成竖排 + 向下箭头 */
  .ab-flow { flex-direction: column; align-items: flex-start; }
  .ab-flow li { margin: 0 0 1.75rem; white-space: normal; }
  .ab-flow li:last-child { margin-bottom: 0; }
  .ab-flow li:not(:last-child)::after {
    content: "↓"; left: 1rem; top: 100%; transform: none;
    width: auto; height: 1.75rem; line-height: 1.75rem;
  }
}
@media (max-width: 560px) {
  .ab-start__row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--s2); }
  .ab-start__go { grid-column: 2; font-size: .8rem; }
  .ab-start__arrow { grid-row: 1 / span 2; }
  .ab-words { gap: var(--s5) var(--s6); }
}

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .ab-hero__mark path[stroke-dasharray] { animation: none; }
  .ab-start__row, .ab-start__arrow { transition: none; }
  .ab-start__row:hover .ab-start__arrow { transform: none; }
}

/* 首页里通往"认识 EduCompass"的入口 */
.home-about {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); margin-bottom: var(--s5);
  border-radius: var(--radius-lg); background: var(--accent-soft);
  border: 1px solid var(--surface-line-strong); color: inherit; text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.home-about:hover { border-color: var(--accent); text-decoration: none; }
.home-about__icon { color: var(--deep); flex: none; display: grid; place-items: center; }
.home-about__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.home-about__text b { font-family: var(--font-display); font-size: var(--t-h3); }
.home-about__text span { color: var(--text-secondary); font-size: var(--t-sm); }
.home-about__go { display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--deep); font-weight: 600; font-size: var(--t-sm); white-space: nowrap; }
@media (max-width: 640px) {
  .home-about { flex-wrap: wrap; }
  .home-about__go { width: 100%; }
}

/* ── 短期项目的四段结构 ─────────────────────────────
   01 你会做什么 → 02 能探索什么 → 03 会带走什么 → 04 值不值。
   编号是竖排的时间线，不是装饰：这四段有先后关系。 */
.tsteps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .7rem; }
.tstep {
  position: relative; padding: .95rem 1rem .95rem 3.1rem;
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--bg-elevated);
}
.tstep__n {
  position: absolute; left: .95rem; top: .95rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--text-tertiary);
}
.tstep__icon {
  position: absolute; left: .8rem; top: 2.3rem;
  display: inline-flex; color: var(--accent);
}
.tstep__en {
  margin: 0; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--deep);
}
.tstep__zh { margin: .1rem 0 .35rem; font-size: 1rem; font-family: var(--font-display); }
.tstep__d { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--text-secondary); }

/* ── 这可能通向哪里 ─────────────────────────────────
   证据等级排在最前面。先说清楚这些结论是怎么来的，再列结论。 */
.tlead__ev {
  margin: 0 0 .8rem; padding: .4rem .65rem; border-radius: var(--radius-sm);
  font-size: .78rem; line-height: 1.5;
  background: var(--bg-sunken); color: var(--text-secondary);
  border-left: 3px solid var(--surface-line-strong);
}
.tlead__ev--official   { border-left-color: var(--accent); }
.tlead__ev--discipline { border-left-color: var(--cyan); }
.tlead__lbl {
  margin: .8rem 0 .35rem; font-size: .78rem; font-weight: 600; color: var(--text);
}
.tlead__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tlead__chips li {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .6rem; border-radius: var(--radius-pill);
  border: 1px solid var(--accent-soft); background: var(--accent-soft);
  color: var(--deep); font-size: .8rem;
}
.tlead__chips--plain li {
  border-color: var(--surface-line-strong); background: transparent; color: var(--text-secondary);
}
.tlead__lv {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--text-secondary);
}
.tlead__src { margin-top: .9rem; font-size: .8rem; }
.tlead__src summary { cursor: pointer; color: var(--text-secondary); }
.tlead__src blockquote {
  margin: .5rem 0; padding-left: .7rem; border-left: 2px solid var(--surface-line-strong);
  color: var(--text-secondary); font-size: .8rem; line-height: 1.6;
}
.tlead__src a { font-size: .74rem; word-break: break-all; }
@media (max-width: 480px) {
  .tstep { padding: .85rem .8rem .85rem 2.8rem; }
  .tstep__icon { left: .65rem; }
}

/* ══ 概念图元 ══════════════════════════════════════════
   首页与认识页共用。颜色只有三个语义：
     .dg--explore 蓝＝探索 · .dg--experience 绿＝体验 · .dg--decide 琥珀＝决定
     .dg--muted 灰＝传统路径与次要信息
   每个图元自己不带颜色，颜色由这四个类通过 --dg 注入，
   所以同一个图元换个语气就能复用，不必复制一份样式。 */
/* --dg 用于线条、边框、图标（非文本，3:1 即可）；
   --dg-text 用于压在同色 --dg-soft 上的小号文字（4.5:1）。
   浅色下蓝色只有 4.36:1，所以 explore 的文字换成 --deep——
   与导航选中态、.linkrow 是同一条规则，不是这里的特例。 */
.dg--explore    { --dg: var(--explore);    --dg-soft: var(--explore-soft);    --dg-text: var(--deep); }
.dg--experience { --dg: var(--experience); --dg-soft: var(--experience-soft); --dg-text: var(--experience); }
.dg--decide     { --dg: var(--decide);     --dg-soft: var(--decide-soft);     --dg-text: var(--decide); }
.dg--muted      { --dg: var(--muted-path); --dg-soft: var(--bg-sunken);       --dg-text: var(--muted-path); }

/* ── 连成一条线的节点串 ─────────────────────────────── */
.dg-chain {
  list-style: none; margin: var(--s6) 0 0; padding: 0; position: relative;
  display: grid; gap: var(--s5) var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
/* 贯穿的那条线就是"这是一条路径"的全部表达。它必须穿过去，
   而不是停在每个节点的边界上——停下来就又变成并列的卡片了。 */
.dg-chain::before {
  content: ""; position: absolute; top: 13px; left: 4%; right: 4%; height: 1px;
  background: linear-gradient(to right, transparent,
    var(--surface-line-strong) 8%, var(--surface-line-strong) 92%, transparent);
}
.dg-node { position: relative; display: grid; gap: 2px; }
.dg-node__mark {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--dg, var(--surface-line-strong));
  color: var(--dg, var(--text-secondary)); margin-bottom: var(--s3);
}
.dg-node__dot { display: none; }
.dg-node__icon { display: grid; place-items: center; }
.dg-node__n {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--text-secondary);
}
.dg-node__t { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.015em; }
.dg-node__d { font-size: .8rem; line-height: 1.6; color: var(--text-secondary); }
.dg-chain--dense { gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.dg-chain--dense .dg-node__t { font-size: .92rem; }

/* ── 两条并排的路径 ─────────────────────────────────── */
.dg-two { display: grid; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 761px) { .dg-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); } }
.dg-path__h {
  margin: 0 0 var(--s4); font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dg);
}
.dg-path__list { list-style: none; margin: 0; padding: 0 0 0 var(--s5); position: relative; display: grid; gap: var(--s3); }
.dg-path__list::before {
  content: ""; position: absolute; left: 4px; top: .55em; bottom: .55em;
  width: 1px; background: var(--dg); opacity: .35;
}
.dg-path__list li { position: relative; font-size: .95rem; color: var(--text); }
.dg-path__list li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s5) + 1px); top: .45em;
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--dg); background: var(--bg);
}
.dg-path__list li:last-child::before { background: var(--dg); }
.dg--muted .dg-path__list li { color: var(--text-secondary); }

/* ── 分叉：喜欢 / 不喜欢，两侧都继续往前 ─────────────── */
.dg-fork { margin-top: var(--s6); }
.dg-fork__root {
  margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; display: inline-flex; align-items: center; gap: var(--s2);
  width: 100%; justify-content: center;
}
.dg-fork__rootdot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--experience);
}
.dg-fork__arms { color: var(--surface-line-strong); line-height: 0; }
.dg-fork__arms svg { width: 100%; height: 44px; display: block; }
.dg-fork__cols { display: grid; gap: var(--s5); }
@media (min-width: 641px) { .dg-fork__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
.dg-fork__label {
  margin: 0 0 var(--s3); font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dg);
}

/* ── 闭环 ───────────────────────────────────────────── */
.dg-loop {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.dg-loop__n {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: .38rem .8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--dg); color: var(--text); font-size: .88rem;
  background: var(--dg-soft);
}
.dg-loop__icon { color: var(--dg); display: grid; place-items: center; }
.dg-loop__n:not(:last-of-type)::after { content: "→"; margin-left: var(--s2); color: var(--dg); }
.dg-loop__back { font-size: 1.1rem; color: var(--dg); }

/* ── 关系网：主链 + 中途分叉 ────────────────────────── */
.dg-net { margin-top: var(--s6); display: grid; gap: var(--s5); }
@media (min-width: 861px) { .dg-net { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: var(--s7); } }
.dg-net__spine { list-style: none; margin: 0; padding: 0 0 0 var(--s6); position: relative; display: grid; gap: var(--s4); }
.dg-net__spine::before {
  content: ""; position: absolute; left: 13px; top: .8em; bottom: .8em; width: 1px;
  background: linear-gradient(to bottom, var(--explore), var(--decide));
}
.dg-net__n { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s3); align-items: baseline; }
.dg-net__icon {
  position: absolute; left: calc(-1 * var(--s6)); top: -2px; z-index: 1;
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--surface-line-strong); color: var(--text-secondary);
}
.dg-net__n--hub .dg-net__icon { border-color: var(--explore); color: var(--explore); }
.dg-net__t { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.dg-net__q { grid-column: 1 / -1; font-size: .82rem; color: var(--text-secondary); }
/* 分叉出来的几个可能：它们说明"同一份能力可以通向好几处" */
.dg-net__fan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); align-content: center; }
.dg-net__fan li {
  position: relative; padding: .34rem .8rem .34rem var(--s5);
  border: 1px dashed var(--surface-line-strong); border-radius: var(--radius-pill);
  font-size: .85rem; color: var(--text-secondary); background: var(--bg-elevated);
}
.dg-net__fan li::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%; background: var(--explore);
}

/* ── 起点选择树 ─────────────────────────────────────── */
.dg-tree { margin-top: var(--s5); }
.dg-tree__q {
  margin: 0 0 var(--s4); display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.dg-tree__qdot { width: 8px; height: 8px; border-radius: 50%; background: var(--explore); }
.dg-tree__opts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--surface-line); }
.dg-opt {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s3); border-bottom: 1px solid var(--surface-line);
  color: inherit; text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.dg-opt:hover, .dg-opt:focus-visible { background: var(--dg-soft); text-decoration: none; }
.dg-opt__n { font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); }
.dg-opt__icon { display: grid; place-items: center; color: var(--dg); }
.dg-opt__t { font-size: 1.02rem; font-weight: 600; }
.dg-opt__go { font-size: .85rem; color: var(--text-secondary); }
.dg-opt__arrow { color: var(--dg); transition: transform var(--dur) var(--ease); }
.dg-opt:hover .dg-opt__arrow { transform: translateX(4px); }

/* ── Hero 的探索地图 ────────────────────────────────── */
.dg-map { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; }
.dg-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.dg-map__line {
  fill: none; stroke: currentColor; stroke-width: 1.25; color: var(--surface-line-strong);
  stroke-dasharray: 4 6;
}
.dg-map__line--strong { stroke-dasharray: none; color: var(--explore); opacity: .5; }
.dg-map__dot { fill: var(--explore); }
.dg-map__dot--alt { fill: var(--experience); }
.dg-map__dot--end { fill: var(--decide); }
.dg-map__tag {
  position: absolute; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
  white-space: nowrap;
}
.dg-map__tag--you      { left: 2%;  top: 8%;  color: var(--explore); }
.dg-map__tag--explore  { left: 2%;  top: 35%; }
.dg-map__tag--career   { left: 46%; top: 16%; }
.dg-map__tag--exp      { left: 46%; top: 70%; color: var(--experience); }
.dg-map__tag--next     { right: -1%; top: 49%; color: var(--decide); }

/* ── 窄屏：所有横向图元一律转竖向，不是把桌面图缩小 ──── */
/* 七个节点在 1000px 以下排不下一行，而折行会把那条贯穿的连线拦腰截断。
   宁可直接转成竖向时间线，也不留一个折行的中间态。 */
@media (max-width: 1000px) {
  .dg-chain { grid-template-columns: 1fr; gap: var(--s5); padding-left: calc(27px + var(--s4)); }
  .dg-chain::before {
    top: 13px; bottom: 13px; left: 13px; right: auto; width: 1px; height: auto;
    background: var(--surface-line-strong);
  }
  .dg-node__mark { position: absolute; left: calc(-27px - var(--s4)); top: 0; margin-bottom: 0; }
}
@media (max-width: 760px) {
  .dg-loop { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .dg-loop__n:not(:last-of-type)::after { content: "↓"; margin-left: var(--s2); }
  .dg-map { max-width: 22rem; }
  .dg-map__tag { font-size: .6rem; }
}
@media (max-width: 560px) {
  .dg-opt { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: var(--s2); }
  .dg-opt__go { grid-column: 3; font-size: .8rem; }
  .dg-opt__arrow { grid-row: 1 / span 2; }
}

/* 动效只有一处：路径描出一次。不做滚动视差、不做持续动画。 */
@keyframes dg-draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
.dg-map__line { stroke-dashoffset: 0; animation: dg-draw 1.4s var(--ease) both; }
.dg-map__line--strong { animation-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .dg-map__line { animation: none; }
  .dg-opt, .dg-opt__arrow { transition: none; }
  .dg-opt:hover .dg-opt__arrow { transform: none; }
}

/* ══ 两页新增的版式 ════════════════════════════════════ */

/* ── 首页 Hero：左文字 / 右地图，刻意不对称 ───────────── */
.hero--map { text-align: left; }
.hero__inner--split { display: grid; gap: var(--s7); align-items: center; width: 100%; }
@media (min-width: 901px) {
  .hero__inner--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s8); }
}
.hero--map .hero__tagline span { display: block; }
.hero--map .hero__lede { margin-inline: 0; max-width: 30rem; }
.hero--map .hero__cta { justify-content: flex-start; }
.hero--map .hero__eyebrow { text-align: left; }
/* 地图在深色 hero 上：线与标签都要提亮，否则等于没画 */
.hero--map .dg-map__line { color: rgba(255,255,255,.28); }
.hero--map .dg-map__line--strong { color: rgba(255,255,255,.5); opacity: 1; }
.hero--map .dg-map__dot { fill: #A9D2F5; }
.hero--map .dg-map__dot--alt { fill: #9FD3C2; }
.hero--map .dg-map__dot--end { fill: #F0C579; }
.hero--map .dg-map__tag { color: rgba(255,255,255,.72); }
.hero--map .dg-map__tag--you { color: #A9D2F5; }
.hero--map .dg-map__tag--exp { color: #9FD3C2; }
.hero--map .dg-map__tag--next { color: #F0C579; }
@media (max-width: 900px) {
  .hero--map { text-align: center; }
  .hero--map .hero__eyebrow { text-align: center; }
  .hero--map .hero__lede { margin-inline: auto; }
  .hero--map .hero__cta { justify-content: center; }
}

/* ── Explore → Experience → Decide 的旅程流 ──────────── */
.jflow {
  list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: grid; gap: var(--s6);
}
@media (min-width: 861px) { .jflow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); } }
.jflow__step { position: relative; padding-top: var(--s6); }
/* 每一步自己带一段路轨，三段接起来就是一条贯穿的路径；
   每段用自己的语义色，于是颜色本身也在讲"走到第几步了"。 */
.jflow__rail { position: absolute; top: 13px; left: 0; right: 0; height: 1px; background: var(--dg); opacity: .45; }
.jflow__step:first-child .jflow__rail { left: 13px; }
.jflow__step:last-child .jflow__rail { right: calc(100% - 27px); }
.jflow__mark {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--dg); color: var(--dg);
}
.jflow__n {
  display: block; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .1em; color: var(--text-secondary); margin-bottom: var(--s2);
}
.jflow__en {
  margin: 0; font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dg);
}
.jflow__zh { margin: var(--s2) 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.jflow__d { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--text-secondary); }
@media (max-width: 860px) {
  .jflow { padding-left: calc(27px + var(--s4)); gap: var(--s5); }
  .jflow__step { padding-top: 0; }
  .jflow__mark { left: calc(-27px - var(--s4)); }
  .jflow__rail { top: 27px; bottom: calc(-1 * var(--s5)); left: 13px; right: auto; width: 1px; height: auto; }
  .jflow__step:last-child .jflow__rail { display: none; }
}

/* ── 语义徽章 ───────────────────────────────────────── */
.dg-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s5); padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: var(--dg-soft); color: var(--dg); border: 1px solid var(--dg);
  font-size: .78rem; font-weight: 600;
}
.dg-badge span { display: grid; place-items: center; }

/* 有一段用极淡的底色分区，而不是再堆一层卡片 */
.ab-sec--tinted {
  background: var(--bg-sunken); border-radius: var(--radius-lg);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
/* 底色一暖，--accent 在它上面只剩 4.29:1。这一小块里的链接改用 --deep。 */
.ab-sec--tinted a { color: var(--deep); }
.ab-anchor--exp { border-left-color: var(--experience); }

/* ── 认识页 Hero 旁的小流程 ─────────────────────────── */
.ab-heroflow {
  list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
}
.ab-heroflow li {
  position: relative; display: inline-flex; align-items: baseline; gap: var(--s2);
  font-size: .84rem; color: var(--text-secondary);
}
.ab-heroflow li:not(:last-child)::after { content: "→"; margin-left: var(--s3); color: var(--surface-line-strong); }
.ab-heroflow__n { font-family: var(--font-mono); font-size: .66rem; color: var(--explore); }

/* ── 问题墙：大小不一的排版，其中一句是重点 ───────────── */
.ab-qwall {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: var(--s4); max-width: 44rem;
}
.ab-qwall__q {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: var(--text-secondary);
}
.ab-qwall__icon { color: var(--surface-line-strong); flex: none; transform: translateY(2px); }
/* 「我适合什么？」是整个产品的出发点，所以它在版面上也该最重 */
.ab-qwall__q--lead {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--text); line-height: 1.25;
  margin-block: var(--s2);
}
.ab-qwall__q--lead .ab-qwall__icon { color: var(--explore); }

/* ── 我们的角色：一条横向流程 ───────────────────────── */
.ab-roleflow {
  list-style: none; margin: var(--s6) 0 var(--s7); padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) 0;
}
.ab-roleflow li {
  position: relative; margin-right: 2rem; padding: .32rem .75rem;
  border: 1px solid var(--surface-line-strong); border-radius: var(--radius-pill);
  font-size: .86rem; white-space: nowrap;
}
.ab-roleflow li:last-child { margin-right: 0; }
.ab-roleflow li:not(:last-child)::after {
  content: "→"; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: 2rem; text-align: center; color: var(--text-secondary);
}
.ab-roleflow__end { border-color: var(--dg); color: var(--dg); font-weight: 600; }
@media (max-width: 640px) {
  .ab-roleflow { flex-direction: column; align-items: flex-start; }
  .ab-roleflow li { margin: 0 0 1.6rem; }
  .ab-roleflow li:last-child { margin-bottom: 0; }
  .ab-roleflow li:not(:last-child)::after { content: "↓"; left: 1rem; top: 100%; transform: none; width: auto; height: 1.6rem; line-height: 1.6rem; }
}

/* ── 收束区 ─────────────────────────────────────────── */
.ab-close__mark {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto var(--s4);
  border-radius: 50%; border: 1px solid var(--surface-line-strong); color: var(--deep);
  background: var(--bg);
}
.ab-statement__punch {
  margin: var(--s6) 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--decide); letter-spacing: -.02em;
}
.ab-close--q { background: transparent; border-top: 1px solid var(--surface-line); border-radius: 0; }

/* ── 体验类型与职业探索深度 ───────────────────────────
   体验类型是与「类别」不同的一条轴，所以视觉上也不跟类别按钮一样：
   类别是可点的筛选按钮，这里是陈述当前项目属性的标签。 */
.etype { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.etype__tag {
  display: inline-flex; align-items: center; padding: .28rem .7rem;
  border-radius: var(--radius-pill); font-size: .82rem; font-weight: 600;
  border: 1px solid var(--surface-line-strong); color: var(--text-secondary);
  background: var(--bg);
}
/* 四类各自沿用全站已有的语义色，不新造颜色 */
.etype__tag--career     { border-color: var(--decide);     color: var(--decide);     background: var(--decide-soft); }
.etype__tag--realworld  { border-color: var(--experience); color: var(--experience); background: var(--experience-soft); }
/* --explore 压在 explore-soft 上只有 4.36:1；accent-soft 系底色上站内一律用 --deep */
.etype__tag--university { border-color: var(--explore);    color: var(--deep);       background: var(--explore-soft); }

/* 职业探索深度。只在项目确实有官方职业探索证据时出现——
   没有的项目不显示这一块，而不是显示 0/5：那会被读成"这个项目差"。 */
.clevel {
  margin-top: var(--s4); padding: var(--s4);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--bg);
}
.clevel__lbl {
  margin: 0 0 var(--s1); font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--decide);
}
.clevel__q { margin: 0 0 var(--s3); font-size: .85rem; color: var(--text-secondary); }
.clevel__dots { display: flex; gap: 6px; margin: 0 0 var(--s2); }
.clevel__dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--surface-line-strong); background: transparent;
}
.clevel__dot.is-on { background: var(--decide); border-color: var(--decide); }
.clevel__n { margin: 0; font-size: .92rem; }
.tour__status { margin-bottom: var(--s4); font-size: .88rem; }

/* ── 探索方向：同级切换条 ───────────────────────────────
   这一族有四个页面，导航只通向其中一个。这条切换条让四个页面
   互相可达，并且标出"你现在在哪一个"。
   它是同级导航不是筛选器，所以不做成按钮组：四项各带一句说明，
   因为它们的区别是"从哪里开始",不是"筛掉什么"。 */
.ways { margin: var(--s5) 0 var(--s6); }
.ways__lbl {
  margin: 0 0 var(--s3); font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
}
.ways__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.ways__item {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); align-items: start;
  height: 100%; padding: var(--s4); border-radius: var(--radius);
  border: 1px solid var(--surface-line); background: var(--bg-elevated);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ways__item:hover { border-color: var(--dg); text-decoration: none; }
/* 当前页：左侧一道语义色的实边，不用整块填色——那会让它看着像被选中的筛选项 */
.ways__item.is-current {
  border-color: var(--dg); background: var(--dg-soft);
  box-shadow: inset 3px 0 0 var(--dg);
}
.ways__icon { grid-row: 1 / span 2; color: var(--dg); display: grid; place-items: center; padding-top: 1px; }
.ways__t { font-weight: 600; font-size: .95rem; }
.ways__d { font-size: .8rem; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 560px) {
  .ways__row { grid-template-columns: 1fr; gap: var(--s2); }
  .ways__item { padding: var(--s3) var(--s4); }
  .ways__d { font-size: .78rem; }
}

/* 署名：必须在，但不该抢版面 */
.ahub { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--surface-line); }
.ahub__attrib {
  margin: var(--s6) 0 0; font-size: .75rem; line-height: 1.7; color: var(--text-tertiary);
}

/* ── 技能 / 价值观画像 ──────────────────────────────── */
.aprof { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.aprof__row { display: grid; grid-template-columns: 8rem 1fr 2.2rem; align-items: center; gap: var(--s3); }
.aprof__n { font-size: .88rem; }
.aprof__bar { height: 7px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; }
.aprof__bar i { display: block; height: 100%; background: var(--explore); border-radius: 4px; }
.aprof__v {
  font-size: .8rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; text-align: right;
}
.aprof__top {
  margin-top: var(--s5); padding: var(--s4);
  border: 1px solid var(--dg); border-radius: var(--radius); background: var(--dg-soft);
}
.aprof__topLbl {
  margin: 0 0 var(--s3); font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dg);
}
.aprof__top ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.aprof__top li { font-size: .88rem; line-height: 1.7; color: var(--text-secondary); }
.aprof__top b { display: block; color: var(--text); font-size: .95rem; }
.aprof__top.dg--experience .aprof__bar i { background: var(--experience); }
@media (max-width: 560px) {
  .aprof__row { grid-template-columns: 6.5rem 1fr 2rem; gap: var(--s2); }
  .aprof__n { font-size: .82rem; }
  .ahub__list { padding-left: calc(28px + var(--s3)); }
  .ahub__mark { left: calc(-28px - var(--s3)); }
  .ahub__rail { left: calc(-28px - var(--s3) + 13px); }
}
.ab-three { margin-top: var(--s7); }
.ab-three__reality {
  margin: var(--s5) 0 var(--s4); padding-left: var(--s4);
  border-left: 2px solid var(--surface-line-strong);
  font-size: .88rem; line-height: 1.75; color: var(--text-secondary);
}

/* ── 方向解释层 ─────────────────────────────────────────
   只读。三个信号各用自己的语义色，但"还没做"一律中性灰——
   缺数据不是低分，不能染成警示色。 */
.why { margin: var(--s3) 0 0; }
.why__sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  cursor: pointer; list-style: none; padding: var(--s2) 0;
}
.why__sum::-webkit-details-marker { display: none; }
.sig { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.sig__row { display: inline-flex; align-items: baseline; gap: var(--s2); font-size: .78rem; }
.sig__k { font-style: normal; color: var(--text-tertiary); }
.sig__v { font-weight: 600; }
.sig__v--strong { color: var(--experience); }
.sig__v--some   { color: var(--text-secondary); }
.sig__v--weak   { color: var(--text-secondary); }
/* 「还没做」必须读起来是中性的：它是信息缺失，不是分数低 */
.sig__v--none   { color: var(--text-tertiary); font-weight: 500; font-style: italic; }
.why__more { font-size: .78rem; color: var(--deep); font-weight: 600; margin-left: auto; white-space: nowrap; }
/* 展开后把这行压低，但不能用 opacity——复合后只剩 3.25:1。
   换成本来就合规的次级色。 */
.why[open] .why__more { color: var(--text-secondary); font-weight: 500; }

.why__body {
  margin-top: var(--s3); padding: var(--s4);
  border: 1px solid var(--surface-line); border-radius: var(--radius); background: var(--bg);
}
.why__h {
  margin: 0 0 var(--s4); font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
}
.why__grid { display: grid; gap: var(--s4); }
@media (min-width: 861px) { .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
/* 左侧一道语义色，把三条解释和它们各自的维度对上 */
.why__item { padding-left: var(--s4); border-left: 2px solid var(--dg); }
.why__lbl {
  margin: 0 0 var(--s2); font-size: .78rem; font-weight: 600; color: var(--dg);
}
.why__item p { margin: 0 0 var(--s2); font-size: .82rem; line-height: 1.7; color: var(--text-secondary); }
.why__item p:last-child { margin-bottom: 0; }
.why__item b { color: var(--text); }
.why__gap { color: var(--text-tertiary) !important; }
.why__next {
  margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  font-size: .82rem; padding-top: var(--s4); border-top: 1px solid var(--surface-line);
}
.why__nextLbl { color: var(--text-secondary); }
.why__note { margin: var(--s3) 0 0; font-size: .74rem; line-height: 1.65; color: var(--text-tertiary); }

/* ══ AssessmentPathway ═════════════════════════════════
   三个维度先并列、再真的汇到一起，然后一条主干走到底。
   验收标准是：把所有文字拿掉，光看线条也读得出这是一段旅程。

   对齐靠的是几何而不是 JS：分叉带的 viewBox 宽 600，
   端点在 100 / 300 / 500，正好是三等分栅格的列心；
   preserveAspectRatio="none" 让它横向拉满，于是任何宽度都对得上。
   前提是栅格必须真的三等分——所以 .ap__dims 的 gap 是 0，
   列与列之间的空隙由 .ap__dim 自己的左右外边距撑出来。
   一旦改回 grid gap，列心会内移 gap/3，线就接不上支流了。 */
.ap { margin: var(--s6) 0 0; }

.ap__start {
  margin: 0; display: grid; justify-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary);
}
.ap__startDot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--explore);
}

/* ── 分叉带 / 汇合带 ─────────────────────────────────── */
.ap__fan { line-height: 0; }
.ap__fan svg { display: block; width: 100%; height: 60px; }
/* 横向拉伸会把线压扁，non-scaling-stroke 让线宽恒定 */
.ap__lines path, .ap__tip {
  fill: none; stroke: var(--ap-line); stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.ap__tip { fill: var(--ap-line); stroke: none; }

/* ── 三条支流 ───────────────────────────────────────── */
.ap__dims {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.ap__dim {
  position: relative; margin-inline: calc(var(--s4) / 2);
  padding: var(--s5) var(--s4) var(--s4);
  display: grid; gap: 2px; align-content: start;
  /* 只有一道顶边和一道极浅的底色：它是路径上的一段，不是一张卡片 */
  border-top: 2px solid var(--dg); background: var(--dg-soft);
  border-radius: 0 0 var(--radius) var(--radius);
}
.ap__dimMark {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1.5px solid var(--dg); color: var(--dg);
}
.ap__n {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--text-secondary); margin-top: var(--s3);
}
.ap__q { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; }
.ap__name { margin: 2px 0 0; font-size: .82rem; font-weight: 600; color: var(--dg-text); }
.ap__tool { margin: var(--s1) 0 0; font-size: .78rem; line-height: 1.6; color: var(--text-secondary); }
.ap__act { margin: var(--s3) 0 0; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ap__prog, .ap__doneTag { font-size: .76rem; color: var(--text-secondary); }
.ap__doneTag { color: var(--dg-text); font-weight: 600; }

/* ── 汇合之后的主干 ─────────────────────────────────── */
.ap__spine { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; }
/* position:relative 是箭头的定位上下文——少了它，::after 会跑到
   最近的已定位祖先上去，箭头就和线对不上。 */
.ap__spine li { position: relative; width: 100%; display: grid; justify-items: center; }
/* 节点之间那段带箭头的线：主干的连续感全靠它 */
.ap__spine li + li { padding-top: 28px; }
.ap__spine li + li::before {
  content: ""; position: absolute; top: 0; left: 50%; margin-left: -0.5px;
  width: 1px; height: 22px; background: var(--ap-line);
}
.ap__spine li + li::after {
  content: ""; position: absolute; top: 20px; left: 50%; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--ap-line);
}
.ap__stage {
  position: relative; width: 100%; max-width: 27rem;
  display: grid; grid-template-columns: auto auto 1fr; gap: 0 var(--s3);
  align-items: baseline; padding: var(--s3) var(--s4);
  border: 1px solid var(--surface-line); border-left: 2px solid var(--dg);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-elevated);
  color: inherit; text-decoration: none;
}
.ap__stage--link:hover { border-color: var(--dg); text-decoration: none; }
.ap__stage--link:hover .ap__dot { background: var(--dg); color: var(--accent-text); }
.ap__dot {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--dg); color: var(--dg); background: var(--bg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ap__stage .ap__n { margin-top: 0; }
.ap__t { font-weight: 600; font-size: .95rem; }
.ap__d { grid-column: 3; font-size: .78rem; line-height: 1.55; color: var(--text-secondary); }
.ap__note {
  margin: var(--s5) 0 0; font-size: .82rem; line-height: 1.75; color: var(--text-secondary);
  text-align: center;
}

/* ── 窄屏：主干移到左侧，支流从主干上分出去再回来 ─────
   不是把三张卡片摞起来——分叉与汇合的语义必须原样保留。 */
@media (max-width: 760px) {
  .ap { padding-left: calc(15px + var(--s4)); position: relative; }
  /* 一条贯穿全图的主干 */
  /* 主干从起点圆心 (20px) 起画，圆点因此长在线上而不是线旁边 */
  .ap::before {
    content: ""; position: absolute; left: 15px; top: 20px; bottom: 14px;
    width: 1px; background: var(--ap-line);
  }
  .ap__start { justify-items: start; }
  .ap__startDot { position: absolute; left: 9.5px; top: 14px; }
  /* 桌面那两条分叉带在窄屏没有意义，换成主干上的短横线分支 */
  .ap__fan { display: none; }
  .ap__dims { grid-template-columns: 1fr; gap: var(--s6); margin: var(--s6) 0; }
  .ap__dim {
    margin-inline: 0;
    border-top: none; border-left: 2px solid var(--dg);
    border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s4);
  }
  /* 节点圆直接骑在主干上，右边紧接着这条支流的内容——
     圆和内容之间只剩 1px，再画一段"分支短横线"会被圆整个盖住，
     所以这里不画，连接关系由圆本身承担。 */
  .ap__dimMark { top: 12px; left: calc(-1 * var(--s4) - 15px); transform: none; }
  .ap__n { margin-top: 0; }
  .ap__spine { justify-items: stretch; }
  .ap__spine li { justify-items: stretch; }
  /* 窄屏主干在左侧：连接线与箭头跟着挪过去。
     主干占 [15,16)，圆心 15.5——线与箭头都按这个圆心对，
     差 1px 就会在缺口处叠出一条双线。 */
  .ap__spine li + li::before { left: calc(-1 * var(--s4)); margin-left: 0; }
  .ap__spine li + li::after  { left: calc(-1 * var(--s4) - 3.5px); margin-left: 0; }
  .ap__stage { max-width: none; }
  .ap__note { text-align: left; }
}

/* 轻微的入场：路径像被画出来，而不是一次性砸上去 */
@media (prefers-reduced-motion: no-preference) {
  .ap__dim, .ap__spine li { animation: ap-in .5s var(--ease) both; }
  .ap__dim:nth-child(2) { animation-delay: .06s; }
  .ap__dim:nth-child(3) { animation-delay: .12s; }
  .ap__spine li:nth-child(n+2) { animation-delay: .1s; }
}
@keyframes ap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }