/* HSK 1 Trainer — design system. Warm paper + vermilion seal, glass chrome, rings, 3D cards.
   The .paper block near the end mimics the printed exam and is deliberately plain. */
:root {
  --bg: #f6f1ea; --bg2: #efe8dd; --card: #ffffff; --ink: #1d1815; --muted: #6a6059; --line: #e7dfd4;
  --red: #b8281f; --red-solid: #c2362b; --red-deep: #8a1d16; --red-soft: #fbe9e6; --gold: #b7791f; --gold-soft: #fbf0dc;
  --ok: #1b7f43; --ok-solid: #1f8a4c; --ok-bg: #e3f4ea; --bad: #b3261e; --bad-bg: #fbe5e3; --sel: #1f4e8c; --sel-bg: #e4edf9;
  --shadow: 0 1px 2px rgba(60,35,20,.06), 0 8px 24px -8px rgba(60,35,20,.14);
  --shadow-lg: 0 2px 4px rgba(60,35,20,.08), 0 22px 44px -16px rgba(120,30,20,.34);
  --radius: 20px; --hh: 3.7rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14110e; --bg2: #1b1713; --card: #1f1a16; --ink: #f2ece5; --muted: #a99f95; --line: #342d27;
    --red: #f0746a; --red-solid: #cf3d33; --red-deep: #8f221b; --red-soft: #3a1d1a; --gold: #e8b25a; --gold-soft: #35291a;
    --ok: #66c98d; --ok-solid: #25834f; --ok-bg: #163524; --bad: #f28d86; --bad-bg: #3a1c1a; --sel: #8ab4f0; --sel-bg: #1b2a40;
    --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -10px rgba(0,0,0,.6);
    --shadow-lg: 0 22px 44px -16px rgba(0,0,0,.7);
  }
  img.pic { background: #fff; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font: 16px/1.5 var(--font); min-height: 100vh;
  background: radial-gradient(900px 420px at 85% -80px, color-mix(in srgb, var(--red-solid) 11%, transparent), transparent 70%),
              radial-gradient(700px 400px at -10% 30%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%), var(--bg);
  background-repeat: no-repeat; background-attachment: fixed;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: 1rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
p { margin: .4rem 0 .8rem; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.hidden, [hidden] { display: none !important; }
.good { color: var(--ok); } .mid { color: var(--gold); } .low { color: var(--bad); } .red { color: var(--red); }
.ico { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--red-solid) 55%, transparent); outline-offset: 2px; }

/* ------------------------------------------------------------ chrome */
.top {
  position: sticky; top: 0; z-index: 30; height: 3.7rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem;
  padding: 0 max(1rem, calc((100vw - 880px) / 2)); isolation: isolate;
}
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; letter-spacing: -.01em; justify-self: start; }
.brand em { font-style: normal; color: var(--red); }
.seal { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 11px; color: #fff; font-size: 1.2rem; font-weight: 700;
  background: linear-gradient(145deg, #dc4a3e, var(--red-deep)); box-shadow: 0 4px 12px -3px rgba(194,54,43,.55), inset 0 1px 0 rgba(255,255,255,.3); transform: rotate(-4deg); }
.tabs { display: flex; gap: .2rem; padding: .22rem; border-radius: 999px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); }
.tabs a { position: relative; display: flex; align-items: center; gap: .4rem; text-decoration: none; padding: .42rem .9rem; border-radius: 999px; color: var(--muted); font-weight: 650; font-size: .93rem; transition: color .2s, background .2s; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: linear-gradient(145deg, var(--red-solid), var(--red-deep)); color: #fff; box-shadow: 0 4px 12px -4px rgba(194,54,43,.6); }
.tabs svg, .gear svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.badge { position: absolute; top: -.2rem; right: -.1rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--gold); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg); }
.tools { display: flex; align-items: center; gap: .4rem; justify-self: end; }
.pill { display: inline-flex; align-items: center; padding: .1rem .65rem; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; color: var(--muted); background: var(--card); }
.pill.extra { color: var(--gold); border-color: var(--gold); background: transparent; }
#pyToggle { min-height: 2.4rem; padding: 0 .85rem; font-weight: 700; font-size: .9rem; transition: all .2s; }
#pyToggle.on { background: var(--red-solid); color: #fff; border-color: var(--red-solid); }
.gear { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); transition: transform .4s var(--ease), color .2s; }
.gear:hover { color: var(--ink); transform: rotate(60deg); } .gear.on { color: var(--red); border-color: var(--red); }

main { max-width: 880px; margin: 0 auto; padding: 1.2rem 1rem 5rem; outline: none; }
.card { background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); margin: 0 0 1rem; }
.card.flush { padding: 0; overflow: hidden; }
.grid { display: grid; gap: .8rem; margin-bottom: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid > .card { margin: 0; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; } .row.center { justify-content: center; }
.sec { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.7rem .2rem .6rem; }

/* entry animation */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }
#app.enter > :not(.dock):not(.fhead):not(.mockbar) { animation: rise .55s var(--ease) both; }
#app.enter > :nth-child(2) { animation-delay: .05s; } #app.enter > :nth-child(3) { animation-delay: .1s; } #app.enter > :nth-child(4) { animation-delay: .15s; }
#app.enter > :nth-child(5) { animation-delay: .2s; } #app.enter > :nth-child(n+6) { animation-delay: .25s; }
.cardin { animation: pop .38s var(--ease) both; }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3rem; padding: .6rem 1.2rem; border-radius: 15px; border: 1px solid var(--line);
  background: var(--card); font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s var(--ease), box-shadow .2s, border-color .2s, filter .2s; }
