:root{
  --brand:#2563eb;
  --brand2:#7c3aed;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --line:#e2e8f0;
  --ok:#059669;
  --warn:#d97706;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
}
a{text-decoration:none;color:inherit}
/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{font-size:20px;font-weight:800;color:var(--brand);cursor:pointer;white-space:nowrap}
.brand-sub{font-size:12px;color:var(--muted);font-weight:500;margin-left:6px}
.nav-burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text)}
#mainnav{display:flex;gap:4px}
#mainnav a{
  padding:8px 12px;border-radius:10px;font-size:14px;color:var(--muted);cursor:pointer;
  transition:.2s;
}
#mainnav a:hover{background:#eef2ff;color:var(--brand)}
main{max-width:760px;margin:0 auto;padding:16px}
.page{padding:8px 0 40px}
/* 通用 */
h2.page-title{font-size:24px;margin-bottom:4px}
.page-desc{color:var(--muted);margin-bottom:16px}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.center{text-align:center}
.btn{
  border:none;border-radius:12px;padding:12px 20px;font-size:15px;font-weight:600;cursor:pointer;
  transition:.2s;display:inline-block;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.25)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:#fff;color:var(--brand);border:1px solid #c7d2fe}
.btn-plain{background:none;color:var(--muted);border:none;font-size:14px}
.btn-lg{width:100%;font-size:17px;padding:14px}
.btn-small{padding:7px 12px;font-size:13px;border-radius:9px;background:#eef2ff;color:var(--brand);border:1px solid #c7d2fe;cursor:pointer}
/* hero */
.hero{background:linear-gradient(135deg,#eff6ff,#f5f3ff);border:1px solid var(--line);border-radius:20px;padding:26px 20px;margin-bottom:18px}
.hero h1{font-size:26px;line-height:1.4;margin-bottom:10px}
.hero-sub{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.hero-stats{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats span{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:800;color:var(--brand);font-size:17px}
.hero-stats small{display:block;font-weight:400;color:var(--muted);font-size:11px}
/* 卡片 */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(15,23,42,.06);border-color:#c7d2fe}
.card h3{margin:8px 0 6px;font-size:16px}
.card p{color:var(--muted);font-size:13.5px}
.card-ico{font-size:26px}
.card.hot{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.price{font-size:22px;font-weight:800;color:var(--brand);margin-top:8px}
/* panel 面板 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.panel h3{margin-bottom:12px;font-size:17px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.panel-head h3{margin:0}
/* 输入 */
label{display:block;font-size:14px;color:var(--text);font-weight:600;margin:10px 0 4px}
input,select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;
  font-family:inherit;background:#fff;color:var(--text);margin-top:4px;outline:none;transition:.2s;
}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{
  padding:9px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;
  cursor:pointer;transition:.15s;user-select:none;
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
/* 进度条 */
.progress{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:10px 0 18px}
.progress-fill{height:100%;width:25%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:99px;transition:.3s}
/* 测试步骤 */
.test-step{margin:6px 0}
.test-step h3{font-size:18px;margin-bottom:4px}
/* 结果 */
.result-head{font-size:20px;margin:8px 0 2px}
.result-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:14px;padding:16px;margin:12px 0}
.result-card.top{border-left-color:var(--ok)}
.result-card .tag{display:inline-block;font-size:12px;background:#eef2ff;color:var(--brand);border-radius:99px;padding:2px 10px;margin-bottom:6px}
.result-card .tag.top-tag{background:#ecfdf5;color:var(--ok)}
.result-card h3{margin-bottom:4px}
.result-card .why{color:var(--muted);font-size:13.5px;margin-bottom:8px}
.result-card h4{font-size:13px;color:var(--muted);margin:8px 0 4px}
.job-tags span,.skill-tags span{display:inline-block;font-size:12.5px;background:#f1f5f9;border-radius:8px;padding:3px 9px;margin:2px 3px 2px 0}
.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:8px 12px;font-size:13px;margin-top:8px}
.ai-point{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:10px;padding:8px 12px;font-size:13px;margin-top:8px}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* 经历条目 */
.exp-item{border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0;background:#fafbfe}
.exp-item .form-row{margin-bottom:6px}
.exp-del{background:none;border:none;color:#dc2626;font-size:13px;cursor:pointer;float:right}
/* 简历预览 */
.resume-preview{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-top:14px;white-space:pre-wrap;font-size:14px}
.resume-preview h4{color:var(--brand);margin:10px 0 4px}
/* 规划 */
.plan-stage{border-left:3px solid var(--brand);margin:14px 0;padding-left:14px}
.plan-stage h4{color:var(--brand)}
.plan-stage ul{margin:6px 0 0 18px;font-size:14px}
.plan-stage li{margin:4px 0}
/* 下单 */
.order-steps{margin:6px 0 6px 18px;font-size:14.5px}
.order-steps li{margin:6px 0}
.wechat-id{color:var(--brand);background:#eef2ff;padding:2px 8px;border-radius:8px}
/* footer */
footer{text-align:center;color:var(--muted);font-size:12.5px;padding:24px 16px;border-top:1px solid var(--line);margin-top:10px}
footer p{margin:2px 0}
/* 响应式 */
@media(max-width:560px){
  .form-row{grid-template-columns:1fr}
  .nav-burger{display:block}
  #mainnav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;
    border-bottom:1px solid var(--line);padding:8px;display:none;box-shadow:0 12px 20px rgba(15,23,42,.08);
  }
  #mainnav.open{display:flex}
  #mainnav a{padding:12px}
  .hero h1{font-size:22px}
}