:root { --ink:#1a1a1a; --sub:#6b7280; --line:#e5e7eb; --brand:#1d4ed8; --red:#dc2626; --redbg:#fef2f2; --blue:#2563eb; --bluebg:#eff6ff; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC",sans-serif; background:#f6f7f9; color:var(--ink); -webkit-tap-highlight-color:transparent; }
.wrap { max-width:680px; margin:0 auto; padding:12px 14px 48px; }
nav { display:flex; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:9; }
nav .in { max-width:680px; margin:0 auto; display:flex; width:100%; }
nav a { flex:1; text-align:center; padding:11px 0 9px; font-size:14px; color:var(--sub); text-decoration:none; border-bottom:2px solid transparent; }
nav a.on { color:var(--brand); font-weight:600; border-bottom-color:var(--brand); }
header { padding:14px 4px 8px; }
header .logo { font-size:19px; font-weight:700; }
header .logo b { color:var(--brand); }
header .tag { font-size:12px; color:var(--sub); margin-top:4px; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:14px; }
select, input[type=text] { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:14px; background:#fff; }
label.fl { display:block; font-size:13px; color:var(--sub); margin:12px 0 6px; }
button.go { width:100%; border:0; background:var(--brand); color:#fff; font-size:16px; font-weight:600; padding:13px 0; border-radius:12px; margin-top:14px; }
button.go:disabled { background:#93b4f5; }
.hint { font-size:12px; color:var(--sub); margin-top:10px; line-height:1.7; }
.err { color:var(--red); font-size:13px; margin-top:10px; display:none; }
#wait { display:none; text-align:center; padding:34px 0; }
.spin { width:34px; height:34px; border:3px solid #dbeafe; border-top-color:var(--brand); border-radius:50%; margin:0 auto 12px; animation:r 0.9s linear infinite; }
@keyframes r { to { transform:rotate(360deg); } }
#wait .pct { font-size:14px; color:var(--sub); }
.passage { font-size:15px; line-height:2; color:#374151; }
.passage p { margin:10px 0; }
.vw { background:#fef9c3; border-bottom:1px dashed #ca8a04; padding:0 2px; }
.vocab { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.vocab span { background:#fefce8; border:1px solid #fde047; color:#854d0e; font-size:13px; padding:4px 10px; border-radius:99px; }
.quiz { margin-top:14px; }
.q { margin-top:14px; font-size:14.5px; line-height:1.7; font-weight:600; }
.opt { display:block; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:8px; font-size:14px; color:#374151; }
.opt.sel { border-color:var(--brand); background:#eff6ff; }
.opt.ok { border-color:#059669; background:#ecfdf5; }
.opt.bad { border-color:var(--red); background:var(--redbg); }
.why { font-size:12.5px; color:var(--sub); margin-top:6px; display:none; }
.score { text-align:center; font-size:17px; font-weight:700; margin-top:16px; color:var(--brand); }
.rule { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:14px; font-size:14px; line-height:1.9; }
.eg { margin-top:10px; font-size:14px; line-height:1.8; }
.eg .bad { color:var(--red); text-decoration:line-through; }
.eg .good { color:#059669; font-weight:600; }
.eg .note { color:var(--sub); font-size:12.5px; display:block; }
.fix { border-radius:12px; padding:12px 14px; margin-top:10px; font-size:14px; line-height:1.8; }
.fix.red { background:var(--redbg); border:1px solid #fecaca; }
.fix.blue { background:var(--bluebg); border:1px solid #bfdbfe; }
.fix.gr { background:#ecfdf5; border:1px solid #a7f3d0; }
.fix .q { text-decoration:line-through; color:var(--red); }
.fix .c { color:#059669; font-weight:600; }
.fix .why { display:block; }
h3.ch { font-size:15px; margin:20px 0 4px; display:flex; align-items:center; gap:6px; }
h3.ch .dot { width:8px; height:8px; border-radius:50%; }
.ch.red .dot { background:var(--red); } .ch.blue .dot { background:var(--blue); } .ch.gr .dot { background:#059669; }
.ch small { color:var(--sub); font-weight:400; }
.stats { display:flex; gap:10px; margin-top:14px; }
.stat { flex:1; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.stat .n { font-size:22px; font-weight:700; }
.stat .l { font-size:11px; color:var(--sub); margin-top:2px; }
.stat.r .n { color:var(--red); } .stat.b .n { color:var(--blue); }
details { margin-top:14px; }
summary { cursor:pointer; font-size:14px; color:var(--brand); padding:8px 0; }
pre.full { white-space:pre-wrap; font-size:14px; line-height:1.8; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; }
.rec { text-align:center; padding:10px 0 4px; }
.rec button#recBtn { width:86px; height:86px; border-radius:50%; border:0; background:var(--red); color:#fff; font-size:14px; font-weight:600; box-shadow:0 4px 14px rgba(220,38,38,.35); }
.rec button#recBtn.recording { background:#991b1b; animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { transform:scale(1.06); } }
.rec .st { font-size:13px; color:var(--sub); margin-top:10px; }
.cardbox { background:#fffbeb; border:1px solid #fde68a; border-radius:12px; padding:14px; font-size:14px; line-height:1.9; }
textarea { width:100%; min-height:150px; border:1px solid var(--line); border-radius:10px; padding:12px; font-size:15px; line-height:1.7; resize:vertical; }
textarea:focus { outline:2px solid #bfdbfe; border-color:var(--brand); }
footer { text-align:center; font-size:11px; color:#9ca3af; margin-top:28px; line-height:1.8; }
.again { display:block; text-align:center; margin-top:18px; color:var(--brand); font-size:14px; padding:10px; border:1px solid #bfdbfe; border-radius:12px; text-decoration:none; background:#fff; }
.ai-note { font-size:11px; color:#9ca3af; margin-top:10px; }