:root { --red-900:#6f1f25; --red-800:#86262c; --red-700:#9b2b31; --red-100:#f5e3e4; --red-050:#fff7f7; --ink:#24191b; --muted:#716366; --line:#e9dddd; --soft:#fbf8f8; --success:#1f8a5b; --shadow:0 18px 44px rgba(111,31,37,.1); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fcfbfb; font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif; }
a,button { font:inherit; } button { cursor:pointer; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:74rem; margin:auto; padding:1.15rem 1.5rem; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.6rem; color:var(--ink); font-weight:900; text-decoration:none; }.brand-mark { display:grid; width:2rem;height:2rem;place-items:center;border-radius:.45rem;color:#fff;background:var(--red-700); }
.topnav { display:flex; gap:1rem; flex-wrap:wrap; }.topnav a { color:var(--muted); font-weight:800; text-decoration:none; }.topnav a.active,.topnav a:hover { color:var(--red-800); }
.page { width:min(74rem,calc(100% - 3rem)); margin:0 auto; padding:4rem 0 5rem; }.eyebrow { margin:0 0 .5rem;color:var(--red-700);font-size:.8rem;font-weight:900; }.page h1 { margin:0;color:var(--red-900);font-size:clamp(2.5rem,6vw,5rem);line-height:1;letter-spacing:0; }.lead { max-width:44rem;color:var(--muted);font-size:1.1rem;line-height:1.75; }
.study-grid { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:1.2rem;margin-top:2.5rem; }.panel { padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--line);border-radius:.5rem;background:#fff;box-shadow:var(--shadow); }.panel h2 { margin:0;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.13; }.panel p { line-height:1.7; }.muted { color:var(--muted); }
.tag { display:inline-flex;margin-bottom:1rem;padding:.35rem .6rem;border-radius:999px;color:var(--red-900);background:var(--red-100);font-size:.8rem;font-weight:900; }.word { margin:1rem 0 .25rem;color:var(--red-900);font-size:clamp(2rem,5vw,4rem);line-height:1; }.word-note { margin:0;color:var(--muted); }
.example { margin-top:1.25rem;padding:1rem;border-left:4px solid var(--red-700);background:var(--red-050);line-height:1.65; }.example-list { display:grid; gap:.7rem; margin-top:1.2rem; }.example-list p { margin:0; padding:1rem; border-left:4px solid var(--red-700); background:var(--red-050); line-height:1.65; }.example-list small { display:block; margin-top:.25rem; color:var(--muted); }.exercise { margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line); }.answers { display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem; }.answer,.primary,.secondary { min-height:2.65rem;padding:.62rem .9rem;border:1px solid var(--line);border-radius:.45rem;background:#fff;color:var(--red-800);font-weight:900;text-decoration:none; }.primary { display:inline-flex;align-items:center;justify-content:center;border-color:var(--red-700);color:#fff;background:var(--red-700); }.answer.correct { color:#fff;border-color:var(--success);background:var(--success); }.answer.wrong { color:#fff;border-color:var(--red-700);background:var(--red-700); }.feedback { min-height:1.5rem;margin:.9rem 0 0;font-weight:800; }.details { display:grid;gap:.8rem;margin:1.2rem 0 0;padding:0;list-style:none; }.details li { padding:.85rem;border:1px solid var(--line);border-radius:.4rem;background:var(--soft);line-height:1.6; }.details strong { display:block;color:var(--red-800); }
.stat { padding:1rem 0;border-bottom:1px solid var(--line); }.stat:last-child { border:0; }.stat strong { display:block;color:var(--red-900);font-size:2rem; }.actions { display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem; }.empty { padding:2rem;border:1px dashed var(--line);border-radius:.5rem;color:var(--muted);text-align:center; }.review-list { display:grid;gap:.8rem;margin-top:2rem; }.review-item { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:.5rem;background:#fff; }.review-item h2 { margin:0;font-size:1.1rem; }.review-item p { margin:.25rem 0 0;color:var(--muted); }.bar { height:.65rem;overflow:hidden;border-radius:999px;background:var(--red-100); }.bar span { display:block;height:100%;background:var(--red-700); }
.session-meter { width:100%;height:.45rem;margin-bottom:1.35rem;overflow:hidden;border-radius:999px;background:var(--red-100); }.session-meter span { display:block;height:100%;background:var(--red-700);transition:width .25s ease; }
.recall-gate { margin-top:1.5rem; }.inline-next { margin-left:.75rem; }.session-complete { max-width:44rem; }.session-complete h2 { color:var(--red-900);font-size:clamp(2rem,5vw,3.8rem); }
.daily-quote { margin:2rem 0 0;padding:1.25rem 1.4rem;border-left:4px solid var(--red-700);background:var(--red-050); }.daily-quote p { margin:0;color:var(--red-900);font-family:Georgia,serif;font-size:1.25rem; }.daily-quote footer { margin-top:.75rem;font-weight:900; }.daily-quote small { display:block;margin-top:.45rem;color:var(--muted);line-height:1.55; }
.progress-panel { display:grid;grid-template-columns:minmax(13rem,.5fr) minmax(0,1fr);gap:2rem;margin-top:1.25rem; }.progress-split { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem; }.progress-split article { padding:1rem;border:1px solid var(--line);border-radius:.4rem;background:var(--soft); }.progress-split article>span,.progress-split small { display:block;color:var(--muted); }.progress-split article>strong { display:block;margin:.25rem 0;color:var(--red-900);font-size:2rem; }.progress-split .bar { margin-top:.8rem; }
.activity-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem;min-height:10rem;align-items:end; }.activity-grid>div { display:grid;grid-template-rows:7rem auto auto;gap:.25rem;text-align:center; }.activity-bar { display:flex;align-items:end;justify-content:center;border-bottom:1px solid var(--line); }.activity-bar i { display:block;width:min(2rem,70%);min-height:2px;background:var(--red-700); }.activity-grid small { color:var(--muted); }.data-tools { margin-top:1.25rem;padding:1.2rem 0; }.file-button { display:inline-flex;align-items:center;cursor:pointer; }.file-button input { position:absolute;width:1px;height:1px;overflow:hidden;opacity:0; }
.grammar-transfer { width:100%;box-sizing:border-box;margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:.4rem;background:#fff;color:var(--ink);font:inherit;line-height:1.7;resize:vertical; }

@media(min-width:701px){
  body.study-focus { height:100dvh;overflow:hidden; }
  .study-focus .topbar { min-height:3.65rem;padding:.65rem 1.5rem; }
  .study-focus .brand-mark { width:1.7rem;height:1.7rem; }
  .study-focus .topnav { gap:.75rem;font-size:.78rem; }
  .study-focus .page { display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - 3.65rem);padding:.55rem 0 .7rem; }
  .study-page-head { display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:.45rem .7rem;min-height:2.55rem; }
  .study-page-head .eyebrow { margin:0;font-size:.62rem; }
  .study-page-head h1 { font-size:1.15rem;line-height:1.1; }
  .study-page-head .lead { max-width:none;margin:0;overflow:hidden;color:var(--muted);font-size:.72rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap; }
  .study-grid { grid-template-columns:minmax(0,1fr) 12.5rem;min-height:0;margin-top:.35rem; }
  .study-grid>.panel { min-height:0;padding:.85rem;overflow:auto; }
  .study-grid>#lesson-panel:has(.vocab-focus) { overflow:hidden; }
  .study-stats { align-self:start;padding:.85rem!important;box-shadow:none; }
  .study-stats .eyebrow { margin-bottom:.3rem;font-size:.62rem; }
  .study-stats h2 { font-size:.9rem; }
  .study-stats .stat { display:flex;align-items:center;justify-content:space-between;padding:.65rem 0;font-size:.72rem; }
  .study-stats .stat strong { font-size:1.1rem; }
  .study-stats .actions { gap:.35rem;margin-top:.7rem; }
  .study-stats .secondary { min-height:2rem;padding:.35rem .5rem;font-size:.7rem; }
  .vocab-focus { display:flex;height:100%;min-height:0;flex-direction:column; }
  .vocab-focus .session-meter { flex:0 0 auto;height:.28rem;margin-bottom:.6rem; }
  .vocab-focus>.tag { align-self:flex-start;margin-bottom:.2rem;padding:.25rem .45rem;font-size:.65rem; }
  .vocab-front { display:flex;min-height:0;flex:1;align-items:center;justify-content:center;flex-direction:column;text-align:center; }
  .vocab-front .word { margin:.35rem 0;font-size:clamp(2rem,4vw,3.2rem); }
  .vocab-front .word-note { font-size:.78rem; }
  .recall-gate { display:grid;gap:.55rem;margin-top:1rem; }
  .pregrade-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem; }
  .pregrade-actions .answer { min-width:6.2rem;min-height:2.25rem;padding:.45rem .65rem;font-size:.78rem; }
  .grade-hard { border-color:#d6b4b6;background:#fff7f7; }
  .grade-medium { border-color:#d6c8a7;background:#fffdf7; }
  .grade-easy { border-color:#b8d8ca;background:#f6fcf9; }
  .reveal-button { width:100%;min-height:2.35rem;font-size:.78rem; }
  .vocab-detail .detail-toolbar { display:flex;align-items:center;justify-content:space-between;gap:1rem; }
  .vocab-detail .detail-toolbar .tag { margin:0;padding:.25rem .45rem;font-size:.65rem; }
  .vocab-detail .pregrade-actions { display:flex; }
  .vocab-detail .pregrade-actions .answer { min-width:auto;min-height:1.9rem;padding:.3rem .55rem;font-size:.68rem; }
  .study-focus .session-complete { display:flex;height:100%;max-width:none;align-items:center;justify-content:center;flex-direction:column;text-align:center; }
  .study-focus .session-complete h2 { font-size:1.8rem; }
  .study-focus .session-complete p { max-width:34rem;margin:.7rem auto;font-size:.85rem; }
}

@media(max-width:700px){.topbar{align-items:flex-start;flex-direction:column}.page{width:min(100% - 2rem,74rem);padding-top:2.5rem}.study-grid,.progress-panel{grid-template-columns:1fr}.progress-split{grid-template-columns:1fr}.topnav{gap:.75rem}.review-item{align-items:flex-start;flex-direction:column}.inline-next{display:block;margin:.75rem 0 0}.study-page-head h1{font-size:2rem}.pregrade-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.pregrade-actions .answer{min-width:0;padding:.55rem .35rem}.reveal-button{width:100%;margin-top:.6rem}.detail-toolbar{display:grid;gap:.6rem}.study-stats{display:none}}