/* ============================================================
 * 简历网页 v1 · Cloud Design 重构（modern-web-design 方法论）
 * 工程编辑风：浅色 / 单一 teal 强调 / 真实排版层级 / 克制动效
 * 圆角规则（一致性锁）：卡片 14px，按钮&标签 全圆角(pill)，输入无。
 * 强调色锁：全页仅 --accent 一种点缀色，不混入第二点缀。
 * ============================================================ */
@import url('./fonts.css');

:root{
  /* 中性盘（冷纸基底，避免纯白/纯黑） */
  --bg:#E7ECEF; --surface:#FFFFFF; --surface-2:#FBFCFD;
  --ink:#0F171E; --ink-2:#46535F; --ink-3:#5C6772; --ink-4:#6B7885;
  --line:#D8E0E4; --line-2:#E7ECEF;
  /* 单一强调色：深青（工程可信，非 AI 紫） */
  --accent:#0B7E8F; --accent-d:#076070; --accent-soft:#E8F3F4; --accent-line:#C9E2E6;
  --ok:#0E7A42;   /* 功能状态色：仅用于真实状态(在职/在线),非装饰非数据分层 */
  /* 阴影：染背景色相，不用纯黑 */
  --sh-1:0 1px 3px rgba(15,45,55,.07);
  --sh-2:0 10px 30px rgba(13,60,72,.08);
  --r:14px; --r-sm:10px;
  --disp:"Times New Roman",Tinos,"Noto Serif SC","Songti SC",SimSun,serif;
  --sans:"Times New Roman",Tinos,"Noto Serif SC","Songti SC",SimSun,serif;
  --mono:"JetBrains Mono","Times New Roman",Tinos,"Noto Serif SC",serif;
  --maxw:1260px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}

.page{max-width:var(--maxw);margin:0 auto;padding:0 28px;min-height:100vh;display:flex;flex-direction:column}

/* ===== 顶栏：单行，≤64px ===== */
.topbar{height:64px;display:flex;align-items:center;gap:28px;flex:0 0 auto;
  position:sticky;top:0;z-index:40;background:rgba(245,247,248,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);margin:0 -28px;padding:0 28px}
.brand{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:.5px;color:var(--ink)}
.brand .dot{color:var(--accent)}
.tabs{display:flex;gap:6px;margin-left:8px}
.tab{font-size:14.5px;color:var(--ink-3);font-weight:500;padding:8px 14px;border-radius:999px;
  position:relative;transition:color .18s,background .18s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent-d);background:var(--accent-soft)}
.spacer{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;font-family:var(--disp);
  border-radius:999px;padding:9px 18px;white-space:nowrap;cursor:pointer;transition:transform .15s,box-shadow .18s,background .18s,border-color .18s}
.btn .icn{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(11,126,143,.18)}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent-line);color:var(--accent-d)}

/* ===== 主体 ===== */
.main{flex:1 1 auto;padding:18px 0 40px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;color:var(--ink-3);text-transform:uppercase}
.h-title{font-family:var(--disp);font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.2px;line-height:1.08;margin:10px 0 6px}
.h-sub{font-size:14.5px;color:var(--ink-2);max-width:62ch}
.sec{margin-top:46px}
.sec-head{margin-bottom:22px}

/* 卡片：仅在真有层级时用；染色阴影 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-1);
  transition:transform .2s ease,box-shadow .22s ease,border-color .2s ease}
.card.hover:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--accent-line)}

/* 标签 chip（pill） */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);
  padding:5px 11px;border-radius:999px;line-height:1.2;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--accent-line);color:var(--accent-d);background:var(--accent-soft)}
.pill{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--accent-d);
  background:var(--accent-soft);border:1px solid var(--accent-line);padding:4px 12px;border-radius:999px}

/* 线性图标（描边，统一 stroke 1.7；非装饰滥用） */
.icn{width:18px;height:18px;stroke-width:1.7}
.ico-acc{color:var(--accent)}

