:root {
  --bg: #fdf6f0;
  --bg-soft: #fff;
  --ink: #2b2622;
  --ink-soft: #6b625a;
  --muted: #9a9088;
  --primary: #e8533f;
  --primary-dark: #c8412f;
  --accent: #14b8a6;
  --accent-soft: #e6f7f4;
  --gold: #f4a93b;
  --line: #efe3d8;
  --shadow: 0 10px 30px rgba(120, 70, 40, 0.10);
  --radius: 18px;
  --radius-sm: 12px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Inter", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(253, 246, 240, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* min-height, not height: when the row wraps (narrow screens) the header must
   grow, otherwise the second row spills out and gets covered by the sticky bar. */
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; min-height: 64px; padding: 10px 0; gap: 10px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
.brand-mark {
  display: grid; place-items: center;
  height: 38px; padding: 0 9px; border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  box-shadow: var(--shadow);
}
/* 漢字 in Shuowen seal script (小篆), from assets/hanzi-seal.svg — vector outlines, because
   seal forms are not in Unicode and the fonts that carry them are commercially licensed.
   The badge is a rounded rectangle rather than a square so two glyphs stay legible at
   header size; its size and white fill are baked into the file (see tools/build-logo.js),
   so a stale copy of this stylesheet cannot make the mark render oversized or black. */
.brand-mark-img { display: block; }
.brand-text { font-size: 18px; letter-spacing: .2px; }
/* nowrap so the tabs never split across two lines, and 10px of padding because
   eight of them (Home → History) share one row with the brand, the search field
   and the level switch. Medium screens shrink them, narrow screens wrap. */
.nav-tabs { display: flex; gap: 2px; flex-wrap: nowrap; }
.tab {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 10px; border-radius: 999px; transition: .15s; white-space: nowrap;
}
.tab:hover { background: #f6e7dc; color: var(--ink); }
@media (max-width: 1000px) { .tab { font-size: 13.5px; padding: 7px 8px; } }
.tab.active { background: var(--primary); color: #fff; }
/* a parked stage (HIDDEN_STAGES in js/app.js) keeps its button but shows nothing */
.nav-tabs .tab.hidden { display: none; }

/* framework switch */
.framework-switch {
  display: flex; gap: 2px; background: #f6e7dc; padding: 3px; border-radius: 999px; margin-left: 6px;
  flex: 0 0 auto;   /* never squeeze the level switch */
}
.fw-btn {
  border: none; background: transparent; cursor: pointer; font: inherit; font-weight: 600;
  font-size: 13px; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; transition: .15s; white-space: nowrap;
}
.fw-btn:hover { color: var(--ink); }
.fw-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* the header's right-hand slot: the compact search field, the only way to search
   on pages that have no box of their own. Home and the results page hide it
   (showStage() toggles .hidden) because they already carry a big one. */
.header-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header-search.hidden { display: none; }

/* ---------- Views ---------- */
.view { display: none; padding: 30px 0 60px; animation: fade .25s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; transition: .15s;
  text-decoration: none;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 7px 12px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: visible; text-align: center;
  background: radial-gradient(120% 140% at 0% 0%, #ffe9d6 0%, #fdf6f0 55%);
  border: 1px solid var(--line); border-radius: 26px;
  padding: 48px 40px; margin-bottom: 34px;
}
/* keep the copy above the two washes */
.hero > * { position: relative; z-index: 1; }
/* …and the search box above its neighbours: the recent-searches panel hangs off it,
   and it should cover Start HSK 1 / Test yourself rather than slide behind them */
.hero > .hero-search { z-index: 3; }
/* 汉字 / 漢字 as background texture — one per script, each written top-to-bottom,
   offset so the two blocks never line up */
.hero-deco {
  position: absolute; z-index: 0;
  display: flex; flex-direction: column;
  font-family: "Noto Sans SC", sans-serif; font-size: 92px; font-weight: 900;
  line-height: 1.04; color: rgba(232, 83, 63, .08); user-select: none;
}
/* sits fully inside the hero — no bleeding off the edge, so every glyph stays visible */
.hero-deco.deco-simp { left: 22px; top: 16px; }          /* 简 · simplified — upper left */
.hero-deco.deco-trad { right: 22px; bottom: 16px; }      /* 繁 · traditional — lower right */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Stage cards ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 18px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 26px; }
.section-head .sub { color: var(--ink-soft); margin: 4px 0 0; }

.stage-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 10px; }
.stage-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; cursor: pointer; transition: .18s; position: relative; overflow: hidden;
}
.stage-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #f3c9b6; }
.stage-card .num { font-family: "Noto Sans SC", sans-serif; font-size: 34px; color: var(--primary); font-weight: 900; }
.stage-card h3 { margin: 6px 0 6px; font-size: 19px; }
.stage-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.stage-card .go { margin-top: 14px; color: var(--primary); font-weight: 600; font-size: 14px; }

/* ---------- Progress ---------- */
.progress { background: #fff; border: 1px solid var(--line); border-radius: 999px; height: 12px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #4fd1c5); border-radius: 999px; transition: width .4s; }
.progress-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; }
.progress-row .label { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.progress-row .pct { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.home-progress { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 30px; }
.home-progress h3 { margin: 0 0 12px; font-size: 17px; }

/* ---------- Grids ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-align: center; transition: .18s; position: relative;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .hanzi { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 46px; line-height: 1.1; color: var(--ink); }
.card .pinyin { color: var(--primary); font-weight: 600; margin-top: 6px; font-size: 15px; }
.card .en { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.card .cat { display: inline-block; margin-top: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #faf2ea; padding: 3px 9px; border-radius: 999px; }

/* dual level badges */
.lvl-line { margin-top: 8px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dialogue-card .lvl-line { justify-content: flex-start; }
.lvl-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--gold)); padding: 2px 9px; border-radius: 999px;
}
.lvl-alt {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); padding: 2px 9px; border-radius: 999px;
}
.card .example { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.card.learned::after { content: "✓ learned"; position: absolute; top: 10px; right: 10px; font-size: 11px; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; font-weight: 700; }

/* word cards */
.word-card { text-align: left; }
.word-card .hanzi { font-size: 34px; text-align: left; }
.word-card .pinyin, .word-card .en { text-align: left; }

/* sentence cards — a whole line of text, so they read left-aligned and wider */
.sentence-card { text-align: left; cursor: pointer; }
.sentence-card .sent-zh {
  font-family: "Noto Sans SC", sans-serif; font-weight: 700; font-size: 24px;
  line-height: 1.5; color: var(--ink);
}
.sentence-card .pinyin, .sentence-card .en { text-align: left; }
.sentence-card .en { margin-top: 6px; }
.sentence-card .sent-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.sentence-card .sent-mark { font-size: 12px; color: var(--muted); }
.sentence-card.learned .sent-mark { color: var(--accent); font-weight: 700; }
.sent-credit { margin-top: 22px; font-size: 12px; color: var(--muted); text-align: center; }
.breakdown { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #faf2ea; border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 10px; min-width: 52px; cursor: pointer; transition: .15s;
}
.chip:hover { background: #fff; border-color: var(--primary); }
.chip .c { font-family: "Noto Sans SC", sans-serif; font-weight: 700; font-size: 22px; }
.chip .p { font-size: 11px; color: var(--primary); }
.chip .e { font-size: 11px; color: var(--muted); }

/* ---------- Speak button ---------- */
.speak {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; transition: .15s;
}
.speak:hover { border-color: var(--primary); color: var(--primary); }
.speak .ic { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Dialogue list ---------- */
.dialogue-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; cursor: pointer; transition: .18s; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.dialogue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #f3c9b6; }
.dialogue-card .dt h3 { margin: 0 0 2px; font-size: 18px; }
.dialogue-card .dt .zh { font-family: "Noto Sans SC", sans-serif; color: var(--primary); margin-right: 6px; }
.dialogue-card .dt p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.dialogue-list { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Overlay / Modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(40, 24, 16, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }
.modal {
  background: var(--bg-soft); border-radius: 22px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.3); padding: 26px;
  animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.96); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h3 { margin: 0; font-size: 20px; flex: 1; text-align: center; }
.close-x { border: none; background: #f4ece4; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--ink-soft); }
.close-x:hover { background: #ecd9cc; }
.back-btn { border: none; background: #f4ece4; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--ink-soft); margin-right: 8px; }
.back-btn:hover { background: #ecd9cc; }

/* flashcard */
.fc { text-align: center; padding: 14px 4px 6px; }
.fc-hanzi { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 96px; line-height: 1; color: var(--ink); margin: 6px 0; }
.fc-pinyin { font-size: 22px; color: var(--primary); font-weight: 600; }
.fc-en { font-size: 20px; color: var(--ink-soft); margin-top: 6px; min-height: 26px; }
.fc-en.hidden { visibility: hidden; }
.fc-meta { color: var(--muted); font-size: 13px; margin-top: 10px; }
.fc-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.fc-progress { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }

.learned-toggle { border: 1px solid var(--accent); color: var(--accent); background: #fff; }
.learned-toggle.on { background: var(--accent); color: #fff; }

/* conversation */
.conv { display: flex; flex-direction: column; gap: 14px; }
.line { display: flex; gap: 12px; align-items: flex-start; }
.line .role { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px; }
.line.A .role { background: var(--primary); }
.line.B .role { background: var(--accent); }
.bubble { background: #faf2ea; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; flex: 1; }
.bubble .zh { font-family: "Noto Sans SC", sans-serif; font-weight: 700; font-size: 22px; }
.bubble .py { color: var(--primary); font-size: 14px; margin-top: 2px; }
.bubble .en { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.bubble .row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* ---------- Practice / Quiz ---------- */
.quiz-kind { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.quiz-kind .opt { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--ink-soft); }
.quiz-kind .opt.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.q-target { text-align: center; margin: 10px 0 6px; }
.q-target .hanzi { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 64px; }
.q-target .pinyin { color: var(--primary); font-weight: 600; font-size: 18px; }
.q-prompt { text-align: center; color: var(--ink-soft); margin-bottom: 16px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option {
  border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 16px;
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: .15s; text-align: left;
}
.option:hover:not(:disabled) { border-color: var(--primary); }
.option.correct { background: var(--accent-soft); border-color: var(--accent); color: #0c7a6e; }
.option.wrong { background: #fdeceA; border-color: var(--primary); color: var(--primary-dark); }
.option:disabled { cursor: default; }
.q-feedback { text-align: center; margin-top: 14px; font-weight: 600; min-height: 24px; }
.q-feedback.ok { color: var(--accent); }
.q-feedback.no { color: var(--primary); }
.q-foot { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.score-box { text-align: center; padding: 20px; }
.score-box .big { font-size: 54px; font-weight: 900; color: var(--primary); }
.empty-hint { color: var(--ink-soft); text-align: center; padding: 30px; }

/* ---------- Level tabs & cards ---------- */
.level-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lvl-tab {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 999px; transition: .15s;
}
.lvl-tab:hover { border-color: var(--primary); color: var(--primary); }
.lvl-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.lvl-zh { font-family: "Noto Sans SC", sans-serif; font-weight: 500; opacity: .8; margin-left: 4px; font-size: .9em; }

.level-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.level-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; cursor: pointer; transition: .18s;
}
.level-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #f3c9b6; }
.lvl-head { display: flex; gap: 14px; align-items: flex-start; }
.lvl-num {
  flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--gold));
}
.lvl-name { font-size: 19px; font-weight: 700; }
.lvl-desc { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; }
.lvl-stat { font-size: 12.5px; color: var(--muted); }
.level-card .go { margin-top: 12px; color: var(--primary); font-weight: 600; font-size: 14px; }

@media (max-width: 760px) {
  .level-cards { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 26px 0 40px; margin-top: 20px; color: var(--ink-soft); font-size: 14px; }
.site-footer p { margin: 4px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .stage-cards { grid-template-columns: 1fr; }
  .options { grid-template-columns: 1fr; }
  .hero { padding: 32px 22px; }
  /* two stacked glyphs now, so one of them must be well under the old 100px */
  .hero-deco { font-size: 58px; }
  .header-inner { height: auto; padding: 10px 0; flex-wrap: wrap; }
  /* the header row wraps, so the search field no longer has to fit beside the tabs */
  .nav-search { width: 168px; }
}

/* ---------- Character bits: radical + components ---------- */
.char-bits { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.bit { display: inline-flex; align-items: center; gap: 6px; }
.bit-k { font-size: 11px; letter-spacing: .3px; color: var(--muted); }
.chip.sm { min-width: 38px; padding: 5px 8px; border-radius: 10px; }
.chip.sm .c { font-size: 18px; }

/* ---------- Stroke order animation ---------- */
.stroke-box {
  width: 200px; height: 200px; margin: 14px auto 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  display: grid; place-items: center;
  font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 92px; color: var(--ink);
  touch-action: none;
}
.stroke-box svg { display: block; cursor: crosshair; }
.stroke-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
/* the two stroke buttons are bilingual: Chinese on top, small English underneath */
.stroke-actions .btn { flex-direction: column; gap: 0; padding: 6px 16px; border-radius: 14px; line-height: 1.3; }
.stroke-actions .btn-en { font-size: 10px; font-weight: 500; letter-spacing: .3px; opacity: .7; }
.stroke-hint { text-align: center; font-size: 12px; line-height: 1.65; margin: 6px 0 0; max-width: 460px; margin-left: auto; margin-right: auto; }

/* ---------- Extension: same radical ---------- */
.ext { margin-top: 16px; text-align: left; border-top: 1px dashed var(--line); padding-top: 12px; }
.ext-k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.ext-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Character evolution (小篆 / 金文 / 甲骨文) ----------
   One tile per script. The glyph files carry no size or fill of their own
   (see tools/fetch-ancient.js), so the frame below sets both and they pick up
   the surrounding text colour. */
.glyph-row { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.glyph-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.glyph-frame {
  width: 84px; height: 84px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  display: grid; place-items: center; padding: 8px;
}
.glyph-frame svg { display: block; width: 100%; height: 100%; fill: var(--ink); }
/* no file for this script — keep the frame so all three scripts stay aligned */
.glyph-frame.is-none { border-style: dashed; color: var(--muted); font-size: 13px; }
.glyph-cap { font-size: 13px; color: var(--ink-soft); }
.glyph-sub { font-size: 11px; color: var(--muted); }
.glyph-credit { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }

/* ---------- Extension: more meanings (offline CC-CEDICT) ----------
   One row per reading, senses separated by a middot so the list stays readable
   when a character has five of them. Only loaded when someone opens it. */
.senses-ask { display: flex; justify-content: center; }
.senses-src { float: right; text-transform: none; letter-spacing: 0; font-size: 11px; opacity: .75; }
.sense-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.sense-row:last-of-type { border-bottom: 0; }
.sense-py { flex: 0 0 92px; font-size: 14px; font-weight: 700; color: var(--accent); }
.sense-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 0; }
.sense-list li { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.sense-list li:not(:last-child)::after { content: " ·"; color: var(--muted); }
.senses-k { margin-top: 14px; }
.senses-close { margin-top: 12px; }

/* ---------- Search ----------
   Two entry points share one skin: the hero box on Home, and the compact field in
   the header everywhere else (see .nav-search above). Structure is the same for
   both: [ wrapper > svg.s-ic + input.search-input + button.clear-x ]. */
.hero-search { position: relative; max-width: 560px; margin: 0 auto 14px; }

/* ---------- Stories & history ----------
   A card per story on the page, and the whole thing — 原文, retelling, 寓意 —
   inside one wide modal when a card is tapped. */
.story-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.f-btn {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  padding: 6px 13px; border-radius: 999px; transition: .15s;
}
.f-btn:hover { border-color: var(--primary); color: var(--primary); }
.f-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.story-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; margin-top: 18px; }
/* one block per dynasty — the page reads as a timeline */
.era-head {
  display: flex; align-items: baseline; gap: 10px; margin-top: 24px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.era-head h3 { margin: 0; font-size: 17px; }
.era-count { font-size: 12px; color: var(--muted); }
.story-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; cursor: pointer; transition: .18s; display: flex; flex-direction: column;
}
.story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #f3c9b6; }
.st-top { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.story-tag {
  font-size: 11px; font-weight: 700; color: #fff; padding: 2px 9px; border-radius: 999px;
}
.tag-idiom { background: linear-gradient(135deg, var(--primary), var(--gold)); }
.tag-story { background: linear-gradient(135deg, var(--gold), #d9861f); }
.tag-history { background: linear-gradient(135deg, var(--accent), #0ea5a0); }
.tag-world { background: linear-gradient(135deg, #7c6cf0, #4f46e5); }
.story-era { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); padding: 1px 8px; border-radius: 999px; }
.st-dyn { font-size: 11px; font-weight: 600; color: var(--ink-soft); background: #faf2ea; padding: 1px 8px; border-radius: 999px; }
.st-title { font-family: "Noto Sans SC", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.2; }
.st-py { color: var(--primary); font-weight: 600; font-size: 14px; margin-top: 2px; }
.st-lit { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }
.st-en-title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); margin: 6px 0 0; }
.st-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.st-listen-2 { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.st-listen-2 .speak span { font-size: 12px; }
.st-sum { font-size: 14px; color: var(--ink-soft); margin: 10px 0 14px; }
.st-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.st-src { font-size: 11.5px; color: var(--muted); }
.st-go { color: var(--primary); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* modal */
.modal-wide { max-width: 680px; }
.story-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px;
  background: #faf2ea; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 16px;
}
.fact { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.fact-k { flex: 0 0 auto; font-size: 11px; letter-spacing: .3px; color: var(--muted); }
.fact-v { color: var(--ink); font-weight: 600; }
.st-h { font-family: "Noto Sans SC", sans-serif; color: var(--primary); font-weight: 700; }
.st-listen { display: flex; justify-content: center; margin-bottom: 14px; }
.st-lead { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.story-quote {
  background: #faf2ea; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 18px;
}
.story-quote .q-zh { font-family: "Noto Sans SC", sans-serif; font-size: 15px; line-height: 1.85; margin: 0; }
.story-quote .q-en { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin: 8px 0 0; }
.story-quote .st-listen { margin: 8px 0 0; }
/* English is the main text; the Chinese line under it is the textbook wording */
.story-para { margin-bottom: 18px; position: relative; }
.story-para .st-en { font-size: 16px; line-height: 1.78; color: var(--ink); margin: 0 34px 8px 0; }
.story-para .speak.ico { position: absolute; top: 0; right: 0; padding: 5px; border-radius: 50%; }
/* the Chinese is the source text, set small and quiet under the English */
.story-para .st-zh {
  font-family: "Noto Sans SC", sans-serif; font-size: 12.5px; line-height: 1.9;
  color: var(--muted); opacity: .82; margin: 0; display: flex; align-items: flex-start; gap: 6px;
}
.story-para .st-zh .speak.ico.tiny { position: static; padding: 3px; opacity: .55; flex: 0 0 auto; }
.story-para .st-zh .speak.ico.tiny:hover { opacity: 1; }
.story-para .st-zh .speak.ico.tiny .ic { width: 14px; height: 14px; }
.story-moral {
  background: var(--accent-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin: 4px 0 16px;
}
.story-moral strong { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); }
.story-moral p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.7; }
.story-words { margin-bottom: 12px; }
.st-src-line { font-size: 12px; color: var(--muted); text-align: center; margin: 0; }
.st-back-wrap { display: flex; justify-content: center; margin-top: 14px; }
.st-back {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 7px 16px; border-radius: 999px; transition: .15s;
}
.st-back:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- History timeline ----------
   One line down the middle: 中国 on the left, 世界 on the right, same century
   on both sides. The axis is a pseudo-element so it never gets in the way of
   the cards; narrow screens move it to the left edge and stack the columns. */
.timeline { position: relative; margin-top: 16px; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 0; width: 2px;
  transform: translateX(-1px); background: linear-gradient(180deg, var(--line), var(--line) 60%, transparent);
}
.tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative; }
.tl-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tl-heads { padding-bottom: 10px; }
.tl-heads .tl-col:first-child,
.tl-heads .tl-col:last-child { align-items: center; justify-content: center; padding: 0; }
.tl-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 14px; white-space: nowrap;
  display: inline-block; width: 130px; text-align: center;
}
.tl-node { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 12px; position: relative; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--bg); flex: 0 0 auto; }
.tl-range { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tl-name { font-size: 12.5px; color: var(--muted); }
.tl-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer; transition: .18s;
}
.tl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #f3c9b6; }
.tl-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.tl-year { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tl-title { font-family: "Noto Sans SC", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.25; }
.tl-title-en { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-top: 2px; }
.tl-range { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.tl-sum { font-size: 13px; color: var(--ink-soft); margin: 6px 0 8px; }
.tl-go { font-size: 12.5px; font-weight: 600; color: var(--primary); }
.tl-empty { color: var(--line); font-size: 18px; text-align: center; padding: 4px 0; }

@media (max-width: 760px) {
  .story-cards { grid-template-columns: 1fr; }
  .st-title { font-size: 26px; }
  .timeline::before { left: 7px; }
  .tl-row { grid-template-columns: 1fr; gap: 12px; }
  .tl-row .tl-col { margin-left: 24px; }
  .tl-heads .tl-col:first-child, .tl-heads .tl-col:last-child { align-items: flex-start; padding: 0; }
  .tl-heads .tl-col:last-child { display: none; }
  .tl-node { justify-content: flex-start; padding-left: 2px; }
  .tl-name { display: none; }
}

.s-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: none; stroke: var(--muted);
  stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.clear-x {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; padding: 0;
  border: none; background: #f4ece4; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1;
  width: 22px; height: 22px; border-radius: 50%;
}
.clear-x:hover { background: #ecd9cc; color: var(--ink); }

/* hero search: the app's search entry point, so the field is much bigger */
.hero-search input {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);
  padding: 15px 42px 15px 48px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  box-shadow: var(--shadow); -webkit-appearance: none; appearance: none;
}
.hero-search input::-webkit-search-cancel-button { display: none; }
.hero-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232, 83, 63, .14); }
.hero-search input::placeholder { color: var(--muted); }
.hero-search .s-ic { left: 18px; width: 19px; height: 19px; }
.hero-search .clear-x { right: 14px; width: 26px; height: 26px; font-size: 17px; }
/* the results page keeps a field of its own (same skin as the hero) so refining a query
   never means walking back Home */
.search-inline { margin: 0 0 22px; }
/* …and the header carries a small one, same markup, sized for a 36px row */
.nav-search { position: relative; width: 232px; }
.nav-search input {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 32px 9px 34px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; -webkit-appearance: none; appearance: none;
}
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232, 83, 63, .14); }
.nav-search input::placeholder { color: var(--muted); }
.nav-search .s-ic { left: 12px; width: 15px; height: 15px; }
.nav-search .clear-x { right: 7px; width: 20px; height: 20px; font-size: 14px; }

.kbd-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 20px; }
.kbd-hint kbd {
  font-family: inherit; font-size: 11.5px; background: #fff; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--ink-soft);
}

/* suggestions + result kind filter */
.suggest-wrap { margin-top: 24px; }
.suggest-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sug-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sug {
  cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: .15s;
}
.sug:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- Search history ----------
   The dropdown hangs off whichever box has focus (hero, header or results page);
   the same list shows as chips on the empty results page. */
.hist-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .13); padding: 8px; max-height: 320px; overflow: auto;
}
.hist-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 8px 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted);
}
.hist-clear {
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--primary);
  padding: 2px 6px; border-radius: 6px;
}
.hist-clear:hover { background: #f6e7dc; }
.hist-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 8px; border-radius: 9px; font-size: 14px; color: var(--ink);
}
.hist-item:hover { background: #f6e7dc; }
.hist-q { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* remove a single entry — hidden until the row is hovered, but always tappable */
.hist-del {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  font: inherit; font-size: 15px; line-height: 1; color: var(--muted);
  opacity: 0; transition: .12s;
}
.hist-item:hover .hist-del, .hist-del:focus-visible { opacity: 1; }
.hist-del:hover { background: #ecd9cc; color: var(--primary); }
/* the header box is 232px wide — give its panel a little more room than the field */
.nav-search .hist-panel { width: 260px; right: auto; }

/* ---------- Live typeahead (while typing) ----------
   Same position / shadow as .hist-panel, but rows are richer: hanzi + pinyin + english. */
.typeahead-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .13); padding: 6px; max-height: 320px; overflow: auto;
}
.typeahead-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px; border-radius: 10px; cursor: pointer;
  transition: background .12s;
}
.typeahead-item:hover, .typeahead-item.is-cursor { background: #f9f0e8; }
.typeahead-hz {
  flex: 0 0 auto; font-family: "Noto Sans SC", sans-serif; font-size: 18px; font-weight: 700;
  min-width: 54px; max-width: 120px;
}
.typeahead-meta { flex: 1 1 auto; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.typeahead-py { color: var(--muted); font-size: 13px; margin-right: 8px; }
.typeahead-en { color: var(--ink-soft); }
/* offline dictionary hits (CC-CEDICT) — where 成语 / 熟语 come from */
.typeahead-tag {
  flex: 0 0 auto; align-self: center; font-size: 11px; color: var(--muted);
  background: #f4ece4; border-radius: 999px; padding: 1px 7px;
}
/* keep the panel readable inside the narrow header box */
.nav-search .typeahead-panel { width: 300px; right: auto; }
.nav-search .typeahead-item { gap: 8px; padding: 8px; }
.nav-search .typeahead-hz { font-size: 16px; min-width: 44px; }
.nav-search .typeahead-meta { font-size: 12.5px; }
.result-kind { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.result-kind .opt { font-size: 14px; padding: 7px 14px; }
.opt.zero { opacity: .45; }

/* result rows */
.result-list { display: flex; flex-direction: column; gap: 10px; }
.result-row {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 18px; transition: .15s;
}
.result-row:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); }
.result-row .rzh {
  flex: 0 0 auto; min-width: 1.6em; text-align: center;
  font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 30px; line-height: 1.15;
}
.result-row .rmain { flex: 1; min-width: 0; }
.result-row .rpy { color: var(--primary); font-weight: 600; font-size: 14px; }
.result-row .ren { color: var(--ink); font-size: 15px; }
.result-row .rmeta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.result-row .rgo { flex: 0 0 auto; color: var(--primary); font-weight: 700; font-size: 13px; white-space: nowrap; }
/* keyboard cursor: ↑/↓ walk the list, Enter opens what is highlighted */
.result-row .ract { flex: 0 0 auto; display: flex; align-items: center; }
.result-row .ract .speak.ico { margin-top: 0; }
.result-row.is-cursor {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232, 83, 63, 0.16);
  transform: translateY(-1px);
}
mark { background: #ffe6a7; color: inherit; border-radius: 4px; padding: 0 1px; }

/* ---------- Word detail: broken down character by character ---------- */
.wd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wd-zh { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 44px; line-height: 1; }
.wd-py { color: var(--primary); font-weight: 600; font-size: 19px; }
.wd-en { color: var(--ink-soft); font-size: 16px; margin-top: 2px; }
.wd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 14px; }
.wtile {
  background: #faf2ea; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 8px 10px; text-align: center; cursor: pointer; transition: .15s;
}
.wtile:hover { background: #fff; border-color: var(--primary); transform: translateY(-2px); }
.wtile .wc { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 34px; line-height: 1.1; }
.wtile .wp { color: var(--primary); font-weight: 600; font-size: 13px; }
.wtile .we { color: var(--ink-soft); font-size: 12.5px; margin-top: 1px; }
.wtile .wb { color: var(--muted); font-size: 11px; margin-top: 6px; }
.wtile.plain { cursor: default; }
.wtile.plain:hover { transform: none; background: #faf2ea; border-color: var(--line); }
.speak.ico { padding: 6px; border-radius: 50%; margin-top: 6px; }
.speak.ico .ic { width: 14px; height: 14px; }
.related { display: flex; flex-wrap: wrap; gap: 8px; }
/* one block per character of the word: each block starts on a row of its own, so
   the 上-words are not cut short to make room for the 空-words */
.rel-group + .rel-group { margin-top: 14px; }
.rel-group-k { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; }
.rel-group-k .gc { font-family: "Noto Sans SC", sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); }
.rel-group-k .gp { font-size: 12px; font-weight: 600; color: var(--primary); }

/* ---------- Online lookup fallback ---------- */
.online-block { margin-top: 26px; border-top: 1px dashed var(--line); padding-top: 16px; }
.online-head { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.src-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #fff; background: linear-gradient(135deg, var(--accent), #4fd1c5);
  padding: 2px 9px; border-radius: 999px; flex: 0 0 auto;
}
.online-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.online-actions { margin-top: 10px; }
.online-block .result-row { background: #fff; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line); border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* 成语 — CC-CEDICT tags it, so a 4-character idiom is not shown as a plain word */
.typeahead-tag.idiom { background: var(--primary); color: #fff; }
.idiom-tag {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--primary); border-radius: 999px; padding: 0 6px; vertical-align: 1px;
}

/* "go and look it up on the web" — real dictionaries, opened in a new tab */
.src-badge.web { background: linear-gradient(135deg, #6b7fd7, #8b5cf6); }
.web-links { display: flex; flex-wrap: wrap; gap: 8px; }
.web-link {
  font-size: 13px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  background: #fff; transition: .15s;
}
.web-link:hover { border-color: var(--primary); color: var(--primary); }

.result-row.online .rzh { color: var(--accent); }

/* offline dictionary results (CC-CEDICT) */
.src-badge.offline { background: linear-gradient(135deg, var(--gold), #f7c76b); }
.result-row.offline .rzh { color: var(--primary); }
.site-footer a { color: var(--primary); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.rel {
  cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 12px; text-align: center; transition: .15s;
}
.rel:hover { border-color: var(--primary); }
.rel .c { display: block; font-family: "Noto Sans SC", sans-serif; font-weight: 700; font-size: 20px; }
.rel .p { display: block; font-size: 11px; color: var(--primary); }
.wd-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 10px; }

/* ---------- accounts & the unlock gate (js/entitlements.js) ---------- */
/* English is the body copy everywhere on this site; Chinese rides underneath in
   small grey type. .zh-sm is the one class that does it (block by default so it
   drops to its own line, inline inside buttons). */
.zh-sm {
  display: block; font-size: 12px; line-height: 1.5;
  color: var(--muted); font-weight: 500;
}
button .zh-sm, .linkbtn .zh-sm {
  display: inline; font-size: 11.5px; margin-left: 5px; font-weight: 500;
}
.acct-btn {
  border: 1px solid var(--line); background: var(--bg-soft); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; transition: .15s;
}
.acct-btn:hover { border-color: var(--primary); color: var(--primary); }
.acct-btn.is-in { background: var(--accent-soft); border-color: var(--accent); color: #0f766e; }

/* a level the visitor cannot open yet */
.lvl-tab.locked { color: var(--muted); }
.lvl-tab.locked .lvl-zh { opacity: .55; }
.lock-ic {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  font-size: 10.5px; line-height: 16px; color: #8a7f76;
  background: #f1e6dc; border-radius: 6px; vertical-align: 1px;
}
.level-card.is-locked { opacity: .82; }
.level-card.is-locked .go { color: var(--muted); }

/* "you are reading the free preview of HSK 1" */
.preview-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-top: 12px; padding: 10px 14px;
  background: var(--accent-soft); border: 1px dashed var(--accent);
  border-radius: var(--radius-sm); font-size: 14px; color: #0f766e;
}
.pn-k { font-weight: 700; }
.pn-k .zh-sm { display: inline; font-size: 12px; margin-left: 6px; }
.pn-n { flex: 1 1 260px; }
.linkbtn {
  border: none; background: none; cursor: pointer; font: inherit;
  color: var(--primary); font-weight: 700; text-decoration: underline; padding: 0;
}

/* a whole level behind the paywall */
.locked-panel {
  margin-top: 18px; padding: 34px 22px; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lp-k { font-size: 19px; font-weight: 700; }
.lp-n { color: var(--ink-soft); font-size: 14.5px; max-width: 520px; margin: 8px auto 16px; }
.lp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* the gate itself */
.gate { max-width: 560px; }
.gate-title { font-size: 20px; font-weight: 800; }
.gate-sub { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.gate-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.gate-k { font-size: 15px; font-weight: 700; }
.gate-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.gate-ok { margin: 8px 0 0; font-size: 13.5px; color: #0f766e; font-weight: 600; }
.gate-err { color: #b4232a; font-weight: 600; }
.gate-dev { margin-top: 10px; }
.providers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.prov {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 11px 13px; cursor: pointer; font: inherit;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: .15s;
}
.prov:hover { border-color: var(--primary); transform: translateY(-1px); }
.prov.is-busy { opacity: .6; pointer-events: none; }
.prov-n { font-weight: 700; font-size: 14.5px; }
.prov-zh { font-weight: 500; color: var(--muted); font-size: 12px; }
.prov-note { font-size: 11.5px; color: var(--muted); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.plan {
  padding: 12px 13px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fffdfb;
}
.plan-n { font-weight: 700; font-size: 14.5px; }
.plan-p { color: var(--primary); font-weight: 700; font-size: 13px; margin-top: 2px; }
.plan-d { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 520px) {
  .providers, .plans { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-tabs { flex-wrap: wrap; }        /* narrow screens: tabs may use two lines */
  .result-row .rzh { font-size: 25px; }
  .result-row .rgo { display: none; }
}