/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 词汇本样式
   ───────────────────────────────────────────────────────────────────
   这一页要在两种状态下都好用：
     · 浏览态 —— 信息密度优先，条目要能快速扫读
     · 抽背态 —— 干扰最少，答案要能真正被「遮住」
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. 顶层页签 ═══════ */
.vb-tabs-top {
  display: flex; gap: calc(6 * var(--u));
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.vb-topt {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(2 * var(--u));
  padding: calc(9 * var(--u)) calc(15 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  color: var(--ink-3);
  font-family: inherit;
  transition: border-color .16s var(--e-out), background .16s var(--e-out);
}
.vb-topt:hover { border-color: var(--glass-line-2); }
.vb-topt.on {
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  border-color: var(--acc);
  color: var(--ink-1);
}
.vb-topt { font-size: var(--fs-5); font-weight: 700; }
.vb-topt em {
  font-style: normal; font-size: var(--fs-2); font-weight: 500;
  color: var(--ink-4);
}
.vb-topt.on em { color: var(--ink-3); }

/* ═══════ 2. 统计条 ═══════ */
.vb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  margin-bottom: var(--sp-4);
}
.vb-stat {
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(11 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
}
.vb-stat b {
  display: block;
  font-size: var(--fs-7); font-weight: 800; line-height: calc(23 * var(--u));
  color: var(--ink); letter-spacing: calc(-.4 * var(--u));
  font-variant-numeric: tabular-nums;
}
.vb-stat span {
  display: block; margin-top: calc(1 * var(--u));
  font-size: var(--fs-2); color: var(--ink-4);
}

/* ═══════ 3. 模块筛选 ═══════ */
.vb-tabs {
  display: flex; flex-wrap: wrap; gap: calc(6 * var(--u));
  margin-bottom: var(--sp-4);
}
.vb-tab {
  display: inline-flex; align-items: baseline; gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: calc(999 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  color: var(--ink-3);
  font-family: inherit; font-size: var(--fs-4); font-weight: 600;
  transition: border-color .14s var(--e-out), color .14s var(--e-out),
              background .14s var(--e-out);
}
.vb-tab:hover { border-color: var(--glass-line-2); color: var(--ink-1); }
.vb-tab.on {
  background: var(--acc); border-color: var(--acc); color: var(--acc-ink);
}
.vb-tab em {
  font-style: normal; font-size: var(--fs-1); font-weight: 700;
  opacity: .72; font-variant-numeric: tabular-nums;
}

/* ═══════ 4. 模块 ═══════ */
.vb-mods { display: flex; flex-direction: column; gap: var(--sp-4); }
.vb-mod {
  border-radius: calc(13 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  overflow: hidden;
}
.vb-mod-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4);
  padding: calc(13 * var(--u)) calc(15 * var(--u)) calc(11 * var(--u));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 8%, var(--n-850)), var(--n-850));
  border-bottom: 1px solid var(--glass-line);
}
.vb-mod-n {
  font-size: var(--fs-6); font-weight: 800; color: var(--ink-1);
  display: flex; align-items: baseline; gap: calc(8 * var(--u));
}
.vb-mod-n em {
  font-style: normal; font-size: var(--fs-3); font-weight: 600;
  color: var(--ink-4); letter-spacing: calc(.6 * var(--u));
  text-transform: uppercase;
}
.vb-mod-d {
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-3); max-width: var(--measure);
}
.vb-mod-meta {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: calc(5 * var(--u));
  align-items: flex-end;
}
.vb-tag {
  font-size: var(--fs-1); font-weight: 700;
  color: var(--ink-4);
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border: 1px solid var(--glass-line);
  border-radius: calc(999 * var(--u));
  white-space: nowrap;
}
.vb-drill-tip {
  padding: calc(9 * var(--u)) calc(15 * var(--u));
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-3);
  background: var(--n-800);
  border-bottom: 1px solid var(--glass-line);
}
.vb-drill-tip b {
  display: inline-block; min-width: calc(30 * var(--u));
  margin-right: calc(6 * var(--u));
  font-size: var(--fs-1); font-weight: 800;
  letter-spacing: calc(.6 * var(--u));
  color: var(--acc);
}