.btn:hover { border-color: var(--muted); } .btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(160deg, #d44a3e, var(--red-solid) 45%, var(--red-deep)); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(194,54,43,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.btn.small { min-height: 3rem; padding: .3rem .9rem; font-size: .88rem; border-radius: 12px; }
.btn.wide { width: 100%; min-height: 3.4rem; font-size: 1.05rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.kbd { font-family: ui-monospace, monospace; font-size: .75rem; padding: 0 .35rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 6px; opacity: .75; }
@media (hover: none) { .kbd, .opt .k { display: none; } }

/* ------------------------------------------------------------ home */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1.5rem 1.4rem; margin-bottom: .4rem;
  border-radius: 28px; color: #fff; box-shadow: var(--shadow-lg);
  background: radial-gradient(500px 260px at 100% 0, rgba(255,190,120,.35), transparent 65%), linear-gradient(140deg, #d8473b 0%, #b0281f 55%, #7a1812 100%); }
.hero::after { content: "汉"; position: absolute; right: 26%; bottom: -.3em; font-size: 14rem; line-height: 1; font-weight: 800; color: rgba(255,255,255,.06); pointer-events: none; font-family: "Noto Serif CJK SC", "Songti SC", serif; }
.hero > * { position: relative; z-index: 1; }
.eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.count { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0; }
.count .num { font-size: 4.6rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 20px rgba(0,0,0,.2); }
.count .unit { font-size: 1.15rem; font-weight: 700; opacity: .92; }
.hero p { margin: 0 0 .8rem; opacity: .92; font-size: .95rem; }
.tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); font-size: .8rem; font-weight: 650; backdrop-filter: blur(6px); }
.tag .ico { width: 1rem; height: 1rem; }
.hero .ring .bg { stroke: rgba(255,255,255,.22); } .hero .ring .rmid b, .hero .ring .rmid small { color: #fff; }

.plan { list-style: none; padding: 0; margin: 0 0 1rem; background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.plan li + li { border-top: 1px solid var(--line); }
.task { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.1rem; text-decoration: none; min-height: 4.2rem; transition: background .2s; }
.task:hover { background: color-mix(in srgb, var(--red-solid) 5%, transparent); } .task:active { background: color-mix(in srgb, var(--red-solid) 10%, transparent); }
.ti { display: grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: 14px; background: var(--red-soft); color: var(--red); }
.ti .ico { width: 1.4rem; height: 1.4rem; }
.tt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.tt b { font-size: 1.02rem; } .tt small { color: var(--muted); font-size: .84rem; }
.chev { color: var(--muted); display: grid; opacity: .7; transition: transform .2s var(--ease); } .chev .ico { width: 1.2rem; height: 1.2rem; }
.task:hover .chev, .tile:hover .chev, .cta:hover .chev { transform: translateX(3px); }
.cnt { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .55rem; border-radius: 999px; background: var(--red-solid); color: #fff; font-weight: 800; font-size: .85rem; }
.cnt.done { background: var(--ok-bg); color: var(--ok); } .cnt.done .ico { width: 1rem; height: 1rem; stroke-width: 2.5; }

.stat { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; padding: 1rem .5rem .85rem; font-size: .82rem; color: var(--muted); font-weight: 650; }
.rings .ring { max-width: 100%; }
.ring { position: relative; flex: none; container-type: inline-size; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; overflow: visible; }
.ring circle { fill: none; stroke-width: var(--w, 9); }
.ring .bg { stroke: var(--line); }
.ring .fg { stroke: var(--col, var(--red-solid)); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: calc(var(--c) * (1 - var(--p))); animation: ringin 1.1s var(--ease) both .1s; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--col, var(--red-solid)) 40%, transparent)); }
@keyframes ringin { from { stroke-dashoffset: var(--c); } }
.ring .rmid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ring .rmid b { font-size: 24cqw; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring .rmid small { font-size: 11cqw; color: var(--muted); font-weight: 650; margin-top: .1em; white-space: nowrap; }

.meter { margin: .75rem 0; }
.mh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; font-size: .92rem; }
.mbar { height: 9px; border-radius: 99px; background: var(--line); overflow: hidden; display: block; }
.mbar i { display: block; height: 100%; border-radius: 99px; background: var(--red-solid); transition: width .9s var(--ease); animation: grow 1s var(--ease) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.mbar i.good { background: var(--ok-solid); } .mbar i.mid { background: var(--gold); } .mbar i.low { background: var(--red-solid); }
.mbar.sm { height: 6px; grid-column: 1 / -1; }
.part-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.part-row:first-of-type { border-top: 0; }
h3 + .part-row { border-top: 0; }

.week { display: flex; gap: .45rem; height: 128px; }
.wd { flex: 1; min-width: 0; display: grid; grid-template-rows: 1rem 1fr 1.1rem; justify-items: center; }
.wd .wn { font-size: .68rem; color: var(--muted); align-self: end; font-weight: 700; }
.wd i { width: 100%; max-width: 30px; align-self: end; min-height: 4px; border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--red-solid) 55%, var(--line)); animation: rise2 .8s var(--ease) both; transform-origin: bottom; }
.wd.today i { background: linear-gradient(180deg, #e0574b, var(--red-deep)); box-shadow: 0 4px 12px -3px rgba(194,54,43,.6); }
.wd small { font-size: .72rem; color: var(--muted); font-weight: 700; } .wd.today small { color: var(--red); }
@keyframes rise2 { from { transform: scaleY(.05); } }

/* ------------------------------------------------------------ hubs: tiles, cta, papers, drills */
.tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; min-height: 4.6rem; text-decoration: none; background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 20px; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(60,35,20,.08), 0 16px 30px -14px rgba(60,35,20,.28); } .tile:active { transform: scale(.98); }
.tile.accent, .cta { color: #fff; border-color: transparent; background: radial-gradient(260px 120px at 100% 0, rgba(255,190,120,.3), transparent 70%), linear-gradient(140deg, #d8473b, #b0281f 60%, #84190f); box-shadow: var(--shadow-lg); }
.tile.accent .ti, .cta .ti { background: rgba(255,255,255,.18); color: #fff; } .tile.accent small, .cta small, .tile.accent .chev, .cta .chev { color: rgba(255,255,255,.88); }
.cta { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; min-height: 5rem; border-radius: 22px; text-decoration: none; margin-bottom: 1rem; transition: transform .2s var(--ease); }
.cta:hover { transform: translateY(-2px); } .cta:active { transform: scale(.98); } .cta b { font-size: 1.1rem; }
.cta.slim { color: var(--ink); background: var(--red-soft); box-shadow: none; border: 1px solid color-mix(in srgb, var(--red-solid) 25%, var(--line)); min-height: 4rem; padding: .8rem 1rem; margin-bottom: 0; }
.cta.slim .ti { background: var(--red-solid); color: #fff; } .cta.slim small, .cta.slim .chev { color: var(--muted); }
.state { padding: .1rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--line); color: var(--muted); }
.state.new { background: var(--sel-bg); color: var(--sel); } .state.learning { background: var(--gold-soft); color: var(--gold); } .state.known { background: var(--ok-bg); color: var(--ok); }

.subhead { margin: 1rem 0 .5rem; font-weight: 700; font-size: .88rem; }
.papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .5rem; }
.paperbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4rem; border-radius: 16px; text-decoration: none; background: var(--bg); border: 1.5px dashed color-mix(in srgb, var(--muted) 45%, transparent); transition: transform .15s var(--ease), border-color .2s; }
.paperbtn:hover { transform: translateY(-2px); border-color: var(--red); } .paperbtn:active { transform: scale(.95); }
.paperbtn .pn { font-weight: 800; font-size: 1.1rem; } .paperbtn .ps { font-size: .76rem; color: var(--muted); font-weight: 700; }
.paperbtn.done { border-style: solid; } .paperbtn.good { background: var(--ok-bg); border-color: var(--ok); } .paperbtn.good .ps { color: var(--ok); }
.paperbtn.low { background: var(--bad-bg); border-color: var(--bad); } .paperbtn.low .ps { color: var(--bad); }
.legend { margin: .8rem 0 0; } .legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 4px; vertical-align: -1px; background: var(--ok-bg); border: 1.5px solid var(--ok); }
.legend i.low { background: var(--bad-bg); border-color: var(--bad); margin-left: .6rem; }
.drillbtn { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .8rem; padding: .85rem 1rem; min-height: 4.2rem; text-decoration: none; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); transition: transform .15s var(--ease), border-color .2s, background .2s; }
.drillbtn:hover { border-color: var(--red); background: var(--red-soft); } .drillbtn:active { transform: scale(.97); }
.dp { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 13px; background: var(--card); border: 1px solid var(--line); font-weight: 800; color: var(--red); }
.dt { display: flex; flex-direction: column; line-height: 1.25; } .dt small { color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------------ chinese text */
.zh { font-family: "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", var(--font); }
ruby { ruby-position: over; ruby-align: center; }
rt { font-size: .5em; color: var(--muted); font-family: var(--font); letter-spacing: 0; font-weight: 400; }
.sent { font-size: 1.45rem; line-height: 2.5; }
.blank { display: inline-block; min-width: 3.2em; border-bottom: 2px solid var(--ink); margin: 0 .1em; text-align: center; }
.nopy .sent { line-height: 1.8; } .nopy rt { display: none; }

/* ------------------------------------------------------------ immersive (focus) screens */
.fhead { position: sticky; top: var(--hh); z-index: 20; display: flex; align-items: center; gap: .8rem; padding: .45rem .5rem; margin: 0 -.5rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fhead .x { display: grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; text-decoration: none; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 1rem; box-shadow: var(--shadow); transition: transform .15s; }
.fhead .x:active { transform: scale(.92); }
.progress { flex: 1; height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #e0574b, var(--red-solid)); transition: width .45s var(--ease); min-width: 10px; }
.ftitle { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
body.focus main { padding-bottom: 2rem; }
.dock { position: sticky; bottom: 0; z-index: 15; margin-top: 1rem; padding: 1.6rem 0 calc(.9rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 42%); }
.dock .feedback { margin: 0 0 .6rem; }
.combo { display: inline-flex; align-items: center; gap: .15rem; color: var(--gold); font-weight: 800; } .combo .ico { width: 1rem; height: 1rem; fill: currentColor; stroke-width: 1.4; }

/* flashcards */
.fc3, .fc3 * { touch-action: none; }
.fc3 { perspective: 1400px; margin: .6rem 0 .6rem; user-select: none; -webkit-user-select: none; transition: transform .3s var(--ease); }
.fc { position: relative; height: clamp(360px, 58vh, 520px); transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, .9, .25, 1); cursor: pointer; }
.fc.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .6rem; text-align: center; overflow: auto; border-radius: 28px; padding: 1.4rem 1.2rem; box-shadow: var(--shadow-lg); transition: box-shadow .2s; }
.face.front { background: radial-gradient(420px 220px at 50% 0, color-mix(in srgb, var(--red-solid) 8%, transparent), transparent 70%), var(--card); }
.face.back { transform: rotateY(180deg); background: radial-gradient(420px 220px at 50% 0, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%), var(--card); }
.fc .hz { font-size: 6rem; line-height: 1.1; font-weight: 500; } .fc .hz.sm { font-size: 3.4rem; }
.fc .py { font-size: 1.8rem; color: var(--red); font-weight: 600; } .fc .en { font-size: 1.5rem; font-weight: 700; }
.fc .ex { margin-top: .6rem; padding-top: .8rem; border-top: 1px dashed var(--line); width: 100%; font-size: 1.15rem; }
.fc .ex ruby { margin: 0 .04em; }
.fc .hint { position: absolute; bottom: 1.1rem; color: var(--muted); font-size: .85rem; }
.fc3.go-r .face { box-shadow: 0 0 0 4px var(--ok-solid), var(--shadow-lg); } .fc3.go-l .face { box-shadow: 0 0 0 4px var(--red-solid), var(--shadow-lg); }
.swipehint { text-align: center; font-size: .78rem; color: var(--muted); margin: 0 0 .3rem; }
@media (hover: hover) { .swipehint { display: none; } }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.grades .btn { flex-direction: column; gap: 0; min-height: 4rem; padding: .6rem .3rem; font-size: 1.05rem; border-radius: 18px; line-height: 1.25; }
.grades small { font-weight: 600; font-size: .75rem; opacity: .85; }
.grades .g0 { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.grades .g1 { background: var(--gold-soft); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.grades .g2 { background: linear-gradient(160deg, #35a566, var(--ok-solid)); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(31,138,76,.7); }
.grades .g2 small { color: rgba(255,255,255,.92); opacity: 1; }

/* quiz */
.prompt { text-align: center; padding: 1.6rem 1rem 1.4rem; margin: .6rem 0 .9rem; border-radius: 26px; box-shadow: var(--shadow-lg); background: radial-gradient(420px 200px at 50% 0, color-mix(in srgb, var(--red-solid) 7%, transparent), transparent 70%), var(--card); }
.prompt .hz { font-size: 4.6rem; line-height: 1.15; font-weight: 500; } .prompt .tx { font-size: 1.9rem; font-weight: 700; } .prompt .tx.red { font-size: 1.5rem; font-weight: 600; }
.opts { display: grid; gap: .65rem; }
.opts.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .opts.two { grid-template-columns: 1fr; } }
.opt { display: flex; align-items: center; gap: .8rem; text-align: left; min-height: 3.8rem; padding: .7rem 1rem; border-radius: 18px; border: 1.5px solid var(--line); background: var(--card); font-size: 1.12rem; box-shadow: var(--shadow); transition: transform .15s var(--ease), border-color .2s, background .2s, opacity .3s; }
.opt:hover:not([disabled]) { border-color: var(--red); } .opt:active:not([disabled]) { transform: scale(.98); }
.opt .k { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); font-size: .8rem; font-style: normal; font-weight: 800; color: var(--muted); }
.opt .ot { flex: 1; }
.opt.right { border-color: var(--ok); background: var(--ok-bg); animation: bump .4s var(--ease); } .opt.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake .4s; }
.opt.right .k { background: var(--ok-solid); color: #fff; border-color: transparent; } .opt.wrong .k { background: var(--bad); color: #fff; border-color: transparent; }
.opt.dim { opacity: .5; } .opt .zh { font-size: 1.7rem; }
.opt[disabled] { cursor: default; color: var(--ink); }
@keyframes bump { 50% { transform: scale(1.03); } } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.feedback { padding: .75rem 1rem; border-radius: 16px; margin: .8rem 0; font-weight: 700; animation: rise .35s var(--ease) both; }
.feedback.ok { background: var(--ok-bg); color: var(--ok); } .feedback.bad { background: var(--bad-bg); color: var(--bad); } .feedback .zh { font-weight: 400; color: var(--ink); }

/* results / empty */
.result, .empty { text-align: center; padding: 1.8rem 1.2rem; box-shadow: var(--shadow-lg); border-radius: 28px; }
.result .ring, .mr-top .ring { margin: 0 auto .6rem; } .result h2 { font-size: 1.6rem; font-weight: 800; }
.result .left { text-align: left; margin-top: 1rem; }
.big-emoji { font-size: 3.6rem; line-height: 1; margin-bottom: .4rem; animation: pop .6s var(--ease) both; }
.score { font-size: 3rem; font-weight: 800; line-height: 1; }
.mockres { text-align: left; }
.mr-top { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; justify-content: center; margin-bottom: .6rem; }
.mr-top .ring { margin: 0; } .mr-text { flex: 1 1 14rem; } .verdict { font-size: 1.35rem; }
.partbars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .2rem 1.6rem; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

/* ------------------------------------------------------------ word list, inputs, settings */
.wl { width: 100%; border-collapse: collapse; }
.wl td { padding: .6rem .6rem; border-top: 1px solid var(--line); vertical-align: baseline; }
.wl tr:first-child td { border-top: 0; }
.wl tr:hover td { background: color-mix(in srgb, var(--red-solid) 4%, transparent); }
.wl .hz { font-size: 1.45rem; white-space: nowrap; } .wl .py { color: var(--red); white-space: nowrap; }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--line); }
.dot.l { background: var(--gold); } .dot.k { background: var(--ok-solid); }
.bar { height: 11px; border-radius: 99px; background: var(--line); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; transition: width .8s var(--ease); } .bar .k { background: var(--ok-solid); } .bar .l { background: var(--gold); }
input[type=search], input[type=date], select { font: inherit; min-height: 2.9rem; padding: .5rem .85rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
input[type=search] { flex: 1; min-width: 0; }
.searchrow { display: flex; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; min-height: 4.2rem; cursor: pointer; }
.setting + .setting { border-top: 1px solid var(--line); }
.st { display: flex; flex-direction: column; line-height: 1.3; } .st small { color: var(--muted); font-size: .82rem; }
input.sw { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 3.1rem; height: 1.85rem; border-radius: 99px; background: var(--line); border: 0; cursor: pointer; transition: background .25s; margin: 0; }
input.sw::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .3s var(--ease); }
input.sw:checked { background: var(--ok-solid); } input.sw:checked::after { transform: translateX(1.25rem); }

/* ------------------------------------------------------------ reading questions */
.qwrap { margin-bottom: 1.2rem; }
.qcard { background: var(--card); border: 1.5px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 22px; padding: 1rem 1.1rem; margin-bottom: .9rem; box-shadow: var(--shadow); transition: border-color .25s, background .25s; }
.qcard.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok-bg) 45%, var(--card)); } .qcard.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad-bg) 45%, var(--card)); }
.qn { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border-radius: 99px; background: var(--red-soft); color: var(--red); font-weight: 800; font-size: .88rem; margin-bottom: .4rem; }
img.pic { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: .2rem auto; background: #fff; }
img.pic.small { max-height: 190px; }
.r1 { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1rem; align-items: center; }
@media (max-width: 480px) { .r1 { grid-template-columns: 1fr; } }
.r1 .word { font-size: 2rem; text-align: center; line-height: 2; }
.bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .4rem .8rem; padding: .7rem .9rem; background: var(--bg); border: 1.5px dashed color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 16px; margin-bottom: .8rem; line-height: 2.4; }
.bank.long { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.bank b { color: var(--red); margin-right: .35rem; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.chip { flex: 1 0 3.1rem; max-width: 6rem; min-width: 3rem; min-height: 3.05rem; padding: .45rem .8rem; border-radius: 15px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 800; font-size: 1.05rem; text-align: center; transition: transform .12s var(--ease), border-color .2s, background .2s; }
.chip:hover:not([disabled]) { border-color: var(--red); } .chip:active:not([disabled]) { transform: scale(.93); }
.chip.tf { flex: 0 0 auto; min-width: 4.6rem; font-size: 1.4rem; }
.chip.sel { border-color: var(--sel); background: var(--sel-bg); color: var(--sel); }
.chip.right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); } .chip.wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.chip[disabled] { cursor: default; }
.dlg .line { font-size: 1.35rem; line-height: 2.4; }
.dlg .role { display: inline-block; font-size: .8rem; font-weight: 700; padding: 0 .4rem; margin-right: .5rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); vertical-align: middle; }
.instr { font-weight: 600; margin-bottom: .6rem; }
.row > h1 { margin: 0; font-size: 1.4rem; }