/* 元信息行（用列/间距而非满屏 · ） */
.meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--ink-2);font-size:13.5px}
.meta .m{display:inline-flex;align-items:center;gap:7px}
.meta .m .icn{width:15px;height:15px;color:var(--accent)}

/* ========== 概览 hero（非对称分栏） ========== */
.hero{display:grid;grid-template-columns:1.25fr .9fr;gap:48px;align-items:start;padding-top:14px}
.hero .name{font-family:var(--disp);font-size:clamp(38px,4.4vw,58px);font-weight:700;letter-spacing:-.5px;line-height:1;margin:12px 0 0}
.hero .role{font-size:17px;color:var(--ink-2);font-weight:500;margin-top:14px}
.hero .value{font-family:var(--disp);font-size:clamp(20px,2.2vw,27px);font-weight:600;letter-spacing:-.4px;
  line-height:1.34;margin-top:20px;max-width:24ch}
.hero .value b{color:var(--accent-d);font-weight:700}
.hero .summary{font-size:13.5px;color:var(--ink-2);line-height:1.8;max-width:54ch;margin-top:16px}
.hero .cta{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}

/* KPI 信号面板：呼吸式数据，hairline 分隔，不做卡中卡 */
.signal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.signal .sh{padding:16px 22px;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-3);font-family:var(--mono);letter-spacing:.5px}
.signal .grid{display:grid;grid-template-columns:1fr 1fr}
.kpi{padding:22px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.kpi:nth-child(2n){border-right:none}
.kpi:nth-last-child(-n+2){border-bottom:none}
.kpi .num{font-family:var(--mono);font-size:32px;font-weight:600;line-height:1;color:var(--ink);letter-spacing:-1px}
.kpi .num .u{color:var(--accent);font-size:22px}
.kpi .lab{font-size:13px;color:var(--ink);font-weight:600;margin-top:9px}
.kpi .sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}

/* 招牌战绩 strip（editorial 数字带，替代 4 等分卡） */
.wins{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.win{padding:22px 26px 22px 0;border-right:1px solid var(--line-2)}
.win:last-child{border-right:none}
.win .big{font-family:var(--mono);font-size:25px;font-weight:700;color:var(--accent-d);letter-spacing:-1px}
.win .txt{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.55}

/* 能力域（hairline 行，非浮卡堆） */
.domains{display:grid;grid-template-columns:1fr 1fr;gap:14px 36px;margin-top:14px}
.domain{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-2)}
.domain .ic{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--accent-soft);
  color:var(--accent-d);display:flex;align-items:center;justify-content:center}
.domain .ic .icn{width:20px;height:20px}
.domain h4{font-size:14.5px;font-weight:700;margin-bottom:7px}