/* ═══════ 5. 搭配条目 ═══════ */
.vb-items { padding: calc(4 * var(--u)); }
.vb-item {
  border-radius: calc(10 * var(--u));
  border: 1px solid transparent;
  margin-bottom: calc(2 * var(--u));
}
.vb-item.open {
  border-color: var(--glass-line);
  background: var(--n-800);
}
.vb-item.mastered .vb-coll { color: var(--ink-3); }
.vb-item.shaky { border-left: 3px solid var(--c-amber); }

.vb-item-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(10 * var(--u));
  width: 100%;
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  text-align: left;
  font-family: inherit;
  border-radius: calc(9 * var(--u));
}
.vb-item-h:hover { background: var(--hover); }
.vb-item-c { flex: 1 1 auto; min-width: 0; }
.vb-coll {
  display: block;
  font-size: var(--fs-5); font-weight: 700;
  color: var(--ink-1); line-height: calc(19 * var(--u));
  overflow-wrap: break-word;
}
.vb-cn {
  display: block; margin-top: calc(1 * var(--u));
  font-size: var(--fs-3); color: var(--ink-4);
}
.vb-item-r {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: calc(8 * var(--u));
}
.vb-ok, .vb-shaky {
  font-size: var(--fs-1); font-weight: 800;
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: calc(999 * var(--u));
}
.vb-ok { background: color-mix(in srgb, var(--c-teal) 18%, transparent); color: var(--c-teal); }
.vb-shaky { background: color-mix(in srgb, var(--c-amber) 18%, transparent); color: var(--c-amber); }
.vb-band {
  font-size: var(--fs-1); font-weight: 700; color: var(--ink-4);
  white-space: nowrap;
}
.vb-chev {
  width: calc(13 * var(--u)); height: calc(13 * var(--u));
  color: var(--ink-4); flex: 0 0 auto;
  transition: transform .2s var(--e-out);
}
.vb-item.open .vb-chev { transform: rotate(90deg); }

/* 展开详情 */
.vb-item-b {
  padding: calc(3 * var(--u)) calc(11 * var(--u)) calc(12 * var(--u));
}
.vb-row {
  display: flex; gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0;
  font-size: var(--fs-3); line-height: calc(18 * var(--u));
  color: var(--ink-2);
}
.vb-row + .vb-row { border-top: 1px solid var(--glass-line); }
.vb-row b {
  flex: 0 0 auto; min-width: calc(34 * var(--u));
  font-size: var(--fs-1); font-weight: 800;
  letter-spacing: calc(.6 * var(--u));
  color: var(--ink-4); padding-top: calc(2 * var(--u));
}
.vb-row.warn b { color: var(--c-amber); }
.vb-row.alt b { color: var(--c-violet); }
.vb-row.warn span { color: var(--ink-3); }
.vb-row.alt span { color: var(--ink-3); }

.vb-ctx {
  margin: calc(7 * var(--u)) 0;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--n-850);
  border-left: 3px solid var(--acc);
}
.vb-ctx-en {
  font-size: var(--fs-4); line-height: calc(20 * var(--u));
  color: var(--ink-1);
}
.vb-ctx-cn {
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-4);
}
.vb-item-act {
  display: flex; gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--glass-line);
}

/* ═══════ 6. 抽背 ═══════ */
.vb-drill-bar {
  display: flex; align-items: center; gap: calc(13 * var(--u));
  margin-bottom: var(--sp-4);
}
.vb-drill-p {
  font-size: var(--fs-4); font-weight: 800; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vb-drill-p span { color: var(--acc); font-size: var(--fs-5); }
.vb-drill-track {
  flex: 1 1 auto;
  display: flex; gap: calc(3 * var(--u));
}
.vb-drill-track i {
  flex: 1 1 0; height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--n-750);
}
.vb-drill-track i.done { background: var(--acc); opacity: .5; }
.vb-drill-track i.cur { background: var(--acc); }
.vb-drill-mod {
  font-size: var(--fs-3); font-weight: 700; color: var(--ink-4);
  white-space: nowrap;
}

