.writing-app { max-width:1040px; }
.catalog-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.catalog-filters select { margin-top:8px; }
#lessonSelect { margin:8px 0 14px; }
@media(max-width:680px) { .catalog-filters { grid-template-columns:1fr; } }
.eyebrow { color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.13em; margin-bottom:10px; }
.writing-app h2 { margin:0 0 12px; font-size:23px; }
.writing-app h3 { margin-top:28px; }
.muted { color:var(--muted); font-size:14px; line-height:1.6; }
.heading,.actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.actions { justify-content:flex-start; margin-top:24px; }
.writing-app label { display:block; font-size:14px; font-weight:650; }
.writing-app input:not([type=radio]):not(.blank),.writing-app textarea { width:100%; padding:12px; border:1px solid #cfd5df; border-radius:9px; margin:8px 0 14px; }
.writing-app textarea { resize:vertical; line-height:1.7; }
.writing-app :focus-visible { outline:3px solid #93b4fd; outline-offset:3px; }
.lesson-list,.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.lesson-card { border:1px solid var(--line); border-radius:12px; padding:20px; background:#fbfcff; text-align:left; cursor:pointer; color:var(--text); }
.lesson-card strong,.lesson-card span { display:block; }
.lesson-card strong { font-size:18px; margin:10px 0; }
.lesson-card:hover { border-color:var(--primary); }
.steps { display:flex; list-style:none; padding:0; gap:8px; margin:22px 0; counter-reset:step; }
.steps li { flex:1; padding:12px; color:var(--muted); background:#eaf0f9; border-radius:9px; font-size:13px; }
.steps li::before { counter-increment:step; content:counter(step) '. '; }
.steps li[aria-current=step] { background:var(--primary); color:white; font-weight:750; }
.question-panel { border-top:4px solid var(--primary); }
.question-figure { margin:20px 0 0; }
.question-figure img { display:block; width:100%; max-width:900px; height:auto; margin:0 auto 12px; border:1px solid var(--line); border-radius:10px; background:white; }
.question-image-link { display:inline-block; margin:4px 0; }
.question-figure figcaption { color:var(--muted); font-size:13px; line-height:1.6; margin-top:6px; }
.prose { white-space:pre-wrap; overflow-wrap:anywhere; font-size:17px; line-height:2; }
.mode-card { padding:20px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.mode-card:has(input:checked) { background:#eff5ff; border-color:var(--primary); }
.mode-card strong { margin-left:8px; }
.mode-card span { display:block; margin:10px 0 0 24px; font-size:13px; color:var(--muted); }
#percentControl { max-width:220px; }
#percentControl select { margin-top:8px; }
.writing-app .blank { display:inline-block; vertical-align:baseline; width:var(--blank-width); max-width:100%; min-width:0; padding:3px 6px; margin:0 2px; border:0; border-bottom:2px solid #7794c6; border-radius:5px; background:#f0f5ff; font:inherit; line-height:1.5; }
.writing-app .blank.matched { border-color:#15803d; background:#edf9ef; }
.writing-app .blank.unmatched { border-color:#b45309; background:#fffbeb; }
.practice-progress { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
#toggleHints { padding:7px 12px; border:1px solid #7794c6; border-radius:8px; background:#f0f5ff; color:#19499b; font:inherit; font-size:14px; cursor:pointer; }
#toggleHints[aria-pressed=true] { background:var(--primary); color:white; border-color:var(--primary); }
.gap-hint { white-space:pre-wrap; overflow-wrap:anywhere; font-family:monospace; font-size:14px; color:#19499b; margin:0 6px; }
.gap-hint[hidden] { display:none; }
.answer-result { display:inline; overflow-wrap:anywhere; }
.answer-wrong { color:#b42318; text-decoration:line-through; }
.answer-empty { color:#667085; font-size:.85em; }
.answer-correct { color:#067647; background:#ecfdf3; border-radius:4px; padding:1px 3px; }
.word-button { display:inline; border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.word-button:hover { text-decoration:underline; }
.word-button.phrase { background:#e8f0ff; border-radius:4px; color:#19499b; }
.save-box { padding:18px; margin:24px 0; border:1px solid var(--line); border-radius:12px; background:#f8fafc; }
.review-phrases { margin:24px 0; padding:18px; border:1px solid var(--line); border-radius:12px; background:white; }
.review-phrases h3 { margin:0; font-size:17px; }
.review-phrase-list { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }
.review-phrase { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 18px; width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--text); font:inherit; font-size:14px; line-height:1.6; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.review-phrase strong { color:#19499b; }
.review-phrase span { color:var(--muted); }
.review-phrase:hover { background:#eff5ff; border-color:var(--primary); }
@media(max-width:680px) { .review-phrase { grid-template-columns:minmax(0,1fr); gap:4px; } }
#feedbackTools { margin-top:18px; }
@media(max-width:680px) { .lesson-list,.mode-grid { grid-template-columns:1fr; } .steps { flex-wrap:wrap; } .steps li { flex:1 1 40%; } .panel { padding:16px; } .prose { font-size:16px; } }


/* Bilingual paragraph pairing for Writing Practice */
.bilingual-block { padding:18px 0; border-bottom:1px solid var(--line); }
.bilingual-block:first-child { padding-top:4px; }
.bilingual-block:last-child { border-bottom:0; padding-bottom:4px; }
.writing-en { color:var(--text); }
.writing-vi { margin-top:8px; color:var(--muted); font-size:15px; line-height:1.75; font-style:italic; }
.writing-vi-fallback { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }