/* ============================================================
   English Opera · Vocabulary Data / Test / Train sub-pages
   Swiss International Style — light paper · ink · red accent
   Linked BEFORE swiss.css; swiss.css provides the final cascade.
   ============================================================ */

:root{
  --cl-bg:#ffffff;
  --cl-bg-2:#f4f4f1;
  --cl-text:#111111;
  --cl-text-dim:#6b6b6b;
  --cl-border:#d8d8d2;
  --cl-accent:#e2231a;
  --cl-accent-soft:rgba(226,35,26,.10);
  --cl-muted-bg:#f4f4f1;
  --cl-logic:#e2231a;
  --font-cn:"Helvetica Neue",Helvetica,Arial,"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --font-sans:"Helvetica Neue",Helvetica,Arial,"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --maxw:1120px;
  --r:0px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cl-bg);
  color:var(--cl-text);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
strong,b{color:var(--cl-text);font-weight:700}
i{font-style:italic}

/* ===== Top bar ===== */
.v-topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,4vw,40px);
  background:var(--cl-bg);
  border-bottom:1px solid var(--cl-border);
}
.v-back{font-family:var(--font-cn);font-size:.9rem;color:var(--cl-accent);transition:opacity .2s}
.v-back:hover{opacity:.7}
.v-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-cn);font-weight:700;font-size:1.02rem;color:var(--cl-text);text-decoration:none;white-space:nowrap}
.v-brand .v-brand__mark{font-size:1.25rem;line-height:1;color:var(--cl-accent)}
.v-brand:hover{opacity:.82}
.v-topbar__title{font-family:var(--font-cn);font-size:.85rem;color:var(--cl-text-dim);letter-spacing:1px}

/* ===== Hero ===== */
.v-hero{
  text-align:center;
  padding:clamp(60px,10vw,110px) 20px 50px;
  background:var(--cl-bg);
}
.v-hero__eyebrow{font-family:var(--font-cn);letter-spacing:3px;color:var(--cl-accent);font-size:.82rem;font-weight:700}
.v-hero__title{
  font-family:var(--font-cn);font-weight:700;
  font-size:clamp(2rem,6vw,3.4rem);margin:14px 0 18px;
  color:var(--cl-text);
}
.v-hero__sub{max-width:680px;margin:0 auto;color:var(--cl-text-dim);font-size:1.02rem}

/* ===== Layout ===== */
.v-main{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:clamp(64px,10vw,112px) 0;border-top:1px solid var(--cl-border)}
.section--alt{background:transparent}
.section--alt#flashcards{padding-bottom:clamp(76px,11vw,124px)}
#flashcards .fc-stage{margin-bottom:10px}
#vocabtest .section__head,
#flashcards .section__head{margin-bottom:clamp(48px,7vw,76px)}
.section__head{margin-bottom:48px;text-align:center}
.section__head .section__lead{margin-left:auto;margin-right:auto}
.section__no{
  display:inline-block;font-family:var(--font-cn);font-size:.74rem;font-weight:700;
  letter-spacing:2px;color:var(--cl-accent);background:var(--cl-accent-soft);
  padding:3px 10px;border:1px solid var(--cl-border);margin-bottom:12px;
}
.section__title{font-family:var(--font-cn);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;color:var(--cl-text)}
.section__lead{font-family:var(--font-cn);color:var(--cl-text-dim);margin-top:12px;font-size:1rem;max-width:760px}

