:root{
  --bg:#0b1020; --bg2:#111a33;
  --card:rgba(255,255,255,.05); --stroke:rgba(255,255,255,.12);
  --text:#eef2ff; --muted:#9aa7c7;
  --accent:#5b8cff; --accent2:#7ef0d0;
  --warn:#ffb86b;
  --radius:18px; --maxw:900px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6fb; --bg2:#e8ecf7;
    --card:rgba(255,255,255,.78); --stroke:rgba(15,23,42,.10);
    --text:#0f172a; --muted:#5b6785;
    --accent:#2f6bff; --accent2:#0aa88a;
    --warn:#b45309;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 700px at 15% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 55%),
    linear-gradient(160deg, var(--bg), var(--bg2) 70%, var(--bg));
  background-attachment:fixed;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:clamp(18px,4vw,44px) 20px 60px}

/* ---------- 导航 ---------- */
nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:10px 4px; margin-bottom:8px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
nav .brand{font-weight:700; margin-right:auto; letter-spacing:.4px; font-size:15px}
nav a{
  color:var(--muted); text-decoration:none; font-size:14px;
  padding:6px 12px; border-radius:999px; border:1px solid transparent;
  transition:.18s ease;
}
nav a:hover{color:var(--text); border-color:var(--stroke)}
nav a.active{color:var(--text); background:color-mix(in srgb, var(--accent) 16%, transparent); border-color:var(--stroke)}

/* ---------- 卡片 ---------- */
.hero{
  display:flex; gap:24px; align-items:center;
  padding:clamp(22px,4vw,34px);
  background:var(--card); border:1px solid var(--stroke);
  border-radius:calc(var(--radius) + 6px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}
@media (max-width:640px){ .hero{flex-direction:column; text-align:center} }
.avatar{
  width:110px; height:110px; flex:0 0 auto; border-radius:50%; object-fit:cover;
  border:2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
  background:#0d1730;
}
h1.name{margin:0; font-size:clamp(25px,4vw,33px); letter-spacing:.5px; line-height:1.2}
.role{margin:6px 0 0; color:var(--accent); font-weight:600; font-size:15px}
.tagline{margin:6px 0 0; color:var(--muted); font-size:14px}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.badge{
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--stroke); color:var(--muted);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:9px 18px; border-radius:999px; font-size:14px; cursor:pointer;
  border:1px solid var(--stroke); color:var(--text);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  transition:.18s ease; font-family:inherit;
}
.btn:hover{background:color-mix(in srgb, var(--accent) 26%, transparent); transform:translateY(-1px)}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}

section{margin-top:26px; animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
h2{
  font-size:13px; letter-spacing:.18em; color:var(--muted);
  margin:0 0 12px; font-weight:600;
}
.panel{
  padding:clamp(18px,3vw,26px);
  background:var(--card); border:1px solid var(--stroke);
  border-radius:var(--radius);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.panel p{margin:0 0 10px}
.panel p:last-child{margin-bottom:0}
.muted{color:var(--muted)}

/* ---------- 求职意向 ---------- */
.kv{display:grid; grid-template-columns:88px 1fr; gap:8px 14px; font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}

/* ---------- 能力列表 ---------- */
ul.clean{list-style:none; padding:0; margin:0; display:grid; gap:10px}
ul.clean li{position:relative; padding-left:24px; font-size:14.5px}
ul.clean li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:7px; height:7px; border-radius:2px; transform:rotate(45deg);
  background:var(--accent);
}

/* ---------- 时间线 ---------- */
.job{position:relative; padding-left:22px; border-left:2px solid color-mix(in srgb, var(--accent) 45%, transparent)}
.job + .job{margin-top:22px; padding-top:2px}
.job::before{
  content:""; position:absolute; left:-6px; top:8px; width:10px; height:10px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.job h3{margin:0; font-size:16px}
.job .meta{color:var(--muted); font-size:13px; margin:2px 0 8px}
.job ul{margin:0; padding-left:18px; font-size:14.5px}
.job li{margin:4px 0}

/* ---------- 技能 ---------- */
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.skill{padding:14px 16px; border:1px solid var(--stroke); border-radius:14px; background:color-mix(in srgb, var(--accent) 6%, transparent)}
.skill b{display:block; font-size:14px; margin-bottom:4px}
.skill span{font-size:13px; color:var(--muted)}

/* ---------- 表单 ---------- */
form{display:grid; gap:12px}
label{font-size:13px; color:var(--muted); display:block; margin-bottom:5px}
input,textarea,select{
  width:100%; padding:10px 12px; font-size:14px; font-family:inherit;
  color:var(--text); background:color-mix(in srgb, var(--bg) 55%, transparent);
  border:1px solid var(--stroke); border-radius:10px; outline:none;
}
input:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
textarea{min-height:110px; resize:vertical}
.hint{font-size:12.5px; color:var(--muted)}
.notice{
  font-size:13px; color:var(--warn); border:1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--warn) 8%, transparent);
}

/* ---------- 留言墙 ---------- */
.msg{padding:14px 16px; border:1px solid var(--stroke); border-radius:14px; background:var(--card)}
.msg + .msg{margin-top:10px}
.msg .who{font-size:13px; color:var(--accent); font-weight:600}
.msg .when{font-size:12px; color:var(--muted); float:right}
.msg p{margin:6px 0 0; font-size:14px}

footer{margin-top:34px; text-align:center; color:var(--muted); font-size:12px}
footer a{color:var(--muted)}
hr.sep{border:0; border-top:1px solid var(--stroke); margin:22px 0}

@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- 打印：只留简历本体 ---------- */
@media print{
  @page{margin:14mm}
  body{background:#fff !important; color:#000 !important; font-size:12pt}
  nav,.cta,.no-print{display:none !important}
  .wrap{max-width:none; padding:0}
  .hero,.panel{background:none !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; padding:0 !important}
  .hero{margin-bottom:10mm}
  section{margin-top:6mm; animation:none !important}
  h2{color:#333 !important}
  .badge,.skill{border-color:#ccc !important; background:none !important}
  a{color:#000 !important; text-decoration:none}
  .job{border-color:#999 !important}
  .job::before{background:#333 !important; box-shadow:none !important}
  ul.clean li::before{background:#333 !important}
}