/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 词卡学习样式
   字号一律用全站令牌（--fs-1 ~ --fs-9）。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. 页签 ═══════ */
.wc-tabs {
  display: flex; gap: calc(4 * var(--u));
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--glass-line);
}
.wc-tab {
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-3); font-weight: 700;
  color: var(--ink-4);
  border-bottom: 2px solid transparent;
  transition: color .16s var(--e-out), border-color .16s var(--e-out);
}
.wc-tab:hover { color: var(--ink-2); }
.wc-tab.on { color: var(--acc); border-bottom-color: var(--acc); }

/* ═══════ 2. 词卡舞台 ═══════ */
.wc-stage {
  max-width: calc(720 * var(--u));
  margin: 0 auto;
}
.wc-progress {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  margin-bottom: calc(11 * var(--u));
  font-size: var(--fs-2); color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.wc-bar {
  flex: 1 1 auto; height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--n-800); overflow: hidden;
}
.wc-bar i {
  display: block; height: 100%;
  background: var(--acc);
  transition: width .3s var(--e-out);
}
.wc-bar.big { height: calc(6 * var(--u)); }
.wc-src {
  font-size: var(--fs-1); color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(150 * var(--u));
}

.wc-card {
  position: relative;
  border: 1px solid var(--glass-line-2);
  border-radius: calc(14 * var(--u));
  background: var(--n-850);
  padding: calc(26 * var(--u)) calc(22 * var(--u));
  cursor: pointer;
  min-height: calc(150 * var(--u));
  transition: border-color .18s var(--e-out);
}
.wc-card:hover { border-color: var(--acc); }
.wc-card.flipped { border-color: color-mix(in srgb, var(--acc) 50%, var(--glass-line-2)); }

.wc-front { text-align: center; }
.wc-word {
  font-size: var(--fs-9);
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: calc(-.6 * var(--u));
  line-height: 1.15;
  font-family: var(--font-en, inherit);
}
.wc-meta {
  margin-top: calc(7 * var(--u));
  display: flex; align-items: center; justify-content: center;
  gap: calc(10 * var(--u));
}
.wc-ipa {
  font-size: var(--fs-3); color: var(--acc);
  font-family: var(--font-en, inherit);
}
.wc-pos {
  font-size: var(--fs-2); font-style: italic; color: var(--ink-4);
  padding: 0 calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--n-800);
}
.wc-state {
  display: inline-block;
  margin-top: calc(9 * var(--u));
  font-size: var(--fs-1); font-weight: 700;
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(5 * var(--u));
}
.wc-state.known {
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 14%, transparent);
}
.wc-state.shaky {
  color: var(--c-rose);
  background: color-mix(in srgb, var(--c-rose) 14%, transparent);
}
.wc-hint {
  margin-top: calc(14 * var(--u));
  font-size: var(--fs-2); color: var(--ink-4);
}

/* 背面 */
.wc-back {
  margin-top: calc(20 * var(--u));
  padding-top: calc(16 * var(--u));
  border-top: 1px solid var(--glass-line);
  display: flex; flex-direction: column; gap: calc(9 * var(--u));
}
.wc-cn {
  font-size: var(--fs-6); font-weight: 700; color: var(--ink-1);
  line-height: 1.35;
}
.wc-cn-none {
  font-size: var(--fs-4); font-weight: 600; color: var(--ink-4);
}
.wc-cn-none span {
  display: block;
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-2); font-weight: 400; color: var(--ink-4);
}
.wc-tone, .wc-use, .wc-pit {
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
}
.wc-tone b, .wc-use b, .wc-pit b, .wc-samples > b, .wc-colloc b {
  display: inline-block; margin-right: calc(6 * var(--u));
  color: var(--c-amber); font-weight: 800; font-size: var(--fs-2);
}
.wc-pit b { color: var(--c-rose); }
.wc-colloc code {
  font-family: var(--font-en, inherit);
  font-size: var(--fs-3); font-weight: 700;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  padding: calc(1 * var(--u)) calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
}
.wc-samples { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.wc-samp {
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  border-left: 2px solid var(--glass-line-2);
  background: var(--n-800);
}
.wc-samp-en {
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-1);
  font-family: var(--font-en, inherit);
}
.wc-samp-cn {
  margin-top: calc(3 * var(--u));
  font-size: var(--fs-2); color: var(--ink-3);
}
.wc-samp-src {
  margin-top: calc(3 * var(--u));
  font-size: var(--fs-1); color: var(--ink-4);
}
.wc-tags { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.wc-tag {
  font-size: var(--fs-1);
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--n-800);
  color: var(--ink-4);
  border: 1px solid var(--glass-line);
}

