/* ============================================================
 * style.css —— 英语时文阅读训练
 * 手机竖屏优先，电脑浏览器自适应（内容列最大 600px 居中）
 * ============================================================ */

/* ---------- 变量与重置 ---------- */
:root {
  --orange: #ff7a3c;
  --orange-2: #ff9d4d;
  --blue: #3e8bff;
  --green: #22c55e;
  --red: #ef4444;
  --purple: #8b5cf6;
  --ink: #333a45;
  --ink-light: #8a93a3;
  --bg: #f4f6fa;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 2px 10px rgba(40, 60, 100, .07);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; }
b { font-weight: 700; }

/* ---------- 应用列容器 ---------- */
#app { max-width: 600px; margin: 0 auto; min-height: 100vh; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 6px rgba(40, 60, 100, .08);
}
.topbar-back {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%; background: #f0f2f7;
  font-size: 22px; line-height: 30px; text-align: center;
  color: var(--ink); font-weight: 700;
}
.topbar-back:active { background: #e2e6ee; }
.topbar-title { flex: 1; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { flex: 0 0 auto; }

/* ---------- 页面主体 ---------- */
.page { padding: 14px 14px 30px; }
.page-foot { text-align: center; color: var(--ink-light); font-size: 12px; margin-top: 18px; padding: 0 10px; }
.empty { text-align: center; color: var(--ink-light); padding: 28px 10px; }
.page-pad-bottom { height: 84px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 11px 16px; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  transition: transform .08s, opacity .15s;
  user-select: none;
}
.btn:active { transform: scale(.96); }
.btn.block { display: flex; width: 100%; }
.btn.big { padding: 14px 18px; font-size: 17px; border-radius: 14px; }
.btn.grow { flex: 1; }
.btn.primary { background: linear-gradient(135deg, var(--orange-2), var(--orange)); color: #fff; box-shadow: 0 4px 12px rgba(255, 122, 60, .35); }
.btn.blue { background: linear-gradient(135deg, #5ea0ff, var(--blue)); color: #fff; box-shadow: 0 4px 12px rgba(62, 139, 255, .3); }
.btn.danger { background: linear-gradient(135deg, #f66, var(--red)); color: #fff; box-shadow: 0 4px 12px rgba(239, 68, 68, .3); }
.btn.ghost { background: #eef1f6; color: var(--ink); }
.btn.danger-ghost { background: #fdeeee; color: var(--red); }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row + .btn-row { margin-top: 10px; }

/* ---------- 输入框 ---------- */
.input {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid #e3e7ef; border-radius: 12px;
  font-size: 15px; background: #fbfcfe; color: var(--ink);
  outline: none; margin-top: 8px;
  transition: border-color .15s;
}
.input:focus { border-color: var(--orange); background: #fff; }
textarea.input { resize: vertical; line-height: 1.55; }
.input.mono { font-family: Consolas, Menlo, monospace; font-size: 13px; }
.field-label { display: block; font-weight: 700; font-size: 14px; margin-top: 12px; }
.hint { color: var(--ink-light); font-size: 12.5px; margin-top: 6px; }

/* ---------- 徽章 / 标签 / 圆片 ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.diff-easy { background: #e5f8ec; color: #16a34a; }
.diff-medium { background: #fff1e2; color: #ea8a0c; }
.diff-hard { background: #f3ecff; color: var(--purple); }
.tag-me { background: var(--orange); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.tag-demo { background: #eef1f6; color: var(--ink-light); font-size: 11px; padding: 1px 7px; border-radius: 999px; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chip {
  padding: 7px 15px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600;
  border: 1.5px solid #e3e7ef;
}
.chip.on { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow);
  margin-bottom: 12px;
}

/* ---------- 锁屏 ---------- */
.lock-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(160deg, #ffe9d6 0%, #f4f6fa 45%, #dceaff 100%); }
.lock-card {
  width: 100%; max-width: 380px;
  background: #fff; border-radius: 22px; box-shadow: 0 10px 40px rgba(60, 80, 120, .15);
  padding: 34px 26px; text-align: center;
}
.lock-logo { font-size: 52px; }
.lock-card h1 { font-size: 21px; margin: 8px 0 2px; }
.lock-sub { color: var(--ink-light); font-size: 13px; margin-bottom: 20px; }
.lock-tip { color: var(--red); font-size: 13px; min-height: 20px; margin-top: 10px; }
.lock-foot { color: var(--ink-light); font-size: 12px; margin-top: 8px; }

/* ---------- 顶部横幅 / 统计 / 菜单 ---------- */
.hero {
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
  font-size: 30px;
  box-shadow: var(--shadow);
}
.hero div { display: flex; flex-direction: column; font-size: 15px; }
.hero b { font-size: 16.5px; }
.hero span { color: rgba(40, 50, 70, .65); font-size: 12.5px; }
.hero-orange { background: linear-gradient(120deg, #ffe3cc, #ffd8b0); }
.hero-blue { background: linear-gradient(120deg, #dcebff, #cfe2ff); }

.stat-row { display: flex; gap: 10px; margin-bottom: 12px; }
.stat {
  flex: 1; background: #fff; border-radius: var(--radius);
  text-align: center; padding: 12px 4px; box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 22px; color: var(--orange); }
.stat span { font-size: 12px; color: var(--ink-light); }

.menu { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #fff; border-radius: var(--radius); padding: 14px;
  box-shadow: var(--shadow);
}
.menu-item:active { background: #fafbfd; }
.mi-icon { font-size: 26px; flex: 0 0 auto; }
.mi-text { flex: 1; display: flex; flex-direction: column; }
.mi-text b { font-size: 15.5px; }
.mi-text span { font-size: 12.5px; color: var(--ink-light); }
.mi-arrow { color: #c3c9d4; font-size: 20px; font-weight: 700; }

/* ---------- 文章行 ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-head { color: var(--ink-light); font-size: 13px; margin: 2px 2px 0; }
.list-head b { color: var(--orange); font-size: 15px; }
.article-row {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  margin-bottom: 0;
}
button.article-row { transition: transform .08s; }
button.article-row:active { transform: scale(.98); }
.article-emoji { font-size: 26px; flex: 0 0 auto; }
.article-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.article-title { font-size: 15px; line-height: 1.4; }
.article-meta { font-size: 12px; color: var(--ink-light); }
.article-meta.center { text-align: center; display: block; }
.article-ops { display: flex; gap: 6px; flex: 0 0 auto; }
.done-mark { flex: 0 0 auto; color: var(--green); font-size: 13px; font-weight: 700; }
.go-mark { flex: 0 0 auto; color: var(--orange); font-size: 13px; font-weight: 700; }

/* ---------- 首页：今日任务 + 入口卡片 ---------- */
.task-card {
  background: linear-gradient(135deg, #fff3e6, #ffe8d2);
  border-radius: var(--radius); padding: 15px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.task-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.task-head b { font-size: 15.5px; }
.task-goal { font-size: 12.5px; color: #b0642a; font-weight: 600; }
.bar { height: 12px; background: rgba(255, 255, 255, .8); border-radius: 999px; overflow: hidden; }
.bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange-2), var(--orange));
  transition: width .5s ease;
}
.task-num { font-size: 12.5px; color: #9a6a3d; margin-top: 8px; font-weight: 600; }

.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.entry {
  background: #fff; border-radius: var(--radius); padding: 14px 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: var(--shadow); text-align: center;
}
.entry:active { transform: scale(.96); }
.entry-icon { font-size: 27px; }
.entry b { font-size: 14px; }
.entry-sub { font-size: 10.5px; color: var(--ink-light); line-height: 1.35; }

.board-entry {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: linear-gradient(120deg, #fff6d8, #ffedbe);
  border-radius: var(--radius); padding: 13px 14px; box-shadow: var(--shadow);
}
.board-entry b { font-size: 15.5px; }

/* ---------- 阅读页 ---------- */
.read-card { padding: 16px; }
.read-title { font-size: 19px; line-height: 1.4; margin-bottom: 6px; }
.font-ctrl {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  font-size: 12px; color: var(--ink-light); margin: 8px 0 4px;
}
.read-body p { margin-bottom: 12px; text-align: justify; }
.read-body p:first-letter { }
.actionbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 600px; z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  box-shadow: 0 -2px 12px rgba(40, 60, 100, .1);
}

/* ---------- 答题 / 题目卡片 ---------- */
.qcard { padding: 14px; }
.q-stem { font-size: 15px; line-height: 1.55; margin-bottom: 10px; }
.q-stem b { color: var(--orange); }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid #e3e7ef; background: #fbfcfe;
  font-size: 14.5px; line-height: 1.5; text-align: left; width: 100%;
  transition: border-color .12s, background .12s;
}
.opt:active { border-color: #c9d2e2; }
.opt.selected { border-color: var(--orange); background: #fff3ea; }
.opt.selected .opt-letter { background: var(--orange); color: #fff; border-color: var(--orange); }
.opt.correct { border-color: var(--green); background: #e9f9ef; }
.opt.correct .opt-letter { background: var(--green); border-color: var(--green); color: #fff; }
.opt.wrong { border-color: var(--red); background: #feeeee; }
.opt.wrong .opt-letter { background: var(--red); border-color: var(--red); color: #fff; }
.opt-letter {
  flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid #d4dae5;
  font-size: 12.5px; font-weight: 700; text-align: center; line-height: 21px;
  color: var(--ink-light); background: #fff;
}

/* ---------- 成绩页 ---------- */
.score-hero {
  background: linear-gradient(150deg, #fff, #fff7ef);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-align: center; padding: 22px 14px 18px; margin-bottom: 12px;
}
.score-face { font-size: 46px; animation: pop .45s ease; }
.score-num { font-size: 44px; font-weight: 800; color: var(--orange); line-height: 1.2; }
.score-num small { font-size: 20px; color: var(--ink-light); font-weight: 600; }
.score-words { color: var(--ink-light); font-size: 14px; margin-top: 2px; }
.ans-line { font-size: 14px; margin-top: 6px; }
.ans-bad { color: var(--red); }
.ans-good { color: var(--green); }
.explain {
  background: #f4f7fd; border-radius: 10px; padding: 9px 11px;
  font-size: 13px; color: #4c5a75; margin-top: 10px; line-height: 1.6;
}
.explain b { color: var(--blue); margin-right: 6px; }

/* ---------- 标签页（错题本 / 排行榜） ---------- */
.tabs { display: flex; background: #e9edf4; border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.tab {
  flex: 1; padding: 8px 0; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--ink-light);
}
.tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(40, 60, 100, .12); }

.wrong-group { margin-bottom: 6px; }
.wrong-group-title { font-weight: 700; font-size: 14px; margin: 8px 2px; }
.mastered { color: var(--green); font-weight: 700; font-size: 13.5px; margin-top: 8px; text-align: right; }

/* ---------- 排行榜 ---------- */
.me-card { background: linear-gradient(120deg, #fff3e6, #ffe8d2); }
.board { display: flex; flex-direction: column; gap: 6px; }
.board-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 12px; padding: 9px 12px;
  box-shadow: var(--shadow); font-size: 14px;
}
.board-row.me { background: linear-gradient(120deg, #fff1e3, #ffe7cf); border: 1.5px solid var(--orange); }
.rank { flex: 0 0 30px; text-align: center; font-weight: 800; color: var(--ink-light); }
.bname { flex: 1; font-weight: 600; }
.bnum { flex: 0 0 58px; text-align: right; color: var(--ink-light); font-size: 13px; }
.hint.center { text-align: center; }

/* ---------- 加油站 ---------- */
.quote-card { text-align: center; padding: 26px 18px; }
.quote-date { font-size: 12px; color: var(--ink-light); letter-spacing: .5px; margin-bottom: 14px; }
.quote-en { font-size: 18px; font-weight: 700; line-height: 1.6; color: #2f3b52; }
.quote-zh { margin-top: 12px; font-size: 15px; color: #5a667d; }
.quote-by { margin: 12px 0 18px; font-size: 13px; color: var(--ink-light); }

/* ---------- 编辑表单 ---------- */
.q-edit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.opt-edit { display: flex; align-items: center; gap: 8px; }
.opt-edit .input { margin-top: 6px; }
.radio { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; cursor: pointer; margin-top: 6px; }
.radio b { font-size: 13px; color: var(--ink-light); }
.radio input { width: 18px; height: 18px; accent-color: var(--orange); }
.goal-row { display: flex; gap: 10px; align-items: center; }
.goal-row .input { width: 110px; }
.err-list { margin: 4px 0 4px 18px; color: var(--red); font-size: 13.5px; }

/* ---------- 导入报告 ---------- */
.report-item { border-top: 1px dashed #e6eaf1; padding: 8px 0; font-size: 13.5px; }
.report-item:first-of-type { border-top: none; }
.report-item b { font-size: 13.5px; }
.bad-text { color: var(--red); font-size: 12.5px; }
.warn-text { color: #d97706; font-size: 12.5px; }
.ok-text { color: var(--green); font-size: 12.5px; }
.report.good { border: 1.5px solid #b8ecc9; }
.report.bad { border: 1.5px solid #f6c6c6; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; margin-top: 8px; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.table th, .table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid #eef1f6; }
.table th { color: var(--ink-light); font-weight: 600; }
.table .row-demo td { color: #a8b0bf; }
.td-title { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30, 40, 60, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal {
  width: 100%; max-width: 340px;
  background: #fff; border-radius: 18px; padding: 20px 18px 16px;
  animation: pop .25s ease;
}
.modal-title { font-weight: 800; font-size: 16.5px; text-align: center; margin-bottom: 10px; }
.modal-msg { font-size: 14px; color: #5a667d; text-align: center; }
.modal-msg .hint { text-align: center; }
.modal .input { margin: 4px 0 0; }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns .btn { flex: 1; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(16px);
  z-index: 300; max-width: 82%;
  background: rgba(38, 46, 62, .92); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: rgba(220, 60, 60, .95); }

/* ---------- 撒花 ---------- */
.confetti-box { position: fixed; inset: 0; z-index: 400; overflow: hidden; pointer-events: none; }
.confetti-box i {
  position: absolute; top: -12px; display: block;
  border-radius: 2px; opacity: .95;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(108vh) rotate(680deg); opacity: .7; }
}

/* ---------- 动画 ---------- */
@keyframes pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.shake { animation: shake .4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}

/* ---------- 电脑浏览器适配 ---------- */
@media (min-width: 700px) {
  body { background: linear-gradient(160deg, #fdeedd 0%, #f4f6fa 40%, #e3edfb 100%); }
  .topbar { border-radius: 0; }
  .toast { bottom: 60px; }
}