:root{
  --bg:#FFFFFF; --bg-soft:#F6F8FC; --bg-soft-2:#FBFCFE;
  --ink:#0A0E17; --ink-2:#27303F; --muted:#5D6779; --muted-2:#8D97A8;
  --line:#E8ECF2; --line-2:#D5DCE7;
  --blue:#1F5EFF; --blue-deep:#123FCB; --blue-soft:#EEF3FF; --blue-line:#D2E0FF;
  --green:#0C8E62; --green-soft:#EAF7F1; --amber:#B47000; --amber-soft:#FFF6E5;
  --max:1080px; --ease:cubic-bezier(.2,.8,.24,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.72 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
[hidden]{display:none!important}
::selection{background:var(--blue);color:#fff}

/* ---------- 通用 ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4.4vw,40px)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.grad{background-image:linear-gradient(96deg,#1F5EFF 0%,#3D7BFF 42%,#123FCB 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:gradShift 9s ease-in-out infinite alternate}
@keyframes gradShift{from{background-position:0% 50%}to{background-position:100% 50%}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 26px;border-radius:12px;font-size:15px;font-weight:600;
  letter-spacing:.01em;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),opacity .2s}
.btn-p{background:var(--blue);color:#fff;
  box-shadow:0 12px 26px -12px rgba(31,94,255,.72),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-p:hover{background:#1650E8;transform:translateY(-2px);
  box-shadow:0 18px 34px -14px rgba(31,94,255,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-p:active{transform:translateY(0)}
.btn-g{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.btn-g:hover{border-color:var(--blue-line);background:var(--bg-soft)}
.btn-s{height:42px;padding:0 18px;font-size:14px;border-radius:10px}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.btn-p[disabled]:hover{background:var(--blue);transform:none}

/* ---------- 顶部 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:62px;
  display:flex;align-items:center;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line)}
.nav-in{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4.4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:block;flex:none;width:clamp(112px,15vw,146px)}
.logo img{width:100%;height:auto}
.nav-r{display:flex;align-items:center;gap:15px;margin-left:auto}
.dots{display:flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:99px;background:var(--line-2);
  transition:width .45s var(--ease),background .35s var(--ease),box-shadow .35s}
.dot.on{background:var(--blue);width:22px}
.step-tag{font-size:12.5px;color:var(--muted-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;transition:color .3s}
.step-tag b{color:var(--blue);font-weight:600}
.prog-top{position:fixed;top:0;left:0;height:2px;z-index:90;width:0;
  background:linear-gradient(90deg,var(--blue),#79A2FF);
  transition:width .1s linear}
@media(max-width:720px){
  .step-tag{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:calc(62px + clamp(34px,6vw,72px)) 0 clamp(34px,5vw,64px)}
.hero.installing{z-index:60}
.hero-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 380px at 80% -8%,rgba(31,94,255,.11),transparent 68%),
    radial-gradient(520px 300px at 4% 8%,rgba(31,94,255,.05),transparent 70%),
    linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 64%)}
.hero-lines{position:absolute;inset:0;pointer-events:none;opacity:.62;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:92px 100%;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(24px,4vw,52px);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 13px 0 10px;
  border-radius:99px;background:#fff;border:1px solid var(--blue-line);
  font-size:12.5px;font-weight:600;letter-spacing:.07em;color:var(--blue-deep);
  text-transform:uppercase}
.kicker i{width:6px;height:6px;border-radius:99px;background:var(--blue);
  box-shadow:0 0 0 3px rgba(31,94,255,.16)}
.hero h1{margin:20px 0 0;font-size:clamp(30px,4.4vw,48px);line-height:1.16;
  letter-spacing:-.038em;font-weight:700;text-wrap:balance}
.hero h1 em{font-style:normal;display:block;margin-top:2px}
.hero-sub{margin:20px 0 0;max-width:30em;font-size:clamp(15px,1.6vw,16.5px);
  color:var(--muted);line-height:1.78;text-wrap:pretty}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;
  font-size:12.5px;color:var(--muted-2)}
.hero-meta span{display:inline-flex;align-items:center;gap:6px}
.hero-meta i{width:5px;height:5px;border-radius:99px;background:var(--line-2)}

/* ---------- 工牌 ---------- */
.lanyard{position:relative;display:flex;flex-direction:column;align-items:center;
  perspective:1000px;padding-top:2px}
.lanyard-in{position:relative;transform-origin:50% -18px;
  animation:swing 6.5s ease-in-out infinite alternate;
  transition:transform .24s ease-out;will-change:transform}
@keyframes swing{from{transform:rotate(-2.1deg)}to{transform:rotate(2.1deg)}}
.ribbon{position:relative;width:16px;height:118px;margin:0 auto -4px;
  background:#2C63F0;border-radius:1px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.ribbon::after{content:"";position:absolute;inset:0;border-radius:1px;
  background:linear-gradient(90deg,rgba(10,22,52,.16),transparent 38%,rgba(10,22,52,.16))}
.clip{position:relative;z-index:2;width:26px;height:13px;margin:0 auto -5px;
  border-radius:3px;
  background:linear-gradient(180deg,#5C6879,#39424F);
  box-shadow:0 2px 5px -1px rgba(10,22,52,.42),inset 0 1px 0 rgba(255,255,255,.28)}
.idcard{position:relative;width:262px;background:#fff;border:1px solid var(--line-2);
  border-radius:16px;padding:15px 16px 13px;cursor:pointer;
  box-shadow:0 30px 58px -26px rgba(10,22,52,.36),0 1px 0 #fff inset;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s}
.idcard:hover{transform:translateY(-5px);border-color:var(--blue-line);
  box-shadow:0 40px 70px -30px rgba(10,22,52,.44),0 1px 0 #fff inset}
.idcard:active{transform:translateY(-1px)}
.idcard:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.idc-seal{position:absolute;top:9px;right:9px;display:none;align-items:center;gap:4px;
  height:20px;padding:0 8px;border-radius:99px;background:var(--green);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 6px 14px -6px rgba(12,142,98,.8)}
.idc-seal i{width:5px;height:5px;border-radius:99px;background:#fff}
.equipped .idc-seal{display:inline-flex}
.equipped .idc-lv{display:none}

/* 挂绳脱落 */
.ribbon,.clip{transition:transform .5s var(--ease),opacity .42s var(--ease)}
.lanyard.get .lanyard-in{animation:none}
.lanyard.get .ribbon{transform:translateY(-78px) scaleY(.55);opacity:0}
.lanyard.get .clip{transform:translateY(-30px);opacity:0}

/* 工牌飞到左下角 */
.idcard.fly{animation:hsFly .9s cubic-bezier(.3,.04,.2,1) forwards;pointer-events:none}
@keyframes hsFly{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  20%{transform:translate(0,-26px) scale(1.08) rotate(-2.2deg)}
  52%{transform:translate(calc(var(--fx,0px)*.5),calc(var(--fy,0px)*.5)) scale(.52) rotate(-9deg)}
  100%{transform:translate(var(--fx,0px),var(--fy,0px)) scale(var(--fs,.14)) rotate(-14deg);opacity:0}
}
.badge-hint{margin-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--muted-2);cursor:pointer;transition:opacity .4s,color .3s}
.badge-hint:hover{color:var(--blue-deep)}
.badge-hint::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--blue);
  box-shadow:0 0 0 4px rgba(31,94,255,.14);animation:dotPulse 2.2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px rgba(31,94,255,.14)}50%{box-shadow:0 0 0 8px rgba(31,94,255,.03)}}
.lanyard.gone .lanyard-in,.lanyard.gone .badge-hint{display:none}
.eq-note{width:262px;background:#fff;border:1px solid #C9EBDC;border-radius:16px;
  padding:18px 18px 17px;display:flex;gap:12px;align-items:flex-start;
  box-shadow:0 26px 54px -28px rgba(12,142,98,.45);
  animation:eqIn .5s var(--ease) both}
@keyframes eqIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.eq-av{position:relative;flex:none;width:40px;height:40px;border-radius:11px;
  background:linear-gradient(150deg,#3D7BFF,#123FCB);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  box-shadow:0 8px 16px -8px rgba(31,94,255,.8)}
.eq-av i{position:absolute;right:-5px;bottom:-5px;width:17px;height:17px;border-radius:99px;
  background:var(--green);border:2px solid #fff}
.eq-av i::after{content:"";position:absolute;left:3.5px;top:4px;width:7px;height:3.5px;
  border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg)}
.eq-note b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;display:block}
.eq-note p{margin-top:5px;font-size:12px;color:var(--muted);line-height:1.65}
@media(max-width:900px){.eq-note{width:236px;margin-left:6px}}
.idc-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:11px;border-bottom:1px dashed var(--line-2)}
.idc-brand{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;color:var(--ink)}
.idc-brand i{width:11px;height:11px;border-radius:3.5px;background:var(--blue)}
.idc-lv{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--blue-deep);
  background:var(--blue-soft);border:1px solid var(--blue-line);
  padding:2px 7px;border-radius:99px}
.idc-body{display:flex;gap:12px;align-items:center;padding:12px 0 10px}
.idc-av{width:46px;height:46px;border-radius:12px;flex:none;
  background:linear-gradient(150deg,#3D7BFF,#123FCB);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;letter-spacing:-.02em;
  box-shadow:0 8px 16px -8px rgba(31,94,255,.8)}
.idc-name{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.idc-role{font-size:11.5px;color:var(--muted-2);margin-top:1px}
.idc-prog{margin-top:2px}
.idc-prog-l{display:flex;justify-content:space-between;font-size:10.5px;
  color:var(--muted-2);margin-bottom:5px;letter-spacing:.02em}
.idc-prog-l b{color:var(--blue-deep);font-weight:700;font-variant-numeric:tabular-nums}
.idc-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.idc-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#3D7BFF,#123FCB);
  transition:width .8s var(--ease)}
.idc-foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;padding-top:12px;margin-top:1px;border-top:1px solid var(--line)}
.idc-no{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);letter-spacing:.06em}
.idc-code{width:76px;height:20px;
  background:repeating-linear-gradient(90deg,#0A0E17 0 1.4px,transparent 1.4px 3.2px,#0A0E17 3.2px 3.8px,transparent 3.8px 6px);
  opacity:.82}
.idc-gloss{position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.9) 47%,transparent 58%);
  opacity:0;transform:translateX(-30%);transition:opacity .3s}