/* ===== Chart cards ===== */
.chart-card{
  background:var(--cl-muted-bg);
  border:1px solid var(--cl-border);
  padding:26px 28px;
  margin-bottom:34px;
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.chart-card__title{font-family:var(--font-cn);font-size:1.15rem;font-weight:700;color:var(--cl-text);margin-bottom:6px}
.chart-card__note{font-family:var(--font-cn);font-size:.86rem;color:var(--cl-text-dim);margin-bottom:16px;line-height:1.6}
.chart-card__note--sm{margin-top:14px;margin-bottom:clamp(24px,3.5vw,40px);font-size:.8rem;opacity:.85}
.chart{width:100%}

/* bar chart */
.chart--bar{display:flex;align-items:flex-end;gap:18px;height:280px;padding:10px 4px 0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar-col__fill{
  width:100%;max-width:62px;
  background:var(--cl-accent);
  height:0;transition:height 1.1s cubic-bezier(.2,.8,.2,1);position:relative;
}
.bar-col--mid .bar-col__fill{background:var(--cl-accent)}
.bar-col--low .bar-col__fill{background:var(--cl-accent)}
.bar-col__val{font-family:var(--font-cn);font-weight:700;color:var(--cl-text);font-size:.92rem;margin-bottom:6px}
.bar-col__lab{font-family:var(--font-cn);font-size:.78rem;color:var(--cl-text-dim);margin-top:8px;text-align:center}

/* horizontal bar (POS) */
.chart--hbar{display:flex;flex-direction:column;gap:11px;padding:4px 0}
.hbar{display:flex;align-items:center;gap:12px}
.hbar__lab{width:108px;flex:0 0 108px;font-family:var(--font-cn);font-size:.86rem;color:var(--cl-text-dim);text-align:right}
.hbar__track{flex:1;height:22px;background:var(--cl-bg);border:1px solid var(--cl-border);overflow:hidden}
.hbar__fill{height:100%;width:0;background:var(--cl-accent);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.hbar__val{width:46px;flex:0 0 46px;font-family:var(--font-cn);font-size:.82rem;font-weight:700;color:var(--cl-text)}

/* donut */
.chart--donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center}
.donut{width:200px;height:200px;flex:0 0 200px}
.donut__center{font-family:var(--font-cn);font-weight:700}
.legend{display:flex;flex-direction:column;gap:8px;min-width:180px}
.legend__item{display:flex;align-items:center;gap:9px;font-family:var(--font-cn);font-size:.88rem;color:var(--cl-text-dim)}
.legend__dot{width:12px;height:12px;flex:0 0 12px;background:var(--cl-accent)}
.legend__pct{margin-left:auto;color:var(--cl-text);font-weight:700}

/* mini stat */
.mini-stat{display:flex;gap:18px;margin:18px 0 4px;flex-wrap:wrap}
.mini-stat>div{background:var(--cl-muted-bg);border:1px solid var(--cl-border);padding:12px 16px;flex:1;min-width:140px}
.mini-stat b{display:block;font-family:var(--font-cn);font-size:1.3rem;color:var(--cl-accent);font-weight:700}
.mini-stat span{font-family:var(--font-cn);font-size:.8rem;color:var(--cl-text-dim)}

/* ===== Band table ===== */
.band-table{margin-top:6px;overflow-x:auto}
.band-table table{width:100%;border-collapse:collapse;font-family:var(--font-cn);font-size:.92rem;min-width:560px}
.band-table th,.band-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--cl-border)}
.band-table th{color:var(--cl-text-dim);font-weight:700;font-size:.82rem;letter-spacing:.5px}
.band-table td{color:var(--cl-text)}
.band-hi td{background:var(--cl-accent-soft);color:var(--cl-accent);font-weight:700}
.table-foot{font-family:var(--font-cn);font-size:.8rem;color:var(--cl-text-dim);margin-top:14px;line-height:1.6}

