/* css/style.css —— 响应式：手机=单列+底部tab；电脑(≥900px)=左侧边栏+多列网格 */
:root {
  --green: #5B8A72;
  --blue: #6B7FA3;
  --gold: #E8A000;
  --red: #A05B5B;
  --bg: #FAFAF8;
  --card: #FFFFFF;
  --ink: #2B2B2B;
  --ink-2: #6B6B6B;
  --ink-3: #B0B0B0;
  --line: #ECEAE4;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  --radius: 16px;
  --tabh: 60px;
  --sidew: 230px;
  --maxw: 480px;     /* 手机/窄屏内容列宽 */
  --deskw: 1080px;   /* 电脑内容区最大宽 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; }

/* ============================================================
   手机优先（默认，窄屏）：单列内容 + 底部 tab
   ============================================================ */
#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 16px calc(var(--tabh) + 24px);
  min-height: 100vh;
}

/* 侧边栏默认隐藏（手机不显示） */
.sidebar { display: none; }

/* 底部 tab：默认隐藏，激活后显示 */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--tabh);
  display: none;
  background: #fff;
  border-top: 1px solid var(--line);
  z-index: 50;
}
body.activated .tabbar { display: flex; }
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-3);
  font-size: 12px;
  text-decoration: none;
  user-select: none;
}
.tab .tab-ico { font-size: 20px; line-height: 1; filter: grayscale(1) opacity(0.55); }
.tab.active { color: var(--green); }
.tab.active .tab-ico { filter: none; }

/* ============================================================
   电脑（≥900px）：左侧边栏 + 内容区多列网格
   ============================================================ */
@media (min-width: 900px) {
  body { background: #F4F5F2; }

  /* 侧边栏：激活后才出现 */
  body.activated .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidew);
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 24px 16px;
    z-index: 60;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;
    padding: 6px 12px 24px;
  }
  .brand-ico { font-size: 24px; }
  .snav { display: flex; flex-direction: column; gap: 6px; }
  .snav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink-2);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s;
  }
  .snav-item .ico { font-size: 20px; }
  .snav-item:hover { background: #F4F3EF; }
  .snav-item.active { background: #EEF4F0; color: var(--green); font-weight: 600; }

  /* 电脑端隐藏底部 tab */
  .tabbar { display: none !important; }

  /* 内容区：让出侧边栏宽度，内容居中、加宽 */
  body.activated #app {
    margin-left: var(--sidew);
    max-width: none;
    padding: 32px 40px 48px;
  }
  body.activated #app > * {
    max-width: var(--deskw);
    margin-left: auto;
    margin-right: auto;
  }

  /* 首页改成网格：标题整行，两张试卷并排，统计整行，错题/收藏并排 */
  .page-home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
  }
  .page-home .pt,
  .page-home .ps,
  .page-home .stats-card { grid-column: 1 / -1; }
  .page-home .paper-card,
  .page-home .wrong-card,
  .page-home .link-card { margin-bottom: 0; }
  .page-home .ps { margin-top: -10px; }
}

/* ============================================================
   激活页（手机/电脑通用，居中）
   ============================================================ */