.lanyard:hover .idc-gloss{opacity:1;transform:translateX(30%);transition:opacity .5s,transform 1.1s var(--ease)}

@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:36px}
  .lanyard{order:2;align-items:flex-start;padding-left:6px}
  .idcard{width:236px}
}

/* ---------- 区块框架 ---------- */
.sec{padding:clamp(52px,7.6vw,92px) 0;position:relative}
.sec.soft{background:var(--bg-soft)}
.sec-line{border-top:1px solid var(--line)}
.sh{display:flex;gap:clamp(14px,2.4vw,26px);align-items:flex-start;margin-bottom:clamp(26px,3.6vw,40px)}
.sh-no{flex:none;font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:9px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  letter-spacing:0;margin-top:3px}
.sh-k{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted-2);
  text-transform:uppercase;margin-bottom:7px}
.sh h2{font-size:clamp(23px,3.3vw,34px);line-height:1.24;letter-spacing:-.028em;
  font-weight:700;text-wrap:balance}
.sh-p{margin-top:10px;color:var(--muted);font-size:15px;max-width:34em;line-height:1.75;text-wrap:pretty}
.done-pill{display:none;align-items:center;gap:6px;margin-left:auto;flex:none;
  font-size:12px;font-weight:600;color:var(--green);background:var(--green-soft);
  border:1px solid #C9EBDC;border-radius:99px;height:27px;padding:0 11px}
.done-pill.show{display:inline-flex}
.done-pill svg{width:11px;height:11px}
@media(max-width:600px){.done-pill{display:none!important}}

/* ---------- 01 算一笔账 ---------- */
.diag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);
  align-items:start}
