:root{
  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-soft:#f9fafc;
  --text:#29313d;
  --muted:#77808d;
  --line:#e4e8ee;
  --blue:#a9c9df;
  --blue-strong:#7da9c6;
  --blue-deep:#547c98;
  --pink:#e8c7d1;
  --pink-strong:#d4a7b5;
  --gray:#cfd5dd;
  --danger:#b86c78;
  --shadow:0 14px 36px rgba(54,68,84,.07);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 16% 0%,rgba(169,201,223,.22),transparent 24rem),
  radial-gradient(circle at 92% 9%,rgba(232,199,209,.20),transparent 22rem),
  var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(125,169,198,.30);outline-offset:2px}
.hidden{display:none!important}
.app-shell{width:min(760px,100%);margin:0 auto;padding:0 18px calc(40px + var(--safe-bottom))}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 0;font-size:15px;font-weight:760;letter-spacing:.01em;cursor:pointer}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#d9e9f4,#f1dce2);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(87,110,128,.08);color:#536675;font-weight:850}
.icon-button{width:40px;height:40px;border-radius:13px;border:1px solid rgba(214,220,228,.9);background:rgba(255,255,255,.72);display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 16px rgba(55,68,82,.04)}
.icon-button svg{width:19px;height:19px;fill:none;stroke:#637080;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.view{animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.home-card{margin-top:20px;padding:44px 34px 34px;border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,250,252,.94));border:1px solid rgba(224,229,236,.95);box-shadow:var(--shadow);position:relative;overflow:hidden}
.home-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(169,201,223,.14),transparent 42%,rgba(232,199,209,.12));}
.home-content{position:relative;z-index:1}
.home-card h1{font-size:clamp(34px,8vw,56px);line-height:1.08;margin:0 0 12px;font-weight:790;letter-spacing:-.035em;color:#303945}
.home-kicker{margin:0;color:#8a929d;font-size:14px;letter-spacing:.08em}
.home-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.button{border:0;border-radius:14px;min-height:46px;padding:0 18px;font-weight:720;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.button:active{transform:scale(.98)}
.button.primary{background:#a9c9df;color:#30495a;box-shadow:0 7px 18px rgba(125,169,198,.18)}
.button.primary:hover{background:#9fc2da}
.button.secondary{background:#f1e4e8;color:#6f5860}
.button.ghost{background:#fff;border:1px solid var(--line);color:#5f6975}
.button.danger{background:#faeef1;color:#9b5965}
.button.small{min-height:36px;padding:0 12px;border-radius:11px;font-size:13px}
.button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.resume-card,.latest-card,.panel{margin-top:16px;padding:20px;border-radius:var(--radius-lg);background:rgba(255,255,255,.90);border:1px solid rgba(224,229,236,.92);box-shadow:0 8px 24px rgba(57,70,83,.04)}
.resume-row,.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.resume-title,.section-title{font-size:16px;font-weight:760;margin:0 0 5px}
.muted{color:var(--muted);font-size:13px;line-height:1.6}
.resume-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.latest-type{font-size:34px;font-weight:800;letter-spacing:.05em;color:#607d91}
.latest-type-name{color:#8a7680;font-size:13px;margin-top:2px}
.mini-dims{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.mini-dim{padding:11px 12px;border-radius:12px;background:#f7f8fa}
.mini-dim-head{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#697481;margin-bottom:7px}
.track{height:8px;border-radius:999px;background:#edf0f3;overflow:hidden}
.track>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue-strong),var(--pink-strong))}
.test-top{position:sticky;top:0;z-index:20;padding-top:8px;background:linear-gradient(var(--bg) 80%,rgba(245,247,250,0))}
.test-top-card{padding:14px 15px;border-radius:16px;background:rgba(255,255,255,.90);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(222,227,234,.92);box-shadow:0 8px 22px rgba(52,65,79,.055)}
.progress-row{display:flex;align-items:center;gap:12px}
.progress{flex:1;height:8px;background:#edf0f3;border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,#95bdd8,#dfb7c3);border-radius:999px;transition:width .2s ease}
.progress-count{font-size:12px;font-weight:760;color:#687482;min-width:58px;text-align:right}
.test-status{margin-top:7px;font-size:11px;color:#84909c}
.question-stage{min-height:calc(100vh - 180px);display:flex;align-items:center;padding:20px 0 10px}
.question-card{width:100%;padding:30px 28px 24px;border-radius:var(--radius-xl);background:rgba(255,255,255,.94);border:1px solid rgba(223,228,235,.95);box-shadow:var(--shadow)}
.question-number{font-size:12px;color:#9aa2ac;font-weight:680;margin-bottom:18px}
.question-text{font-size:clamp(20px,4.8vw,26px);line-height:1.58;letter-spacing:-.015em;font-weight:700;color:#343c47;margin:0}
.answer-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:28px}
.answer-option{border:1px solid #e3e7ec;background:#fbfcfd;border-radius:14px;min-height:70px;padding:9px 6px;color:#7a838e;font-size:11px;font-weight:670;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.35;transition:.15s ease}
.answer-option:hover{border-color:#c9d9e4;background:#f7fafc}
.answer-option.selected{border-color:#9ebfd5;background:linear-gradient(145deg,#eaf4f9,#f7e9ed);color:#526775;box-shadow:0 6px 16px rgba(114,148,171,.10)}
.answer-option:active{transform:scale(.98)}
.test-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}
.test-nav-right{display:flex;gap:8px}
.link-button{border:0;background:transparent;color:#89929d;padding:10px 4px;font-size:12px;cursor:pointer}
.result-hero{margin-top:20px;padding:34px 28px;border-radius:var(--radius-xl);background:linear-gradient(145deg,#f4f9fc,#fbf3f5);border:1px solid #e0e6eb;box-shadow:var(--shadow)}
.result-label{font-size:12px;color:#87919d;letter-spacing:.08em}
.result-type{font-size:clamp(54px,14vw,78px);font-weight:810;letter-spacing:.055em;color:#5e788a;margin:6px 0 0;line-height:1}
.result-name{font-size:16px;color:#816d75;margin-top:10px;font-weight:690}
.result-desc{margin:18px 0 0;color:#626e7a;line-height:1.78;font-size:14px}
.axes{margin-top:14px}
.axis{padding:14px 0;border-top:1px solid #edf0f3}
.axis:first-child{border-top:0}
.axis-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:720;color:#64717f;margin-bottom:8px}
.axis-note{font-size:11px;color:#929aa4;margin-top:7px}
.result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.history-head{margin:20px 0 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.history-head h1{margin:0;font-size:27px;letter-spacing:-.02em}
.history-tools{display:flex;gap:7px;flex-wrap:wrap}
.history-list{display:grid;gap:10px}
.history-item{padding:17px;border-radius:16px;background:rgba(255,255,255,.91);border:1px solid #e3e7ec;display:grid;grid-template-columns:82px 1fr auto;gap:14px;align-items:center}
.history-type{font-size:24px;font-weight:790;letter-spacing:.04em;color:#607d91}
.history-date{font-size:12px;color:#9098a3;margin-bottom:4px}
.history-summary{font-size:12px;color:#727d89;line-height:1.55}
.history-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.empty{padding:42px 18px;text-align:center;color:#949ca6;font-size:13px}
.note-input{width:100%;min-height:88px;resize:vertical;border:1px solid #dfe4ea;border-radius:13px;background:#fbfcfd;padding:12px;color:#404956;margin-top:10px}
.storage-warning{position:fixed;left:14px;right:14px;bottom:calc(14px + var(--safe-bottom));z-index:100;background:#fff2f3;color:#8f5962;border:1px solid #efd5da;border-radius:14px;padding:12px 14px;font-size:12px;box-shadow:0 10px 26px rgba(75,53,59,.10)}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:120;background:#4f5965;color:#fff;border-radius:12px;padding:10px 13px;font-size:12px;transition:.18s ease;box-shadow:0 9px 24px rgba(39,46,54,.18);max-width:calc(100vw - 28px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.footer-note{text-align:center;color:#a0a7b0;font-size:11px;line-height:1.7;padding:20px 10px 0}
@media(max-width:600px){
  .app-shell{padding-left:13px;padding-right:13px}.site-header{height:64px}.home-card{margin-top:12px;padding:34px 22px 24px;border-radius:21px}.home-actions{margin-top:24px}.home-actions .button{flex:1}.resume-row,.section-head{align-items:flex-start;flex-direction:column}.resume-actions{justify-content:flex-start;width:100%}.resume-actions .button{flex:1}.mini-dims{grid-template-columns:1fr}.question-stage{min-height:calc(100dvh - 150px);padding:10px 0}.question-card{padding:24px 17px 19px;border-radius:20px}.answer-scale{gap:6px;margin-top:24px}.answer-option{min-height:66px;border-radius:12px;padding:7px 4px;font-size:10px}.test-nav{margin-top:14px}.history-item{grid-template-columns:72px 1fr}.history-actions{grid-column:1/-1;justify-content:flex-start}.result-hero{padding:28px 21px}}
@media(max-width:520px){.answer-scale{grid-template-columns:1fr;gap:7px}.answer-option{min-height:44px;font-size:12px}.question-stage{align-items:flex-start;padding-top:16px}.question-text{font-size:20px}.test-nav{flex-wrap:wrap}.test-nav-right{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}