/* =====================================================================
   英语学习 —— 页面样式
   ---------------------------------------------------------------------
   配色、字体、卡片布局全部沿用原《英语学习.html》：宋体正文、Times New Roman
   英文、米色纸张底、红/蓝/灰三色分类。它是照着纸质书的观感做的，换成控制台的
   深空配色反而会削弱"在读书"的感觉，所以这里只把它装进玄云的外壳，不改内在。

   所有类名一律加 `en-` 前缀、并且限定在 `#english` 里。原文件用的是 .card /
   .tab / .btn / .grid / .stats 这类通用名，直接搬进来会和 app.css 全面撞车
   （实测 .card 一撞，整页卡片会同时套上两套内边距和阴影）。
   ===================================================================== */

/* ---------------------------------------------------------------------
   颜色全部从 app.css 的全局 token 派生（v6 改版第 18 项）。
   原来这里写死了 9 个变量 + 全文散落 60 多处 #fff / #333 / #ddd，
   结果切到深色主题时这一页还是白底黑字，晚上打开直接闪眼。

   保留的是**排版**：宋体正文、Times New Roman 英文、pt 字号、纸张卡片。
   那是"在读一本书"的观感，是这一页的设计意图，不该被换掉。
   换掉的只是**色值**：现在跟着站点主题走，且全部过 WCAG AA。
   --------------------------------------------------------------------- */
#english .en-paper {
  /* 三色词类：映射到站点语义色，不再自成一套高饱和红蓝 */
  --en-red:         var(--red);      /* 必考词 */
  --en-red-light:   var(--red-wash);
  --en-blue:        var(--violet);   /* 基础词 */
  --en-blue-light:  var(--violet-wash);
  --en-gray:        var(--muted);    /* 超纲词 */
  --en-gold:        var(--gold);     /* 熟词僻义 */
  --en-gold-light:  var(--gold-wash);
  --en-green:       var(--jade);     /* 认识 / 真题来源 */
  --en-green-light: var(--jade-wash);

  /* 纸面：比控制台卡片再亮/暗一档，让"一页纸"有边界感 */
  --en-bg:    var(--bg-soft);
  --en-card:  var(--surface);
  --en-soft:  var(--wash);
  --en-line:  var(--line);

  /* 文字三档，跟全站一致 */
  --en-ink:   var(--ink);
  --en-ink-2: var(--ink-2);
  --en-dim:   var(--muted);

  /* 压在语义色实底上的文字。浅色主题下语义色都是深色，配亮字；
     深色主题下语义色被提亮了，必须配深字，否则亮底亮字看不见。 */
  --en-on-accent: var(--surface);

  /* 划重点的荧光笔 */
  --en-mark:      var(--gold-wash);
  --en-mark-ink:  var(--gold);

  background: var(--en-bg);
  color: var(--en-ink);
  border-radius: var(--r);
  padding: 22px 18px 34px;
  /* 纸张边界：1px 细线，不用外阴影（全站规则：不许发光/重阴影） */
  border: 1px solid var(--en-line);
  box-shadow: none;
  font-family: "SimSun", "宋体", serif;
  font-size: 12pt;
  line-height: 1.6;
}
/* 深色主题下语义色是提亮版（如 --red = #dd94a2），压在上面的字必须变深 */
html[data-theme="dark"] #english .en-paper { --en-on-accent: var(--bg); }

#english .en-paper * { box-sizing: border-box; }

/* ---------------------------------------------------------- 头部与视图切换 */
#english .en-title {
  font-family: "SimSun", "宋体", serif;
  font-size: 20pt; text-align: center; color: var(--en-red); margin: 0 0 4px;
}
#english .en-sub { text-align: center; color: var(--en-dim); font-size: 10.5pt; margin-bottom: 10px; }

#english .en-views {
  max-width: 900px; margin: 0 auto 18px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
#english .en-view-btn {
  font-size: 12pt; font-family: "SimSun", "宋体", serif;
  border: 1px solid var(--en-line); background: var(--en-card); border-radius: 10px;
  padding: 8px 20px; cursor: pointer; color: var(--en-ink-2);
  display: flex; align-items: center; gap: 6px;
}
#english .en-view-btn:hover { border-color: var(--en-red); color: var(--en-red); }
#english .en-view-btn.active { background: var(--en-red); color: var(--en-on-accent); border-color: var(--en-red); }