.vb-card {
  border-radius: calc(15 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
  min-height: calc(260 * var(--u));
}
.vb-card-k {
  font-size: var(--fs-8); font-weight: 800; line-height: calc(29 * var(--u));
  color: var(--ink); letter-spacing: calc(-.4 * var(--u));
  text-align: center;
}
.vb-card-prompt {
  margin-top: calc(16 * var(--u));
  text-align: center;
}
.vb-card-prompt b {
  display: block;
  font-size: var(--fs-4); font-weight: 700; color: var(--ink-2);
  margin-bottom: calc(6 * var(--u));
}
.vb-card-prompt span {
  font-size: var(--fs-3); color: var(--ink-4);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.vb-card-mask {
  margin-top: calc(22 * var(--u));
  padding: calc(20 * var(--u)) calc(14 * var(--u));
  border-radius: calc(11 * var(--u));
  border: 1px dashed var(--glass-line-2);
  display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--u));
  color: var(--ink-4);
}
.vb-card-mask svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.vb-card-mask span { font-size: var(--fs-4); }

.vb-card-ans { margin-top: calc(20 * var(--u)); }
.vb-coll-big {
  font-size: var(--fs-7); font-weight: 800; line-height: calc(26 * var(--u));
  color: var(--acc); text-align: center;
  margin-bottom: calc(4 * var(--u));
  overflow-wrap: break-word;
}

.vb-drill-act {
  display: flex; gap: calc(10 * var(--u)); justify-content: center;
  margin-top: var(--sp-4);
}
.vb-drill-act .g-btn { min-width: calc(150 * var(--u)); }
.vb-drill-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: calc(14 * var(--u));
  font-size: var(--fs-3); color: var(--ink-4);
}

.vb-drill-empty {
  border-radius: calc(14 * var(--u));
  border: 1px dashed var(--glass-line-2);
  padding: calc(40 * var(--u)) calc(20 * var(--u));
  text-align: center;
}
.vb-drill-empty-t {
  font-size: var(--fs-6); font-weight: 700; color: var(--ink-2);
  margin-bottom: calc(8 * var(--u));
}
.vb-drill-empty-d {
  font-size: var(--fs-4); line-height: calc(20 * var(--u));
  color: var(--ink-4); margin-bottom: calc(18 * var(--u));
}

/* ═══════ 7. 拼写 ═══════ */
.vb-spell-note {
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  border-left: 3px solid var(--c-amber);
  background: color-mix(in srgb, var(--c-amber) 8%, transparent);
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-2);
  margin-bottom: var(--sp-4);
}
.vb-spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(230 * var(--u)), 1fr));
  gap: calc(9 * var(--u));
}
.vb-spell {
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
}
.vb-spell-w {
  font-size: var(--fs-5); font-weight: 700; color: var(--ink-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: calc(.3 * var(--u));
}
.vb-spell-t {
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-4);
}

/* ═══════ 8. 响应式 ═══════ */
@media (max-width: 900px) {
  .vb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-mod-h { flex-direction: column; gap: calc(9 * var(--u)); }
  .vb-mod-meta { flex-direction: row; align-items: center; }
}
@media (max-width: 620px) {
  .vb-card { padding: calc(20 * var(--u)) calc(15 * var(--u)) calc(17 * var(--u)); }
  .vb-card-k { font-size: var(--fs-7); line-height: calc(26 * var(--u)); }
  .vb-coll-big { font-size: var(--fs-6); }
  .vb-item-h { flex-direction: column; align-items: flex-start; gap: calc(5 * var(--u)); }
  .vb-item-r { align-self: stretch; justify-content: flex-start; }
  .vb-row { flex-direction: column; gap: calc(2 * var(--u)); }
  .vb-row b { min-width: 0; }
  .vb-drill-act { flex-direction: column; }
  .vb-drill-act .g-btn { width: 100%; }
}