/* ============================================================
   配色用 CSS 变量（token）统一管理。
   三段式写法是为了同时照顾三种情况：
     1. :root                      → 浅色，默认值，必须写全
     2. @media prefers-color-scheme→ 跟随系统深色
     3. :root[data-theme="dark"]   → 手动切到深色时也生效
   千万别把某个颜色「只」定义在 media 里，那样默认状态会拿不到值。
   ============================================================ */
:root {
  --bg:         #f5f6f9;
  --card:       #ffffff;
  --text:       #171a21;
  --dim:        #5c6472;
  --border:     #e3e6ed;
  --btn:        #eef0f5;
  --panel:      #f0f2f7;
  --accent:     #2b5fd9;
  --accent-ink: #ffffff;   /* 压在 accent 底色上的文字色 */
  --en:         #1b3fa8;   /* 英文目标句 */
  --good:       #1a7f37;
  --bad:        #c0342c;

  /* 字号阶梯，别随手写死数字 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
}

@media (prefers-color-scheme: dark) {
  /* :not([data-theme="light"]) → 用户手动选了浅色时，系统深色不该覆盖他 */
  :root:not([data-theme="light"]) {
    --bg:         #0f1115;
    --card:       #1a1d24;
    --text:       #e8eaed;
    --dim:        #9aa0a6;
    --border:     #2c313a;
    --btn:        #22262e;
    --panel:      #12151b;
    --accent:     #4f8cff;
    --accent-ink: #0b0f18;
    --en:         #8ab4f8;
    --good:       #2ea043;
    --bad:        #ef5350;
  }
}

:root[data-theme="dark"] {
  --bg:         #0f1115;
  --card:       #1a1d24;
  --text:       #e8eaed;
  --dim:        #9aa0a6;
  --border:     #2c313a;
  --btn:        #22262e;
  --panel:      #12151b;
  --accent:     #4f8cff;
  --accent-ink: #0b0f18;
  --en:         #8ab4f8;
  --good:       #2ea043;
  --bad:        #ef5350;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  /* 中文交给系统字体（苹方/微软雅黑），不加载 CJK 网络字体——那玩意好几 MB */
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--fs-md);
  background: var(--bg);          /* 必须显式写，否则会透出宿主页面的底色 */
  color: var(--text);
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;   /* 去掉 iOS 点击时的灰块闪烁 */
}

/* hidden 属性靠浏览器默认的 display:none 生效，
   但下面 #card{display:flex} 优先级更高会盖掉它。
   凡是设过 display 的元素都要补这条，否则 hidden 形同虚设。 */
[hidden] { display: none !important; }

/* ---------- 顶部 ---------- */
header {
  padding: 18px 16px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
h1 { font-size: var(--fs-md); margin: 0; font-weight: 600; letter-spacing: .01em; }
#stats { font-size: var(--fs-xs); color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- 分类：横向滚动条 ---------- */
nav {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav button {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-size: var(--fs-sm);
}
nav button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

main { flex: 1; padding: 0 16px; display: flex; flex-direction: column; }

/* ---------- 卡片 ---------- */
#card, #done, #loadError {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tag {
  font-size: var(--fs-xs);
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: .06em;      /* 小字号标签加点字距才不糊 */
}

.zh {
  font-size: var(--fs-xl);
  line-height: 1.5;
  margin: 0 0 16px;
  font-weight: 500;
  text-wrap: balance;
}

/* 英文是你要念出来的那一句，单独给它一个衬线阅读字体，
   和界面的无衬线拉开层次；Source Serif 加载失败会退回系统衬线。 */
.en {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--en);
}

.note {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--dim);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

/* margin-top:auto 把按钮压到卡片底部，不管上面文字多长位置都固定 */
.actions { margin-top: auto; display: flex; gap: 8px; padding-top: 20px; }
.actions button { white-space: nowrap; }   /* 防止文字折行把布局撑乱 */
.actions .lbl { margin-left: 6px; }

/* 窄屏（iPhone SE / 分屏 / 小安卓机）只留图标，保证一行放得下 */
@media (max-width: 370px) {
  .actions button { padding: 13px 14px; }
  .actions .lbl { display: none; }
}

button {
  font: inherit;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--btn);
  color: var(--text);
  cursor: pointer;
}
button:active { transform: scale(0.97); }        /* 手机上点了要有反馈 */
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); flex: 1; }
button.ghost { background: transparent; border: none; color: var(--dim); font-size: var(--fs-xs); }

.grade { display: flex; gap: 8px; margin-top: 10px; }
.grade button { flex: 1; }
.grade .bad  { border-color: var(--bad); }
.grade .good { border-color: var(--good); }

#feedback {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
#feedback .hit  { color: var(--good); }
#feedback .miss { color: var(--bad); text-decoration: underline wavy; }

#done, #loadError { align-items: center; justify-content: center; gap: 20px; text-align: center; }
.big { font-size: var(--fs-lg); margin: 0; }

footer {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));  /* 避开 iPhone 底部横条 */
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--dim);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  button:active { transform: none; }
}