.diag-tags{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(16px,2.4vw,24px)}
.tag-g{margin-bottom:22px}
.tag-g:last-of-type{margin-bottom:8px}
.tag-l{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.tag-l b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.tag-l em{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.tag-o{display:flex;flex-wrap:wrap;gap:7px}
/* 第一组是"你现在是谁"，给它一块底，让人先停在这儿 */
.tag-g.bg-g{background:linear-gradient(180deg,#F5F8FF,#FBFCFE);border:1px solid var(--blue-line);
  border-radius:13px;padding:12px 12px 10px;margin-bottom:18px}
.tag-g.bg-g .tag-l{margin-bottom:9px}
.tag-g.bg-g .tag-l b{color:var(--blue-deep)}
.tag-g.bg-g .chip{background:#fff}
.tag-g.bg-g .chip[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 6px 14px -8px rgba(31,94,255,.9)}
.chip{height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line-2);
  background:#fff;font-size:13px;color:var(--ink-2);
  transition:border-color .22s var(--ease),background .22s,color .22s,transform .22s var(--ease)}
.chip:hover{border-color:var(--blue-line);background:var(--bg-soft)}
.chip[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue);
  color:var(--blue-deep);font-weight:600;
  box-shadow:0 0 0 3px rgba(31,94,255,.1)}
.chip:active{transform:scale(.97)}
.diag-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line);margin-top:4px}
.diag-cnt{font-size:12.5px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.diag-cnt b{color:var(--ink);font-weight:600}
.diag-bar{flex:1;min-width:70px;height:4px;border-radius:99px;background:var(--bg-soft);overflow:hidden}
.diag-bar i{display:block;height:100%;width:0;background:var(--blue-soft);
  border-radius:99px;transition:width .4s var(--ease),background .4s}
.diag-bar i.full{background:var(--blue)}
.diag-btn{width:100%;margin-top:14px}

/* 结果 */
.res{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(16px,2.4vw,24px);position:relative;overflow:hidden}
.res-idle{position:absolute;inset:0;z-index:3;background:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:clamp(16px,2.4vw,24px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.res-idle.on{opacity:1}
.res-idle h4{font-size:15px;font-weight:600;color:var(--ink-2)}
.res.ghost .res-n b{width:126px;height:40px;border-radius:9px;
  background:linear-gradient(90deg,#EEF1F6,#E2E7F0,#EEF1F6);
  background-size:220% 100%;
  animation:skel 2.4s ease-in-out infinite;
  margin-bottom:4px}
@keyframes skel{from{background-position:120% 0}to{background-position:-20% 0}}
.res.ghost .res-n span{visibility:hidden}
.res.ghost .res-s,.res.ghost .res-note{color:var(--muted-2)}
.res.ghost .res-note{border-top-style:dashed}
.res.ghost .res-badge{background:var(--bg-soft);border-color:var(--line)}
.res.ghost .res-badge b{width:30px;height:19px;border-radius:5px;
  background:var(--line);color:transparent;font-size:0;margin-left:auto}
.res.ghost .res-badge span{visibility:hidden}
.res.ghost .parts em{color:var(--line-2);font-weight:400}
.res-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.res-l{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--muted-2);
  text-transform:uppercase}
.res-n{display:flex;align-items:baseline;gap:4px;margin-top:4px}
.res-n b{font-size:clamp(38px,5vw,50px);line-height:1;font-weight:700;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background-image:linear-gradient(120deg,#1F5EFF,#123FCB);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.res-n span{font-size:15px;font-weight:600;color:var(--muted)}
.res-s{margin-top:8px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.res-s b{color:var(--ink-2);font-weight:600}
.res-badge{flex:none;text-align:right;background:var(--blue-soft);
  border:1px solid var(--blue-line);border-radius:12px;padding:9px 12px 8px;min-width:82px}
.rb-n{display:flex;align-items:baseline;justify-content:flex-end;gap:1px}
.res-badge b{font-size:21px;font-weight:700;color:var(--blue-deep);
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.res-badge span{font-size:11px;font-weight:600;color:var(--blue-deep);opacity:.55}
.res-badge em{display:block;font-style:normal;font-size:10px;color:var(--muted);
  margin-top:4px;letter-spacing:.02em}
.bar{position:relative;height:26px;margin:20px 0 6px;border-radius:8px;
  background:var(--bg-soft);overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;display:block;
  transition:width .95s var(--ease),left .95s var(--ease)}
.b-now{left:0;width:0;background:linear-gradient(180deg,#C3D3F5,#A8BEEA)}
.b-add{left:0;width:0;background:linear-gradient(180deg,#3D7BFF,#123FCB)}
.bar-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2);
  font-variant-numeric:tabular-nums;margin-bottom:16px}
.bar-l i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
.bar-l u{width:7px;height:7px;border-radius:2px;text-decoration:none;display:inline-block}
.bar-l .k1{background:#B4C8F0}
.bar-l .k2{background:var(--blue)}
.parts{margin:0;display:grid;gap:9px}
.parts li{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12.5px;
  align-items:baseline;color:var(--ink-2)}
.parts li span{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.parts li em{font-style:normal;font-weight:600;color:var(--blue-deep);
  font-variant-numeric:tabular-nums}
.res-note{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2);line-height:1.7}
.res-note b{color:var(--blue-deep)}
.res-foot{margin-top:10px;font-size:10.5px;color:var(--muted-2);line-height:1.62}
.scanline{position:absolute;left:0;right:0;height:2px;top:0;opacity:0;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  box-shadow:0 0 12px 1px rgba(31,94,255,.42)}
.res.scanning .scanline{opacity:1;animation:scanY 1.15s var(--ease) infinite}
@keyframes scanY{from{top:0}to{top:100%}}
.steps3{display:grid;gap:7px;margin-top:2px}
.steps3 div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted-2);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.steps3 div.on{opacity:1;transform:none;color:var(--ink-2)}
.steps3 u{width:15px;height:15px;border-radius:99px;flex:none;text-decoration:none;
  border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center}
.steps3 div.on u{border-color:var(--blue);background:var(--blue)}
.steps3 div.on u::after{content:"";width:6px;height:3px;border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff;transform:rotate(-45deg) translateY(-1px)}
@media(max-width:820px){.diag{grid-template-columns:1fr}}

/* ---------- 02 挑一次人 ---------- */
.cand{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start}
.cd{position:relative;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:13px 13px 11px;overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.cd:hover{border-color:var(--blue-line);box-shadow:0 12px 26px -18px rgba(10,22,52,.3);
  transform:translateY(-2px)}
.cd.you{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,94,255,.12)}
.cd.you::after{content:"你选的";position:absolute;top:0;right:0;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--blue);
  padding:2px 7px;border-bottom-left-radius:8px}
.cd.hit{border-color:var(--green);box-shadow:0 0 0 3px rgba(12,142,98,.12)}

.cd-h{display:flex;align-items:center;gap:8px}
.cd-av{width:26px;height:26px;border-radius:8px;flex:none;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  color:var(--ink-2)}
.cd-nm{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.cd-yr{font-size:10.5px;color:var(--muted-2);margin-top:1px}
.cd-t{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px;min-height:38px;align-content:flex-start}
.cd-t i{font-style:normal;font-size:10px;color:var(--muted);background:var(--bg-soft);
  border-radius:4px;padding:1.5px 5px;line-height:1.5}
.cd-b{margin-top:9px;height:3px;border-radius:99px;background:var(--bg-soft);overflow:hidden}
.cd-b i{display:block;height:100%;width:0;border-radius:99px;background:var(--blue);
  transition:width .7s var(--ease)}
.cd.hit .cd-b i{background:var(--green)}
.cd-sc{display:flex;justify-content:space-between;align-items:center;margin-top:6px;
  font-size:10.5px;color:var(--muted-2);font-variant-numeric:tabular-nums;height:14px;
  opacity:0;transition:opacity .35s var(--ease)}
.cd.sc .cd-sc{opacity:1}
.cd-sc b{font-size:12px;font-weight:700;color:var(--ink-2)}
.cd-sc b.g{color:var(--green)}
/* 看简历：光给标签和分数，用户没法判断 AI 凭什么 —— 得让他翻一眼原文 */
.cd-more{display:inline-flex;align-items:center;gap:4px;margin-top:7px;padding:0;border:0;
  background:none;font:inherit;font-size:10px;font-weight:600;letter-spacing:.02em;
  color:var(--blue);cursor:pointer;transition:color .2s}
.cd-more u{text-decoration:none;font-weight:400;color:var(--muted-2);font-size:9.5px}
.cd-more:hover{color:var(--blue-deep)}
.cd.op{border-color:var(--blue-line)}
.cd.op .cd-more{color:var(--muted-2)}
.cd-cv{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}
.cd.op .cd-cv{display:block}
.cd-cv p{margin:0 0 5px;font-size:10.5px;line-height:1.6;color:var(--ink-2);
  padding-left:9px;position:relative}
.cd-cv p::before{content:"";position:absolute;left:0;top:6px;width:3px;height:3px;
  border-radius:99px;background:var(--line-2)}
.cd-cv p:last-of-type{margin-bottom:0}
.cd-r{display:none;margin-top:8px;padding:6px 8px;border-radius:7px;background:var(--blue-soft);
  border:1px solid var(--blue-line);font-size:10px;line-height:1.55;color:var(--blue-deep)}
.cd.sc .cd-r{display:block}
.duel{margin-top:20px;display:grid;grid-template-columns:1fr auto 1fr;gap:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.duel-c{padding:16px 18px}
.duel-c span{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted-2);
  text-transform:uppercase}
.duel-c b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;
  margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.2}
.duel-c em{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.duel-c.ai{background:var(--blue-soft)}
.duel-c.ai b{color:var(--blue-deep)}
.duel-vs{display:flex;align-items:center;justify-content:center;width:46px;
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted-2);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:var(--bg-soft-2)}
.duel-note{margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.75;
  padding-left:14px;border-left:2px solid var(--blue);text-wrap:pretty}
.duel-note b{color:var(--blue-deep)}
/* 挑选标准 */
.pick-brief{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(14px,2.4vw,28px);
  padding:clamp(15px,2.4vw,22px);border-radius:18px;margin-bottom:14px;background:#fff;
  border:1px solid var(--line);box-shadow:0 24px 54px -44px rgba(10,22,52,.55)}
.pb-tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;
  border-radius:99px;background:var(--blue-soft);border:1px solid var(--blue-line);
  font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--blue-deep)}
.pb-tag i{width:4px;height:4px;border-radius:99px;background:var(--blue)}
.pb-role{display:block;margin-top:10px;font-size:clamp(15px,1.7vw,17px);font-weight:700;
  letter-spacing:-.022em;line-height:1.5;text-wrap:pretty}
.pb-meta{margin-top:7px;font-size:12px;color:var(--muted);line-height:1.65}
.pb-r{display:flex;flex-direction:column;gap:8px}
.pb-k{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--muted-2)}
.pb-c{display:grid;gap:6px}
.pb-c li{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:baseline;
  background:var(--bg-soft-2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.pb-c li.on{border-color:#C9EBDC;background:var(--green-soft)}
.pb-c i{font-style:normal;font-size:10px;font-weight:800;color:#fff;background:var(--ink);
  width:16px;height:16px;border-radius:4px;display:grid;place-items:center;
  transform:translateY(1.5px);font-family:var(--mono)}
.pb-c li.on i{background:var(--green)}
.pb-c b{font-size:12.5px;font-weight:600;white-space:nowrap}
.pb-c span{font-size:11px;color:var(--muted-2);line-height:1.5}
@media(max-width:820px){.pick-brief{grid-template-columns:1fr}}
@media(max-width:560px){
  .pb-c li{grid-template-columns:auto 1fr;row-gap:2px}
  .pb-c span{grid-column:1/-1}
}
/* 每张卡上的三条判定 */
.cd-c{display:flex;gap:4px;margin-top:7px}
.cd-c i{flex:1;height:15px;border-radius:4px;display:grid;place-items:center;
  font-style:normal;font-size:9px;font-weight:700;font-family:var(--mono);
  background:var(--bg-soft);color:#C6CDD9;
  transition:background .38s var(--ease),color .38s var(--ease),transform .38s var(--ease)}
.cd-c i.y{background:var(--green-soft);color:var(--green);transform:translateY(-1px)}

.cand-act{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.cand-hint{font-size:12.5px;color:var(--muted-2)}
@media(max-width:900px){.cand{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .duel{grid-template-columns:1fr}
  .duel-vs{width:auto;height:30px;border:0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
}

/* ---------- 03 找一份简历 ---------- */
/* 需求单 */
.brief{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,2.8vw,30px);
  padding:clamp(18px,2.8vw,26px);border-radius:20px;margin-bottom:16px;overflow:hidden;
  background:linear-gradient(148deg,#123FCB 0%,#1F5EFF 54%,#3F7DFF 100%);color:#fff;
  box-shadow:0 34px 70px -42px rgba(18,63,203,.92)}
.brief::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(420px 220px at 86% -22%,rgba(255,255,255,.24),transparent 70%),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:auto,68px 100%;
  -webkit-mask-image:linear-gradient(112deg,#000,transparent 76%);
  mask-image:linear-gradient(112deg,#000,transparent 76%)}
.brief-l,.brief-r,.brief-goal{position:relative}
.brief-tag{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;
  border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  font-size:11px;font-weight:600;letter-spacing:.08em}
.brief-tag i{width:5px;height:5px;border-radius:99px;background:#fff}
.brief-role{display:block;margin-top:12px;font-size:clamp(16px,1.9vw,19px);
  font-weight:700;letter-spacing:-.02em;line-height:1.46;text-wrap:pretty}
.brief-quote{margin-top:9px;font-size:13.5px;line-height:1.74;
  color:rgba(255,255,255,.82);text-wrap:pretty}
.brief-quote::before{content:"「";opacity:.55}
.brief-quote::after{content:"」";opacity:.55}
.brief-r{display:flex;flex-direction:column;gap:8px}
.brief-k{font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.64)}
.conds{display:grid;gap:6px}
.conds li{display:flex;align-items:flex-start;gap:9px;font-size:12.8px;line-height:1.55;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:8px 10px;transition:background .4s var(--ease),border-color .4s}
.conds li.hit{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.5)}
.conds i{flex:none;width:17px;height:17px;margin-top:1px;border-radius:5px;background:#fff;
  color:var(--blue-deep);font-style:normal;font-size:10.5px;font-weight:800;
  display:grid;place-items:center}
.brief-goal{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.86);
  border-top:1px solid rgba(255,255,255,.18);padding-top:13px}
.brief-goal b{color:#fff;font-weight:600}
.brief-goal em{font-style:normal;font-weight:800;font-family:var(--mono);
  background:rgba(255,255,255,.18);border-radius:6px;padding:1px 6px;margin:0 2px}
.brief-goal .g2{color:rgba(255,255,255,.62)}
.brief-goal .g2::before{content:"·";margin-right:9px;opacity:.8}

/* 关键词选择 */
.kw{margin-bottom:11px}
.kw-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.kw-k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:var(--muted-2);margin-bottom:6px}
.kw-head .kw-k{margin-bottom:0}
.kw-cnt{font-size:10.5px;color:var(--muted-2);font-variant-numeric:tabular-nums;flex:none}
.kw-cnt b{color:var(--blue-deep);font-weight:700}
.kw-list{display:flex;flex-wrap:wrap;gap:6px}
.kw-c{height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);
  background:#fff;font-size:12.5px;font-weight:500;color:var(--ink-2);
  transition:all .28s var(--ease)}
.kw-c:hover{border-color:var(--blue-line);background:var(--bg-soft);transform:translateY(-1px)}
.kw-c.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.kw-c.used{border-style:dashed;border-color:#E2C79A}
.kw-c.ok{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-deep);
  font-weight:600;cursor:default;pointer-events:none}

.race{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,22px)}
.pane{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(14px,2.2vw,20px);display:flex;flex-direction:column}
.pane-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px}
.pane-h b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.pane-h em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pane.old .pane-h em{color:var(--amber);background:var(--amber-soft)}
.pane.new{border-color:var(--blue-line);background:linear-gradient(178deg,#FAFBFF,#fff)}
.pane.new .pane-h em{color:var(--blue-deep);background:var(--blue-soft)}
.sbox{display:flex;gap:7px;margin-bottom:11px}
.sbox input{flex:1;min-width:0;height:38px;padding:0 11px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--bg-soft-2);
  font:400 12.5px/1 var(--font);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbox input:focus{outline:0;border-color:var(--blue-line);background:#fff}
/* 结果变成一个能上下翻的窗口 */
.rlist{flex:1;display:grid;grid-auto-rows:max-content;gap:5px;min-height:252px;max-height:252px;align-content:start;
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.rlist::-webkit-scrollbar{width:4px}
.rlist::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.rlist::-webkit-scrollbar-track{background:transparent}
.rlist:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rrow{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;
  padding:7px 9px;border-radius:8px;
  background:var(--bg-soft-2);border:1px solid transparent;font-size:14px;line-height:1.5;
  transition:background .3s,border-color .3s,transform .3s var(--ease)}
.rrow:hover{background:var(--bg-soft)}
/* 左边这一栏改成两行：上面是谁，下面一句简历原话——这才是筛选时真正看的东西 */
.pane.old .rrow{display:block;padding:6px 9px 7px}
.rr-m{display:flex;align-items:center;gap:8px}
.rr-e{margin-top:3px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.rrow.hit .rr-e{color:#1E7B5B}
.rrow span{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink-2)}
.rrow u{font-style:normal;text-decoration:none;font-size:10.5px;color:var(--muted-2);
  font-variant-numeric:tabular-nums}
.rrow b{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;
  background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px;flex:none}
.rrow b.low{color:var(--amber);border-color:#F0DCB4;background:var(--amber-soft)}
.rrow b.zero{color:var(--muted-2);border-color:var(--line);background:transparent}
.rrow.hit{background:var(--green-soft);border-color:#C9EBDC}
.rrow.hit b{color:var(--green);border-color:#C9EBDC}
.rrow.hit span{color:var(--ink);font-weight:600}
.rrow.hit::after{content:"";position:absolute;top:0;bottom:0;width:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:translateX(-130%);animation:hitSweep 1.05s var(--ease) .3s 2}
@keyframes hitSweep{to{transform:translateX(240%)}}
.rmeta{display:flex;justify-content:space-between;gap:8px;font-size:11px;
  color:var(--muted-2);padding-top:10px;margin-top:9px;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.rmeta b{color:var(--ink-2);font-weight:600}
.pane.new .rmeta b{color:var(--blue-deep)}
.rrow.empty{justify-content:center;color:var(--muted-2);font-size:12px;
  border:1px dashed var(--line-2);background:transparent;padding:26px 9px}
.rrow.load{justify-content:center;gap:6px;color:var(--muted-2);font-size:11.5px;
  border:1px dashed var(--line-2);background:transparent;padding:9px}
.rrow.load i{width:10px;height:10px;border-radius:99px;flex:none;
  border:1.6px solid var(--line-2);border-top-color:var(--blue);
  animation:spin .72s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.flagnote{margin-top:9px;background:var(--amber-soft);border:1px dashed #F0DCB4;color:#7A5200;
  border-radius:9px;padding:7px 10px;font-size:11.5px;line-height:1.58;animation:rowIn .34s var(--ease)}
.flagnote b{color:var(--amber);font-weight:700}
@keyframes rowIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.rlist > .rrow{animation:rowIn .34s var(--ease) backwards}
.rrow.miss{background:transparent;border:1px dashed var(--line);opacity:.8}
.rrow.miss span{color:var(--muted-2)}
.rrow.miss b{color:var(--muted-2);background:transparent;border-color:var(--line)}
.rlist-k{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--muted-2);
  padding:5px 2px 1px}
.race-out{margin-top:18px;font-size:13.5px;color:var(--ink-2);line-height:1.75;
  padding-left:14px;border-left:2px solid var(--green);display:none}
.race-out.show{display:block}
.race-out b{color:var(--green)}
@media(max-width:820px){
  .race{grid-template-columns:minmax(0,1fr)}
  .brief{grid-template-columns:1fr}
}
@media(max-width:600px){
  .brief-goal{align-items:baseline;row-gap:3px}
  .brief-goal .g2{flex:0 0 100%}
  .brief-goal .g2::before{content:none}
}
@media(max-width:560px){
  .sbox{flex-direction:column}
  .sbox input,.sbox .btn{width:100%}
  .sbox .btn{height:38px}
}
/* ---------- 04 一份简历配所有岗 ---------- */
.scope{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,2vw,24px);
  align-items:center;padding:clamp(14px,2.2vw,20px);border-radius:18px;background:#fff;
  border:1px solid var(--line);margin-bottom:12px;
  box-shadow:0 24px 54px -44px rgba(10,22,52,.55)}
.scope-cv{display:flex;align-items:center;gap:11px;
  padding-right:clamp(12px,2vw,24px);border-right:1px solid var(--line)}
.sc-av{width:40px;height:40px;border-radius:11px;flex:none;
  background:linear-gradient(150deg,#3D7BFF,#123FCB);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:700;
  box-shadow:0 8px 16px -8px rgba(31,94,255,.85)}
.scope-cv b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.scope-cv span{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}
.scope-tag{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--blue-deep);background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:99px;padding:2px 8px;flex:none;margin-left:2px}
.scope-q b{display:block;font-size:clamp(14px,1.7vw,16px);font-weight:700;letter-spacing:-.02em}
.scope-q b em{font-style:normal;color:var(--blue-deep);font-family:var(--mono);
  font-size:1.22em;margin:0 2px}
.scope-q span{display:block;font-size:12px;color:var(--muted);margin-top:3px}

.scr{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(14px,2.4vw,22px);box-shadow:0 30px 66px -52px rgba(10,22,52,.55)}
.scr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding-bottom:12px;margin-bottom:13px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.scr-time{display:flex;align-items:baseline;gap:9px;min-width:0}
.scr-time span{font-family:var(--mono);font-size:clamp(22px,3.2vw,30px);font-weight:700;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.scr-time em{font-style:normal;font-size:11.5px;color:var(--muted-2);white-space:nowrap}
.scr-stat{font-size:11.5px;color:var(--muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.scr-stat b{color:var(--ink);font-weight:700}
.scr-stat b.g{color:var(--green)}

.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
@media(max-width:900px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:repeat(4,1fr);gap:4px}}
.tk{position:relative;text-align:left;border:1px solid var(--line);border-radius:7px;
  padding:6px 7px 7px;background:var(--bg-soft-2);overflow:hidden;min-height:46px;
  transition:border-color .3s var(--ease),background .3s var(--ease),
             opacity .35s var(--ease),transform .3s var(--ease)}
.tk u{display:block;text-decoration:none;font-size:9px;line-height:1.35;color:var(--muted-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:16px}
.tk b{display:block;font-size:11px;font-weight:600;line-height:1.34;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  white-space:normal;word-break:break-word}
.tk.seen{border-color:var(--line-2);background:#fff;opacity:.5}
.tk.stop{border-color:#E8C98A;background:var(--amber-soft);opacity:1}
.tk.stop::after{content:"你从这之后就没细看了";position:absolute;left:0;right:0;bottom:0;
  font-size:7px;text-align:center;background:var(--amber);color:#fff;padding:1px 0;
  letter-spacing:.02em}
.tk.scan{border-color:var(--blue-line);background:var(--blue-soft);opacity:1;transform:translateY(-1px)}
.tk .s{position:absolute;right:4px;top:3px;font-size:8.5px;font-weight:800;
  font-family:var(--mono);color:var(--blue-deep)}
.tk.best{border-color:var(--green);background:var(--green-soft);
  box-shadow:0 0 0 2px rgba(12,142,98,.14)}
.tk.best .s{color:var(--green)}
.tk.best::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green)}
.tk.dim{opacity:.42}

.scr-act{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.scr-out{margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.75;
  padding-left:14px;border-left:2px solid var(--blue);display:none}
.scr-out.show{display:block}
.scr-out b{color:var(--blue-deep)}

.scr-all{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:1px;margin-top:14px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.scr-all.show{opacity:1;transform:none}
.scr-all div{background:#fff;padding:10px 13px}
.scr-all div span{display:block;font-size:10.5px;color:var(--muted-2)}
.scr-all div b{display:block;font-size:16px;font-weight:700;letter-spacing:-.03em;
  margin-top:2px;font-variant-numeric:tabular-nums;color:var(--blue-deep)}
.scr-all em{background:var(--bg-soft-2);padding:10px 13px;font-style:normal;
  font-size:10.5px;color:var(--muted-2);display:flex;align-items:center;max-width:190px;line-height:1.5}
.scr-foot{margin-top:11px;font-size:10.5px;color:var(--muted-2);line-height:1.62}
@media(max-width:820px){
  .scope{grid-template-columns:1fr}
  .scope-cv{border-right:0;border-bottom:1px solid var(--line);padding:0 0 11px}
}
@media(max-width:640px){
  .scr-head{gap:6px;align-items:flex-start}
  .scr-stat{white-space:normal;font-size:11px;line-height:1.5;flex:1 0 100%}
  .scr-time{gap:7px}
  .scr-time em{white-space:normal;line-height:1.4}
  .scr-all{grid-template-columns:repeat(3,1fr)}
  .scr-all div{padding:9px 10px}
  .scr-all div b{font-size:15px}
  .scr-all em{grid-column:1/-1;max-width:none}
  .scr-out{font-size:13px}
}

/* ---------- 05 记一件事 ---------- */
.mems{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mem{height:172px;perspective:1000px;cursor:pointer}
.mem-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .78s var(--ease)}
.mem.flip .mem-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:14px;padding:16px;display:flex;
  flex-direction:column;justify-content:space-between;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--line)}
.front{background:#fff}
.back{transform:rotateY(180deg);background:var(--blue-soft);border-color:var(--blue-line)}
.face-q{font-size:14px;font-weight:600;line-height:1.62;letter-spacing:-.01em;
  color:var(--ink);text-wrap:pretty}
.face-q::before{content:"「";color:var(--muted-2);margin-right:1px}
.face-q::after{content:"」";color:var(--muted-2);margin-left:1px}
.face-t{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--muted-2);
  text-transform:uppercase;display:flex;align-items:center;gap:6px}
.face-t i{width:5px;height:5px;border-radius:99px;background:var(--line-2)}
.back .face-t{color:var(--blue-deep)}
.back .face-t i{background:var(--blue)}
.face-a{font-size:13px;color:var(--blue-deep);line-height:1.68;font-weight:500}
.mem-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.mem-cnt{font-size:12.5px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.mem-cnt b{color:var(--ink);font-weight:600}
.mem-all{font-size:12.5px;color:var(--green);font-weight:600;display:none;align-items:center;gap:6px}
.mem-all.show{display:inline-flex}
@media(max-width:820px){.mems{grid-template-columns:1fr}.mem{height:150px}}

/* ---------- 05 五个动作 ---------- */
.pipe{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(16px,2.6vw,26px);overflow:hidden;
  box-shadow:0 34px 74px -50px rgba(10,22,52,.5)}
.pipe::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 260px at 50% -12%,rgba(31,94,255,.075),transparent 70%)}
.rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  margin-bottom:clamp(18px,2.8vw,26px)}
.rail-bg{position:absolute;left:10%;right:10%;top:23px;height:2px;background:var(--line);
  border-radius:2px}
.rail-fill{position:absolute;left:10%;top:23px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,#1F5EFF,#6E9BFF);
  transition:width .62s var(--ease);z-index:1}
.rail-fill::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;
  border-radius:99px;background:var(--blue);box-shadow:0 0 0 4px rgba(31,94,255,.15)}
.node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0}
.node-d{position:relative;width:46px;height:46px;border-radius:15px;background:#fff;border:1.5px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--muted-2);
  transition:transform .5s var(--ease),background .4s var(--ease),border-color .4s,
    color .4s,box-shadow .4s}
.node-t{font-size:12.5px;font-weight:600;color:var(--muted-2);transition:color .35s}
.node:hover .node-d{border-color:var(--blue-line);transform:translateY(-2px)}
.node.done .node-d{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-deep)}
.node.done .node-t{color:var(--ink-2)}
.node.on .node-d{background:var(--blue);border-color:var(--blue);color:#fff;
  transform:translateY(-3px) scale(1.09);
  box-shadow:0 18px 32px -15px rgba(31,94,255,.9),0 0 0 5px rgba(31,94,255,.1)}
.node.on .node-d::after{content:"";position:absolute;inset:-6px;border-radius:19px;
  border:1.5px solid rgba(31,94,255,.34);animation:nodePulse 2.4s var(--ease) infinite}
@keyframes nodePulse{
  0%{transform:scale(.88);opacity:.9}
  70%{transform:scale(1.16);opacity:0}
  100%{transform:scale(1.16);opacity:0}
}
.node.on .node-t{color:var(--ink);font-weight:700}

.stage{display:grid;grid-template-columns:.66fr 1.34fr;gap:clamp(16px,3vw,34px);
  align-items:start;border-top:1px solid var(--line);padding-top:clamp(16px,2.4vw,22px)}
.stage-no{font-family:var(--mono);font-size:clamp(40px,6.6vw,62px);font-weight:800;
  line-height:.86;letter-spacing:-.06em;
  background-image:linear-gradient(158deg,#1F5EFF,#123FCB);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
.stage-nm{margin-top:10px;font-size:clamp(19px,2.4vw,25px);font-weight:700;letter-spacing:-.032em}
.stage-sub{margin-top:3px;font-size:12.5px;color:var(--muted-2)}
.share{margin-top:18px}
.share-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--bg-soft);
  border:1px solid var(--line)}
.share-bar i{display:block;height:100%;transition:width .72s var(--ease)}
.share-bar .you{background:var(--line-2)}
.share-bar .ai{background-image:linear-gradient(90deg,#1F5EFF,#6E9BFF,#1F5EFF);
  background-size:200% 100%;animation:aiFlow 2.8s linear infinite}
@keyframes aiFlow{to{background-position:-200% 0}}
.share-k{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:11.5px;
  color:var(--muted-2);font-variant-numeric:tabular-nums}
.share-k b{color:var(--ink-2);font-weight:600}
.share-k .ai-k b{color:var(--blue-deep)}
.stage-out{margin-top:14px;display:flex;gap:8px;align-items:baseline;font-size:11.8px;
  color:var(--muted);line-height:1.55}
.stage-out::before{content:"产出";flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;
  color:var(--muted-2);border:1px solid var(--line-2);border-radius:4px;padding:0 4px;
  transform:translateY(-1px)}
.srows{display:grid}
.srow2{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:11px 0;
  border-top:1px dashed var(--line)}
.srow2:first-child{border-top:0;padding-top:0}
.srow2 dt{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--muted-2);padding-top:3px}
.srow2 dd{margin:0;font-size:13.2px;line-height:1.74;color:var(--ink-2);text-wrap:pretty}
.srow2.ai dt{color:var(--blue-deep)}
.srow2.ai dd{color:var(--blue-deep);font-weight:500}
@keyframes stageIn{from{opacity:0;transform:translateY(15px) scale(.986)}
  to{opacity:1;transform:none}}
@keyframes numIn{from{opacity:0;transform:translateY(22px) scale(.93);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}}
.stage.enter .stage-no{animation:numIn .62s var(--ease) both}
.stage.enter .stage-nm{animation:numIn .58s var(--ease) .05s both}
.stage.enter .stage-sub{animation:numIn .58s var(--ease) .09s both}
.stage.enter .share{animation:numIn .58s var(--ease) .13s both}
.stage.enter .stage-r{animation:stageIn .5s var(--ease) .07s both}
.pipe-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:clamp(16px,2.4vw,20px);padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted-2)}
.pipe-foot b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pipe-foot .hint{display:inline-flex;align-items:center;gap:6px}
.pipe-foot .hint i{width:5px;height:5px;border-radius:99px;background:var(--blue)}
.pipe-foot .hint.all{color:var(--ink-2);font-size:13px;line-height:1.6}
.pipe-foot .hint.all i{background:var(--green)}
.pipe-foot .hint.all b{color:var(--blue-deep)}
@media(max-width:760px){
  .stage{grid-template-columns:1fr}
  .share{max-width:none}
  .node-d{width:40px;height:40px;border-radius:13px;font-size:11.5px}
  .rail-bg,.rail-fill{top:20px}
  .node-t{font-size:11.5px}
  .srow2{grid-template-columns:1fr;gap:2px}
  .srow2 dt{padding-top:0}
}
@media(max-width:560px){
  .pipe{padding:14px 12px 16px}
  .node-d{width:34px;height:34px;border-radius:11px;font-size:10.5px}
  .rail-bg,.rail-fill{top:17px}
  .node{gap:6px}
  .node-t{font-size:11px;letter-spacing:-.02em}
  .node.on .node-d::after{inset:-5px;border-radius:15px}
  .stage{gap:14px;padding-top:14px}
  .stage-no{font-size:38px}
}
/* ---------- 06 看一条线 ---------- */
.cap{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;
  padding:clamp(18px,2.8vw,30px);
  background:linear-gradient(178deg,#FBFCFE,#fff 58%);
  box-shadow:0 34px 74px -50px rgba(10,22,52,.5);
  cursor:ew-resize;-webkit-user-select:none;user-select:none;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.cap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 240px at 50% -14%,rgba(31,94,255,.07),transparent 70%)}
.cap.is-hot{border-color:var(--blue-line);box-shadow:0 40px 80px -46px rgba(18,63,203,.5)}
.cap:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 8px rgba(31,94,255,.06)}
  50%{box-shadow:0 0 0 3px #fff,0 0 0 13px rgba(31,94,255,.16)}}
.cap:not(.touched) .cap-pt.now{animation:hintPulse 2.2s var(--ease) infinite}

.cap-top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(10px,2vw,24px);align-items:center}
.cap-cell{display:flex;flex-direction:column;gap:3px}
.cap-cell.is-after{align-items:flex-end;text-align:right}
.cap-k{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted-2)}
.cap-n{font-size:clamp(36px,5.6vw,56px);line-height:.98;font-weight:800;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.cap-n i{font-style:normal;font-size:.42em;font-weight:600;letter-spacing:0;margin-left:3px;
  color:var(--muted-2)}
.cap-cell.is-after .cap-n{color:var(--blue)}
.cap-cell.is-after .cap-n i{color:var(--blue)}
.cap-band{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:-.01em}
.cap-cell.is-after .cap-band{color:var(--blue-deep)}
.cap-mid{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--line-2)}
.cap-gain{font-size:11.5px;font-weight:700;white-space:nowrap;
  color:var(--green);background:var(--green-soft);border-radius:99px;padding:2px 9px;
  font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.cap-gain.is-relief{color:var(--blue-deep);background:var(--blue-soft)}

.cap-rail{position:relative;margin-top:clamp(20px,3.4vw,30px);padding-bottom:30px}
.cap-track{position:relative;height:13px;border-radius:99px;background:var(--bg-soft);
  border:1px solid var(--line);overflow:hidden}
.cap-fill{position:absolute;left:0;top:0;bottom:0;background:#C9D4E5;
  transition:width .1s linear}
.cap-gainbar{position:absolute;left:0;top:0;bottom:0;width:0;
  background-image:linear-gradient(90deg,#1F5EFF,#6E9BFF,#1F5EFF);
  background-size:200% 100%;animation:aiFlow 2.8s linear infinite;
  transition:left .1s linear,width .1s linear}
.cap-mark80{position:absolute;top:-7px;bottom:-7px;width:0;left:80%;z-index:2;
  border-left:1.5px dashed var(--line-2);transition:border-color .3s}
.cap-mark80 span{position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted-2);white-space:nowrap;
  transition:color .3s}
.cap.past80 .cap-mark80{border-left-color:var(--blue)}
.cap.past80 .cap-mark80 span{color:var(--blue)}
.cap-pt{position:absolute;top:6px;width:15px;height:15px;border-radius:99px;z-index:3;
  transform:translate(-50%,-50%);transition:left .1s linear,opacity .25s}
.cap-pt.now{background:var(--ink);box-shadow:0 0 0 3px #fff,0 3px 8px -3px rgba(10,14,23,.6)}
.cap-pt.after{z-index:4;width:12px;height:12px;background:#fff;border:2px solid var(--blue);
  box-shadow:0 0 0 3px #fff,0 4px 10px -4px rgba(31,94,255,.7)}
.cap-zones{position:absolute;left:0;right:0;bottom:0;display:flex}
.cap-zone{font-size:11.5px;line-height:1.3;color:var(--muted-2);text-align:center;
  padding:10px 2px 0;border-left:1px solid transparent;
  transition:color .32s var(--ease)}
.cap-zone+.cap-zone{border-left-color:var(--line)}
.cap-zone.on{color:var(--blue-deep);font-weight:700}

.cap-note{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.72;
  min-height:2.9em;text-wrap:pretty}
.cap-line{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);
  font-size:clamp(14px,1.7vw,16.5px);line-height:1.74;color:var(--ink);font-weight:500;
  letter-spacing:-.012em;text-wrap:pretty}
.cap-line::before{content:"「";color:var(--muted-2);margin-right:1px}
.cap-line::after{content:"」";color:var(--muted-2);margin-left:1px}
@keyframes capSwap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.cap.swap .cap-note,.cap.swap .cap-line{animation:capSwap .36s var(--ease) both}
.cap.swap .cap-line{animation-delay:.04s}

@media(max-width:760px){
  .cap-top{grid-template-columns:1fr auto 1fr;gap:8px}
  .cap-rail{margin-top:30px}
  .cap-rail{margin-top:30px}
  .cap-n{font-size:clamp(30px,9vw,40px)}
  .cap-zone{font-size:10px;letter-spacing:-.02em}
  .cap-zone:nth-child(4){font-size:9.5px}
}
@media(max-width:420px){
  .cap-k{font-size:10px}
  .cap-band{font-size:11px}
  .cap-zone{font-size:9px}
  .cap-mid svg{width:24px}
}

/* ---------- 07 收尾 ---------- */
.grad-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(20px,3.4vw,40px);
  align-items:center}
.folder{position:relative;perspective:1200px;height:322px;
  display:flex;align-items:center;justify-content:center}
.f-shape{position:relative;width:min(340px,100%);height:252px}
.f-back{position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(170deg,#2F6DFF,#123FCB);
  box-shadow:0 30px 60px -26px rgba(18,63,203,.6)}
.f-back::before{content:"";position:absolute;top:-13px;left:16px;width:96px;height:16px;
  border-radius:8px 8px 0 0;background:#2F6DFF}
.f-paper{position:absolute;left:18px;right:18px;bottom:20px;height:226px;
  background:#fff;border-radius:10px;padding:14px 17px;overflow:hidden;
  transform:translateY(0);transition:transform .8s .18s var(--ease);
  box-shadow:0 -12px 34px -20px rgba(10,22,52,.45)}
.folder.open .f-paper{transform:translateY(-46px)}
.f-front{position:absolute;left:0;right:0;bottom:0;height:150px;
  border-radius:14px;background:linear-gradient(175deg,#3D7BFF,#1A4DE0);
  transform-origin:top center;
  transition:transform .8s var(--ease),opacity .55s var(--ease) .18s;
  box-shadow:0 -8px 24px -14px rgba(10,22,52,.5)}
.f-front::after{content:"你的报告";position:absolute;left:20px;bottom:18px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.94)}
.f-front::before{content:"";position:absolute;right:20px;bottom:20px;width:26px;height:26px;
  border-radius:8px;border:1.5px solid rgba(255,255,255,.55)}
.folder.open .f-front{transform:translateY(104px) rotateX(74deg);opacity:0}
.f-hint{position:absolute;bottom:-2px;left:0;right:0;text-align:center;font-size:12px;
  color:var(--muted-2);transition:opacity .3s}
.folder.open .f-hint{opacity:0}
.f-old{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--muted-2);font-size:13px;padding:0 24px}
.f-old.hide{display:none}

.rep{font-size:12.5px;line-height:1.5}
.rep-h{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:7px}
.rep-h b{font-size:13px;font-weight:700;letter-spacing:-.01em}
.rep-h u{text-decoration:none;font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}
.rep-r{display:flex;justify-content:space-between;gap:10px;padding:3px 0;
  opacity:0;transform:translateY(5px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rep.show .rep-r{opacity:1;transform:none}
.rep-r span{color:var(--muted)}
.rep-r b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
  text-align:right;flex:none}
.rep-r b.blue{color:var(--blue-deep)}
.rep-r b.gray{color:var(--muted-2);font-weight:400}
.rep-f{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);
  font-size:11px;color:var(--muted-2);display:flex;justify-content:space-between}

.grad-txt h2{font-size:clamp(24px,3.4vw,34px);line-height:1.25;letter-spacing:-.03em;
  font-weight:700;text-wrap:balance}
.grad-txt p{margin-top:12px;font-size:15px;color:var(--muted);line-height:1.78;max-width:30em}
.grad-lv{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  height:32px;padding:0 13px;border-radius:99px;background:var(--blue-soft);
  border:1px solid var(--blue-line);font-size:12.5px;font-weight:600;color:var(--blue-deep)}
.grad-lv i{width:6px;height:6px;border-radius:99px;background:var(--blue)}
.grad-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(38px,6vw,64px);
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.num{background:#fff;padding:20px 16px}
.num b{display:block;font-size:clamp(22px,2.8vw,29px);font-weight:700;letter-spacing:-.035em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.num b i{font-style:normal;font-size:.55em;font-weight:600;color:var(--muted);margin-left:1px}
.num span{display:block;margin-top:6px;font-size:11.5px;color:var(--muted-2);line-height:1.5}
@media(max-width:900px){
  .grad-wrap{grid-template-columns:1fr}
  .folder{height:290px;order:2}
  .nums{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(34px,5vw,54px) 0 30px;background:var(--bg-soft-2)}
.foot-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot-l{max-width:26em}
.foot-l p{margin-top:11px;font-size:13px;color:var(--muted-2);line-height:1.8}
.foot-c{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap}
.foot-col h5{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.11em;
  color:var(--muted-2);text-transform:uppercase}
.foot-col a{display:block;font-size:13px;color:var(--muted);padding:3px 0;transition:color .2s}
.foot-col a:hover{color:var(--blue-deep)}
.foot-b{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11.5px;color:var(--muted-2)}

/* ---------- 左下角 · 已装备的那块工牌 ---------- */
.coach{position:fixed;left:18px;bottom:14px;z-index:70;width:268px;
  padding-top:44px;pointer-events:none;
  opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),width .45s var(--ease)}
.coach.show{opacity:1;transform:none;pointer-events:auto}

/* 挂绳 + 夹子 + 卡，整体轻摆，和首屏那块是同一块牌子 */
.co-hang{position:relative;display:flex;flex-direction:column;align-items:center;
  transform-origin:50% -22px}
.coach.show .co-hang{animation:coSwing 8s ease-in-out infinite alternate}
@keyframes coSwing{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.co-ribbon{width:12px;height:48px;margin-bottom:-5px;position:relative;
  background:linear-gradient(90deg,#1A46C4,#3D7BFF 46%,#1A46C4);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);
  mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.co-ribbon::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,22,52,.2),transparent 40%,rgba(10,22,52,.2))}
.co-clip{position:relative;z-index:2;width:23px;height:12px;margin-bottom:-5px;border-radius:3px;
  background:linear-gradient(180deg,#5C6879,#39424F);
  box-shadow:0 2px 5px -1px rgba(10,22,52,.45),inset 0 1px 0 rgba(255,255,255,.3)}

.co-card{position:relative;width:100%;background:#fff;border:1px solid var(--line-2);
  border-radius:13px;padding:0 12px 9px;overflow:hidden;
  box-shadow:0 22px 46px -22px rgba(10,22,52,.42),0 1px 0 #fff inset}
.co-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 40%,rgba(255,255,255,.8) 48%,transparent 57%)}
.co-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 -12px;padding:7px 33px 6px 12px;border-bottom:1px dashed var(--line-2);
  background:linear-gradient(180deg,#FBFCFE,#fff)}
.co-brand{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;
  letter-spacing:.15em;color:var(--ink)}
.co-brand i{width:9px;height:9px;border-radius:3px;background:var(--blue)}
.co-seal{display:inline-flex;align-items:center;gap:4px;height:16px;padding:0 6px;
  border-radius:99px;background:var(--green);color:#fff;
  font-size:8.5px;font-weight:700;letter-spacing:.05em}
.co-seal i{width:4px;height:4px;border-radius:99px;background:#fff}
.co-id{display:flex;align-items:center;gap:9px;padding:9px 0 8px}
.co-av{flex:none;width:31px;height:31px;border-radius:9px;
  background:linear-gradient(150deg,#3D7BFF,#123FCB);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;letter-spacing:-.02em;
  box-shadow:0 5px 12px -6px rgba(31,94,255,.85);position:relative}
.co-av i{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:99px;
  background:var(--green);border:1.5px solid #fff}
.co-av i::after{content:"";position:absolute;left:2.1px;top:2.4px;width:4.6px;height:2.4px;
  border-left:1.4px solid #fff;border-bottom:1.4px solid #fff;transform:rotate(-45deg)}
.co-id b{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.co-id em{display:block;font-style:normal;font-size:9.5px;color:var(--muted-2);margin-top:2px}
.co-tx{padding-top:7px;border-top:1px solid var(--line)}
.co-k{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--blue);margin-bottom:3px}
.co-p{font-size:12px;color:var(--ink-2);line-height:1.58;text-wrap:pretty}
.co-f{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.co-no{font-family:var(--mono);font-size:8px;color:var(--muted-2);letter-spacing:.04em}
.co-code{width:56px;height:11px;
  background:repeating-linear-gradient(90deg,#0A0E17 0 1.2px,transparent 1.2px 2.8px,#0A0E17 2.8px 3.4px,transparent 3.4px 5.2px);
  opacity:.78}
.coach-x{position:absolute;right:7px;top:7px;z-index:3;width:17px;height:17px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);
  opacity:0;pointer-events:none;
  transition:opacity .18s,background .2s,color .2s}
/* 平时不显示，别在卡片上多长一个小叉 */
.coach:hover .coach-x{opacity:1;pointer-events:auto}
@media(hover:none){.coach-x{opacity:1;pointer-events:auto}}
.coach-x:hover{background:var(--bg-soft);color:var(--ink)}
.coach-x svg{width:9px;height:9px}
/* 不动的时候收成一小块，别挡住左边那栏的操作 */
@media(min-width:721px){
  .coach.mini{width:76px}
  .coach.mini .co-card{width:58px;margin:0 auto;padding:0;border-radius:11px}
  .coach.mini .co-h,.coach.mini .co-tx,.coach.mini .co-f{display:none}
  .coach.mini .co-id{padding:10px 0;justify-content:center}
  .coach.mini .co-id>div:last-child{display:none}
  .coach.mini .co-av{width:36px;height:36px;border-radius:10px;font-size:11px}
  .coach.mini .co-card::after{display:none}
  .coach.mini .coach-x{display:none}
  .coach.mini{cursor:pointer}
}
@media(max-width:720px){
  .coach{left:10px;right:10px;width:auto;bottom:10px;padding-top:0}
  .co-hang{animation:none!important}
  .co-ribbon,.co-clip,.co-id,.co-f{display:none}
  .co-card{padding:0 11px 9px;border-radius:12px}
  .co-h{margin:0 -11px;padding:6px 11px 5px}
  .co-p{font-size:11.5px;line-height:1.55}
}

/* ---------- 出现动画 ---------- */
html.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .72s var(--ease) var(--d,0s),transform .72s var(--ease) var(--d,0s)}
html.js .reveal.in{opacity:1;transform:none}
/* 标题从遮罩里推上来 */
html.js .sh h2{clip-path:inset(-8% 0 106% -2%);transform:translateY(9px);
  transition:clip-path 1.05s var(--ease) var(--d,0s),transform 1.05s var(--ease) var(--d,0s)}
html.js .sh.reveal.in h2{clip-path:inset(-8% -2% -14% -2%);transform:none}
.pop{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pop.in{opacity:1;transform:none}
[id]{scroll-margin-top:88px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html.js .reveal{opacity:1;transform:none}
  html.js .sh h2{clip-path:none;transform:none}
}


.rep-r{padding:2px 0;line-height:1.32}
.rep{font-size:11.5px}
.rep-h{padding-bottom:6px;margin-bottom:5px}
.rep-f{margin-top:6px;padding-top:6px}
.f-paper{height:226px}
.dot.cur:not(.on){background:var(--blue-soft);box-shadow:inset 0 0 0 1.5px var(--blue)}
.cd{cursor:pointer}
.cd-rk{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted-2);
  background:var(--bg-soft);border-radius:4px;padding:1px 5px;min-width:18px;text-align:center}
.cd.hit .cd-rk{background:var(--green-soft);color:var(--green)}
.cd.sc .cd-rk{opacity:0;transition:opacity .3s}
.cd.sc.done .cd-rk{opacity:1}

/* Preserve the original seven-step experience. Light blue brand, 5 / 7 / 4.
   Layers: hero surface, badge stage, interactive card; original nav/coach stay above.
   Motion makes the badge feel tangible and acknowledges selection and completion. */
:root{--blue:#155EEF;--blue-deep:#1044BA;--blue-soft:#EFF5FF;--blue-line:#C9DAFB;--muted-2:#65738B}
.home-refined .btn{white-space:nowrap;position:relative;isolation:isolate;overflow:hidden}
.home-refined .btn-p{background:linear-gradient(155deg,#337AFF 0%,#155EEF 50%,#1451D3 100%);
  box-shadow:0 6px 14px -5px rgba(21,94,239,.36),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(6,41,117,.2);
  border:1px solid rgba(16,68,186,.15)}
.home-refined .btn-p::after{content:"";position:absolute;inset:-80% -20%;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 49%,transparent 58%);
  transform:translateX(-100%);transition:transform .7s var(--ease)}
.home-refined .btn-p:hover::after{transform:translateX(100%)}
.home-refined .btn:active{transform:translateY(1px) scale(.98)}
.home-refined :is(a,button,[role=button],[role=slider]):focus-visible{outline:3px solid #155EEF;outline-offset:4px}
.home-refined .nav{background:rgba(255,255,255,.86);box-shadow:0 4px 22px -16px rgba(36,67,122,.3)}
.nav-auth{display:flex;align-items:center;gap:20px;padding-left:20px;border-left:1px solid var(--line-2)}
.nav-login{display:inline-flex;align-items:center;min-height:42px;font-size:14px;font-weight:600;color:var(--ink-2);transition:color .2s}
.nav-login:hover{color:var(--blue)}
.home-refined .nav-r{gap:14px}
.home-refined .hero{padding-bottom:72px}
.home-refined .hero-bg{background:
  radial-gradient(ellipse at 82% 34%,#DCEAFF 0,transparent 42%),
  radial-gradient(ellipse at 10% 0%,#EEF4FF 0,transparent 45%),
  linear-gradient(180deg,#FCFDFF,#fff 90%)}
.home-refined .hero-lines{opacity:.3;mask-image:linear-gradient(180deg,#000,transparent 75%);background-size:120px 100%}
.home-refined .hero h1{font-size:clamp(30px,3.5vw,48px);line-height:1.23;letter-spacing:-.035em;font-weight:750}
.home-refined .hero h1 em{margin-top:6px}
.home-refined .hero-sub{font-size:16px;line-height:1.85;margin-top:24px}
.home-refined .hero-cta{margin-top:30px}
.home-refined .hero-meta{font-size:13px;gap:16px}
.home-refined .kicker{letter-spacing:.05em;background:rgba(255,255,255,.78);box-shadow:0 2px 10px -6px rgba(21,94,239,.2)}
.home-refined .lanyard{min-height:350px;isolation:isolate}
.home-refined .lanyard-in{transform-style:preserve-3d}
.home-refined .idcard{width:278px;padding:18px 19px 16px;border-radius:18px;border-color:#B6CFF4;overflow:hidden;
  background:linear-gradient(135deg,#fff 15%,#F8FBFF 60%,#EAF2FF 100%);
  box-shadow:0 30px 46px -22px rgba(36,67,122,.38),0 6px 12px -6px rgba(36,67,122,.18),inset 0 0 0 3px rgba(255,255,255,.9)}
.home-refined .idcard:hover{box-shadow:0 38px 60px -24px rgba(21,70,149,.42),0 0 0 1px #B3CEFF,inset 0 0 0 3px #fff}
.home-refined .idc-gloss{background:radial-gradient(ellipse at var(--light-x,25%) var(--light-y,15%),rgba(255,255,255,.8),rgba(160,204,255,.12) 35%,transparent 65%);
  transform:none;opacity:.7;border-radius:inherit;mix-blend-mode:soft-light}
.home-refined .lanyard:hover .idc-gloss{transform:none;opacity:1}
.home-refined .idc-top,.home-refined .idc-body,.home-refined .idc-prog,.home-refined .idc-foot{position:relative}
.home-refined .idc-av{background:linear-gradient(140deg,#6AA2FF,#155EEF 55%,#1039AE);box-shadow:0 8px 17px -6px rgba(21,94,239,.55),inset 0 1px 0 #A8C8FF}
.home-refined .ribbon{background:linear-gradient(90deg,#1746AD,#4489FF 38%,#155EEF 62%,#123A9B)}
.badge-stage{position:absolute;inset:-4px -24px 0;pointer-events:none;z-index:-1;transition:opacity .6s;overflow:clip}
.stage-orbit{position:absolute;left:50%;top:16px;width:344px;height:344px;border:1px solid rgba(84,139,236,.22);
  border-radius:50%;transform:translateX(-50%) rotateX(58deg) rotate(-24deg);
  box-shadow:inset 0 0 24px rgba(120,170,255,.07),0 0 0 16px rgba(181,209,255,.06)}
.stage-orbit-inner{top:60px;width:266px;height:266px;transform:translateX(-50%) rotateY(48deg) rotate(24deg);border-color:rgba(84,139,236,.15)}
.stage-floor{position:absolute;left:50%;bottom:24px;width:265px;height:35px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(61,115,212,.18),transparent 70%);filter:blur(10px)}
.lanyard.gone .badge-stage{opacity:0}
.home-refined .eq-note{position:relative;z-index:1}
.home-refined .sec.soft{background:linear-gradient(180deg,#F5F8FE,#FBFCFF)}
.home-refined .sh-no{box-shadow:0 3px 10px -5px rgba(21,94,239,.28),inset 0 1px 0 #fff;background:linear-gradient(150deg,#fff,#E8F0FF);border-color:#D1E1FF}
.home-refined .pick-brief{border-color:#D3E1F6;background:linear-gradient(120deg,#fff,#F7FAFF);box-shadow:0 14px 35px -27px rgba(30,71,137,.3)}
.home-refined .pb-c li{grid-template-columns:18px 1fr;column-gap:8px;row-gap:2px;padding:9px 11px;background:rgba(255,255,255,.9)}
.home-refined .pb-c span{grid-column:2;line-height:1.5;font-size:12px}
.home-refined .pb-c b{font-size:13px}
.home-refined .pb-meta{font-size:14px;line-height:1.8}
.home-refined .pb-tag,.home-refined .pb-k{font-size:12px}
.home-refined .cand{gap:12px}
.home-refined .cd{padding:16px 14px 13px;border-color:#DFE7F4;background:linear-gradient(165deg,#fff 60%,#F8FAFE)}
.home-refined .cd:hover{border-color:#A6C5F9;transform:translateY(-4px);box-shadow:0 14px 30px -19px rgba(20,67,143,.42)}
.home-refined .cd.you{border-color:var(--blue);box-shadow:0 0 0 2px rgba(21,94,239,.12),0 10px 25px -17px rgba(21,94,239,.4)}
.home-refined .cd.hit{border-color:var(--green);background:linear-gradient(160deg,#fff 60%,#F1FBF7);box-shadow:0 0 0 2px rgba(12,142,98,.12),0 12px 24px -18px rgba(12,142,98,.3)}
.home-refined .cd-av{background:linear-gradient(145deg,#ECF3FF,#DEEAFE);color:#155EEF;width:30px;height:30px;border:1px solid #D5E3FB}
.home-refined .cd-nm{font-size:14px}
.home-refined .cd-yr{font-size:12px;line-height:1.6;margin-top:3px}
.home-refined .cd-t i,.home-refined .cd-more,.home-refined .cd-cv p{font-size:12px}
.home-refined .cd-more{min-height:32px}
.home-refined .cd-more u,.home-refined .cd-r{font-size:11px}
.home-refined .cd-cv p{padding-left:10px;line-height:1.75;margin-bottom:7px}
.home-refined .cd-c{margin-top:10px}
.home-refined .cd-c i{height:20px;font-size:11px}
.home-refined .cd-sc{height:20px}
.home-refined .cd-sc b{font-size:14px}
.home-refined .cd.you::after{font-size:10px}
.home-refined .pane.new{box-shadow:0 14px 34px -25px rgba(21,94,239,.35)}
.home-refined .tk{transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.home-refined .tk.hit{box-shadow:0 4px 12px -6px rgba(12,142,98,.28)}
.home-refined .start-panel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:40px;margin-top:36px;border:1px solid #C9DAF6;border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse at 85% 110%,#DCEAFF,transparent 62%),linear-gradient(120deg,#FAFCFF,#F1F6FF);
  box-shadow:0 18px 45px -32px rgba(21,94,239,.28),inset 0 1px 0 #fff}
.start-label{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--blue-deep)}
.start-copy h2{font-size:30px;line-height:1.4;letter-spacing:-.025em;margin-top:10px;font-weight:700}
.start-copy p{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.7}
.start-actions{flex:none;text-align:center}
.start-actions>.btn{height:52px;font-size:15px}
.start-actions>.btn span{font-size:20px;font-weight:400;margin-left:10px;transition:transform .3s}
.start-actions>.btn:hover span{transform:translate(2px,-2px)}
.start-actions p{font-size:14px;color:var(--muted);margin-top:14px}
.start-actions p a{font-weight:600;color:var(--blue-deep);margin-left:6px}
.start-actions p a:hover{text-decoration:underline;text-underline-offset:4px}
.home-refined .foot-col h5,.home-refined .foot-b{font-size:12px}
.home-refined .foot-col a{font-size:14px;padding-block:5px}
.home-refined .foot-l p{font-size:14px}
@media(prefers-reduced-motion:no-preference){
  .hero-copy>:is(.kicker,h1,.hero-sub,.hero-cta,.hero-meta){animation:homeArrive .85s cubic-bezier(.16,1,.3,1) both}
  .hero-copy h1{animation-delay:.08s}.hero-copy .hero-sub{animation-delay:.16s}
  .hero-copy .hero-cta{animation-delay:.24s}.hero-copy .hero-meta{animation-delay:.3s}
  .badge-stage{animation:homeStage 1.4s var(--ease) backwards}
  .home-refined .lanyard:not(.gone) .idcard:not(.fly)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.78) 49%,transparent 72%);opacity:0;animation:homeFoil 1.4s .5s var(--ease) both}
  .home-refined .cd.sc::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(110deg,transparent 20%,rgba(21,94,239,.09) 50%,transparent 75%);animation:homeScan .85s var(--ease) both}
  .home-refined .done-pill.show{animation:homeConfirm .45s var(--ease)}
  .home-refined .cd.op .cd-cv{animation:homeArrive .3s var(--ease)}
  .home-refined .duel:not([hidden]){animation:homeArrive .5s var(--ease)}
  .home-refined .pb-c li.on{animation:homeConfirm .5s var(--ease)}
  .home-refined .folder.open .f-back{box-shadow:0 28px 55px -20px rgba(21,94,239,.42)}
}
@keyframes homeArrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes homeStage{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes homeFoil{0%{opacity:0;transform:translateX(-35%)}30%{opacity:1}100%{opacity:0;transform:translateX(35%)}}
@keyframes homeScan{0%{opacity:0;transform:translateX(-100%)}35%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes homeConfirm{0%{scale:.97}55%{scale:1.025}100%{scale:1}}
@media(max-width:1050px){.home-refined .dots{display:none}.nav-auth{gap:16px;padding-left:16px}}
@media(max-width:900px){
  .home-refined .hero-in{grid-template-columns:1.2fr .8fr;gap:20px}
  .home-refined .hero h1{font-size:clamp(28px,4vw,36px)}
  .home-refined .lanyard{align-items:center;padding-left:0;min-height:320px}
  .home-refined .idcard{width:240px;padding:15px}
  .stage-orbit{width:290px;height:290px}.stage-orbit-inner{width:220px;height:220px}
  .home-refined .hero-meta{gap:12px}
}
@media(max-width:720px){
  .home-refined .nav-r{gap:10px}.nav-auth{gap:14px;padding-left:0;border-left:0}
  .home-refined .nav-experience{display:none}.home-refined .nav-in{gap:12px}
  .home-refined .hero{padding-top:100px;padding-bottom:42px}
  .home-refined .hero-in{grid-template-columns:1fr;gap:24px}
  .home-refined .hero h1{font-size:clamp(29px,7.6vw,44px)}
  .home-refined .hero-sub{font-size:15px;margin-top:20px}
  .home-refined .hero-cta{gap:10px;margin-top:25px}
  .home-refined .hero-cta .btn{padding-inline:20px}
  .home-refined .hero-meta{margin-top:20px;font-size:12px}
  .home-refined .lanyard{min-height:310px}
  .home-refined .ribbon{height:68px}.badge-stage{inset:-24px 0 0}
  .stage-orbit{width:min(68vw,260px);height:min(68vw,260px)}
  .stage-orbit-inner{width:min(56vw,220px);height:min(56vw,220px)}
  .home-refined .idcard{width:264px}
  .home-refined .lanyard.gone{min-height:0}
  .home-refined .eq-note{width:100%;margin:0}
  .home-refined .start-panel{flex-direction:column;align-items:flex-start;padding:28px 24px;gap:24px}
  .start-copy h2{font-size:27px}.start-actions{width:100%;text-align:left}
  .start-actions>.btn{width:100%}.start-actions p{text-align:center}
}
@media(max-width:420px){
  .home-refined .nav .btn{padding-inline:14px;height:38px}
  .home-refined .nav-in{padding-inline:18px}
  .nav-auth{gap:12px}.nav-login{font-size:13px}
  .home-refined .hero-sub br{display:none}
  .home-refined .cand{gap:9px}.home-refined .cd{padding:14px 10px 10px}
  .home-refined .cd-h{gap:6px;align-items:flex-start}
  .home-refined .cd-av{width:25px;height:25px;font-size:11px}
  .home-refined .cd-yr{font-size:11px}.home-refined .cd-t i{font-size:11px}
}
@media(max-width:360px){
  .home-refined .hero-cta .btn{padding-inline:15px;font-size:13px}
  .home-refined .hero h1{font-size:28px}
  .home-refined .kicker{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .home-refined .lanyard-in{animation:none;transform:none!important}
  .home-refined .grad{animation:none}
  .home-refined .btn-p::after,.badge-stage .stage-orbit-inner{display:none}
  .home-refined .cd:hover,.home-refined .btn:hover{transform:none}
}
@media(prefers-reduced-transparency:reduce){.home-refined .nav{background:#fff;backdrop-filter:none}}

/* 首屏标题、账号入口与工牌的间距。 */
.home-refined .hero h1 { font-size: clamp(36px, 4.1vw, 56px); line-height: 1.16; }
.home-refined .hero h1 em { margin-top: 7px; }
.home-refined .hero-sub { max-width: 34em; color: #42516b; line-height: 1.78; }
.home-refined .hero-meta { color: #536582; }
.home-refined .nav-auth .btn-p { background: linear-gradient(155deg, #2769e8, #154ec7); }
.home-refined .nav-auth .btn-p:hover { background: #1044ba; }
.home-refined .idc-role, .home-refined .badge-hint { color: #52627c; }
.home-refined .idc-code { opacity: .7; }
@media (max-width: 900px) {
  .home-refined .hero h1 { font-size: clamp(30px, 4.5vw, 40px); }
}
@media (max-width: 720px) {
  .home-refined .hero h1 { font-size: clamp(30px, 8vw, 44px); }
  .home-refined .hero-cta { margin-top: 22px; }
  .home-refined .hero-in { gap: 18px; }
  .home-refined .nav .btn, .home-refined .nav-login { min-height: 44px; }
}