:root { --ink:#1d3028; --muted:#65736c; --paper:#f4f0e5; --card:#fffdf7; --lime:#dff06b; --coral:#ff7e61; --blue:#1f6b7a; --line:#d9d5c9; --radius:22px; --shadow:0 12px 0 rgba(29,48,40,.07); font-family:'Noto Sans SC',sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); min-height:100vh; } .paper-grain { position:fixed; inset:0; opacity:.16; pointer-events:none; background-image:radial-gradient(#687168 0.6px,transparent .6px); background-size:8px 8px; } .shell { position:relative; max-width:760px; margin:auto; padding:0 18px 98px; } .masthead { height:80px; display:flex; align-items:center; justify-content:space-between; } .brand { color:var(--ink); font-family:'Ma Shan Zheng',cursive; font-size:23px; text-decoration:none; letter-spacing:1px; } .brand span { display:inline-grid; place-items:center; width:32px; height:32px; font:700 11px 'DM Mono'; color:#fff; background:var(--ink); transform:rotate(-8deg); border-radius:7px; margin-right:7px; } button { font:inherit; color:inherit; cursor:pointer; } .profile { display:flex; align-items:center; gap:8px; border:0; background:transparent; text-align:left; } .profile b,.profile small { display:block; font-size:12px; } .profile small { color:var(--muted); margin-top:1px; } .profile i { font-style:normal; color:var(--muted); } .avatar { width:34px; height:34px; border:2px solid var(--ink); background:var(--lime); display:grid; place-items:center; border-radius:50%; font-weight:800; }
.eyebrow { margin:0 0 8px; color:var(--blue); font:11px 'DM Mono'; letter-spacing:1.2px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(31px,8vw,45px); line-height:1.12; letter-spacing:-1.5px; margin-bottom:10px; } h2 { font-size:23px; margin-bottom:6px; } .sub { color:var(--muted); line-height:1.7; } .hero { padding:23px 0 22px; } .hero-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; } .chip { padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; background:#ffffff8c; } .chip.lime { background:var(--lime); border-color:var(--ink); }
.today { display:grid; grid-template-columns:1.2fr .8fr; border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--card); } .today-copy { padding:20px; } .today-copy p { color:var(--muted); font-size:13px; margin-bottom:15px; } .today-art { background:var(--coral); display:grid; place-items:center; font-size:58px; transform:rotate(2deg) scale(1.04); } .primary,.secondary { padding:11px 16px; border-radius:10px; border:2px solid var(--ink); font-weight:700; } .primary { background:var(--lime); box-shadow:3px 3px 0 var(--ink); } .primary:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); } .secondary { background:var(--card); } .section-head { display:flex; align-items:end; justify-content:space-between; margin:30px 0 12px; } .section-head h2 { margin:0; } .section-head a { color:var(--blue); font-size:13px; font-weight:700; }
.course-card { border:1px solid var(--line); border-radius:18px; background:var(--card); padding:18px; } .course-top { display:flex; justify-content:space-between; gap:12px; } .course-top h3 { margin:4px 0 0; font-size:18px; } .stamp { font:10px 'DM Mono'; border:1px solid var(--ink); padding:5px 7px; height:min-content; transform:rotate(3deg); } .progress-line { height:8px; border:1px solid var(--ink); background:#ede9df; border-radius:99px; overflow:hidden; margin:16px 0 8px; } .progress-line i { height:100%; display:block; width:45%; background:var(--lime); border-right:1px solid var(--ink); } .progress-note { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.course-shelf { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:12px; } .course-shelf .course-card { display:flex; flex-direction:column; align-items:stretch; } .course-shelf .course-card .secondary { margin-top:auto; } .selected-course { border:2px solid var(--ink); box-shadow:4px 4px 0 var(--coral); }
.loop { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:15px 0; } .loop span { border-top:2px solid var(--line); padding-top:7px; color:var(--muted); font-size:10px; line-height:1.25; } .loop span.active { border-color:var(--coral); color:var(--ink); font-weight:800; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .stat { padding:13px 11px; background:#e7efe8; border-radius:13px; } .stat b { display:block; font-size:20px; } .stat small { color:var(--muted); font-size:11px; }
.lesson-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:5px; } .lesson-tabs button { white-space:nowrap; border:1px solid var(--line); border-radius:999px; background:var(--card); padding:8px 11px; font-size:12px; } .lesson-tabs button.active { background:var(--ink); color:white; border-color:var(--ink); } .chapter { border-left:3px solid var(--blue); padding:12px 14px; background:var(--card); margin-top:10px; border-radius:0 12px 12px 0; } .chapter.extension { border-color:var(--coral); } .chapter b,.chapter small { display:block; } .chapter small { margin-top:4px; color:var(--muted); font-size:12px; }
.question { background:var(--card); border:2px solid var(--ink); border-radius:var(--radius); padding:21px; box-shadow:var(--shadow); } .question .type { font:11px 'DM Mono'; color:var(--blue); } .question h2 { font-size:22px; line-height:1.45; margin:12px 0 19px; } .options { display:grid; gap:9px; } .option { text-align:left; padding:13px; background:#fff; border:1px solid var(--line); border-radius:12px; } .option.selected { border:2px solid var(--ink); background:var(--lime); } .option span { display:inline-grid; place-items:center; margin-right:9px; width:23px;height:23px;border-radius:50%;background:#e8e6de;font:11px 'DM Mono'; } .measure { color:var(--muted); font-size:12px; margin-bottom:10px; }
.button-row { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; } .chapter .secondary { margin-top:10px; padding:7px 10px; font-size:12px; } .practice-tip { margin:18px 0 0; } .practice-feedback { margin-top:17px; padding:14px; border-radius:12px; border-left:4px solid var(--line); background:#f2efe6; } .practice-feedback p { margin:6px 0 0; line-height:1.6; } .practice-feedback.correct { border-color:#28734d; background:#e2f1e6; } .practice-feedback.wrong { border-color:var(--coral); background:#fff0e8; } .answer-reveal { font-weight:700; color:var(--ink); } .reinforcement-card { margin-top:11px; }
.dictation-question { position:relative; overflow:hidden; } .dictation-question::after { content:'✎'; position:absolute; right:18px; top:12px; color:var(--coral); font-size:32px; transform:rotate(-12deg); opacity:.75; } .dictation-audio { width:100%; margin:4px 0 13px; accent-color:var(--coral); } .answer-label { display:block; margin:18px 0 7px; font-size:13px; font-weight:800; } .answer-row { display:flex; gap:9px; align-items:stretch; } .answer-row input { flex:1; min-width:0; border:2px solid var(--ink); border-radius:10px; background:#fff; padding:11px 12px; font:inherit; } .answer-row input:focus { outline:3px solid #dff06b; } @media (max-width:520px) { .answer-row { display:grid; } }
.report-score { display:flex; align-items:center; gap:19px; background:var(--ink); color:#fff; padding:21px; border-radius:var(--radius); } .score { width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:var(--ink);font-size:29px;font-weight:800; border:4px solid var(--coral); } .report-score h2 { margin:0 0 3px; } .insight { margin-top:14px; border:1px solid var(--line); background:var(--card); padding:17px; border-radius:16px; } .insight h3 { margin-bottom:7px; } .insight p { color:var(--muted); font-size:13px; line-height:1.65; margin-bottom:0; }
.empty { padding:36px 20px; text-align:center; background:var(--card); border:1px dashed var(--line); border-radius:18px; }.bottom-nav { position:fixed; z-index:3; bottom:0; left:50%; transform:translateX(-50%); max-width:760px; width:100%; background:#fffcf4ee; backdrop-filter:blur(12px); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding:8px 12px max(11px,env(safe-area-inset-bottom)); } .bottom-nav button { border:0; background:transparent; color:var(--muted); padding:5px; font-size:11px; }.bottom-nav i { display:block;font-style:normal;font-size:19px;line-height:19px;}.bottom-nav button.active { color:var(--ink);font-weight:800; }
@media (min-width:700px) { .shell { padding-left:38px; padding-right:38px; } .hero { display:grid; grid-template-columns:1.1fr .9fr; column-gap:40px; align-items:end; } .hero-meta { grid-column:1/-1; } } @media (max-width:390px) { .today-copy { padding:16px; } .today-art { font-size:46px; } }
.auth-page { min-height:100vh; padding:clamp(20px,4vw,56px); display:grid; place-items:center; background:linear-gradient(125deg,#e5efe9 0%,#f5f1e7 48%,#e4edf1 100%); } .auth-page::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.42; background-image:linear-gradient(90deg,transparent 0 49px,rgba(29,48,40,.045) 50px),linear-gradient(0deg,transparent 0 49px,rgba(29,48,40,.045) 50px); background-size:50px 50px; } .auth-layout { position:relative; width:min(1120px,100%); min-height:650px; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; border:1px solid rgba(29,48,40,.23); border-radius:28px; background:rgba(255,253,247,.93); box-shadow:0 28px 80px rgba(23,50,43,.18); } .auth-intro { position:relative; display:flex; flex-direction:column; padding:clamp(34px,5vw,68px); color:#f9f7ee; overflow:hidden; background:#173c35; } .auth-intro::before { content:''; position:absolute; width:440px; height:440px; right:-160px; bottom:-185px; border:1px solid rgba(223,240,107,.45); border-radius:50%; box-shadow:0 0 0 36px rgba(223,240,107,.06),0 0 0 72px rgba(223,240,107,.04); } .auth-intro::after { content:'A B C'; position:absolute; right:33px; top:36px; color:rgba(223,240,107,.23); font:700 15px 'DM Mono'; letter-spacing:8px; writing-mode:vertical-rl; } .auth-brand { position:relative; z-index:1; color:inherit; text-decoration:none; font-family:'Ma Shan Zheng',cursive; font-size:26px; letter-spacing:1px; } .auth-brand span { display:inline-grid; place-items:center; width:36px; height:36px; margin-right:8px; border-radius:8px; color:var(--ink); background:var(--lime); font:700 12px 'DM Mono'; transform:rotate(-8deg); } .auth-intro-copy { position:relative; z-index:1; max-width:490px; margin:auto 0 35px; } .auth-kicker { margin:0 0 18px; color:var(--lime); font:12px 'DM Mono'; letter-spacing:1.8px; } .auth-intro h1 { margin:0 0 20px; color:#fffdf7; font-size:clamp(42px,5vw,65px); line-height:1.08; letter-spacing:-3px; } .auth-intro-copy > p:last-child { margin:0; color:#cad8d1; font-size:16px; line-height:1.9; } .auth-path { position:relative; z-index:1; display:grid; gap:12px; margin:0; padding:0; list-style:none; } .auth-path li { display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:center; padding-top:12px; border-top:1px solid rgba(255,255,255,.18); font-size:13px; color:#e4ede8; } .auth-path b { color:var(--lime); font:12px 'DM Mono'; } .auth-footnote { position:relative; z-index:1; margin:30px 0 0; color:#92aaa0; font-size:12px; } .auth-panel { display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,72px); background:rgba(255,253,247,.86); } .auth-panel-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; } .auth-panel-head .eyebrow { margin:0; } .auth-switch { display:flex; padding:4px; border-radius:10px; background:#e7ede6; } .auth-switch button { border:0; border-radius:7px; padding:7px 14px; background:transparent; color:var(--muted); font-size:13px; font-weight:700; } .auth-switch button.active { color:var(--ink); background:#fffdf7; box-shadow:0 2px 6px rgba(29,48,40,.1); } .auth-card { display:grid; gap:17px; animation:auth-enter .32s ease both; } .auth-card h2 { margin:0 0 -8px; font-size:30px; letter-spacing:-1px; } .auth-card .sub { margin:0 0 6px; font-size:14px; } .auth-card label,.child-form label { display:grid; gap:7px; font-size:13px; font-weight:700; } .auth-card input,.child-form input { width:100%; height:48px; border:1px solid #cfd8d0; border-radius:10px; padding:12px 14px; background:#fff; font:inherit; transition:border-color .18s,box-shadow .18s; } .auth-card input:focus,.child-form input:focus { outline:0; border-color:#2a6155; box-shadow:0 0 0 3px rgba(72,140,124,.16); } .auth-card .primary { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:5px; padding:13px 16px; } .auth-card .primary span { font-size:19px; line-height:1; } .auth-agreement { margin:22px 0 0; color:#88958e; font-size:11px; line-height:1.65; } .form-message { min-height:18px; margin:-5px 0 0; color:#ad3a26; font-size:13px; } .text-button { border:0; background:transparent; color:var(--blue); font-weight:700; padding:7px 0; text-align:left; } .child-form { margin-top:14px; display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; padding:17px; background:#e7efe8; border-radius:16px; } .child-form .form-message { grid-column:1/-1; } @keyframes auth-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @media (min-width:900px) { .shell { max-width:1060px; padding-bottom:38px; } .bottom-nav { position:static; transform:none; max-width:none; margin-top:28px; border:1px solid var(--line); border-radius:16px; } } @media (max-width:760px) { .auth-page { padding:0; place-items:stretch; } .auth-layout { min-height:100vh; border:0; border-radius:0; grid-template-columns:1fr; } .auth-intro { min-height:310px; padding:32px 28px; } .auth-intro-copy { margin:auto 0 0; } .auth-intro h1 { font-size:42px; } .auth-path,.auth-footnote { display:none; } .auth-panel { padding:34px 28px 42px; } .child-form { grid-template-columns:1fr; } }

/* 账户入口默认只展示登录；注册是新用户明确选择后的次级路径。 */
.shell[hidden],.auth-page[hidden],.auth-card[hidden] { display:none !important; }
.auth-panel-head { display:block; }
.auth-register-hint { margin:1px 0 0; color:var(--muted); font-size:13px; }
.inline-link { padding:0; border:0; background:transparent; color:var(--blue); font:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.inline-link:hover,.inline-link:focus-visible { color:var(--ink); outline:none; }
.danger-button { min-height:42px; padding:9px 12px; border:1px solid #cf705f; border-radius:9px; background:#fff8f5; color:#a34232; font:700 12px inherit; }.danger-button:hover,.danger-button:focus-visible { background:#ffe8e0; outline:2px solid #cf705f; outline-offset:2px; }

/* 大屏沿用原型的顶部导航；窄屏再使用底部导航，避免学习内容被固定栏挤压。 */
.top-nav { display:none; gap:5px; padding:5px; border:1px solid var(--line); border-radius:12px; background:#fffdf7b8; }
.top-nav button { border:0; border-radius:8px; padding:8px 12px; background:transparent; color:var(--muted); font-size:13px; font-weight:700; }
.top-nav button.active,.top-nav button:hover { color:var(--ink); background:var(--lime); }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.profile-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.profile-card h3 { margin:0 0 7px; font-size:20px; }.profile-card .sub { font-size:13px; }
.membership-card { grid-column:1/-1; background:#e7efe8; }.child-list { display:grid; gap:12px; }.child-profile-card { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr); gap:20px; align-items:end; }.add-child-card { margin-top:14px; }
.settings-form { display:grid; gap:13px; margin-top:18px; }.inline-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto; gap:11px; align-items:end; }.settings-form label,.inline-form label { display:grid; gap:6px; color:var(--ink); font-size:12px; font-weight:800; }.settings-form input,.inline-form input { width:100%; min-height:42px; padding:10px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; }.settings-form input:focus,.inline-form input:focus { outline:3px solid rgba(223,240,107,.6); border-color:var(--ink); }.inline-form .form-message { grid-column:1/-1; }
@media (min-width:900px) { .shell { max-width:1360px; }.masthead { height:88px; }.top-nav { display:flex; margin-left:auto; margin-right:22px; }.bottom-nav { display:none; } }
@media (max-width:760px) { .settings-grid { grid-template-columns:1fr; }.membership-card { grid-column:auto; }.child-profile-card,.inline-form { grid-template-columns:1fr; }.inline-form .primary,.inline-form .secondary { width:100%; } }

/* 课程首页与学习板沿用原型的“纸质学习册”布局，服务端学习记录仍由现有接口承接。 */
.learning-home,.course-page { padding:28px 0 48px; }
.home-hero,.course-hero { position:relative; display:flex; justify-content:space-between; align-items:center; min-height:210px; padding:34px 46px; overflow:hidden; color:#fff9e9; background:#1f3442; border:2px solid #1f3442; box-shadow:7px 8px 0 rgba(31,52,66,.13); }
.home-hero::after,.course-hero::after { content:'A  B  C'; position:absolute; right:195px; top:-44px; color:rgba(244,200,83,.16); font:700 150px/1 'DM Mono'; letter-spacing:-14px; transform:rotate(-8deg); }
.home-hero > div,.course-hero > div { position:relative; z-index:1; max-width:720px; }.home-kicker { margin:0 0 8px; color:#f4c853; font:11px 'DM Mono'; letter-spacing:1.5px; }.home-hero h1,.course-hero h1 { margin:0; color:#fffdf7; font-size:clamp(38px,5vw,62px); line-height:1.02; letter-spacing:-2px; }.home-hero p:last-child,.course-hero p:last-child { max-width:650px; margin:15px 0 0; color:#dbe5df; line-height:1.8; }
.home-stamp,.course-stamp { position:relative; z-index:1; display:flex; flex:0 0 150px; min-height:128px; flex-direction:column; justify-content:center; padding:16px; color:var(--ink); text-align:center; border:2px dashed var(--ink); background:#f4c853; transform:rotate(4deg); }.home-stamp b { font:700 38px 'DM Mono'; }.home-stamp small,.home-stamp span,.course-stamp span,.course-stamp small { font-size:12px; }.course-stamp b { display:block; margin:7px 0; font:700 17px 'DM Mono'; }
.textbook-entry { display:grid; grid-template-columns:1fr 230px; margin-top:28px; border:2px solid var(--ink); background:#fffdf6; box-shadow:5px 6px 0 rgba(31,52,66,.12); }.textbook-intro { padding:29px 32px; }.textbook-intro h2 { margin-bottom:8px; font-size:29px; }.textbook-side { display:flex; flex-direction:column; justify-content:center; gap:6px; padding:28px; color:#fff9e9; background:#28765f; }.textbook-side b { font:700 25px 'DM Mono'; }.textbook-side small { margin-top:15px; color:#d7e8df; line-height:1.6; }
.learning-path { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:20px; font-size:12px; font-weight:800; }.learning-path span { padding:6px 9px; background:#edf3e9; border:1px solid var(--line); }.learning-path i { color:var(--coral); font-style:normal; }
.unit-selector { margin-top:30px; }.unit-rail { display:flex; gap:11px; overflow-x:auto; padding:3px 3px 12px; }.unit-chip { min-width:154px; flex:1; min-height:122px; padding:13px; color:var(--ink); text-align:left; border:2px solid var(--ink); background:#fffdf5; box-shadow:3px 3px 0 rgba(31,52,66,.14); transition:transform .18s,box-shadow .18s; }.unit-chip:hover,.unit-chip:focus-visible { transform:translateY(-3px) rotate(-1deg); box-shadow:6px 7px 0 rgba(31,52,66,.16); outline:none; }.unit-chip.selected { color:#fff; background:#28765f; }.unit-chip b,.unit-chip span,.unit-chip em,.unit-chip small { display:block; }.unit-chip b { font:700 22px 'DM Mono'; }.unit-chip span,.unit-chip small { margin-top:6px; font-size:10px; }.unit-chip em { margin-top:7px; min-height:35px; font-style:normal; font-weight:800; line-height:1.35; }.compact-rail { margin:25px 0; }.compact-rail .unit-chip { min-width:142px; min-height:80px; }.compact-rail .unit-chip b { float:left; margin-right:8px; }.compact-rail .unit-chip em { min-height:0; }
.unit-chip em{min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 单元介绍保留完整标题；按可用文字宽度缩放，避免长标题挤成两行。 */
.course-hero > div:first-child{flex:1;min-width:0;max-width:none;container-type:inline-size}
.course-page .course-hero h1{font-size:clamp(16px,3.8cqi,42px);line-height:1.25;letter-spacing:-.5px;white-space:nowrap}
.course-hero{gap:24px}
.course-hero .course-stamp{flex-shrink:0}
.learning-home .unit-chip{flex:1 0 max-content}
.learning-home .unit-chip em{font-size:14px;white-space:nowrap;overflow:visible;text-overflow:clip}

/* 课程工作台采用桌面端扁平阅读风：以留白与浅色分隔建立层级，不再用粗黑边和硬阴影堆叠。 */
.course-page{padding-top:22px}.course-hero{min-height:176px;padding:30px 38px;border:0;border-radius:16px;background:#244f43;box-shadow:none}.course-hero::after{opacity:.55}.compact-rail{margin:18px 0}.unit-rail{gap:8px;padding:1px 0 8px}.unit-chip{min-width:138px;min-height:78px;padding:13px 15px;border:1px solid #d5dfd8;border-radius:10px;background:#fff;box-shadow:none;transition:border-color .16s,background .16s,transform .16s}.unit-chip:hover,.unit-chip:focus-visible{border-color:#6c9888;background:#f4f8f5;box-shadow:none;transform:translateY(-1px)}.unit-chip.selected{background:#2b8068;border-color:#2b8068;box-shadow:none}.unit-chip b{font-size:18px}.compact-rail .unit-chip{display:flex;align-items:center;gap:9px;min-height:66px}.compact-rail .unit-chip b{float:none;margin:0;flex:0 0 auto}.compact-rail .unit-chip em{margin:0;font-size:15px;line-height:1.35}.learning-board{gap:18px}.lesson-note{padding:24px 21px;border:1px solid #e2d29a;border-radius:14px;background:#fff5d4;box-shadow:none}.unit-label{border-radius:5px}.lesson-note h2{margin-top:16px;font-size:27px}.mission-box{margin-top:20px;padding:14px;border:1px solid #ead69a;border-radius:10px;background:rgba(255,255,255,.58)}.study-area{border:1px solid #d8e1db;border-radius:14px;background:#fff;box-shadow:none}.mode-tabs{gap:4px;padding:7px 10px;border-bottom:1px solid #d8e1db;background:#f6f9f7}.mode-tab{min-width:92px;padding:10px 13px;border-radius:7px}.mode-tab:hover,.mode-tab:focus-visible{border-color:transparent;background:#e8f1eb}.mode-tab.active{background:#2a594b;box-shadow:none}.study-panel{min-height:360px;padding:30px clamp(22px,3vw,42px) 36px}.preview-heading{gap:18px}.view-switch{border:1px solid #d6dfd9;border-radius:8px;overflow:hidden}.view-switch button.active{background:#dff06b}.vocabulary-card-grid{gap:12px;margin-top:24px}.vocabulary-card{min-height:276px;padding:17px;border:1px solid #d9e1db;border-radius:12px;background:#fff !important;box-shadow:none}.vocabulary-card:hover{border-color:#a9c3b5;background:#fbfdfb !important}.word-sound{border-color:#c7d5cc;background:#fff}.word-sound:hover,.word-sound:focus-visible{background:#edf6ef;outline-color:#8aaf9c}.vocabulary-detail{border-top-style:solid;border-top-color:#e1e7e2}.vocabulary-list-row{border-color:#d9e1db;border-radius:10px;background:#fff}
.home-status { display:grid; grid-template-columns:repeat(3,1fr) 160px; gap:12px; margin-top:22px; }.home-status article { min-height:120px; padding:18px; border:1px solid var(--line); background:#e7efe8; }.home-status article span,.home-status article small { display:block; color:var(--muted); font-size:12px; }.home-status article b { display:block; margin:9px 0; font-size:28px; }.home-status .review-stamp { margin:0; min-height:120px; border:2px dashed var(--ink); background:#dff06b; color:var(--ink); }.home-status .review-stamp strong { font:700 30px 'DM Mono'; }
.learning-board { display:grid; grid-template-columns:248px minmax(0,1fr); gap:22px; align-items:start; background:transparent; }.lesson-note { position:sticky; top:16px; padding:26px 22px; border:2px solid var(--ink); border-radius:20px; background:#f4c853; box-shadow:5px 6px 0 rgba(31,52,66,.13); }.unit-label { display:inline-block; padding:5px 9px; color:#fff; background:var(--ink); font:11px 'DM Mono'; }.lesson-note h2 { margin:18px 0 10px; font-size:29px; line-height:1.12; overflow-wrap:anywhere; }.lesson-note p { line-height:1.75; font-size:14px; }.mission-box { margin-top:24px; padding:14px; border:2px dashed var(--ink); background:rgba(255,255,255,.46); }.mission-box span,.mission-box strong { display:block; }.mission-box span { font-size:12px; }.mission-box strong { margin-top:6px; line-height:1.6; }.study-area { min-width:0; overflow:hidden; border:2px solid var(--ink); border-radius:20px; background:#fffdf6; box-shadow:7px 8px 0 rgba(31,52,66,.13); }.mode-tabs { display:flex; gap:6px; overflow-x:auto; padding:8px; border-bottom:2px solid var(--ink); background:#edf3e9; scrollbar-width:thin; }.mode-tab { flex:1 0 max-content; min-width:98px; padding:11px 15px; color:var(--ink); border:1px solid transparent; border-radius:10px; background:transparent; font-weight:800; white-space:nowrap; transition:background .18s,color .18s,transform .18s; }.mode-tab:hover,.mode-tab:focus-visible { background:#fffdf6; border-color:var(--ink); outline:none; }.mode-tab.active { color:#fff; background:var(--ink); box-shadow:2px 2px 0 rgba(31,52,66,.2); }
.study-panel { min-height:390px; padding:31px clamp(20px,4vw,48px) 38px; animation:study-enter .22s ease-out; }.panel-kicker { margin:0; color:#b45436; font:11px 'DM Mono'; letter-spacing:1.5px; }.study-panel h3 { margin:9px 0 20px; font-size:clamp(25px,3vw,36px); line-height:1.18; }.tip { margin:-8px 0 22px; color:#5b6870; font-size:13px; line-height:1.65; }.study-panel .primary,.study-panel .secondary { margin-top:23px; }.word-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; }.word-grid .word-card { min-height:104px; padding:15px; border:2px solid var(--ink); background:#edf3e9; }.word-grid .word-card span,.word-grid .word-card strong,.word-grid .word-card small { display:block; }.word-grid .word-card span { color:#b45436; font:10px 'DM Mono'; }.word-grid .word-card strong { margin-top:18px; font-size:20px; }.word-grid .word-card small { margin-top:3px; }.resource-section { margin-top:28px; padding-top:22px; border-top:2px dashed var(--line); }.resource-section h4 { margin:0 0 13px; font-size:20px; }.audio-grid,.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.audio-grid .audio-card { padding:12px; border:2px solid var(--ink); background:#edf3e9; }.audio-card strong,.audio-card small { display:block; }.audio-card strong { min-height:38px; font-size:14px; }.audio-card small { margin-top:5px; color:var(--muted); font-size:11px; }.audio-card audio { width:100%; height:34px; margin-top:8px; }.video-grid .video-card { overflow:hidden; border:2px solid var(--ink); background:#fff; }.video-card video { display:block; width:100%; aspect-ratio:16/9; background:#172b38; }.video-card strong { display:block; padding:8px 10px; font-size:14px; }.skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.skill-card { min-height:205px; padding:18px; border:2px solid var(--ink); background:#f7f1e3; }.skill-card:nth-child(even) { background:#edf3e9; }.skill-card span { font:11px 'DM Mono'; }.skill-card h4 { margin:13px 0 8px; font-size:23px; }.skill-card p { line-height:1.65; }.task-choices { display:flex; gap:12px; flex-wrap:wrap; }.locked-panel { background:linear-gradient(135deg,#fffdf6 0 66%,#edf3e9 66%); }.extension-list { display:grid; gap:12px; }.extension-list article { display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:16px; border:1px solid var(--line); background:#edf3e9; }.extension-list small { color:var(--muted); }.extension-list button { grid-row:1 / span 2; grid-column:2; margin:0; }
.practice-panel { min-height:460px; padding:32px clamp(26px,4vw,58px) 42px; }.practice-panel .measure { max-width:980px; margin:0 auto 14px; padding-left:2px; font:12px 'DM Mono'; letter-spacing:.3px; }.practice-panel .practice-question { max-width:980px; margin:0 auto; padding:clamp(25px,3.3vw,44px); border-radius:20px; box-shadow:5px 6px 0 rgba(31,52,66,.12); }.practice-panel .practice-question h2 { max-width:820px; margin:16px 0 28px; font-size:clamp(25px,2.7vw,36px); line-height:1.38; letter-spacing:-.6px; }.practice-panel .options { gap:12px; }.practice-panel .option { min-height:66px; padding:16px 19px; border-radius:14px; font-size:18px; line-height:1.45; transition:border-color .16s,background .16s,transform .16s; }.practice-panel .option:hover,.practice-panel .option:focus-visible { border-color:var(--ink); background:#f5f8ef; transform:translateX(3px); outline:none; }.practice-panel .option span { width:28px; height:28px; margin-right:12px; font-size:12px; }.practice-skills { margin-top:6px; }.practice-skills .skill-card { min-height:185px; }.practice-skills .secondary { margin-top:10px; }.mission-box small { display:block; margin-top:10px; color:#54605c; font-size:11px; line-height:1.55; }
.practice-audio-button{margin:0 0 18px}.speaking-practice,.writing-practice{padding:20px;border:1px solid #cadbd3;border-radius:14px;background:#f5f9f6}.speaking-reference{margin:0;padding:17px 19px;border-left:5px solid var(--lime);border-radius:7px;background:#fff;font-size:23px;font-weight:800;line-height:1.5}.speaking-preview{margin-top:14px}.speaking-preview p{margin:0 0 6px;color:#5e7169}.speaking-preview audio{width:100%;height:36px}.writing-practice .answer-label{margin-top:0}.writing-practice .sub{margin:10px 0 0}.practice-panel .practice-feedback{margin-top:22px}
.dictation-panel{min-height:430px;padding:32px clamp(26px,4vw,58px) 42px;background:linear-gradient(135deg,rgba(237,243,233,.78),transparent 52%)}.dictation-panel .measure{max-width:980px;margin:0 auto 14px;padding-left:2px;font:12px 'DM Mono';letter-spacing:.3px}.dictation-panel .dictation-question{max-width:980px;margin:0 auto;padding:clamp(25px,3.3vw,44px);border-radius:20px;box-shadow:5px 6px 0 rgba(31,52,66,.12)}.dictation-panel .dictation-question h2{max-width:820px;margin:16px 0 28px;font-size:clamp(25px,2.7vw,36px);line-height:1.38;letter-spacing:-.6px}.dictation-panel .dictation-audio{margin:6px 0 15px}.dictation-start{max-width:760px}.dictation-panel .report-score{max-width:780px}.dictation-panel .button-row{margin-top:22px}
.preview-heading { display:flex; justify-content:space-between; gap:22px; align-items:flex-start; }.preview-heading h3 { margin-bottom:10px; }.preview-heading .tip { max-width:700px; margin-bottom:0; }.preview-actions { display:grid; gap:10px; flex:0 0 auto; }.view-switch { display:flex; padding:4px; border:1px solid var(--ink); background:#fffdf6; }.view-switch button { min-width:58px; padding:7px 10px; border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:800; }.view-switch button.active { color:var(--ink); background:var(--lime); }.export-vocabulary { margin:0 !important; padding:8px 10px; font-size:12px; white-space:nowrap; }.vocabulary-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:13px; margin-top:28px; }.vocabulary-card { min-height:290px; padding:16px; border:2px solid var(--ink); background:#edf3e9; box-shadow:3px 3px 0 rgba(31,52,66,.12); }.vocabulary-card:nth-child(3n+2) { background:#fff8e5; }.vocabulary-card:nth-child(3n) { background:#e9f1f4; }.vocabulary-card-head { display:flex; justify-content:space-between; align-items:center; }.vocabulary-card-head > span,.vocabulary-index { color:#b45436; font:11px 'DM Mono'; }.word-sound { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid var(--ink); border-radius:50%; background:#fffdf6; color:var(--ink); font-size:12px; font-weight:800; }.word-sound:hover,.word-sound:focus-visible { background:var(--lime); outline:2px solid var(--ink); outline-offset:2px; }.vocabulary-card h4,.vocabulary-list-row h4 { margin:19px 0 3px; font:700 23px/1.16 'DM Mono',sans-serif; overflow-wrap:anywhere; }.phonetic { margin:0; color:#4d6670; font:italic 13px Georgia,serif; }.word-meaning { margin:12px 0 0; color:#31453d; font-size:14px; font-weight:700; line-height:1.55; }.vocabulary-detail { margin-top:14px; border-top:1px dashed rgba(29,48,40,.42); padding-top:9px; color:#506057; font-size:12px; line-height:1.65; }.vocabulary-detail p { margin:0 0 6px; }.vocabulary-detail small { display:block; color:#69746d; }.vocabulary-list { display:grid; gap:10px; margin-top:28px; }.vocabulary-list-row { display:grid; grid-template-columns:42px minmax(130px,.7fr) minmax(90px,.5fr) minmax(180px,1.4fr); gap:13px; align-items:start; padding:16px; border:1px solid var(--line); background:#fffdf7; }.vocabulary-list-row h4 { display:inline-block; margin:0 7px 3px 0; font-size:18px; }.inline-sound { display:inline-grid; width:25px; height:25px; vertical-align:middle; font-size:10px; }.vocabulary-list-row .word-meaning { margin:0; }.vocabulary-list-row .vocabulary-detail { margin:0; padding:0; border:0; }

/* 个人中心采用“资料卡 + 明确编辑入口”：读取信息时不暴露输入框。 */
.family-page { padding:24px 0 48px; }.family-page-head,.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.family-page-head { padding-bottom:19px; border-bottom:2px solid var(--ink); }.family-page-head h1 { margin:0 0 8px; font-size:36px; }.family-page-head .sub { margin:0; }.account-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }.account-summary,.account-panel { padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--card); }.account-summary { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:end; min-height:164px; }.account-summary h3 { margin:0 0 7px; font-size:21px; }.account-summary p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }.account-summary .account-action,.account-summary .primary { margin:0; white-space:nowrap; }.membership-summary { background:#e7efe8; }.account-panel { max-width:780px; margin:24px auto 0; padding:28px; }.account-panel .settings-form { max-width:540px; margin-top:25px; }.child-list { display:grid; gap:12px; margin-top:22px; }.account-row { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fffdf7; }.account-row h3 { margin:0 0 7px; font-size:20px; }.account-row .sub { margin:0; }.account-row .inline-form { grid-column:1/-1; }.add-child-card { margin-top:14px; padding:18px; border:1px dashed var(--line); border-radius:14px; background:#e7efe8; }.contact-panel { background:linear-gradient(135deg,#fffdf7 0 70%,#e7efe8 70%); }.contact-card { display:grid; grid-template-columns:1fr auto; gap:11px 16px; align-items:center; margin-top:25px; padding:22px; border:2px solid var(--ink); background:#fff; }.contact-card span { color:var(--muted); font-size:12px; }.contact-card strong { font:700 28px 'DM Mono'; }.contact-card .contact-link,.contact-card .secondary { margin:0; text-decoration:none; text-align:center; }.contact-card p { grid-column:1/-1; margin:4px 0 0; color:var(--muted); font-size:13px; }.contact-note { margin-top:15px; padding:15px; border-left:4px solid var(--coral); background:#fff0e8; }.contact-note p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.account-modal-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:28px; background:rgba(19,57,49,.56); backdrop-filter:blur(5px); animation:modal-fade .18s ease-out; }.account-modal { position:relative; width:min(780px,100%); max-height:min(780px,calc(100vh - 56px)); overflow:auto; padding:34px; border:2px solid var(--ink); border-radius:22px; background:var(--paper); box-shadow:10px 12px 0 rgba(19,57,49,.24); animation:modal-rise .2s ease-out; }.account-modal .account-panel { max-width:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; }.account-modal .settings-form { max-width:540px; margin:25px 0 0; }.modal-close { position:absolute; top:18px; right:18px; width:36px; height:36px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); font-size:28px; line-height:28px; cursor:pointer; }.modal-close:hover,.modal-close:focus-visible { background:var(--lime); outline:2px solid var(--ink); outline-offset:2px; }@keyframes modal-fade { from { opacity:0; } to { opacity:1; } }@keyframes modal-rise { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.account-modal .panel-title .text-button { display:none; }
/* 月会员咨询页围绕“扫码即可联系”设计：步骤和二维码保持同一屏，方便电脑端家长拿手机完成操作。 */
.membership-contact-layout { display:grid; grid-template-columns:minmax(0,1fr) 242px; gap:26px; align-items:center; margin-top:25px; padding:24px; border:2px solid var(--ink); background:#fff; }.membership-contact-copy h3 { margin:6px 0 12px; font-size:24px; }.membership-contact-copy ol { display:grid; gap:10px; margin:0; padding-left:23px; color:var(--muted); font-size:14px; line-height:1.65; }.membership-contact-copy li::marker { color:var(--accent); font-family:'DM Mono',monospace; font-weight:700; }.membership-contact-copy li b { color:var(--ink); font-family:'DM Mono',monospace; }.membership-contact-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.membership-contact-actions .contact-link,.membership-contact-actions .secondary { margin:0; text-decoration:none; }.contact-tip { margin:17px 0 0; padding-top:14px; border-top:1px dashed var(--line); color:var(--muted); font-size:12px; line-height:1.7; }.admin-wechat-card { margin:0; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--paper); text-align:center; box-shadow:6px 7px 0 rgba(19,57,49,.12); }.admin-wechat-card a { display:inline-block; color:var(--ink); }.admin-wechat-card img { display:block; width:100%; max-width:208px; aspect-ratio:1; object-fit:cover; border-radius:8px; background:#fff; transition:transform .18s ease; }.admin-wechat-card>a:hover img { transform:scale(1.025); }.admin-wechat-card figcaption { display:grid; gap:5px; margin-top:12px; }.admin-wechat-card figcaption b { font-size:14px; }.admin-wechat-card figcaption span { color:var(--muted); font-size:12px; }.admin-wechat-card figcaption a { color:#1d6e59; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.membership-application{width:100%;margin-top:16px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#f6faf7}.membership-application form{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:10px;align-items:end}.membership-application label{display:grid;gap:5px;font-size:12px;font-weight:700}.membership-application input,.membership-application select{min-width:0;min-height:38px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}.membership-application .primary{grid-column:1/-1;justify-self:start;margin:0}.membership-application p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}@media(max-width:760px){.membership-application form{grid-template-columns:1fr}.membership-application .primary{width:100%}}
@keyframes study-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:760px) { .learning-home,.course-page { padding-top:18px; }.home-hero,.course-hero { min-height:180px; padding:27px 23px; }.home-hero h1,.course-hero h1 { font-size:37px; }.home-stamp,.course-stamp { display:none; }.home-hero::after,.course-hero::after { right:5px; font-size:95px; }.textbook-entry,.learning-board { grid-template-columns:1fr; }.textbook-side { min-height:110px; }.home-status,.account-overview { grid-template-columns:1fr; }.home-status .review-stamp { grid-column:1/-1; }.lesson-note { position:static; border:2px solid var(--ink); }.mode-tabs { justify-content:flex-start; }.mode-tab { flex:0 0 auto; }.audio-grid,.video-grid,.skill-grid { grid-template-columns:1fr; }.extension-list article { grid-template-columns:1fr; }.extension-list button { grid-row:auto; grid-column:auto; }.study-panel { min-height:320px; }.practice-panel { padding:23px 16px 30px; }.practice-panel .practice-question { padding:23px 19px; }.practice-panel .option { min-height:58px; padding:13px 14px; font-size:16px; }.family-page-head,.panel-title,.account-summary,.account-row { grid-template-columns:1fr; display:grid; }.account-summary .account-action,.account-summary .primary { width:100%; }.contact-card { grid-template-columns:1fr; }.contact-card .contact-link,.contact-card .secondary { width:100%; }.membership-contact-layout { grid-template-columns:1fr; padding:19px; }.admin-wechat-card { max-width:260px; justify-self:center; }.membership-contact-actions { display:grid; }.membership-contact-actions .contact-link,.membership-contact-actions .secondary { width:100%; text-align:center; } }
@media (max-width:760px) { .preview-heading { display:grid; }.preview-actions { justify-items:start; }.vocabulary-card-grid { grid-template-columns:1fr; }.vocabulary-list-row { grid-template-columns:32px 1fr; }.vocabulary-list-row > .word-meaning,.vocabulary-list-row > .vocabulary-detail { grid-column:2; }.vocabulary-list-row .vocabulary-detail { margin-top:4px; } }

/* 拓展不是另一套基础题，而是为学有余力的孩子提供的理解、应用、表达挑战。 */
.extension-intro { max-width:940px; background:linear-gradient(135deg,#fffdf7 0 70%,#edf3e9 70%); }
.extension-intro h3 { max-width:650px; }
.extension-path { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:25px 0 4px; color:#3c5148; font-size:13px; font-weight:800; }
.extension-path span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.extension-path i { color:#b45436; font-style:normal; }
.extension-note { margin:17px 0 0; font-size:12px; }
.extension-challenge-panel { max-width:1080px; }
.extension-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:21px; border-bottom:1px solid var(--line); }
.extension-head h3 { margin-bottom:9px; }
.extension-head .tip { margin-bottom:0; }
.extension-head > span { flex:0 0 auto; padding:8px 11px; border-radius:999px; background:#edf3e9; color:#315346; font:12px 'DM Mono'; }
.challenge-stack { display:grid; gap:15px; margin-top:22px; }
.challenge-card { padding:22px; border:1px solid var(--line); border-radius:14px; background:#fffdf7; }
.challenge-card.completed { border-color:#a9c7b6; background:#f5faf3; }
.challenge-card-head { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.challenge-card-head p { margin:0; color:#b45436; font:11px 'DM Mono'; letter-spacing:1px; }
.challenge-card-head span { color:#61766b; font-size:12px; font-weight:800; }
.challenge-card.completed .challenge-card-head span { color:#24704a; }
.challenge-card h4 { margin:15px 0 7px; font-size:23px; }
.challenge-objective { margin:0; color:#53655d; line-height:1.65; }
.challenge-scenario { margin-top:17px; padding:13px 15px; border-left:3px solid #c7d9cc; background:#f3f7f2; }
.challenge-scenario b { color:#3f6958; font-size:12px; }
.challenge-scenario p { margin:5px 0 0; line-height:1.65; }
.challenge-prompt { margin:17px 0 13px; font-size:16px; font-weight:800; line-height:1.55; }
.challenge-options { display:grid; gap:9px; }
.challenge-option { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; transition:background .16s,border-color .16s,transform .16s; }
.challenge-option:hover:not(:disabled),.challenge-option:focus-visible:not(:disabled) { border-color:#527662; background:#f5f9f4; transform:translateX(2px); outline:none; }
.challenge-option:disabled { cursor:default; opacity:.72; }
.challenge-option span { display:grid; place-items:center; flex:0 0 auto; width:23px; height:23px; border-radius:50%; background:#edf3e9; color:#456457; font:11px 'DM Mono'; }
.challenge-writing { display:grid; gap:9px; }
.challenge-writing label { color:#42574d; font-size:13px; font-weight:800; }
.challenge-writing textarea { width:100%; resize:vertical; min-height:94px; padding:12px; border:1px solid #bfcfc3; border-radius:10px; background:#fff; font:inherit; line-height:1.65; }
.challenge-writing textarea:focus { outline:2px solid var(--lime); border-color:#4e7961; }
.challenge-writing .primary { width:max-content; margin-top:4px; }
.challenge-feedback { margin-top:17px; padding:14px 16px; border-radius:10px; border-left:3px solid #9cbba8; background:#eff7ef; }
.challenge-feedback.retry { border-color:#d39375; background:#fff4ed; }
.challenge-feedback p { margin:7px 0 0; color:#526158; font-size:13px; line-height:1.65; }
.challenge-feedback ul { display:grid; gap:4px; margin:11px 0 0; padding-left:19px; color:#526158; font-size:12px; line-height:1.55; }
.challenge-reference { padding-top:9px; border-top:1px dashed #c6d3c9; }
@media (max-width:760px) { .extension-head { display:grid; }.extension-head > span { width:max-content; }.challenge-card { padding:18px; }.challenge-writing .primary { width:100%; } }

/* 电脑端以“课程目录 + 课本工作台”为主，媒体不再被折叠成窄屏卡片。 */
.desktop-learning-workspace { display:grid; grid-template-columns:270px minmax(0,1fr); gap:22px; align-items:start; } .course-rail { position:sticky; top:16px; padding:22px; border:2px solid var(--ink); border-radius:18px; background:#e7efe8; box-shadow:5px 5px 0 rgba(29,48,40,.13); } .course-rail h2 { font-size:23px; line-height:1.25; } .course-rail hr { border:0; border-top:1px solid var(--line); margin:17px 0; } .rail-progress { display:grid; grid-template-columns:32px 1fr; gap:5px 9px; margin-top:17px; align-items:center; font-size:12px; } .rail-progress b { display:grid; place-items:center; width:28px; height:24px; border-radius:6px; background:var(--lime); font:700 11px 'DM Mono'; } .rail-progress span { color:var(--muted); } .rail-chapter { display:grid; grid-template-columns:26px 1fr auto; gap:8px; align-items:center; padding:11px 0; border-bottom:1px solid #cfd8ce; } .rail-chapter:last-of-type { border-bottom:0; } .rail-chapter > span { color:var(--blue); font:11px 'DM Mono'; } .rail-chapter b,.rail-chapter small { display:block; } .rail-chapter b { font-size:13px; line-height:1.35; } .rail-chapter small { margin-top:3px; color:var(--muted); font-size:11px; } .rail-chapter.active b { color:var(--blue); } .compact { padding:6px 8px; font-size:11px; } .rail-tip { margin-top:15px; padding-top:14px; border-top:1px dashed var(--line); color:var(--muted); font-size:12px; line-height:1.55; } .lesson-stage { min-width:0; } .lesson-stage-head,.media-title { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; } .lesson-stage-head { margin:2px 0 18px; padding-bottom:15px; border-bottom:2px solid var(--ink); } .lesson-stage-head h2 { margin:0; font-size:29px; } .media-section,.vocabulary-section { margin:20px 0; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--card); } .media-title h3 { margin:0; font-size:21px; } .media-title > span { color:var(--muted); font:12px 'DM Mono'; } .course-audio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:15px; } .course-audio { padding:14px; border:1px solid var(--line); border-radius:12px; background:#eff4e9; } .course-audio strong,.course-audio small { display:block; } .course-audio strong { min-height:38px; font-size:14px; line-height:1.35; } .course-audio small,.course-video small { margin-top:5px; color:var(--muted); font-size:11px; } .course-audio audio { width:100%; height:35px; margin-top:10px; } .course-video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:15px; } .course-video { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#f7f1e3; } .course-video video { display:block; width:100%; aspect-ratio:16 / 9; background:#172b38; } .course-video strong,.course-video small { display:block; padding:0 11px; } .course-video strong { padding-top:10px; font-size:14px; } .course-video small { padding-bottom:11px; } .vocabulary-section details { margin-top:15px; } .vocabulary-section summary { cursor:pointer; color:var(--blue); font-size:13px; font-weight:800; } .vocabulary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; } .word-card { min-height:78px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; } .word-card span,.word-card b,.word-card small { display:block; } .word-card span { color:var(--coral); font:10px 'DM Mono'; } .word-card b { margin:6px 0 3px; font-size:14px; word-break:break-word; } .word-card small { color:var(--muted); font-size:11px; line-height:1.35; } .skills-desk { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; padding:22px; border:2px solid var(--ink); border-radius:18px; background:var(--lime); } .skills-desk h3 { margin:0 0 6px; font-size:21px; } .skills-desk .sub { margin:0; max-width:530px; color:#3d5048; } .skill-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; min-width:300px; } @media (min-width:900px) { .shell { max-width:1360px; padding-left:32px; padding-right:32px; } } @media (max-width:900px) { .desktop-learning-workspace { grid-template-columns:1fr; } .course-rail { position:static; } .course-audio-grid,.course-video-grid { grid-template-columns:1fr; } .vocabulary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .skills-desk { display:grid; } .skill-actions { min-width:0; justify-content:flex-start; } }

/* 强化内容保持在课程工作台内，以清晰的进度条目替代离开单元后的独立页面。 */
.reinforcement-panel{background:linear-gradient(135deg,#fffefb 0%,#f7faf5 100%)}.reinforcement-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}.reinforcement-head h3{margin:9px 0 10px}.reinforcement-head .tip{max-width:660px;margin:0}.reinforcement-count{display:grid;place-items:center;flex:0 0 82px;min-height:82px;border-radius:12px;color:#1e604b;background:#e5f0e7;font:700 30px 'DM Mono'}.reinforcement-count small{display:block;color:#587268;font:11px 'Noto Sans SC'}.reinforcement-list{display:grid;gap:10px;margin-top:19px}.reinforcement-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;margin:0;padding:15px 16px;border:1px solid #d9e4dc;border-radius:12px;background:#fff}.reinforcement-index{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;color:#8c4b2c;background:#fff0de;font:700 11px 'DM Mono'}.reinforcement-card .eyebrow{margin:0;color:#57736a;font-size:10px}.reinforcement-card h4{margin:5px 0 4px;font-size:16px}.reinforcement-card .sub{margin:0;color:#697b72;font-size:12px}.reinforcement-card .secondary{margin:0;white-space:nowrap}@media(max-width:640px){.reinforcement-head{display:grid}.reinforcement-count{width:82px}.reinforcement-card{grid-template-columns:30px 1fr}.reinforcement-card .secondary{grid-column:2;width:max-content}}
.assessment-ability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.assessment-ability-grid .insight{margin:0}.assessment-ability-grid strong{font-size:24px;color:var(--green)}
.practice-subnav{display:flex;gap:8px;padding:18px 28px 0;background:#fffdf6}.practice-subnav button{padding:9px 16px;border:1px solid #d8e1db;border-radius:8px;background:#fff;color:var(--ink);font-weight:600;cursor:pointer}.practice-subnav button.active{background:#e7f1eb;border-color:#9fbdac;color:#245c47}.stage-next{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;border-top:1px solid #e1e7e2;background:#f7faf8}.stage-next>span{font-size:12px;color:var(--muted)}.stage-next button{font-size:13px;box-shadow:none;border:1px solid #bdcfc4}.assessment-panel .question{padding:22px;border:1px solid #d8e1db;border-radius:12px;box-shadow:none}.assessment-panel .question h2{font-size:22px}@media(max-width:900px){.stage-next{align-items:flex-start;flex-direction:column}.mode-tab{min-width:74px}}
.home-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 34px;background:#fffdf7;border:1px solid var(--line);border-radius:16px}.home-intro h1{margin:7px 0 12px;font-size:clamp(24px,2.6vw,34px);line-height:1.3;letter-spacing:-.5px}.home-intro .sub{margin:0}.home-learner{display:flex;flex-direction:column;gap:9px;text-align:right;color:var(--ink)}.home-learner small{color:var(--muted);font-size:12px}.learning-home .home-status{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 32px}.home-stat{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-height:130px;padding:22px 26px;text-align:left;border:1px solid var(--line);border-radius:14px;background:#fffdf7;transition:background .15s,border-color .15s}.home-stat span{font-size:13px;color:var(--muted)}.home-stat b{font-size:32px;line-height:1.2;color:var(--ink)}.home-stat small{color:var(--muted);font-size:12px}.home-stat:hover{background:#edf4ef;border-color:#8eae9d}.home-stat:focus-visible{outline:3px solid #287e68;outline-offset:3px}.home-task-list{padding:28px 0}.home-task-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;margin:12px 0;background:#fffdf7;border:1px solid var(--line);border-radius:12px}.home-task-row h3{margin:0 0 9px;font-size:18px}.home-task-row .sub{margin:0}@media(max-width:760px){.home-intro{padding:24px;flex-direction:column;align-items:flex-start}.home-learner{text-align:left}.learning-home .home-status{grid-template-columns:1fr}.home-task-row{flex-wrap:wrap}}
.site-nav{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:24px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fffdf7}.site-nav a{padding:9px 18px;border-radius:7px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}.site-nav a:hover{background:#edf4ef;color:var(--ink)}.site-nav a.active{background:var(--lime);color:var(--ink)}.site-nav a:focus-visible{outline:2px solid #287e68;outline-offset:2px}.about-page{padding:28px 0 48px}.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}.about-card{padding:28px;background:#fffdf7;border:1px solid var(--line);border-radius:14px}.about-card h2{margin:0 0 16px;font-size:21px}.about-card p{color:var(--muted);font-size:14px;line-height:1.9}.about-card a{color:var(--blue)}.about-card .about-path{color:var(--ink);font-weight:600}.about-contact{display:flex;align-items:center;gap:22px;justify-content:space-between}.about-contact img{display:block;width:150px;max-width:100%;height:auto;border-radius:8px}.about-contact>a{flex:0 0 150px}@media(max-width:760px){.site-nav{margin-right:8px;gap:2px}.site-nav a{padding:8px 10px}.about-grid{grid-template-columns:1fr}.about-card{padding:22px}.about-contact{flex-wrap:wrap}.masthead .brand{font-size:18px}.masthead .profile small{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* 账户页不复用学习宣传区，设置入口采用紧凑、轻量的卡片。 */
.family-page{padding-top:28px}.family-page-head{align-items:center;padding:26px 30px;background:#fffdf7;border:1px solid var(--line);border-radius:14px}.family-page-head h1{font-size:30px;line-height:1.3;white-space:nowrap;margin:6px 0 9px}.family-page-head .eyebrow{margin:0}.family-page-head .text-button{white-space:nowrap;font-size:13px}.family-page .account-overview{gap:18px;margin-top:22px}.family-page .account-summary{min-height:150px;padding:26px;border-radius:14px;align-items:center;grid-template-columns:minmax(0,1fr) auto}.family-page .account-summary h3{font-size:20px}.family-page .account-summary .eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:1px}.family-page .account-summary p{overflow-wrap:anywhere}.family-page .account-summary button{padding:11px 16px;border:1px solid #b8c7bd;border-radius:9px;box-shadow:none;font-size:13px;white-space:nowrap}.family-page .account-summary .primary{border-color:#c7da77;background:#e5efb9}.family-page .account-summary button:hover{background:#eaf2ed}.family-page .account-summary button:focus-visible{outline:2px solid #287e68;outline-offset:3px}@media(max-width:1000px){.family-page .account-summary{grid-template-columns:1fr;align-items:start}.family-page .account-summary button{justify-self:start;width:auto}}@media(max-width:760px){.family-page-head{display:flex;padding:22px;gap:12px}.family-page-head h1{font-size:26px}.family-page .account-summary{padding:22px}.family-page .account-overview{grid-template-columns:1fr}}
.records-page{padding:28px 0 48px}.records-filters{display:flex;align-items:end;flex-wrap:wrap;gap:18px;margin:22px 0}.records-filters label{display:grid;gap:8px;font-size:13px;color:var(--muted)}.records-filters select{min-width:200px;max-width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:#fffdf7;color:var(--ink);font:inherit}.records-filters .muted{margin-left:auto;align-self:center;font-size:13px}.records-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fffdf7}.records-table{border-collapse:collapse;width:100%;text-align:left;font-size:14px}.records-table th{background:#edf4ef;color:var(--muted);font-weight:600}.records-table th,.records-table td{padding:18px 22px;border-bottom:1px solid var(--line)}.records-table tr:last-child td{border-bottom:0}.records-table small{display:block;margin-top:6px;color:var(--muted);font-size:11px}.records-table button{white-space:nowrap;padding:9px 14px;border:1px solid #b8c7bd;border-radius:8px;box-shadow:none;font-size:13px}.records-page .assessment-report-panel{margin-top:22px}.records-filters select:focus-visible{outline:2px solid #287e68;outline-offset:2px}@media(max-width:760px){.records-filters{align-items:stretch;flex-direction:column}.records-filters .muted{margin-left:0;align-self:flex-start}.records-table{min-width:680px}.site-nav a{padding:8px;font-size:12px}}
.records-filters select,.records-filters [data-refresh-records]{box-sizing:border-box;height:44px}.records-filters [data-refresh-records]{margin:0;padding:0 18px;align-self:flex-end;border:1px solid #b8c7bd;border-radius:8px;box-shadow:none;font-size:14px;white-space:nowrap}.records-filters .muted{align-self:flex-end;display:flex;align-items:center;min-height:44px}@media(max-width:760px){.records-filters [data-refresh-records]{align-self:flex-start}.records-filters .muted{align-self:flex-start}}
.learning-progress-group{margin:14px 0;border:1px solid #dce5df;border-radius:12px;background:#fffdf7;overflow:hidden}.learning-progress-group>summary{cursor:pointer;padding:20px 24px;color:var(--ink);font-weight:600}.learning-progress-group>summary small{float:right;color:var(--muted);font-size:13px;font-weight:400}.learning-progress-items{padding:0 24px}.learning-progress-items .home-task-row{margin:0;padding:18px 0;border:0;border-top:1px solid #e6ece7;border-radius:0;background:transparent;box-shadow:none;gap:20px}.learning-progress-items h3{font-size:16px;line-height:1.6;overflow-wrap:anywhere}.learning-progress-items button{flex-shrink:0;padding:9px 14px;border:1px solid #c6d5cb;border-radius:8px;box-shadow:none;font-size:13px}.learning-state{color:#287e68;font-weight:600}@media(max-width:760px){.learning-progress-group>summary small{float:none;display:block;margin-top:8px}.learning-progress-items .home-task-row{align-items:flex-start;flex-direction:column}}
.feedback-history-item{padding:20px 0;border-top:1px solid #dce5df}.feedback-history-item h4{margin:0 0 8px;font-size:17px}.feedback-history-item .secondary{padding:8px 14px;font-size:13px;box-shadow:none;border:1px solid #cad7cf}.feedback-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.account-modal textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid #cad7cf;border-radius:8px;background:white;color:var(--ink);font:inherit;resize:vertical}.feedback-history-item .text-button{display:block;text-align:left;overflow-wrap:anywhere}

/* 开通会员弹窗使用紧凑布局；矮屏由遮罩整体滚动，避免弹窗内嵌滚动条。 */
.membership-modal-backdrop { overflow-y:auto; align-items:safe center; }
.membership-modal-backdrop .account-modal { width:min(960px,100%); max-height:none; overflow:visible; padding:20px; }
.membership-modal-backdrop .panel-title { padding-right:38px; }
.membership-modal-backdrop .panel-title .sub { margin:8px 0 0; font-size:13px; }
.membership-modal-backdrop .membership-contact-layout { margin-top:12px; padding:14px; gap:22px; grid-template-columns:minmax(0,1fr) 210px; }
.membership-modal-backdrop .membership-contact-copy h3 { font-size:22px; margin:4px 0 10px; }
.membership-modal-backdrop .panel-kicker { margin:0; font-size:11px; }
.membership-modal-backdrop .membership-contact-copy ol { gap:6px; font-size:13px; }
.membership-modal-backdrop .membership-contact-actions { margin-top:12px; gap:8px; }
.membership-modal-backdrop .membership-contact-actions .primary,
.membership-modal-backdrop .membership-contact-actions .secondary { padding:8px 12px; font-size:13px; }
.membership-modal-backdrop .membership-application { margin-top:4px; padding:12px; }
.membership-modal-backdrop .form-message:empty { display:none; }
.membership-modal-backdrop .contact-tip { margin-top:12px; padding-top:10px; }
.membership-modal-backdrop .contact-note { margin-top:12px; padding:10px 12px; font-size:13px; }
.membership-modal-backdrop .admin-wechat-card figcaption b { overflow-wrap:anywhere; font-size:13px; }
@media(max-width:760px) {
  .membership-modal-backdrop { padding:12px; }
  .membership-modal-backdrop .account-modal { padding:20px 16px; }
  .membership-modal-backdrop .membership-contact-layout { grid-template-columns:1fr; padding:14px; gap:16px; }
  .membership-modal-backdrop .membership-contact-actions { display:flex; }
  .membership-modal-backdrop .membership-contact-actions .contact-link,
  .membership-modal-backdrop .membership-contact-actions .secondary { width:auto; }
  .membership-modal-backdrop .admin-wechat-card { width:210px; }
}

.pronunciation-status { margin:8px 0 12px; padding:10px 14px; border-radius:8px; background:#edf4ef; color:var(--ink); font-size:13px; }
.pronunciation-status[hidden] { display:none; }

.service-notice{padding:12px 16px;background:#fff0e8;border:1px solid var(--line);border-radius:10px;font-size:13px}.service-notice button{margin-left:8px;border:0;background:transparent;color:var(--blue);text-decoration:underline}
.dictation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.dictation-heading .type{margin:0}.word-count{padding:8px 12px;border-radius:999px;background:#dff06b;color:#1d3028;font-size:13px;white-space:nowrap}.dictation-picture{display:grid;place-items:center;width:min(100%,310px);min-height:174px;margin:0 0 18px;border:1px solid #d9e8dd;border-radius:16px;background:#edf5ef;overflow:hidden}.dictation-picture img{display:block;width:100%;height:174px;object-fit:cover}.dictation-picture span{color:#69746d;font-size:13px}.dictation-question .dictation-audio{display:none}.dictation-playback{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0}.dictation-playback button{display:inline-flex;align-items:center;gap:8px}.dictation-playback kbd,.dictation-question kbd{padding:2px 5px;border:1px solid #bccfc1;border-radius:4px;background:#f6faf7;font:11px 'DM Mono',monospace}.vocabulary-picture{display:block;width:100%;height:118px;margin-top:13px;border-radius:10px;object-fit:cover;background:#edf5ef}@media(max-width:760px){.dictation-heading{align-items:flex-start;flex-direction:column}.dictation-playback button{flex:1 1 auto}}
.sentence-slot-help{margin:0 0 8px;font-size:13px}.sentence-answer-row{display:flex;align-items:stretch;gap:12px}.sentence-slots{display:flex;flex:1;flex-wrap:wrap;min-width:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff}.sentence-slot{display:flex;flex:1 1 105px;min-width:90px;flex-direction:column;justify-content:center;gap:3px;padding:7px 10px;border-right:1px solid #c8d7cd;border-bottom:1px solid #c8d7cd}.sentence-slot span{color:#62776b;font:11px 'DM Mono',monospace}.sentence-slot input{width:100%;min-width:0;padding:2px 0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:18px;outline:0}.sentence-slot:focus-within{background:#f4f8d9;box-shadow:inset 0 0 0 2px #acc855}.sentence-slot-error{margin:8px 0 0;color:#a44336;font-size:13px}.sentence-slot-error[hidden]{display:none}@media(max-width:760px){.sentence-answer-row{display:grid}.sentence-answer-row>button{justify-self:start}}
.skill-card-head{display:flex;align-items:center;gap:11px}.skill-card-icon{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid currentColor;border-radius:11px;background:#fffdf7;color:#285b4c}.skill-card-icon svg{width:22px;height:22px}.skill-card-head>span:last-child{font:700 12px 'DM Mono',monospace}.practice-skills .skill-card h4{margin-top:16px}
.writing-pronunciation{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:15px}.writing-pronunciation .secondary{margin:0}.writing-pronunciation span{color:#5e7169;font-size:13px}
.dictation-toolbar{display:flex;justify-content:flex-start;margin:0 0 16px}.dictation-toolbar .dictation-back,.dictation-start .dictation-back{margin:0}.dictation-start .dictation-back{margin-bottom:20px}
.dictation-mode-switch{display:flex;flex-wrap:wrap;gap:8px;max-width:980px;margin:0 auto 17px}.dictation-mode-switch button{padding:9px 14px;border:1px solid #c9d8cb;border-radius:999px;background:#fff;color:#315445;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.dictation-mode-switch button.active{border-color:#285b4a;background:#285b4a;color:#fff}.dictation-mode-switch button:focus-visible{outline:3px solid #dff06b;outline-offset:2px}
.dictation-callout{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:20px 0;padding:16px;border:1px solid #bfd2c3;border-radius:12px;background:#eef7ed}.dictation-callout>div{flex:1 1 240px}.dictation-callout b{color:#244f43}.dictation-callout p{margin:4px 0 0;color:#526a5e;font-size:13px}.dictation-callout button{white-space:nowrap}@media(max-width:760px){.dictation-callout button{width:100%;white-space:normal}}

/* Dictation shares the spelling exercise card, type scale and answer panel. */
.practice-panel.dictation-panel{background:transparent;min-height:460px}
.dictation-panel .dictation-toolbar{max-width:980px;margin:0 auto 14px}
.dictation-panel .dictation-mode-switch{max-width:980px;margin:0 auto 20px}
.dictation-panel .dictation-picture{position:relative;display:block;width:min(100%,300px);height:180px;min-height:0;margin:0 0 22px}
.dictation-panel .dictation-picture img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center}
.dictation-panel .dictation-picture>span{display:grid;place-items:center;height:100%}
.dictation-writing .dictation-playback{margin:0 0 10px}
.dictation-writing .dictation-playback button{margin:0}
.dictation-writing .answer-label{margin:16px 0 7px}
.dictation-writing .answer-row input{font-size:inherit}
.dictation-writing .sub{margin:6px 0 0}
.dictation-panel .practice-feedback{margin-top:22px}
@media(max-width:760px){
 .practice-panel.dictation-panel{padding:23px 16px 30px}
 .practice-panel.dictation-panel .dictation-question{padding:23px 19px}
 .dictation-panel .dictation-picture{width:min(100%,260px);height:160px}
}