.pull-refresh { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--jade-dark); font-size: 13px; max-width: 760px; margin-inline: auto; }
.pull-refresh.is-refreshing { height: 52px; }
html { overscroll-behavior-y: none; }
.free-shell {
  min-height: 100vh;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
}
.free-header, .free-page { max-width: 760px; margin: auto; padding: 20px 24px; }
.free-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-block: 14px; }
.free-header h1 { font-family: var(--serif); font-size: 25px; margin: 0; }
.native-shell .free-header { display: none; }
.eyebrow { font-size: 12px; letter-spacing: 1px; color: var(--jade-dark); }
.edition { font-size: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 6px 10px; color: var(--jade-dark); white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; color: #fffaf1; background: var(--cinnabar); font: 26px var(--serif); width: 48px; height: 48px; border-radius: 8px; }
.brand-mark.small { font-size: 16px; width: 23px; height: 23px; margin-left: 8px; border-radius: 4px; vertical-align: middle; }
.muted, .source, .disclaimer, .free-footer { color: var(--muted); font-size: 13px; line-height: 1.7; }
.learning-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 0 18px; }
.learning-hero > div { flex: 1; min-width: 180px; }
.learning-hero h2 { font-family: var(--serif); font-size: 25px; line-height: 1.4; margin: 5px 0; }
.learning-hero p { margin: 4px 0 0; }
.learning-progress { flex-basis: 100%; }
.search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.search-bar input { flex: 1; width: 0; min-width: 0; background: #fffaf1; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.search-bar button { flex-shrink: 0; min-width: 64px; white-space: nowrap; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { border: 1px solid var(--line); border-radius: 20px; min-height: 44px; padding: 7px 16px; background: transparent; color: var(--muted); }
.filter.active { background: var(--jade-dark); color: white; border-color: var(--jade-dark); }
.deck-filter { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 12px 0 16px; }
.deck-filter select { min-width: 0; flex: 1; padding: 10px; background: #fffaf1; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.free-page .section-head { margin-bottom: 10px; }
.free-page .section-head h2 { font-family: var(--serif); font-size: 22px; margin: 0; }
.content-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
.content-card { text-align: left; background: var(--paper-strong); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 9px; line-height: 1.7; width: 100%; word-break: break-word; }
.content-card strong { font-family: var(--serif); font-size: 18px; }
.row-arrow { font-size: 12px; color: var(--jade-dark); margin-top: auto; }
.paper { padding: 22px; background: var(--paper-strong); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 18px; line-height: 1.85; }
.paper h2 { font-family: var(--serif); font-size: 25px; margin: 8px 0 18px; overflow-wrap: anywhere; }
.paper h3 { font-size: 17px; margin-top: 23px; }
.answer { padding: 18px; background: var(--mist); border-radius: 9px; margin: 20px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.answer p { line-height: 1.85; }
.source { border-top: 1px solid var(--line); padding-top: 16px; overflow-wrap: anywhere; }
.free-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; background: #fffaf1f5; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.free-nav button { flex: 1; max-width: 190px; border: 0; background: none; color: var(--muted); font-size: 15px; font-weight: 600; min-height: 60px; }
.free-nav button.active { color: var(--jade-dark); box-shadow: inset 0 3px var(--jade-dark); }
.free-stats { display: flex; gap: 16px; padding: 14px 0 25px; }
.free-stats > div { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.free-stats strong { font-size: 30px; color: var(--jade-dark); }
.free-stats span { font-size: 12px; color: var(--muted); }
.settings-list { display: flex; flex-direction: column; }
.settings-list a, .settings-list button { color: var(--ink); background: none; text-align: left; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px; }
.free-footer { text-align: center; padding-top: 20px; overflow-wrap: anywhere; }
.free-footer a, .legal-links a, .consent-check a { color: var(--jade-dark); }
.error-banner { background: #fff0eb; border: 1px solid #d9b2a6; border-radius: 8px; padding: 12px; color: #8f3423; margin-bottom: 18px; display: flex; gap: 12px; justify-content: space-between; overflow-wrap: anywhere; }
.error-banner button { background: none; border: 0; color: inherit; font-size: 20px; flex-shrink: 0; min-width: 36px; min-height: 36px; }
.consent-page { padding-top: 40px; max-width: 580px; }
.lead { font-size: 18px; line-height: 1.8; }
.legal-links { display: flex; gap: 18px; flex-wrap: wrap; margin: 20px 0; }
.consent-check { display: block; font-size: 13px; line-height: 1.8; margin: 20px 0; }
.consent-check input { margin-right: 8px; width: 18px; height: 18px; vertical-align: middle; accent-color: var(--jade-dark); }
.code-row { display: flex; gap: 8px; flex-wrap: wrap; }
.code-row input { min-width: 100px; flex: 1; }
.code-row button { white-space: nowrap; }
.free-page button:disabled { opacity: .55; cursor: not-allowed; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.free-page button, .consent-page button { min-height: 44px; }
.free-page input, .free-page select, .free-page textarea { font-size: 16px; scroll-margin-block: 20px 100px; }
button:focus-visible, a:focus-visible { outline: 3px solid #b18a43; outline-offset: 3px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.back { margin: 0 0 12px; padding-left: 0; }
.disclaimer { text-align: center; margin-top: 26px; }
.free-page .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.free-page .grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.free-page .grade-btn { padding: 14px 8px; background: var(--mist); color: var(--jade-dark); border: 1px solid var(--line); }
.case-comparison { margin-top: 24px; padding-top: 6px; border-top: 1px solid var(--line); scroll-margin-top: 20px; overflow-wrap: anywhere; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comparison-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--mist); }
.comparison-grid > section:first-child { background: #fff; }
.case-comparison h4 { margin: 0 0 10px; font-size: 16px; }
.case-comparison > h4 { margin-top: 20px; }
.comparison-grid dl { margin: 0; }
.comparison-grid dl > div + div { margin-top: 14px; }
.comparison-grid dt { color: var(--muted); font-size: 13px; }
.comparison-grid dd { margin: 2px 0 0; white-space: pre-wrap; }
.completion-notice { background: var(--mist); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.completion-notice strong { color: var(--jade-dark); }
.completion-notice p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 8px 0 0; }
#feedbackSection, #appError { scroll-margin-top: 16px; }
.history-entry { margin-bottom: 18px; }
.history-answer dt { color: var(--muted); font-size: 13px; }
.history-answer dd { margin: 4px 0 16px; overflow-wrap: anywhere; }
.history-feedback { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .free-header, .free-page { padding: 16px; }
  .free-header { padding-block: 12px; }
  .free-header h1 { font-size: 23px; }
  .content-list { grid-template-columns: 1fr; }
  .learning-hero { gap: 8px; padding-bottom: 14px; }
  .learning-hero h2 { font-size: 23px; }
  .learning-hero > .primary-btn { padding-inline: 12px; }
  .paper { padding: 18px; }
}
@media (max-width: 360px) {
  .learning-hero > div { min-width: 150px; }
  .learning-hero h2 { font-size: 21px; }
}
@media (max-width: 340px) {
  .comparison-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.topic-summary summary{min-height:44px;display:flex;align-items:center;color:var(--jade-dark)}
.topic-lesson{padding:14px 0;border-bottom:1px solid var(--line)}
.topic-lesson p{margin:6px 0;line-height:1.8}
/* Stage 03: original paper/jade/cinnabar learning flow. */
:root{--muted:#626b64;--cinnabar:#9c3f2d;--gold:#826335}
.free-page .primary-btn,.free-page .ghost-btn,.free-page .text-btn{min-height:48px}
.grade-grid .grade-btn{border-color:#8b887c}
.today-heading,.round-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 20px}
.today-heading h2{font-size:28px;margin:8px 0 0;font-family:"Songti SC",STSong,serif}
.today-goal{display:grid;grid-template-columns:144px 1fr;align-items:center;gap:22px;padding:24px 20px}
.goal-ring{width:144px;height:144px;border-radius:50%;background:conic-gradient(#21584c var(--progress),#e1e7df 0);padding:9px;box-sizing:border-box}
.goal-ring>div{width:100%;height:100%;border-radius:50%;background:#fffaf1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px}
.goal-ring strong{font-size:34px;color:#21584c;font-family:Georgia,serif}.goal-ring small{font-size:16px;color:#626b64}.goal-ring span{font-size:12px;color:#626b64}
.goal-copy h3{font-size:21px;line-height:1.5;margin:12px 0;font-family:"Songti SC",STSong,serif}.goal-copy p{font-size:13px;line-height:1.7;margin:8px 0}
.seal{display:inline-block;color:#9c3f2d;border:1px solid #9c3f2d;border-radius:4px;padding:3px 7px;font-size:12px;letter-spacing:.12em;font-family:"Songti SC",STSong,serif}
.today-actions{display:grid;gap:10px;margin:16px 0 24px}.today-actions .text-btn{justify-self:center}
.task-notice{background:#f4e9d9;color:#634c29;border-left:3px solid #826335;padding:12px 14px;border-radius:6px;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.topic-tile{text-align:left}.topic-tile strong{font-size:21px;font-family:"Songti SC",STSong,serif}
.choice-row{display:flex;flex-wrap:wrap;gap:12px}.choice-row label{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;border:1px solid #8b887c;border-radius:8px;cursor:pointer}
.choice-row input,.topic-choice input{width:20px;height:20px;accent-color:#21584c;flex-shrink:0}
.plan-page fieldset{margin:24px 0;border:0;padding:0;min-width:0}.plan-page legend{font-weight:600;margin-bottom:12px}.topic-choice{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ddd3c5;padding:16px 0;cursor:pointer}.topic-choice small{display:block;color:#626b64;margin-top:8px;line-height:1.6}
.round-heading{font-size:14px;margin-bottom:6px;flex-wrap:wrap}.round-heading .text-btn{margin-left:auto}.round-progress{width:100%;height:6px;accent-color:#21584c;border:0;border-radius:6px;overflow:hidden}.round-progress::-webkit-progress-bar{background:#e1e7df}.round-progress::-webkit-progress-value{background:#21584c}
.study-card{margin-top:20px}.study-card h2{font-family:"Songti SC",STSong,serif;font-size:26px;line-height:1.7;margin:24px 0}.recall-hint{color:#626b64;text-align:center;margin:36px 0 20px}.study-card .answer{border-top:1px solid #ddd3c5;margin-top:24px;padding-top:16px;white-space:pre-wrap;overflow-wrap:anywhere}.grade-section{margin-top:24px}.grade-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:80px;padding:12px 6px}.grade-btn small{font-size:12px;font-weight:400}.grade-forgot{color:#9c3f2d!important;border-color:#9c3f2d!important}.grade-good{color:#21584c!important}.grade-easy{color:#21584c!important;background:#e9efe7!important}
.done-page{text-align:center;padding:32px 24px}.done-page h2{font-family:"Songti SC",STSong,serif;font-size:28px;margin:20px 0}.done-page>p{line-height:1.8}.done-number{font-family:Georgia,serif;font-size:60px;color:#21584c;margin:30px 0 12px}.done-number small{font-size:18px;color:#626b64}.done-page .free-stats{margin:24px 0}.done-page .stack-gap{margin-top:12px}
@media(max-width:359px){.today-goal{grid-template-columns:1fr;justify-items:center;gap:8px}.goal-copy{text-align:center}.today-heading{align-items:flex-start}.today-heading .text-btn{font-size:13px}.study-card h2{font-size:24px}}
@media(min-width:700px){.today-goal{grid-template-columns:160px 1fr;gap:32px}.today-heading h2{font-size:30px}}
/* Complete learning tools: choice practice, private materials and calendar. */
.preserve-lines{white-space:pre-wrap;overflow-wrap:anywhere}.teaching-image{display:block;width:100%;height:auto;max-height:380px;object-fit:contain;border-radius:9px;background:#e9efe7}.card-media{margin:18px 0}.card-media figcaption,figure figcaption{font-size:12px;color:var(--muted);line-height:1.7;margin-top:8px}.teaching-wave{display:block;width:100%;height:auto;max-height:200px;background:#e9efe7;border:1px solid var(--line);border-radius:9px;margin:20px 0}
.practice-options{display:grid;gap:10px;margin:22px 0}.practice-option{min-height:52px;padding:14px 16px;background:var(--paper-strong);border:1px solid #8b887c;border-radius:9px;text-align:left;color:var(--ink);line-height:1.7;overflow-wrap:anywhere}.practice-option.selected{border:2px solid #21584c;background:#e9efe7;color:#21584c;padding:13px 15px;font-weight:600}.practice-option.selected:before{content:'✓ ';}.practice-actions{display:flex;justify-content:space-between;gap:12px;margin:18px 0}.practice-actions>button{flex:1}.point-result{padding:10px 0 22px;border-bottom:1px solid var(--line)}.point-result h3{color:#21584c}.point-result p{overflow-wrap:anywhere}.point-result details{font-size:14px;line-height:1.85;margin:14px 0}.point-result summary{color:#21584c;cursor:pointer}
.candidate-card{border:1px solid var(--line);border-radius:10px;padding:16px;margin:24px 0;min-width:0}.candidate-card legend{font-weight:600;color:#21584c}.candidate-card .field+.field{margin-top:14px}.candidate-card .consent-check{margin:12px 0}.candidate-card details{margin:16px 0;padding:10px;background:#e9efe7}.candidate-card details p{font-size:14px;line-height:1.8}#materialForm .field{margin:16px 0}#materialText{min-height:200px;line-height:1.8}
.comparison-table{margin:20px 0;border:1px solid #8b887c;border-radius:9px;overflow:hidden}.comparison-row{display:grid;grid-template-columns:minmax(50px,.6fr) minmax(0,1fr) minmax(0,1fr)}.comparison-row>*{padding:10px 8px;border-right:1px solid var(--line);overflow-wrap:anywhere;font-size:14px}.comparison-row>*:last-child{border-right:0}.comparison-row+.comparison-row{border-top:1px solid var(--line)}.comparison-row:first-child{background:#e9efe7;color:#21584c}
.learning-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:24px 0}.learning-calendar>span{text-align:center;font-size:13px}.calendar-day{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:48px;padding:4px 0;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:6px}.calendar-day small{font-size:10px;line-height:1.1}.calendar-day.learned{background:#e9efe7;color:#21584c}.calendar-day.selected{border:2px solid #21584c;font-weight:700}.free-nav button{max-width:152px;font-size:14px}.free-page .input,.free-page .textarea{max-width:100%;min-width:0}.free-page fieldset{min-width:0}.free-page details summary{min-height:44px;line-height:1.7;padding-block:10px}
@media(max-width:359px){.practice-actions{flex-direction:column}.comparison-row>*{font-size:13px;padding:8px 6px}.candidate-card{padding:12px}.free-page .paper{padding-inline:15px}.free-nav button{font-size:13px}}