/* ============================================================
   App layout — Home (platform) + Unit (learning) pages
   ============================================================ */

/* ---------------- Top navigation ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-lg); }
.brand:hover { text-decoration: none; }
.brand__logo {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: none;
  background: linear-gradient(135deg, var(--brand-600), var(--sky-500));
  display: grid; place-items: center; color: #fff; font-size: 20px; box-shadow: var(--sh-brand);
}
.brand__sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); display: block; }
.nav__links { display: flex; align-items: center; gap: var(--sp-2); }
.nav__link { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--gray-600); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.nav__link:hover { background: var(--gray-100); color: var(--gray-800); text-decoration: none; }
/* 排行榜入口在导航里保持高亮，呼应竞赛主线 */
.nav__link--hot {
  color: var(--brand-700);
  font-weight: var(--fw-semibold);
  background: var(--brand-50);
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--brand-100);
}
.nav__link--hot:hover { background: var(--brand-100); color: var(--brand-800); }

/* ---------------- Hero ---------------- */
.hero { position: relative; overflow: hidden; padding: var(--sp-20) 0 var(--sp-16); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 12% 0%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(50% 50% at 92% 10%, rgba(14,165,233,.12), transparent 60%);
  pointer-events: none;
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-12); align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.hero h1 { font-size: var(--fs-5xl); letter-spacing: -.02em; margin-bottom: var(--sp-5); }
.hero h1 .grad { background: linear-gradient(120deg, var(--brand-600), var(--sky-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 46ch; margin-bottom: var(--sp-8); line-height: var(--lh-normal); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__stats { display: flex; gap: var(--sp-8); margin-top: var(--sp-10); }
.stat__num { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--brand-700); line-height: 1; }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }

/* hero visual card */
.hero__visual { position: relative; }
.device {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl); overflow: hidden;
}
.device__bar { display: flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-4); background: var(--gray-50); border-bottom: 1px solid var(--border); }
.device__dot { width: 11px; height: 11px; border-radius: var(--r-full); }
.device__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.mini-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--gray-50); border: 1px solid var(--border); }
.mini-row__ic { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; flex: none; }
.mini-row__tt { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.mini-row__sub { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------- Section heading ---------------- */
.section { padding: var(--sp-16) 0; }
.section__head { max-width: 60ch; margin-bottom: var(--sp-8); }
.section__kicker { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-600); letter-spacing: .08em; text-transform: uppercase; }
.section h2 { font-size: var(--fs-3xl); margin-top: var(--sp-2); letter-spacing: -.01em; }
.section__desc { color: var(--text-muted); font-size: var(--fs-md); margin-top: var(--sp-3); }

/* ---------------- Feature modules grid ---------------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.feat {
  padding: var(--sp-6); background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); transition: all var(--t-base);
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--brand-200); }
.feat__ic { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 22px; color: #fff; margin-bottom: var(--sp-4); box-shadow: var(--sh-sm); }
.feat h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.feat p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* ---------------- Bookshelf ---------------- */
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.book {
  display: flex; gap: var(--sp-4); padding: var(--sp-5); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); transition: all var(--t-base); cursor: pointer;
}
.book:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--brand-200); }
.book__cover {
  width: 64px; flex: none; border-radius: var(--r-sm); aspect-ratio: 3/4;
  display: grid; place-items: center; color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  box-shadow: var(--sh-md); text-align: center; padding: 6px; line-height: 1.25;
}
.book__meta { min-width: 0; }
.book__title { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.35; }
.book__author { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.book__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-3); }

/* ---------------- 课程目录（20 章） ---------------- */
.unit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.unit-card {
  display: block; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-surface); transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand-300); }
.unit-card__n { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .04em; color: var(--brand-600); text-transform: uppercase; }
.unit-card__t { margin-top: 6px; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.35; }
.unit-card__en { margin-top: 2px; font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.35; }
.unit-card__meta { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }
.unit-card__nums { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.unit-card__nums span { padding: 2px 8px; border-radius: var(--r-full); background: var(--gray-100); font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 1000px) { .unit-grid { grid-template-columns: repeat(2, 1fr); } .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .unit-grid { grid-template-columns: 1fr; } .shelf { grid-template-columns: 1fr; } }

/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-surface); padding: var(--sp-10) 0; margin-top: var(--sp-12); }
.footer__grid { display: flex; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; }
.footer a { color: var(--text-muted); font-size: var(--fs-sm); }
.footer a:hover { color: var(--brand-700); }

