:root { --cn-blue:#153b70; --cn-blue-2:#245b9d; --cn-gold:#f0c64d; --cn-paper:#f6f8fb; --cn-ink:#13233d; --cn-muted:#68778c; --cn-line:#dce4ef; }
.chinese-page { background:linear-gradient(180deg,#edf3fa 0,#f7f9fc 420px); color:var(--cn-ink); }
.chinese-page.access-pending #app { visibility:hidden; }
.chinese-page #app { max-width:1160px; padding:0 28px 70px; }
.chinese-topbar { padding:22px 0; }
.private-badge { padding:8px 13px; border-radius:999px; background:#dce8f7; color:var(--cn-blue); font-size:13px; font-weight:800; }
.chinese-home { padding-top:30px; }
.chinese-intro { display:grid; grid-template-columns:1fr auto; column-gap:35px; padding:46px 48px; border-radius:28px; background:var(--cn-blue); color:#fff; box-shadow:0 22px 60px rgba(21,59,112,.15); }
.chinese-eyebrow { margin:0 0 8px; color:#d6aa2b; font-size:12px; font-weight:900; letter-spacing:.12em; }
.chinese-intro h1 { margin:0; color:#fff; font:800 clamp(38px,6vw,67px)/1.08 'Noto Sans SC','Nunito',sans-serif; letter-spacing:.01em; }
.pinyin-heading { margin:8px 0 16px; color:#a9c8ee; font-size:19px; font-weight:800; }
.chinese-intro > p:last-of-type { max-width:640px; margin:0; color:#cfdbeb; font-size:17px; line-height:1.65; }
.chinese-overview { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; }
.chinese-overview div { padding:17px 19px; border:1px solid rgba(255,255,255,.13); border-radius:15px; background:rgba(255,255,255,.07); }
.chinese-overview strong,.chinese-overview span { display:block; }.chinese-overview strong { color:#fff; font-size:25px; }.chinese-overview span { color:#b9cbe1; font-size:13px; }
.generator-limit { margin:0; color:var(--cn-muted); font-size:13px; line-height:1.45; }
.tone-note { margin-top:20px; padding:29px 32px; border:1px solid #e2d59e; border-radius:22px; background:#fff8df; }
.tone-symbol { color:var(--cn-blue); font:800 26px 'Noto Sans SC',sans-serif; }.tone-note h2 { margin:10px 0 3px; color:var(--cn-ink); font-size:24px; }.tone-note p { margin:0 0 17px; color:#6f674d; }.tone-button { padding:11px 16px; border:1px solid #d5bc55; border-radius:999px; background:#fff; color:var(--cn-blue); font-weight:800; cursor:pointer; }
.lesson-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:48px 0 18px; }.lesson-heading h2 { margin:0; color:var(--cn-ink); font-size:32px; }.lesson-heading > span { color:var(--cn-muted); font-weight:800; }
.chinese-lesson-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; }
.chinese-lesson-card { display:grid; grid-template-columns:auto 1fr; gap:21px; min-height:210px; padding:27px; border:1px solid var(--cn-line); border-radius:22px; background:#fff; color:var(--cn-ink); text-align:left; box-shadow:0 10px 30px rgba(35,55,85,.06); cursor:pointer; transition:transform .18s,border-color .18s; }
.chinese-lesson-card:hover { transform:translateY(-3px); border-color:#9db8da; }.lesson-index { display:grid; place-items:center; width:53px; height:53px; border-radius:15px; background:#e5eef9; color:var(--cn-blue); font-size:19px; font-weight:900; }.chinese-lesson-card.complete .lesson-index { background:var(--cn-gold); }
.lesson-card-copy small { color:#7b8ba0; font-weight:900; letter-spacing:.08em; }.lesson-card-copy h3 { margin:5px 0 5px; font:800 26px 'Baloo 2',sans-serif; }.lesson-card-copy > span { display:block; color:var(--cn-blue-2); font:700 18px 'Noto Sans SC',sans-serif; }.lesson-card-copy p { margin:10px 0 17px; color:var(--cn-muted); line-height:1.5; }.lesson-card-copy b { color:var(--cn-blue); font-size:14px; }
.lesson-view,.studio-lesson-view,.grammar-view,.quiz-view,.quiz-result { max-width:900px; margin:28px auto 0; }.text-back { margin-bottom:25px; padding:7px 0; border:0; background:transparent; color:var(--cn-blue); font-weight:900; cursor:pointer; }.lesson-title-row { display:flex; align-items:start; justify-content:space-between; gap:25px; margin-bottom:25px; }.lesson-title-row h1 { margin:0; color:var(--cn-ink); font-size:44px; }.lesson-title-row p:last-child { color:var(--cn-muted); }.lesson-status { padding:8px 13px; border-radius:999px; background:#e4edf8; color:var(--cn-blue); font-size:13px; font-weight:900; white-space:nowrap; }
.phrase-list { display:grid; gap:13px; }.phrase-card { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:24px 25px; border:1px solid var(--cn-line); border-radius:19px; background:#fff; }.phrase-hanzi { display:block; color:var(--cn-ink); font:800 28px 'Noto Sans SC',sans-serif; }.phrase-pinyin { display:block; margin-top:2px; color:var(--cn-blue-2); font-weight:800; }.phrase-meaning { display:block; margin-top:7px; color:var(--cn-muted); }.listen-chinese { width:45px; height:45px; border:1px solid #cbd9ea; border-radius:50%; background:#edf3fa; color:var(--cn-blue); font-size:18px; cursor:pointer; }.lesson-actions { display:flex; justify-content:flex-end; margin-top:24px; }
.quiz-progress-row { display:flex; justify-content:space-between; color:var(--cn-muted); font-weight:800; }.quiz-progress-track { height:7px; margin:10px 0 25px; overflow:hidden; border-radius:9px; background:#dbe4ef; }.quiz-progress-track i { display:block; height:100%; background:var(--cn-gold); transition:width .2s; }.mandarin-quiz-card { padding:38px; border:1px solid var(--cn-line); border-radius:25px; background:#fff; }.mandarin-quiz-card h1 { margin:5px 0; color:var(--cn-ink); font:800 42px 'Noto Sans SC','Baloo 2',sans-serif; }.quiz-pinyin { min-height:26px; margin:0 0 24px; color:var(--cn-blue-2); font-weight:800; }.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.quiz-option { min-height:62px; padding:14px 17px; border:2px solid var(--cn-line); border-radius:14px; background:#fff; color:var(--cn-ink); font:800 16px 'Nunito',sans-serif; cursor:pointer; }.quiz-option:hover:not(:disabled) { border-color:#8fadd0; }.quiz-option.correct { border-color:#2d9569; background:#e4f5ec; }.quiz-option.wrong { border-color:#d85f55; background:#fdeceb; }.quiz-feedback { min-height:25px; margin:18px 0; color:var(--cn-muted); font-weight:800; }.mandarin-quiz-card > .primary-btn { width:100%; }
.quiz-result { padding:55px 35px; border-radius:27px; background:#fff; text-align:center; }.result-seal { display:grid; place-items:center; width:86px; height:86px; margin:0 auto 22px; border-radius:25px; background:var(--cn-gold); color:var(--cn-blue); font:800 40px 'Noto Sans SC',sans-serif; transform:rotate(-3deg); }.quiz-result h1 { margin:5px 0; color:var(--cn-ink); font-size:45px; }.quiz-result > p:not(.chinese-eyebrow) { color:var(--cn-muted); font-size:18px; }.result-actions { display:flex; justify-content:center; gap:12px; margin-top:27px; }

.character-trainer { display:grid; grid-template-columns:1.35fr .65fr; gap:34px; align-items:center; margin-top:26px; padding:36px; border:1px solid #d3b441; border-radius:26px; background:linear-gradient(135deg,#fff9df,#fff 68%); box-shadow:0 18px 45px rgba(35,55,85,.07); }
.extended-trainer { margin-top:18px; }
.character-trainer h2 { margin:0; color:var(--cn-ink); font-size:34px; }.character-trainer-copy>p:not(.chinese-eyebrow) { max-width:690px; color:var(--cn-muted); line-height:1.6; }.character-rules { display:grid; gap:7px; margin:18px 0 25px; padding-left:20px; color:#5f6d80; font-weight:700; }.character-rules li::marker { color:#d6aa2b; }
.character-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.character-stats div { display:grid; place-items:center; min-height:100px; padding:13px; border:1px solid #e5d38c; border-radius:17px; background:rgba(255,255,255,.82); text-align:center; }.character-stats strong { color:var(--cn-blue); font-size:27px; }.character-stats span { color:var(--cn-muted); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.character-flow { max-width:930px; margin:28px auto 0; }.character-flow-header { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; margin-bottom:24px; }.character-flow-header h1 { margin:0; color:var(--cn-ink); font-size:44px; }.character-flow-header p:last-child { max-width:690px; color:var(--cn-muted); line-height:1.6; }
.character-preview-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.character-preview-card { display:grid; grid-template-columns:72px 1fr auto; gap:18px; align-items:center; min-height:118px; padding:20px; border:1px solid var(--cn-line); border-radius:18px; background:#fff; }.character-glyph { color:var(--cn-ink); font:800 52px 'Noto Sans SC',sans-serif; }.character-preview-card strong { color:var(--cn-blue-2); font-size:17px; }.character-preview-card p { margin:5px 0 0; color:var(--cn-muted); font-weight:700; }.character-preview-explainer { margin-top:17px; padding:18px 21px; border-radius:15px; background:#eaf1f9; color:var(--cn-blue); }.character-preview-explainer p { margin:5px 0 0; color:#566980; line-height:1.5; }
.character-question-card { padding:39px; border:1px solid var(--cn-line); border-radius:25px; background:#fff; text-align:center; }.character-question-glyph { margin:8px 0 13px; color:var(--cn-ink); font:800 112px/1.15 'Noto Sans SC',sans-serif; }.character-question-help { margin:0 0 25px; color:var(--cn-muted); }.character-question-card .quiz-options { text-align:left; }.character-question-card>.primary-btn { width:100%; }.character-result { padding:55px 35px; border-radius:27px; background:#fff; text-align:center; }.character-result h1 { margin:5px 0; color:var(--cn-ink); font-size:45px; }.character-result>p:not(.chinese-eyebrow) { max-width:690px; margin:10px auto; color:var(--cn-muted); font-size:17px; }.character-result-score { color:var(--cn-blue)!important; font-size:28px!important; font-weight:900; }

.mandarin-studio { margin-top:26px; padding:34px; border:1px solid #cfdbea; border-radius:26px; background:#fff; box-shadow:0 18px 45px rgba(35,55,85,.07); }
.studio-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.studio-heading h2 { margin:0; color:var(--cn-ink); font-size:32px; }
.studio-heading > div > p:last-child { max-width:700px; margin:8px 0 0; color:var(--cn-muted); line-height:1.55; }
.generator-status { flex:0 0 auto; padding:9px 13px; border-radius:999px; background:#e6f4ec; color:#1f7654; font-size:13px; font-weight:900; }
.generator-status.offline { background:#fff0d4; color:#805b0d; }
.studio-form { margin-top:27px; }
.source-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:6px; border-radius:16px; background:#edf2f8; }
.source-tab { min-height:46px; padding:9px 13px; border:0; border-radius:11px; background:transparent; color:#53647b; font:800 15px 'Nunito',sans-serif; cursor:pointer; }
.source-tab.active { background:#fff; color:var(--cn-blue); box-shadow:0 4px 13px rgba(35,55,85,.09); }
.source-panel { padding:25px 2px 5px; }
.source-panel > label:not(.upload-zone),.studio-fields label { display:grid; gap:7px; color:var(--cn-ink); font-weight:900; }
.source-panel textarea,.source-panel input,.source-panel select { width:100%; border:1px solid #cbd8e8; border-radius:13px; background:#fbfcfe; color:var(--cn-ink); font:700 16px/1.45 'Nunito',sans-serif; outline:none; }
.source-panel textarea { resize:vertical; padding:15px 16px; }
.source-panel input,.source-panel select { min-height:50px; padding:10px 13px; }
.source-panel textarea:focus,.source-panel input:focus,.source-panel select:focus { border-color:var(--cn-blue-2); box-shadow:0 0 0 3px rgba(36,91,157,.12); }
.studio-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:14px; }
.field-note { margin:10px 0 0; color:var(--cn-muted); font-size:14px; }
.upload-zone { display:grid; place-items:center; min-height:170px; padding:25px; border:2px dashed #aebfd4; border-radius:18px; background:#f7faff; color:var(--cn-blue); text-align:center; cursor:pointer; }
.upload-zone strong,.upload-zone span { display:block; }.upload-zone strong { font-size:19px; }.upload-zone span { margin-top:5px; color:var(--cn-muted); font-size:14px; }.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.image-preview { display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; margin-top:14px; padding:13px; border:1px solid var(--cn-line); border-radius:16px; background:#f8fafc; }
.image-preview img { width:120px; height:82px; border-radius:10px; object-fit:cover; }.image-preview strong { display:block; overflow-wrap:anywhere; }.image-preview button { margin-top:8px; padding:0; border:0; background:transparent; color:#a9463f; font-weight:900; cursor:pointer; }
.studio-submit-row { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:15px; }
.studio-feedback { flex-basis:100%; min-height:23px; margin:3px 0 0; color:var(--cn-muted); font-weight:800; }.studio-feedback.error { color:#ae443d; }.studio-feedback.success { color:#247352; }
.saved-lessons-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:38px 0 14px; padding-top:29px; border-top:1px solid var(--cn-line); }.saved-lessons-heading h3 { margin:0; color:var(--cn-ink); font-size:25px; }.saved-lessons-heading > span { color:var(--cn-muted); font-weight:800; }
.studio-library { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.studio-library-card { display:grid; grid-template-columns:1fr auto; gap:16px; padding:20px; border:1px solid var(--cn-line); border-radius:17px; background:#fbfcfe; color:var(--cn-ink); text-align:left; cursor:pointer; }
.studio-library-card:hover { border-color:#9bb4d2; }.studio-library-card small { color:var(--cn-blue-2); font-weight:900; letter-spacing:.04em; }.studio-library-card h4 { margin:5px 0 6px; font-size:20px; }.studio-library-card p { margin:0; color:var(--cn-muted); line-height:1.4; }.studio-library-card > span { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; background:#e6eef8; color:var(--cn-blue); font-weight:900; }
.empty-library { margin:0; padding:21px; border:1px dashed #c7d4e4; border-radius:16px; color:var(--cn-muted); text-align:center; }
.studio-lesson-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:12px; }.studio-lesson-header h1 { margin:0; color:var(--cn-ink); font-size:44px; }.studio-lesson-header p:last-child { color:var(--cn-muted); font-size:18px; }.studio-intro-copy { margin:0 0 25px; color:var(--cn-muted); font-size:17px; line-height:1.65; }
.reading-card { padding:27px; border:1px solid #ddcf91; border-radius:21px; background:#fff9e5; }.reading-card-title { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.reading-card-title h2 { margin:0; color:var(--cn-ink); font-size:24px; }.listen-text-button { padding:10px 17px; border:1px solid #d4bd59; border-radius:999px; background:#fff; color:var(--cn-blue); font-weight:900; cursor:pointer; }.reading-hanzi { margin:24px 0 5px; color:var(--cn-ink); font:700 26px/1.75 'Noto Sans SC',sans-serif; }.reading-pinyin { margin:0; color:var(--cn-blue-2); font-weight:800; line-height:1.6; }.reading-meaning { margin:10px 0 0; color:#6d6548; line-height:1.6; }
.studio-section-heading { margin:35px 0 14px; }.studio-section-heading h2 { margin:0; color:var(--cn-ink); font-size:27px; }
.studio-vocabulary { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.studio-word-card { position:relative; padding:22px 66px 22px 22px; border:1px solid var(--cn-line); border-radius:17px; background:#fff; }.studio-word-card h3 { margin:0; color:var(--cn-ink); font:800 28px 'Noto Sans SC',sans-serif; }.studio-word-card .word-pinyin { color:var(--cn-blue-2); font-weight:900; }.studio-word-card p { margin:8px 0 0; color:var(--cn-muted); }.studio-word-card small { display:block; margin-top:9px; color:#7b6f49; line-height:1.45; }.studio-word-card .listen-chinese { position:absolute; top:20px; right:18px; }
.studio-sentences { display:grid; gap:12px; }.studio-sentence { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:22px; border:1px solid var(--cn-line); border-radius:17px; background:#fff; }.studio-sentence h3 { margin:0; font:700 24px 'Noto Sans SC',sans-serif; }.studio-sentence .sentence-pinyin { margin:4px 0; color:var(--cn-blue-2); font-weight:800; }.studio-sentence p { margin:4px 0; color:var(--cn-muted); }.studio-sentence small { color:#7d704d; }
.mission-card { margin-top:36px; padding:28px; border-radius:21px; background:var(--cn-blue); color:#fff; }.mission-card .chinese-eyebrow { color:#f3d473; }.mission-card h2 { margin:0 0 9px; color:#fff; font-size:28px; }.mission-card > p:not(.chinese-eyebrow) { color:#d0dcec; }.mission-card details { margin-top:18px; padding:16px 18px; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:rgba(255,255,255,.08); }.mission-card summary { font-weight:900; cursor:pointer; }.mission-card details strong,.mission-card details span { display:block; margin-top:10px; }.mission-card details strong { font:700 24px 'Noto Sans SC',sans-serif; }.mission-card details span { color:#cddaea; }

.grammar-section { margin-top:28px; padding:34px; border:1px solid #cad8e8; border-radius:26px; background:#f8fbff; box-shadow:0 18px 45px rgba(35,55,85,.06); }
.grammar-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.grammar-heading h2 { margin:0; color:var(--cn-ink); font-size:32px; }.grammar-heading p:last-child { max-width:680px; margin:7px 0 0; color:var(--cn-muted); }.grammar-heading > span { flex:0 0 auto; color:var(--cn-blue); font-weight:900; }
.grammar-path { position:relative; display:grid; gap:12px; }.grammar-path::before { content:""; position:absolute; top:32px; bottom:32px; left:27px; width:3px; border-radius:3px; background:#d7e2ef; }
.grammar-card { position:relative; display:grid; grid-template-columns:56px 1fr; gap:17px; width:100%; padding:20px; border:1px solid var(--cn-line); border-radius:18px; background:#fff; color:var(--cn-ink); text-align:left; box-shadow:0 7px 20px rgba(35,55,85,.045); cursor:pointer; transition:transform .18s,border-color .18s; }
.grammar-card:hover:not(:disabled) { transform:translateX(4px); border-color:#91afd1; }.grammar-card.locked { opacity:.58; cursor:not-allowed; }.grammar-card.complete { border-color:#9bcab6; background:#f5fcf8; }
.grammar-step { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border:4px solid #f8fbff; border-radius:50%; background:var(--cn-blue); color:#fff; font-weight:900; }.grammar-card.complete .grammar-step { background:#2d9569; }.grammar-card.locked .grammar-step { background:#9aa8ba; }
.grammar-card-copy { display:grid; grid-template-columns:1fr auto; column-gap:20px; }.grammar-card-copy small { color:var(--cn-blue-2); font-size:11px; font-weight:900; letter-spacing:.08em; }.grammar-card-copy strong { grid-column:1; margin:2px 0; font-size:21px; }.grammar-card-copy > span { grid-column:2; grid-row:1/3; align-self:center; color:var(--cn-blue-2); font:800 20px 'Noto Sans SC',sans-serif; }.grammar-card-copy p { grid-column:1/-1; margin:5px 0 9px; color:var(--cn-muted); }.grammar-card-copy b { grid-column:1/-1; color:var(--cn-blue); font-size:13px; }
.grammar-lesson-header { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; margin-bottom:24px; }.grammar-lesson-header h1 { margin:0; color:var(--cn-ink); font-size:44px; }.grammar-lesson-header p:last-child { color:var(--cn-muted); font-size:17px; }
.grammar-rule-card { display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:center; padding:30px; border-radius:23px; background:var(--cn-blue); color:#fff; }.grammar-rule-card h2 { margin:0; color:#fff; font-size:29px; }.grammar-rule-card p:last-child { margin:10px 0 0; color:#d0dcec; line-height:1.6; }.grammar-rule-card .chinese-eyebrow { color:#f3d473; }
.grammar-pattern { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }.grammar-pattern-part { padding:9px 12px; border-radius:10px; background:#fff; color:var(--cn-blue); font-weight:900; }.grammar-pattern-part.part-1 { background:#f8dc83; }.grammar-pattern-part.part-2 { background:#bfe5d4; }.grammar-pattern-part.part-3 { background:#d9cbed; }
.grammar-examples { display:grid; gap:12px; }.grammar-example { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:21px 23px; border:1px solid var(--cn-line); border-radius:17px; background:#fff; }.grammar-example h3 { margin:0; color:var(--cn-ink); font:700 25px 'Noto Sans SC',sans-serif; }.grammar-example span { display:block; margin-top:3px; color:var(--cn-blue-2); font-weight:800; }.grammar-example p { margin:5px 0 0; color:var(--cn-muted); }
.phrase-card .learning-card-copy h3,.studio-word-card .learning-card-copy h3 { margin:0; color:var(--cn-ink); font:800 28px 'Noto Sans SC',sans-serif; }
.studio-word-card { display:grid; grid-template-columns:1fr; gap:17px; padding:22px; }.studio-word-card .listen-chinese { position:static; }
.learning-answer { margin-top:10px; padding-top:10px; border-top:1px solid #e5ebf3; }.learning-answer[hidden] { display:none; }.learning-pinyin { display:block; color:var(--cn-blue-2); font-weight:900; }.learning-meaning { margin:4px 0!important; color:var(--cn-muted); }.memory-status { display:block; margin-top:12px; color:#75859a; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.learning-card-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; }.reveal-learning { min-height:41px; padding:8px 13px; border:1px solid #cbd9ea; border-radius:999px; background:#fff; color:var(--cn-blue); font:800 13px 'Nunito',sans-serif; cursor:pointer; }.reveal-learning:hover { border-color:#8fadd0; background:#f7faff; }
.quiz-audio-button { min-width:190px; margin:12px 0 20px; padding:14px 21px; border:1px solid #bfd0e3; border-radius:999px; background:#edf4fb; color:var(--cn-blue); font:900 16px 'Nunito',sans-serif; cursor:pointer; }.quiz-audio-button:hover { background:#e1edf8; }
.meaning-typing-form { max-width:700px; margin:22px auto 0; text-align:left; }.meaning-typing-form[hidden] { display:none; }.meaning-typing-form label { display:block; margin-bottom:8px; color:var(--cn-ink); font-size:14px; font-weight:900; }.meaning-typing-form>div { display:grid; grid-template-columns:1fr auto; gap:10px; }.meaning-typing-form input { min-width:0; min-height:54px; padding:12px 16px; border:2px solid #c9d7e7; border-radius:14px; background:#fff; color:var(--cn-ink); font:800 18px 'Nunito',sans-serif; }.meaning-typing-form input:focus { border-color:var(--cn-blue-2); outline:3px solid rgba(36,91,157,.13); }.meaning-typing-form .primary-btn { min-height:54px; padding:12px 22px; }.typing-hint { min-height:24px; margin:10px 0 0; color:#8a6510; font-weight:800; }.typing-skip { margin-top:5px; padding:6px 0; border:0; background:transparent; color:var(--cn-muted); font:800 14px 'Nunito',sans-serif; text-decoration:underline; cursor:pointer; }
.listening-trainer { margin-top:18px; border-color:#9dbbdc; background:linear-gradient(135deg,#eaf3fc,#fff 68%); }.listening-trainer .character-rules li::marker { color:var(--cn-blue-2); }.listening-trainer .character-stats div { border-color:#c3d6ec; }
.listening-play { display:grid; place-items:center; width:132px; height:132px; margin:8px auto 13px; border:0; border-radius:50%; background:var(--cn-blue); color:#fff; font:800 52px/1 'Noto Sans SC',sans-serif; cursor:pointer; box-shadow:0 14px 30px rgba(21,59,112,.22); transition:transform .15s,background .15s; }.listening-play:hover { background:var(--cn-blue-2); transform:scale(1.04); }.listening-play.revealed { background:#fff; color:var(--cn-ink); border:3px solid var(--cn-blue); font-size:68px; box-shadow:none; }
.speaking-trainer { border-color:#bca4d8; background:linear-gradient(135deg,#f3edfb,#fff 68%); }.speaking-trainer .character-stats div { border-color:#d9c9ea; }.speaking-meaning { margin:16px 0 10px; color:var(--cn-ink); font:800 42px/1.2 'Baloo 2','Nunito',sans-serif; }.speaking-answer-reveal { margin:5px 0 18px; color:var(--cn-blue); font:800 30px 'Noto Sans SC','Nunito',sans-serif; }.speaking-self-buttons { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:0 0 18px; }.speaking-self-buttons button { min-height:56px; border-radius:14px; font:900 16px 'Nunito',sans-serif; cursor:pointer; }.self-correct { border:2px solid #55a680; background:#e8f6ef; color:#1f7654; }.self-wrong { border:2px solid #d98b84; background:#fdf0ef; color:#a33f38; }.generated-preview-instruction { margin:-8px 0 22px; color:var(--cn-muted); font-size:17px; line-height:1.55; }
.mandarin-zones { margin-top:28px; }.zone-heading { margin-bottom:16px; }.zone-heading h2,.zone-panel-header h2,.zone-generator h2 { margin:0; color:var(--cn-ink); font-size:32px; }
.zone-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }.zone-card { display:flex; flex-direction:column; min-height:285px; padding:28px; border:1px solid var(--cn-line); border-radius:24px; background:#fff; color:var(--cn-ink); text-align:left; box-shadow:0 14px 36px rgba(35,55,85,.07); cursor:pointer; transition:transform .18s,border-color .18s,box-shadow .18s; }.zone-card:hover:not(:disabled) { transform:translateY(-4px); border-color:#94afd0; box-shadow:0 20px 42px rgba(35,55,85,.11); }.zone-card:disabled { opacity:.58; cursor:not-allowed; }.zone-icon { display:grid; place-items:center; width:64px; height:64px; margin-bottom:24px; border-radius:19px; background:#e7eff9; color:var(--cn-blue); font:800 33px 'Noto Sans SC',sans-serif; }.listening-zone-card .zone-icon { background:#dfeffc; }.zone-card small { color:var(--cn-blue-2); font-weight:900; letter-spacing:.08em; }.zone-card strong { margin:5px 0; font:800 29px 'Baloo 2',sans-serif; }.zone-card p { flex:1; margin:5px 0 21px; color:var(--cn-muted); line-height:1.5; }.zone-card b { color:var(--cn-blue); }
.mandarin-zone-panel { margin-top:30px; }.zone-panel-header { max-width:760px; margin-bottom:10px; }.zone-panel-header p:last-child { color:var(--cn-muted); font-size:17px; line-height:1.6; }
.zone-generator { margin-top:24px; padding:34px; border:1px solid #cbd9e9; border-radius:26px; background:#fff; box-shadow:0 18px 45px rgba(35,55,85,.06); }.zone-generator>div>p:last-child { max-width:720px; color:var(--cn-muted); line-height:1.55; }.personal-quiz-form { display:grid; gap:11px; margin-top:22px; }.personal-quiz-form label { color:var(--cn-ink); font-weight:900; }.personal-quiz-form textarea { width:100%; padding:15px 16px; resize:vertical; border:1px solid #cbd8e8; border-radius:14px; background:#fbfcfe; color:var(--cn-ink); font:700 16px/1.5 'Nunito',sans-serif; }.personal-quiz-form textarea:focus { border-color:var(--cn-blue-2); outline:3px solid rgba(36,91,157,.12); }.personal-quiz-form .primary-btn { justify-self:start; }.generator-feedback { min-height:23px; margin:0; color:var(--cn-muted); font-weight:800; }.generator-feedback.error { color:#ae443d; }.generator-feedback.success { color:#247352; }
.generated-quiz-library { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px; }.generated-quiz-card { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; border:1px solid var(--cn-line); border-radius:18px; background:#f8fbff; }.generated-quiz-card small { color:var(--cn-blue-2); font-weight:900; letter-spacing:.06em; }.generated-quiz-card h3 { margin:4px 0; color:var(--cn-ink); }.generated-quiz-card p { margin:0; color:var(--cn-muted); }
.generated-preview-card { grid-template-columns:minmax(72px,auto) 1fr auto; }.generated-preview-card .character-glyph { white-space:nowrap; }
.typing-fields { display:grid; gap:10px; }.typing-fields input[hidden] { display:none; }.meaning-typing-form>div { align-items:end; }.meaning-typing-form input:disabled { opacity:1; }.meaning-typing-form input.correct:disabled { color:#1f7654; }
.mixed-trainer { border-color:#d9a98e; background:linear-gradient(135deg,#fdf0e8,#fff 68%); }.mixed-trainer .character-stats div { border-color:#ecd0bf; }.mixed-trainer .character-rules li::marker { color:#d9774e; }.mixed-zone-card .zone-icon { background:#fbe3d4; color:#b4532a; }
.mixed-trainer .generator-feedback { margin-top:10px; }
/* In mixed practice the self-check buttons belong to speaking questions only, so they must really disappear while hidden. */
#mixed-self-buttons[hidden], #mixed-answer-reveal[hidden] { display:none; }
@media(max-width:820px){.source-tabs{grid-template-columns:1fr 1fr}.studio-fields{grid-template-columns:1fr}.studio-library,.studio-vocabulary,.character-preview-grid,.zone-grid,.generated-quiz-library{grid-template-columns:1fr}.character-trainer{grid-template-columns:1fr}}
@media(max-width:720px){.chinese-page #app{padding:0 17px 50px}.private-badge{display:none}.chinese-intro{padding:32px 24px}.chinese-overview{grid-template-columns:1fr}.chinese-lesson-grid,.quiz-options{grid-template-columns:1fr}.lesson-heading,.lesson-title-row,.studio-heading,.studio-lesson-header,.grammar-heading,.grammar-lesson-header,.character-flow-header{align-items:flex-start;flex-direction:column}.lesson-status{align-self:flex-start}.phrase-card{grid-template-columns:1fr;padding:20px}.learning-card-actions{justify-content:flex-start}.mandarin-quiz-card,.character-question-card{padding:26px 20px}.character-question-glyph{font-size:88px}.meaning-typing-form>div{grid-template-columns:1fr}.meaning-typing-form .primary-btn{width:100%}.result-actions{align-items:stretch;flex-direction:column}.result-actions button{width:100%}.mandarin-studio,.grammar-section,.character-trainer,.zone-generator{padding:25px 18px}.source-tabs{grid-template-columns:1fr}.studio-submit-row{align-items:stretch;flex-direction:column}.studio-submit-row button{width:100%}.image-preview{grid-template-columns:88px 1fr}.image-preview img{width:88px}.studio-sentence{grid-template-columns:1fr}.studio-sentence .listen-chinese{justify-self:start}.grammar-card-copy{grid-template-columns:1fr}.grammar-card-copy>span{grid-column:1;grid-row:auto;margin:3px 0}.grammar-rule-card{grid-template-columns:1fr}.grammar-pattern{justify-content:flex-start}.generated-quiz-card{align-items:stretch;flex-direction:column}.generated-quiz-card .ghost-btn{width:100%}}
@media (hover:none), (pointer:coarse) { .quiz-option { -webkit-tap-highlight-color:transparent; }.quiz-option:hover:not(:disabled) { border-color:var(--cn-line); background:#fff; } }

/* Keep typing questions separate from multiple choice and show assessment feedback. */
.quiz-options[hidden] { display:none; }
.meaning-typing-form input.correct { border-color:#2d9569; background:#e4f5ec; }
.meaning-typing-form input.wrong { border-color:#d85f55; background:#fdeceb; }
.meaning-typing-form input.near { border-color:#d99028; background:#fff3df; }
.meaning-typing-form input.correct:focus, .meaning-typing-form input.wrong:focus, .meaning-typing-form input.near:focus { outline:none; }
.typing-hint.correct, .quiz-feedback.correct { color:#247352; }
.typing-hint.wrong, .quiz-feedback.wrong { color:#ae443d; }
.typing-hint.near, .quiz-feedback.near { color:#a36516; }