:root {
  --navy: #213a57;
  --navy-2: #2d4b6a;
  --orange: #f4a24f;
  --cream: #fbf8f3;
  --paper: #ffffff;
  --ink: #1e2a36;
  --muted: #687684;
  --line: #dce3e8;
  --green: #267a5c;
  --red: #b64747;
  --yellow: #a86f09;
  --soft-blue: #eef4f8;
  --soft-orange: #fff3e6;
  --soft-green: #eef8f3;
  --soft-red: #fff0f0;
  --radius: 18px;
  --shadow: 0 10px 28px rgba(27, 49, 70, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--cream); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif; }
body { padding-bottom: env(safe-area-inset-bottom); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251,248,243,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(220,227,232,.75);
}
.topbar-inner { max-width: 820px; margin: 0 auto; padding: 14px 18px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; }
.brand-badge { width:34px; height:34px; border-radius:10px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:900; }
.exam-chip { font-size:12px; background:var(--soft-orange); color:#8a551b; padding:7px 9px; border-radius:999px; font-weight:700; white-space:nowrap; }

main { max-width: 820px; margin: 0 auto; padding: 18px 18px 100px; }
.hero { background:var(--navy); color:#fff; border-radius:24px; padding:22px; box-shadow:var(--shadow); }
.hero-kicker { color:#d8e5ef; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.hero h1 { margin:8px 0 8px; font-size:30px; line-height:1.15; letter-spacing:-.035em; }
.hero p { margin:0; color:#dfe8ef; line-height:1.55; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:18px; }
.stat { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px; }
.stat b { display:block; font-size:19px; margin-bottom:3px; }
.stat span { font-size:11px; color:#dce6ee; }

.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-top:16px; box-shadow:0 5px 20px rgba(27,49,70,.04); }
.card h2, .card h3 { margin:0 0 10px; letter-spacing:-.02em; }
.card p { line-height:1.6; }
.section-title { margin:24px 2px 10px; font-size:15px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

.btn { border:0; border-radius:13px; padding:13px 16px; font-weight:800; min-height:48px; }
.btn-primary { background:var(--orange); color:#312010; width:100%; }
.btn-secondary { background:var(--soft-blue); color:var(--navy); }
.btn-ghost { background:transparent; color:var(--navy); border:1px solid var(--line); }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.btn-row .btn { flex:1; min-width:120px; }

.progress-track { height:10px; background:#e9eef2; border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:var(--orange); border-radius:999px; transition:width .25s ease; }
.progress-meta { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); margin:8px 1px 0; }

.target-list { display:grid; gap:10px; }
.target-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border-radius:13px; background:#f8fafb; border:1px solid #edf1f4; }
.target-left { display:flex; align-items:center; gap:10px; min-width:0; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--orange); flex:0 0 auto; }
.target-item strong { font-size:14px; }
.target-item small { display:block; color:var(--muted); margin-top:3px; }
.pill { font-size:11px; border-radius:999px; padding:5px 8px; font-weight:800; background:var(--soft-blue); color:var(--navy); white-space:nowrap; }

.drill-wrap { max-width:680px; margin:0 auto; }
.drill-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.drill-step { font-size:13px; font-weight:800; color:var(--muted); }
.stage { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; padding:6px 8px; border-radius:999px; background:var(--soft-orange); color:#895416; }
.task-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--navy); background:var(--soft-blue); padding:6px 9px; border-radius:999px; margin-bottom:12px; }
.prompt { font-size:20px; line-height:1.5; font-weight:760; letter-spacing:-.015em; margin:6px 0 14px; }
.context-box { background:#f8fafb; border:1px solid var(--line); padding:13px 14px; border-radius:13px; line-height:1.55; margin:12px 0; white-space:pre-line; }
.frame { background:var(--soft-orange); border:1px solid #f3d7b9; padding:14px; border-radius:13px; margin:12px 0; }
.frame-label { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; color:#8b571f; margin-bottom:7px; }
.frame code, .model code { font-family:inherit; font-size:16px; line-height:1.55; white-space:pre-wrap; }
.bank { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.bank span { font-size:12px; padding:6px 9px; border-radius:999px; border:1px solid #d8e2e9; background:#fff; color:#35516c; font-weight:700; }
textarea.answer { width:100%; min-height:118px; resize:vertical; border:1.5px solid #cfd9e0; border-radius:14px; padding:14px; background:#fff; color:var(--ink); outline:none; line-height:1.55; margin:8px 0 12px; }
textarea.answer:focus { border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(45,75,106,.08); }

.feedback { margin-top:16px; display:grid; gap:10px; }
.feedback-box { border-radius:14px; padding:13px 14px; border:1px solid; }
.feedback-box h4 { margin:0 0 6px; font-size:13px; }
.feedback-box p { margin:0; line-height:1.55; font-size:14px; }
.must { background:var(--soft-red); border-color:#f0cccc; color:#783333; }
.safe { background:var(--soft-green); border-color:#cde7d9; color:#245c47; }
.optional { background:#f8fafb; border-color:var(--line); color:#506170; }
.self-rate { margin-top:14px; }
.self-rate p { font-size:13px; font-weight:800; color:var(--muted); margin-bottom:8px; }
.rate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rate-grid button { border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px 8px; font-weight:800; }

.pattern-grid, .error-grid { display:grid; gap:11px; }
.pattern-card, .error-card { background:#fff; border:1px solid var(--line); border-radius:15px; padding:14px; }
.pattern-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.pattern-card h3, .error-card h3 { margin:0 0 6px; font-size:16px; }
.pattern-card p, .error-card p { margin:5px 0; color:var(--muted); font-size:14px; line-height:1.5; }
.pattern-example { margin-top:10px; padding:10px 11px; border-radius:10px; background:#f7f9fb; font-size:14px; line-height:1.5; }
.mastery { font-size:11px; font-weight:900; white-space:nowrap; padding:5px 7px; border-radius:999px; background:#eef2f5; color:#5c6a76; }
.mastery.good { background:var(--soft-green); color:var(--green); }
.mastery.learning { background:var(--soft-orange); color:#8b571f; }

.filters { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 14px; }
.filter { border:1px solid var(--line); background:#fff; color:#4e6070; border-radius:999px; padding:8px 11px; font-weight:800; font-size:12px; }
.filter.active { background:var(--navy); color:#fff; border-color:var(--navy); }

.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.bottom-nav-inner { max-width:820px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.nav-btn { appearance:none; border:0; background:transparent; padding:10px 4px 9px; color:#7a8792; font-size:11px; font-weight:800; }
.nav-btn span { display:block; font-size:19px; margin-bottom:3px; }
.nav-btn.active { color:var(--navy); }

.timeline { display:grid; gap:9px; }
.day-row { display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid #edf1f4; }
.day-row:last-child { border-bottom:0; }
.day-num { font-weight:900; color:var(--navy); }
.day-row small { color:var(--muted); display:block; margin-top:3px; }
.status-tag { font-size:11px; font-weight:800; border-radius:999px; padding:5px 7px; background:#eef2f5; color:#667480; }
.status-tag.today { background:var(--soft-orange); color:#88551e; }
.status-tag.done { background:var(--soft-green); color:var(--green); }

.note { font-size:13px; color:var(--muted); line-height:1.55; }
.hidden { display:none !important; }

@media (max-width: 520px) {
  .topbar-inner { padding:12px 14px 10px; }
  main { padding:14px 14px 94px; }
  .hero { padding:19px; border-radius:20px; }
  .hero h1 { font-size:27px; }
  .hero-grid { gap:7px; }
  .stat { padding:10px; }
  .stat b { font-size:17px; }
  .card { padding:15px; border-radius:16px; }
  .prompt { font-size:18px; }
  .rate-grid { grid-template-columns:1fr; }
}

/* V2 clearer feedback */
.practice { background:#fff8e8; border-color:#efd89a; color:#76561a; }
.target { background:#eef4f8; border-color:#cfdee9; color:#2e4d68; }
.answer-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.answer-compare > div { background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 14px; }
.answer-compare h4 { margin:0 0 6px; font-size:13px; color:var(--muted); }
.answer-compare p { margin:0; line-height:1.55; font-size:14px; white-space:pre-wrap; }
.mini-note { margin-top:7px !important; font-size:12px !important; opacity:.78; }
.feedback-guide { padding:11px 13px; border-radius:12px; background:#f7f9fb; border:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.55; }
@media (max-width: 620px) { .answer-compare { grid-template-columns:1fr; } }


/* V3: clearer teaching + question boundaries */
.lesson-goal{background:#eef4f8;border:1px solid #cfdee9;border-radius:14px;padding:14px;margin:14px 0}.lesson-goal strong{display:block;font-size:17px;line-height:1.5;color:#213a57;margin-top:5px}.lesson-contrast{border:1px solid #f0d8b8;background:#fff8ee;border-radius:14px;padding:13px 14px;margin:12px 0}.lesson-contrast.contrast-hard{border-color:#edc7c7;background:#fff4f4}.contrast-label{font-size:12px;font-weight:900;margin-bottom:8px}.wrong-example,.better-example{padding:9px 10px;border-radius:9px;margin:6px 0;font-size:14px;line-height:1.45}.wrong-example{background:#fff0f0;color:#7b3434}.better-example{background:#eef8f3;color:#245c47}.lesson-contrast p,.lesson-use p{font-size:13px;line-height:1.55;color:#5d6872;margin:8px 0 0}.lesson-use{padding:12px 13px;border-radius:12px;border:1px solid #e4e8ec;margin:12px 0;background:#fbfcfd}
.question-part{border-radius:14px;padding:13px 14px;margin:10px 0;line-height:1.55}.question-part .part-label{font-size:12px;font-weight:900;letter-spacing:.02em;margin-bottom:7px}.question-part small{display:block;margin-top:8px;color:#66717b}.input-part{background:#f7f9fb;border:1px solid #e4e8ec}.job-part{background:#eef4f8;border:1px solid #cfdee9}.grading-scope{background:#f7f9fb;border:1px solid #dde3e8;border-radius:12px;padding:11px 12px;font-size:12px;line-height:1.55;color:#58636e}.compare-title{font-size:14px;font-weight:900;margin-top:4px}.check-steps{display:grid;gap:8px}.check-steps>div{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e5e8eb;border-radius:11px;padding:10px 11px}.check-steps b{display:flex;align-items:center;justify-content:center;flex:0 0 24px;height:24px;border-radius:50%;background:#213a57;color:#fff;font-size:12px}.check-steps span{font-size:12px;line-height:1.5;color:#59646f}.mini-note{font-size:12px;line-height:1.5;color:#68737d;margin-top:7px}

/* V4 AI sentence check */
.ai-checking{background:#eef4f8;border-color:#cfdee9;color:#2e4d68}
.minimal-fix{margin-top:9px;padding:10px 11px;border-radius:10px;background:rgba(255,255,255,.58);line-height:1.5}
.pattern-hit{color:#267a5c;font-weight:800}
.pattern-miss{color:#8b571f;font-weight:800}