/* ============================================================
   English Opera · Swiss International Style — SINGLE THEME LAYER
   Light paper · ink black · one red accent · grotesque · sharp corners
   This file is the UI/visual layer only. Structure (HTML) and data
   (JS) are decoupled so visual changes never break content.
   Linked LAST on every page so it wins the cascade.
   ============================================================ */

:root{
  --eo-grotesk:"Helvetica Neue",Helvetica,Arial,"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --r:0px;
  --r-sm:0px;
  --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;
  --cl-curtain:#111111;
  --cl-curtain-2:#e2231a;
  --font-serif:var(--eo-grotesk);
  --font-cn:var(--eo-grotesk);
  --font-sans:var(--eo-grotesk);
  --bg:#ffffff;
  --bg-soft:#f4f4f1;
  --panel:#ffffff;
  --panel-2:#f4f4f1;
  --border:#d8d8d2;
  --text:#111111;
  --dim:#6b6b6b;
  --muted:#8a8a8a;
  --accent:#e2231a;
  --accent-2:#e2231a;
  --red:#e2231a;
  --green:#111111;
  --font-en:var(--eo-grotesk);
  --cl-ok:#1a7f37;
  --cl-bad:#c0392b;
}

/* Make the HTML `hidden` attribute authoritative. Otherwise `.modal{display:flex}`,
   `.drawer{display:flex}` and `.overlay` (below) override it and panels/modals
   stay visible on load and can never be closed. */
[hidden]{display:none !important}


