* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f2937;
  background: linear-gradient(180deg, #fafafa 0%, #f9f5ff 100%);
}
.app-header, .app-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; color: #111827;
}
.app-header { border-bottom: 1px solid #ede9fe; background: #ffffffaa; backdrop-filter: blur(6px); }
.app-footer { border-top: 1px solid #ede9fe; font-size: 12px; color: #6b7280; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.logo { font-weight: 800; letter-spacing: 1px; font-size: 20px; color: #7c3aed; }
.tag { font-size: 14px; color: #6b7280; }
.suffix { font-size: 12px; color: #a78bfa; }
.content { max-width: 980px; margin: 20px auto; padding: 0 16px; }
.card { background: #fff; border: 1px solid #ede9fe; border-radius: 16px; padding: 20px; box-shadow: 0 10px 24px rgba(124,58,237,0.08); }
.card + .card { margin-top: 16px; }
.hidden { display: none; }

/* Intro badges (1-5 increasing intensity) */
.badges { display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0; }
.badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; }
.badge.level1 { background:#F5F3FF; color:#6B7280; border-color:#EDE9FE; }
.badge.level2 { background:#EEE7FF; color:#6B7280; border-color:#E9D5FF; }
.badge.level3 { background:#E9D5FF; color:#5B21B6; border-color:#D8B4FE; }
.badge.level4 { background:#D8B4FE; color:#4C1D95; border-color:#C4B5FD; }
.badge.level5 { background:#C4B5FD; color:#3B0764; border-color:#A78BFA; }

/* Time progress */
.time { display:grid; gap:6px; margin-top:8px; }
.time-label { font-size:12px; color:#6b7280; }
.time-bar { height:8px; background:#f3f4f6; border-radius:999px; overflow:hidden; }
.time-fill { height:100%; width:0%; background: linear-gradient(90deg, #a78bfa, #ec4899); transition: width 0.3s ease-in-out; }
.time-text { font-size:12px; color:#6b7280; }

/* Question */
.q-head { display: grid; gap: 10px; }
.bar { height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #a78bfa, #ec4899); transition: width 0.3s ease-in-out; }
.q-body h2 { margin: 8px 0 12px; font-size: 18px; }
.options { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 12px; }
.option { position: relative; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #e5e7eb; border-radius:14px; cursor:pointer; background:#fff; transition: all .15s ease; box-shadow: 0 2px 8px rgba(124,58,237,0.05); }
.option:hover { border-color:#d8b4fe; box-shadow: 0 6px 16px rgba(124,58,237,0.10); }
.option input { accent-color:#a78bfa; }
.option .dot { width:10px; height:10px; border-radius:50%; background:#e5e7eb; }
.option.active { border-color:#a78bfa; background:linear-gradient(180deg,#ffffff,#faf5ff); }
.option.active .dot { background:#a78bfa; }
.q-foot { display: flex; justify-content: flex-end; }
button { padding: 10px 14px; border-radius: 10px; border: 1px solid #ddd; background: #7c3aed; color: #fff; cursor: pointer; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
.tip { color: #6b7280; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.panel { border: 1px dashed #e9d5ff; border-radius: 12px; padding: 12px; background: #fdfcff; }
.panel.note { background: #f8fafc; border-color: #e5e7eb; }
.panel h3 { margin: 4px 0 10px; }
.meta { font-size: 13px; color: #6b7280; }
#summary li, #factors li { margin: 6px 0; }
.details { font-size: 12px; color: #6b7280; }
.actions { display: flex; gap: 10px; margin-top: 10px; }

/* Responsive */
@media (max-width: 1024px){ .content{ padding:0 12px; } .options{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 720px){ .grid { grid-template-columns: 1fr; } .options { grid-template-columns: 1fr; } .q-body h2{ font-size:16px; } .card{ border-radius:14px; padding:16px; } }

/* 结果标签 chips */
.chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.85rem; margin-left:8px; }
.chip.ok { background:#E8F5E9; color:#2E7D32; }
.chip.mild { background:#FFF3E0; color:#EF6C00; }
.chip.moderate { background:#FFE0B2; color:#D84315; }
.chip.severe { background:#FFEBEE; color:#C62828; }
.chip.pos { background:#FFEBEE; color:#C62828; }

/* 区间参考布局 */
.range-block { margin:10px 0; }
.range-title { font-weight:600; margin-bottom:4px; }
.range-line { color:#666; font-size:.9rem; margin-bottom:6px; }
.range-desc { color:#333; }
/* 表格样式 */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border:1px solid #e5e7eb; padding:8px 10px; text-align:left; }
.table thead th { background:#f8fafc; color:#374151; font-weight:600; }
.table tbody tr:nth-child(odd) { background:#fafafa; }
/* 表格响应式包装 */
.table-wrap { width:100%; overflow-x:auto; }

/* 数值列右对齐 */
.table th.num, .table td.num { text-align:right; }

/* 题目简介 */
.q-desc { color:#6b7280; margin:4px 0 10px; }

/* 打印样式 */
@media print {
  body { background:#fff; }
  .app-header, .app-footer, #restartBtn, #shareBtn, #startBtn, #printBtn, .q-head, .q-foot { display:none !important; }
  .card { box-shadow:none; border:none; }
  .panel { page-break-inside:avoid; }
}