/* 全链路能力光谱（概览：底层→上层一条带，只显域名+熟练度，明细在技能 tab） */
.spectrum{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:16px}
.spec-node{flex:1 1 auto;min-width:124px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.spec-node .spec-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.spec-lv{align-self:flex-start;font-size:10.5px;font-weight:600;padding:1.5px 9px;border-radius:999px;border:1px solid var(--accent-line)}
.spec-lv.lv-精通{background:var(--accent);color:#fff;border-color:var(--accent)}
.spec-lv.lv-熟练{background:var(--accent-soft);color:var(--accent-d)}
.spec-lv.lv-掌握{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.spec-sep{align-self:center;flex:0 0 auto;display:flex;align-items:center;color:var(--ink-4)}
.spec-sep .icn{width:13px;height:13px}
@media(max-width:680px){.spec-sep{display:none}.spec-node{flex:1 1 44%}}

/* ========== 技能 ========== */
.tier{margin-bottom:22px}
.tier .th{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.tier .lv{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.tier .cnt{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.tier .bar{height:3px;border-radius:2px;background:var(--accent);opacity:.9;margin-left:auto;flex:0 0 auto}
.skchip{font-size:13px;padding:6px 12px}
.stackgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.stackgrp .gh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.stackgrp .gh .ic{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-d);
  display:flex;align-items:center;justify-content:center}
.stackgrp .gh .ic .icn{width:18px;height:18px}
.stackgrp h4{font-size:14px;font-weight:700}

/* ========== 经历 timeline ========== */
.timeline{position:relative}
.tl{display:grid;grid-template-columns:128px 1fr;gap:28px;padding-bottom:30px}
.tl:last-child{padding-bottom:0}
.tl .when{text-align:right;padding-top:2px}
.tl .when .yr{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}
.tl .when .tag{display:inline-block;margin-top:8px;font-size:11px;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);padding:2px 9px;border-radius:999px}
.tl .body{position:relative;border-left:2px solid var(--line);padding-left:28px}
.tl:last-child .body{border-color:transparent}
.tl .node{position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:999px;
  background:var(--surface);border:3px solid var(--accent)}
.tl .role{font-size:17px;font-weight:700}
.tl .co{font-size:14px;color:var(--accent-d);font-weight:600;margin-left:10px}
.tl .loc{font-size:12.5px;color:var(--ink-3);margin-left:10px}
.tl ul{margin:12px 0 0;padding-left:18px}
.tl li{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin-bottom:6px}
.tl li::marker{color:var(--accent)}

/* ========== 项目 ========== */
.feat{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.feat .metrics{font-family:var(--mono);font-size:13px;color:var(--accent-d);font-weight:500;margin:14px 0}
.feat .side{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.feat .side .lab{font-size:12px;color:var(--ink-3);font-family:var(--mono);margin-bottom:14px}
.feat .stat{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.feat .stat:last-child{border-bottom:none}
.feat .stat .k{font-size:13px;color:var(--ink-2);flex:1}
.feat .stat .v{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.proj h3{font-size:16px;font-weight:700}
.proj .co{font-size:12px;color:var(--ink-3);margin-left:auto;font-family:var(--mono)}
.proj .desc{font-size:13px;color:var(--ink-2);line-height:1.7;margin:10px 0 12px}
.proj .metrics{font-family:var(--mono);font-size:11.5px;color:var(--accent-d);margin-bottom:12px}

/* 区块标题图标方块 */
.sqic{width:40px;height:40px;border-radius:11px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sqic .icn{width:21px;height:21px;stroke-width:1.8}
.sqic.sm{width:34px;height:34px;border-radius:9px}.sqic.sm .icn{width:18px;height:18px}
.rowhead{display:flex;align-items:center;gap:12px;margin-bottom:11px;flex-wrap:wrap}

/* ===== 页脚（替代假终端，真实信息） ===== */
.foot{margin-top:54px;padding:28px 0 36px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .who{font-family:var(--disp);font-weight:700;font-size:15px}
.foot .who span{color:var(--ink-3);font-weight:400;margin-left:8px}
.foot .links{display:flex;gap:20px;font-size:13px;color:var(--ink-2)}
.foot .links a{display:inline-flex;align-items:center;gap:7px;transition:color .15s}
.foot .links a:hover{color:var(--accent-d)}
.foot .links a .icn{width:15px;height:15px;color:var(--accent)}
.foot .note{font-size:12px;color:var(--ink-3)}
.foot .fontnote{font-size:11.5px;color:var(--ink-4);margin-top:5px;letter-spacing:.3px}

/* ===== 动效（连续滚动版：板块全显 / 进入视口分层入场 / 数据增长 / hover） ===== */
.panel{display:block;scroll-margin-top:84px}
.panel:not(:first-child){margin-top:36px;padding-top:36px;border-top:1px solid var(--line)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{opacity:0;transform:translateY(18px)}
.rise.in{animation:rise .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*70ms)}
.tier .bar{width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none}
  .rise.in{animation:none}
  .tier .bar{transition:none}
  html{scroll-behavior:auto}
}

/* ===== 响应式 ===== */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:28px}
  .wins{grid-template-columns:1fr}
  .win{border-right:none;border-bottom:1px solid var(--line-2);padding:18px 0}
  .win:last-child{border-bottom:none}
  .domains,.stackgrid,.pgrid{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:22px}
}
@media(max-width:680px){
  .page{padding:0 18px}
  /* 顶栏：与页面 18px 内边距对齐(原来沿用桌面 -28px 负边距导致品牌被裁出左缘)；品牌左·按钮右·tab 折到第二行 */
  .topbar{height:auto;flex-wrap:wrap;gap:8px 12px;margin:0 -18px;padding:10px 18px}
  .brand{font-size:16px}
  .tabs{margin-left:0;order:3;width:100%;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{padding:7px 13px;font-size:14px;white-space:nowrap}
  /* 优先级重排：品牌 + PDF 主按钮同一行；tab 第二行；行业分析降到第三行并瘦身 */
  .topbar .spacer{display:none}
  .topbar .btn-primary{order:2;margin-left:auto;padding:8px 14px;font-size:13px}
  .topbar .btn-ghost{order:4;font-size:12px;padding:6px 12px}
  .topbar .btn-ghost .icn{display:none}
  .signal .grid{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:1fr;gap:6px}
  .tl .when{text-align:left}
  .tl .body{border-left:none;padding-left:0;margin-top:6px}
  .tl .node{display:none}
}

/* ===== v2 · taste 优化补丁 ===== */
/* 身份 monogram 头像（替代「纯文字」，提供焦点视觉；非伪造照片） */
.idrow{display:flex;align-items:center;gap:14px}
.avatar{width:52px;height:52px;border-radius:999px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:24px;font-weight:700;color:#fff;background:var(--accent);
  box-shadow:0 6px 16px rgba(11,126,143,.28)}
/* featured 关键指标：accent ▸ 标记 + 文本（非装饰圆点） */
.feat .side .lab{margin-bottom:16px}
.feat .stat{display:flex;align-items:flex-start;gap:9px;padding:9px 0}
.feat .stat .tick{width:14px;height:14px;color:var(--accent);flex:0 0 auto;margin-top:4px}
.feat .stat .k{flex:1;font-size:13px;color:var(--ink);line-height:1.5}
/* 主按钮加深到 AA 安全（白字 on 深青 ≈ 7:1） */
.btn-primary{background:var(--accent-d)}
.btn-primary:hover{background:#054e5b}

/* ===== v3 · taste 二次打磨 ===== */
/* 身份徽标：avatar + 状态/职位（去掉与 role 重复的 eyebrow） */
.idrow{align-items:center;margin-bottom:4px}
.status-lab{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.5px;color:var(--accent-d)}
.role-lab{font-size:13.5px;color:var(--ink-2);font-weight:500;margin-top:3px}
/* 数据更突出：KPI 数字放大、面板减重 */
.signal .sh{font-size:12px;color:var(--ink-3);letter-spacing:1px;padding:14px 22px}
.kpi{padding:24px 22px}
.kpi .num{font-size:37px;letter-spacing:-1.5px}
.kpi .num .u{font-size:24px}
.kpi .lab{margin-top:11px}
/* 留白节奏（收紧：段间距下调，提升信息密度） */
.hero{padding-top:6px}
.sec{margin-top:38px}
.wins{margin-top:30px}
.win{padding:24px 28px 24px 0}
.win .big{font-size:30px}

/* ===== v4 · 内容填充：工作方式 / 教育 ===== */
.methods{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.method{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-1)}
.method p{font-size:13px;color:var(--ink-2);line-height:1.75}
.edu-item{display:grid;grid-template-columns:128px 1fr;gap:28px;padding:4px 0}
.edu-item+.edu-item{margin-top:18px;border-top:1px solid var(--line-2);padding-top:18px}
.edu-item .when{text-align:right}
.edu-item .when .yr{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}
@media(max-width:980px){ .methods{grid-template-columns:1fr} }
@media(max-width:680px){ .edu-item{grid-template-columns:1fr;gap:6px} .edu-item .when{text-align:left} }

/* ===== v6 · 终定稿打磨 ===== */
/* 经历 bullet 引导句首加粗（扫读性） */
.tl li .lead{font-weight:700;color:var(--ink)}
/* 键盘可达：focus-visible 焦点态（a11y） */
a:focus-visible,.tab:focus-visible,.btn:focus-visible,[data-go]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
/* KPI 面板顶部一道细 accent，强化「数据」属性 */
.signal{border-top:2px solid var(--accent)}

/* ============================================================
 * v7 · 二期大改：Hero / 技能雷达+分域卡 / 项目抽屉
 * ============================================================ */

/* ---- Hero 价值主张优先 ---- */
.hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.role-line{font-size:14px;color:var(--ink-2);font-weight:600}
.avail{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--accent-d);
  background:var(--accent-soft);border:1px solid var(--accent-line);padding:4px 12px;border-radius:999px}
.avail i{width:7px;height:7px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 3px rgba(14,122,66,.16)}
.hero .value{max-width:20ch}

/* ---- 技能：雷达 + 速读 ---- */
.skhero{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:center;margin-bottom:22px}
.radar-wrap{display:flex;justify-content:center}
.radar{width:100%;max-width:340px;height:auto}
.radar .rg{fill:none;stroke:var(--line);stroke-width:1}
.radar .ax{stroke:var(--line);stroke-width:1}
.radar .dpoly{fill:url(#rgrad);stroke:var(--accent);stroke-width:2}
.radar .dp{fill:var(--accent)}
.radar .rl{fill:var(--ink);font-size:12px;font-weight:600;font-family:var(--sans)}
.radar .rv{fill:var(--accent-d);font-size:10.5px;font-family:var(--mono)}
.legend-wrap .skh{font-size:14px;font-weight:700;margin-bottom:14px;color:var(--ink)}
.legrow{display:grid;grid-template-columns:54px 22px 1fr;align-items:start;gap:10px;padding:11px 0;border-top:1px solid var(--line-2)}
.legrow:first-of-type{border-top:none}
.legrow .lv{font-family:var(--disp);font-size:14px;font-weight:700}
.legrow .cnt{color:var(--ink-3);font-size:12px;padding-top:1px}
.lv-精通{color:var(--accent-d)} .lv-熟练{color:var(--accent)} .lv-掌握{color:var(--ink-2)}

/* ---- 技能：分域卡 ---- */
.skgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.skcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-1)}
.skcard-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.skcard-h .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-d);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.skcard-h .ic .icn{width:20px;height:20px}
.skcard-t{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.skcard-t h4{font-size:15px;font-weight:700}
.lvtag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--accent-line)}
.lvtag.lv-精通{background:var(--accent);color:#fff;border-color:var(--accent)}
.lvtag.lv-熟练{background:var(--accent-soft);color:var(--accent-d)}
.lvtag.lv-掌握{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.skcard .blurb{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-bottom:13px;min-height:40px}

/* ---- 项目：指标 chips + 按钮 ---- */
.pmetrics{display:flex;flex-wrap:wrap;gap:7px}
.mchip{font-size:11.5px;color:var(--accent-d);background:var(--accent-soft);border:1px solid var(--accent-line);padding:4px 11px;border-radius:999px}
.pbtns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn.sm{font-size:13px;padding:7px 14px}
.btn.sm .icn{width:14px;height:14px}
.pcard{display:flex;flex-direction:column}
.pcard .desc{margin:10px 0 12px}
.pcard .pmetrics{margin-bottom:12px}
.pcard .tags{margin-bottom:2px}
.pcard .pbtns{margin-top:auto;padding-top:14px}
.pfeat .side .stat{display:block;padding:11px 0;border-bottom:1px solid var(--line-2)}
.pfeat .side .stat:last-child{border-bottom:none}
.pfeat .side .ov{font-size:16px;font-weight:600;color:var(--ink)}
.pfeat .side .ok{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ---- 项目详情抽屉 / 模态 ---- */
body.noscroll{overflow:hidden}
.modal-backdrop{position:fixed;inset:0;background:rgba(13,30,38,.42);backdrop-filter:blur(2px);z-index:60;opacity:0;transition:opacity .25s}
.modal-backdrop.on{opacity:1}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,94vw);background:var(--surface);z-index:61;
  box-shadow:-16px 0 48px rgba(13,40,50,.18);overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);padding:28px 30px 40px}
.drawer.on{transform:translateX(0)}
.drawer-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:15px;cursor:pointer;transition:border-color .15s,color .15s}
.drawer-x:hover{border-color:var(--accent-line);color:var(--accent-d)}
.drawer-head{display:flex;align-items:flex-start;gap:14px;margin:4px 36px 18px 0}
.drawer-head h2{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.2}
.drawer-head .dmeta{font-size:12px;color:var(--ink-3);margin-top:5px}
.dover{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:22px}
.otile{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px}
.otile .ov{font-size:15px;font-weight:600;color:var(--accent-d);line-height:1.2}
.otile .ok{font-size:11px;color:var(--ink-3);margin-top:5px;line-height:1.3}
.dsec{margin-bottom:20px}
.dsec h3{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px;padding-left:11px;position:relative}
.dsec h3::before{content:"";position:absolute;left:0;top:3px;width:3px;height:13px;background:var(--accent);border-radius:2px}
.dsec p{font-size:13.5px;color:var(--ink-2);line-height:1.75}
.dlist{margin:0;padding-left:18px}
.dlist li{font-size:13.5px;color:var(--ink-2);line-height:1.7;margin-bottom:7px}
.dlist li::marker{color:var(--accent)}
.dres{list-style:none;padding:0;margin:0}
.dres li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink);line-height:1.6;margin-bottom:8px}
.dres .tick{width:15px;height:15px;color:var(--accent);flex:0 0 auto;margin-top:3px}

/* ---- 响应式（新组件） ---- */
@media(max-width:980px){
  .skhero{grid-template-columns:1fr;gap:18px}
  .skgrid{grid-template-columns:1fr 1fr}
  .dover{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .skgrid{grid-template-columns:1fr}
  .dover{grid-template-columns:1fr}
  .drawer{width:100vw;padding:24px 20px 36px}
}

/* ===== v8 · taste 优化二期新三块 ===== */
/* hero 金句：放宽宽度，自然 2 行(原 20ch 折成 4 短行) */
.hero .value{max-width:30ch;line-height:1.3}
/* 分域卡 blurb 高度对齐更稳 */
.skcard .blurb{min-height:42px}
/* 抽屉过渡在 reduced-motion 下取消(a11y) */
@media(prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .modal-backdrop{transition:none}
}
/* 抽屉滚动条更克制 */
.drawer{scrollbar-width:thin}
/* 雷达在窄屏不要过大 */
@media(max-width:980px){ .radar{max-width:300px} .skhero{justify-items:center} }

/* ===== v9 · 自评定稿打磨 ===== */
/* 分域卡 hover 抬升(skcard 非 .card，需单独定义) */
.skcard{transition:transform .2s ease,box-shadow .22s ease,border-color .2s ease}
.skcard.hover:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--accent-line)}
.skcard:hover .ic{transform:scale(1.06);transition:transform .2s ease}
/* 精通领域卡视觉强化：最强项一眼突出(顶部 accent 描边) */
.skcard.lvc-精通{border-top:2px solid var(--accent)}

/* ============================================================
 * v11 · 底部栏常驻 + 去教育板块
 * ============================================================ */
/* 底部栏吸底常驻：滚动时一直可见 */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;
  padding:12px max(20px,calc((100vw - 1180px)/2 + 28px));
  background:rgba(245,247,248,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(13,40,50,.05)}
.foot .who{font-size:14px}
.foot .note{display:none}            /* 常驻条精简，隐去次要说明 */
body{padding-bottom:62px}            /* 给常驻底栏留位，末段内容不被遮挡 */
@media(max-width:680px){
  .foot{padding:9px 16px;gap:8px}
  .foot .who span{display:none}      /* 移动端只留名字 */
  .foot .links{gap:13px;font-size:12px;flex-wrap:wrap;justify-content:flex-end}
  body{padding-bottom:108px}
}

/* ============================================================
 * v12 · 自然动效(雷达绘入 + KPI 计数已在 JS) + 简版教育
 * ============================================================ */
/* 能力雷达：进入视口时数据多边形从中心绘入 */
.radar .rdata{opacity:0;transform:scale(.5);transform-origin:170px 152px;
  transition:transform .85s cubic-bezier(.16,1,.3,1) .15s, opacity .55s ease .15s}
.skhero.in .rdata{opacity:1;transform:scale(1)}
/* 简版教育：时间 · 学校 · 学位 同一行横向摆开 */
.edu-card{padding:18px 24px}
.edu-item{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.edu-item+.edu-item{margin-top:12px;border-top:1px solid var(--line-2);padding-top:12px}
.edu-item .when .yr{font-family:var(--mono);font-size:13px;color:var(--ink-2);font-weight:500;white-space:nowrap}
.edu-main{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.edu-main h3{font-size:16px;font-weight:700}
.edu-deg{font-size:13.5px;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){ .radar .rdata{opacity:1;transform:none;transition:none} }
@media(max-width:680px){ .edu-item{gap:6px 16px} }

/* ============================================================
 * v13 · 交互/可访问性收尾(复盘批)
 * ============================================================ */
/* 复制微信轻提示 */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);z-index:60;
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;padding:9px 16px;border-radius:999px;
  box-shadow:0 8px 24px rgba(13,60,72,.28);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* 页脚「微信」复制按钮(裸 button 复刻成内联链接样式) */
.foot .links .mcopy{display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:0;
  font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.foot .links .mcopy:hover{color:var(--accent-d)}
.foot .links .mcopy .icn{width:15px;height:15px;color:var(--accent)}
@media(max-width:680px){ .foot .links .mcopy{font-size:12px} }

/* 「关联经历」跳转后的短暂高亮 */
@keyframes flashbg{0%{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-line)}
  100%{background:transparent;box-shadow:0 0 0 0 transparent}}
.tl.flash{animation:flashbg 1.7s ease;border-radius:var(--r-sm)}

/* 长文本行宽上限(列加宽到 1260 后,避免单行过长难扫读) */
.tl li{max-width:74ch}
.method p{max-width:70ch}

/* 触屏:禁用 hover 抬升,避免「粘连」;给可点元素 active 反馈 */
@media(hover:none){
  .card.hover:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}
  .chip:hover{border-color:var(--line);color:var(--ink-2);background:var(--surface-2)}
}
.card.hover:active{transform:scale(.997)}

/* 抽屉关闭按钮键盘焦点可见 */
.drawer-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* 移动端:熟练度速读改纵向,等级标签独占一行、标签整行平铺 */
@media(max-width:680px){
  .legrow{grid-template-columns:1fr;gap:6px;padding:10px 0}
  .legrow .cnt{display:none}
}

/* ============================================================
 * v-next · 视觉质感打磨（等宽数字 / 雷达渐变已在 JS+上文）
 * ============================================================ */
/* 战绩带 = 关键结果，顶部 2px accent，和 KPI 面板一个语汇 */
.wins{border-top-width:2px;border-top-color:var(--accent)}
/* 技能分域卡 7 张在 3 列下末行孤卡 → 末卡通栏横排(icon+标题+概述 左，工具链 右)，补齐空格并读作「基础层横贯全栈」 */
.skgrid > .skcard:last-child{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px}
.skgrid > .skcard:last-child .skcard-h{margin-bottom:0;flex:0 0 auto}
.skgrid > .skcard:last-child .blurb{margin:0;min-height:0;flex:1 1 220px;max-width:40ch}
.skgrid > .skcard:last-child .tags{flex:2 1 340px}
@media(max-width:680px){
  .skgrid > .skcard:last-child{display:block}
  .skgrid > .skcard:last-child .skcard-h{margin-bottom:12px}
  .skgrid > .skcard:last-child .blurb{margin-bottom:13px}
}