/* ---------- base ---------- */
body{background:#ffffff;color:var(--cl-text);font-family:var(--eo-grotesk);line-height:1.6}
a{color:inherit;text-decoration:none}
strong,b{color:var(--cl-text);font-weight:700}
code{font-family:"SFMono-Regular",Consolas,monospace;background:var(--cl-accent-soft);color:var(--cl-accent);padding:.05em .4em;font-size:.9em}

/* ============================================================
   HARD RESET — kill every forbidden visual property globally.
   Solid background-COLORS survive (only background-IMAGE / gradients
   are removed). This guarantees no gradient, shadow, blur, or
   rounded corner can leak through from the old theatre theme.
   ============================================================ */
*,*::before,*::after{
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-image:none !important;
}
/* italic is decorative in Swiss → force roman */
.hero__axiom,.pillar__note,.plugin__test,.card__tip{font-style:normal !important}

/* ============================================================
   RE-ESTABLISH FLAT SURFACES & SOLID COLOR (after the reset)
   ============================================================ */

/* hero / sections */
.hero{background:var(--cl-bg) !important}
.section--stage{background:var(--cl-bg-2) !important}
.section{border-top:1px solid var(--cl-border)}

/* pillars / cards / panels / contrast / plugins / effects / decompose / dd */
.pillar,.card,.plugin,.effect,.contrast__col,.diff,.fw,.dd-card,
.decompose__panel,.stat,.mini-stat>div,.lr-ph__row,.lr-coca-tier,
.coca-stat,.vt-card,.vt-progress__bar,.levelref,.lr-tablewrap,
.reader,.audio,.item,.modal__box,.voice-picker,.dlg,.utt,
.coverage{background:var(--cl-bg-2) !important;border:1px solid var(--cl-border) !important}

/* dark surfaces that became invisible on light paper → light grey */
.card__eg{background:var(--cl-bg-2) !important;color:var(--cl-text) !important}
.plugin__eg{background:transparent !important;border-left:3px solid var(--cl-accent) !important;padding:12px 0 12px 14px}
.decompose__stage{background:transparent !important;border:1px solid var(--cl-border) !important}
.dd-read{color:var(--cl-text)}
.lr-ph__note{background:var(--cl-accent-soft) !important}
.deduce{background:var(--cl-accent-soft) !important;border:1px solid var(--cl-border) !important}
.deduce__core{color:var(--cl-text) !important}
.deduce__arrow{color:var(--cl-text) !important}

/* accent hairlines that the reset killed (gradient backgrounds) */
.pillar::before{background:var(--cl-accent) !important}
.dd-card::before{background:var(--cl-accent) !important}
.arch__connector{background:var(--cl-border) !important}
.dd-card__icon,.dd-card__icon--s{background:var(--cl-text) !important;color:#fff !important}

/* dashed borders → solid hairlines (Swiss uses solid 1px only) */
.arch__tag{border-style:solid !important}
/* card__tip / plugin__test: keep ONLY a 2px red top rule, no left/right/bottom */
.card__tip,.plugin__test{border:0 !important;border-top:2px solid var(--cl-logic) !important}

/* ============================================================
   TYPOGRAPHIC HIERARCHY
   ============================================================ */
h1,h2,h3,h4,.section__title,.v-hero__title,.coca-hero__title,.topbar h1,
.hero__title,.footer__mantra,.stat__num,.card__code,.fw__no,.dd-card__title,
.vt-result__num{
  letter-spacing:-.02em;
  font-weight:700;
  font-family:var(--eo-grotesk);
}
/* kill gold/teal gradient-clip text → solid ink on light paper */
.v-hero__title,.hero__title,.coca-hero__title,.footer__mantra,.stat__num,
.card__code,.fw__no{
  background:none !important;
  -webkit-background-clip:initial;background-clip:initial;
  color:var(--cl-text) !important;
  -webkit-text-fill-color:var(--cl-text) !important;
}
.v-hero__eyebrow,.coca-hero__eyebrow,.hero__eyebrow,.section__no{
  letter-spacing:.22em;text-transform:uppercase;color:var(--cl-accent);
  font-family:var(--eo-grotesk);
}
.section__no{background:var(--cl-accent-soft) !important;color:var(--cl-accent) !important;border:1px solid var(--cl-border) !important}

/* ============================================================
   TOP BARS — flat light paper, 3px red signal rule (no blur)
   ============================================================ */
.nav,.v-topbar,.coca-topbar,.topbar{
  background:#ffffff !important;
  border-bottom:1px solid var(--cl-border) !important;
  border-top:3px solid var(--cl-accent) !important;
}
.nav__brand,.v-brand__mark,.v-topbar__title,.coca-topbar__title,.topbar__logo,.mnav__mark{color:var(--cl-text-dim)}
.nav__links a{color:var(--cl-text-dim)}
.nav__links a:hover{color:var(--cl-accent)}
.nav__dropdown{background:#ffffff !important;border:1px solid var(--cl-border) !important}
.nav__dropdown a{color:var(--cl-text-dim)}
.nav__dropdown a:hover{color:var(--cl-accent);background:var(--cl-accent-soft) !important}

/* ============================================================
   HERO — clean Swiss (no 3D stage)
   ============================================================ */
.hero{position:relative;height:auto !important;min-height:80vh;display:flex;align-items:center;justify-content:center;padding:120px 20px 80px;overflow:hidden}
#stage-canvas,.hero__veil{display:none !important}
.hero__content{position:relative;z-index:2;text-align:center;max-width:880px;padding:0 20px;
  opacity:0;transform:translateY(18px);animation:heroIn .8s .15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero__title{font-weight:800;font-size:clamp(2.6rem,8vw,5.5rem);line-height:1.02;letter-spacing:-.02em}
.hero__title-en{display:block;font-size:.28em;letter-spacing:.18em;color:var(--cl-text-dim) !important;-webkit-text-fill-color:var(--cl-text-dim) !important;margin-top:14px;font-weight:700}
.hero__sub{color:var(--cl-text);font-size:clamp(1rem,2.2vw,1.3rem);margin:24px auto 28px;max-width:620px}
.hero__formula{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-size:1.05rem}
.hero__formula .chip{background:var(--cl-bg);border:1.5px solid var(--cl-border);padding:8px 16px;font-weight:600;color:var(--cl-text)}
.hero__formula .chip--accent{border-color:var(--cl-accent);color:var(--cl-accent)}
.hero__formula .op{color:var(--cl-accent);font-size:1.3rem;font-weight:700}
.hero__formula-eq{margin-left:8px;color:var(--cl-text-dim);font-size:.95rem}
.hero__axiom{margin-top:26px;color:var(--cl-text-dim);font-size:.95rem}
.hero__scroll{display:inline-flex;align-items:center;gap:6px;margin-top:38px;color:var(--cl-text-dim);font-size:.85rem;letter-spacing:.18em}
.hero__scroll:hover{color:var(--cl-accent)}

/* ============================================================
   BUTTONS — flat, square, clear hover/active/focus feedback
   (only colour + border change; no shadow, no transform)
   ============================================================ */
.btn,.fc-btn,.vt-ans,.btn--mini,.btn--ghost,.coca-back,.v-back,.tri-card__src,.vt-quit,
.mode-toggle__btn,.coca-toggle__btn,.lang-switch__btn,.chip,.step,.lcard,.vword,.voice-opt{
  cursor:pointer;
  font-family:var(--eo-grotesk);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
}
/* neutral button base */
.btn,.fc-btn,.vt-ans,.btn--mini,.btn--ghost,.coca-back,.v-back,.tri-card__src{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  background:var(--cl-bg);border:1.5px solid var(--cl-border);color:var(--cl-text);
  padding:9px 16px;font-weight:600;
}
.btn:hover,.fc-btn:hover,.vt-ans:hover,.btn--mini:hover,.btn--ghost:hover,
.coca-back:hover,.v-back:hover,.tri-card__src:hover{
  background:var(--cl-text) !important;color:#fff !important;border-color:var(--cl-text) !important;
}
.btn:active,.fc-btn:active,.vt-ans:active,.btn--mini:active{opacity:.8}
/* accent buttons */
.fc-btn--accent,.btn--primary{
  background:var(--cl-accent) !important;color:#fff !important;border-color:var(--cl-accent) !important;
}
.fc-btn--accent:hover,.btn--primary:hover{background:#b71c14 !important;color:#fff !important;border-color:#b71c14 !important}
.fc-btn--accent:active,.btn--primary:active{opacity:.85}
/* link-style actions */
.vt-quit{background:none !important;border:none !important;color:var(--cl-accent) !important;text-decoration:underline;padding:0}
.vt-quit:hover{color:#b71c14 !important}

/* ============================================================
   INTERACTIVE COMPONENTS — hover/active feedback
   ============================================================ */
/* tabs / toggles / chips / steps */
.mode-toggle__btn,.coca-toggle__btn,.lang-switch__btn,.chip{
  background:var(--cl-bg-2);border:1px solid var(--cl-border);color:var(--cl-text-dim);
}
.mode-toggle__btn:hover,.coca-toggle__btn:hover,.lang-switch__btn:hover,.chip:hover{
  border-color:var(--cl-accent);color:var(--cl-text);
}
.mode-toggle__btn.is-active,.coca-toggle__btn.is-active,.lang-switch__btn.is-active,
.vt-chip.is-active,.vt-mode.is-active,.vt-chip.is-active,.coca-toggle__btn.is-active{
  background:var(--cl-accent) !important;color:#fff !important;border-color:var(--cl-accent) !important;
}
.step{background:var(--cl-bg-2);border:1px solid var(--cl-border);color:var(--cl-text-dim)}
.step:hover{border-color:var(--cl-accent);color:var(--cl-text)}
.step.is-active{background:var(--cl-accent-soft) !important;border-color:var(--cl-accent) !important;color:var(--cl-text) !important}
.step.is-active .step__no{background:var(--cl-accent) !important;color:#fff !important;border-color:var(--cl-accent) !important}

/* clickable cards (vocab trainer word bank, level cards, voice options) */
.lcard,.vword,.voice-opt{background:var(--cl-bg-2);border:1px solid var(--cl-border);color:var(--cl-text)}
.lcard:hover,.vword:hover,.voice-opt:hover{border-color:var(--cl-accent);background:var(--cl-accent-soft) !important}
.voice-opt.is-active{border-color:var(--cl-accent) !important;background:var(--cl-accent-soft) !important}
.vword:active{transform:none}

/* nav active / dropdown current */
.mnav__links a.is-active{background:var(--cl-accent) !important;color:#fff !important}
.v-subnav a.is-active{background:var(--cl-accent) !important;color:#fff !important}

/* ============================================================
   DATA BARS — solid fills (no gradients)
   ============================================================ */
.hbar__fill{background:var(--cl-accent) !important}
.vt-progress__bar span{background:var(--cl-accent) !important;display:block;height:100%}
.vt-bd-col__bar{background:var(--cl-accent) !important}
.coca-row__fill{background:var(--cl-accent) !important}
.coverage__fill{background:var(--cl-accent) !important;display:block;height:100%}
.col__fill{background:var(--accent) !important}
.col.is-active .col__fill{outline:2px solid var(--accent);outline-offset:-2px}
.bar-col__fill{background:var(--cl-accent) !important;transition:height 1.1s cubic-bezier(.2,.8,.2,1)}
.bar-col--mid .bar-col__fill{background:var(--cl-accent) !important}
.bar-col--low .bar-col__fill{background:var(--cl-accent) !important}
.spectrum__bar{background:var(--cl-accent) !important;color:#fff !important}
.spectrum__lo{color:#fff}
.spectrum__mark::before{background:#fff}
.spectrum__num,.spectrum__cap{color:#fff}
/* CEFR grade cells → flat ink squares */
.lv{background:var(--cl-text) !important;color:#fff !important}
/* data track backgrounds (base theme used dark solid colours) */
.coverage__bar{background:var(--cl-border) !important}
.hbar__track{background:var(--cl-border) !important}
.coca-row__track{background:var(--cl-border) !important}

/* flashcard (keeps 3D flip, just flat white surface) */
.fc__front,.fc__back{background:#fff !important;border:1px solid var(--cl-border) !important;color:var(--cl-text) !important}
.fc__speak{background:var(--cl-accent-soft) !important;border:1px solid var(--accent) !important;color:var(--accent) !important;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-weight:600;transition:background-color .15s,color .15s,border-color .15s}
.fc__speak:hover{background:var(--cl-accent) !important;color:#fff !important}
/* flashcard front: word-in-context sentence (Swiss: ink text, red highlight) */
.fc__word{font-size:1rem !important;color:var(--cl-text-dim) !important;letter-spacing:2px !important}
.fc__sentence{color:var(--cl-text) !important;font-size:1.15rem !important;line-height:1.7 !important;max-width:34ch !important;margin:0 auto !important;font-style:normal !important}
.fc__sentence-zh{color:var(--cl-muted) !important;font-size:.95rem !important;line-height:1.6 !important;max-width:34ch !important;margin:.5rem auto 0 !important;font-style:normal !important}
.fc__hl{background:var(--cl-accent) !important;color:#fff !important;font-weight:700 !important;padding:0 3px !important}

/* COCA frequency tabs */
.coca-tab{background:var(--cl-bg-2);border:1px solid var(--cl-border);color:var(--cl-text-dim);cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.coca-tab:hover{border-color:var(--cl-accent);color:var(--cl-text)}
.coca-tab.is-active{background:var(--cl-accent) !important;color:#fff !important;border-color:var(--cl-accent) !important}

/* ============================================================
   CONTRAST FIXES (content was invisible after theme flip)
   ============================================================ */
.fw__key{background:var(--cl-accent) !important;color:#fff !important;border:1px solid var(--cl-accent)}
.fc-btn--accent{color:#fff !important}
.btn--primary{background:var(--accent) !important;color:#fff !important;border:none}
.badge{background:var(--accent) !important;color:#fff !important}
.vt-level{background:var(--cl-accent) !important;color:#fff !important}
.reader h1,.reader h2,.reader h3,.reader h4,.reader h5,.reader h6,
.reader strong{color:var(--text) !important}
.col__val{color:var(--text) !important}
.reader{color:var(--text) !important;background:var(--bg-soft) !important}
.reader em{color:#b8860b !important}
.reader code{background:rgba(0,0,0,.05);color:var(--text)}
.reader mark{background:rgba(226,35,26,.15);color:var(--accent)}
.reader blockquote{background:var(--cl-accent-soft) !important}
.reader pre{background:#f0f0ee !important}

/* ============================================================
   COCA popup (was dark, hardcoded #fff text)
   ============================================================ */
.pop{background:var(--panel);border:1px solid var(--border);color:var(--text)}
.pop__word{color:var(--text) !important}
.pop__phon-text{color:var(--accent)}
.pop__speak{background:var(--cl-accent-soft);border:1px solid var(--accent);color:var(--accent)}
.pop__freq{color:var(--dim)}
.pop__freq b{color:var(--text)}
.pop__trans{color:var(--accent)}
.pop__sent{color:var(--text);background:var(--bg-soft);border-left:3px solid var(--accent)}
.pop__sent-speak{background:var(--cl-accent-soft);border:1px solid var(--accent);color:var(--accent)}
.pop__close{color:var(--text);background:none;border:none;cursor:pointer}
.pop__close:hover{color:var(--accent)}

/* ============================================================
   DEEP-DIVE colour coding (text only, no dark surfaces)
   ============================================================ */
.hl-nom{background:var(--cl-accent-soft);color:var(--cl-accent) !important}
.hl-rel{background:rgba(31,138,76,.12);color:#1f8a4c !important;font-weight:600}
.hl-adv{background:rgba(31,111,178,.12);color:#1f6fb2 !important;font-weight:600}
.decompose__sentence .tk{color:var(--cl-text)}
.tk-adv,.tk-adv2{color:#c0392b !important}
.tk-sub{color:#111 !important;font-weight:700}
.tk-verb{color:#111 !important;font-weight:700;text-decoration:underline}
.tk-obj{color:#111 !important}
.tk-rel,.tk-rel2{color:#1f8a4c !important;font-weight:600}
/* dim non-active step tokens with opacity only (no blur) */
.decompose[data-step="0"] .tk-adv,.decompose[data-step="0"] .tk-adv2,
.decompose[data-step="0"] .tk-rel,.decompose[data-step="0"] .tk-rel2,
.decompose[data-step="0"] .tk-obj,
.decompose[data-step="1"] .tk-adv,.decompose[data-step="1"] .tk-adv2,
.decompose[data-step="1"] .tk-rel,.decompose[data-step="1"] .tk-rel2{opacity:.35}
.decompose[data-step] .tk{filter:none !important}

/* ============================================================
   THREE EFFECTS icons (line SVG already in markup)
   ============================================================ */
.effect__icon .ico{width:2.2rem;height:2.2rem;stroke-width:1.4}
.effect__icon{color:var(--cl-accent)}

/* ============================================================
   DRAWER / MODAL / OVERLAY — flat
   ============================================================ */
.drawer{background:#fff !important;border-left:1px solid var(--cl-border) !important}
.overlay,.coca-overlay{background:rgba(17,17,17,.45) !important}
.modal__box{background:#fff !important;border:1px solid var(--cl-border) !important}
.modal__head h2,.drawer__head h2{color:var(--cl-text) !important}
.toast{background:#fff !important;color:var(--cl-text) !important;border:1px solid var(--cl-border) !important}

/* ============================================================
   FOOTER — light Swiss
   ============================================================ */
.footer,.coca-footer{background:var(--cl-bg-2) !important;color:var(--cl-text-dim);border-top:1px solid var(--cl-border) !important}
.footer__mantra{color:var(--cl-text) !important}
.footer__src a,.coca-footer a,.coca-credits__row a,.tri-card__src{color:var(--cl-accent)}
.footer__src a:hover,.coca-footer a:hover,.coca-credits__row a:hover{color:#b71c14}

/* ============================================================
   LINE-ICON BASE (stroke = currentColor)
   ============================================================ */
.ico{
  width:1.15em;height:1.15em;
  display:inline-block;vertical-align:-.18em;
  stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto;
}
.ico--brand{width:22px;height:22px;stroke-width:1.5}
.ico--caret{width:.85em;height:.85em;stroke-width:1.8}
.ico--sm{width:16px;height:16px}
.nav__mark,.v-brand__mark,.topbar__logo,.coca-topbar__logo,.mnav__mark{color:var(--cl-accent)}

/* ============================================================
   ACCESSIBILITY — keyboard focus is always visible
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cl-accent);
  outline-offset:2px;
}
/* inputs: square, solid hairline */
input,select,textarea{
  border:1px solid var(--cl-border);
  font-family:var(--eo-grotesk);
  border-radius:0 !important;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cl-accent);outline-offset:0}

/* ============================================================
   RESPONSIVE — consistent across mobile / tablet / desktop
   ============================================================ */
@media(max-width:820px){
  .hero{padding:96px 16px 56px;min-height:70vh}
  .pillars,.deepdive,.firewall,.contrast{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .plugins,.effects{grid-template-columns:1fr}
}
@media(max-width:520px){
  .cards{grid-template-columns:1fr}
  .hero__title{font-size:clamp(2.2rem,11vw,3.2rem)}
}

/* ============================================================
   TRAINER DISPLAY SURFACES — border only, no fill (request 5)
   ============================================================ */
.wrap .card{background:transparent !important}
.reader,.audio,.coverage,.item{background:transparent !important;border:1px solid var(--cl-border) !important}

/* ============================================================
   REDUCED MOTION — no entrance/scroll animation
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important}
  .hero__content{animation:none !important;opacity:1 !important;transform:none !important}
}

/* ===== RESTORED VIP / TRAINER LAYOUT =====
   (taken from pre-e6939b2 current swiss.css; .chip rules scoped to .vlayout
   so the homepage morning style is untouched) ===== */
TRAINER LAYOUT (Swiss — colours resolve to --cl-* tokens; the
   dark 'theatre' app.css has been DELETED).
   ============================================================ */


.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid var(--border);background:var(--cl-bg);position:sticky;top:0;z-index:20}
.topbar__brand{display:flex;gap:14px;align-items:center}
.topbar__logo{font-size:30px;color:var(--accent)}
.topbar h1{font-size:1.25rem;letter-spacing:.5px}
.topbar__sub{font-size:.8rem;color:var(--dim)}
.topbar__actions{display:flex;gap:10px;align-items:center}

.wrap{max-width:860px;margin:26px auto;padding:0 18px;display:flex;flex-direction:column;gap:20px}


.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:22px}
.card__title{font-size:1.05rem;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.card__title .badge{margin-left:auto}


.btn{font-family:inherit;font-size:.92rem;cursor:pointer;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:9px 16px;border-radius:var(--r-sm);transition:.18s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--accent);color:var(--cl-text)}
.btn--primary{background:var(--cl-accent);color:#ffffff;border:none;font-weight:700;justify-content:center}
.btn--primary:hover{filter:brightness(1.08)}
.btn--primary:disabled{opacity:.55;cursor:not-allowed;filter:none}
.btn--ghost{background:transparent}
.btn--block{width:100%;margin-top:6px;padding:12px}
.btn--mini{padding:6px 11px;font-size:.8rem}
.btn--icon{padding:8px 11px;font-size:1.05rem;line-height:1}
.badge{background:var(--accent);color:#ffffff;border-radius:20px;font-size:.72rem;font-weight:700;padding:1px 8px;min-width:20px;text-align:center}


.mode-toggle{display:flex;gap:8px;background:var(--bg-soft);padding:5px;border-radius:var(--r-sm);margin-bottom:18px}
.mode-toggle__btn{flex:1;border:none;background:transparent;color:var(--dim);padding:10px;border-radius:7px;cursor:pointer;font-size:.95rem;font-family:inherit;transition:.18s}
.mode-toggle__btn.is-active{background:var(--panel-2);color:var(--text);box-shadow:0 0 0 1px var(--border)}


.field{display:block;margin-bottom:16px}
.field--row{display:flex;gap:14px;align-items:flex-end}
.field--inline{flex:1;margin-bottom:0}
.field__label{display:block;font-size:.82rem;color:var(--dim);margin-bottom:7px}
.field__input{width:100%;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:11px 13px;font-size:.95rem;font-family:inherit}
.field__input:focus{outline:none;border-color:var(--accent)}
select.field__input{appearance:none}
.field__row{display:flex;gap:8px;align-items:center}
.field__row .field__input{flex:1}
.field--range{display:flex;align-items:center;gap:14px}
.field__range{flex:1;accent-color:var(--accent);height:4px;cursor:pointer}
.field__rangeOut{min-width:48px;text-align:right;font-weight:700;color:var(--accent);font-size:1rem}
.hint--sm{font-size:.76rem;color:var(--dim);margin:8px 0 0;line-height:1.5}.vlayout .chips{display:flex;flex-wrap:wrap;gap:9px}.vlayout .chip{font-family:inherit;background:var(--bg-soft);border:1px solid var(--border);color:var(--dim);padding:7px 15px;border-radius:30px;cursor:pointer;font-size:.88rem;transition:.16s}.vlayout .chip:hover{color:var(--text)}.vlayout .chip.is-active{background:var(--cl-accent-soft);border-color:var(--accent);color:var(--accent)}


#trainerLevelChips{display:flex;flex-direction:column;gap:2px}
.vt-listgroup{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--border)}
.vt-listgroup:first-child{border-top:none}
.vt-listgroup__label{flex:0 0 auto;width:36px;font-weight:700;color:var(--accent-2);font-size:.86rem;text-align:center}
.vt-listgroup__row{display:flex;flex-wrap:wrap;gap:8px;flex:1}

.hint{font-size:.8rem;color:var(--muted);margin-top:8px}


.result__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.result__tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:.76rem;background:var(--panel-2);border:1px solid var(--border);color:var(--dim);padding:3px 10px;border-radius:20px}
.tag--theme{color:var(--accent);border-color:rgba(90,209,196,.4)}
.tag--style{color:var(--accent-2);border-color:rgba(226,35,26,.25)}
.result__tools{display:flex;gap:7px;flex-wrap:wrap}

.coverage{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:16px}
.coverage__top{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--dim)}
.coverage__top strong{font-size:1.5rem;color:var(--accent)}
.coverage__bar{position:relative;height:10px;background:var(--cl-bg);border-radius:20px;margin:9px 0 8px;overflow:hidden}
.coverage__fill{height:100%;width:0;background:var(--cl-accent);transition:width .8s ease;border-radius:20px}
.coverage__stats{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--dim)}
.coverage__stats b{color:var(--text)}


.reader{font-family:var(--font-en);font-size:1.08rem;line-height:1.9;color:#eef1f7;word-break:break-word;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:22px 26px}
.reader > :first-child{margin-top:0}
.reader > :last-child{margin-bottom:0}
.reader p{margin:0 0 1.1em}
.reader h1,.reader h2,.reader h3,.reader h4,.reader h5,.reader h6{line-height:1.35;margin:1.25em 0 .6em;color:var(--cl-text);font-weight:700}
.reader h1{font-size:1.7rem}.reader h2{font-size:1.45rem}.reader h3{font-size:1.2rem}.reader h4{font-size:1.05rem}
.reader ul,.reader ol{margin:0 0 1.1em;padding-left:1.6em}
.reader li{margin:.3em 0}
.reader blockquote{margin:0 0 1.1em;padding:.5em 1em;border-left:3px solid var(--accent);background:var(--cl-accent-soft);color:var(--dim);border-radius:0 8px 8px 0}
.reader pre{margin:0 0 1.1em;padding:14px 16px;background:var(--cl-bg);border:1px solid var(--border);border-radius:8px;overflow:auto;font-size:.92rem;line-height:1.6}
.reader code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--cl-accent-soft);padding:.12em .4em;border-radius:5px;font-size:.92em}
.reader pre code{background:none;padding:0}
.reader a{color:var(--accent);text-decoration:underline}
.reader hr{border:none;border-top:1px solid var(--border);margin:1.4em 0}
.reader strong{color:var(--cl-text);font-weight:700}
.reader em{color:var(--cl-text-dim)}
.reader .spk{color:var(--accent);font-weight:700}
.reader mark{background:rgba(226,35,26,.15);color:var(--cl-accent);padding:0 2px;border-radius:3px;cursor:pointer;transition:background .15s,color .15s}
.reader mark:hover{background:rgba(226,35,26,.28);color:#fff}
.reader mark.is-added{background:rgba(31,138,76,.12);color:var(--cl-ok);text-decoration:underline dotted}
.reader::selection{background:rgba(226,35,26,.18)}

.audio{margin-top:16px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px}
.audio__head{font-size:.85rem;color:var(--dim);margin-bottom:8px}
.audio audio{width:100%}
.audio #audioDownload{margin-top:8px}


.list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.item{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 15px}
.item__top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.item__title{font-weight:600}
.item__meta{font-size:.76rem;color:var(--muted);margin-top:3px}
.item__actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.item__text{font-size:.86rem;color:var(--dim);margin-top:8px;max-height:90px;overflow:hidden;font-family:var(--font-en);line-height:1.7}
.select-mini{background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:4px 8px;font-size:.78rem;font-family:inherit}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.dot--new{background:var(--red)}
.dot--learning{background:var(--accent-2)}
.dot--mastered{background:var(--green)}


.overlay{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--panel);border-left:1px solid var(--border);z-index:50;display:flex;flex-direction:column;animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
.drawer__body{padding:16px 18px;overflow:auto;flex:1}


.settings-body{padding:0}
.settings-sec{padding:18px 18px 22px;border-bottom:1px solid var(--border)}
.settings-sec:last-child{border-bottom:none}
.settings-sec h3{font-size:.95rem;color:var(--accent);margin:0 0 6px}
.audio-field[style*="display: none"]{display:none !important}
.audio-field{margin-top:4px}
.audio-voice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.audio-voice-row{grid-template-columns:1fr}}


.modal{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.modal__box{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);width:min(520px,96vw);max-height:90vh;overflow:auto}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal__body{padding:20px 22px}
.modal__body h3{font-size:.92rem;color:var(--accent);margin-bottom:12px}
.modal__body h3.mt{margin-top:22px}
.modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}


.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:11px 18px;border-radius:30px;z-index:80;font-size:.88rem;box-shadow:none;font-size:.86rem;text-align:center;padding:24px}


.dlg{display:flex;gap:12px;padding:10px 12px;border-radius:10px;margin:8px 0;background:var(--cl-accent-soft);border-left:3px solid var(--border)}
.dlg--a{border-left-color:var(--cl-accent)}
.dlg--b{border-left-color:var(--cl-accent)}
.dlg__spk{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--cl-bg)}
.dlg--a .dlg__spk{background:var(--cl-accent);color:#ffffff}
.dlg--b .dlg__spk{background:var(--cl-accent);color:#ffffff}
.dlg__body{flex:1;line-height:1.7}


.audio__ctrls{display:flex;gap:10px;margin:10px 0 14px;flex-wrap:wrap}
.utt-list{display:flex;flex-direction:column;gap:12px}
.utt{display:grid;grid-template-columns:26px 1fr;grid-template-areas:"spk text" "spk audio";gap:4px 12px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--cl-accent-soft);border-left:3px solid var(--border)}
.utt--a{border-left-color:var(--cl-accent)}
.utt--b{border-left-color:var(--cl-accent)}
.utt__spk{grid-area:spk;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.utt--a .utt__spk{background:var(--cl-accent);color:#ffffff}
.utt--b .utt__spk{background:var(--cl-accent);color:#ffffff}
.utt__text{grid-area:text;line-height:1.5;font-size:.92rem}
.utt__audio{grid-area:audio;width:100%;height:36px}


.voice-picker{margin-top:10px;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--cl-accent-soft)}
.voice-picker__list{max-height:260px;overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.voice-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}
.voice-item__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.voice-item__title{font-size:.88rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-item__tags{font-size:.72rem;color:var(--muted)}
.voice-item__acts{display:flex;gap:6px;flex:0 0 auto}
@media(max-width:560px){
  .field--row{flex-direction:column;align-items:stretch}
  .topbar__sub{display:none}
}


@media(max-width:820px){
  .topbar{flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px}
  .topbar__brand{flex:1 1 auto;min-width:0}
  .topbar__brand h1{font-size:1.1rem}
  .topbar__actions{
    order:2;flex-basis:100%;
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    justify-content:flex-start;
    border-top:1px solid var(--border);
    margin-top:2px;padding-top:10px;
  }
  
  #openSettings{display:none}
  
  .topbar__actions .btn{padding:7px 10px;font-size:.82rem;gap:5px}
  .topbar__actions .btn__label{display:none}
  
  .topbar__actions .btn--vip .btn__label{display:inline}
  
  .member__user{display:none}
  .member__ok{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.82rem;font-weight:600;color:var(--cl-accent,var(--accent));
    background:var(--cl-accent-soft,rgba(226,35,26,.1));
    border:1px solid var(--cl-accent-soft,rgba(226,35,26,.25));
    padding:6px 11px;border-radius:var(--r-sm);
  }
}


.drawer__search{display:flex;align-items:center;gap:10px;padding:14px 18px 6px}
.drawer__count{flex:0 0 auto;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:7px;padding:12px 18px 24px}
.vword{display:flex;align-items:baseline;gap:7px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--muted-bg);color:var(--text);font-size:.86rem;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .08s}
.vword:hover{border-color:var(--accent);background:rgba(226,35,26,.08)}
.vword:active{transform:scale(.97)}
.vword__rk{font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.vword--sm{padding:5px 8px;font-size:.8rem;gap:0}


.tag--level{color:var(--cl-text-dim);border-color:rgba(178,90,143,.45)}
.coverage--level .coverage__top strong{color:var(--accent-2)}


.voice-group h3{font-size:.92rem;color:var(--accent);margin-bottom:12px}
.voice-group.mt{margin-top:22px}
/* TTS 段：非会员锁定提示 + 仅本地部署入口置灰 */
.tts-lock{padding:16px 0 6px}
.tts-lock .btn{margin-top:10px}
.vnav__item.is-locked{opacity:.5;cursor:not-allowed}
.voice-opts{display:flex;flex-direction:column;gap:10px}
.voice-opt{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-soft);cursor:pointer;transition:.16s}
.voice-opt:hover{border-color:var(--accent)}
.voice-opt.is-active{border-color:var(--accent);background:var(--cl-accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.voice-opt input{accent-color:var(--accent);width:16px;height:16px;flex:0 0 auto}
.voice-opt__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.voice-opt__main b{color:var(--text);font-size:.95rem}
.voice-opt__desc{font-size:.76rem;color:var(--dim)}
.voice-opt__play{flex:0 0 auto}


.vlayout{display:flex;min-height:100vh}


.vsidebar{position:fixed;top:0;left:0;bottom:0;z-index:30;width:228px;background:var(--bg-soft);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 0;overflow-y:auto;transition:transform .25s ease}
.vsidebar__brand{display:flex;align-items:center;gap:10px;padding:0 18px 16px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.vsidebar__brand .ico--brand{width:32px;height:32px;color:var(--accent);flex:0 0 auto}
.vsidebar__title{font-weight:700;font-size:.95rem;color:var(--text)}
.vsidebar__foot{padding:14px 18px;margin-top:auto;border-top:1px solid var(--border)}


.vnav{display:flex;flex-direction:column;gap:2px;padding:8px 10px;flex:1}
.vnav__item{display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--dim);font-family:inherit;font-size:.88rem;text-align:left;padding:10px 12px;cursor:pointer;transition:background .15s,color .15s;text-decoration:none}
.vnav__item:hover{background:var(--panel-2);color:var(--text)}
.vnav__item .ico{width:18px;height:18px;flex:0 0 auto}
.vnav__home{display:flex;align-items:center;gap:10px;padding:12px 28px;color:var(--dim);font-size:.88rem;text-decoration:none;border-top:1px solid var(--border);margin-top:2px;transition:color .15s}
.vnav__home:hover{color:var(--accent)}
.vnav__home .ico{width:18px;height:18px;flex:0 0 auto}


.vmain{flex:1;margin-left:228px;min-width:0}


.vnav__toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:1px solid var(--border);color:var(--text);cursor:pointer}
.vnav__toggle .ico{width:22px;height:22px}
.vnav__toggle:hover{color:var(--accent)}


@media(max-width:920px){
  .vsidebar{transform:translateX(-100%)}
  .vsidebar.is-open{transform:translateX(0);box-shadow:none}
  .vmain{margin-left:0}
  .vnav__toggle{display:inline-flex}
  
  .topbar__sub{display:none}
}


.card.is-collapsible{}
.card__head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;font-family:inherit;text-align:left;padding:0 0 16px;cursor:pointer;color:var(--text)}
.card__head-title{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:8px;flex:1}
.card__head-title .ico{width:20px;height:20px;flex:0 0 auto}
.card__head .badge{margin-left:4px}
.chevron{width:20px;height:20px;flex:0 0 auto;transition:transform .25s ease;color:var(--dim)}
.card.is-collapsed .chevron{transform:rotate(-90deg)}
.card.is-collapsed .card__body{display:none}

.card.is-collapsed .card__head{padding-bottom:0}


.wrap .card{background:transparent !important}
.reader,.audio,.coverage,.item{background:transparent !important;border:1px solid var(--cl-border) !important}


.topbar{background:var(--cl-bg) !important;border-bottom:1px solid var(--cl-border) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;color:var(--cl-text) !important}
.topbar__sub{color:var(--cl-text-dim) !important}
.topbar__logo,.vsidebar__brand .ico--brand{color:var(--cl-accent) !important}
.vsidebar{background:var(--cl-bg-2) !important;border-right:1px solid var(--cl-border) !important}
.vmain{background:var(--cl-bg) !important}
.vnav__item{color:var(--cl-text-dim) !important}
.vnav__item:hover{background:var(--cl-bg-2) !important;color:var(--cl-text) !important}
.vnav__item.is-active{background:var(--cl-accent) !important;color:#fff !important}
.vnav__home{color:var(--cl-text-dim) !important}
.vnav__home:hover{color:var(--cl-accent) !important}.vlayout .chip.is-active{background:var(--cl-accent) !important;color:#fff !important;border-color:var(--cl-accent) !important}


@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important}
  .hero__content{animation:none !important;opacity:1 !important;transform:none !important}
}

/* ===== .sources (Credits / 数据来源) — SHARED by coca-vocab & vocabulary =====
   Canonical card format, identical to vocabulary.html 数据来源与说明.
   Single source of truth: kept here in swiss.css because coca-vocab.html
   does NOT load vocab.css, yet must render the same as vocabulary.html. */
.sources{background:var(--cl-muted-bg);border:1px solid var(--cl-border);padding:26px 28px}
.sources ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.sources li{font-family:var(--font-cn);font-size:.8rem;color:var(--cl-text-dim);padding-left:18px;position:relative;line-height:1.55}
.sources li::before{content:"▸";position:absolute;left:0;color:var(--cl-accent)}
.sources a{color:var(--cl-accent);border-bottom:1px solid transparent;transition:border-color .2s}
.sources a:hover{border-color:var(--cl-accent)}
.sources__note{font-family:var(--font-cn);font-size:.76rem;color:var(--cl-text-dim);margin-top:18px;line-height:1.7;border-top:1px solid var(--cl-border);padding-top:16px}
.sources__note b{color:var(--cl-text)}

/* ============================================================
   .nav structural base — moved here from style.css so the
   homepage header works on EVERY page (vocabulary, readability,
   trainer, coca-vocab, USA-accent …) without pulling in
   style.css's dark-theme base. Colour/paper rules are already
   forced light by the TOP BARS block above (!important).
   Matching the homepage header exactly.
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,40px);background:#ffffff;border-bottom:1px solid var(--cl-border);transition:border-color .4s,background .4s}
.nav.is-scrolled{border-color:var(--cl-border);background:#ffffff}
.nav__brand{font-family:var(--font-serif);font-weight:700;font-size:1.15rem;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.nav__mark{font-size:1.25rem}
.nav__links{display:flex;gap:clamp(10px,1.8vw,26px);list-style:none;font-size:.86rem;font-weight:400}
.nav__links a{color:var(--cl-text-dim);transition:color .25s;position:relative}
.nav__links a:hover{color:var(--cl-accent)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--cl-accent);transition:width .25s}
.nav__links a:hover::after{width:100%}
.nav__item{position:relative}
.nav__parent-link{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.nav__parent--accent>.nav__parent-link{color:var(--cl-accent);font-weight:700}
.nav__parent--accent>.nav__parent-link:hover{color:var(--cl-accent)}
.nav__caret{font-size:.62rem;opacity:.8}
.nav__dropdown{position:absolute;top:calc(100% + 10px);left:0;min-width:168px;list-style:none;display:none;flex-direction:column;gap:2px;padding:8px;background:#ffffff;border:1px solid var(--cl-border);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.12);z-index:60}
.nav__dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav__item:hover>.nav__dropdown{display:flex}
.nav__dropdown a{color:var(--cl-text-dim);padding:9px 13px;border-radius:8px;font-size:.84rem;white-space:nowrap;transition:color .2s,background .2s}
.nav__dropdown a:hover{color:var(--cl-accent);background:var(--cl-accent-soft)}
.nav__dropdown a::after{display:none}
.nav__sub{top:0;left:100%;margin-left:0;min-width:156px}
.nav__sub::before{content:"";position:absolute;top:0;left:-12px;width:12px;height:100%}
.nav__item:hover>.nav__sub{display:flex}
@media(max-width:820px){.nav__links{display:none}}
/* Trainer app header: reuse the unified site .nav, but keep it inside
   the main content column (right of the fixed 228px VIP sidebar) and
   make it sticky so it scrolls with the app instead of overlapping. */
.vmain .nav--app{position:sticky;top:0;left:auto;right:auto;width:auto;z-index:25}