/* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: #F8F6F2;
  color: #2C2C2C;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
}

/* ===== 首页 ===== */
.home { padding: 32px 24px; }
.hero { text-align: center; margin-bottom: 32px; }
.hero-icon { font-size: 48px; margin-bottom: 12px; }
.hero h1 { font-size: 22px; color: #2C2C2C; margin-bottom: 8px; }
.hero-desc { font-size: 14px; color: #5A5A5A; }

.assessment-list { margin-bottom: 24px; }
.assessment-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 8px;
  background: #F4F1EC; border-radius: 12px;
  border: 1px solid #E8EAEE;
}
.card-icon { font-size: 24px; }
.card-info { flex: 1; }
.card-title { font-size: 15px; font-weight: 600; color: #2C2C2C; }
.card-subtitle { font-size: 12px; color: #6B7280; margin-top: 2px; }
.card-time { font-size: 12px; color: #9AA1AD; }

.grade-select { margin-bottom: 24px; }
.grade-select label { display: block; font-size: 14px; color: #4A4A4A; margin-bottom: 8px; }
.grade-select select {
  width: 100%; padding: 12px; font-size: 15px;
  border: 1px solid #E0E2E6; border-radius: 8px; background: #fff;
}

.home-note { text-align: center; font-size: 12px; color: #9AA1AD; margin-top: 12px; }

/* ===== 按钮 ===== */
.btn-primary {
  width: 100%; padding: 14px; font-size: 16px; font-weight: 600;
  background: #1B3A5C; color: #fff; border: none; border-radius: 12px;
  cursor: pointer; transition: opacity .2s;
}
.btn-primary:disabled { background: #C8CBD1; cursor: not-allowed; }
.btn-primary:not(:disabled):active { opacity: 0.85; }

.btn-secondary {
  padding: 12px 24px; font-size: 14px; font-weight: 500;
  background: #fff; color: #1B3A5C; border: 1px solid #1B3A5C;
  border-radius: 8px; cursor: pointer;
}

/* ===== 测评页 ===== */
.assessment { padding: 0 0 32px; }
.progress-bar { height: 4px; background: #E8EAEE; position: sticky; top: 0; z-index: 10; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #1B3A5C, #E8954C); transition: width .3s; }

.assessment-header { padding: 24px 24px 16px; text-align: center; }
.day-badge {
  display: inline-block; padding: 2px 12px; font-size: 12px; font-weight: 700;
  background: #E7EEF5; color: #1B3A5C; border-radius: 20px; margin-bottom: 8px;
}
.assessment-header h2 { font-size: 20px; color: #2C2C2C; }
.assessment-header p { font-size: 13px; color: #6B7280; margin-top: 4px; }

.questions { padding: 0 24px; }
.question { margin-bottom: 28px; }
.q-text { font-size: 15px; font-weight: 500; color: #2C2C2C; margin-bottom: 12px; line-height: 1.5; }
.scenario-text {
  font-size: 14px; color: #4A4A4A; background: #F4F1EC;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 12px;
  border-left: 3px solid #1B3A5C;
}

/* scale 选项 */
.scale-options { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-scale {
  flex: 1; min-width: 60px; padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 2px solid #E8EAEE; border-radius: 10px; background: #fff;
  cursor: pointer; transition: all .15s;
}
.opt-scale span { font-size: 10px; color: #9AA1AD; line-height: 1.2; }
.opt-scale.selected { border-color: #1B3A5C; background: #E7EEF5; }
.opt-scale.selected span { color: #1B3A5C; }
.opt-missing {
  width: 100%; padding: 10px; margin-top: 4px;
  border: 2px dashed #D0D3D8; border-radius: 10px; background: #F8F6F2;
  font-size: 13px; color: #6B7280; cursor: pointer;
}
.opt-missing.selected { border-color: #E0A93B; background: #FDF1DC; color: #92400e; }

/* radio 选项 */
.radio-options { display: flex; flex-direction: column; gap: 8px; }
.opt-radio {
  padding: 12px 16px; text-align: left; font-size: 14px;
  border: 2px solid #E8EAEE; border-radius: 10px; background: #fff;
  cursor: pointer; transition: all .15s;
}
.opt-radio.selected { border-color: #1B3A5C; background: #E7EEF5; color: #1B3A5C; }

/* checkpoint 选项 */
.checkpoint-options { display: flex; gap: 12px; }
.opt-check {
  flex: 1; padding: 14px; font-size: 15px; font-weight: 600;
  border: 2px solid #E8EAEE; border-radius: 10px; background: #fff;
  cursor: pointer; transition: all .15s;
}
.opt-check.selected { border-color: #1B3A5C; background: #E7EEF5; color: #1B3A5C; }

/* rank 选项 (D4) */
.rank-hint { font-size: 13px; color: #1B3A5C; margin-bottom: 12px; font-weight: 500; }
.rank-options { display: flex; flex-direction: column; gap: 8px; }
.opt-rank {
  position: relative; padding: 14px 48px 14px 16px;
  text-align: left; font-size: 14px; line-height: 1.4;
  border: 2px solid #E8EAEE; border-radius: 10px; background: #fff;
  cursor: pointer; transition: all .15s;
}
.opt-rank.ranked { border-color: #1B3A5C; background: #E7EEF5; }
.rank-num {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; line-height: 28px; text-align: center;
  background: #1B3A5C; color: #fff; border-radius: 50%; font-size: 14px; font-weight: 700;
}
.btn-reset-rank {
  margin-top: 8px; padding: 6px 12px; font-size: 12px;
  background: none; border: none; color: #9AA1AD; cursor: pointer;
}

.assessment-nav { display: flex; gap: 12px; padding: 0 24px 24px; }
.assessment-nav .btn-primary { flex: 1; }
.assessment-nav .btn-secondary { white-space: nowrap; }

/* ===== 诊断书 ===== */
.report { padding: 32px 24px; }
.report-header { text-align: center; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid #E8EAEE; }
.report-header h1 { font-size: 22px; color: #2C2C2C; margin-bottom: 12px; }
.report-meta { font-size: 13px; color: #6B7280; line-height: 1.8; }

.section { margin-bottom: 32px; }
.section h2 { font-size: 18px; color: #2C2C2C; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1B3A5C; }
.section-intro { font-size: 14px; color: #5A5A5A; margin-bottom: 16px; }

.signal { font-size: 14px; color: #c0392b; margin: 6px 0; font-weight: 500; }

.status-table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.status-table td { padding: 10px 12px; font-size: 14px; border-bottom: 1px solid #E8EAEE; }
.status-table td:first-child { color: #5A5A5A; }
.status-table td:last-child { text-align: right; font-weight: 500; }

.subsection { margin-bottom: 20px; }
.subsection h3 { font-size: 15px; color: #2C2C2C; margin-bottom: 8px; }
.copy-text { font-size: 14px; color: #3A3A3A; line-height: 1.7; margin-bottom: 12px; white-space: pre-wrap; }
.copy-text.small { font-size: 12px; color: #9AA1AD; }

.weak-actions { margin: 12px 0; }
.weak-action { font-size: 13px; color: #4A4A4A; padding: 8px 12px; background: #fff8e1; border-radius: 8px; margin-bottom: 6px; }

.root-block { margin-bottom: 16px; }
.root-score { font-size: 15px; font-weight: 600; color: #2C2C2C; margin-bottom: 6px; }
.root-text { font-size: 14px; color: #3A3A3A; line-height: 1.7; white-space: pre-wrap; }

.interaction-pattern { font-size: 14px; color: #3A3A3A; line-height: 1.7; margin-bottom: 16px; padding: 16px; background: #F4F1EC; border-radius: 10px; white-space: pre-wrap; }
.lever { font-size: 14px; color: #3A3A3A; line-height: 1.7; margin-bottom: 16px; padding: 16px; background: #E7EEF5; border-radius: 10px; white-space: pre-wrap; }

.actions { margin: 16px 0; }
.actions-title { font-size: 14px; font-weight: 600; color: #2C2C2C; margin-bottom: 8px; }
.action-item { font-size: 14px; color: #4A4A4A; padding: 10px 12px; background: #f0fdf4; border-radius: 8px; margin-bottom: 6px; line-height: 1.6; }

.path-e { font-size: 14px; color: #92400e; padding: 12px 16px; background: #FDF1DC; border-radius: 10px; margin: 12px 0; line-height: 1.7; white-space: pre-wrap; }

.disclaimer { font-size: 13px; color: #9AA1AD; padding-top: 16px; border-top: 1px solid #E8EAEE; }

.report-actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }

/* ===== 粗体文案 ===== */
.copy-text strong, .root-text strong, .interaction-pattern strong, .lever strong, .path-e strong, .action-item strong {
  font-weight: 700; color: #2C2C2C;
}

/* ===== 二维码区域 ===== */
.qr-section {
  text-align: center; margin-top: 24px; padding: 24px 16px;
  background: #F4F1EC; border-radius: 12px; border: 1px solid #E8EAEE;
}
.qr-title { font-size: 15px; font-weight: 600; color: #2C2C2C; margin-bottom: 16px; }
.qr-code { width: 180px; height: 180px; border-radius: 8px; }
.qr-placeholder {
  width: 180px; height: 180px; margin: 0 auto; border: 2px dashed #C8CBD1;
  border-radius: 8px; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; color: #9AA1AD;
}
.qr-placeholder span { font-size: 11px; color: #9AA1AD; margin-top: 4px; }

/* ===== 状态标签 Badge ===== */
.badge {
  display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 600;
  border-radius: 12px; margin-left: 8px; vertical-align: middle; white-space: nowrap;
}
.badge-red { background: #FDE4E4; color: #D23B3B; }
.badge-yellow { background: #FDF1DC; color: #C4841A; }
.badge-green { background: #E3F5EA; color: #2E9C5B; }
.badge-gray { background: #EFEDE8; color: #6b7280; }
.badge-blue { background: #E7EEF5; color: #1B3A5C; }

/* ===== 信号分色 ===== */
.signal-item { font-size: 14px; margin: 8px 0; font-weight: 500; display: flex; align-items: flex-start; gap: 6px; }
.signal-item .sig-icon { flex-shrink: 0; }
.signal-red { color: #D23B3B; }
.signal-yellow { color: #C4841A; }
.signal-green { color: #2E9C5B; }

/* ===== D6 得分进度条 ===== */
.score-bar-container { margin: 6px 0 10px; }
.score-bar-track { height: 10px; background: #EFEDE8; border-radius: 5px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 5px; }
.score-bar-fill.advantage { background: linear-gradient(90deg, #2E9C5B, #5BB87E); }
.score-bar-fill.consolidate { background: linear-gradient(90deg, #E0A93B, #E8B563); }
.score-bar-fill.focus { background: linear-gradient(90deg, #D23B3B, #E26A6A); }
.score-bar-fill.no-data { background: #d1d5db; }
.score-bar-meta { display: flex; justify-content: space-between; margin-top: 3px; font-size: 12px; color: #6B7280; }
.score-bar-meta .zone-tag { font-weight: 600; }
.zone-tag.advantage { color: #2E9C5B; }
.zone-tag.consolidate { color: #C4841A; }
.zone-tag.focus { color: #D23B3B; }
.zone-tag.no-data { color: #9ca3af; }

/* ===== 状态表格行配色 ===== */
.status-table td.status-red { color: #D23B3B; }
.status-table td.status-yellow { color: #C4841A; }
.status-table td.status-green { color: #2E9C5B; }

/* ===== 结论区域强调 ===== */
.conclusion-box { padding: 14px 16px; border-radius: 10px; margin-top: 8px; }
.conclusion-box.healthy { background: #ecfdf5; border-left: 4px solid #2E9C5B; }
.conclusion-box.adjust { background: #FDF1DC; border-left: 4px solid #E0A93B; }
.conclusion-box.rebuild { background: #FDE4E4; border-left: 4px solid #D23B3B; }
.conclusion-box.install { background: #FDE4E4; border-left: 4px solid #D23B3B; }
.conclusion-box.strengthen { background: #FDF1DC; border-left: 4px solid #E0A93B; }

/* ===== 口令验证页 ===== */
.key-verify { padding: 64px 24px 32px; max-width: 360px; margin: 0 auto; }
.key-verify-header { text-align: center; margin-bottom: 36px; }
.key-verify-icon { font-size: 48px; margin-bottom: 16px; }
.key-verify-header h2 { font-size: 22px; color: #2C2C2C; margin-bottom: 8px; }
.key-verify-header p { font-size: 14px; color: #6b7280; }
.key-verify-form { margin-bottom: 24px; }
.key-verify-form input {
  width: 100%; padding: 14px 16px; font-size: 18px; letter-spacing: 2px;
  border: 2px solid #E8EAEE; border-radius: 12px; text-align: center;
  text-transform: uppercase; outline: none; transition: border-color .2s;
}
.key-verify-form input:focus { border-color: #1B3A5C; }
.key-verify-error { color: #D23B3B; font-size: 13px; margin-top: 8px; text-align: center; min-height: 18px; }
.key-verify .btn-primary { width: 100%; }
.key-verify-note { text-align: center; margin-top: 24px; font-size: 13px; }
.key-verify-note a { color: #6b7280; text-decoration: none; }
.key-verify-note a:active { color: #1B3A5C; }

/* ===== 信息收集页 ===== */
.info-collect { padding: 48px 24px 32px; }
.info-header { text-align: center; margin-bottom: 32px; }
.info-header h2 { font-size: 20px; color: #2C2C2C; margin-bottom: 8px; }
.info-header p { font-size: 14px; color: #5A5A5A; }
.info-form { margin-bottom: 32px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 14px; font-weight: 600; color: #2C2C2C; margin-bottom: 6px; }
.form-field .required { color: #D23B3B; }
.form-field input {
  width: 100%; padding: 14px; font-size: 15px;
  border: 2px solid #E8EAEE; border-radius: 10px; background: #fff;
  transition: border-color .15s;
}
.form-field input:focus { outline: none; border-color: #1B3A5C; }
.field-note { font-size: 12px; color: #9AA1AD; margin-top: 4px; }
.info-nav { display: flex; gap: 12px; }
.info-nav .btn-primary { flex: 1; }
.info-nav .btn-secondary { white-space: nowrap; }

.field-error { font-size: 12px; color: #D23B3B; margin-top: 4px; }

/* ===== 免费版概览报告 ===== */
.free-report .free-positioning {
  text-align: center; padding: 24px 16px; margin-bottom: 28px;
  background: linear-gradient(135deg, #E7EEF5, #f0fdf4);
  border-radius: 14px;
}
.free-positioning-label { font-size: 12px; color: #6B7280; margin-bottom: 6px; letter-spacing: 1px; }
.free-positioning-text { font-size: 16px; font-weight: 600; color: #2C2C2C; line-height: 1.5; }

.free-section { margin-bottom: 24px; }
.free-section-title { font-size: 15px; font-weight: 600; color: #2C2C2C; margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #1B3A5C; }

.free-light-grid { display: flex; flex-direction: column; gap: 8px; }
.free-light-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: #F4F1EC; border-radius: 10px;
}
.free-light-name { font-size: 14px; color: #3A3A3A; font-weight: 500; }
.free-light-val { display: flex; align-items: center; gap: 4px; }
.free-light { font-size: 20px; }
.free-light-label { font-size: 13px; font-weight: 600; }
.free-light-red, .free-light-label.free-light-red { color: #D23B3B; }
.free-light-yellow, .free-light-label.free-light-yellow { color: #C4841A; }
.free-light-green, .free-light-label.free-light-green { color: #2E9C5B; }
.free-light-gray, .free-light-label.free-light-gray { color: #9ca3af; }

.free-guide {
  margin-top: 32px; padding: 24px 20px;
  background: #F4F1EC; border-radius: 14px; border: 1px solid #E8EAEE;
}
.free-guide-title { font-size: 15px; font-weight: 600; color: #2C2C2C; margin-bottom: 12px; }
.free-guide-list { list-style: none; margin-bottom: 16px; padding: 0; }
.free-guide-list li {
  font-size: 14px; color: #4A4A4A; padding: 5px 0; padding-left: 22px;
  position: relative; line-height: 1.5;
}
.free-guide-list li::before {
  content: '✓'; position: absolute; left: 0; color: #1B3A5C; font-weight: 700; font-size: 14px;
}
.free-guide-cta {
  font-size: 15px; font-weight: 600; color: #1B3A5C;
  text-align: center; margin-bottom: 16px; line-height: 1.5;
}

/* ===== 打印 ===== */
@media print {
  body { background: #fff; }
  #app { max-width: none; box-shadow: none; }
  .report-actions { display: none; }
  .section { page-break-inside: avoid; }
  .score-bar-fill { transition: none; }
}

/* ===== 全站品牌 Hero 栏：POLO 头像 + 学霸树横版背景 + 主张 ===== */
.brand-header { position: relative; max-width: 480px; margin: 0 auto; height: 104px; overflow: hidden; }
.brand-tree { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.brand-mask { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27,58,92,.84) 0%, rgba(27,58,92,.48) 58%, rgba(232,149,76,.32) 100%); }
.brand-row { position: relative; height: 100%; max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 11px; padding: 0 18px; }
.brand-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.brand-slogan { color: #F8F6F2; font-size: 12px; margin-top: 2px; opacity: .92; }