/* ============ 题库模块样式（参考 user.hqwx.com 视觉） ============ */
:root {
  --hq-primary: #609fff;
  --hq-primary-dark: #3d87f5;
  --hq-bg: #f7f9fc;
  --hq-panel: #f1f7ff;
  --hq-text: #333;
  --hq-gray: #8a94a6;
  --hq-border: #e6ecf5;
  --hq-right: #67c23a;
  --hq-wrong: #f56c6c;
  --hq-warn: #e6a23c;
}

.tiku-wrap { width: 1180px; margin: 0 auto; padding: 20px 0 60px; color: var(--hq-text); font-size: 14px; min-height: 60vh; }
.tiku-wrap * { box-sizing: border-box; }
.tiku-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 90px 0; color: var(--hq-gray); }
.tiku-loading .spin { width: 34px; height: 34px; border: 3px solid var(--hq-border); border-top-color: var(--hq-primary); border-radius: 50%; animation: hq-spin 0.8s linear infinite; }
@keyframes hq-spin { to { transform: rotate(360deg); } }
.tiku-error { padding: 60px 0; }

/* toast */
.tiku-toast { position: fixed; left: 50%; top: 20%; transform: translate(-50%, -12px); background: rgba(0,0,0,.72); color: #fff; padding: 10px 22px; border-radius: 6px; z-index: 9999; opacity: 0; transition: all .3s; font-size: 14px; max-width: 80vw; }
.tiku-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* buttons */
.tl-btn, .tp-btn { display: inline-block; padding: 7px 18px; border: 1px solid var(--hq-border); border-radius: 4px; background: #fff; color: var(--hq-text); cursor: pointer; font-size: 13px; text-decoration: none; line-height: 1.4; transition: all .15s; }
.tl-btn:hover, .tp-btn:hover { border-color: var(--hq-primary); color: var(--hq-primary); }
.tl-btn.primary, .tp-btn.primary { background: var(--hq-primary); border-color: var(--hq-primary); color: #fff; }
.tl-btn.primary:hover, .tp-btn.primary:hover { background: var(--hq-primary-dark); }
.tl-btn.danger { color: var(--hq-wrong); }
.tl-btn.small, .tp-btn.small { padding: 4px 12px; font-size: 12px; }
.tl-btn[disabled], .tp-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* empty */
.empty-box { text-align: center; padding: 60px 0; color: var(--hq-gray); }
.empty-box .eb-icon { font-size: 42px; margin-bottom: 10px; }

/* ============ 列表页 ============ */
.tl-layout { display: flex; gap: 20px; align-items: flex-start; }
.tl-side { width: 220px; flex-shrink: 0; background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; overflow: hidden; position: sticky; top: 20px; }
.tl-side-title { padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--hq-border); background: var(--hq-panel); }
.tl-side ul { list-style: none; margin: 0; padding: 6px 0; max-height: 70vh; overflow: auto; }
.tl-side li { padding: 10px 16px; cursor: pointer; font-size: 13px; color: #555; border-left: 3px solid transparent; }
.tl-side li:hover { background: var(--hq-bg); color: var(--hq-primary); }
.tl-side li.active { background: var(--hq-panel); color: var(--hq-primary); border-left-color: var(--hq-primary); font-weight: 600; }
.tl-main { flex: 1; min-width: 0; }
.tl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.tl-head h2 { margin: 0; font-size: 20px; }
.tl-count { color: var(--hq-gray); font-size: 13px; }
.tl-card { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; }
.tl-card-head { display: flex; align-items: baseline; justify-content: space-between; }
.tl-cate-name { font-size: 16px; font-weight: 600; }
.tl-cate-sub { color: var(--hq-gray); font-size: 12px; }
.tl-card-bar { height: 6px; background: var(--hq-bg); border-radius: 3px; margin: 14px 0 8px; overflow: hidden; }
.tl-card-bar-in { height: 100%; background: linear-gradient(90deg, var(--hq-primary), #8fbcff); border-radius: 3px; transition: width .4s; }
.tl-card-stat { color: var(--hq-gray); font-size: 12px; margin-bottom: 14px; }
.tl-card-actions { display: flex; gap: 10px; flex-wrap: wrap;     margin-top: 10px;}
.tl-chapters { margin-top: 14px; border-top: 1px dashed var(--hq-border); padding-top: 10px; }
.tl-chapter { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--hq-bg); font-size: 13px; }
.tl-chapter:last-child { border-bottom: none; }
.tl-ch-name { flex: 1; }
.tl-ch-meta { color: var(--hq-gray); font-size: 12px; }

/* ============ 刷题页 ============ */
.tiku-practice-page { width: auto; max-width: 1180px; }
.tp-topbar { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--hq-border); display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.tp-title { font-size: 16px; font-weight: 600; }
.tp-tools { display: flex; gap: 10px; align-items: center; }
.tp-btn.active { border-color: var(--hq-primary); color: var(--hq-primary); background: var(--hq-panel); }
.tp-body { display: flex; gap: 20px; align-items: flex-start; }
.tp-list { flex: 1; min-width: 0; }
.q-toolbar { text-align: right; margin-bottom: -6px; position: relative; z-index: 2; }
.fav-btn { border: none; background: none; color: var(--hq-gray); cursor: pointer; font-size: 13px; padding: 4px 6px; }
.fav-btn:hover { color: var(--hq-warn); }
.fav-btn.on { color: var(--hq-warn); }

.q-item { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; padding: 20px 24px; margin-bottom: 16px; scroll-margin-top: 80px; }
.q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.q-no { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; background: var(--hq-primary); color: #fff; border-radius: 4px; font-size: 13px; }
.q-type-tag { font-size: 12px; color: var(--hq-primary); background: var(--hq-panel); padding: 2px 8px; border-radius: 3px; }
.q-title { font-size: 15px; line-height: 1.8; margin-bottom: 14px; }
.q-topic-title { font-size: 15px; line-height: 1.8; margin-bottom: 12px; }
.q-opts { display: flex; flex-direction: column; gap: 10px; }
.q-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--hq-border); border-radius: 6px; cursor: pointer; transition: all .15s; }
.q-opt:hover { border-color: var(--hq-primary); background: var(--hq-panel); }
.q-opt.is-selected { border-color: var(--hq-primary); background: var(--hq-panel); }
.q-opt.is-correct { border-color: var(--hq-right); background: #f0f9eb; }
.q-opt.is-wrong { border-color: var(--hq-wrong); background: #fef0f0; }
.q-seq { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--hq-border); border-radius: 50%; font-size: 12px; font-style: normal; flex-shrink: 0; margin-top: 2px; background: #fff; }
.q-opt.is-selected .q-seq { background: var(--hq-primary); border-color: var(--hq-primary); color: #fff; }
.q-opt.is-correct .q-seq { background: var(--hq-right); border-color: var(--hq-right); color: #fff; }
.q-opt.is-wrong .q-seq { background: var(--hq-wrong); border-color: var(--hq-wrong); color: #fff; }
.q-opt-body { flex: 1; line-height: 1.7; }
.q-subjective textarea { width: 100%; border: 1px solid var(--hq-border); border-radius: 6px; padding: 10px 12px; font-size: 14px; resize: vertical; font-family: inherit; }
.q-subjective textarea:focus { outline: none; border-color: var(--hq-primary); }

.q-analysis { margin-top: 14px; border-top: 1px dashed var(--hq-border); padding-top: 14px; background: #fbfdff; border-radius: 0 0 8px 8px; }
.qa-row { margin-bottom: 8px; font-size: 13px; }
.qa-label { color: var(--hq-gray); margin-right: 10px; }
.qa-correct { color: var(--hq-right); font-weight: 600; }
.qa-mine { margin-left: 16px; color: #555; }
.qa-ok { color: var(--hq-right); }
.qa-bad { color: var(--hq-wrong); }
.qa-body { color: #555; line-height: 1.8; font-size: 13px; }
.rich-text img { max-width: 100%; }
.rich-text table { border-collapse: collapse; max-width: 100%; }
.rich-text td, .rich-text th { border: 1px solid var(--hq-border); padding: 4px 8px; }

.tp-actions { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 20px; }
.tp-progress { color: var(--hq-gray); font-size: 13px; }

/* 答题卡 */
.answer-card { width: 280px; flex-shrink: 0; position: sticky; top: 76px; background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; overflow: visible; }
.ac-tab { position: absolute; left: -30px; top: 20px; writing-mode: vertical-lr; background: var(--hq-primary); color: #fff; padding: 12px 6px; border-radius: 6px 0 0 6px; cursor: pointer; font-size: 12px; letter-spacing: 2px; }
.answer-card.collapsed { width: 0; border: none; background: transparent; }
.answer-card.collapsed .ac-tab { left: auto; right: 15px; top: auto; bottom: 160px; position: fixed; border-radius: 8px 0 0 8px; box-shadow: -2px 2px 8px rgba(0,0,0,.12); }
.ac-panel { padding: 14px; }
.ac-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ac-stats { color: var(--hq-gray); font-size: 12px; }
.ac-legend { font-size: 12px; color: var(--hq-gray); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 3px; }
.dot.done { background: var(--hq-primary); }
.dot.undo { background: #dfe6f0; }
.dot.right { background: var(--hq-right); }
.dot.wrong { background: var(--hq-wrong); }
.ac-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-height: 46vh; overflow: auto; padding: 3px;}
.ac-item { display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 4px; background: #edf1f7; color: #666; cursor: pointer; font-size: 13px; border: 1px solid transparent; }
.ac-item:hover { border-color: var(--hq-primary); }
.ac-item.done { background: var(--hq-primary); color: #fff; }
.ac-item.right { background: var(--hq-right); color: #fff; }
.ac-item.wrong { background: var(--hq-wrong); color: #fff; }
.ac-item.current { outline: 2px solid var(--hq-primary-dark); outline-offset: 1px; }

/* 底部导航（移动端） */
.tp-footer-nav { display: none; }

/* ============ 结果页 ============ */
.tiku-result-page { max-width: 900px; }
.tr-head { margin-bottom: 20px; }
.result-panel { background: linear-gradient(135deg, #609fff, #4a8cf0); border-radius: 10px; color: #fff; padding: 26px 30px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.rp-score { text-align: center; }
.rp-num { font-size: 44px; font-weight: 700; line-height: 1; }
.rp-num small { font-size: 14px; font-weight: 400; margin-left: 4px; }
.rp-sub { margin-top: 6px; opacity: .85; font-size: 13px; }
.rp-cells { display: flex; gap: 34px; flex: 1; flex-wrap: wrap; }
.rp-cell { text-align: center; }
.rp-cell b { display: block; font-size: 20px; }
.rp-cell span { font-size: 12px; opacity: .85; }
.tr-actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
.tr-list .q-analysis { display: block; }

/* ============ 子页面（错题/收藏/记录） ============ */
.tiku-sub-page { max-width: 900px; }
.ts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.ts-head h2 { margin: 0; font-size: 20px; }
.ts-tools { display: flex; gap: 10px; }
.ts-list { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; overflow: hidden; }
.ts-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--hq-bg); font-size: 14px; }
.ts-item:last-child { border-bottom: none; }
.ts-item:hover { background: var(--hq-bg); }
.ts-name { font-weight: 600; min-width: 40px; }
.ts-name.fav { color: var(--hq-warn); }
.ts-q { flex: 1; color: #444; }
.ts-meta { color: var(--hq-gray); font-size: 12px; white-space: nowrap; }
.ts-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; color: var(--hq-gray); }

.countdown { font-variant-numeric: tabular-nums; color: var(--hq-warn); font-weight: 600; }
.countdown.danger { color: var(--hq-wrong); animation: hq-blink 1s step-end infinite; }
@keyframes hq-blink { 50% { opacity: .4; } }

/* ============ 科目主页（章节/真题/模拟） ============ */
.tl-group { margin-bottom: 4px; }
.tl-group-name { padding: 8px 14px 4px; font-size: 12px; color: var(--hq-gray); }
.tl-group + .tl-group .tl-group-name { border-top: 1px solid var(--hq-border); margin-top: 4px; }

.tsu-header { display: flex; align-items: baseline; gap: 12px; background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; }
.tsu-header h2 { margin: 0; font-size: 20px; }
.tsu-subject { color: var(--hq-gray); font-size: 15px; }
.tsu-switch { margin-left: auto; color: var(--hq-primary); font-size: 13px; text-decoration: none; }

.tsu-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; padding: 0 12px; margin-bottom: 12px; overflow-x: auto; }
.tsu-tabs a { padding: 13px 16px; font-size: 14px; color: var(--hq-text); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tsu-tab-ico { width: 18px; height: 18px; vertical-align: middle; }
.tsu-tabs a:hover { color: var(--hq-primary); }
.tsu-tabs a.active { color: var(--hq-primary); font-weight: 600; border-bottom-color: var(--hq-primary); }

.tsu-body { display: flex; gap: 16px; align-items: flex-start; }
.tsu-main { flex: 1; min-width: 0; }
.tsu-aside { width: 260px; flex-shrink: 0; }

.tsu-stat-card { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; padding: 18px 20px; margin-bottom: 14px; }
.tsu-stat-line { font-size: 14px; margin-bottom: 12px; }
.tsu-stat-line b { color: var(--hq-primary); }
.tsu-progress { height: 8px; background: var(--hq-panel); border-radius: 4px; overflow: hidden; max-width: 520px; }
.tsu-progress-in { height: 100%; background: linear-gradient(90deg, var(--hq-primary), var(--hq-primary-dark)); border-radius: 4px; transition: width .3s; }

.tsu-entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tsu-entry { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; padding: 18px; text-decoration: none; color: var(--hq-text); cursor: pointer; transition: all .15s; }
.tsu-entry:hover { border-color: var(--hq-primary); box-shadow: 0 2px 10px rgba(96,159,255,.12); }
.tsu-entry b { font-size: 15px; }
.tsu-entry span { color: var(--hq-gray); font-size: 12px; }

.tsu-tree-head, .tsu-row { display: flex; align-items: center; gap: 10px; }
.tsu-tree-head { background: var(--hq-panel); border-radius: 6px; padding: 10px 14px; color: var(--hq-gray); font-size: 13px; margin-bottom: 2px; }
.tsu-tree { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; overflow: hidden; }
.tsu-row { padding-top: 12px; padding-bottom: 12px; padding-right: 14px; border-bottom: 1px solid var(--hq-border); }
.tsu-row:last-child { border-bottom: none; }
.tsu-row:hover { background: var(--hq-bg); }
.tsu-toggle { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hq-primary); color: var(--hq-primary); border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; user-select: none; }
.tsu-toggle.empty { border-color: transparent; cursor: default; }
.tsu-name { flex: 1; min-width: 0; font-size: 14px; }
.tsu-name.strong { font-weight: 600; }
.tsu-klevel { display: block; font-size: 12px; color: var(--hq-gray); margin-top: 2px; }
.tsu-klevel .stars, .tsu-paper-meta .stars { color: #ff8f3d; letter-spacing: 2px; }
.tsu-row .col-rate { width: 60px; text-align: center; color: var(--hq-gray); font-size: 13px; }
.tsu-row .col-done { width: 90px; text-align: center; color: var(--hq-gray); font-size: 13px; }
.tsu-row .col-act { width: 76px; text-align: right; }
.tsu-tree-head .col-rate { width: 60px; text-align: center; }
.tsu-tree-head .col-done { width: 90px; text-align: center; }
.tsu-btn { display: inline-block; padding: 6px 20px; background: var(--hq-primary); color: #fff; border-radius: 20px; font-size: 13px; text-decoration: none; cursor: pointer; border: none; }
.tsu-btn:hover { background: var(--hq-primary-dark); }

.tsu-papers { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; overflow: hidden; }
.tsu-paper { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--hq-border); }
.tsu-paper:last-child { border-bottom: none; }
.tsu-paper:hover { background: var(--hq-bg); }
.tsu-paper-icon { width: 40px; height: 40px; flex-shrink: 0; }
.tsu-paper-info { flex: 1; min-width: 0; }
.tsu-paper-name { font-size: 14px; margin-bottom: 4px; }
.tsu-paper-meta { font-size: 12px; color: var(--hq-gray); }

.tsu-records { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; overflow: hidden; }
.tsu-record { padding: 14px 18px; border-bottom: 1px solid var(--hq-border); display: flex; flex-wrap: wrap; align-items: center; }
.tsu-record:last-child { border-bottom: none; }
.tsu-record-name { flex: 1 1 100%; font-size: 14px; margin-bottom: 4px; }
.tsu-record-tag { display: inline-block; font-size: 11px; color: var(--hq-primary); background: var(--hq-panel); border-radius: 3px; padding: 1px 6px; margin-right: 8px; vertical-align: 1px; }
.tsu-record-tag.mock { color: var(--hq-warn); background: #fdf6ec; }
.tsu-record-meta { display: flex; gap: 16px; font-size: 12px; color: var(--hq-gray); flex-wrap: wrap; flex: 1; }
.tsu-record-act { margin-left: auto; }

.tsu-side-card { background: #fff; border: 1px solid var(--hq-border); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.tsu-side-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.tsu-rank-empty { text-align: center; color: var(--hq-gray); font-size: 12px; padding-bottom: 6px; }
.tsu-rank-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 60px; margin-bottom: 10px; }
.tsu-rank-bars i { width: 16px; background: #d7e6ff; border-radius: 2px 2px 0 0; }
.tsu-rank-bars i:nth-child(1) { height: 30px; }
.tsu-rank-bars i:nth-child(2) { height: 52px; background: #b3d1ff; }
.tsu-rank-bars i:nth-child(3) { height: 22px; }
.tsu-today { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; color: var(--hq-text); }
.tsu-today b { font-weight: 600; }

/* 试卷分组头 */
.pq-group-head { background: var(--hq-panel); border-left: 3px solid var(--hq-primary); border-radius: 4px; padding: 10px 14px; margin: 18px 0 10px; }
.pq-group-head b { font-size: 15px; margin-right: 10px; }
.pq-group-head span { color: var(--hq-gray); font-size: 12px; }
.tiku-paper-page .tp-title { display: flex; align-items: center; gap: 14px; }

/* ============ 移动端 ============ */
@media (max-width: 768px) {
  .tiku-wrap { width: 100%; padding: 12px 12px 90px; }
  .tl-layout { flex-direction: column; }
  .tl-side { width: 100%; position: static; }
  .tl-side ul { display: flex; flex-wrap: nowrap; overflow-x: auto; max-height: none; padding: 8px; }
  .tl-side li { white-space: nowrap; border-left: none; border-radius: 4px; }
  .tl-side li.active { border-left: none; }
  .tp-body { flex-direction: column; }
  .q-item { padding: 14px 16px; }
  .tp-actions { display: none; }
  .tp-footer-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--hq-border); padding: 10px 12px; gap: 10px; z-index: 200; }
  .tp-footer-nav .tp-btn { flex: 1; text-align: center; }
  /* 答题卡 -> 底部抽屉 */
  .answer-card { position: fixed; left: 0; right: 0; bottom: 60px; width: 100%; top: auto; z-index: 190; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.1); }
  .answer-card.collapsed { width: 100%; }
  .answer-card .ac-tab { writing-mode: horizontal-tb; position: static; border-radius: 6px; margin: 8px auto 0; display: block; width: 90px; text-align: center; letter-spacing: 0; }
  .answer-card.collapsed .ac-panel { display: none; }
  .answer-card.collapsed .ac-tab { position: static; box-shadow: none; }
  .ac-grid { grid-template-columns: repeat(8, 1fr); max-height: 30vh; }
  .result-panel { gap: 20px; padding: 20px; }
  .rp-cells { gap: 18px; }
  .ts-item { flex-wrap: wrap; }
  /* 科目主页移动端 */
  .tsu-body { flex-direction: column; }
  .tsu-aside { width: 100%; display: flex; gap: 12px; }
  .tsu-side-card { flex: 1; margin-bottom: 0; }
  .tsu-entries { grid-template-columns: repeat(3, 1fr); }
  .tsu-header { flex-wrap: wrap; }
  .tsu-row .col-rate { display: none; }
  .tsu-tree-head .col-rate { display: none; }
  .tsu-row .col-done { width: 76px; }
  .tsu-row .col-act { width: 68px; }
  .tsu-paper { flex-wrap: wrap; }
  .tsu-main{width: 100%;}
}