/* ═══════ 3. 操作按钮 ═══════ */
.wc-actions {
  display: flex; gap: calc(9 * var(--u));
  margin-top: calc(13 * var(--u));
}
.wc-btn {
  flex: 1 1 0;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid var(--glass-line-2);
  background: var(--n-850);
  font-family: inherit;
  font-size: var(--fs-3); font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .16s var(--e-out), border-color .16s var(--e-out), color .16s var(--e-out);
}
.wc-btn:hover { border-color: var(--acc); color: var(--ink-1); }
.wc-shaky:hover {
  border-color: var(--c-rose);
  background: color-mix(in srgb, var(--c-rose) 12%, transparent);
  color: var(--c-rose);
}
.wc-known:hover {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc);
}
.wc-flip { flex: 1.3 1 0; }

.wc-empty {
  padding: calc(40 * var(--u));
  text-align: center; color: var(--ink-4);
  font-size: var(--fs-4);
}

/* ═══════ 4. 筛选栏 ═══════ */
.wc-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u));
  margin-bottom: calc(11 * var(--u));
}
.wc-search {
  flex: 1 1 calc(240 * var(--u));
  min-width: calc(180 * var(--u));
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--glass-line-2);
  background: var(--n-850);
  color: var(--ink-1);
  font-family: inherit; font-size: var(--fs-3);
}
.wc-search::placeholder { color: var(--ink-4); }
.wc-search:focus { outline: none; border-color: var(--acc); }
.wc-sel {
  padding: calc(8 * var(--u)) calc(9 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--glass-line-2);
  background: var(--n-850);
  color: var(--ink-2);
  font-family: inherit; font-size: var(--fs-3);
}
.wc-fbtns { display: flex; gap: calc(4 * var(--u)); }
.wc-fb {
  padding: calc(7 * var(--u)) calc(11 * var(--u));
  border-radius: calc(7 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  font-family: inherit; font-size: var(--fs-2); font-weight: 700;
  color: var(--ink-4);
  cursor: pointer;
}
.wc-fb.on {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc);
}
.wc-count {
  font-size: var(--fs-2); color: var(--ink-4);
  margin-bottom: calc(8 * var(--u));
  font-variant-numeric: tabular-nums;
}