/* ===== Tri cards ===== */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.tri{grid-template-columns:1fr}}
.tri-card{
  background:var(--cl-muted-bg);border:1px solid var(--cl-border);
  padding:26px;position:relative;overflow:hidden;
}
.tri-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cl-accent)}
.tri-card--a::before{background:var(--cl-accent)}
.tri-card--t::before{background:var(--cl-accent)}
.tri-card__tag{font-family:var(--font-cn);font-size:.7rem;font-weight:700;letter-spacing:2px;color:var(--cl-text-dim)}
.tri-card h3{font-family:var(--font-cn);font-size:1.4rem;font-weight:700;margin:8px 0 10px;color:var(--cl-text)}
.tri-card__def{font-family:var(--font-cn);font-size:.9rem;color:var(--cl-text-dim);line-height:1.6;margin-bottom:14px}
.tri-card__list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.tri-card__list li{font-family:var(--font-cn);font-size:.88rem;color:var(--cl-text-dim);line-height:1.5;padding-left:16px;position:relative}
.tri-card__list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--cl-accent)}
.tri-card--a .tri-card__list li::before{background:var(--cl-accent)}
.tri-card--t .tri-card__list li::before{background:var(--cl-accent)}
.tri-card__list b{color:var(--cl-text)}
.tri-card__src{font-family:var(--font-cn);font-size:.82rem;color:var(--cl-accent);border:1px solid var(--cl-border);padding:7px 14px;display:inline-block;transition:background .2s}
.tri-card__src:hover{background:var(--cl-accent-soft)}

/* ===== Pull ===== */
.pull{font-family:var(--font-cn);text-align:center;max-width:720px;margin:30px auto 0;font-size:1.08rem;color:var(--cl-text);line-height:1.7}
.pull strong{color:var(--cl-accent)}