/* mock bar + question map */
.mockbar { position: sticky; top: calc(var(--hh) + .4rem); z-index: 20; display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem .55rem .8rem; margin-bottom: .7rem;
  background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem; padding: .25rem .75rem; border-radius: 999px; background: var(--ink); color: var(--bg); letter-spacing: .02em; }
.timer.low { background: var(--bad); color: #fff; animation: pulseop 1s infinite; }
@keyframes pulseop { 50% { opacity: .65; } }
.mprog { flex: 1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; min-width: 30px; } .mprog i { display: block; height: 100%; background: linear-gradient(90deg, #e0574b, var(--red-solid)); border-radius: 99px; transition: width .4s var(--ease); }
.qnav { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.qnav button { width: 2.5rem; height: 2.5rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: .85rem; font-weight: 700; color: var(--muted); transition: all .2s; }
.qnav button.done { background: var(--sel-bg); border-color: var(--sel); color: var(--sel); }
.qnav button.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .qnav button.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

/* ------------------------------------------------------------ exam-paper look (mimics the HSK PDF: white sheet, serif, boxed answers, 3-column R3) */
.paper { background: #fff; color: #000; border: 1px solid #cfcfcf; border-radius: 4px; padding: .8rem 1rem; margin-bottom: 1rem; box-shadow: 0 10px 30px -14px rgba(0,0,0,.35);
  font-family: "Noto Serif CJK SC", "Songti SC", "SimSun", "Noto Serif", serif; }
.paper rt { color: #111; font-family: "Noto Serif", Georgia, serif; }
.paper .muted { color: #555; }
.paper .qwrap { margin-bottom: 1.6rem; }
.paper .ph { text-align: center; }
.paper .ph h3 { font-size: 1.15rem; letter-spacing: .3em; margin-bottom: .1rem; }
.paper .instr { font-weight: 400; font-size: .9rem; color: #333; margin: .2rem 0 .8rem; }
.paper .qcard { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: .45rem 0; border-bottom: 1px dotted #c8c8c8;
  display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; column-gap: .4rem; }
.paper .qcard.ok, .paper .qcard.bad { border-bottom: 1px dotted #c8c8c8; background: transparent; }
.paper .qcard.ok .qn { color: #1b7f43; } .paper .qcard.bad .qn { color: #b3261e; }
.paper .qhead { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: .5rem; }
.paper .qn { display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: #000; font-weight: 400; font-size: 1.1rem; margin: 0; }
.paper .qn::after { content: "."; }
.paper .qcard > :not(.qhead) { grid-column: 2; }
.paper .sent { font-size: 1.3rem; }
.paper .chips { margin-top: .1rem; gap: .5rem; }
.paper .chip { flex: 0 0 auto; max-width: none; min-width: 3rem; min-height: 2.9rem; font-size: 1.1rem; padding: .15rem .6rem; border-radius: 2px; border: 1.5px solid #000; background: #fff; color: #000; font-family: inherit; font-weight: 400; }
.paper .chip.sel { background: #d9d9d9; font-weight: 700; color: #000; }
.paper .chip.right { border-color: var(--ok); background: #e3f4ea; color: #000; } .paper .chip.wrong { border-color: var(--bad); background: #fbe5e3; color: #000; }
.paper .chip.tf { min-width: 3rem; font-size: 1.1rem; }
.paper .bank { background: #fff; border: 1px solid #000; border-radius: 0; line-height: 2.4; }
.paper .bank b { color: #000; }
.paper .feedback { font-family: var(--font); font-size: .9rem; padding: .4rem .7rem; border-radius: 4px; }
.paper img.pic { background: #fff; border-radius: 0; }
.paper .dlg .role { background: #fff; border-color: #000; }
.paper ruby { margin: 0 .1em; }

/* ------------------------------------------------------------ mobile: floating bottom tab bar, immersive focus mode */
@media (max-width: 719px) {
  .top { grid-template-columns: 1fr auto; padding: 0 1rem; }
  .brand .bt { font-size: 1.05rem; }
  .tabs { position: fixed; z-index: 40; left: .7rem; right: .7rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); justify-content: space-around; padding: .35rem; border-radius: 26px; gap: 0;
    background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: 0 10px 34px -8px rgba(40,20,10,.35), 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); }
  .tabs a { flex: 1; flex-direction: column; gap: .12rem; padding: .45rem .2rem .4rem; border-radius: 20px; font-size: .7rem; min-height: 3.4rem; justify-content: center; }
  .tabs svg { width: 1.45rem; height: 1.45rem; }
  .badge { top: .15rem; right: calc(50% - 1.6rem); }
  main { padding: 1rem .9rem 7.5rem; }
  body.focus .top, body.focus .tabs { display: none; }
  body.focus { --hh: 0rem; }
  body.focus main { padding-bottom: 1rem; }
  .hero { grid-template-columns: 1fr; padding: 1.3rem 1.2rem; border-radius: 26px; } .hero-r { position: absolute; right: 1rem; top: 1rem; } .hero-r .ring { width: 92px !important; height: 92px !important; }
  .hero-l { padding-right: 0; } .count .num { font-size: 4rem; }
  h1 { font-size: 1.7rem; }
  .rings .card { padding: .85rem .3rem .7rem; } .rings .ring { width: min(84px, 100%) !important; height: auto !important; aspect-ratio: 1; }
  .mockbar { top: .5rem; } .mockbar .muted.small { display: none; }
}
@media (max-width: 380px) { .count .num { font-size: 3.4rem; } .fc .hz { font-size: 5rem; } .prompt .hz { font-size: 3.8rem; } }
@media (min-width: 720px) { .hero-r .ring { filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.row.between:has(> h1) { margin-bottom: .9rem; }

/* quiz + drill: answers live at the bottom of the screen (thumb reach). The Next dock is always laid out (ghost until answered) so nothing moves. */
.dock.ghost { visibility: hidden; }
.answers { margin-top: .8rem; }
.answers .chips { margin-top: .5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(3.2rem, 1fr)); gap: .55rem; }
.answers .chip { max-width: none; min-height: 3.6rem; font-size: 1.2rem; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.answers.tf .chips { grid-template-columns: 1fr 1fr; } .answers.tf .chip { min-height: 4.4rem; font-size: 1.8rem; }
.answers .feedback { margin: 0; }
@media (max-width: 719px) {
  body.qz main { min-height: 100dvh; display: flex; flex-direction: column; }
  body.qz .opts, body.qz .answers { margin-top: auto; }
  body.qz .prompt, body.qz .feedback { flex: none; }
  body.qz .feedback { margin: .2rem 0 .7rem; }
  body.qz .answers .feedback { margin: 0 0 .7rem; }
  body.qz .dock { margin-top: .4rem; padding-top: .5rem; background: none; }
}

.dock .feedback { min-height: 2.7rem; display: flex; align-items: center; margin: 0 0 .5rem; font-size: .98rem; }
.answers { display: flex; flex-direction: column; }
.answers .feedback { order: 2; margin: .8rem 0 0; }
@media (max-width: 719px) { body.qz .answers .feedback { order: 0; margin: 0 0 .7rem; } body.qz .dock .feedback { margin: 0 0 .5rem; } }
@media (max-width: 719px) { body.qz .dock { position: static; } }
@media (max-width: 719px) and (max-height: 720px) {
  body.qz main { padding-top: .6rem; padding-bottom: .6rem; }
  body.qz .prompt { padding: .9rem .8rem .8rem; margin: .3rem 0 .5rem; } body.qz .prompt .hz { font-size: 3.4rem; } body.qz .prompt .tx { font-size: 1.5rem; }
  body.qz .opts { gap: .45rem; } body.qz .opt { min-height: 3.2rem; padding: .4rem .9rem; } body.qz .opt .zh { font-size: 1.45rem; }
  body.qz .dock .feedback { min-height: 2.2rem; margin-bottom: .35rem; } body.qz .dock .btn { min-height: 3rem; }
  body.qz .fhead { margin-bottom: .3rem; }
}
.answers ~ .dock .feedback { min-height: 3.5rem; }

/* ---- listening (browser text-to-speech) ---- */
.spk { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--red); cursor: pointer; flex: none; transition: transform .15s var(--ease), background .2s, border-color .2s; }
.spk:hover { border-color: var(--red); background: var(--red-soft); } .spk:active { transform: scale(.92); }
.spk .ico { width: 1.35rem; height: 1.35rem; }
.spk.corner { position: absolute; top: .8rem; right: .8rem; z-index: 2; }
.spk.inline { width: 2.4rem; height: 2.4rem; margin-left: .5rem; vertical-align: middle; }
.prompt { position: relative; }
.lbox { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .4rem 0 .7rem; }
.spk.big { width: 5.2rem; height: 5.2rem; color: #fff; border: none; background: linear-gradient(145deg, var(--red-solid), var(--red-deep)); box-shadow: var(--shadow-lg); }
.spk.big .ico { width: 2.3rem; height: 2.3rem; } .spk.big:hover { background: linear-gradient(145deg, var(--red-solid), var(--red-deep)); filter: brightness(1.08); }
.spk.slow { width: auto; height: 3rem; padding: 0 1.1rem; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--ink); }
/* only the button that is actually speaking pulses: the click handler puts .playing on that one element */
.spk.playing { border-color: var(--red); animation: spkpulse 1.1s ease-in-out infinite; }
@keyframes spkpulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--red-solid) 18%, transparent); } }
.spk.big.playing, .spk.slow.playing { animation-name: spkbig; }
@keyframes spkbig { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--red-solid) 22%, transparent), var(--shadow-lg); } }
@media (prefers-reduced-motion: reduce) { .spk.playing { animation: none; } }
.paper .heard, .heard { text-align: center; }
.paper .r1 .word.heard { white-space: normal; }
.paper .p-R1 .r1 .word.heard { font-size: 1rem; }
.tips { margin: .4rem 0 0; padding-left: 1.1rem; line-height: 1.55; } .tips li + li { margin-top: .35rem; }
@media (min-width: 720px) { .tabs a { padding: .42rem .8rem; } }

/* ---- exam plan ---- */
.planlist { padding: 0; overflow: hidden; margin-bottom: 1rem; }
.planhead { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem .5rem; }
.planhead .mbar { flex: 1; } .planhead b { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--muted); }
.planlist ul { list-style: none; margin: 0; padding: 0 0 .3rem; }
.pl { display: flex; align-items: center; gap: .7rem; padding: .15rem .8rem .15rem .6rem; }
.pl + .pl { border-top: 1px solid var(--line); }
.pcheck { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: none; padding: 0; cursor: pointer; }
.pcheck .ico { width: 1.35rem; height: 1.35rem; padding: .25rem; box-sizing: content-box; border-radius: 50%; border: 1.8px solid var(--line); color: transparent; transition: all .2s var(--ease); }
.pcheck:hover .ico { border-color: var(--ok); }
.pl.done .pcheck .ico { background: var(--ok); border-color: var(--ok); color: #fff; }
.pl.done .ptxt b { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--muted); }
.ptxt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: .6rem 0; text-decoration: none; color: inherit; position: relative; min-height: 2.9rem; }
a.ptxt { padding-right: 1.4rem; } .ptxt b { font-size: .98rem; line-height: 1.3; } .ptxt small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
a.ptxt .chev { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--muted); } a.ptxt .chev .ico { width: 1.1rem; height: 1.1rem; }

#ttsnote { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); max-width: min(92vw, 26rem); padding: .7rem 1rem; border-radius: 14px; background: var(--ink, #222); color: var(--bg, #fff); font-size: .9rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
#ttsnote.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- HSK 3.0 L2 question types */
.sech { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .7rem; margin: 1.6rem 0 .8rem; font-size: 1.3rem; }
.sech:first-child, .mockbar + #navwrap + * .sech:first-child { margin-top: .6rem; }
.sech small { font-size: .78rem; font-weight: 500; color: var(--muted); }
.ph .instr { margin: .2rem 0 .8rem; color: var(--muted); font-size: .9rem; }
.qset { margin-bottom: 1rem; }
.pbank { display: grid; gap: .5rem; margin: .2rem 0 .8rem; }
.pbank.pics { grid-template-columns: repeat(3, 1fr); }
.pbank.txts { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.pb-i { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 4.8rem; padding: .5rem .4rem .35rem; text-align: center; background: var(--bg); border: 1.5px dashed color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 14px; }
.pb-i b { position: absolute; top: .2rem; left: .5rem; font-size: .85rem; color: var(--red); }
.pb-i .em { font-size: 2.1rem; line-height: 1.2; }
/* generated pictures (img/<slug>.jpg); the emoji stays as the stand-in and as the fallback if a file is missing */
.em { display: inline-flex; align-items: center; justify-content: center; }
.em img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.pb-i .em { width: 100%; max-width: 5.6rem; }
.chip.pic .em { width: 100%; max-width: 4.8rem; }
.paper .em img { border-radius: 0; }
.pb-i small { font-size: .72rem; color: var(--muted); line-height: 1.2; }
.pb-i .zh { font-size: 1.2rem; line-height: 2.1; }
.pbank.txts .pb-i { flex-direction: row; justify-content: flex-start; min-height: 3.1rem; padding: .25rem .5rem .25rem 1.7rem; text-align: left; }
.qline { margin-top: .3rem; font-size: 1.25rem; line-height: 2.3; }
.qline .role, .dlg .role { margin-right: .5rem; }
.rdtext { font-size: 1.3rem; line-height: 2.5; }
.star { margin-top: .5rem; padding: .5rem .8rem; border-radius: 12px; background: var(--red-soft); font-size: 1.3rem; line-height: 2.4; }
.star > b { color: var(--red); margin-right: .4rem; }
.star .blank { display: inline-block; min-width: 3em; margin-left: .3em; border-bottom: 2px solid var(--red); text-align: center; }
.sent .blank, .qline .blank { display: inline-block; min-width: 2.4em; border-bottom: 2px solid currentColor; text-align: center; margin: 0 .15em; }
/* answer chips by kind (every chip stays at least 48 x 45 px) */
.chips.let .chip { flex: 1 1 3rem; max-width: 4.6rem; }
.chip.pic, .chip.txt, .chip.ch { position: relative; max-width: none; font-weight: 500; display: flex; }
.chip .cl { font-weight: 800; color: var(--red); font-size: .85rem; }
.chips.pic { display: grid; grid-template-columns: repeat(3, 1fr); }
.chip.pic { flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 5.6rem; padding: .4rem .3rem; }
.chip.pic .cl { position: absolute; top: .25rem; left: .5rem; }
.chip.pic .em { font-size: 2.2rem; line-height: 1.2; }
.chip.pic small { font-size: .72rem; color: var(--muted); line-height: 1.2; }
.chips.txt { display: grid; grid-template-columns: 1fr; }
.chip.txt { align-items: center; justify-content: flex-start; gap: .7rem; min-height: 3.4rem; padding: .3rem .9rem; text-align: left; }
.chip.txt .zh { font-size: 1.2rem; line-height: 2.1; }
.chips.ch { display: grid; grid-template-columns: repeat(3, 1fr); }
.chip.ch { align-items: center; justify-content: center; min-height: 4.4rem; padding: .3rem; }
.chip.ch .cl { position: absolute; top: .25rem; left: .5rem; }
.chip.ch .big { font-size: 2.2rem; line-height: 1.2; font-weight: 400; }
.chip.right small, .chip.wrong small { color: inherit; }
@media (min-width: 700px) { .chips.ch { grid-template-columns: repeat(6, 1fr); } }
.answers .chips.pic, .answers .chips.ch { margin-top: .5rem; }
.answers .chips.let { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.answers .chips.let .chip { min-width: 0; max-width: none; padding: .45rem 0; }
.answers .chips.pic .chip { min-height: 5.6rem; } .answers .chips.txt .chip { min-height: 3.6rem; } .answers .chips.ch .chip { min-height: 4.4rem; }
/* WA: a character with one component missing */
.wasent { text-align: center; font-size: 1.7rem; line-height: 2.2; padding: .3rem 0; }
.wasent ruby { margin: 0 .25em; }
.wa { display: inline-flex; align-items: center; justify-content: center; gap: 0; vertical-align: middle; font-size: 2.6rem; line-height: 1; padding: .2rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); }
.wa .have, .wa .gap { display: inline-flex; align-items: center; justify-content: center; min-width: 1em; min-height: 1em; font-weight: 400; }
.wa .gap { color: var(--red); background: var(--red-soft); border-radius: 6px; border: 1.5px dashed var(--red); }
.wa .gap.filled { color: inherit; background: transparent; border-style: solid; }
.wa-l { flex-direction: row; } .wa-r { flex-direction: row-reverse; }
.wa-t { flex-direction: column; } .wa-b { flex-direction: column-reverse; }
.wa-o { display: inline-grid; place-items: center; } .wa-o .have, .wa-o .gap { grid-area: 1 / 1; }
.wa-o .have { font-size: 2.6rem; opacity: .9; } .wa-o .gap { font-size: 1.2rem; min-width: 1.4em; min-height: 1.4em; z-index: 1; }
/* WB: type the word */
.wbform { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .7rem; }
.wbl { flex: 1 0 100%; font-size: .9rem; color: var(--muted); }
.wbl b { color: var(--red); font-size: 1.05rem; margin-left: .3rem; }
.wbin { flex: 1 1 8rem; min-width: 0; min-height: 3.2rem; padding: .4rem .9rem; font-size: 1.5rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.wbin:focus { outline: 2px solid var(--sel); outline-offset: 1px; }
/* type-the-characters drill: one row on a phone, input flexes */
.wform { display: flex; gap: .5rem; align-items: stretch; margin: .6rem 0 .2rem; }
.wform .wbin { flex: 1 1 auto; min-width: 0; min-height: 3rem; font-size: 1.3rem; }
.wform .btn { flex: none; }
.wbin.right { border-color: var(--ok); background: var(--ok-bg); } .wbin.wrong { border-color: var(--bad); background: var(--bad-bg); }
.wbform .btn { min-height: 3.2rem; }
.answers.p-WB { margin-top: .4rem; }
.mockres .mr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.mockres .verdict { font-size: 1.3rem; }
.legend i.good { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; background: var(--ok-bg); border: 1px solid var(--ok); vertical-align: -.05em; }
.btn.wide { width: 100%; }
/* printed-paper look for the new question types */
.paper .pb-i { background: #fff; border: 1px solid #000; border-radius: 0; }
.paper .pb-i b, .paper .chip .cl, .paper .star > b { color: #000; }
.paper .chip.pic, .paper .chip.txt, .paper .chip.ch { border-radius: 2px; background: #fff; }
.paper .chip.sel { background: #d9d9d9; }
.paper .star { background: #f2f2f2; border-radius: 0; }
.paper .wa, .paper .wbin { border-radius: 2px; background: #fff; color: #000; border-color: #000; }
.paper .wa .gap { background: #fff; border-color: #000; color: #000; }
.paper .qcard > .chips.pic, .paper .qcard > .chips.txt, .paper .qcard > .chips.ch, .paper .qcard > .wbform { margin-top: .4rem; }
.paper .qcard > .wasent, .paper .qcard > .pbank { margin: 0; }
@media (min-width: 700px) {
  .paper .qset.hasbank { display: grid; grid-template-columns: 1fr 16rem; column-gap: 1.2rem; align-items: start; }
  .paper .qset.hasbank .pb { order: 2; position: sticky; top: calc(var(--hh, 3.5rem) + 4.5rem); }
  .paper .qset.hasbank .pbank.pics, .paper .qset.hasbank .pbank.txts { grid-template-columns: repeat(2, 1fr); }
  .paper .qset.hasbank .pbank.txts { grid-template-columns: 1fr; }
}

/* mock navigator: one scrollable row on phones so the first question stays in view */
@media (max-width: 699px) {
  .qnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .3rem; margin: .5rem 0 .7rem; }
  .qnav button { flex: 0 0 2.4rem; }
}

.paper .qcard > * { min-width: 0; }
.paper .qcard { grid-template-columns: 2.4rem minmax(0, 1fr); }

/* textbook audio */
.track details { margin-top: .2rem; } .track summary { cursor: pointer; color: var(--muted, #7a6a62); padding: .3rem 0; }
.bline { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0; border-top: 1px solid var(--line); }
.bline .who { flex: 0 0 4.5rem; font-size: .8rem; color: var(--muted, #7a6a62); }
.bline .zh { font-size: 1.15rem; }

/* ---- workbook practice ---- */
.bline { display: flex; align-items: baseline; gap: .4rem; }
.bline .who { font-weight: 800; color: var(--red); min-width: 1.2rem; }
.btn.okb { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.btn.badb { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.btn.okb small, .btn.badb small { color: inherit; opacity: .8; }
.item .q { font-size: 1.15rem; line-height: 2.2; }
.item input { border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; padding: .2rem .4rem; }

/* ---- handwriting (hanzi-writer) ---- */
.hzgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .4rem; }
.hzt { display: grid; place-items: center; min-height: 3.4rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-size: 1.6rem; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.hzt:hover, .hzt:focus-visible { border-color: var(--red); background: var(--red-soft); }
.hzcanvas { display: grid; place-items: center; padding: .4rem 0; }
.hzcanvas svg { max-width: 100%; height: auto; border-radius: 14px; background: var(--bg); }

/* ---- textbook grammar notes (小语讲堂) ---- */
.grammar summary { cursor: pointer; font-size: 1.02rem; }
.grammar .gpoint { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.grammar .gpoint:first-of-type { border-top: 0; }
.grammar .gpara { margin: .4rem 0 0; line-height: 1.75; }
.grammar .tips { margin: .4rem 0 0; }

/* ---- lesson hub ---- */
.lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; }
.lstat { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .6rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.lstat b { font-size: 1.15rem; } .lstat small { color: var(--muted); font-size: .76rem; line-height: 1.2; }
.lstat:hover, .lstat:focus-visible { border-color: var(--red); background: var(--red-soft); }
/* ---- grammar drill ---- */
.sent .blank { display: inline-block; min-width: 1.6em; padding: 0 .25em; margin: 0 .1em; border-bottom: 2px dashed var(--red); color: var(--red); font-weight: 700; }
.gpoint .state { font-size: .78rem; }