/* =========================================================
   UNIT PAGE
   ========================================================= */
.unit-hero { background: linear-gradient(135deg, var(--brand-700), var(--brand-500) 60%, var(--sky-500)); color: #fff; padding: var(--sp-10) 0; }
.unit-hero .badge--brand { background: rgba(255,255,255,.16); color: #fff; }
.unit-hero__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.unit-hero h1 { font-size: var(--fs-3xl); color: #fff; letter-spacing: -.01em; }
.unit-hero__meta { display: flex; gap: var(--sp-6); margin-top: var(--sp-4); flex-wrap: wrap; }
.unit-hero__meta div { font-size: var(--fs-sm); opacity: 1; text-shadow: 0 1px 2px rgba(15,23,42,.30); }
.unit-hero__meta b { display: block; font-size: var(--fs-lg); }
.unit-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: var(--sp-4) 0; color: var(--text-muted); }
.unit-breadcrumb a { color: var(--text-muted); }

/* module nav sticky */
.modnav { position: sticky; top: var(--nav-h); z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; }
.modnav__scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }

/* module panel */
.module { padding: var(--sp-10) 0; border-bottom: 1px solid var(--border); }
.module:last-child { border-bottom: none; }
.module__head { margin-bottom: var(--sp-6); }
.module__title { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-2xl); }
.module__idx { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.module__desc { color: var(--text-muted); margin-top: var(--sp-2); max-width: 70ch; }

/* ---- Word preview ---- */
.word-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.word-card { padding: var(--sp-5); }
.word-card__top { display: flex; gap: var(--sp-4); align-items: flex-start; }
.word-card__img { width: 76px; height: 76px; flex: none; border-radius: var(--r-md); background: var(--gray-100); display: grid; place-items: center; font-size: 34px; border: 1px solid var(--border); overflow: hidden; }
.word-card__img img { width: 100%; height: 100%; object-fit: cover; }
.word-card__term { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.word-card__phon { color: var(--text-muted); font-size: var(--fs-sm); font-family: var(--font-mono); }
.word-card__pos { margin-left: auto; }
.word-card__mean { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.word-card__cn { color: var(--text-base); }
.word-card__en { color: var(--text-muted); }
.word-card__ex { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--gray-50); border-left: 3px solid var(--brand-300); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); color: var(--gray-700); font-style: italic; }
.word-card__ex b { color: var(--brand-700); font-style: normal; }

/* ---- Dictation ---- */
.dict-block { margin-bottom: var(--sp-8); }
.dict-passage { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 2.1; color: var(--text-base); }
.dict-blank { display: inline-block; min-width: 90px; border-bottom: 2px solid var(--brand-300); margin: 0 4px; text-align: center; color: var(--brand-700); font-weight: var(--fw-semibold); }
.dict-blank input { border: none; border-bottom: 2px dashed var(--brand-300); background: transparent; text-align: center; font-size: inherit; font-family: inherit; width: 100%; padding: 0 4px; color: var(--brand-700); }
.dict-blank input:focus { outline: none; border-bottom-color: var(--brand-600); }
.dict-blank.is-correct { border-bottom-color: var(--success); }
.dict-blank.is-correct input { border-bottom-color: var(--success); color: #047857; }
.dict-blank.is-wrong { border-bottom-color: var(--danger); }
.dict-blank.is-wrong input { border-bottom-color: var(--danger); color: #b91c1c; }
.dict-wordlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--sp-3); }
.dict-word { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.dict-word input { flex: 1; border: none; border-bottom: 1px solid var(--border); background: transparent; font-size: var(--fs-base); padding: 4px 2px; }
.dict-word input:focus { outline: none; border-bottom-color: var(--brand-600); }

/* ---- Quiz (listening / reading) ---- */
.quiz-q { padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.quiz-q:first-child { border-top: none; }
.quiz-q__no { font-weight: var(--fw-bold); color: var(--brand-700); margin-right: 6px; }
.quiz-q__text { font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.quiz-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-2); cursor: pointer; transition: all var(--t-fast); background: var(--bg-surface); }
.quiz-opt:hover { border-color: var(--brand-300); background: var(--brand-50); }
.quiz-opt input { accent-color: var(--brand-600); width: 18px; height: 18px; }
.quiz-opt.is-correct { border-color: var(--success); background: var(--success-soft); }
.quiz-opt.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.quiz-opt__tag { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* ---- Speaking ---- */
.speak-clip { background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.speak-clip__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.recorder { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--bg-surface); flex-wrap: wrap; }
.rec-dot { width: 12px; height: 12px; border-radius: var(--r-full); background: var(--danger); }
.rec-dot.is-live { animation: blink 1s steps(2,start) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.rec-wave { flex: 1; min-width: 120px; height: 40px; display: flex; align-items: center; gap: 2px; }
.rec-wave span { flex: 1; background: var(--brand-300); border-radius: var(--r-full); height: 20%; transition: height var(--t-fast); }

/* ---- Writing ---- */
.write-good { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
.good-card { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--gray-50); }
.good-card__en { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--text-base); }
.good-card__cn { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }
.write-prompt { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-surface); }
.write-prompt--t1 { border-left: 4px solid var(--sky-500); }
.write-prompt--t2 { border-left: 4px solid var(--brand-600); }
.write-meta { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); flex-wrap: wrap; }
.write-count { font-variant-numeric: tabular-nums; }

/* ---- Summary ---- */
.summary-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); }
.summary-card { padding: var(--sp-6); }
.summary-list li { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; color: var(--text-base); }
.summary-list li::before { content: "▹"; color: var(--brand-500); flex: none; }
.takeaway { padding: var(--sp-5); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--brand-50), #e0f2fe); border: 1px solid var(--brand-100); }
.takeaway h4 { color: var(--brand-800); margin-bottom: var(--sp-2); }

