:root {
  --bg: #f7f4ee; --paper: #fffdf9; --ink: #22252a; --muted: #767b85; --line: #e6e0d4; --soft: #efeae0;
  --accent: #2c64c9; --accent-ink: #fff; --accent-soft: #e5edfb; --hl: #fff1c7; --hl-ink: #22252a;
  --cue: #9a3b1f; --cue-bg: #fbe9e1; --ok: #1f7a4d; --ok-bg: #e2f3ea; --rec: #d92d20; --flag: #c2410c;
  --bar: rgba(255, 253, 249, .92); --shadow: 0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171b; --paper: #1d2025; --ink: #ebe8e2; --muted: #9a9fa8; --line: #2e3238; --soft: #262a30;
    --accent: #7ea6f2; --accent-ink: #10131a; --accent-soft: #22304a; --hl: #4a3f1a; --hl-ink: #fff7dd;
    --cue: #f2a38a; --cue-bg: #3a2620; --ok: #5fd39a; --ok-bg: #183427; --rec: #ff6b5e; --flag: #fb923c;
    --bar: rgba(29, 32, 37, .92); --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #15171b; --paper: #1d2025; --ink: #ebe8e2; --muted: #9a9fa8; --line: #2e3238; --soft: #262a30;
  --accent: #7ea6f2; --accent-ink: #10131a; --accent-soft: #22304a; --hl: #4a3f1a; --hl-ink: #fff7dd;
  --cue: #f2a38a; --cue-bg: #3a2620; --ok: #5fd39a; --ok-bg: #183427; --rec: #ff6b5e; --flag: #fb923c;
  --bar: rgba(29, 32, 37, .92); --shadow: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 17px/1.6 -apple-system, "PingFang SC", system-ui, sans-serif; }