/* ═══════ 5. 词表 ═══════ */
.wc-table {
  border: 1px solid var(--glass-line);
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}
.wc-tr {
  display: grid;
  grid-template-columns: minmax(calc(160 * var(--u)), 1.4fr) minmax(calc(110 * var(--u)), 1fr) minmax(calc(120 * var(--u)), 1.6fr) calc(52 * var(--u)) calc(56 * var(--u)) calc(62 * var(--u));
  gap: calc(9 * var(--u));
  align-items: center;
  padding: calc(7 * var(--u)) calc(11 * var(--u));
  border-bottom: 1px solid var(--glass-line);
  font-size: var(--fs-2);
}
.wc-tr:last-child { border-bottom: none; }
.wc-tr:not(.wc-th):hover { background: var(--hover); cursor: pointer; }
.wc-th {
  background: var(--n-800);
  font-weight: 700; color: var(--ink-4);
  font-size: var(--fs-1);
  letter-spacing: calc(.2 * var(--u));
}
.wc-c1 { display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0; }
.wc-c1 b {
  font-size: var(--fs-3); font-weight: 700; color: var(--ink-1);
  font-family: var(--font-en, inherit);
}
.wc-c1 em {
  font-style: normal; font-size: var(--fs-1); color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-c2 { display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0; }
.wc-c2 i {
  font-style: normal; font-size: var(--fs-2); color: var(--acc);
  font-family: var(--font-en, inherit);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-c2 u {
  text-decoration: none; font-size: var(--fs-1); color: var(--ink-4);
  font-style: italic;
}
.wc-c3 {
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-c4 {
  color: var(--ink-4); font-variant-numeric: tabular-nums; text-align: right;
}
.wc-c5, .wc-c6 { text-align: right; }
.wc-pri {
  display: inline-block;
  font-style: normal; font-weight: 800;
  font-size: var(--fs-1);
  padding: calc(1 * var(--u)) calc(5 * var(--u));
  border-radius: calc(4 * var(--u));
}
.wc-pri-P0 { color: var(--c-rose); background: color-mix(in srgb, var(--c-rose) 16%, transparent); }
.wc-pri-P1 { color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 16%, transparent); }
.wc-pri-P2 { color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.wc-pri-P3 { color: var(--ink-4); background: var(--n-800); }
.wc-st {
  display: inline-block; font-style: normal;
  font-size: var(--fs-1); font-weight: 700; color: var(--ink-4);
}
.wc-st.known { color: var(--acc); }
.wc-st.shaky { color: var(--c-rose); }

/* ═══════ 6. 统计 ═══════ */
.wc-stat-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(160 * var(--u)), 1fr));
  gap: calc(9 * var(--u));
  margin-bottom: var(--sp-4);
}
.wc-stat-big {
  padding: calc(13 * var(--u)) calc(15 * var(--u));
  border-radius: calc(11 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
}
.wc-stat-big b {
  display: block;
  font-size: var(--fs-8); font-weight: 800; color: var(--acc);
  letter-spacing: calc(-.6 * var(--u));
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.wc-stat-big span {
  display: block;
  margin-top: calc(3 * var(--u));
  font-size: var(--fs-2); color: var(--ink-4);
}
.wc-stat-big .wc-bar { margin-top: calc(8 * var(--u)); }

.wc-pri-rows { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.wc-pri-row {
  display: grid;
  grid-template-columns: calc(44 * var(--u)) calc(72 * var(--u)) 1fr calc(80 * var(--u));
  gap: calc(9 * var(--u));
  align-items: center;
  font-size: var(--fs-2); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wc-pri-row b { color: var(--ink-2); font-weight: 700; }
.wc-pri-row > span:last-child { text-align: right; color: var(--ink-4); }

.wc-pos-rows { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.wc-poschip {
  font-size: var(--fs-2);
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--n-850);
  border: 1px solid var(--glass-line);
  color: var(--ink-3);
}
.wc-poschip b { color: var(--acc); font-weight: 800; margin-left: calc(4 * var(--u)); }

.wc-srcbox { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.wc-srcrow {
  display: flex; flex-wrap: wrap; gap: calc(9 * var(--u));
  align-items: baseline;
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-800);
  font-size: var(--fs-2); color: var(--ink-4);
}
.wc-srcrow b {
  color: var(--acc); font-weight: 800;
  text-transform: uppercase; letter-spacing: calc(.3 * var(--u));
}
.wc-srcrow span:first-of-type { color: var(--ink-3); }
.wc-pass-note {
  margin-top: var(--sp-4);
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: var(--u);
  border: 1px solid var(--glass-line);
  background: var(--n-800);
  font-size: var(--fs-2);
  line-height: calc(16 * var(--u));
  color: var(--ink-4);
}

/* ═══════ 7. 窄屏 ═══════ */
@media (max-width: 760px) {
  .wc-actions { flex-direction: column; }
  .wc-tr {
    grid-template-columns: 1fr auto auto;
    gap: calc(6 * var(--u));
  }
  .wc-c2, .wc-c3 { grid-column: 1 / -1; }
  .wc-th { display: none; }
  .wc-pri-row {
    grid-template-columns: calc(40 * var(--u)) 1fr calc(70 * var(--u));
  }
  .wc-pri-row > span:first-of-type { display: none; }
}

/* 英文释义（词典来源）—— 比中文释义小一号，因为它是补充不是主释义 */
.wc-cn-en {
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.45;
}
.wc-cn-en b { color: var(--ink-1); font-weight: 700; }