/* result banner */
.result { padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.result--ok { background: var(--success-soft); border: 1px solid #a7f3d0; }
.result--mid { background: var(--warning-soft); border: 1px solid #fde68a; }
.result__score { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.result--ok .result__score { color: #047857; }
.result--mid .result__score { color: #b45309; }

/* ---------------- Dictation rows ---------------- */
.dict-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border); }
.dict-row:last-child { border-bottom: none; }
.dict-row__no { width: 24px; height: 24px; flex: none; border-radius: var(--r-full); background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.dict-row .dict-passage { flex: 1; font-size: var(--fs-md); line-height: 1.9; }
.dict-row .input { flex: 1; }

/* ---------------- Reading: two-column ---------------- */
.reading-two-col { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: var(--sp-6); align-items: start; }
.reading-passage, .reading-questions {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--sh-sm);
}
.reading-passage { position: sticky; top: calc(var(--nav-h) + 64px); max-height: 74vh; overflow: auto; }
.reading-questions { position: sticky; top: calc(var(--nav-h) + 64px); max-height: 74vh; overflow: auto; }
.reading-passage__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.reading-passage__head h3 { font-size: var(--fs-lg); }
.reading-glossary { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--border); }
.reading-questions__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); flex-wrap: wrap; }

/* ---------------- Writing grid ---------------- */
.write-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

/* =========================================================
   RESEARCH + GUIDE PAGES
   ========================================================= */
.page-hero { background: linear-gradient(135deg, var(--brand-700), var(--brand-500) 55%, var(--sky-500)); color: #fff; padding: var(--sp-12) 0; }
.page-hero h1 { color: #fff; font-size: var(--fs-4xl); letter-spacing: -.01em; }
.page-hero p { color: rgba(255,255,255,.92); max-width: 70ch; margin-top: var(--sp-3); }
.page-hero .badge { background: rgba(255,255,255,.16); color: #fff; }

.subnav { position: sticky; top: var(--nav-h); z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th { text-align: left; padding: var(--sp-3) var(--sp-4); background: var(--gray-50); color: var(--text-strong); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-base); }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--brand-50); }
.pill { display: inline-block; padding: 2px 9px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.pill--vh { background: var(--danger-soft); color: #b91c1c; }
.pill--h { background: var(--warning-soft); color: #b45309; }
.pill--m { background: var(--info-soft); color: #1d4ed8; }

.step-list { display: grid; gap: var(--sp-4); }
.step { display: flex; gap: var(--sp-4); padding: var(--sp-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.step__no { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); background: var(--brand-600); color: #fff; display: grid; place-items: center; font-weight: var(--fw-bold); }
.step h3 { font-size: var(--fs-lg); margin-bottom: 4px; }
.step p { color: var(--text-muted); font-size: var(--fs-sm); }

.callout { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-subtle); }
.callout--warn { background: var(--warning-soft); border-color: #fde68a; }
.callout--info { background: var(--brand-50); border-color: var(--brand-100); }
.callout h4 { margin-bottom: var(--sp-2); }

.word-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.word-group { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.word-group__t { font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--brand-700); }
.word-group .tag { margin: 3px 3px 0 0; }

.bank-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bank-item { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); font-size: var(--fs-sm); }

.guide-block { padding: var(--sp-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--sp-5); }
.guide-block h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.guide-block ul.ticks li { display: flex; gap: var(--sp-2); padding: 4px 0; font-size: var(--fs-sm); }
.guide-block ul.ticks li::before { content: "✓"; color: var(--success); font-weight: var(--fw-bold); flex: none; }
.kbd { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--gray-100); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.tree { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.9; color: var(--gray-700); white-space: pre; overflow-x: auto; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }

/* ================= 单元页新增组件 ================= */

/* 章节切换 */
.chapter-switch { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; }
.chapter-switch__item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); font-size: var(--fs-sm); color: var(--text-base); text-decoration: none; transition: all .15s; }
.chapter-switch__item:hover { border-color: var(--brand-300); background: var(--brand-50); }
.chapter-switch__item.is-active { border-color: var(--brand-600); background: var(--brand-50); box-shadow: var(--sh-sm); }
.chapter-switch__item.is-active .chapter-switch__n { color: var(--brand-700); }
.chapter-switch__n { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }

/* 导语压在蓝紫渐变上，必须用纯白；渐变右端（sky-500）偏亮，加一层极淡的暗描边保证清晰 */
.unit-hero__intro { max-width: 72ch; color: var(--text-invert); font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-5); line-height: var(--lh-normal); text-shadow: 0 1px 2px rgba(15,23,42,.30); }

/* 片段头 */
.excerpt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.excerpt-head__title { font-size: var(--fs-xl); }
.excerpt-head__en { font-size: var(--fs-sm); color: var(--text-muted); font-family: var(--font-serif); }
.excerpt-head__badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.excerpt-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-5); }

/* 片段进度条 */
.excerpt-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
.excerpt-strip__item { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-subtle); cursor: pointer; transition: all .15s; }
.excerpt-strip__item:hover { border-color: var(--brand-300); }
.excerpt-strip__item.is-active { border-color: var(--brand-600); background: var(--brand-50); }
.excerpt-strip__n { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--brand-700); }
.excerpt-strip__t { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 2px 0; }
.excerpt-strip__m { font-size: var(--fs-xs); color: var(--text-muted); }
.seg-sub { display: block; font-size: 11px; color: var(--text-muted); font-weight: var(--fw-normal); }

