* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, "PingFang SC", sans-serif; background: linear-gradient(135deg, #f5f0e8 0%, #e8ddd0 100%); min-height: 100vh; }
#app { max-width: 480px; margin: 0 auto; padding: 20px; }
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.logo { text-align:center; font-size:28px; font-weight:bold; color:#8B4513; margin-top:40px; letter-spacing:4px; }
h1 { text-align:center; color:#5D3A1A; margin:12px 0; font-size:22px; }
.subtitle { text-align:center; color:#888; font-size:14px; margin-bottom:30px; }

.role-cards { display:flex; flex-direction:column; gap:16px; }
.role-card { background:#fff; border-radius:16px; padding:24px; text-align:center; cursor:pointer; box-shadow:0 2px 12px rgba(139,69,19,0.1); transition:all 0.2s; border:2px solid transparent; }
.role-card:hover, .role-card:active { border-color:#8B4513; transform:scale(1.02); }
.role-icon { font-size:40px; margin-bottom:10px; }
.role-card h3 { color:#5D3A1A; font-size:18px; margin-bottom:4px; }
.role-card p { color:#999; font-size:13px; }

/* Info Form */
#page-info { margin-top:40px; }
#page-info h2 { text-align:center; color:#5D3A1A; margin-bottom:24px; }
#info-form { display:flex; flex-direction:column; gap:14px; }
#info-form input, #info-form select { padding:14px 16px; border:1px solid #ddd; border-radius:10px; font-size:15px; background:#fff; }
#info-form input:focus, #info-form select:focus { outline:none; border-color:#8B4513; }

.btn-primary { background:#8B4513; color:#fff; border:none; padding:14px; border-radius:10px; font-size:16px; cursor:pointer; font-weight:bold; margin-top:10px; }
.btn-primary:active { background:#6B3410; }
.btn-secondary { background:#fff; color:#8B4513; border:2px solid #8B4513; padding:12px; border-radius:10px; font-size:15px; cursor:pointer; margin-top:8px; width:100%; }

/* Test Page */
.progress-bar { height:6px; background:#e0d5c8; border-radius:3px; overflow:hidden; margin-bottom:16px; }
#progress-fill { height:100%; background:linear-gradient(90deg,#8B4513,#D2691E); width:0%; transition:width 0.3s; border-radius:3px; }
.question-counter { text-align:center; color:#999; font-size:13px; margin-bottom:20px; }
#question-box { background:#fff; border-radius:16px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.dimension-tag { display:inline-block; background:#f5efe8; color:#8B4513; padding:4px 12px; border-radius:20px; font-size:12px; margin-bottom:12px; }
.question-text { font-size:16px; color:#333; line-height:1.6; margin-bottom:20px; }
.options-list { display:flex; flex-direction:column; gap:10px; }
.option-btn { padding:12px 16px; background:#faf7f3; border:1px solid #e8ddd0; border-radius:10px; font-size:14px; cursor:pointer; text-align:left; transition:all 0.2s; }
.option-btn:active, .option-btn.selected { background:#8B4513; color:#fff; border-color:#8B4513; }

/* Result Page */
.result-header { text-align:center; margin:30px 0 20px; }
.result-header h2 { color:#5D3A1A; }
.result-header p { color:#888; font-size:14px; margin-top:4px; }
.score-circle { width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,#8B4513,#D2691E); display:flex; align-items:center; justify-content:center; margin:20px auto; color:#fff; font-size:32px; font-weight:bold; }
#result-level { text-align:center; font-size:20px; font-weight:bold; color:#5D3A1A; margin:16px 0; }
#result-dimensions { background:#fff; border-radius:16px; padding:20px; margin:16px 0; }
.dim-row { display:flex; align-items:center; margin-bottom:12px; }
.dim-label { width:80px; font-size:13px; color:#666; }
.dim-bar-bg { flex:1; height:8px; background:#f0ebe4; border-radius:4px; overflow:hidden; }
.dim-bar { height:100%; background:linear-gradient(90deg,#8B4513,#D2691E); border-radius:4px; }
.dim-score { width:40px; text-align:right; font-size:13px; color:#8B4513; font-weight:bold; }
#result-suggestion { background:#fff; border-radius:16px; padding:20px; margin:16px 0; font-size:14px; line-height:1.8; color:#555; }