/* ---------------------------------------------------------------- 工具条 */
#english .en-toolbar {
  max-width: 900px; margin: 0 auto 18px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center;
  background: var(--en-card); padding: 12px 16px; border-radius: 10px;
  box-shadow: none;
  /* 原文件里工具条是 sticky 的。这里粘在控制台内容区的顶部，
     top 取 0 而不是 8px：外面已经有一层页面内边距了 */
  position: sticky; top: 0; z-index: 5;
}
#english .en-toolbar input[type="text"],
#english .en-toolbar input[type="number"] {
  font-size: 12pt; padding: 6px 10px; border: 1px solid var(--en-line); border-radius: 6px;
  background: var(--en-card); color: var(--en-ink); font-family: "SimSun", "宋体", serif;
}
#english .en-toolbar input[type="text"] { flex: 1; min-width: 160px; }
#english .en-tab {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--en-line); background: var(--en-card);
  cursor: pointer; font-size: 11pt; color: var(--en-ink-2); user-select: none;
}
#english .en-tab.active[data-cat="全部"]   { background: var(--en-ink);          color: var(--en-on-accent); border-color: var(--en-ink); }
#english .en-tab.active[data-cat="必考词"] { background: var(--en-red);  color: var(--en-on-accent); border-color: var(--en-red); }
#english .en-tab.active[data-cat="基础词"] { background: var(--en-blue); color: var(--en-on-accent); border-color: var(--en-blue); }
#english .en-tab.active[data-cat="超纲词"] { background: var(--en-gray); color: var(--en-on-accent); border-color: var(--en-gray); }
#english .en-tab.active[data-gcat],
#english .en-tab.active[data-wcat] { background: var(--en-gold); color: var(--en-on-accent); border-color: var(--en-gold); }
#english .en-toggle {
  font-size: 11pt; color: var(--en-ink-2); display: flex; align-items: center; gap: 6px; cursor: pointer;
}

/* ------------------------------------------------------------ 日程与统计 */
#english .en-daynav {
  max-width: 900px; margin: 0 auto 10px;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap; font-size: 11pt; color: var(--en-ink-2);
}
#english .en-daynav button {
  font-size: 11pt; border: 1px solid var(--en-line); background: var(--en-card); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-family: "SimSun", "宋体", serif; color: var(--en-ink-2);
}
#english .en-daynav button:hover { border-color: var(--en-red); color: var(--en-red); }
/* 背景和文字色必须写死：app.css 给全站 input 配的是深色控制台的配色，
   落在这张浅色纸上就是深灰底 + 深灰字，实测几乎看不见自己输了什么。 */
#english .en-daynav input {
  width: 78px; font-size: 11pt; padding: 4px 6px; border: 1px solid var(--en-line); border-radius: 6px;
  background: var(--en-card); color: var(--en-ink); font-family: "SimSun", "宋体", serif;
}
#english .en-daylabel { font-weight: bold; color: var(--en-red); }
#english .en-rangelabel { color: var(--en-dim); font-size: 10pt; }
#english .en-stats { max-width: 900px; margin: 0 auto 14px; text-align: center; font-size: 11pt; color: var(--en-ink-2); }
#english .en-syncnote {
  max-width: 900px; margin: 0 auto 12px; text-align: center; font-size: 10pt;
  color: var(--en-gold); background: var(--en-gold-light); border-radius: var(--r-sm); padding: 5px 10px;
}
#english .en-syncnote:empty { display: none; }

/* -------------------------------------------------------------- 卡片通用 */
#english .en-grid {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
#english .en-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
#english .en-card {
  background: var(--en-card); border-radius: 10px; padding: 14px 16px;
  box-shadow: none;
  border-left: 5px solid var(--en-gray); position: relative; transition: opacity .2s;
}
#english .en-card[data-cat="必考词"] { border-left-color: var(--en-red); }
#english .en-card[data-cat="基础词"] { border-left-color: var(--en-blue); }
#english .en-card[data-cat="超纲词"] { border-left-color: var(--en-gray); }
#english .en-card.mastered { opacity: .45; }
#english .en-idx { font-size: 9pt; color: var(--en-dim); }
#english .en-today {
  display: inline-block; font-size: 9pt;   /* 9pt=12px，全站字号下限 */ background: var(--en-mark); color: var(--en-mark-ink);
  border-radius: 8px; padding: 1px 7px; margin-left: 6px;
}
#english .en-badge {
  display: inline-block; font-size: 9pt;   /* 9pt=12px，全站字号下限 */ border-radius: var(--r-sm); padding: 1px 7px;
  margin-left: 6px; color: var(--en-on-accent); background: var(--en-gold);
}
#english .en-badge[data-cat="必考词"] { background: var(--en-red); }
#english .en-badge[data-cat="基础词"] { background: var(--en-blue); }
#english .en-badge[data-cat="超纲词"] { background: var(--en-gray); }

