:root { --primary: #7BBAB1; --bg: #F4F7F6; --dark: #2C3E50; --border: #E8EEED; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { background: var(--bg); font-family: -apple-system, system-ui, sans-serif; margin: 0; display: flex; justify-content: center; min-height: 100vh; }

.container { 
    background: white; 
    width: 100%; 
    max-width: 480px; 
    margin: 0 auto; 
    box-shadow: 0 0 20px rgba(0,0,0,0.05); 
    display: flex; 
    flex-direction: column;
}

/* 文字防溢出核心逻辑 */
h1, h2, p, div { word-wrap: break-word; overflow-wrap: break-word; }

#welcome-screen { padding: 80px 30px; text-align: center; }
.brand-tag { background: #eef7f6; color: var(--primary); padding: 6px 15px; border-radius: 50px; font-size: 12px; font-weight: bold; display: inline-block; }
.subtitle { margin-top: 5px; color: #999; font-size: 13px; }
.warning-box { background: #FFF8EF; border: 1px solid #FFEDD5; color: #D97706; padding: 15px; border-radius: 12px; font-size: 12px; margin: 40px 0; line-height: 1.6; text-align: left; }

.main-btn, .save-btn { width: 100%; max-width: 320px; background: var(--primary); color: white; border: none; padding: 18px; border-radius: 15px; font-size: 16px; font-weight: bold; cursor: pointer; margin: 0 auto; display: block; }
.save-btn { background: #34495E; margin: 30px auto; }

/* 答题页布局 */
#quiz-screen { padding: 30px 20px; flex: 1; }
.progress-container { background: #eee; height: 5px; border-radius: 10px; margin-bottom: 30px; }
#progress-bar { background: var(--primary); height: 100%; width: 0%; border-radius: 10px; transition: width 0.3s; }
.q-header { text-align: right; color: #bbb; font-weight: bold; margin-bottom: 15px; font-family: monospace; }
.question-box { min-height: 100px; display: flex; align-items: center; }
#question-text { font-size: 20px; line-height: 1.5; color: var(--dark); margin: 0; }

.options-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.option-card { padding: 16px 20px; border: 1.5px solid #F0F2F2; border-radius: 15px; background: white; text-align: left; font-size: 16px; cursor: pointer; transition: 0.2s; }
.option-card:active { background: #f0f9f8; border-color: var(--primary); color: var(--primary); }

/* 报告区样式 (长图) */
#poster-area { padding: 40px 20px; background: white; color: var(--dark); }
.report-header { text-align: center; border-bottom: 2px solid var(--primary); padding-bottom: 20px; margin-bottom: 30px; }
.report-id { font-size: 10px; color: #bbb; text-align: right; font-family: monospace; }
.norm-tag { font-size: 12px; color: var(--primary); margin-top: 5px; font-weight: bold; }

.section { margin-bottom: 40px; }
.section-title { font-weight: bold; font-size: 15px; border-left: 5px solid var(--primary); padding-left: 12px; margin-bottom: 20px; color: var(--dark); }

.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.score-item { background: #F9FDFC; border: 1px solid var(--border); padding: 15px 5px; text-align: center; border-radius: 12px; }
.score-item span { font-size: 11px; color: #999; display: block; margin-bottom: 5px; }
.score-item strong { font-size: 15px; color: var(--primary); }

.norm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.norm-table th, .norm-table td { border: 1px solid #eee; padding: 10px; text-align: left; }
.norm-table th { background: #FBFBFC; color: #777; }
.norm-explanation { font-size: 11px; color: #999; margin-top: 10px; line-height: 1.5; }

.conclusion-card { background: #F9FDFC; border-radius: 15px; padding: 25px; border: 1.5px solid var(--primary); }
.main-status { font-size: 18px; font-weight: bold; color: var(--primary); margin-bottom: 12px; }
#res-desc { font-size: 14px; line-height: 1.8; color: #555; margin: 0; }

.term-item { background: #FBFCFC; padding: 15px; border-radius: 12px; font-size: 13px; border: 1px solid #F0F2F2; margin-bottom: 12px; }
.term-item strong { display: block; margin-bottom: 6px; color: var(--dark); }
.term-item span { color: #888; line-height: 1.5; display: block; }

.report-footer { text-align: center; margin-top: 50px; }
.footer-line { height: 1px; background: #EEE; margin-bottom: 20px; }
.disclaimer { font-size: 10px; color: #BBB; margin-top: 10px; }

.msg-error { padding: 100px 30px; text-align: center; color: #999; }