.activate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: 0 8px;
}
.activate-logo { font-size: 64px; margin-bottom: 12px; }
.activate-title { font-size: 24px; font-weight: 700; }
.activate-sub { color: var(--ink-2); margin: 8px 0 28px; }
.activate-input {
  width: 100%;
  max-width: 320px;
  height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 20px;
  letter-spacing: 4px;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.activate-input:focus { border-color: var(--green); }
.activate-btn {
  width: 100%;
  max-width: 320px;
  height: 50px;
  margin-top: 16px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.activate-btn:active { opacity: .85; }
.activate-error { color: #C0392B; min-height: 22px; margin-top: 14px; font-size: 14px; }

/* ============================================================
   首页卡片（手机/电脑共用基础样式）
   ============================================================ */
.pt { font-size: 22px; font-weight: 700; margin-top: 4px; }
.ps { color: var(--ink-2); font-size: 14px; margin: 2px 0 18px; }

.paper-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px 16px;
  margin-bottom: 14px;
  overflow: hidden;
}
.paper-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.paper-title { font-size: 17px; font-weight: 600; }
.paper-sub { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.paper-btns { display: flex; gap: 12px; margin: 14px 0 12px; }
.btn-study, .btn-exam {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}
.btn-study { background: #EEF4F0; color: var(--green); }
.btn-exam { background: #EEF1F6; color: var(--blue); }
.btn-study:active, .btn-exam:active { opacity: .8; }
.btn-study:hover, .btn-exam:hover { filter: brightness(0.97); }

.progress-row { display: flex; align-items: center; gap: 10px; }
.progress-bar { flex: 1; height: 8px; background: #EFEEEA; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.progress-text { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

.stats-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.stats-label { font-size: 15px; font-weight: 600; }
.stats-detail { color: var(--ink-2); font-size: 13px; margin-top: 6px; }

.wrong-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
  overflow: hidden;
}
.wrong-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--red); }
.wrong-header { display: flex; align-items: center; justify-content: space-between; }
.wrong-title { font-size: 16px; font-weight: 600; }
.wrong-badge { background: #FBEAE8; color: var(--red); font-size: 12px; padding: 2px 10px; border-radius: 10px; }
.wrong-sub { color: var(--ink-2); font-size: 13px; margin: 6px 0 12px; }
.wrong-btns { display: flex; gap: 12px; }
.btn-wrong-view, .btn-wrong-test { flex: 1; height: 42px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.btn-wrong-view { background: #F4F3EF; color: var(--ink); }
.btn-wrong-test { background: #FBEAE8; color: var(--red); }
.btn-wrong-view:active, .btn-wrong-test:active { opacity: .8; }

.link-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
}
.link-card:active { opacity: .85; }
.link-card.fav .link-title { color: var(--gold); font-size: 16px; font-weight: 600; }
.link-card.fav .link-sub { color: var(--gold); font-size: 13px; margin-top: 4px; opacity: .85; }

/* ============================================================
   占位页
   ============================================================ */
.stub-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 8px;
}
.stub-ico { font-size: 56px; }
.stub-title { font-size: 20px; font-weight: 700; }
.stub-sub { color: var(--ink-2); font-size: 14px; max-width: 280px; }
.stub-params { color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.stub-back {
  margin-top: 20px;
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* ============================================================
   二级页面通用：页头 / 研习选择 / 答题 / 考试 / 结果 / 列表 / 详情
   ============================================================ */
.page-header { padding: 6px 2px 16px; }
.page-title { font-size: 22px; font-weight: 700; }
.page-sub { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.hint-text { color: var(--ink-3); font-size: 13px; text-align: center; margin: 18px 0; }

/* 研习选择 */
.paper-section {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 16px; margin-bottom: 14px;
}
.section-label { font-size: 16px; font-weight: 600; }
.section-stats { color: var(--ink-2); font-size: 13px; margin: 4px 0 14px; }
.mode-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.mode-btn {
  flex: 1; min-width: 96px; height: 42px; border-radius: 10px;
  background: #F4F3EF; color: var(--ink); font-size: 14px; font-weight: 600;
}
.mode-btn.primary { background: var(--green); color: #fff; }
.mode-btn:active { opacity: .85; }

/* 答题/详情/列表 共用页头（带返回） */
.study-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  height: 48px; margin: -16px -16px 12px; padding: 0 16px;
  background: rgba(250,250,248,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.back-btn { font-size: 15px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.header-title { flex: 1; text-align: center; font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-count { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.fav-btn { font-size: 24px; color: #C0C0C0; cursor: pointer; }
.fav-btn.active { color: var(--gold); }
@media (min-width: 900px) {
  /* 电脑端页头跟随内容区，不顶满整窗 */
  .study-header { margin-left: 0; margin-right: 0; border-radius: 12px 12px 0 0; }
}

.study-body { padding-bottom: 24px; }
.q-meta { display: flex; justify-content: space-between; margin-bottom: 12px; }
.q-num { font-size: 14px; font-weight: 700; }
.q-chapter { font-size: 12px; color: var(--ink-2); }
.q-text { font-size: 16px; line-height: 1.7; margin-bottom: 18px; }

.opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.op-item {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--line); background: #FAFAFA;
  border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: .12s;
}
.op-item:hover { border-color: #D8D6CE; }
.op-item.selected { border-color: var(--green); background: #E8F5EF; }
.op-item.correct { border-color: #4A7C59; background: #F2FBEF; }
.op-item.wrong { border-color: var(--red); background: #FBEFEE; }
.op-key {
  width: 30px; height: 30px; border-radius: 50%; background: #E0E0E0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #666; flex-shrink: 0;
}
.op-item.selected .op-key { background: var(--green); color: #fff; }
.op-item.correct .op-key { background: #4A7C59; color: #fff; }
.op-item.wrong .op-key { background: var(--red); color: #fff; }
.op-text { flex: 1; font-size: 15px; line-height: 1.5; }
.op-icon { margin-left: auto; font-size: 18px; }

.expl { background: #F0F7F4; border-left: 4px solid var(--green); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.expl-title { font-size: 14px; font-weight: 700; color: var(--green); margin-bottom: 8px; }
.expl-content { font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.expl-meta { font-size: 12px; color: var(--ink-2); border-top: 1px solid #D0E0D8; padding-top: 8px; margin-top: 10px; }

.prog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.prog-bar { flex: 1; height: 8px; background: #EFEEEA; border-radius: 4px; overflow: hidden; }
.prog-fill { height: 100%; background: var(--green); border-radius: 4px; transition: width .3s; }
.prog-text { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

.nav-btns { display: flex; gap: 12px; }
.btn-prev { flex: 1; height: 46px; border-radius: 12px; background: #E6E5E0; color: #555; font-size: 15px; font-weight: 600; }
.btn-placeholder { flex: 1; }
.action-btn { flex: 2; height: 46px; border-radius: 12px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; }
.btn-prev:active, .action-btn:active { opacity: .85; }

/* 考试选择 */
.exam-card {
  position: relative; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 16px; margin-bottom: 14px; overflow: hidden; cursor: pointer; border: 2px solid transparent;
}
.exam-card.selected { border-color: var(--green); }
.card-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.card-title { font-size: 16px; font-weight: 600; }
.card-sub { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.start-btn { width: 100%; height: 50px; border-radius: 12px; background: var(--green); color: #fff; font-size: 16px; font-weight: 600; margin-top: 8px; }
.start-btn.disabled { background: #C9C9C5; cursor: not-allowed; }

/* 考试计时 */
.exam-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.timer { font-size: 22px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.timer.warn { color: #C0392B; }
.exam-progress { font-size: 14px; color: var(--ink-2); }

/* 考试结果 */
.result-wrap { text-align: center; padding-top: 12px; }
.result-icon { font-size: 56px; }
.result-title { font-size: 20px; font-weight: 700; margin: 8px 0 18px; }
.result-card { display: inline-block; min-width: 200px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 28px; }
.result-card.pass { border-top: 4px solid var(--green); }
.result-card.fail { border-top: 4px solid var(--red); }
.result-badge { font-size: 14px; font-weight: 600; }
.result-badge.pass { color: var(--green); }
.result-badge.fail { color: var(--red); }
.result-pct { font-size: 44px; font-weight: 800; margin: 6px 0; }
.result-pct.pass { color: var(--green); }
.result-pct.fail { color: var(--red); }
.result-detail { color: var(--ink-2); font-size: 14px; }
.result-note { font-size: 14px; margin: 14px 0; }
.result-note.pass { color: var(--green); }
.result-note.fail { color: var(--red); }
.stats-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 18px; }
.stat-item { font-size: 14px; padding: 8px 16px; border-radius: 10px; }
.stat-item.ok { background: #EEF4F0; color: var(--green); }
.stat-item.ng { background: #FBEAE8; color: var(--red); }

.review-section { text-align: left; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 16px; }
.review-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.review-title { font-size: 15px; font-weight: 600; }
.review-toggle { font-size: 13px; color: var(--ink-2); }
.review-list { margin-top: 12px; }
.review-item { border-top: 1px solid var(--line); padding: 14px 0; }
.review-q-header { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 6px; }
.review-num { font-weight: 700; font-size: 14px; }
.review-answer-info { font-size: 13px; color: var(--ink-2); }
.wrong-text { color: var(--red); font-weight: 600; }
.correct-text { color: var(--green); font-weight: 600; }
.review-q-text { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.review-opts { display: flex; flex-direction: column; gap: 6px; }
.review-opt { display: flex; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #FAFAFA; font-size: 13px; }
.review-opt.correct { background: #F2FBEF; }
.review-opt.wrong { background: #FBEFEE; }
.review-opt-key { font-weight: 700; }
.review-expl { margin-top: 10px; background: #F0F7F4; border-radius: 8px; padding: 10px 12px; }
.review-expl-title { font-size: 13px; font-weight: 700; color: var(--green); margin-bottom: 4px; }
.review-expl-content { font-size: 13px; line-height: 1.7; white-space: pre-wrap; }

.btn-primary { width: 100%; height: 48px; border-radius: 12px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.btn-secondary { width: 100%; height: 48px; border-radius: 12px; background: #E6E5E0; color: #555; font-size: 15px; font-weight: 600; }
.btn-primary:active, .btn-secondary:active { opacity: .85; }

/* 错题测试结果 */
.wr-stats-row { display: flex; gap: 14px; margin-bottom: 16px; }
.stat-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 0; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.stat-box.correct { color: var(--green); }
.stat-box.wrong { color: var(--red); }
.stat-label { font-size: 13px; }
.stat-num { font-size: 32px; font-weight: 800; }
.stat-unit { font-size: 12px; }
.remove-notice { background: #F0F7F4; color: var(--green); font-size: 13px; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; }
.empty-review { text-align: center; color: var(--green); font-size: 15px; padding: 30px 0; }
.action-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.btn-retest { height: 48px; border-radius: 12px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; }
.btn-home { height: 48px; border-radius: 12px; background: #E6E5E0; color: #555; font-size: 15px; font-weight: 600; }
.review-item-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.review-content { display: flex; flex-direction: column; gap: 2px; }
.review-text { font-size: 14px; }
.review-chapter { font-size: 12px; color: var(--ink-2); }

/* 列表（错题本/收藏） */
.practice-bar { display: flex; align-items: center; gap: 10px; background: #EEF4F0; color: var(--green); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; cursor: pointer; font-weight: 600; }
.practice-arrow { margin-left: auto; }
.q-item { display: flex; align-items: stretch; gap: 10px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.q-item-main { flex: 1; min-width: 0; }
.q-item .q-num { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.q-item .q-text { font-size: 14px; line-height: 1.5; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-delete { display: flex; align-items: center; color: var(--ink-3); font-size: 16px; padding: 0 4px; }
.q-delete:hover { color: var(--red); }
.empty { text-align: center; color: var(--ink-3); padding: 60px 0; white-space: pre-line; }

/* 详情 */
.q-answer { font-size: 14px; font-weight: 600; color: var(--green); margin: 14px 0; }
.remove-btn { width: 100%; height: 46px; border-radius: 12px; background: #FBEAE8; color: var(--red); font-size: 15px; font-weight: 600; margin-top: 8px; }

/* 列表/详情/答题在电脑端限定阅读宽度并居中 */
@media (min-width: 900px) {
  .list-body, .study-body, .result-wrap { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   Toast / Modal（替代 wx.showToast / wx.showModal）
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(10px);
  background: rgba(0,0,0,.82); color: #fff; font-size: 14px; padding: 10px 18px; border-radius: 10px;
  z-index: 1000; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 80vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1001; }
.modal { width: 300px; max-width: 86vw; background: #fff; border-radius: 16px; overflow: hidden; }
.modal-title { font-size: 16px; font-weight: 700; text-align: center; padding: 20px 16px 8px; }
.modal-content { font-size: 14px; color: var(--ink-2); text-align: center; padding: 0 16px 20px; }
.modal-btns { display: flex; border-top: 1px solid var(--line); }
.modal-cancel, .modal-ok { flex: 1; height: 48px; background: #fff; font-size: 15px; }
.modal-cancel { color: var(--ink-2); border-right: 1px solid var(--line); }
.modal-ok { color: var(--green); font-weight: 600; }