:root { --bg:#faf9f5; --paper:#fffefb; --ink:#252622; --muted:#777a73; --green:#718377; --green-deep:#44564a; --mint:#e7eee9; --line:#e8e7e1; --clay:#c98469; --soft:#f3f4f0; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.55; } button,input { font:inherit; } button { cursor:pointer; }
.shell { max-width:1180px; margin:auto; padding:0 24px 64px; } .nav { height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:38px; } .brand { border:0; background:none; color:var(--ink); padding:0; text-align:left; font-size:19px; font-weight:650; letter-spacing:.02em; white-space:nowrap; } .brand small { display:block; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.08em; margin-top:-2px; } .tabs { display:flex; align-self:stretch; gap:25px; flex:1; } .tabs button { color:var(--muted); background:none; border:0; padding:0; position:relative; font-size:14px; } .tabs button.active { color:var(--ink); font-weight:650; } .tabs button.active::after { content:""; position:absolute; height:2px; background:var(--green); left:0; right:0; bottom:0; } .profile { color:var(--green-deep); font-size:14px; white-space:nowrap; }
.view { padding-top:52px; } .eyebrow { font-size:12px; letter-spacing:.13em; color:var(--muted); font-weight:650; } h1 { margin:0; font-size:32px; line-height:1.25; letter-spacing:-.04em; font-weight:650; } .subhead { color:var(--muted); margin:8px 0 28px; font-size:15px; } h2 { font-size:20px; letter-spacing:-.02em; margin:0; } h3 { margin:0; font-size:16px; } .card { background:var(--paper); border:1px solid var(--line); border-radius:18px; }
.home-card { min-height:370px; display:grid; grid-template-columns:1.55fr 1fr; overflow:hidden; } .home-copy { padding:42px; } .week-title { margin:10px 0 12px; font-size:30px; letter-spacing:-.04em; font-weight:650; } .week-info { color:var(--muted); font-size:15px; } .chip-list { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0; } .chip { border:0; background:#eff3ef; color:#34443a; border-radius:8px; padding:6px 14px; font-size:15px; transition:.16s; } .chip:hover { background:#dce8df; transform:translateY(-1px); } .primary { border:0; border-radius:10px; padding:12px 20px; background:var(--green); color:#fff; font-weight:650; box-shadow:0 4px 12px #71837730; } .primary:hover { background:var(--green-deep); }.graph-preview { padding:32px; border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; }.preview-svg { width:100%; max-width:330px; }.text-link { border:0; background:none; color:var(--green-deep); font-size:14px; padding:5px 0; }.text-link:hover { text-decoration:underline; }.preview-link { position:absolute; bottom:24px; right:30px; }
.pathway { display:flex; align-items:flex-start; justify-content:center; margin:34px auto 54px; max-width:700px; }.step { flex:1; position:relative; text-align:center; color:var(--muted); font-size:14px; }.step:not(:last-child)::after { content:""; position:absolute; top:9px; left:58%; width:84%; height:1px; background:#d4d8d2; }.step-dot { width:19px; height:19px; margin:0 auto 8px; border:1.5px solid #b9c0b9; border-radius:50%; background:var(--bg); position:relative; z-index:1; }.step.done .step-dot { background:var(--green-deep); border-color:var(--green-deep); }.step.current .step-dot { border:2px solid var(--green); }.step.current .step-dot::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--green); position:absolute; inset:5px; }.step.done { color:var(--green-deep); font-weight:650; }
.section-top { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }.helper { color:var(--muted); font-size:13px; }.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.review-card { text-align:left; min-height:102px; padding:18px; border:1px solid var(--line); background:var(--paper); border-radius:14px; position:relative; }.review-card:hover { border-color:#cbd5cd; transform:translateY(-2px); }.review-card .arrow { color:var(--green); position:absolute; right:17px; top:18px; }.review-card p { color:var(--muted); margin:5px 0 0; font-size:14px; }
.map-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }.search { position:relative; max-width:370px; width:100%; }.search input { width:100%; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:11px 15px 11px 38px; outline:none; }.search::before { content:"⌕"; color:var(--muted); position:absolute; left:14px; top:10px; }.search input:focus { border-color:var(--green); }.map-layout { display:grid; grid-template-columns:180px minmax(0,1fr) 290px; min-height:550px; }.vocab-list,.word-panel { padding:22px 16px; }.vocab-list { border-right:1px solid var(--line); }.list-heading { color:var(--muted); font-size:12px; letter-spacing:.08em; margin:0 7px 12px; }.vocab-item { width:100%; display:flex; justify-content:space-between; align-items:center; padding:9px 8px; border:0; border-radius:7px; background:none; text-align:left; color:var(--ink); }.vocab-item:hover,.vocab-item.selected { background:var(--mint); }.status { font-size:13px; color:var(--muted); }.status.review { color:var(--clay); font-weight:700; }.graph-area { position:relative; padding:20px; overflow:hidden; min-height:550px; background:radial-gradient(circle at 50% 45%,#f7f9f6,transparent 60%); }.trail { color:var(--muted); font-size:13px; position:absolute; left:20px; top:15px; }.graph-canvas { position:absolute; inset:45px 12px 12px; }.edge { stroke:#c9cec9; stroke-width:1.25; }.edge-label { fill:var(--muted); font-size:11px; text-anchor:middle; }.node { cursor:pointer; }.node rect { fill:#fff; stroke:#d9ded9; stroke-width:1; rx:10; }.node.center rect { fill:#dde8e0; stroke:#b6c9bb; }.node text { fill:var(--ink); font-size:15px; font-weight:550; text-anchor:middle; dominant-baseline:middle; }.node:hover rect { stroke:var(--green); stroke-width:1.5; }.word-panel { border-left:1px solid var(--line); }.pinyin { margin:3px 0 12px; color:var(--muted); font-size:14px; }.tag { color:var(--green-deep); background:var(--mint); padding:2px 7px; border-radius:5px; font-size:12px; }.definition { margin:17px 0; font-size:14px; }.panel-label { color:var(--muted); font-size:12px; letter-spacing:.08em; margin:22px 0 8px; }.example { font-size:14px; margin:7px 0; }.collocations { display:flex; flex-wrap:wrap; gap:7px; }.collocation { font-size:13px; background:var(--soft); border-radius:6px; padding:4px 7px; }.panel-action { margin-top:24px; width:100%; }
.practice-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:26px; align-items:start; }.practice-card { padding:32px; }.question-type { color:var(--green-deep); font-size:13px; font-weight:650; }.practice-instruction { color:var(--muted); font-size:14px; margin:5px 0 0; }.question { font-size:23px; line-height:1.55; margin:18px 0 24px; }.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.option { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; text-align:left; color:var(--ink); }.option:hover,.option.selected { border-color:var(--green); background:#f6f9f6; }.option.correct { border-color:var(--green); background:#e8f0e9; }.option.incorrect { border-color:var(--clay); background:#fcf4f0; }.feedback { margin-top:18px; padding:13px 15px; border-radius:9px; font-size:14px; }.feedback.good { background:#e8f0e9; color:var(--green-deep); }.feedback.bad { background:#fcf1ec; color:#89513d; }.question-footer { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }.muted-btn { border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:9px; padding:10px 13px; }.practice-side { padding:22px; }.progress-count { font-size:30px; font-weight:650; margin:5px 0; }.mini-progress { height:5px; background:#edf0ec; border-radius:4px; overflow:hidden; margin:15px 0 24px; }.mini-progress span { display:block; height:100%; background:var(--green); }.practice-type { display:flex; justify-content:space-between; align-items:center; width:100%; padding:12px 0; border:0; border-top:1px solid var(--line); background:none; color:var(--ink); text-align:left; }.practice-type.selected { color:var(--green-deep); font-weight:650; }.practice-type small { color:var(--muted); font-size:12px; font-weight:400; }.reading-passage { background:#f6f8f5; border-left:3px solid var(--green); margin:-4px 0 28px; padding:20px 21px; }.reading-passage h2 { margin:4px 0 9px; }.reading-passage p { margin:0; font-size:16px; line-height:1.85; }.hsk-tag,.pending-tag { display:inline-block; margin:0 4px 4px 0; padding:2px 7px; border-radius:5px; font-size:12px; line-height:1.35; font-weight:650; }.hsk-1 { color:#317447; background:#e7f3e9; }.hsk-2 { color:#256d94; background:#e5f2f7; }.hsk-3 { color:#9b5c18; background:#fff0dc; }.hsk-4 { color:#963f34; background:#fbe9e7; }.hsk-5 { color:#714487; background:#f1e8f4; }.pending-tag { color:#7a756d; background:#f2f1ed; }.result { padding:42px 30px; text-align:center; }.result h2 { font-size:26px; }.result-score { font-size:50px; color:var(--green-deep); font-weight:650; margin:14px 0; }
.product-label { margin:0 0 8px; }.library-view { max-width:850px; }.library-intro { display:flex; justify-content:space-between; align-items:center; gap:26px; padding:22px 24px; margin:28px 0 16px; background:#f8faf8; }.library-intro strong { color:var(--green-deep); font-size:28px; font-weight:650; }.library-intro span { color:var(--muted); }.library-intro p { color:var(--muted); font-size:13px; margin:0; max-width:350px; }.library-search { padding:23px 24px 8px; }.library-input { display:block; }.library-input span { display:block; font-size:13px; font-weight:650; color:var(--green-deep); margin-bottom:8px; }.library-input input { width:100%; border:1px solid var(--line); outline:0; padding:12px 14px; border-radius:9px; background:#fff; }.library-input input:focus { border-color:var(--green); }.lookup-list { margin-top:16px; }.lookup-row { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:10px 0; }.lookup-row strong { font-size:17px; font-weight:550; }.empty-state { margin-top:16px; padding:16px 0 12px; color:var(--muted); font-size:14px; }.batch-section,.teaching-section { margin-top:42px; }.batch-card,.teaching-card { display:grid; grid-template-columns:minmax(0,1fr) 225px; gap:18px; padding:18px; align-items:start; }.batch-card textarea,.teaching-card textarea { width:100%; min-height:142px; padding:13px; border:1px solid var(--line); border-radius:10px; resize:vertical; line-height:1.6; outline:0; }.batch-card textarea:focus,.teaching-card textarea:focus { border-color:var(--green); }.batch-card .helper,.teaching-card .helper { margin:10px 0 0; }.batch-results,.teaching-results { margin-top:16px; padding:7px 20px 10px; }.batch-result-header,.teaching-result-header { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:12px 0; }.highlighted-copy { margin:10px 0 18px; line-height:2.3; font-size:17px; }.highlighted-word { display:inline-block; margin:0 2px; padding:0 3px; border-bottom:2px solid; border-radius:3px; font-weight:650; white-space:nowrap; }.highlighted-word small { font-size:9px; margin-left:2px; vertical-align:super; font-weight:500; }.hsk-word-1 { color:#27663b; border-color:#77b987; background:#eff8f0; }.hsk-word-2 { color:#1e6388; border-color:#79b8d3; background:#eef8fc; }.hsk-word-3 { color:#8b5315; border-color:#e6ac69; background:#fff6e9; }.hsk-word-4 { color:#8c392f; border-color:#dd8879; background:#fdf0ed; }.hsk-word-5 { color:#674077; border-color:#b58ac3; background:#f6eef8; }
@media (max-width:800px) { .shell { padding:0 16px 40px; }.nav { gap:16px; height:auto; padding:15px 0; align-items:flex-start; }.brand { font-size:17px; }.tabs { gap:16px; flex-wrap:wrap; }.tabs button { padding:4px 0; }.profile { display:none; }.view { padding-top:34px; }.home-card { grid-template-columns:1fr; }.home-copy { padding:28px; }.graph-preview { min-height:235px; border-left:0; border-top:1px solid var(--line); }.review-grid { grid-template-columns:1fr; }.map-header { align-items:stretch; flex-direction:column; }.map-layout { grid-template-columns:1fr; }.vocab-list { border-right:0; border-bottom:1px solid var(--line); display:flex; gap:3px; overflow:auto; padding:10px; }.list-heading { display:none; }.vocab-item { width:auto; white-space:nowrap; }.graph-area { min-height:430px; }.word-panel { border-left:0; border-top:1px solid var(--line); }.practice-layout { grid-template-columns:1fr; }.practice-side { order:-1; }.option-grid { grid-template-columns:1fr; }.week-title { font-size:26px; } h1 { font-size:29px; }.library-intro,.batch-card,.teaching-card { grid-template-columns:1fr; display:grid; }.library-intro { padding:20px; }.lookup-row { align-items:flex-start; flex-direction:column; gap:5px; }.batch-result-header,.teaching-result-header { align-items:flex-start; flex-direction:column; gap:3px; } }

/* 词汇练习与课堂笔记 */
.thai-gloss { color:#6d786f; margin:0 0 14px; font-size:13px; line-height:1.6; }.word-notes { border-top:1px solid var(--line); margin-top:19px; }.note-block { border-left:2px solid #ccd8ce; padding:7px 0 7px 10px; margin:10px 0; }.note-block strong { color:var(--green-deep); font-size:12px; }.note-block p { margin:4px 0 0; font-size:13px; line-height:1.7; }.clickable-word { border:0; font:inherit; cursor:pointer; }.clickable-word:hover { filter:saturate(1.3); transform:translateY(-1px); }.practice-view { max-width:1120px; }.mode-tabs { display:flex; gap:7px; border-bottom:1px solid var(--line); margin:0 0 25px; }.mode-tabs button { border:0; background:none; padding:11px 15px 12px; color:var(--muted); font-size:14px; position:relative; }.mode-tabs button.active { color:var(--green-deep); font-weight:650; }.mode-tabs button.active::after { content:""; position:absolute; height:2px; background:var(--green); left:12px; right:12px; bottom:-1px; }.practice-workspace { display:grid; gap:18px; }.practice-card { padding:30px; }.flashcard-wrap { max-width:650px; margin:auto; }.flashcard { width:100%; min-height:330px; position:relative; display:grid; place-items:center; overflow:hidden; border:1px solid #cad6cc; border-radius:18px; background:#f8fbf8; color:var(--ink); perspective:800px; }.flashcard:hover { border-color:var(--green); }.flashcard span { min-height:330px; width:100%; padding:35px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .18s, transform .24s; }.flashcard strong { font-size:58px; line-height:1.1; letter-spacing:.04em; font-weight:600; }.flashcard small { color:var(--muted); font-size:14px; }.flash-front { opacity:1; transform:rotateY(0); }.flash-back { position:absolute; inset:0; opacity:0; transform:rotateY(-90deg); background:#edf4ee; }.flash-back strong { font-size:34px; letter-spacing:.03em; }.flash-back em { font-style:normal; color:#4d5f53; font-size:18px; }.flashcard.flipped .flash-front { opacity:0; transform:rotateY(90deg); }.flashcard.flipped .flash-back { opacity:1; transform:rotateY(0); }.small-primary { padding:9px 14px; font-size:13px; }.matching-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:680px; margin:28px auto 10px; }.matching-column { display:grid; gap:10px; }.matching-label { color:var(--muted); font-size:12px; letter-spacing:.08em; }.match-token { min-height:46px; border:1px solid var(--line); background:#fff; border-radius:9px; color:var(--ink); font-size:17px; }.match-token:hover,.match-token.selected { border-color:var(--green); background:#f5faf5; }.match-token.matched { color:var(--green-deep); border-color:#aac5af; background:#e9f3ea; }.pinyin-token { font-size:15px; color:#4d5f53; }.match-helper { text-align:center; margin:20px 0 0; }.exam-workspace { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:18px; align-items:start; }.exam-tools { padding:20px; display:grid; grid-template-columns:200px minmax(250px,1fr) auto; align-items:end; gap:22px; }.exam-meta { display:flex; justify-content:space-between; align-items:baseline; gap:15px; color:var(--muted); font-size:13px; }.choice-bank { margin:22px 0; padding:15px 17px; border:1px solid #dfe5df; background:#fbfcfa; border-radius:10px; }.choice-bank .panel-label { margin-top:0; }.choice-bank-item { display:grid; grid-template-columns:25px minmax(0,1fr); gap:8px; padding:8px 0; line-height:1.7; font-size:14px; }.choice-bank-item b { color:var(--green-deep); }.annotated-word { display:inline-block; margin:0 1px; padding:0 2px; border-bottom:2px solid; border-radius:3px; font-weight:650; white-space:nowrap; background:transparent; }.annotated-word small { display:block; margin-top:-1px; font-size:10px; line-height:1.15; font-weight:500; color:inherit; text-align:center; white-space:normal; }.question .annotated-word { margin:0 2px 5px; }.letter-options { grid-template-columns:repeat(6,1fr); }.letter-options .option { text-align:center; padding:11px; }.option span { display:block; margin-top:3px; line-height:1.5; font-size:14px; }.writing-answer { display:flex; gap:10px; }.writing-answer input { min-width:0; flex:1; border:1px solid var(--line); border-radius:9px; padding:11px 13px; font-family:inherit; font-size:17px; outline:0; }.writing-answer input:focus { border-color:var(--green); }.paper-notes { padding:20px; position:sticky; top:18px; }.paper-notes h2 { margin:6px 0; font-size:18px; }.paper-notes textarea { width:100%; min-height:350px; margin-top:16px; padding:12px; border:1px solid var(--line); border-radius:9px; resize:vertical; font-family:inherit; font-size:14px; line-height:1.75; outline:0; }.paper-notes textarea:focus { border-color:var(--green); }.note-save { margin-top:8px; color:var(--muted); font-size:12px; }.aid-controls { display:flex; flex-wrap:wrap; gap:6px; }.aid-button,.filter-chip { border:1px solid var(--line); background:#fff; color:#566057; border-radius:7px; padding:7px 9px; font-size:12px; }.aid-button.selected,.filter-chip.selected { border-color:#a8c0ad; color:var(--green-deep); background:#edf5ee; font-weight:650; }.filter-panel { min-width:0; }.term-filter { display:flex; gap:6px; flex-wrap:wrap; }.filter-reset { margin-top:8px; font-size:12px; }.full-width { width:100%; white-space:nowrap; }.lookup-button { width:100%; border-left:0; border-right:0; border-bottom:0; background:#fff; text-align:left; cursor:pointer; }.lookup-button:hover { background:#fafcf9; }.lookup-detail { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }.lookup-detail > span { display:inline-flex; }.highlighted-copy .annotated-word { vertical-align:baseline; }
.character-practice-setup { display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; align-items:start; margin:0 0 22px; padding:20px 24px; }.character-practice-setup .panel-label { margin:0 0 8px; }.compact-tabs { margin:0; }.character-practice-levels { display:flex; flex-wrap:wrap; gap:7px; }.character-practice-levels button { border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:9px 12px; font:inherit; font-size:13px; }.character-practice-levels button.active { color:var(--green-deep); border-color:#a4bea9; background:#edf5ee; font-weight:650; }.character-practice-card .flash-word.character-level-1 { color:#317447; }.character-practice-card .flash-word.character-level-2 { color:#256d94; }.character-practice-card .flash-word.character-level-3 { color:#9b5c18; }.character-practice-card .flash-word.character-level-4 { color:#963f34; }.character-practice-card .flash-word.character-level-5 { color:#714487; }.character-practice-card .flash-word.character-level-6 { color:#2d7274; }.character-practice-card .flash-word.character-level-7-9 { color:#68527c; }
@media (max-width:900px) { .exam-workspace { grid-template-columns:1fr; }.paper-notes { position:static; }.exam-tools { grid-template-columns:1fr; align-items:start; gap:16px; }.letter-options { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) { .mode-tabs { overflow:auto; }.mode-tabs button { white-space:nowrap; }.practice-card { padding:22px 17px; }.flashcard,.flashcard span { min-height:250px; }.flashcard strong { font-size:48px; }.matching-grid { gap:14px; }.exam-meta { align-items:flex-start; flex-direction:column; gap:4px; }.letter-options { grid-template-columns:repeat(3,1fr); }.writing-answer { flex-direction:column; }.choice-bank-item { font-size:13px; }.paper-notes textarea { min-height:240px; } }

/* 考试页：正常字体、文字色提示、整组题目 */
.mode-exam-link { margin-left:auto; border:0; background:none; color:var(--green-deep); padding:11px 5px 12px; font-size:14px; }.flash-example { max-width:390px; font-size:15px; line-height:1.7; font-style:normal; color:var(--ink); text-align:center; }.map-add-bar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:-8px 0 18px; }.add-word-form { display:grid; grid-template-columns:1fr 1fr 1fr 140px; gap:12px; padding:18px; margin:0 0 18px; border:1px solid var(--line); border-radius:12px; background:#fafcf9; }.add-word-form label { display:grid; gap:6px; font-size:12px; color:var(--muted); }.add-word-form input,.add-word-form select,.add-word-form textarea { min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; font:inherit; color:var(--ink); }.add-word-form textarea { min-height:72px; resize:vertical; }.add-word-form label:nth-child(5) { grid-column:1 / -1; }.personal-heading { margin-top:20px; padding-top:12px; border-top:1px solid var(--line); }.exam-paper { min-width:0; }.exam-paper-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:22px 24px; margin-bottom:14px; }.exam-paper-header h2 { margin:5px 0 4px; font-size:23px; }.exam-paper-header .practice-instruction { margin:0; }.paper-progress { color:var(--green-deep); white-space:nowrap; font-size:14px; font-weight:650; }.shared-bank { padding:0 18px; margin-bottom:14px; }.shared-bank .choice-bank { margin:0; border:0; background:transparent; }.exam-question-list { display:grid; gap:13px; }.exam-item { padding:24px 26px; border-radius:13px; }.exam-item .question { margin:11px 0 19px; font-size:21px; line-height:2.05; letter-spacing:.01em; }.exam-item .option-grid { max-width:720px; }.exam-item .choice-bank { margin-top:12px; }.exam-meta { padding-bottom:8px; border-bottom:1px solid #edf0ec; }.annotated-word { display:inline; margin:0; padding:0; border:0; border-radius:0; background:transparent !important; font-weight:650; white-space:normal; vertical-align:baseline; }.annotated-word small { display:inline; margin-left:2px; font-size:10px; line-height:1; font-weight:500; white-space:normal; }.question .annotated-word { margin:0; }.annotated-word.hsk-word-1 { color:#237342; }.annotated-word.hsk-word-2 { color:#176d9d; }.annotated-word.hsk-word-3 { color:#a25b11; }.annotated-word.hsk-word-4 { color:#a24436; }.annotated-word.hsk-word-5 { color:#76428b; }.clickable-word { padding:0; }.clickable-word:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }.level-legend { min-width:0; }.legend-chips { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }.legend-chips .hsk-tag { width:23px; padding:3px 0; border-radius:5px; text-align:center; margin:0; }.section-switch { display:grid; gap:0; }.exam-section { display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 0; border:0; border-top:1px solid var(--line); background:none; color:var(--ink); text-align:left; font-size:13px; }.exam-section.selected { color:var(--green-deep); font-weight:650; }.exam-section small { color:var(--muted); font-size:11px; font-weight:400; }.exam-tools { grid-template-columns:170px minmax(180px,1fr) minmax(200px,1fr) minmax(200px,1fr) 165px; align-items:start; }.exam-tools .aid-controls { padding-top:22px; }.exam-tools .level-legend,.exam-tools .filter-panel,.exam-tools .section-switch { padding-top:0; }.exam-tools .full-width { align-self:end; }.option { font-size:15px; }.letter-options .option { font-size:16px; }.paper-notes { top:14px; }
@media (max-width:1100px) { .exam-tools { grid-template-columns:1fr 1fr; }.exam-tools .full-width { width:auto; }.add-word-form { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .map-add-bar,.exam-paper-header { align-items:stretch; flex-direction:column; }.add-word-form { grid-template-columns:1fr; }.add-word-form label:nth-child(5) { grid-column:auto; }.exam-item { padding:20px 17px; }.exam-item .question { font-size:19px; line-height:1.95; }.exam-tools { grid-template-columns:1fr; }.mode-exam-link { margin-left:0; }.flash-example { font-size:14px; }.legend-chips { gap:6px; } }

.level-hidden { color:var(--ink) !important; }.word-level-1 { color:#237342 !important; }.word-level-2 { color:#176d9d !important; }.word-level-3 { color:#a25b11 !important; }.word-level-4 { color:#a24436 !important; }.word-level-5 { color:#76428b !important; }.node.word-level-1 rect { fill:#e7f3e9; stroke:#77b987; }.node.word-level-2 rect { fill:#e5f2f7; stroke:#79b8d3; }.node.word-level-3 rect { fill:#fff0dc; stroke:#e6ac69; }.node.word-level-4 rect { fill:#fbe9e7; stroke:#dd8879; }.node.word-level-5 rect { fill:#f1e8f4; stroke:#b58ac3; }.node.word-level-1 text { fill:#237342; }.node.word-level-2 text { fill:#176d9d; }.node.word-level-3 text { fill:#a25b11; }.node.word-level-4 text { fill:#a24436; }.node.word-level-5 text { fill:#76428b; }.level-toggle { display:block; margin-top:8px; font-size:12px; }.map-add-bar > div { display:flex; gap:8px; flex-wrap:wrap; }

.pinyin-ruby { ruby-position:over; ruby-align:center; font-family:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight:650; }.pinyin-ruby rt { color:inherit; font-family:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size:.52em; font-weight:500; letter-spacing:.015em; }.answer-letters { display:flex; align-items:center; flex-wrap:wrap; gap:3px; margin-top:5px; color:var(--muted); font-size:14px; }.letter-answer { border:0; border-radius:5px; background:transparent; padding:5px 6px; color:var(--ink); font:inherit; font-size:16px; cursor:pointer; }.letter-answer:hover,.letter-answer.selected { background:#edf4ee; color:var(--green-deep); }.letter-answer.correct { background:#e8f0e9; color:#27663b; }.letter-answer.incorrect { background:#fcf1ec; color:#89513d; }.choice-bank-item { font-size:18px; line-height:1.9; }.choice-bank-item b { font-size:16px; }.exam-header-controls { width:100%; display:grid; gap:12px; padding-top:12px; border-top:1px solid var(--line); }.exam-type-picker { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:13px; }.exam-type-picker button { border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); padding:6px 8px; font-size:12px; }.exam-type-picker button.selected { color:var(--green-deep); border-color:#a8c0ad; background:#edf5ee; font-weight:650; }.section-navigation { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }.section-navigation .muted-btn { padding:7px 10px; font-size:12px; }.level-hidden .pinyin-ruby,.level-hidden .pinyin-ruby rt { color:var(--ink) !important; }
@media (max-width:700px) { .choice-bank-item { font-size:16px; }.exam-type-picker { align-items:flex-start; flex-direction:column; }.section-navigation { align-items:stretch; }.section-navigation .muted-btn { flex:1; }.pinyin-ruby rt { font-size:.5em; } }

/* 更安静的考试排版：等级用和图例完全相同的色块表示 */
.node circle { fill:#fff; stroke:#d9ded9; stroke-width:1; }.node.center circle { fill:#dde8e0; stroke:#b6c9bb; }.node:hover circle { stroke:var(--green); stroke-width:1.5; }.node.word-level-1 circle { fill:#e7f3e9; stroke:#77b987; }.node.word-level-2 circle { fill:#e5f2f7; stroke:#79b8d3; }.node.word-level-3 circle { fill:#fff0dc; stroke:#e6ac69; }.node.word-level-4 circle { fill:#fbe9e7; stroke:#dd8879; }.node.word-level-5 circle { fill:#f1e8f4; stroke:#b58ac3; }.annotated-word { display:inline-block; margin:0 .06em; padding:.01em .2em .03em; border:0; border-radius:4px; font-weight:650; line-height:1.65; white-space:normal; vertical-align:baseline; box-decoration-break:clone; -webkit-box-decoration-break:clone; }.annotated-word.hsk-word-1 { color:#317447; background:#e7f3e9 !important; }.annotated-word.hsk-word-2 { color:#256d94; background:#e5f2f7 !important; }.annotated-word.hsk-word-3 { color:#9b5c18; background:#fff0dc !important; }.annotated-word.hsk-word-4 { color:#963f34; background:#fbe9e7 !important; }.annotated-word.hsk-word-5 { color:#714487; background:#f1e8f4 !important; }.level-hidden { color:var(--ink) !important; background:transparent !important; padding:0; margin:0; }.pinyin-ruby { ruby-position:over; ruby-align:center; line-height:1.7; }.pinyin-ruby rt { display:ruby-text; color:inherit; font-family:"Avenir Next", "Noto Sans", "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-size:.54em; font-weight:500; letter-spacing:.01em; line-height:1; }.exam-paper-header { padding:16px 20px; }.exam-title-line { display:flex; align-items:center; justify-content:space-between; gap:12px; }.exam-header-controls { padding-top:10px; }.exam-type-line { display:flex; align-items:center; justify-content:space-between; gap:14px; }.exam-type-line label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; }.exam-type-line select { max-width:260px; border:1px solid var(--line); border-radius:7px; background:#fff; padding:7px 25px 7px 9px; color:var(--ink); font:inherit; }.section-navigation { display:flex; gap:7px; }.section-navigation .muted-btn { white-space:nowrap; }.choice-bank-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 24px; }.choice-bank-item { grid-template-columns:auto minmax(0,1fr); font-size:19px; line-height:1.85; padding:5px 0; }.choice-bank-item b { color:var(--muted); font-size:16px; font-weight:500; }.exam-item { padding:18px 22px; }.exam-item .question { font-size:20px; line-height:2; margin:0 0 13px; }.answer-letters { margin-top:0; }.level-hidden .pinyin-ruby,.level-hidden .pinyin-ruby rt { color:var(--ink) !important; }
@media (max-width:760px) { .exam-type-line { align-items:stretch; flex-direction:column; }.exam-type-line label { justify-content:space-between; }.exam-type-line select { max-width:none; width:75%; }.section-navigation { justify-content:space-between; }.choice-bank-list { grid-template-columns:1fr; }.choice-bank-item { font-size:17px; }.exam-item .question { font-size:19px; }.annotated-word { margin:0 .03em; } }

/* 2026-09：考试页与图谱的最终视觉规则。词库色系是唯一颜色来源。 */
.word-level-1 { color:#317447 !important; }
.word-level-2 { color:#256d94 !important; }
.word-level-3 { color:#9b5c18 !important; }
.word-level-4 { color:#963f34 !important; }
.word-level-5 { color:#714487 !important; }
.node.word-level-1 text { fill:#317447; }
.node.word-level-2 text { fill:#256d94; }
.node.word-level-3 text { fill:#9b5c18; }
.node.word-level-4 text { fill:#963f34; }
.node.word-level-5 text { fill:#714487; }
.pinyin-ruby,
.pinyin-ruby rt { font-family:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-style:normal; }
.pinyin-ruby { ruby-position:over; ruby-align:center; line-height:2.02; }
.pinyin-ruby rt { color:inherit; font-size:.56em; font-weight:500; letter-spacing:.01em; line-height:1; }

.exam-workspace { grid-template-columns:minmax(0, 1fr) 292px; gap:20px; align-items:start; }
.exam-sidebar { display:grid; gap:14px; position:sticky; top:14px; min-width:0; }
.exam-sidebar .paper-notes { position:static; }
.exam-paper-header { display:block; padding:13px 18px; margin-bottom:12px; }
.exam-header-controls { width:auto; padding:0; border-top:0; }
.exam-type-line { min-height:34px; display:flex; align-items:center; gap:12px; }
.exam-type-line label { flex:1 1 230px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; white-space:nowrap; }
.exam-type-line select { min-width:0; max-width:250px; padding:7px 28px 7px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font:inherit; }
.paper-progress { margin-left:auto; color:var(--green-deep); font-size:13px; font-weight:650; white-space:nowrap; }
.section-navigation { display:flex; gap:6px; margin-left:auto; }
.section-navigation .muted-btn { padding:7px 9px; font-size:12px; white-space:nowrap; }
.shared-bank { padding:0; margin:0 0 12px; }
.shared-bank .choice-bank { margin:0; padding:16px 20px; border:0; border-radius:13px; background:#fff; }
.choice-bank .panel-label { margin:0 0 7px; color:var(--muted); font-size:12px; letter-spacing:.08em; }
.choice-bank-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:3px 22px; }
.choice-bank-item { grid-template-columns:auto minmax(0, 1fr); gap:8px; padding:5px 0; font-size:18px; line-height:1.95; }
.choice-bank-item b { color:var(--muted); font-size:15px; font-weight:500; }
.exam-question-list { gap:10px; }
.exam-item { padding:19px 22px; border-radius:13px; }
.exam-item .question { margin:0 0 12px; font-size:20px; line-height:2.05; letter-spacing:.005em; }
.annotated-word { display:inline-block; margin:0 .07em; padding:.01em .2em .03em; border:0; border-radius:4px; font-weight:650; line-height:1.68; vertical-align:baseline; white-space:normal; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.annotated-word.hsk-word-1 { color:#317447; background:#e7f3e9 !important; }
.annotated-word.hsk-word-2 { color:#256d94; background:#e5f2f7 !important; }
.annotated-word.hsk-word-3 { color:#9b5c18; background:#fff0dc !important; }
.annotated-word.hsk-word-4 { color:#963f34; background:#fbe9e7 !important; }
.annotated-word.hsk-word-5 { color:#714487; background:#f1e8f4 !important; }
.level-hidden { color:var(--ink) !important; background:transparent !important; margin:0; padding:0; }
.level-hidden .pinyin-ruby,
.level-hidden .pinyin-ruby rt { color:var(--ink) !important; }
.answer-letters { margin-top:0; gap:2px; }
.letter-answer { padding:5px 6px; color:var(--ink); font-size:16px; }
.letter-answer:hover,
.letter-answer.selected { background:#edf4ee; color:var(--green-deep); }
.exam-tools { display:grid; grid-template-columns:1fr; align-items:stretch; gap:14px; padding:17px 18px; }
.exam-tool-section { padding-top:13px; border-top:1px solid #edf0ec; }
.exam-tool-progress .progress-count { margin-top:2px; }
.exam-tool-section .level-toggle { margin-top:9px; }
.exam-tool-section .aid-controls { padding-top:0; }
.exam-tool-section .filter-panel { min-width:0; }
.full-width { width:100%; }

@media (max-width:980px) {
  .exam-workspace { grid-template-columns:1fr; }
  .exam-sidebar { position:static; }
  .choice-bank-list { grid-template-columns:1fr; }
  .choice-bank-item { font-size:17px; }
}
@media (max-width:780px) {
  .exam-type-line { align-items:flex-start; flex-wrap:wrap; }
  .exam-type-line label { flex:1 1 100%; }
  .exam-type-line select { max-width:none; width:100%; }
  .paper-progress { margin-left:0; }
  .section-navigation { margin-left:auto; }
  .exam-item { padding:18px 17px; }
  .exam-item .question { font-size:19px; }
}
@media (max-width:480px) {
  .exam-type-line { gap:9px; }
  .section-navigation { width:100%; margin-left:0; }
  .section-navigation .muted-btn { flex:1; }
  .choice-bank-item { font-size:16px; line-height:1.9; }
  .annotated-word { margin:0 .035em; }
}

/* 图谱采用柔和的圆角方形，而不是圆形节点。 */
.node rect { fill:#fff; stroke:#d9ded9; stroke-width:1; rx:17px; }
.node.center rect { fill:#dde8e0; stroke:#b6c9bb; rx:20px; }
.node:hover rect { stroke:var(--green); stroke-width:1.5; }
.node.word-level-1 rect { fill:#e7f3e9; stroke:#77b987; }
.node.word-level-2 rect { fill:#e5f2f7; stroke:#79b8d3; }
.node.word-level-3 rect { fill:#fff0dc; stroke:#e6ac69; }
.node.word-level-4 rect { fill:#fbe9e7; stroke:#dd8879; }
.node.word-level-5 rect { fill:#f1e8f4; stroke:#b58ac3; }

/* 词卡只突出正在学的一个词；例句其余文字保持安静。 */
.flash-word,
.flash-example-focus { background:transparent; font-style:normal; }
.flash-level-1 { color:#317447; }
.flash-level-2 { color:#256d94; }
.flash-level-3 { color:#9b5c18; }
.flash-level-4 { color:#963f34; }
.flash-level-5 { color:#714487; }
.flashcard .flash-back .flash-example { margin-top:2px; color:var(--ink); }
.flashcard .flash-back .flash-example-focus { font-weight:700; }

/* 考试题面只保留文字色，不用色块；右侧等级图例仍保留色块。 */
.exam-paper .annotated-word,
.exam-paper .annotated-word.hsk-word-1,
.exam-paper .annotated-word.hsk-word-2,
.exam-paper .annotated-word.hsk-word-3,
.exam-paper .annotated-word.hsk-word-4,
.exam-paper .annotated-word.hsk-word-5 { background:transparent !important; margin:0; padding:0; }
.exam-paper .annotated-word.hsk-word-1 { color:#317447; }
.exam-paper .annotated-word.hsk-word-2 { color:#256d94; }
.exam-paper .annotated-word.hsk-word-3 { color:#9b5c18; }
.exam-paper .annotated-word.hsk-word-4 { color:#963f34; }
.exam-paper .annotated-word.hsk-word-5 { color:#714487; }

/* Chinese Echoes HSK Center: classroom roles, paper-like exam mode, and word memory. */
.brand { display:flex; align-items:center; gap:9px; }
.brand-mark { width:31px; height:31px; object-fit:contain; flex:0 0 auto; }
.brand-copy { display:block; line-height:1.1; }
.profile-switch { border:0; background:none; padding:7px 0; cursor:pointer; }

.entry-view { max-width:900px; padding:84px 0 40px; }
.entry-view h1 { font-size:42px; }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-top:34px; }
.role-card { min-height:265px; padding:30px; text-align:left; color:var(--ink); display:flex; flex-direction:column; align-items:flex-start; gap:13px; transition:border-color .16s, transform .16s; }
.role-card:hover { border-color:#a9bbb0; transform:translateY(-2px); }
.role-card strong { font-size:27px; letter-spacing:-.04em; }
.role-card p { margin:0; max-width:270px; color:var(--muted); font-size:15px; }
.role-card > span:last-child { margin-top:auto; color:var(--green-deep); font-size:14px; }
.role-kicker { color:var(--green); font-size:12px; font-weight:700; letter-spacing:.13em; }

.teacher-view { max-width:940px; }
.teacher-top { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 26px; }
.teacher-top h2 { margin:2px 0 5px; }
.teacher-top p { margin:0; }
.teacher-actions { display:flex; gap:8px; flex-wrap:wrap; }
.teacher-assignment { margin-top:16px; padding:24px 26px; }
.teacher-assignment .section-top { justify-content:space-between; flex-wrap:wrap; }
.teacher-word-picker { display:flex; flex-wrap:wrap; gap:9px; }
.teacher-word-option { border:1px solid var(--line); border-radius:8px; background:#fff; padding:8px 11px; font-size:15px; }
.teacher-word-option.selected { border-color:#a9c0af; background:#edf4ee; font-weight:650; }
.teacher-sync { margin:18px 0 0; color:var(--muted); font-size:13px; }
.teacher-shortcuts { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.shortcut-card { min-height:142px; padding:19px; text-align:left; color:var(--ink); }
.shortcut-card span { color:var(--green); display:block; font-size:12px; letter-spacing:.1em; margin-bottom:18px; }
.shortcut-card strong { display:block; margin-bottom:5px; font-size:16px; }
.shortcut-card small { color:var(--muted); font-size:13px; line-height:1.55; }

.extension-card { padding:27px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.extension-card h2 { margin:7px 0 0; font-size:22px; }
.extension-card .chip-list { margin:18px 0 0; }
.extension-actions { display:grid; gap:8px; min-width:135px; }
.extension-empty { margin-top:16px; padding:25px; }
.extension-empty p { margin:8px 0 0; max-width:560px; }

.graph-select { display:block; margin:0 7px 17px; }
.graph-select span { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; letter-spacing:.08em; }
.graph-select select { width:100%; min-width:0; padding:8px 24px 8px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font:inherit; font-size:13px; }
.add-graph-form { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr 1fr 120px; gap:11px; align-items:end; padding:17px; margin:0 0 18px; }
.add-graph-form > div:first-child { align-self:start; }
.add-graph-form p { margin:3px 0 0; }
.add-graph-form label { display:grid; gap:5px; color:var(--muted); font-size:12px; }
.add-graph-form input,.add-graph-form select { min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; font:inherit; color:var(--ink); }
.form-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.map-layout .example .annotated-word,
.word-panel .example .annotated-word { margin:0; padding:0; border:0; background:transparent !important; }

.flashcard .flash-level-label { display:inline-block; min-height:0; width:auto; padding:0; transition:none; }
.flashcard .flash-level-label .hsk-tag { display:inline-block; min-height:0; width:auto; padding:2px 7px; margin:0; transition:none; }
.flashcard .flash-example-focus { display:inline; min-height:0; width:auto; padding:0; transition:none; }
.flashcard .flash-back em { max-width:430px; text-align:center; }
.flashcard .flash-back small { max-width:430px; text-align:center; }

.matching-board { position:relative; max-width:680px; margin:25px auto 8px; }
.matching-board .matching-grid { position:relative; z-index:1; margin:0; }
.matching-lines { position:absolute; z-index:2; pointer-events:none; left:0; right:0; top:31px; width:100%; height:calc(100% - 31px); overflow:visible; }
.matching-lines path { fill:none; stroke:#779781; stroke-width:1.7; vector-effect:non-scaling-stroke; }
.matching-board .match-token { position:relative; z-index:3; }
.matching-footer { max-width:680px; margin:15px auto 0; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.matching-footer .feedback { margin:0; }

.exam-paper-header { position:relative; }
.exam-header-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.exam-mode-controls { display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; padding:2px; }
.exam-mode-controls button { border:0; border-radius:6px; background:transparent; padding:6px 9px; color:var(--muted); font-size:12px; white-space:nowrap; }
.exam-mode-controls button.active { background:var(--mint); color:var(--green-deep); font-weight:650; }
.exam-teaching-note { margin:0 0 11px; color:var(--muted); font-size:13px; }
.paper-sheet { padding:46px 62px 52px; border-radius:13px; }
.paper-sheet-heading { margin:0 0 33px; text-align:left; font-family:"Songti SC","STSong",serif; font-size:23px; letter-spacing:.02em; }
.paper-choice-bank { display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 44px; font-family:"Songti SC","STSong",serif; }
.paper-choice-bank.word-bank-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 24px; }
.paper-choice-row { display:grid; grid-template-columns:22px minmax(0,1fr); gap:7px; align-items:baseline; font-size:19px; line-height:1.55; }
.paper-choice-row b { font-weight:400; }
.paper-choice-bank:not(.word-bank-row) .paper-choice-row { white-space:nowrap; overflow-x:auto; scrollbar-width:thin; }
.paper-choice-bank.word-bank-row .paper-choice-row { grid-template-columns:auto auto; font-size:20px; }
.paper-question-list { display:grid; gap:20px; font-family:"Songti SC","STSong",serif; }
.paper-question-row { display:grid; grid-template-columns:40px minmax(0,1fr) 73px; align-items:start; gap:4px; font-size:19px; line-height:1.7; }
.paper-question-row.word-bank-question { grid-template-columns:40px minmax(0,1fr); }
.word-bank-question .paper-answer-slot { display:inline; justify-self:auto; }
.paper-question-number { white-space:nowrap; }
.paper-question-copy { min-width:0; }
.paper-answer-slot { position:relative; justify-self:end; white-space:nowrap; }
.paper-blank { border:0; background:transparent; padding:0; color:var(--ink); font-family:inherit; font-size:19px; line-height:1.7; }
.paper-blank:hover,.paper-blank.answered { color:var(--green-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.paper-answer-menu { position:absolute; z-index:8; right:0; top:31px; min-width:116px; display:flex; flex-wrap:wrap; gap:2px; padding:6px; border:1px solid #d6ded7; border-radius:8px; background:#fff; box-shadow:0 12px 26px #25262218; }
.paper-answer-menu button { border:0; border-radius:5px; background:#fff; padding:4px 6px; color:var(--ink); font:inherit; font-size:14px; }
.paper-answer-menu button:hover { background:var(--mint); color:var(--green-deep); }
.paper-reading-list { display:grid; gap:29px; font-family:"Songti SC","STSong",serif; }
.paper-reading-item { font-size:19px; line-height:1.72; }
.paper-reading-prompt { display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px; }
.paper-reading-options { display:grid; gap:5px; margin:11px 0 0 44px; }
.paper-reading-options button { width:max-content; max-width:100%; border:0; background:transparent; padding:3px 7px; color:var(--ink); font:inherit; font-size:17px; text-align:left; }
.paper-reading-options button:hover,.paper-reading-options button.selected { color:var(--green-deep); background:#edf4ee; border-radius:5px; }
.paper-reading-options button.correct { color:#27663b; }
.paper-writing-list { display:grid; gap:26px; font-family:"Songti SC","STSong",serif; }
.paper-writing-item { font-size:19px; line-height:1.72; }
.paper-writing-prompt { display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px; }
.paper-writing-answer { display:flex; align-items:center; gap:8px; margin:11px 0 0 44px; }
.paper-writing-answer input { min-width:0; width:min(440px, 100%); border:0; border-bottom:1px solid #9aac9e; border-radius:0; background:transparent; padding:6px 2px; color:var(--ink); font:inherit; font-size:17px; outline:none; }
.paper-writing-answer input:focus { border-bottom-color:var(--green-deep); }
.paper-writing-answer input:disabled { color:var(--ink); opacity:1; }
.paper-writing-answer .muted-btn { flex:none; }
.paper-sheet .annotated-word,
.paper-sheet .annotated-word.hsk-word-1,
.paper-sheet .annotated-word.hsk-word-2,
.paper-sheet .annotated-word.hsk-word-3,
.paper-sheet .annotated-word.hsk-word-4,
.paper-sheet .annotated-word.hsk-word-5 { margin:0; padding:0; border:0; background:transparent !important; }
.pinyin-toggle { position:fixed; z-index:20; right:26px; bottom:26px; border:1px solid #cfdbd1; border-radius:10px; background:#fff; color:var(--green-deep); padding:10px 13px; font-size:13px; box-shadow:0 6px 20px #25262212; }
.pinyin-toggle:hover { background:var(--mint); }

.memorize-view { max-width:900px; }
.memory-setup { display:grid; grid-template-columns:1.2fr .9fr auto; align-items:end; gap:22px; padding:20px 23px; margin-bottom:14px; }
.memory-levels,.memory-units { display:flex; flex-wrap:wrap; gap:6px; }
.memory-levels button,.memory-units button { border:1px solid var(--line); border-radius:7px; background:#fff; padding:7px 10px; color:var(--ink); font-size:13px; }
.memory-levels button.selected,.memory-units button.selected { border-color:#a9c0af; background:#edf4ee; color:var(--green-deep); font-weight:650; }
.memory-levels .hsk-1.selected { color:#317447; }.memory-levels .hsk-2.selected { color:#256d94; }.memory-levels .hsk-3.selected { color:#9b5c18; }.memory-levels .hsk-4.selected { color:#963f34; }.memory-levels .hsk-5.selected { color:#714487; }
.memory-count { text-align:right; white-space:nowrap; }
.memory-count strong { color:var(--green-deep); font-size:28px; font-weight:650; }
.memory-count span { color:var(--muted); font-size:13px; }
.memory-next-note { margin:0 0 18px; color:var(--muted); font-size:13px; }
.memory-answer-row { display:flex; justify-content:space-between; margin-top:18px; }
.memory-choice { max-width:650px; margin:auto; }
.memory-prompt { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; min-height:160px; }
.memory-prompt > strong { font-size:54px; font-weight:600; line-height:1; }
.memory-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.memory-option-grid button { border:1px solid var(--line); border-radius:9px; background:#fff; padding:13px; color:var(--ink); font-size:17px; }
.memory-option-grid button:hover,.memory-option-grid button.selected { border-color:#a9c0af; background:#edf4ee; color:var(--green-deep); }
.memory-option-grid button.correct { border-color:#8bb596; background:#e9f3ea; color:#27663b; }
.memory-option-grid button.incorrect { border-color:#d99e8b; background:#fcf1ec; color:#89513d; }
.memory-disappear-stage { display:flex; min-height:164px; align-items:center; justify-content:center; flex-direction:column; gap:11px; border:1px dashed #cfdbd1; border-radius:12px; background:#fbfcfa; color:var(--muted); transition:background .2s,border-color .2s; }
.memory-disappear-stage strong { font-size:52px; font-weight:600; line-height:1; }
.memory-disappear-stage small { font-size:13px; }
.memory-disappear-stage.is-visible { border-color:#a9c0af; background:#f1f7f1; }
.memory-disappear-actions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; margin-top:15px; }
.memory-writing { display:flex; min-width:0; gap:8px; }
.memory-writing input { min-width:0; flex:1; border:1px solid var(--line); border-radius:8px; padding:9px 10px; color:var(--ink); font:inherit; outline:0; }
.memory-writing input:focus { border-color:var(--green); }
.memory-writing input:disabled { background:#fff; color:var(--ink); opacity:1; }
.lookup-action { margin-left:8px; }

@media (max-width:1050px) {
  .nav { gap:20px; }
  .tabs { gap:16px; overflow-x:auto; }
  .paper-sheet { padding:38px 42px 45px; }
  .add-graph-form { grid-template-columns:1fr 1fr 1fr; }
  .add-graph-form > div:first-child { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .entry-view { padding-top:50px; }
  .entry-view h1 { font-size:34px; }
  .role-grid,.teacher-shortcuts { grid-template-columns:1fr; }
  .teacher-top,.extension-card { align-items:flex-start; flex-direction:column; }
  .teacher-actions,.extension-actions { width:100%; }
  .extension-actions { grid-template-columns:1fr 1fr; }
  .paper-sheet { padding:28px 21px 34px; }
  .paper-sheet-heading { margin-bottom:23px; font-size:21px; }
  .paper-choice-bank { margin-bottom:28px; }
  .paper-choice-row { font-size:17px; }
  .paper-choice-bank:not(.word-bank-row) .paper-choice-row { white-space:normal; overflow:visible; }
  .paper-question-row { grid-template-columns:34px minmax(0,1fr) 61px; font-size:17px; }
  .paper-answer-menu { right:-2px; }
  .memory-setup { grid-template-columns:1fr; align-items:start; }
  .memory-count { text-align:left; }
  .matching-footer { align-items:flex-start; flex-direction:column; }
  .pinyin-toggle { right:16px; bottom:16px; }
}
@media (max-width:520px) {
  .shell { padding-left:14px; padding-right:14px; }
  .nav { gap:12px; }
  .brand-mark { width:27px; height:27px; }
  .brand { font-size:16px; }
  .tabs { gap:13px; }
  .tabs button { font-size:13px; }
  .profile-switch { display:none; }
  .paper-choice-bank.word-bank-row { gap:7px 16px; }
  .paper-choice-bank.word-bank-row .paper-choice-row { font-size:17px; }
  .paper-question-row { font-size:16px; line-height:1.7; }
  .memory-option-grid { grid-template-columns:1fr; }
  .memory-disappear-actions { grid-template-columns:1fr; align-items:stretch; }
  .extension-actions { grid-template-columns:1fr; }
}

/* Chinese-first signature and calm, paper-like interaction surfaces */
.brand-copy { display:grid; gap:1px; line-height:1.05; }
.brand-chinese { color:var(--green-deep); font-family:"Noto Serif SC","Songti SC","STSong",serif; font-size:15px; font-weight:700; letter-spacing:.08em; }
.brand-english { color:var(--ink); font-family:Inter,"Noto Sans SC","PingFang SC",sans-serif; font-size:12px; font-weight:600; letter-spacing:.055em; }
.brand-copy small { margin:0; font-size:8px; letter-spacing:.15em; }

.pathway { padding:15px 18px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.step { color:var(--green-deep); }
.step:not(:last-child)::after { background:linear-gradient(90deg,#cdddcf,#edf4ee); }
.step-dot { border-color:#c7d7ca; background:#fff; }
.mini-progress { border:1px solid #dbe6dd; background:linear-gradient(90deg,#fff,#f9fcf9); }
.mini-progress span { background:linear-gradient(90deg,#94ae9b,#718377); }

.graph-area { background:linear-gradient(135deg,#fff 0%,#fbfdfb 100%); }
.add-word-form { background:#fff; }
.vocab-item { position:relative; gap:8px; border:1px solid transparent; color:var(--green-deep); }
.vocab-item::before { content:""; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#bdd0c0; }
.vocab-item:hover,.vocab-item.selected { border-color:#d8e3da; background:#fff; box-shadow:0 2px 7px #3244350b; }
.vocab-item.selected { font-weight:650; }
.vocab-item.word-level-1::before { background:#77b987; }
.vocab-item.word-level-2::before { background:#79b8d3; }
.vocab-item.word-level-3::before { background:#e6ac69; }
.vocab-item.word-level-4::before { background:#dd8879; }
.vocab-item.word-level-5::before { background:#b58ac3; }
.vocab-item.word-level-1,.vocab-item.word-level-2,.vocab-item.word-level-3,.vocab-item.word-level-4,.vocab-item.word-level-5 { color:var(--green-deep) !important; }
.vocab-item.word-level-1:hover,.vocab-item.word-level-1.selected { background:#f4faf5; border-color:#cce4d1; }
.vocab-item.word-level-2:hover,.vocab-item.word-level-2.selected { background:#f3fafc; border-color:#c8e2ec; }
.vocab-item.word-level-3:hover,.vocab-item.word-level-3.selected { background:#fffaf1; border-color:#f0d5ad; }
.vocab-item.word-level-4:hover,.vocab-item.word-level-4.selected { background:#fff7f5; border-color:#efc8bf; }
.vocab-item.word-level-5:hover,.vocab-item.word-level-5.selected { background:#fbf7fc; border-color:#dfcce6; }

.chip,.teacher-word-option,.collocation { border:1px solid var(--line); background:#fff; color:var(--green-deep); }
.chip.word-level-1,.teacher-word-option.word-level-1 { background:#f4faf5; border-color:#cce4d1; color:var(--green-deep) !important; }
.chip.word-level-2,.teacher-word-option.word-level-2 { background:#f3fafc; border-color:#c8e2ec; color:var(--green-deep) !important; }
.chip.word-level-3,.teacher-word-option.word-level-3 { background:#fffaf1; border-color:#f0d5ad; color:var(--green-deep) !important; }
.chip.word-level-4,.teacher-word-option.word-level-4 { background:#fff7f5; border-color:#efc8bf; color:var(--green-deep) !important; }
.chip.word-level-5,.teacher-word-option.word-level-5 { background:#fbf7fc; border-color:#dfcce6; color:var(--green-deep) !important; }
.chip:hover,.teacher-word-option:hover,.teacher-word-option.selected { background:#fff; border-color:#a9c0af; box-shadow:0 2px 8px #3244350d; }
.collocation { padding:4px 8px; }

.paper-reading-options button { display:block; width:max-content; max-width:100%; color:var(--ink); }
.paper-reading-options .annotated-word { display:inline; margin:0; padding:0; background:transparent !important; }
.memory-reset-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.memory-reset-actions .text-link { color:var(--green-deep); font-size:13px; }
.matching-footer .memory-reset-actions { justify-content:flex-start; }
.sync-status { color:var(--green-deep); }

@media (max-width:760px) {
  .memory-answer-row { align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .memory-reset-actions { width:100%; justify-content:flex-start; }
}

/* A small Thai control layer: the lesson itself remains in Chinese. */
.nav { gap:26px; }
.tabs { gap:20px; }
.nav-actions { display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.locale-toggle { display:inline-flex; align-items:center; gap:4px; padding:2px; border:1px solid #dbe5dc; border-radius:9px; background:#fff; color:#9ba69e; font-size:12px; line-height:1; }
.locale-toggle button { border:0; border-radius:6px; background:transparent; color:var(--muted); padding:6px 7px; font:inherit; line-height:1; }
.locale-toggle button.active { background:#edf4ee; color:var(--green-deep); font-weight:700; }

.learning-home { max-width:1120px; }
.goal-countdown { position:relative; min-height:151px; margin:27px 0 13px; padding:26px 33px; overflow:hidden; border-color:#c4d4c7; background:linear-gradient(118deg,#e7efe8 0%,#f8faf6 58%,#edf3ee 100%); }
.goal-main { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; min-height:98px; gap:24px; }
.goal-countdown::before { content:""; position:absolute; width:310px; height:310px; right:-128px; top:-185px; border:1px solid #b7cabc; border-radius:50%; box-shadow:0 0 0 29px #e9f0e9,0 0 0 59px #f1f5f0; opacity:.8; }
.goal-countdown-copy,.goal-metric { position:relative; z-index:1; }
.goal-countdown-copy h2 { margin:7px 0 7px; color:var(--green-deep); font-size:31px; letter-spacing:-.04em; }
.goal-countdown-copy p { margin:0; color:#607565; font-size:13px; line-height:1.6; }
.goal-metric { display:grid; min-width:120px; padding-right:13px; text-align:center; color:var(--green-deep); }
.goal-metric strong { font-size:43px; font-weight:650; line-height:.9; letter-spacing:-.06em; }
.goal-metric span { margin-top:7px; font-size:12px; letter-spacing:.12em; }
.goal-calendar { position:relative; z-index:1; min-width:254px; padding:0 24px; border-left:1px solid #c9d9cb; }.goal-calendar .calendar-dates { margin-top:7px; }.goal-calendar .calendar-date,.goal-calendar .calendar-date strong { font-size:11px; }.goal-calendar .calendar-date i { background:#f9fcf9; }
.goal-orbit { position:absolute; right:96px; top:50%; width:42px; height:42px; margin-top:-21px; border:1px solid #aec3b3; border-radius:50%; opacity:.86; }
.goal-orbit::after { content:""; position:absolute; width:9px; height:9px; right:-5px; top:15px; border-radius:50%; background:#718c77; }
.goal-editor { position:relative; z-index:2; display:flex; align-items:end; justify-content:space-between; gap:22px; margin:18px -4px -5px; padding:15px 4px 0; border-top:1px solid #c9d9cb; }
.goal-editor .panel-label { margin:0 0 4px; color:#5f7764; }
.goal-editor .helper { margin:0; max-width:390px; }
.goal-countdown.is-editing { padding-bottom:29px; }

.teacher-home-toolbar { position:relative; display:flex; align-items:center; gap:18px; margin:0 0 25px; padding:14px 17px; border-color:#cbd8cd; border-radius:14px; background:linear-gradient(90deg,#f5f8f4,#fbfcfa); }
.teacher-home-toolbar > div:first-child { min-width:0; }
.teacher-home-toolbar h2 { margin:4px 0 2px; color:var(--green-deep); font-size:16px; line-height:1.35; }
.teacher-home-toolbar p { margin:0; color:var(--muted); font-size:12px; }
.teacher-mode-chip { display:inline-flex; align-items:center; min-height:20px; padding:3px 7px; border-radius:5px; background:#e3eee4; color:#54705a; font-size:10px; font-weight:700; letter-spacing:.08em; }
.teacher-home-actions { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; margin-left:auto; }
.teacher-home-actions .muted-btn { background:#fffefb; }
.teacher-current-graph { position:absolute; right:18px; bottom:-19px; color:#8b978d; font-size:10px; }
.learning-home.is-teacher > h1 { margin-top:32px; }
.editable-card { border-color:#b8cbbd; box-shadow:0 5px 18px #32443508; }
.lesson-inline-editor { margin-top:20px; padding-top:17px; border-top:1px solid #d9e5da; }
.lesson-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.lesson-editor-head .panel-label { margin:0 0 4px; color:#5f7764; }
.lesson-editor-head .helper { margin:0; }
.lesson-inline-editor .teacher-word-picker { margin-top:13px; }
.lesson-inline-editor .teacher-sync { margin:12px 0 0; }
.home-overview { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(235px,.68fr); gap:13px; align-items:stretch; max-width:1020px; }
.home-side-stack { display:grid; grid-template-rows:1fr; }
.lesson-focus { min-height:311px; padding:31px 34px; background:linear-gradient(135deg,#fff 0%,#f8fbf8 100%); }
.lesson-focus-copy { max-width:690px; }
.lesson-focus .chip-list { margin:22px 0 0; }
.assessment-card { position:relative; min-height:311px; overflow:hidden; padding:21px 23px; border-color:#c9d7cb; background:linear-gradient(145deg,#eaf1eb 0%,#dce8df 100%); color:var(--green-deep); text-align:left; transition:transform .16s,border-color .16s,box-shadow .16s; }
.assessment-card::after { content:""; position:absolute; width:135px; height:135px; right:-61px; bottom:-72px; border:1px solid #b9ccbd; border-radius:50%; box-shadow:0 0 0 19px #e7efe8,0 0 0 39px #edf4ee; opacity:.72; }
.assessment-card:hover { border-color:#9eb7a4; box-shadow:0 9px 22px #32443512; transform:translateY(-2px); }
.assessment-card-top { display:flex; align-items:center; gap:9px; }
.assessment-card .eyebrow { color:#607565; }
.assessment-icon,.activity-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:#fff; color:var(--green-deep); font-size:15px; line-height:1; box-shadow:0 2px 6px #32443510; }
.assessment-card strong { display:block; position:relative; z-index:1; margin:16px 0 4px; font-size:23px; letter-spacing:-.03em; }
.assessment-action { position:absolute; z-index:1; left:23px; bottom:17px; color:var(--green-deep); font-size:13px; font-weight:700; }
.exam-calendar { min-height:144px; padding:17px 20px; border-color:#d9e4da; background:linear-gradient(140deg,#fff 0%,#f7faf7 100%); }
.calendar-heading { display:flex; align-items:flex-start; justify-content:space-between; }
.calendar-heading h3 { margin:4px 0 0; color:var(--green-deep); font-size:16px; }
.calendar-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:#edf4ee; color:#5c7c64; font-size:15px; }
.calendar-dates { display:grid; gap:5px; margin-top:10px; }
.calendar-date { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#526558; font-size:12px; }
.calendar-date strong { color:var(--ink); font-size:12px; font-weight:650; }
.calendar-date span { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.calendar-date i { padding:2px 5px; border:1px solid #d9e5da; border-radius:5px; background:#fff; color:#708173; font-size:10px; font-style:normal; line-height:1.15; }
.exam-calendar p { margin:10px 0 0; color:#92a096; font-size:10px; line-height:1.45; }
.home-start { margin-top:33px; }.week-study-bubble { padding:22px; border:1px solid #c9dfed; border-radius:16px; background:#f3f9fc; }.week-study-bubble .chip-list { margin-top:22px; }.home-study-bubble { margin-top:12px; padding:10px; border:1px solid #d9d0ea; border-radius:16px; background:#faf7fd; }.home-study-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.home-study-links button { min-height:76px; padding:15px 17px; border:1px solid #c7dfcd; border-radius:12px; background:#eef7f0; color:#317447; font:inherit; font-size:20px; font-weight:700; text-align:left; transition:transform .16s,border-color .16s,box-shadow .16s; }.home-study-links button::after { content:'→'; float:right; font-size:18px; }.home-study-links button:hover { border-color:#9dbba4; box-shadow:0 8px 18px #3244350d; transform:translateY(-2px); }.home-study-links button:nth-child(2) { border-color:#edd09e; background:#fff7e9; color:#9b5c18; }
.start-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.start-card { position:relative; min-height:150px; padding:18px; text-align:left; color:var(--ink); transition:transform .16s,border-color .16s,box-shadow .16s; }.start-card:nth-child(1) { border-color:#cce4d1; background:#f4faf5; }.start-card:nth-child(2) { border-color:#c8e2ec; background:#f3fafc; }.start-card:nth-child(3) { border-color:#f0d5ad; background:#fffaf1; }.start-card:nth-child(4) { border-color:#dfcce6; background:#fbf7fc; }
.compact-home-start { margin-top:24px; max-width:1020px; }.compact-home-start .start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:510px; }.compact-home-start .start-card { min-height:76px; padding:17px 20px; }.compact-home-start .start-card strong { display:block; margin:0; font-size:19px; }
.start-card:hover { border-color:#b9ccbd; box-shadow:0 8px 20px #3244350b; transform:translateY(-2px); }
.start-card .activity-icon { width:30px; height:30px; color:#317447; background:#e0f0e3; }.start-card:nth-child(2) .activity-icon { color:#256d94; background:#dceff5; }.start-card:nth-child(3) .activity-icon { color:#9b5c18; background:#fae8ca; }.start-card:nth-child(4) .activity-icon { color:#714487; background:#eadff0; }.start-card strong { display:block; margin:18px 0 7px; font-size:17px; line-height:1.35; }.start-card:nth-child(1) strong { color:#317447; }.start-card:nth-child(2) strong { color:#256d94; }.start-card:nth-child(3) strong { color:#9b5c18; }.start-card:nth-child(4) strong { color:#714487; }
.start-card small { display:block; max-width:155px; color:var(--muted); font-size:12px; line-height:1.55; }
.start-card-arrow { position:absolute; right:17px; bottom:14px; color:var(--green); font-size:17px; }
.home-graph-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.85fr); align-items:center; min-height:238px; margin-top:33px; overflow:hidden; background:linear-gradient(115deg,#fff 0%,#fcfdfb 100%); }
.home-graph-copy { padding:30px 34px; }
.home-graph-copy h2 { margin:8px 0; font-size:23px; }
.home-graph-copy p { max-width:420px; margin:0; color:var(--muted); font-size:14px; }
.home-graph-open { margin-top:17px; color:var(--green-deep); font-weight:700; }
.home-graph-visual { align-self:stretch; display:grid; place-items:center; min-height:228px; padding:15px 22px; border-left:1px solid #edf0eb; background:radial-gradient(circle at 50% 49%,#eef4ef 0%,transparent 65%); }
.home-graph-visual .preview-svg { width:min(100%,330px); }

.teacher-goal { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:24px; margin:14px 0; padding:24px 27px; border-color:#d5e1d6; background:linear-gradient(120deg,#fbfdfb 0%,#f4f8f4 100%); }
.teacher-goal h2 { margin:6px 0; color:var(--green-deep); font-size:22px; }
.teacher-goal .helper { max-width:490px; margin:0; }
.exam-goal-form { display:grid; grid-template-columns:113px 159px auto; align-items:end; gap:9px; }
.exam-goal-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.exam-goal-form input,.exam-goal-form select { min-height:38px; padding:8px 10px; border:1px solid #d5e0d6; border-radius:8px; background:#fff; color:var(--ink); font:inherit; }
.exam-goal-form button { min-height:38px; white-space:nowrap; }

.site-footer { position:relative; display:flex; align-items:center; justify-content:space-between; gap:13px; min-height:86px; margin:63px 0 0; padding:19px 13px 7px; overflow:hidden; border-top:1px solid #e6ece6; color:#839087; }
.footer-watermark { position:absolute; right:13px; bottom:-22px; opacity:.075; pointer-events:none; }
.footer-watermark img { display:block; width:104px; height:104px; object-fit:contain; }
.footer-identity { position:relative; z-index:1; display:flex; align-items:baseline; gap:9px; min-width:0; color:var(--green-deep); white-space:nowrap; }
.footer-identity strong { font-size:15px; letter-spacing:.04em; }
.footer-identity span { font-size:11px; letter-spacing:.06em; }
.footer-identity small { color:#96a199; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.site-footer p { position:absolute; z-index:1; left:50%; margin:0; transform:translateX(-50%); color:var(--green-deep); font-size:13px; line-height:1.55; text-align:center; white-space:nowrap; }
.footer-contact { position:relative; z-index:1; margin-left:auto; padding-right:84px; font-size:12px; }

.characters-view { max-width:1080px; }
.character-intro { display:flex; align-items:center; justify-content:flex-end; gap:28px; margin:20px 0 16px; padding:18px 24px; background:#f8faf8; }
.character-intro strong { color:var(--green-deep); font-size:28px; font-weight:650; }
.character-intro span,.character-intro p { color:var(--muted); }
.character-intro p { max-width:390px; margin:0; font-size:13px; line-height:1.6; }
.character-browser { position:relative; display:grid; grid-template-columns:156px minmax(0,1fr); gap:22px; padding:22px 24px 26px; }
.character-sidebar { min-width:0; border-right:1px solid var(--line); padding-right:18px; }
.character-sidebar .panel-label { margin:2px 0 9px; }
.character-sidebar .panel-label:nth-of-type(2) { margin-top:21px; }
.character-group-tabs,.character-level-tabs { display:grid; gap:8px; }
.character-group-tabs { padding-bottom:0; }
.character-group-tabs button,.character-level-tabs button { border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; }
.character-group-tabs button { padding:9px 12px; text-align:left; }
.character-group-tabs button.active { border-color:#9ebaa4; background:#e9f3ea; color:var(--green-deep); font-weight:650; }
.character-level-tabs { padding:0; }
.character-level-tabs button { display:grid; gap:2px; min-width:0; padding:8px 10px; text-align:left; }
.character-level-tabs button small { color:var(--muted); font-size:11px; }
.character-level-tabs button.active { border-color:#a4bea9; background:#f2f7f2; color:var(--green-deep); font-weight:650; }
.character-level-tabs button.character-level-1,.character-level-tabs button.character-level-1-2 { border-color:#cce4d1; background:#f4faf5; color:#317447; }
.character-level-tabs button.character-level-2 { border-color:#c8e2ec; background:#f3fafc; color:#256d94; }
.character-level-tabs button.character-level-3 { border-color:#f0d5ad; background:#fffaf1; color:#9b5c18; }
.character-level-tabs button.character-level-4 { border-color:#efc8bf; background:#fff7f5; color:#963f34; }
.character-level-tabs button.character-level-5 { border-color:#dfcce6; background:#fbf7fc; color:#714487; }
.character-level-tabs button.character-level-6 { border-color:#b9d7d7; background:#f1f9f9; color:#2d7274; }
.character-level-tabs button.character-level-7-9 { border-color:#d7cce7; background:#faf7fd; color:#68527c; }
.character-sidebar-total { display:flex; align-items:baseline; gap:4px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); }.character-sidebar-total strong { color:var(--green-deep); font-size:22px; font-weight:650; }.character-sidebar-total span { font-size:12px; }
.character-toolbar { position:absolute; top:22px; right:24px; display:flex; align-items:center; gap:8px; }
.character-pinyin-toggle { padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--green-deep); font:inherit; font-size:12px; cursor:pointer; }
.character-pinyin-toggle[aria-pressed="true"] { border-color:#9ebaa4; background:#e9f3ea; font-weight:650; }
.character-vocabulary-toggle { display:inline-flex; align-items:center; cursor:pointer; }.character-vocabulary-toggle input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }.character-vocabulary-toggle span { display:inline-flex; align-items:center; min-height:32px; padding:0 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#68527c; font-size:12px; font-weight:650; }.character-vocabulary-toggle.active span { border-color:#d7cce7; background:#faf7fd; }.character-vocabulary-toggle input:focus-visible + span { outline:2px solid #8c72aa; outline-offset:2px; }
.character-list-head { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:51px 0 14px; }
.character-list-head h2 { margin:0; font-size:20px; }
.content-search { display:flex; align-items:center; min-width:196px; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); }
.content-search:focus-within { border-color:#9ebaa4; box-shadow:0 0 0 2px #e9f3ea; }
.content-search span { font-size:16px; line-height:1; }
.content-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:12px; }
.content-search input::placeholder { color:#99a39b; }
.search-result-count { min-height:16px; margin:-8px 0 8px; color:var(--muted); font-size:12px; }
.character-list li.search-empty,.vocabulary-list li.search-empty { display:flex; grid-column:1 / -1; min-height:86px; align-items:center; justify-content:center; border-style:dashed; background:#fbfcfb; color:var(--muted); font-size:13px; }
.character-list li.search-empty::before,.vocabulary-list li.search-empty::before { display:none; }
.character-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.character-list li { display:flex; align-items:center; gap:9px; min-height:44px; padding:7px 10px; border:1px solid #e5ebe5; border-radius:8px; background:#fff; color:var(--ink); }
.character-list li::before { min-width:23px; color:#99a39b; content:attr(data-index); font-size:11px; text-align:right; }
.character-list li button { display:grid; width:100%; gap:3px; padding:0; border:0; background:transparent; color:var(--green-deep); font:inherit; text-align:center; justify-items:center; cursor:pointer; }
.character-list li button strong { font-size:21px; font-weight:650; line-height:1; }
.character-list li button small { color:var(--muted); font-size:10px; line-height:1; }
.character-list.show-pinyin li { min-height:54px; }
.character-list li.selected { box-shadow:0 0 0 2px currentColor; }
.character-intro.character-level-1,.character-intro.character-level-1-2 { border-color:#cce4d1; }
.character-intro.character-level-2 { border-color:#c8e2ec; }
.character-intro.character-level-3 { border-color:#f0d5ad; }
.character-intro.character-level-4 { border-color:#efc8bf; }
.character-intro.character-level-5 { border-color:#dfcce6; }
.character-intro.character-level-6 { border-color:#b9d7d7; }
.character-intro.character-level-7-9 { border-color:#d7cce7; }
.character-level-tabs button.character-level-1.active,.character-level-tabs button.character-level-1-2.active,.character-list.character-level-1 li,.character-list.character-level-1-2 li { border-color:#cce4d1; background:#f4faf5; }
.character-level-tabs button.character-level-2.active,.character-list.character-level-2 li { border-color:#c8e2ec; background:#f3fafc; }
.character-level-tabs button.character-level-3.active,.character-list.character-level-3 li { border-color:#f0d5ad; background:#fffaf1; }
.character-level-tabs button.character-level-4.active,.character-list.character-level-4 li { border-color:#efc8bf; background:#fff7f5; }
.character-level-tabs button.character-level-5.active,.character-list.character-level-5 li { border-color:#dfcce6; background:#fbf7fc; }
.character-level-tabs button.character-level-6.active,.character-list.character-level-6 li { border-color:#b9d7d7; background:#f1f9f9; }
.character-level-tabs button.character-level-7-9.active,.character-list.character-level-7-9 li { border-color:#d7cce7; background:#faf7fd; }
.character-level-tabs button.character-level-1.active,.character-level-tabs button.character-level-1-2.active,.character-list.character-level-1 li button,.character-list.character-level-1-2 li button { color:#317447; }
.character-level-tabs button.character-level-2.active,.character-list.character-level-2 li button { color:#256d94; }
.character-level-tabs button.character-level-3.active,.character-list.character-level-3 li button { color:#9b5c18; }
.character-level-tabs button.character-level-4.active,.character-list.character-level-4 li button { color:#963f34; }
.character-level-tabs button.character-level-5.active,.character-list.character-level-5 li button { color:#714487; }
.character-level-tabs button.character-level-6.active,.character-list.character-level-6 li button { color:#2d7274; }
.character-level-tabs button.character-level-7-9.active,.character-list.character-level-7-9 li button { color:#68527c; }
.character-list.search-results li.character-level-1 { border-color:#cce4d1; background:#f4faf5; }.character-list.search-results li.character-level-2 { border-color:#c8e2ec; background:#f3fafc; }.character-list.search-results li.character-level-3 { border-color:#f0d5ad; background:#fffaf1; }.character-list.search-results li.character-level-4 { border-color:#efc8bf; background:#fff7f5; }.character-list.search-results li.character-level-5 { border-color:#dfcce6; background:#fbf7fc; }.character-list.search-results li.character-level-6 { border-color:#b9d7d7; background:#f1f9f9; }.character-list.search-results li.character-level-7-9 { border-color:#d7dcd8; background:#fff; }
.character-list.search-results li.character-level-1 button { color:#317447; }.character-list.search-results li.character-level-2 button { color:#256d94; }.character-list.search-results li.character-level-3 button { color:#9b5c18; }.character-list.search-results li.character-level-4 button { color:#963f34; }.character-list.search-results li.character-level-5 button { color:#714487; }.character-list.search-results li.character-level-6 button { color:#2d7274; }.character-list.search-results li.character-level-7-9 button { color:#4d5650; }

.character-workbench { display:grid; grid-column:2; grid-template-columns:minmax(300px,.9fr) minmax(360px,1.2fr); gap:18px; align-items:start; }.character-character-column { min-width:0; }.character-character-column .character-list { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:680px; overflow-y:auto; padding-right:4px; }
.character-practice-view { padding-top:26px; }.character-practice-shell { display:grid; grid-template-columns:156px minmax(0,1fr); gap:22px; align-items:start; padding:22px 24px 26px; }.character-practice-content { min-width:0; }.character-practice-content > .mode-tabs { margin-top:0; }.character-practice-content .practice-workspace { min-height:540px; }.character-random-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; margin:0 0 8px; }.character-random-controls span { margin-right:4px; color:var(--muted); font-size:12px; }.character-random-controls button,.stroke-mode-tabs button { border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); padding:6px 9px; font:inherit; font-size:12px; }.character-random-controls button.active,.stroke-mode-tabs button.active { border-color:#a8c0ad; background:#edf5ee; color:var(--green-deep); font-weight:650; }.stroke-practice { max-width:650px; margin:auto; }.stroke-mode-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 14px; }.stroke-stage { display:grid; min-height:280px; place-items:center; border:1px solid #cad6cc; border-radius:16px; background:#f8fbf8; }.hanzi-writer-target { display:grid; width:250px; height:250px; place-items:center; color:var(--muted); font-size:13px; }.stroke-practice .question-footer { max-width:420px; margin:18px auto 0; }
.character-random-controls .character-practice-pinyin-toggle { margin-right:auto; border-color:#c8dbcd; background:#f5faf5; color:var(--green-deep); }
.stroke-practice-pinyin { display:inline-block; margin-left:8px; color:var(--green-deep); font-size:14px; font-weight:600; letter-spacing:.02em; }
.character-vocabulary-empty { display:grid; min-height:170px; gap:5px; margin:50px 0 0; padding:28px; text-align:center; }.character-vocabulary-empty span { color:var(--muted); font-size:13px; }
.character-vocabulary { display:flex; min-width:0; max-height:734px; flex-direction:column; margin:50px 0 0; overflow:hidden; padding:24px; }.character-vocabulary-scroll { min-height:0; flex:1; overflow-x:hidden; overflow-y:auto; padding-right:4px; }.character-vocabulary-total { display:flex; align-items:baseline; align-self:flex-end; gap:4px; padding-top:10px; color:var(--muted); }.character-vocabulary-total strong { color:var(--green-deep); font-size:22px; line-height:1; }.character-vocabulary-total span { font-size:12px; }
.character-vocabulary-list { display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; list-style:none; }.character-vocabulary-list li { position:relative; display:flex; align-items:center; gap:10px; min-height:70px; padding:8px 51px 8px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; }.character-vocabulary-list li::before { min-width:31px; color:#99a39b; content:attr(data-index); font-size:11px; text-align:right; }.character-vocabulary-list li > div { display:flex; align-items:center; min-width:0; flex:1; gap:10px; }.character-vocabulary-list strong { flex:0 0 auto; font-size:18px; font-weight:650; }.character-vocabulary-list span { min-width:0; overflow:hidden; color:var(--muted); font-size:14px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }.character-vocabulary-list em { position:absolute; right:9px; bottom:8px; display:inline-flex; align-items:center; min-height:20px; padding:0 6px; border-radius:999px; font-size:10px; font-style:normal; font-weight:700; line-height:1; white-space:nowrap; }
.character-vocabulary-list .character-level-1 { border-color:#cce4d1; background:#f4faf5; }.character-vocabulary-list .character-level-2 { border-color:#c8e2ec; background:#f3fafc; }.character-vocabulary-list .character-level-3 { border-color:#f0d5ad; background:#fffaf1; }.character-vocabulary-list .character-level-4 { border-color:#efc8bf; background:#fff7f5; }.character-vocabulary-list .character-level-5 { border-color:#dfcce6; background:#fbf7fc; }.character-vocabulary-list .character-level-6 { border-color:#b9d7d7; background:#f1f9f9; }.character-vocabulary-list .character-level-7-9 { border-color:#d7cce7; background:#faf7fd; }
.character-vocabulary-list .character-level-1 strong { color:#317447; }.character-vocabulary-list .character-level-1 em { color:#317447; background:#dcefe0; }.character-vocabulary-list .character-level-2 strong { color:#256d94; }.character-vocabulary-list .character-level-2 em { color:#256d94; background:#dceff5; }.character-vocabulary-list .character-level-3 strong { color:#9b5c18; }.character-vocabulary-list .character-level-3 em { color:#9b5c18; background:#fae8ca; }.character-vocabulary-list .character-level-4 strong { color:#963f34; }.character-vocabulary-list .character-level-4 em { color:#963f34; background:#f7ded8; }.character-vocabulary-list .character-level-5 strong { color:#714487; }.character-vocabulary-list .character-level-5 em { color:#714487; background:#eadff0; }.character-vocabulary-list .character-level-6 strong { color:#2d7274; }.character-vocabulary-list .character-level-6 em { color:#2d7274; background:#d8eeee; }.character-vocabulary-list .character-level-7-9 strong { color:#68527c; }.character-vocabulary-list .character-level-7-9 em { color:#68527c; background:#e8e0f0; }

.vocabulary-view { max-width:970px; }
.vocabulary-intro { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:28px 0 16px; padding:21px 24px; background:#f8faf8; }
.vocabulary-intro strong { color:var(--green-deep); font-size:28px; font-weight:650; }
.vocabulary-intro span,.vocabulary-intro p { color:var(--muted); }
.vocabulary-intro p { max-width:440px; margin:0; font-size:13px; line-height:1.6; }
.vocabulary-intro.character-level-1 { border-color:#cce4d1; }.vocabulary-intro.character-level-2 { border-color:#c8e2ec; }.vocabulary-intro.character-level-3 { border-color:#f0d5ad; }.vocabulary-intro.character-level-4 { border-color:#efc8bf; }.vocabulary-intro.character-level-5 { border-color:#dfcce6; }.vocabulary-intro.character-level-6 { border-color:#b9d7d7; }.vocabulary-intro.character-level-7-9 { border-color:#d7cce7; }
.vocabulary-browser { padding:22px 24px 26px; }
.vocabulary-level-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--line); }.vocabulary-level-tabs { display:flex; flex:1; flex-wrap:wrap; gap:8px; }.vocabulary-level-total { display:flex; align-items:baseline; justify-content:flex-end; gap:5px; color:var(--muted); white-space:nowrap; }.vocabulary-level-total strong { color:var(--green-deep); font-size:28px; font-weight:650; }
.vocabulary-level-tabs button { display:grid; gap:2px; min-width:72px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; text-align:left; }
.vocabulary-level-tabs button.character-level-1 { border-color:#cce4d1; background:#f4faf5; color:#317447; }.vocabulary-level-tabs button.character-level-2 { border-color:#c8e2ec; background:#f3fafc; color:#256d94; }.vocabulary-level-tabs button.character-level-3 { border-color:#f0d5ad; background:#fffaf1; color:#9b5c18; }.vocabulary-level-tabs button.character-level-4 { border-color:#efc8bf; background:#fff7f5; color:#963f34; }.vocabulary-level-tabs button.character-level-5 { border-color:#dfcce6; background:#fbf7fc; color:#714487; }.vocabulary-level-tabs button.character-level-6 { border-color:#b9d7d7; background:#f1f9f9; color:#2d7274; }.vocabulary-level-tabs button.character-level-7-9 { border-color:#d7cce7; background:#faf7fd; color:#68527c; }
.vocabulary-level-tabs button small { color:var(--muted); font-size:11px; }.vocabulary-level-tabs button.character-level-1.active { border-color:#cce4d1; background:#f4faf5; color:#317447; }.vocabulary-level-tabs button.character-level-2.active { border-color:#c8e2ec; background:#f3fafc; color:#256d94; }.vocabulary-level-tabs button.character-level-3.active { border-color:#f0d5ad; background:#fffaf1; color:#9b5c18; }.vocabulary-level-tabs button.character-level-4.active { border-color:#efc8bf; background:#fff7f5; color:#963f34; }.vocabulary-level-tabs button.character-level-5.active { border-color:#dfcce6; background:#fbf7fc; color:#714487; }.vocabulary-level-tabs button.character-level-6.active { border-color:#b9d7d7; background:#f1f9f9; color:#2d7274; }.vocabulary-level-tabs button.character-level-7-9.active { border-color:#d7cce7; background:#faf7fd; color:#68527c; }
.vocabulary-list-head { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:20px 0 14px; }.vocabulary-list-head h2 { margin:0; font-size:20px; }
.vocabulary-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }.vocabulary-list li { display:flex; align-items:center; min-height:60px; padding:8px 11px; border:1px solid #e5ebe5; border-radius:8px; background:#fff; }.vocabulary-list li::before { min-width:32px; color:#99a39b; content:attr(data-index); font-size:11px; text-align:right; }.vocabulary-list li > div { min-width:0; padding-left:9px; }.vocabulary-list strong,.vocabulary-list span { display:block; }.vocabulary-list strong { color:var(--green-deep); font-size:17px; font-weight:650; }.vocabulary-list span { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.vocabulary-list .missing-detail { color:#abb1ab; }
.vocabulary-list.character-level-1 li { border-color:#cce4d1; background:#f4faf5; }.vocabulary-list.character-level-2 li { border-color:#c8e2ec; background:#f3fafc; }.vocabulary-list.character-level-3 li { border-color:#f0d5ad; background:#fffaf1; }.vocabulary-list.character-level-4 li { border-color:#efc8bf; background:#fff7f5; }.vocabulary-list.character-level-5 li { border-color:#dfcce6; background:#fbf7fc; }.vocabulary-list.character-level-6 li { border-color:#b9d7d7; background:#f1f9f9; }.vocabulary-list.character-level-7-9 li { border-color:#d7cce7; background:#faf7fd; }
.vocabulary-list.character-level-1 strong { color:#317447; }.vocabulary-list.character-level-2 strong { color:#256d94; }.vocabulary-list.character-level-3 strong { color:#9b5c18; }.vocabulary-list.character-level-4 strong { color:#963f34; }.vocabulary-list.character-level-5 strong { color:#714487; }.vocabulary-list.character-level-6 strong { color:#2d7274; }.vocabulary-list.character-level-7-9 strong { color:#68527c; }

/* Keep the highest band distinct from HSK 5's violet. */
.characters-view { padding-top:26px; }
.character-level-tabs button.character-level-7-9,
.character-level-tabs button.character-level-7-9.active,
.character-list.character-level-7-9 li,
.character-vocabulary-list .character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9.active,
.vocabulary-list.character-level-7-9 li { border-color:#bfd5e7; background:#f2f7fb; }
.character-level-tabs button.character-level-7-9,
.character-level-tabs button.character-level-7-9.active,
.character-list.character-level-7-9 li button,
.character-vocabulary-list .character-level-7-9 strong,
.character-vocabulary-list .character-level-7-9 em,
.vocabulary-level-tabs button.character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9.active,
.vocabulary-list.character-level-7-9 strong { color:#38648a; }
.character-vocabulary-list .character-level-7-9 em { background:#deebf5; }
.character-intro.character-level-7-9 { border-color:#bfd5e7; }

/* HSK 7–9 is deliberately neutral: a white card with a quiet gray outline. */
.character-practice-card .flash-word.character-level-7-9,
.character-level-tabs button.character-level-7-9,
.character-level-tabs button.character-level-7-9.active,
.character-list.character-level-7-9 li button,
.character-vocabulary-list .character-level-7-9 strong,
.character-vocabulary-list .character-level-7-9 em,
.vocabulary-level-tabs button.character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9.active,
.vocabulary-list.character-level-7-9 strong { color:#4d5650; }
.character-level-tabs button.character-level-7-9,
.character-level-tabs button.character-level-7-9.active,
.character-list.character-level-7-9 li,
.character-vocabulary-list .character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9.active,
.vocabulary-list.character-level-7-9 li { border-color:#d7dcd8; background:#fff; }
.character-vocabulary-list .character-level-7-9 em { background:#eef1ef; }
.character-intro.character-level-7-9,
.vocabulary-intro.character-level-7-9 { border-color:#d7dcd8; }
.character-vocabulary-toggle span { color:#4d5650; }
.character-vocabulary-toggle.active span { border-color:#d7dcd8; background:#fff; }
.character-vocabulary-toggle input:focus-visible + span { outline-color:#7b8580; }

/* Lists stay clean by default; character indexes can be enabled from the toolbar for PDF checking. */
.character-list li::before,
.character-vocabulary-list li::before,
.vocabulary-list li::before { display:none; }
.character-list.show-indexes li::before { display:block; }
.character-list li { gap:0; }
.character-list.show-indexes li { gap:9px; }
.character-vocabulary-list li,
.vocabulary-list li { padding-left:11px; }

/* Character cards use the available study canvas instead of a narrow column. */
.character-practice-content .practice-workspace { grid-template-columns:minmax(0, 760px); justify-content:center; }
.character-practice-card.flashcard-wrap { width:min(100%, 760px); max-width:760px; }
.character-practice-content .stroke-practice { width:min(100%,760px); max-width:760px; }
.stroke-color-picker { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:12px 0 16px; }
.stroke-color-swatch,.stroke-custom-color { position:relative; display:grid; width:30px; height:30px; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer; }
.stroke-color-swatch i,.stroke-custom-color i { display:block; width:18px; height:18px; border-radius:50%; background:var(--stroke-color); }
.stroke-color-swatch.active,.stroke-custom-color.active { border-color:var(--stroke-color); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--stroke-color); }
.stroke-color-swatch:focus-visible,.stroke-custom-color:focus-within { outline:2px solid var(--ink); outline-offset:3px; }
.stroke-custom-color input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.stroke-grid-toggle { border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); padding:6px 10px; font:inherit; font-size:12px; }.stroke-grid-toggle.active { border-color:#a8c0ad; background:#edf5ee; color:var(--green-deep); font-weight:650; }
.stroke-speed-picker { display:flex; align-items:center; gap:7px; margin:13px 0 16px; color:var(--muted); font-size:12px; }.stroke-speed-picker span { margin-right:2px; }.stroke-speed-picker button { min-width:42px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); padding:5px 9px; font:inherit; font-size:12px; }.stroke-speed-picker button.active { border-color:#a8c0ad; background:#edf5ee; color:var(--green-deep); font-weight:650; }
.stroke-practice.is-stroke-step { max-width:980px; }
.stroke-practice-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:stretch; }
.stroke-practice.is-stroke-step .stroke-practice-layout { grid-template-columns:minmax(300px,1.2fr) minmax(230px,.8fr); }
.stroke-practice.is-stroke-step .stroke-stage { min-height:360px; }
.stroke-canvas { position:relative; display:grid; width:250px; height:250px; place-items:center; }
.tianzi-grid { display:none; position:absolute; inset:0; box-sizing:border-box; border:1px solid rgba(103,133,112,.45); background:linear-gradient(to right,transparent calc(50% - .5px),rgba(103,133,112,.34) calc(50% - .5px),rgba(103,133,112,.34) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),rgba(103,133,112,.34) calc(50% - .5px),rgba(103,133,112,.34) calc(50% + .5px),transparent calc(50% + .5px)); pointer-events:none; }
.stroke-canvas.show-tianzi-grid .tianzi-grid { display:block; }
.stroke-canvas .hanzi-writer-target { position:relative; z-index:1; }
.stroke-sequence-svg { display:block; width:250px; height:250px; overflow:visible; }
.stroke-sequence-path { fill:var(--stroke-color); transition:fill .18s ease,opacity .18s ease; }
.stroke-sequence-path.is-pending { opacity:.66; }
.stroke-sequence-path.is-animated { opacity:0; animation:stroke-reveal var(--stroke-duration,.31s) ease forwards; }
@keyframes stroke-reveal { from { opacity:0; transform:scale(.94); transform-origin:center; } to { opacity:1; transform:scale(1); } }
.stroke-order-panel { display:flex; min-height:280px; flex-direction:column; padding:20px; border:1px solid #d8e2da; border-radius:16px; background:#fff; color:var(--muted); font-size:13px; }
.stroke-order-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:var(--green-deep); font-size:16px; font-weight:700; }
.stroke-order-heading strong { color:var(--green-deep); font-size:13px; }
.stroke-order-help { margin:7px 0 14px; color:var(--muted); font-size:13px; }
.stroke-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.stroke-choice { display:grid; min-height:90px; place-items:center; padding:8px; border:1px solid #dbe4dd; border-radius:10px; background:#fbfdfb; transition:border-color .14s,background .14s,transform .14s; }
.stroke-choice:hover { border-color:#91b89b; background:#f1f8f2; transform:translateY(-1px); }
.stroke-choice:focus-visible { outline:2px solid var(--green-deep); outline-offset:2px; }
.stroke-choice.is-wrong { border-color:#d98b81; background:#fff4f2; animation:stroke-choice-wrong .24s linear; }
@keyframes stroke-choice-wrong { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
.stroke-choice-svg { width:72px; height:72px; overflow:visible; }
.stroke-choice-path { fill:var(--stroke-color); }
.stroke-order-list { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; padding:12px 0 0; border-top:1px solid var(--line); list-style:none; }
.stroke-order-list li { display:grid; width:24px; height:24px; place-items:center; border:1px solid #dce3de; border-radius:50%; background:#fff; color:#8a928c; font-size:10px; font-weight:700; }
.stroke-order-list li.done { border-color:var(--stroke-color); background:var(--stroke-color); color:#fff; }
.stroke-order-list li.current { border:2px solid var(--stroke-color); color:var(--stroke-color); }

/* Matching connectors appear only after a correct pair is completed. */
.matching-lines .match-line-complete { stroke:#5b8b65; stroke-width:2.2; }

/* Vocabulary browsing uses two explicit faces: Chinese first, then pinyin-above-word and the selected translation. */
.vocabulary-list.vocabulary-card-list li { position:relative; display:grid; min-height:86px; padding:0; overflow:hidden; }
.vocabulary-card { display:grid; grid-area:1 / 1; min-height:86px; padding:10px 14px; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.vocabulary-card:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.vocabulary-card-face { grid-area:1 / 1; align-self:center; transition:opacity .16s ease, transform .16s ease; }
.vocabulary-card-front { display:grid; place-items:center; }
.vocabulary-card-front strong { font-size:23px; }
.vocabulary-card-back { display:none; text-align:center; }
.vocabulary-card-back strong { font-size:18px; }
.vocabulary-card-back span { margin-top:7px; white-space:normal; }
.vocabulary-list.vocabulary-card-list.is-flipped .vocabulary-card-front,.vocabulary-card.is-flipped .vocabulary-card-front { display:none; }
.vocabulary-list.vocabulary-card-list.is-flipped .vocabulary-card-back,.vocabulary-card.is-flipped .vocabulary-card-back { display:block; }
.vocabulary-list.vocabulary-card-list li::before { display:none; }
.vocabulary-list.vocabulary-card-list.show-indexes li::before { position:absolute; z-index:1; display:block; top:50%; left:10px; min-width:0; transform:translateY(-50%); pointer-events:none; }
.vocabulary-list-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.vocabulary-flip-all { white-space:nowrap; }
.vocabulary-system-tabs { display:flex; align-items:stretch; gap:8px; margin:0 0 18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.vocabulary-system-tabs button { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); font:inherit; font-size:14px; }
.vocabulary-system-tabs button.active { border-color:#9ab9a2; background:#edf6ef; color:#2c6540; font-weight:700; }
.vocabulary-system-tabs button small { padding:2px 6px; border-radius:999px; background:#f3ebd3; color:#7c6920; font-size:10px; font-weight:700; white-space:nowrap; }
.vocabulary-system-note { margin:-5px 0 18px; color:var(--muted); font-size:13px; }
.vocabulary-level-tabs button { display:inline-flex; align-items:center; min-width:0; padding:7px 11px; border-radius:999px; }
.vocabulary-list.vocabulary-card-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vocabulary-list.vocabulary-card-list li.search-empty { display:flex; grid-column:1 / -1; min-height:86px; align-items:center; justify-content:center; padding:8px 11px; }
.vocabulary-list.vocabulary-card-list li.character-level-1 { border-color:#cce4d1; background:#f4faf5; }.vocabulary-list.vocabulary-card-list li.character-level-2 { border-color:#c8e2ec; background:#f3fafc; }.vocabulary-list.vocabulary-card-list li.character-level-3 { border-color:#f0d5ad; background:#fffaf1; }.vocabulary-list.vocabulary-card-list li.character-level-4 { border-color:#efc8bf; background:#fff7f5; }.vocabulary-list.vocabulary-card-list li.character-level-5 { border-color:#dfcce6; background:#fbf7fc; }.vocabulary-list.vocabulary-card-list li.character-level-6 { border-color:#b9d7d7; background:#f1f9f9; }.vocabulary-list.vocabulary-card-list li.character-level-7-9 { border-color:#e3d79b; background:#fffde8; }
.vocabulary-list.vocabulary-card-list li.character-level-1 strong { color:#317447; }.vocabulary-list.vocabulary-card-list li.character-level-2 strong { color:#256d94; }.vocabulary-list.vocabulary-card-list li.character-level-3 strong { color:#9b5c18; }.vocabulary-list.vocabulary-card-list li.character-level-4 strong { color:#963f34; }.vocabulary-list.vocabulary-card-list li.character-level-5 strong { color:#714487; }.vocabulary-list.vocabulary-card-list li.character-level-6 strong { color:#2d7274; }.vocabulary-list.vocabulary-card-list li.character-level-7-9 strong { color:#786727; }
.vocabulary-practice-controls { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:18px; padding:14px 18px; }
.vocabulary-practice-controls > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.vocabulary-practice-controls .panel-label { margin:0 4px 0 0; }
.vocabulary-practice-levels,.vocabulary-practice-sizes { display:flex; flex-wrap:wrap; gap:6px; }
.vocabulary-practice-controls button { border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); padding:6px 10px; font:inherit; font-size:12px; }
.vocabulary-practice-controls button.active { border-color:#a8c0ad; background:#edf5ee; color:var(--green-deep); font-weight:650; }
.vocabulary-practice-controls button.character-level-1 { border-color:#cce4d1; background:#f4faf5; color:#317447; }.vocabulary-practice-controls button.character-level-2 { border-color:#c8e2ec; background:#f3fafc; color:#256d94; }.vocabulary-practice-controls button.character-level-3 { border-color:#f0d5ad; background:#fffaf1; color:#9b5c18; }.vocabulary-practice-controls button.character-level-4 { border-color:#efc8bf; background:#fff7f5; color:#963f34; }.vocabulary-practice-controls button.character-level-5 { border-color:#dfcce6; background:#fbf7fc; color:#714487; }.vocabulary-practice-controls button.character-level-6 { border-color:#b9d7d7; background:#f1f9f9; color:#2d7274; }.vocabulary-practice-controls button.character-level-7-9 { border-color:#e3d79b; background:#fffde8; color:#786727; }.vocabulary-practice-controls button.character-level-1.active,.vocabulary-practice-controls button.character-level-2.active,.vocabulary-practice-controls button.character-level-3.active,.vocabulary-practice-controls button.character-level-4.active,.vocabulary-practice-controls button.character-level-5.active,.vocabulary-practice-controls button.character-level-6.active,.vocabulary-practice-controls button.character-level-7-9.active { box-shadow:0 0 0 1px currentColor; font-weight:700; }

/* Home page: the weekly content and the two study paths are intentionally separate blocks. */
.lesson-focus { min-height:0; padding:18px; background:#fff; }
.week-study-bubble { padding:22px 24px; border:1px solid #c9dfed; border-radius:16px; background:#f3f9fc; }
.lesson-focus .week-word-row { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; margin:20px 0 0; padding:0 0 3px; scrollbar-width:thin; }
.lesson-focus .week-word-row .chip { flex:0 0 auto; }
.home-study-bubble { margin-top:12px; padding:10px; border:1px solid #d9d0ea; border-radius:16px; background:#faf7fd; }
.home-study-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.home-study-links button { min-height:72px; padding:15px 17px; border:1px solid #c7dfcd; border-radius:12px; background:#eef7f0; color:#317447; font:inherit; font-size:18px; font-weight:700; text-align:left; transition:transform .16s,border-color .16s,box-shadow .16s; }
.home-study-links button::after { content:'→'; float:right; font-size:18px; }
.home-study-links button:hover { border-color:#9dbba4; box-shadow:0 8px 18px #3244350d; transform:translateY(-2px); }
.home-study-links button:nth-child(2) { border-color:#edd09e; background:#fff7e9; color:#9b5c18; }
.home-secondary-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr); gap:13px; max-width:1020px; margin-top:24px; }
.home-secondary-grid .home-graph-card { min-height:204px; margin-top:0; grid-template-columns:minmax(0,1fr) minmax(205px,.72fr); }
.home-secondary-grid .home-graph-copy { padding:25px 27px; }
.home-secondary-grid .home-graph-copy h2 { font-size:21px; }
.home-secondary-grid .home-graph-visual { min-height:204px; padding:12px 16px; }
.home-secondary-grid .preview-svg { max-height:167px; }
.home-extension-card { position:relative; display:flex; min-height:204px; flex-direction:column; align-items:flex-start; justify-content:center; padding:25px 27px; overflow:hidden; border-color:#d9d0ea; background:linear-gradient(145deg,#faf7fd 0%,#f3effa 100%); }
.home-extension-card::after { content:''; position:absolute; right:-35px; bottom:-52px; width:156px; height:156px; border:1px solid #d8cbea; border-radius:50%; box-shadow:0 0 0 22px #f7f3fb; opacity:.86; }
.home-extension-card .eyebrow,.home-extension-card h2,.home-extension-card p,.home-extension-action { position:relative; z-index:1; }
.home-extension-card .eyebrow { color:#74578c; }
.home-extension-card h2 { margin:7px 0 9px; color:#553b6b; font-size:21px; }
.home-extension-card p { max-width:250px; margin:0; color:#746a7d; font-size:13px; line-height:1.55; }
.home-extension-action { margin-top:17px; color:#65457c; font-size:13px; font-weight:700; }
.graph-card-link { width:100%; padding:0; border:1px solid var(--line); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.graph-card-link:hover { border-color:#a8c0ad; box-shadow:0 9px 22px #32443512; transform:translateY(-2px); }
.graph-card-link:focus-visible { outline:3px solid #8ea995; outline-offset:3px; }

/* The final HSK band uses a light yellow, distinct from HSK 3's orange. */
.character-practice-card .flash-word.character-level-7-9,
.character-level-tabs button.character-level-7-9,
.character-level-tabs button.character-level-7-9.active,
.character-list.character-level-7-9 li button,
.character-vocabulary-list .character-level-7-9 strong,
.character-vocabulary-list .character-level-7-9 em,
.vocabulary-level-tabs button.character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9.active,
.vocabulary-list.character-level-7-9 strong { color:#786727; }
.character-level-tabs button.character-level-7-9,
.character-level-tabs button.character-level-7-9.active,
.character-list.character-level-7-9 li,
.character-vocabulary-list .character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9,
.vocabulary-level-tabs button.character-level-7-9.active,
.vocabulary-list.character-level-7-9 li { border-color:#e3d79b; background:#fffde8; }
.character-vocabulary-list .character-level-7-9 em { background:#f6efc9; }
.character-intro.character-level-7-9,
.vocabulary-intro.character-level-7-9 { border-color:#e3d79b; }
.character-practice-card .flash-word.character-level-1-2 { color:#317447; }
.character-vocabulary-toggle span { color:#786727; }
.character-vocabulary-toggle.active span { border-color:#e3d79b; background:#fffde8; }
.character-vocabulary-toggle input:focus-visible + span { outline-color:#ad963c; }

/* With the graph trail removed, use the full paper-like canvas. */
.graph-canvas { inset:12px; }
.graph-area { background:linear-gradient(135deg,#fff 0%,#fbfdfb 100%); }
.paper-answer-menu,.paper-answer-menu button,.add-graph-form select,.add-word-form select { background:#fff; }

html[data-locale="th"] body,
html[data-locale="th"] button,
html[data-locale="th"] input,
html[data-locale="th"] textarea,
html[data-locale="th"] select { font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans Thai","Thonburi","Leelawadee UI",sans-serif; }

/* HSK 2.0 / 3.0 migration view */
.character-system-tabs { grid-column:1 / -1; margin-bottom:0; }
.character-system-tabs + .character-sidebar { margin-top:0; }
.character-system-tabs ~ .character-toolbar { top:86px; }
.comparison-view { max-width:1080px; }
.comparison-tabs { margin:25px 0 18px; }
.comparison-direction-tabs { margin:-8px 0 18px; }
.comparison-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 23px; }
.comparison-summary .card { display:grid; gap:3px; padding:18px 20px; }
.comparison-summary span,.comparison-summary small { color:var(--muted); font-size:12px; }
.comparison-summary strong { color:var(--green-deep); font-size:27px; font-weight:650; }
.comparison-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.8fr); gap:18px; align-items:start; }
.comparison-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:2px 0 12px; }
.comparison-heading h2 { margin:0; font-size:20px; }
.comparison-heading span { color:var(--muted); font-size:12px; }
.migration-scroll { overflow-x:auto; padding:0 0 8px; }
.migration-matrix { display:grid; min-width:780px; gap:7px; }
.migration-header { display:grid; grid-template-columns:90px repeat(var(--migration-columns, 7),minmax(88px,1fr)); gap:7px; }
.migration-row { display:grid; grid-template-columns:90px repeat(var(--migration-columns, 7),minmax(88px,1fr)); gap:7px; }
.migration-column-label,.migration-row-label { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; text-align:center; }
.migration-row-label { justify-content:flex-start; padding-left:7px; text-align:left; }
.migration-cell { display:grid; min-height:68px; place-content:center; gap:2px; border:1px solid #dde6dd; border-radius:10px; background:#fafcf9; color:var(--green-deep); font:inherit; cursor:pointer; }
.migration-cell strong { font-size:19px; font-weight:650; }
.migration-cell span { color:var(--muted); font-size:11px; }
.migration-cell.weight-1 { background:#f3f8f3; }.migration-cell.weight-2 { background:#e9f3ea; }.migration-cell.weight-3 { background:#dcebdd; }
.migration-cell.selected { border-color:#6d9a76; box-shadow:0 0 0 2px #d8eadb; }
.comparison-detail { padding:19px 20px; }
.comparison-detail .eyebrow { margin:0 0 5px; }.comparison-detail h2 { margin:0; font-size:18px; }.comparison-count { display:block; margin:9px 0 11px; color:var(--green-deep); font-size:22px; }
.comparison-detail ol { max-height:415px; margin:0; padding:0; overflow:auto; list-style:none; border-top:1px solid var(--line); }
.comparison-detail li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.comparison-detail li strong { font-size:16px; }.comparison-detail li span { color:var(--muted); font-size:12px; text-align:right; }
.comparison-note { margin:17px 0 0; padding:12px 14px; border-left:3px solid #9ab9a2; background:#f6f9f6; color:var(--muted); font-size:13px; line-height:1.65; }
@media (max-width:760px) {
  .comparison-summary,.comparison-layout { grid-template-columns:1fr; }
  .comparison-summary { gap:8px; }
  .comparison-summary .card { grid-template-columns:90px 1fr auto; align-items:baseline; padding:13px 15px; }
  .comparison-summary strong { font-size:22px; }
  .migration-matrix { min-width:720px; }
  .migration-header,.migration-row { grid-template-columns:75px repeat(var(--migration-columns, 7),minmax(82px,1fr)); gap:5px; }
  .migration-row-label { padding-left:2px; font-size:11px; }
  .migration-column-label { font-size:11px; }
  .migration-cell { min-height:58px; }
  .migration-cell strong { font-size:16px; }
  .comparison-detail ol { max-height:250px; }
}

@media (max-width:1050px) {
  .nav { gap:18px; }
  .tabs { gap:14px; }
  .nav-actions { gap:10px; }
}
@media (max-width:760px) {
  .nav { align-items:flex-start; }
  .nav-actions { margin-left:auto; }
  .locale-toggle { margin-top:1px; }
  .goal-countdown { min-height:135px; padding:23px 22px; }
  .goal-main { min-height:89px; gap:12px; }
  .goal-countdown-copy h2 { font-size:27px; }
  .goal-countdown-copy p { max-width:205px; }
  .goal-metric { min-width:76px; padding-right:0; }
  .goal-metric strong { font-size:35px; }
  .goal-main { flex-wrap:wrap; }.goal-calendar { display:block; order:3; width:100%; min-width:0; padding:12px 0 0; border-top:1px solid #c9d9cb; border-left:0; }.goal-calendar .calendar-dates { grid-template-columns:1fr; }
  .goal-orbit { right:76px; opacity:.45; }
  .goal-editor { align-items:stretch; flex-direction:column; gap:13px; margin-top:15px; }
  .teacher-home-toolbar { align-items:flex-start; flex-direction:column; gap:11px; margin-bottom:24px; }
  .teacher-home-actions { width:100%; margin-left:0; justify-content:flex-start; }
  .teacher-current-graph { position:static; order:3; }
  .learning-home.is-teacher > h1 { margin-top:31px; }
  .lesson-editor-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .home-overview,.home-secondary-grid,.home-graph-card { grid-template-columns:1fr; }
  .home-side-stack { grid-template-rows:none; }
  .lesson-focus { padding:25px 22px; }
  .assessment-card { min-height:176px; }
  .exam-calendar { min-height:0; }
  .home-graph-card { min-height:0; }
  .home-secondary-grid .home-graph-card,.home-extension-card { min-height:0; }
  .home-graph-copy { padding:25px 22px; }
  .home-graph-visual { min-height:205px; border-top:1px solid #edf0eb; border-left:0; }
  .start-grid { grid-template-columns:1fr; }
  .start-card { min-height:130px; }
  .start-card strong { margin-top:14px; }
  .teacher-goal { grid-template-columns:1fr; gap:17px; padding:22px; }
  .exam-goal-form { grid-template-columns:1fr 1fr; }
  .exam-goal-form button { grid-column:1 / -1; }
  .site-footer { align-items:flex-start; flex-wrap:wrap; margin-top:45px; padding-bottom:16px; }
  .site-footer p { position:static; order:3; width:100%; transform:none; }
  .footer-contact { width:100%; margin-left:0; padding-right:0; }
  .character-intro { align-items:flex-start; flex-direction:column; gap:8px; }
  .character-browser,.character-practice-shell { display:block; padding:20px 16px; }
  .character-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; border-right:0; border-bottom:1px solid var(--line); padding:0 0 16px; }
  .character-sidebar .panel-label { grid-column:1 / -1; margin:0; }
  .character-sidebar .panel-label:nth-of-type(2) { margin-top:7px; }
  .character-sidebar-total { grid-column:1 / -1; margin-top:4px; }
  .character-group-tabs,.character-level-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .character-toolbar { position:static; justify-content:flex-end; margin:14px 0 0; }
  .character-workbench { grid-column:auto; grid-template-columns:1fr; }
  .character-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .character-character-column .character-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; }
  .character-vocabulary-empty,.character-vocabulary { margin-top:18px; }
  .character-vocabulary { padding:20px 16px; }
  .character-vocabulary-head { gap:14px; }
  .character-vocabulary-list { grid-template-columns:1fr; }
  .stroke-practice.is-stroke-step .stroke-practice-layout { grid-template-columns:1fr; }
  .stroke-practice.is-stroke-step .stroke-stage { min-height:290px; }
  .stroke-order-panel { min-height:0; }
  .vocabulary-level-row { align-items:flex-start; flex-direction:column; gap:14px; }.vocabulary-level-total { align-self:flex-end; }
  .vocabulary-browser { padding:20px 16px; }
  .vocabulary-system-tabs { margin-bottom:14px; padding-bottom:14px; overflow-x:auto; }
  .vocabulary-system-tabs button { flex:0 0 auto; }
  .vocabulary-list { grid-template-columns:1fr; }
  .vocabulary-list.vocabulary-card-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .brand-copy { display:none; }
  .nav-actions { gap:4px; }
  .locale-toggle { font-size:11px; }
  .locale-toggle button { padding:6px 5px; }
  .vocabulary-list.vocabulary-card-list { grid-template-columns:1fr; }
}

/* Dedicated lesson entry */
.lesson-nav-link{display:flex;align-items:center;color:#44564a!important;font-size:14px;font-weight:650;white-space:nowrap;text-decoration:none}.lesson-entry-banner{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#314c3b;background:#eaf0e3;border:1px solid #d4dfca;border-radius:18px;padding:28px 32px;margin:25px 0;text-align:left}.lesson-entry-banner small{display:block;font-size:10px;letter-spacing:2px;color:#798873}.lesson-entry-banner strong{display:block;font-size:27px;font-weight:500;margin:10px 0}.lesson-entry-banner em{font-size:13px;font-style:normal;color:#6f7e68}.lesson-entry-banner b{font-size:28px;font-weight:400}.lesson-nav-link:focus-visible,.lesson-entry-banner:focus-visible{outline:3px solid #a37749;outline-offset:4px}@media(max-width:600px){.lesson-entry-banner{padding:22px}.lesson-entry-banner strong{font-size:23px}}