:root {
  --ink: #18222f;
  --muted: #617083;
  --line: #d8e2e7;
  --paper: #ffffff;
  --mint: #10a6a6;
  --mint-dark: #087b78;
  --sun: #ffb23f;
  --rose: #f36f6f;
  --blue: #3c7dd9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f5fbfb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, rgba(16,166,166,.12), transparent 34%), radial-gradient(circle at 88% 8%, rgba(255,178,63,.28), transparent 23%), #f5fbfb; }
button, input { font: inherit; }
button { cursor: pointer; }
p, h1, h2 { margin: 0; }
.topbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px clamp(14px,4vw,34px); border-bottom: 1px solid rgba(24,34,47,.12); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 12px; color: white; background: var(--mint); font-size: 22px; font-weight: 900; }
.eyebrow { color: var(--mint-dark); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
h1 { margin-top: 3px; font-size: clamp(22px,4vw,34px); line-height: 1.12; }
h2 { margin-top: 3px; font-size: clamp(26px,5vw,40px); line-height: 1.1; }
.count-pill { padding: 8px 12px; border-radius: 999px; background: #ffe2a2; color: var(--ink); font-size: 14px; font-weight: 900; white-space: nowrap; }
main { width: min(1180px,100%); margin: 0 auto; padding: 18px clamp(14px,3vw,28px) 42px; }
.shelf-head, .controls, .blind-panel { border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(44,75,110,.10); }
.shelf-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 16px; padding: clamp(18px,4vw,28px); }
.shelf-head > p { max-width: 420px; color: var(--muted); line-height: 1.5; }
.book-grid, .unit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.nav-card { display: grid; gap: 8px; min-height: 98px; border: 0; border-radius: 8px; padding: 16px; color: var(--ink); background: linear-gradient(135deg,#fff,#dff7f2); text-align: left; box-shadow: 0 10px 22px rgba(44,75,110,.10); }
.nav-card:nth-child(2n) { background: linear-gradient(135deg,#fff,#fff0cc); }
.nav-card:nth-child(3n) { background: linear-gradient(135deg,#fff,#e8efff); }
.nav-card:nth-child(4n) { background: linear-gradient(135deg,#fff,#ffe2e2); }
.nav-card:hover { transform: translateY(-2px); }
.nav-title { font-size: 24px; font-weight: 950; line-height: 1.08; }
.nav-meta { color: var(--muted); font-size: 14px; font-weight: 800; }
.controls { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 12px; align-items: end; margin-bottom: 16px; padding: 14px; }
.search-box { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 850; }
input[type=search] { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: #fbfeff; color: var(--ink); font-size: 16px; }
.button-row, .blind-actions, .blind-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.button-row button, .blind-actions button, .blind-buttons button { min-height: 42px; border: 0; border-radius: 8px; padding: 0 13px; color: var(--ink); background: #edf5f7; font-weight: 850; }
.button-row button:hover, .button-row button[aria-pressed=true], .blind-buttons button:first-child { color: white; background: var(--mint); }
.blind-buttons button:nth-child(2) { color: white; background: var(--rose); }
.blind-panel { margin-bottom: 16px; overflow: hidden; }
.blind-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px; background: #def6f2; }
.blind-card { display: grid; justify-items: center; gap: 14px; padding: clamp(18px,4vw,32px); text-align: center; }
.blind-progress { color: var(--mint-dark); font-weight: 900; }
.blind-play { min-width: min(100%,260px); min-height: 64px; border: 0; border-radius: 8px; color: white; background: var(--sun); font-size: 24px; font-weight: 950; }
.blind-answer { width: min(100%,620px); border-radius: 8px; padding: 16px; background: #fff4d8; text-align: left; }
.blind-word { font-size: clamp(32px,7vw,52px); font-weight: 950; overflow-wrap: anywhere; }
.blind-phonetic { margin-top: 4px; color: var(--mint-dark); font-size: 18px; font-weight: 850; }
.blind-meaning { margin-top: 10px; font-size: 19px; font-weight: 850; line-height: 1.45; }
.blind-example { margin-top: 10px; color: var(--muted); line-height: 1.5; }
.word-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.word-card { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; min-height: 176px; padding: 14px; border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: 0 8px 22px rgba(44,75,110,.09); }
.word-card.is-playing { outline: 3px solid var(--mint); }
.play-button { width: 44px; height: 44px; border: 0; border-radius: 8px; color: white; background: var(--mint); font-weight: 900; }
.word-main { min-width: 0; }
.word-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.word-no { color: var(--rose); font-size: 13px; font-weight: 900; }
.word-text { min-width: 0; border: 0; padding: 0; color: var(--ink); background: transparent; font-size: 25px; font-weight: 950; line-height: 1.12; text-align: left; overflow-wrap: anywhere; }
.phonetic { flex: 0 1 auto; color: var(--mint-dark); font-size: 15px; font-weight: 850; line-height: 1.25; overflow-wrap: anywhere; }
.star-button { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 8px; color: #8ea0ad; background: #edf5f7; font-size: 22px; font-weight: 950; line-height: 1; }
.star-button[aria-pressed=true] { color: white; background: var(--sun); }
.meaning { margin-top: 9px; color: #33475f; font-size: 17px; font-weight: 850; line-height: 1.4; }
.definition { margin-top: 7px; color: #526172; font-size: 14px; line-height: 1.45; }
.example-en { margin-top: 9px; color: var(--ink); font-size: 15px; line-height: 1.45; font-weight: 760; }
.example-zh { margin-top: 4px; color: #6b7888; font-size: 14px; line-height: 1.45; }
.audio-status { min-height: 18px; margin-top: 7px; color: #b54708; font-size: 13px; font-weight: 750; }
body.hide-chinese .zh { display: none; }
.empty-state { grid-column: 1/-1; padding: 36px 18px; border-radius: 8px; color: var(--muted); background: white; text-align: center; }
@media (max-width: 940px) { .book-grid, .unit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .word-grid { grid-template-columns: 1fr; } .controls { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .topbar { grid-template-columns: 42px minmax(0,1fr); } .count-pill { grid-column: 2; width: fit-content; } .book-grid, .unit-grid { grid-template-columns: 1fr; } .shelf-head, .blind-head { display: grid; align-items: start; } }

.book-grid .nav-title { font-size: 26px; }