* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4eee2; color: #1b1512; }
#app { max-width: 640px; margin: 0 auto; min-height: 100vh; padding: 0 20px 40px; }
.screen { padding-top: 12vh; }
.brand { text-align: center; font-size: 40px; font-weight: 700; letter-spacing: 6px; color: #1b1512; }
.sub { text-align: center; font-size: 14px; color: #8a7f76; margin: 10px 0 36px; letter-spacing: 2px; }
.card { background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.loading { text-align: center; color: #8a7f76; font-size: 15px; }
.card .t { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.card input { width: 100%; padding: 14px; border: 1px solid #e3d9c9; border-radius: 10px; font-size: 18px; letter-spacing: 2px; text-align: center; }
.card button { width: 100%; margin-top: 16px; padding: 14px; background: #c0392b; color: #fff; border: none; border-radius: 10px; font-size: 16px; }
.msg { margin-top: 14px; color: #c0392b; font-size: 13px; text-align: center; }

.mode-list { display: flex; flex-direction: column; gap: 16px; }
.mode-card { background: #fff; border-radius: 16px; padding: 22px 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.mode-name { font-size: 22px; font-weight: 700; }
.mode-meta { font-size: 13px; color: #c0392b; margin: 6px 0; }
.mode-desc { font-size: 13px; color: #8a7f76; }
.mode-card.locked { opacity: .55; }
.mode-card.locked .mode-name::after { content: '（不可用）'; font-size: 12px; color: #b0a79c; margin-left: 8px; font-weight: 400; }

.q-top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.q-progress { flex: 1; height: 6px; background: #e3d9c9; border-radius: 3px; overflow: hidden; }
.q-bar { height: 100%; width: 0; background: #c0392b; transition: width .2s; }
.q-count { font-size: 13px; color: #8a7f76; }
.q-title { font-size: 19px; line-height: 1.6; margin-bottom: 24px; }
.q-options { display: flex; flex-direction: column; gap: 12px; }
.q-prev { display: none; margin-top: 18px; width: 100%; padding: 12px; background: transparent; border: 1px solid #d8cdb8; border-radius: 10px; color: #8a7f76; font-size: 14px; }
.opt { background: #fff; border: 1px solid #e3d9c9; border-radius: 12px; padding: 18px 16px; font-size: 15px; line-height: 1.5; }

.r-figure { text-align: center; }
.r-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; }
.r-name { font-size: 28px; font-weight: 700; }
.r-role { font-size: 13px; color: #8a7f76; margin: 6px 0; }
.r-score { display: inline-block; margin: 8px 0; padding: 4px 14px; background: #c0392b; color: #fff; border-radius: 20px; font-size: 14px; }
.r-tagline { font-size: 14px; color: #6b6055; line-height: 1.6; }
.r-summary { margin-top: 12px; font-size: 13px; color: #6b6055; line-height: 1.75; text-align: left; background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }
.r-summary:empty { display: none; }
.radar { width: 100%; height: 300px; margin: 18px 0; }
.r-why { background: #fff; border-radius: 14px; padding: 18px 16px; font-size: 14px; line-height: 1.8; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }
.r-diff { display: none; background: #fff5f2; border-left: 4px solid #c0392b; border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.8; margin-bottom: 14px; color: #6b6055; }
.r-diff:not(:empty) { display: block; }
.r-dims { margin: 18px 0; }
.dim-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dim-name { width: 36px; font-size: 13px; color: #6b6055; }
.dim-bar { position: relative; flex: 1; height: 10px; background: #ece4d6; border-radius: 5px; overflow: hidden; }
.dim-bar .u { position: absolute; left: 0; top: 0; height: 100%; background: rgba(168,52,42,0.55); }
.dim-bar .f { position: absolute; left: 0; top: 0; height: 100%; background: rgba(78,122,106,0.55); border-left: 2px solid #4E7A6A; }
.dim-gap { width: 36px; text-align: right; font-size: 12px; color: #8a7f76; }
.r-rank { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }
.rank-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.rank-item { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #f0e9dc; font-size: 14px; }
.rs { color: #c0392b; }
.r-basis { margin: 14px 0; font-size: 12px; color: #aaa; line-height: 1.7; }
.r-restart { width: 100%; padding: 14px; background: #1b1512; color: #fff; border: none; border-radius: 10px; font-size: 16px; margin-top: 8px; }