* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg,#667eea,#764ba2);
  min-height: 100vh; color: #333; padding: 20px;
}
.container { max-width: 720px; margin: 0 auto; }
header { text-align: center; color: #fff; margin-bottom: 24px; }
h1 { font-size: 32px; }
.sub { opacity: .85; margin-top: 6px; }

.card {
  background: #fff; border-radius: 16px; padding: 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); margin-bottom: 16px;
}
.card .field { display: block; margin-bottom: 18px; }
.field-label { font-weight: 600; display: block; margin-bottom: 8px; color:#444; }
.input {
  width: 100%; padding: 12px 14px; border: 2px solid #ddd; border-radius: 10px;
  font-size: 16px; transition: border .2s;
}
.input:focus { outline: none; border-color: #667eea; }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px; font-size: 16px;
  text-decoration: none; border: none; cursor: pointer; text-align: center; margin: 6px 4px;
}
.btn.primary { background: linear-gradient(135deg,#667eea,#764ba2); color:#fff; width:100%; font-weight:600; }
.btn.ghost { background:#fff; color:#667eea; border:2px solid #667eea; }
.btn.secondary { background:#ecf0f1; color:#333; }
.btn:hover { opacity:.92; }
.link { color:#667eea; text-decoration:none; margin-left:10px; }

.alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.alert.error { background:#fdecea; color:#c0392b; border:1px solid #f5c6cb; }

.card.mini { padding: 16px 20px; font-size: 15px; }

/* 刷题页 */
.quiz-wrap .topbar { display:flex; justify-content:space-between; color:#fff; font-size:14px; margin-bottom:14px; }
.timer { text-align:center; font-size:26px; font-weight:700; color:#fff; margin:6px 0 8px; }
#timebar { height:8px; background:rgba(255,255,255,.3); border-radius:4px; overflow:hidden; margin-bottom:16px; }
#timefill { height:100%; width:100%; background:#2ecc71; transition:width 1s linear; }
.question { font-size:18px; line-height:1.7; }
.stem { margin-bottom:10px; }

.choices { margin: 0; }
.choice {
  display:flex; align-items:center; gap:14px; background:#f8f9fa; border:2px solid #e9ecef;
  border-radius:12px; padding:16px 18px; margin-bottom:12px; cursor:pointer; transition:all .15s;
}
.choice:hover { border-color:#667eea; background:#f3f4ff; }
.choice-key { font-weight:700; color:#667eea; }
.choice-text { font-size:16px; }
/* 选中标识:单选=圆点,多选=勾选(显示在选项前排) */
.sel-mark { flex:0 0 auto; width:22px; height:22px; border:2px solid #cbd5e0; background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#667eea; transition:all .15s; box-sizing:border-box; }
.choice.single .sel-mark { border-radius:50%; }           /* 单选:圆 */
/* 单选选中:内部实心圆点(用内阴影做圆心,兼容桌面/手机) */
.choice.single.picked .sel-mark { border-color:#667eea; background:#fff; }
.choice.single.picked .sel-mark::after { content:''; width:12px; height:12px; border-radius:50%; background:#667eea; display:block; color:#667eea; }
/* 多选:方形框选中打勾 */
.choice.multi.picked .sel-mark { border-color:#667eea; background:#667eea; color:#fff; }
.choice.multi.picked .sel-mark::after { content:'✓'; }
.choice.correct-mark { border-color:#2ecc71; background:#eafaf1; }
.choice.picked-mark { border-color:#e74c3c; background:#fdecea; }
.choice.picked { border-color:#667eea; background:#f3f4ff; }
/* 结果页逐题回看:选项状态(正确绿/误选红),置于picked后以覆盖 */
.choice.rp-correct { border-color:#2ecc71; background:#eafaf1; }
.choice.rp-correct .sel-mark { border-color:#2ecc71; }
.choice.rp-correct.single.picked .sel-mark::after,
.choice.rp-wrong.single.picked .sel-mark::after { width:unset; height:unset; background:none; border-radius:unset; }
.choice.rp-correct.multi .sel-mark, .choice.rp-correct.single .sel-mark { background:#2ecc71; border-color:#2ecc71; color:#fff; }
.choice.rp-correct .sel-mark::after { content:'✓' !important; width:auto; height:auto; background:none; border-radius:0; color:#fff; }
.choice.rp-wrong { border-color:#e74c3c; background:#fdecea; }
.choice.rp-wrong.multi .sel-mark, .choice.rp-wrong.single .sel-mark { background:#e74c3c; border-color:#e74c3c; color:#fff; }
.choice.rp-wrong .sel-mark::after { content:'✗' !important; width:auto; height:auto; background:none; border-radius:0; color:#fff; }
.qtype-badge.qb-ok { background:#27ae60; }
.qtype-badge.qb-err { background:#e74c3c; }
.qtype-badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; font-weight:700; color:#fff; margin-bottom:8px; }
.qtype-badge.sg { background:#3498db; }
.qtype-badge.mt { background:#e67e22; }
/* 图片点击放大层 */
.lightbox { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,.9); align-items:center; justify-content:center; padding:24px; cursor:zoom-out; box-sizing:border-box; }
.lightbox img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,.6); object-fit:contain; touch-action:manipulation; }
.lb-close { position:absolute; top:16px; right:24px; font-size:40px; color:#fff; cursor:pointer; line-height:1; }
.img-stem { max-width:100%; border-radius:8px; margin-top:6px; }
.choice-img { max-width:220px; border-radius:8px; }
.img-explain { max-width:100%; border-radius:8px; margin-top:8px; }
.q-source { font-size:13px; color:#999; margin-top:8px; font-style:italic; }
.lightbox img { cursor: zoom-out; }

.feedback { margin-top:14px; }
.fb { border-radius:12px; padding:16px; }
.fb.ok { background:#eafaf1; border:1px solid #2ecc71; }
.fb.err { background:#fdecea; border:1px solid #e74c3c; }
.explain { margin-top:10px; color:#555; line-height:1.7; }
.fb .btn { margin-top:14px; }

/* 结果页 */
.result-wrap { text-align:center; }
.big-score { }
.score-num { font-size:64px; font-weight:800; color:#667eea; }
.score-num small { font-size:22px; }
.score-sub { font-size:18px; margin-top:8px; color:#555; }
.score-streak { margin-top:6px; color:#e67e22; font-weight:600; }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; justify-content:center; }
.badge { background:#fef9e7; color:#b9770e; border:1px solid #f5d76e; border-radius:20px; padding:4px 12px; font-size:13px; }
.badge.dim { background:#f5f5f5; color:#999; border-color:#e0e0e0; }
.actions { margin-top:10px; }
.actions .btn { width:auto; }

/* 排行榜 */
.tabs { display:flex; gap:10px; margin-bottom:16px; }
.tab { flex:1; padding:12px; border:2px solid rgba(255,255,255,.6); background:transparent; color:#fff;
       border-radius:10px; font-size:16px; cursor:pointer; }
.tab.active { background:#fff; color:#667eea; font-weight:600; }
.cat-select { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chip { padding:8px 14px; background:rgba(255,255,255,.15); color:#fff; border-radius:20px; text-decoration:none; font-size:14px; }
.chip.active { background:#fff; color:#667eea; font-weight:600; }
table.board { width:100%; border-collapse:collapse; }
.board th, .board td { padding:12px 10px; text-align:left; border-bottom:1px solid #eee; }
.board th { color:#888; font-weight:600; font-size:13px; text-transform:uppercase; }
.board tr.me { background:#f0f4ff; }
.board tr.me td:first-child { font-weight:700; color:#667eea; }
.card.empty { color:#999; text-align:center; }

/* 排行榜:名字下的做题类别说明 */
.cat-profile {
  font-size: 12px; color: #a09cc7; margin-top: 3px;
  font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px;
}
tr.me .cat-profile { color: #8f8ad6; }