button, select { font: inherit; color: inherit; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.en-font { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; }

/* header */
header.top { position: sticky; top: 0; z-index: 5; background: var(--bar); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.row1 { display: flex; align-items: center; gap: 10px; min-height: 58px; flex-wrap: wrap; padding-block: 8px; }
.back { border: 0; background: none; font-size: 28px; line-height: 1; padding: 4px 8px 4px 0; cursor: pointer; color: var(--accent); }
.title { font-weight: 700; font-size: 19px; margin-right: auto; }
.title small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; }
.tabs { display: flex; gap: 4px; margin-right: auto; }
.tabs button { border: 0; background: none; padding: 7px 14px; border-radius: 99px; cursor: pointer; color: var(--muted); min-height: 38px; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tog { border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 6px 14px; min-height: 38px; cursor: pointer; font-size: 15px; color: var(--muted); }
.tog[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: transparent; }
#viewOpts { display: inline-flex; gap: 6px; }
.seg { display: inline-flex; background: var(--soft); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 6px 11px; border-radius: 9px; cursor: pointer; font-size: 15px; min-height: 36px; }
.seg button[aria-pressed="true"] { background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
select.voice { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 7px 10px; min-height: 40px; font-size: 15px; }

/* home */
.home h1 { font-size: 28px; margin: 32px 0 6px; }
.home p { color: var(--muted); margin: 0 0 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.card b { font-size: 22px; display: block; }
.card span { color: var(--muted); display: block; }
.meter { height: 6px; border-radius: 99px; background: var(--soft); margin-top: 14px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.card small { color: var(--muted); display: block; margin-top: 6px; font-size: 13px; }

/* full text */
main.view { padding: 18px 0 170px; }
.para { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 10px 10px; margin-bottom: 12px; box-shadow: var(--shadow); }
.s { display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px 8px 10px; margin: 2px 0; border-radius: 12px; cursor: pointer; transition: background .15s ease; }
.s:active { background: var(--soft); }
.s.on { background: var(--hl); color: var(--hl-ink); }
.s .body { flex: 1; min-width: 0; }
.s .en { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.45; }
.s.title-line .en { font-weight: 700; font-size: 26px; }
.s.zhline .en { font-family: "Songti SC", "STSong", serif; font-size: 24px; letter-spacing: .04em; }
.s .zh { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.s.on .zh { color: inherit; opacity: .75; }
body:not(.show-zh) .s .zh { display: none; }
.s .variant { display: block; color: var(--flag); font-size: 14px; margin-top: 4px; }
.s.on .w { opacity: .45; transition: opacity .12s ease; }
.s.on .w.said { opacity: 1; }
.rest { color: transparent; border-bottom: 2px solid var(--line); }
.s.on .rest { color: inherit; border-bottom-color: transparent; }
.mark { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); cursor: pointer; font-size: 17px; display: grid; place-items: center; }
.mark[aria-pressed="true"] { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); margin-left: 8px; vertical-align: middle; opacity: .7; }
.cue { display: inline-flex; align-items: center; gap: 8px; margin: 4px 10px 6px; padding: 6px 12px; border-radius: 10px;
  background: var(--cue-bg); color: var(--cue); font-size: 15px; font-weight: 600; }

/* hard sentences */
.hcard { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.chunks { font-family: "Iowan Old Style", Georgia, serif; font-size: 23px; line-height: 1.7; }
.chunk { border: 0; background: none; padding: 2px 6px; margin: 0 -2px; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; }
.chunk:active { background: var(--soft); }
.chunk.on { background: var(--hl); color: var(--hl-ink); }
.slash { color: var(--accent); font-weight: 700; margin: 0 4px; font-family: system-ui; }
.chunk b { font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tip { color: var(--muted); font-size: 15px; margin: 10px 0 12px; }
.hcard .zh { color: var(--muted); font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 8px 14px; min-height: 42px; cursor: pointer; font-size: 15px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.rec { color: var(--rec); }
.btn.rec.live { background: var(--rec); color: #fff; border-color: transparent; }
.btn[disabled] { opacity: .45; cursor: default; }
.legend { color: var(--muted); font-size: 14px; margin-bottom: 14px; }

/* words */
.group { font-size: 15px; color: var(--muted); margin: 18px 4px 8px; font-weight: 600; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.wcard { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.wcard .wd { font-family: "Iowan Old Style", Georgia, serif; font-size: 24px; font-weight: 600; }
.wcard .ipa { color: var(--accent); font-size: 16px; }
.wcard .mean { font-size: 15px; }
.wcard .ex { color: var(--muted); font-size: 14px; font-family: "Iowan Old Style", Georgia, serif; }
.wcard .ex b { color: var(--ink); }
.wcard .actions { margin-top: 6px; }

/* rehearsal */
.reh { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 14px; text-align: center; box-shadow: var(--shadow); }
.clock { font-size: 64px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.clock.over { color: var(--flag); }
.target { color: var(--muted); margin: 4px 0 14px; }
.reh .actions { justify-content: center; }
.history { text-align: left; margin-top: 14px; font-size: 15px; color: var(--muted); }
.history .hrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.history .hrow span { flex: 1; }
.history .btn { padding: 4px 12px; min-height: 0; font-size: 14px; }
.history .btn.x { color: var(--muted); }
.credits { margin: 28px 0 8px; font-size: 13px; color: var(--muted); }
.credits summary { cursor: pointer; }
.credits div { padding: 2px 0; overflow-wrap: anywhere; }
.credits a { color: inherit; }

/* player bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--bar); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bar .wrap { display: flex; align-items: center; gap: 8px; min-height: 76px; flex-wrap: wrap; padding-block: 8px; }
.ctrl { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 17px; display: grid; place-items: center; }
.ctrl.main { width: 58px; height: 58px; background: var(--accent); color: var(--accent-ink); border: 0; font-size: 21px; }
.ctrl[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ctrl.rec { color: var(--rec); }
.ctrl.rec.live { background: var(--rec); color: #fff; border-color: transparent; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .ctrl.rec.live { animation: none; } }
.now { flex: 1; min-width: 120px; font-size: 14px; color: var(--muted); }
.now b { color: var(--ink); font-weight: 600; }
.ctrl.pill { width: auto; min-width: 46px; padding: 0 12px; border-radius: 99px; font-size: 15px; }
.ctrl[hidden] { display: none; }
.sep { width: 1px; height: 30px; background: var(--line); margin: 0 2px; }

.overlay { position: fixed; inset: 0; z-index: 9; display: none; place-items: center; background: rgba(0,0,0,.45); }
.overlay.show { display: grid; }
.overlay > div { background: var(--paper); border-radius: 24px; padding: 28px 40px; text-align: center; }
.overlay b { display: block; font-size: 64px; line-height: 1.1; color: var(--cue); }
.overlay button { margin-top: 12px; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 10; background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 12px; font-size: 15px; max-width: min(92vw, 520px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.toast.show { opacity: 1; }

@media (max-width: 600px) {
  .s .en { font-size: 20px; }
  .chunks { font-size: 20px; }
  .row1 { min-height: 50px; padding-block: 4px; flex-wrap: nowrap; }
  .title { font-size: 17px; min-width: 0; overflow: hidden; }
  .title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  select.voice { max-width: 46vw; }
  .row2 { flex-wrap: nowrap; padding-bottom: 8px; gap: 6px; }
  .tabs { gap: 0; }
  .tabs button, .tog { padding: 6px 9px; white-space: nowrap; font-size: 15px; }
  #viewOpts { gap: 4px; flex: none; }
  .bar .wrap { flex-wrap: nowrap; gap: 6px; min-height: 64px; }
  .ctrl { width: 42px; height: 42px; flex: none; }
  .ctrl.pill { min-width: 42px; padding: 0 10px; }
  .ctrl.main { width: 52px; height: 52px; }
  .wide-only, .sep { display: none; }
  .now { min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main.view { padding-bottom: 120px; }
}

.armed, .ctrl.armed { background: #c2410c !important; color: #fff !important; border-color: transparent !important; width: auto; padding-inline: 12px; white-space: nowrap; }
html[data-test]::after { content: attr(data-test); position: fixed; top: calc(env(safe-area-inset-top) + 4px); left: 50%; transform: translateX(-50%);
  z-index: 20; background: #c2410c; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 99px; pointer-events: none; }