/* ===== Flashcards ===== */
.fc-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:36px;justify-content:center}
.fc-counter{font-family:var(--font-cn);color:var(--cl-text-dim);font-size:.9rem;margin-right:auto}
@media(max-width:560px){.fc-counter{margin-right:0;width:100%;text-align:center}}
.fc-btn{
  font-family:var(--font-cn);font-size:.88rem;color:var(--cl-text);
  background:var(--cl-bg);border:1px solid var(--cl-border);
  padding:9px 16px;cursor:pointer;transition:.2s;
}
.fc-btn:hover{border-color:var(--cl-accent);color:var(--cl-accent)}
.fc-btn--accent{background:var(--cl-accent);color:#fff;border-color:var(--cl-accent);font-weight:700}
.fc-btn--accent:hover{background:#b71c14;border-color:#b71c14;color:#fff}

.fc-stage{display:flex;justify-content:center;perspective:1200px;min-height:260px}
.fc{
  width:min(440px,92vw);height:276px;cursor:pointer;
  transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.fc.is-flipped{transform:rotateY(180deg)}
.fc__face{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:38px 36px;text-align:center;border:1px solid var(--cl-border);
}
.fc__front{background:var(--cl-bg);border:1px solid var(--cl-border)}
.fc__front .fc__word{font-family:var(--font-cn);font-size:1rem;font-weight:700;letter-spacing:2px;color:var(--cl-text-dim);text-transform:uppercase;margin-bottom:14px}
.fc__front .fc__sentence{font-family:var(--font-cn);font-size:1.2rem;line-height:1.7;color:var(--cl-text);max-width:32ch;margin:0 auto;font-style:normal}
.fc__front .fc__sentence-zh{font-family:var(--font-cn);font-size:.95rem;line-height:1.6;color:var(--cl-text-dim);margin:.5rem auto 0;max-width:32ch}
.fc__hl{background:var(--cl-accent);color:#fff;font-weight:700;padding:0 4px}
.fc__front .fc__hint{font-family:var(--font-cn);font-size:.82rem;color:var(--cl-text-dim);margin-top:18px;letter-spacing:1px}
.fc__pos{
  display:inline-block;font-family:var(--font-cn);font-size:.72rem;font-weight:700;letter-spacing:1px;
  color:#fff;background:var(--cl-accent);padding:3px 10px;margin-bottom:14px;
}
.fc__back{background:var(--cl-bg-2);transform:rotateY(180deg);border-color:var(--cl-border)}
.fc__back .fc__pos{background:var(--cl-accent)}
.fc__mean{font-family:var(--font-cn);font-size:1.5rem;font-weight:700;color:var(--cl-text);margin-bottom:14px}
.fc__ex{font-family:var(--font-cn);font-size:.9rem;color:var(--cl-text-dim);font-style:italic;line-height:1.6}
.fc__def{margin:0 0 10px;line-height:1.5}
.fc__def:last-child{margin-bottom:0}
.fc__def-no{font-weight:700;color:var(--cl-accent);margin-right:6px}
.fc__def-pos{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--cl-text-dim);border:1px solid var(--cl-border);padding:1px 6px;margin-right:6px;vertical-align:middle}
.fc__def-text{color:var(--cl-text)}
.fc__def-ex{font-size:.82rem;color:var(--cl-text-dim);font-style:italic;margin-top:3px;padding-left:1.3em;line-height:1.5;display:flex;align-items:flex-start;gap:8px}
.fc__def-ex .fc__def-speak{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 auto;margin-top:1px;background:var(--cl-accent-soft);border:1px solid var(--cl-accent);color:var(--cl-accent);cursor:pointer;padding:0;transition:all .2s}
.fc__def-ex .fc__def-speak:hover{background:var(--cl-accent);color:#fff}
.fc__def-ex .fc__def-speak:active{transform:scale(.92)}
.fc__def-ex .fc__def-speak .ico{width:12px;height:12px}

/* ===== Sources =====
   NOTE: .sources / .sources__note styling now lives in swiss.css (single
   source of truth, shared by vocabulary.html and coca-vocab.html). */

/* ===== Footer ===== */
.v-footer{text-align:center;padding:70px 20px 56px;border-top:1px solid var(--cl-border);background:var(--cl-bg-2)}
.v-footer p:first-child{font-family:var(--font-cn);font-size:1.1rem;color:var(--cl-text)}
.v-footer__sub{font-family:var(--font-cn);color:var(--cl-text-dim);margin-top:12px;font-size:.86rem}

/* ===== COCA corpus composition ===== */
.coca-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 46px}
.coca-stat{background:var(--cl-muted-bg);border:1px solid var(--cl-border);padding:22px 16px;text-align:center;transition:border-color .3s,transform .3s}
.coca-stat:hover{border-color:var(--cl-accent)}
.coca-stat b{display:block;font-size:1.55rem;font-weight:700;color:var(--cl-accent);font-variant-numeric:tabular-nums;letter-spacing:.4px}
.coca-stat span{display:block;margin-top:8px;font-size:.85rem;color:var(--cl-text-dim)}
.chart-card__barhead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.coca-toggle{display:inline-flex;background:var(--cl-muted-bg);border:1px solid var(--cl-border);padding:3px}
.coca-toggle__btn{border:0;background:transparent;color:var(--cl-text-dim);font:inherit;font-size:.82rem;padding:6px 16px;cursor:pointer;transition:background .25s,color .25s}
.coca-toggle__btn.is-active{background:var(--cl-accent);color:#fff;font-weight:600}
.chart--coca{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.coca-row{display:grid;grid-template-columns:104px 1fr 168px;align-items:center;gap:14px}
.coca-row__label{font-family:var(--font-cn);font-size:.9rem;color:var(--cl-text-dim);text-align:right;white-space:nowrap}
.coca-row__track{background:var(--cl-muted-bg);border:1px solid var(--cl-border);height:22px;overflow:hidden}
.coca-row__fill{height:100%;width:0;background:var(--cl-accent);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.coca-row__val{font-size:.82rem;color:var(--cl-text-dim);font-variant-numeric:tabular-nums;text-align:right}
.coca-row__val b{color:var(--cl-text);font-weight:600}
@media(max-width:640px){
  .coca-stats{grid-template-columns:1fr}
  .coca-row{grid-template-columns:84px 1fr 132px;gap:10px}
  .coca-row__label{font-size:.8rem}
  .coca-row__val{font-size:.74rem}
}

/* ===== Vocabulary size self-test ===== */
.vt-card{background:var(--cl-muted-bg);border:1px solid var(--cl-border);padding:34px 28px;max-width:680px;margin:0 auto;text-align:center}
.vt-intro{font-family:var(--font-cn);color:var(--cl-text-dim);line-height:1.8;font-size:.94rem}
.vt-intro b{color:var(--cl-text)}
.vt-start{margin-top:18px;font-size:1rem;padding:12px 30px}
.vt-hint{font-family:var(--font-cn);color:var(--cl-text-dim);font-size:.78rem;margin-top:16px;line-height:1.6;opacity:.85}
.vt-progress{margin-bottom:26px}
.vt-progress__bar{height:8px;background:var(--cl-bg);border:1px solid var(--cl-border);overflow:hidden}
.vt-progress__bar span{display:block;height:100%;width:0;background:var(--cl-accent);transition:width .35s ease}
.vt-progress__meta{margin-top:8px;font-size:.8rem;color:var(--cl-text-dim);font-variant-numeric:tabular-nums}
.vt-word{font-size:2.6rem;font-weight:700;color:var(--cl-text);letter-spacing:.5px;font-family:var(--font-cn)}
.vt-pos{margin-top:6px;color:var(--cl-accent);font-size:.9rem;font-style:italic}
.vt-actions{display:flex;gap:14px;justify-content:center;margin-top:28px}
.vt-ans{border:1px solid var(--cl-border);background:var(--cl-bg);color:var(--cl-text);font:inherit;font-size:1rem;font-weight:600;padding:13px 30px;cursor:pointer;transition:.2s;font-family:var(--font-cn)}
.vt-ans:hover{transform:translateY(-2px)}
.vt-ans--yes:hover{border-color:var(--cl-accent);color:var(--cl-accent)}
.vt-ans--no:hover{border-color:var(--cl-accent);color:var(--cl-accent)}
.vt-quit{display:block;margin:20px auto 0;background:none;border:0;color:var(--cl-accent);font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline;font-family:var(--font-cn)}
.vt-quit:hover{color:#b71c14}
.vt-result__label{font-family:var(--font-cn);color:var(--cl-text-dim);font-size:.92rem}
.vt-result__num{font-size:3rem;font-weight:800;color:var(--cl-accent);margin:6px 0 14px;font-variant-numeric:tabular-nums;letter-spacing:1px}
.vt-result__num small{font-size:.9rem;font-weight:400;color:var(--cl-text-dim);letter-spacing:0}
.vt-level{display:inline-block;background:var(--cl-accent);color:#fff;font-weight:700;font-family:var(--font-cn);padding:8px 22px;font-size:1.05rem}
.vt-level__desc{font-family:var(--font-cn);color:var(--cl-text);line-height:1.8;margin:16px auto;max-width:520px;font-size:.92rem}
.vt-breakdown{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:90px;margin:22px 0 14px;padding:0 4px}
.vt-bd-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.vt-bd-col__bar{width:100%;max-width:26px;background:var(--cl-accent);height:0;transition:height .6s cubic-bezier(.2,.7,.2,1)}
.vt-bd-col__x{font-size:.62rem;color:var(--cl-text-dim);margin-top:5px}
.vt-cefr{font-family:var(--font-cn);color:var(--cl-text-dim);font-size:.84rem;margin-bottom:14px}
.vt-cefr b{color:var(--cl-text)}
.vt-missed{font-family:var(--font-cn);color:var(--cl-text-dim);font-size:.8rem;line-height:1.7;margin:0 0 18px;max-width:560px;margin-left:auto;margin-right:auto}
.vt-missed b{color:var(--cl-accent);font-weight:500}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .bar-col__fill,.hbar__fill{transition:none}
}

/* ===== Shared 词汇 sub-nav (数据/测试/训练) ===== */
.v-subnav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.v-subnav a{
  font-family:var(--font-cn);font-size:.86rem;color:var(--cl-text-dim);
  padding:7px 15px;border:1px solid transparent;transition:.2s;
}
.v-subnav a:hover{color:var(--cl-accent);border-color:var(--cl-border)}
.v-subnav a.is-active{color:#fff;background:var(--cl-accent);font-weight:700;border-color:var(--cl-accent)}
@media(max-width:560px){.v-subnav a{padding:6px 11px;font-size:.8rem}}

/* ===== Level reference table (above the test) ===== */
.levelref{background:var(--cl-muted-bg);border:1px solid var(--cl-border);padding:24px 26px;margin:0 auto 8px;max-width:880px;overflow-x:auto}
.levelref__title{font-family:var(--font-cn);font-size:1.05rem;font-weight:700;color:var(--cl-accent);margin-bottom:4px}
.levelref__sub{font-family:var(--font-cn);font-size:.85rem;color:var(--cl-text-dim);margin-bottom:16px;line-height:1.6}
.levelref table{width:100%;border-collapse:collapse;font-family:var(--font-cn);font-size:.88rem;min-width:640px}
.levelref th,.levelref td{padding:12px 12px;text-align:center;border-bottom:1px solid var(--cl-border);white-space:nowrap}
.levelref th{color:var(--cl-text-dim);font-weight:700;font-size:.78rem;letter-spacing:.5px}
.levelref td{color:var(--cl-text)}
.levelref tbody tr:hover{background:var(--cl-accent-soft)}
.levelref .lv{font-weight:800;font-size:1.05rem}
.levelref .lv--a1{color:#6b6b6b}.levelref .lv--a2{color:#1f8a4c}.levelref .lv--b1{color:#1f6fb2}
.levelref .lv--b2{color:#3b82f6}.levelref .lv--c1{color:#8b5cf6}.levelref .lv--c2{color:#f0883e}
.levelref__note{font-family:var(--font-cn);font-size:.76rem;color:var(--cl-text-dim);margin-top:14px;line-height:1.6}

/* COCA vs CEFR philosophy callout */
.lr-philosophy{display:flex;flex-direction:column;gap:12px;margin:0 auto 28px;max-width:880px}
.lr-ph__row{display:flex;gap:14px;padding:16px 18px;border:1px solid var(--cl-border);background:var(--cl-muted-bg);align-items:flex-start;line-height:1.7}
.lr-ph__badge{flex-shrink:0;display:inline-flex;align-items:center;height:26px;padding:0 10px;font-size:.75rem;font-weight:700;letter-spacing:.4px;white-space:nowrap;background:var(--cl-accent-soft);color:var(--cl-accent);border:1px solid var(--cl-border)}
.lr-ph--coca .lr-ph__badge{background:var(--cl-accent-soft);color:var(--cl-accent)}
.lr-ph--cefr .lr-ph__badge{background:var(--cl-accent-soft);color:var(--cl-accent)}
.lr-ph__body{font-family:var(--font-cn);font-size:.86rem;color:var(--cl-text)}
.lr-ph__body b{color:var(--cl-accent)}
.lr-ph__examples{display:block;margin-top:6px;font-size:.8rem;color:var(--cl-text-dim);line-height:1.6}
.lr-ph__note{font-family:var(--font-cn);font-size:.83rem;color:var(--cl-accent);padding:10px 16px;background:var(--cl-accent-soft);border:1px solid var(--cl-border);line-height:1.7}

/* COCA key thresholds */
.lr-coca-tiers{margin-top:20px;padding-top:18px;border-top:1px solid var(--cl-border)}
.lr-coca-tiers__title{font-family:var(--font-cn);font-size:.93rem;font-weight:700;color:var(--cl-accent);margin-bottom:12px}
.lr-coca-tiers__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lr-coca-tier{display:flex;gap:10px;padding:12px 14px;background:var(--cl-bg);border:1px solid var(--cl-border);font-family:var(--font-cn);font-size:.82rem;color:var(--cl-text);line-height:1.65;align-items:flex-start}
.lr-coca-tier__n{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:.8rem;font-weight:800;color:var(--cl-accent);background:var(--cl-accent-soft);border:1px solid var(--cl-border)}
.lr-coca-tier__d b{color:var(--cl-accent)}

@media(max-width:640px){
  .lr-ph__row{flex-direction:column;gap:8px}
  .lr-coca-tiers__grid{grid-template-columns:1fr}
}

/* ===== Train page: mode tabs + selectors ===== */
.vt-modes{display:flex;gap:10px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.vt-mode{
  font-family:var(--font-cn);font-size:.92rem;color:var(--cl-text-dim);cursor:pointer;
  background:var(--cl-muted-bg);border:1px solid var(--cl-border);
  padding:10px 22px;transition:.2s;
}
.vt-mode.is-active{background:var(--cl-accent);color:#fff;font-weight:700;border-color:var(--cl-accent)}
.vt-selectors{display:flex;flex-direction:column;gap:18px;max-width:760px;margin:0 auto 44px}
.vt-sel-label{font-family:var(--font-cn);font-size:.86rem;color:var(--cl-text-dim);margin-bottom:10px;letter-spacing:.5px}
.vt-chips{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:10px}
@media(max-width:820px){.vt-chips{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(max-width:480px){.vt-chips{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
.vt-chip{
  font-family:var(--font-cn);font-size:.86rem;color:var(--cl-text);cursor:pointer;
  background:var(--cl-muted-bg);border:1px solid var(--cl-border);
  padding:8px 16px;transition:.2s;width:100%;text-align:center;
}
.vt-chip:hover{border-color:var(--cl-accent);color:var(--cl-accent)}
.vt-chip.is-active{background:var(--cl-accent);color:#fff;font-weight:700;border-color:var(--cl-accent)}
.vt-chip--b2.is-active{background:var(--cl-accent);color:#fff;border-color:var(--cl-accent)}
.vt-chip--c1.is-active{background:var(--cl-accent);color:#fff;border-color:var(--cl-accent)}
.vt-chip--c2.is-active{background:var(--cl-accent);color:#fff;border-color:var(--cl-accent)}
.vt-load-note{font-family:var(--font-cn);font-size:.82rem;color:var(--cl-text-dim);text-align:center;margin-top:14px;margin-bottom:30px;min-height:1.2em}
.vt-load-note.is-err{color:var(--cl-accent)}

/* flashcard back loading / source */
.fc__src{font-family:var(--font-cn);font-size:.72rem;color:var(--cl-text-dim);margin-top:12px;opacity:.7}
.fc__loading{font-family:var(--font-cn);font-size:1rem;color:var(--cl-text-dim);font-style:italic}
.fc__zh{display:none;font-family:var(--font-cn);font-size:1.55rem;font-weight:700;color:var(--cl-accent);margin-bottom:10px;line-height:1.4}
.fc__zh[style*="none"]{display:none}
.fc__back .fc__mean{font-size:.95rem;line-height:1.5;color:var(--cl-text-dim);margin-bottom:10px;font-weight:400}
.fc__know{display:flex;gap:10px;margin-top:18px}
.fc__know .vt-ans{padding:8px 18px;font-size:.86rem}
.fc__pos[style*="none"]{display:none}

/* ===== Flashcard 发音按钮 + 音标 ===== */
.fc-tools--center{justify-content:center}
.fc-tools--center .fc-counter{margin-right:0}
.fc__speak{
  margin-top:14px;width:40px;height:40px;cursor:pointer;
  background:var(--cl-accent-soft);border:1px solid var(--cl-accent);
  color:var(--cl-accent);font-size:1.05rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,transform .1s;
}
.fc__speak:hover{background:var(--cl-accent);color:#fff}
.fc__speak:active{transform:scale(.92)}
.fc__speak--sm{width:28px;height:28px;font-size:.85rem;margin-top:0}
.fc__phon{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;min-height:28px}
.fc__phon-text{font-family:var(--font-cn);font-size:.95rem;color:var(--cl-accent);letter-spacing:.5px}