:root { --ink:#1a2332; --accent:#e8734a; --bg:#faf7f2; --card:#ffffff; --muted:#8a93a3; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
#app { max-width:420px; margin:0 auto; padding:24px 20px 48px; }
.screen { display:flex; flex-direction:column; gap:16px; animation:fadein .25s; }
@keyframes fadein { from{opacity:0; transform:translateY(6px);} to{opacity:1;} }
.brand { font-size:12px; letter-spacing:.12em; color:var(--muted); }
h1 { font-size:34px; line-height:1.25; }
h2 { font-size:21px; line-height:1.4; }
.sub, .verdict, .foot, .progress-text { color:var(--muted); font-size:14px; }
.foot { margin-top:24px; font-size:12px; text-align:center; }
.btn-primary { min-height:48px; border:none; border-radius:12px; background:var(--accent);
  color:#fff; font-size:17px; cursor:pointer; }
.btn-ghost { min-height:44px; border:1px solid #d8d2c8; border-radius:12px; background:none;
  color:var(--ink); font-size:15px; cursor:pointer; }
.progress { height:6px; border-radius:3px; background:#ece6dc; overflow:hidden; }
#progress-bar { height:100%; width:0; background:var(--accent); transition:width .2s; }
#quiz-options { display:flex; flex-direction:column; gap:10px; }
.opt { min-height:52px; border:1px solid #d8d2c8; border-radius:12px; background:var(--card);
  font-size:16px; color:var(--ink); cursor:pointer; padding:0 16px; text-align:left; }
.opt:active { border-color:var(--accent); color:var(--accent); }
.score-ring { width:150px; height:150px; margin:8px auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), #ece6dc 0); }
.score-ring .n { font-size:40px; font-weight:700; }
.score-ring .u { font-size:12px; color:var(--muted); }
.score-ring > div { width:126px; height:126px; border-radius:50%; background:var(--card);
  display:flex; align-items:center; justify-content:center; flex-direction:column; }
#result-radar { width:100%; max-width:320px; margin:0 auto; }
.dim-row { display:flex; align-items:center; gap:10px; background:var(--card);
  border-radius:10px; padding:10px 12px; }
.dim-row .name { width:76px; font-size:14px; }
.dim-row .bar { flex:1; height:8px; border-radius:4px; background:#ece6dc; overflow:hidden; }
.dim-row .bar > div { height:100%; background:var(--accent); }
.dim-row .v { width:34px; text-align:right; font-size:13px; color:var(--muted); }
#unlock-panel { display:flex; flex-direction:column; gap:10px; background:var(--card);
  border-radius:12px; padding:16px; }
#unlock-input { min-height:44px; border:1px solid #d8d2c8; border-radius:10px; padding:0 12px; font-size:16px; }
.error { color:#c0392b; font-size:13px; }
.rep-card { background:var(--card); border-radius:12px; padding:14px 16px; }
.rep-card h3 { font-size:15px; margin-bottom:6px; }
.rep-card p { font-size:14px; color:#4a5468; line-height:1.6; }
.rarity { background:#fff4ee; border-radius:12px; padding:14px 16px; font-size:14px; }
@media (min-width:768px){ #app{ padding-top:64px; } }
.screen[hidden], #unlock-panel[hidden] { display: none; }
.rep-head { background: #fff4ee; }
.rep-head h3 { font-size: 17px; }
.rep-card .lv { font-size: 12px; color: #8a93a3; font-weight: normal; white-space: nowrap; }
.rep-tags { color: #e8734a; font-size: 13px; text-align: center; margin-top: 4px; }