/* -------------------------------------------------------------- 单词卡片 */
#english .en-word {
  font-family: "Times New Roman", Times, serif;
  font-size: 16pt; font-weight: bold; color: var(--en-ink); margin: 4px 0 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#english .en-speak {
  font-size: 13pt; line-height: 1; border: none; background: none; cursor: pointer;
  color: var(--en-blue); padding: 2px 4px; border-radius: 6px; flex-shrink: 0;
}
#english .en-speak:hover { background: var(--en-blue-light); }
#english .en-speak:active { transform: scale(.9); }
#english .en-meaning {
  font-family: "SimSun", "宋体", serif; font-size: 12pt; line-height: 1.5; color: var(--en-ink);
  white-space: pre-line;
}
#english .en-meaning.blurred { filter: blur(6px); user-select: none; cursor: pointer; }
#english .en-roots {
  font-family: "SimSun", "宋体", serif; font-size: 10.5pt; color: var(--en-gold);
  background: var(--en-gold-light); border-radius: 6px; padding: 4px 8px; margin: 6px 0 2px;
}
#english .en-actions { margin-top: 8px; display: flex; gap: 8px; }
#english .en-btn {
  font-size: 9.5pt; border: 1px solid var(--en-line); background: var(--en-card); border-radius: 6px;
  padding: 3px 9px; cursor: pointer; font-family: "SimSun", "宋体", serif;
}
#english .en-btn.know          { color: var(--en-green); }
#english .en-btn.know.active   { background: var(--en-green); color: var(--en-on-accent); border-color: var(--en-green); }
#english .en-btn.unsure        { color: var(--en-red); }
#english .en-btn.unsure.active { background: var(--en-red); color: var(--en-on-accent); border-color: var(--en-red); }

/* -------------------------------------------------------------- 语法卡片 */
#english .en-g-title { font-size: 13pt; font-weight: bold; color: var(--en-ink); margin: 4px 0 8px; }
#english .en-g-explain { font-size: 11.5pt; color: var(--en-ink); line-height: 1.6; margin-bottom: 8px; }
#english .en-example { background: var(--en-soft); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
#english .en-example .en-en {
  font-family: "Times New Roman", Times, serif; font-size: 12.5pt; color: var(--en-ink);
  display: flex; align-items: center; gap: 6px;
}
#english .en-example .en-zh {
  font-family: "SimSun", "宋体", serif; font-size: 11pt; color: var(--en-ink-2); margin-top: 3px;
}
#english .en-src {
  font-size: 9pt;   /* 9pt=12px，全站字号下限 */ border-radius: var(--r-sm); padding: 1px 7px; margin-left: auto;
  font-family: "SimSun", "宋体", serif; flex-shrink: 0;
}
#english .en-src.real { background: var(--en-green-light); color: var(--en-green); }
#english .en-src.sup  { background: var(--en-soft);    color: var(--en-dim); }
#english .en-tips {
  font-size: 10.5pt; color: var(--en-gold); background: var(--en-gold-light);
  border-radius: 6px; padding: 6px 10px; margin-top: 6px;
}

/* ------------------------------------------------------------ 长难句卡片 */
#english .en-sentence {
  font-family: "Times New Roman", Times, serif; font-size: 13pt; line-height: 1.5; color: var(--en-ink);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
#english .en-toggle-btn {
  font-size: 10.5pt; color: var(--en-blue); background: none; border: 1px solid var(--en-blue);
  border-radius: 6px; padding: 3px 10px; cursor: pointer; margin-top: 8px;
  font-family: "SimSun", "宋体", serif;
}
#english .en-detail { margin-top: 8px; display: none; }
#english .en-detail.open { display: block; }
#english .en-label { font-size: 10pt; color: var(--en-dim); margin-top: 8px; }
#english .en-text { font-size: 11.5pt; color: var(--en-ink); line-height: 1.6; white-space: pre-line; }
#english .en-text.zh { font-family: "SimSun", "宋体", serif; }
#english .en-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
#english .en-tag {
  font-size: 9.5pt; background: var(--en-red-light); color: var(--en-red);
  border-radius: 10px; padding: 2px 9px; cursor: pointer;
}
#english .en-card.flash { box-shadow: 0 0 0 3px var(--en-red); }

/* -------------------------------------------------------------- 作文卡片 */
#english .en-essay {
  font-family: "Times New Roman", Times, serif; font-size: 12pt; color: var(--en-ink); line-height: 1.7;
  white-space: pre-line; background: var(--en-soft); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px;
}
#english .en-template {
  font-family: "Times New Roman", Times, serif; font-size: 11.5pt; color: var(--en-ink); background: var(--en-soft);
  border-radius: 6px; padding: 8px 10px; white-space: pre-line; line-height: 1.6; margin-bottom: 6px;
}

#english .en-more { text-align: center; color: var(--en-dim); font-size: 10pt; padding: 14px 0; }
#english .en-foot { text-align: center; color: var(--en-dim); font-size: 9pt; margin-top: 30px; }

/* ------------------------------------------------------------------ 窄屏 */
@media (max-width: 600px) {
  #english .en-paper { padding: 14px 10px 24px; }
  #english .en-title { font-size: 16pt; }
  #english .en-word { font-size: 14pt; }
  #english .en-toolbar { padding: 8px 10px; gap: 6px; }
  #english .en-grid { grid-template-columns: 1fr; }
}