* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif;
  background: #f4f6fb; color: #1f2733; line-height: 1.7;
}
#app { max-width: 860px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: #0d47a1; color: #fff;
}
.brand { font-size: 18px; font-weight: 700; }
.badge { font-size: 12px; background: #f9a825; color: #3a2c00; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
main { flex: 1; padding: 24px 22px; }
.foot { padding: 14px 22px; font-size: 12px; color: #8a94a6; text-align: center; border-top: 1px solid #e3e8f0; }

/* 顶栏账号区 */
.acc-area { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-name { font-size: 13px; color: #fff; font-weight: 600; }
.sync-status { font-size: 11px; color: #cfe0ff; }
.topbar .btn.mini { padding: 3px 12px; font-size: 12px; background: #fff; color: #0d47a1; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(15,30,60,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 14px; padding: 22px; max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(13,71,161,.25); }
.modal-h { font-size: 17px; font-weight: 700; color: #0d47a1; margin-bottom: 10px; }
.qr-img { display: block; width: 220px; height: 220px; margin: 10px auto; border: 1px solid #e3e8f0; border-radius: 8px; }

/* 微信引导遮罩 */
.wx-overlay { position: fixed; inset: 0; background: rgba(15,30,60,.7); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.wx-card { background: #fff; border-radius: 14px; padding: 24px; max-width: 360px; text-align: center; }
.wx-h { font-size: 18px; font-weight: 700; color: #0d47a1; margin-bottom: 12px; }
.wx-body { font-size: 14px; color: #5b6678; line-height: 1.8; margin-bottom: 16px; }

.card { background: #fff; border-radius: 12px; padding: 22px; box-shadow: 0 2px 10px rgba(13,71,161,.06); }
h1.title { font-size: 24px; color: #0d47a1; margin-bottom: 6px; }
.sub { color: #5b6678; margin-bottom: 18px; }
.section-h { font-size: 16px; font-weight: 700; color: #1565c0; margin: 18px 0 8px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: #5b6678; margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 9px 12px; border: 1px solid #d3d9e4; border-radius: 8px; font-size: 14px;
}
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.btn {
  display: inline-block; cursor: pointer; border: none; border-radius: 8px;
  padding: 11px 20px; font-size: 15px; font-weight: 600; background: #0d47a1; color: #fff;
  transition: .15s;
}
.btn:hover { background: #1565c0; }
.btn.ghost { background: #eef2f9; color: #0d47a1; }
.btn.ghost:hover { background: #e0e8f5; }
.btn.warn { background: #f9a825; color: #3a2c00; }
.btn-row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.steps { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.step-pill { font-size: 12px; padding: 5px 12px; border-radius: 14px; background: #eef2f9; color: #5b6678; }
.step-pill.active { background: #0d47a1; color: #fff; }
.step-pill.done { background: #c8e6c9; color: #1b5e20; }

.passage { background: #f7f9fc; border: 1px solid #e3e8f0; border-radius: 10px; padding: 16px; white-space: pre-wrap; font-size: 15px; line-height: 1.9; }
.sentence { background: #fff8e1; border-left: 4px solid #f9a825; padding: 10px 14px; border-radius: 6px; margin: 10px 0; font-size: 15px; }
.timer { font-size: 22px; font-weight: 700; color: #c62828; text-align: center; margin: 10px 0; }

.chat { border: 1px solid #e3e8f0; border-radius: 10px; padding: 14px; height: 320px; overflow-y: auto; background: #fafbfe; }
.msg { margin-bottom: 12px; max-width: 82%; padding: 9px 13px; border-radius: 10px; font-size: 14px; white-space: pre-wrap; }
.msg.ai { background: #e3ecfb; color: #0d2a5e; align-self: flex-start; }
.msg.me { background: #0d47a1; color: #fff; margin-left: auto; }
.chat-input { display: flex; gap: 10px; margin-top: 12px; }
.chat-input textarea { flex: 1; resize: none; height: 46px; padding: 10px 12px; border: 1px solid #d3d9e4; border-radius: 8px; font-size: 14px; }

textarea.answer { width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid #d3d9e4; border-radius: 8px; font-size: 14px; resize: vertical; }

/* 报告 */
.score-total { text-align: center; font-size: 44px; font-weight: 800; color: #0d47a1; margin: 6px 0; }
.dim { margin: 12px 0; }
.dim-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.bar { height: 10px; background: #e3e8f0; border-radius: 6px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg,#42a5f5,#0d47a1); }
.dim-note { font-size: 12px; color: #5b6678; margin-top: 3px; }
.comment { background: #f7f9fc; border-radius: 10px; padding: 14px; font-size: 14px; margin-top: 14px; }
.comment b { color: #0d47a1; }
.note-line { font-size: 12px; color: #8a94a6; margin-top: 14px; }
.kbd { display:inline-block; background:#0d47a1; color:#fff; border-radius:4px; padding:1px 7px; font-size:12px;}

/* 首页模式选择 */
.mode-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mode-card {
  flex: 1; min-width: 240px; cursor: pointer; text-align: left;
  border: 1px solid #d3d9e4; border-radius: 12px; padding: 18px; background: #f8fbff;
  transition: .15s;
}
.mode-card:hover { border-color: #0d47a1; background: #eef4ff; }
.mode-name { font-size: 17px; font-weight: 700; color: #0d47a1; }
.mode-desc { font-size: 13px; color: #5b6678; margin-top: 6px; line-height: 1.6; }

/* 套题卡片 */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.set-card { cursor: pointer; border: 1px solid #d3d9e4; border-radius: 12px; padding: 16px; background: #fff; transition: .15s; }
.set-card:hover { border-color: #0d47a1; box-shadow: 0 4px 14px rgba(13,71,161,.12); }
.set-title { font-size: 16px; font-weight: 700; color: #0d47a1; }
.set-topic { font-size: 13px; color: #5b6678; margin: 6px 0; }
.set-desc { font-size: 12px; color: #8a94a6; }

/* 退出 / 返回 */
.exit { font-size: 13px; color: #5b6678; cursor: pointer; margin-bottom: 10px; }
.exit:hover { color: #0d47a1; }

/* 提示框 */
.hint { background: #e8f5e9; border-left: 4px solid #43a047; padding: 10px 14px; border-radius: 6px; font-size: 14px; margin: 8px 0 14px; }

/* 语音识别结果 */
.rec-box { margin-top: 12px; }
.rec-status { font-size: 13px; color: #c62828; }
.rec-result { background: #f7f9fc; border: 1px solid #e3e8f0; border-radius: 8px; padding: 10px 12px; font-size: 14px; }

/* 思考中气泡 */
.msg.thinking { background: #eef2f9; color: #8a94a6; font-style: italic; }

/* 题库 */
.bank-topic { margin: 12px 0 18px; }
.bank-topic-h { font-size: 15px; font-weight: 700; color: #1565c0; margin-bottom: 6px; }
.bank-q { margin-left: 22px; }
.bank-q li { font-size: 14px; margin-bottom: 6px; line-height: 1.6; }
.bank-list { margin-left: 22px; }
.bank-list li { font-size: 14px; margin-bottom: 6px; line-height: 1.6; }

/* 全国题库分类页 */
.tab-row { display: flex; gap: 10px; margin: 8px 0 16px; flex-wrap: wrap; }
.tab-btn { cursor: pointer; border: 1px solid #d3d9e4; background: #eef2f9; color: #5b6678; border-radius: 20px; padding: 8px 18px; font-size: 14px; font-weight: 600; transition: .15s; }
.tab-btn:hover { border-color: #0d47a1; }
.tab-btn.active { background: #0d47a1; color: #fff; border-color: #0d47a1; }
.bank-block { background: #f8fbff; border: 1px solid #e3e8f0; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.bank-block-h { font-size: 16px; font-weight: 700; color: #1565c0; margin-bottom: 6px; }
.bank-desc { font-size: 13px; color: #5b6678; margin-bottom: 8px; line-height: 1.6; }
.q-tag { display: inline-block; background: #0d47a1; color: #fff; border-radius: 4px; padding: 0 7px; font-size: 12px; margin-right: 2px; }

/* 评分标准页 */
.rubric-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rubric-table th, .rubric-table td { border: 1px solid #e3e8f0; padding: 8px 12px; text-align: left; }
.rubric-table th { background: #eef2f9; color: #0d47a1; font-weight: 700; }
.rubric-table td:nth-child(2), .rubric-table td:nth-child(3) { width: 90px; text-align: center; }

/* 录音中的按钮 */
.btn.recording { background: #c62828; color: #fff; animation: recPulse 1.2s infinite; }
@keyframes recPulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }

/* 题库练习 / 记录 / 错题本 */
.btn.mini { padding: 2px 10px; font-size: 12px; margin-left: 8px; vertical-align: middle; }
.q-tags { font-size: 12px; color: #64748b; margin: 2px 0 6px; }
.bp-score { padding: 10px 14px; border-radius: 8px; font-weight: 700; margin: 12px 0 8px; font-size: 15px; }
.bp-score.pass { background: #ecfdf5; color: #047857; }
.bp-score.fail { background: #fef2f2; color: #b91c1c; }
.stat-grid { display: flex; gap: 10px; margin: 10px 0 16px; flex-wrap: wrap; }
.stat-cell { flex: 1; min-width: 110px; background: #f1f5f9; border-radius: 8px; padding: 10px; text-align: center; font-size: 12px; color: #5b6678; }
.stat-cell b { display: block; font-size: 22px; color: #0d47a1; margin-bottom: 2px; }
.hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed #e2e8f0; font-size: 14px; }
.h-date { color: #8a94a6; font-size: 12px; white-space: nowrap; }
.hist-score { font-weight: 700; white-space: nowrap; }
.hist-score.pass { color: #047857; }
.hist-score.fail { color: #b91c1c; }
.wrong-card { border: 1px solid #fecaca; background: #fffafa; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }