:root {
  --ink: #102a43;
  --body: #334e68;
  --muted: #6b7f93;
  --blue: #2f6fc0;
  --blue-soft: #eaf2ff;
  --green: #18705a;
  --green-soft: #e8f6f1;
  --amber: #9a5b10;
  --amber-soft: #fff3df;
  --line: #d9e4f0;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #eef5ff; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--body);
  background:
    radial-gradient(circle at 92% 4%, rgba(96, 153, 228, .22) 0 15rem, transparent 15.1rem),
    radial-gradient(circle at 5% 95%, rgba(82, 183, 148, .16) 0 13rem, transparent 13.1rem),
    linear-gradient(145deg, #f8fbff, #eaf3ff);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(47, 111, 192, .32); outline-offset: 3px; }

.app-shell { width: min(100%, 540px); min-height: 100vh; margin: 0 auto; padding: 22px 18px 32px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.eyebrow { margin: 0 0 4px; color: var(--blue); font-size: .77rem; font-weight: 700; letter-spacing: .04em; }
h1 { margin: 0; color: var(--ink); font-size: clamp(1.65rem, 7vw, 2.2rem); line-height: 1.1; }
.progress-pill {
  flex: 0 0 auto; min-width: 76px; padding: 9px 13px; border: 1px solid rgba(47, 111, 192, .16);
  border-radius: 999px; background: rgba(255, 255, 255, .76); color: var(--muted); text-align: center;
  box-shadow: 0 8px 24px rgba(32, 77, 124, .08);
}
.progress-pill strong { color: var(--ink); font-size: 1.15rem; }
.study-summary { display: flex; justify-content: center; gap: 16px; margin: 0 0 15px; color: var(--muted); font-size: .78rem; }
.study-summary div { display: flex; align-items: center; gap: 5px; }
.study-summary strong { color: var(--ink); }
.category-tabs {
  display: flex; gap: 7px; margin: 0 -3px 14px; padding: 3px; overflow-x: auto;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button {
  flex: 0 0 auto; padding: 7px 11px; border: 1px solid rgba(47, 111, 192, .16);
  border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted);
  font-size: .75rem; font-weight: 700; cursor: pointer;
}
.category-tabs button.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.known { background: #2f9d78; }
.dot.fuzzy { background: #d29434; }
.dot.unknown { background: #c05a67; }

.flip-card { height: min(67vh, 690px); min-height: 560px; perspective: 1500px; touch-action: pan-y; user-select: none; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform .58s cubic-bezier(.2, .72, .25, 1); transform-style: preserve-3d; }
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(47, 111, 192, .16); border-radius: 28px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 55px rgba(34, 73, 117, .15); backface-visibility: hidden;
}
.card-face::before { content: ""; display: block; height: 9px; flex: 0 0 auto; background: var(--blue); }
.card-back { transform: rotateY(180deg); }
.card-back::before { background: #24906f; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.card-heading.compact { padding-bottom: 12px; }
.card-number { display: block; margin-bottom: 3px; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.card-back .card-number { color: var(--green); }
.card-heading h2 { margin: 0; color: var(--ink); font-size: clamp(2.25rem, 11vw, 3.6rem); line-height: 1.05; letter-spacing: .04em; }
.card-heading.compact h2 { font-size: 2.25rem; }
.pinyin { margin: 7px 0 0; color: var(--muted); font-size: .87rem; }
.sentiment { flex: 0 0 auto; padding: 8px 13px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: .82rem; font-weight: 800; }

.content-scroll {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 17px 22px 12px;
  scrollbar-width: thin; scrollbar-color: #b7c9dc transparent; user-select: text;
}
.card-section { margin-bottom: 20px; }
.card-section h3, .answer-box h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; color: var(--blue); font-size: 1.05rem; }
.card-back .card-section h3, .answer-box h3 { color: var(--green); }
.card-section h3::before, .answer-box h3::before { content: ""; width: 5px; height: 22px; border-radius: 8px; background: currentColor; }
.card-section p, .answer-box p { margin: 7px 0; font-size: .88rem; line-height: 1.68; }
.hook-box, .warning-box, .answer-box { padding: 14px 15px; border-radius: 17px; }
.hook-box { background: var(--blue-soft); }
.hook-box strong { color: var(--ink); font-size: .96rem; }
.hook-box p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { min-width: 60px; padding: 7px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: .79rem; font-weight: 700; text-align: center; }
.source-note { color: var(--muted); font-size: .75rem !important; }
.options { display: grid; gap: 5px; margin-top: 12px; }
.options p { margin: 0; padding: 8px 10px; border-radius: 11px; background: #f6f8fb; line-height: 1.4; }
.flip-hint { flex: 0 0 auto; margin: 10px 22px 18px; padding: 12px; border: 0; border-radius: 14px; background: var(--amber-soft); color: var(--amber); font-weight: 800; cursor: pointer; }
.flip-hint.back { background: var(--green-soft); color: var(--green); }

.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.comparison-grid.two { grid-template-columns: repeat(2, 1fr); }
.comparison-grid.two .comparison { display: flex; align-items: center; min-height: 88px; font-size: .75rem; line-height: 1.55; }
.comparison { min-height: 100px; padding: 12px 7px; border-radius: 15px; text-align: center; }
.comparison strong, .comparison span { display: block; }
.comparison strong { margin-bottom: 8px; font-size: .85rem; }
.comparison span { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.comparison.blue { background: var(--blue-soft); color: var(--blue); }
.comparison.green { background: var(--green-soft); color: var(--green); }
.comparison.amber { background: var(--amber-soft); color: var(--amber); }
.mnemonic { color: var(--ink); font-weight: 800; }
.warning-box { background: var(--amber-soft); }
.warning-box p:first-child { color: #774814; font-weight: 700; }
.answer-box { background: var(--green-soft); }
.answer-box h3 { margin-bottom: 8px; }

.card-controls { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; margin-top: 15px; }
.card-controls button, .secondary-controls button {
  border: 1px solid rgba(47, 111, 192, .16); border-radius: 14px; background: rgba(255, 255, 255, .82);
  color: var(--body); font-weight: 700; cursor: pointer;
}
.card-controls button { min-height: 48px; }
.card-controls .primary { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 9px 20px rgba(47, 111, 192, .25); }
.secondary-controls { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.secondary-controls button { padding: 8px 13px; color: var(--muted); font-size: .76rem; }
.mastery-panel { margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(47, 111, 192, .12); border-radius: 20px; background: rgba(255, 255, 255, .72); text-align: center; }
.mastery-panel p { margin: 0 0 10px; color: var(--muted); font-size: .78rem; }
.mastery-panel div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mastery-panel button { padding: 10px; border: 2px solid transparent; border-radius: 12px; font-weight: 800; cursor: pointer; }
.mastery-panel button.known { background: #dff4eb; color: #1e755b; }
.mastery-panel button.fuzzy { background: #fff0d6; color: #915b0d; }
.mastery-panel button.unknown { background: #fde6e9; color: #a34150; }
.mastery-panel button[aria-pressed="true"] { border-color: currentColor; }
footer { margin-top: 18px; color: var(--muted); text-align: center; font-size: .7rem; }
footer p { margin: 0 0 9px; }
.tag-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.tag-list span { padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .72); }

@media (max-height: 760px) {
  .app-shell { padding-top: 14px; }
  .flip-card { min-height: 490px; height: 64vh; }
  .card-heading { padding-top: 14px; }
  .card-heading h2 { font-size: 2.45rem; }
}
@media (min-width: 700px) { .app-shell { padding-top: 34px; } }
@media (prefers-reduced-motion: reduce) { .flip-card-inner { transition: none; } }