/* 题目 */
.q { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); margin-bottom: var(--sp-3); }
.q.is-right { border-color: #a7f3d0; background: var(--success-soft); }
.q__text { font-size: var(--fs-md); margin-bottom: var(--sp-3); line-height: var(--lh-normal); }
.q__opts { display: flex; flex-direction: column; gap: 6px; }
.q__opts--row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); }
.opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); }
.opt:hover { background: var(--gray-100); }
.opt input { accent-color: var(--brand-600); }
.q__feedback { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.q__feedback--ok { color: #047857; }
.q__feedback--no { color: var(--danger); }
.q__feedback--miss { color: var(--warning); }
.q__tag { display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: var(--r-full); background: var(--gray-100); color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: .02em; }
.q__input { max-width: 220px; }
/* 原文依据：答完题可回到原文核对 */
.q__ev { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--brand-300, #a5b4fc); background: var(--gray-50); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.6; }
.q__ev-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: var(--r-full); background: #e0e7ff; color: #3730a3; font-size: var(--fs-xs); }

/* 小标签与图标按钮 */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-surface); font-size: var(--fs-sm); }
.icon-btn--xs { width: 22px; height: 22px; font-size: 11px; border: none; background: transparent; }

/* 听写行 */
.dict-row__text { flex: 1; font-size: var(--fs-md); line-height: 1.8; }
.blank { display: inline-block; min-width: 108px; border-bottom: 1.5px solid var(--brand-400); }
.dict-row__fb { font-size: var(--fs-sm); min-width: 3.5em; }
.dict-row__fb.is-ok { color: #047857; font-weight: var(--fw-semibold); }
.dict-row__fb.is-no { color: var(--danger); font-weight: var(--fw-semibold); }
.dict-word__idx { font-size: var(--fs-sm); color: var(--text-muted); min-width: 1.6em; }
.input--sm { max-width: 190px; }

/* 小标题与工具类 */
.subhead { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* 写作预热 */
.scaffold-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.scaffold-card { padding: var(--sp-5); }
.scaffold-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.bank { margin-bottom: var(--sp-4); }
.bank__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-700); margin-bottom: var(--sp-2); }
.bank__note { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2); line-height: 1.6; }
.bank__item { padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left: 2px solid var(--brand-100); margin-bottom: var(--sp-2); }
.bank__en { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 4px; }
.bank__cn { font-size: var(--fs-xs); color: var(--text-muted); }
.bank__model { font-size: var(--fs-xs); color: var(--gray-700); font-family: var(--font-serif); margin-top: 3px; line-height: 1.6; }
.struct-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border); }
.struct-row:last-child { border-bottom: none; }
.struct-row__n { width: 24px; height: 24px; flex: none; border-radius: var(--r-full); background: var(--brand-600); color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.struct-row__t { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.struct-row__d { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; }
.struct-row__m { font-size: var(--fs-xs); color: var(--gray-700); font-family: var(--font-serif); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.drill-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.drill-row__s { flex: 1; min-width: 200px; font-size: var(--fs-sm); }
.drill-row__fb { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.drill-row__fb.is-ok { color: #047857; }
.drill-row__fb.is-no { color: var(--danger); }

/* 听力原文与录音条目 */
.script-box { margin-top: var(--sp-5); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--gray-50); line-height: 1.9; }
.rec-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.rec-item__meta { display: flex; flex-direction: column; min-width: 80px; }
.rec-item audio { flex: 1; min-width: 220px; height: 36px; }
.rec-dot.is-on { animation: blink 1s steps(2, start) infinite; }
.result--warn { background: var(--warning-soft); border: 1px solid #fde68a; }
.result--warn .result__score { color: #b45309; }
.result--bad { background: #fef2f2; border: 1px solid #fecaca; }
.result--bad .result__score { color: #b91c1c; }
.write-count.is-ok { color: #047857; font-weight: var(--fw-semibold); }
.sp-sent { display: inline; }
.sp-sent:hover { background: var(--brand-50); }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .feat-grid, .shelf, .word-grid, .summary-grid, .write-good, .word-groups { grid-template-columns: 1fr; }
  .reading-two-col, .write-grid { grid-template-columns: 1fr; }
  .reading-passage, .reading-questions { position: static; max-height: none; }
  .scaffold-grid { grid-template-columns: 1fr; }
  .chapter-switch { grid-template-columns: repeat(2, 1fr); }
  .excerpt-strip { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--fs-4xl); }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .hero__stats { gap: var(--sp-5); }
  .section { padding: var(--sp-10) 0; }
  .feat-grid[style*="repeat(4"] { grid-template-columns: 1fr !important; }
  .chapter-switch { grid-template-columns: 1fr; }
  .q__opts--row { flex-direction: column; }
}

/* ---------------- 书架：一书一区 ---------------- */
.book-shelf { padding-top: var(--sp-8); margin-top: var(--sp-8); border-top: 1px dashed var(--border); }
.book-shelf:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.book-shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.book-shelf__title { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.book-shelf__title h3 { font-size: var(--fs-xl); color: var(--text-strong); letter-spacing: -.01em; }
.book-shelf__en { flex-basis: 100%; font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--text-muted); }
.book-shelf__nums { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.book-shelf__nums span { padding: 3px 10px; border-radius: var(--r-full); background: var(--gray-100); font-size: var(--fs-xs); color: var(--text-muted); }
.book-shelf__nums b { color: var(--text-strong); font-size: var(--fs-sm); }
.book-shelf__blurb { margin: var(--sp-3) 0 var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); max-width: 88ch; }
.book-badge { padding: 2px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff; }
.book-badge--原版 { background: var(--brand-700); }
.book-badge--童书 { background: var(--sky-500); }
.book-badge--绘本 { background: #0d9488; }
@media (max-width: 620px) { .book-shelf__head { align-items: flex-start; } }