:root { font-family: system-ui, -apple-system, "Microsoft YaHei", sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 48px; }
.header { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.header-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.module-home { padding-top:7vh; }.module-home h1 { margin-bottom:10px; }.module-intro { max-width:680px; margin:0 0 28px; color:#6d7b93; line-height:1.8; }.module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.module-card { min-height:220px; padding:26px; border:1px solid #e2e8f2; border-radius:22px; background:#fff; box-shadow:0 12px 34px #17345f12; text-align:left; cursor:pointer; transition:transform .18s, box-shadow .18s; }.module-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px #17345f1d; }.module-card strong,.module-card small { display:block; }.module-card strong { margin:22px 0 7px; color:#17233d; font-size:27px; }.module-card small { color:#72809a; font-size:14px; line-height:1.6; }.module-icon { display:grid; width:58px; height:58px; place-items:center; border-radius:16px; color:#fff; font-size:25px; font-weight:900; }.vocabulary-module .module-icon { background:#5668e8; }.writing-module .module-icon { background:#16916b; }.sentence-module .module-icon { background:#d06a28; }
.portable-panel { margin-top:22px; padding:22px; border:1px solid #dfe6f2; border-radius:20px; background:#fff; box-shadow:0 8px 28px #1b396b0b; }.portable-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.portable-heading h2 { margin:0; color:#202d48; font-size:21px; }.portable-description { margin:14px 0; color:#66748d; font-size:14px; line-height:1.75; }.offline-badge { flex:none; padding:6px 10px; border-radius:999px; background:#f0f2f6; color:#6c7890; font-size:12px; font-weight:800; }.offline-badge.ready { background:#e8f7ef; color:#17743b; }.offline-badge.working { background:#fff4d9; color:#936800; }.offline-progress { height:7px; overflow:hidden; border-radius:99px; background:#edf0f5; }.offline-progress span { display:block; width:0; height:100%; background:#16916b; transition:width .2s; }.offline-status { min-height:20px; margin:9px 0 14px; color:#758198; font-size:13px; }.portable-actions { display:flex; flex-wrap:wrap; gap:9px; }.portable-button { padding:11px 14px; }
.list-picker { display:flex; align-items:end; gap:16px; margin:0 0 18px; padding:15px 17px; background:#fff; border:1px solid #e5eaf2; border-radius:14px; }.list-picker-main { flex:0 0 min(390px, 100%); }.list-picker label { display:block; }.list-picker select { display:block; width:100%; margin-top:7px; padding:11px 12px; border:1px solid #dce3ef; border-radius:9px; background:#fff; font-size:16px; cursor:pointer; }.list-picker span { color:#72809a; font-size:13px; padding-bottom:12px; }.list-buttons { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }.list-button { border:1px solid #dbe2ed; border-radius:999px; padding:7px 11px; background:#f7f9fc; color:#526079; cursor:pointer; font-weight:700; }.list-button.active { border-color:#5668e8; background:#5668e8; color:#fff; }
.eyebrow { margin:0 0 6px; color:#6b7a95; font-size:12px; letter-spacing:2px; }
h1 { margin:0 0 24px; font-size:clamp(28px, 6vw, 42px); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.stats div,.card { background:white; border:1px solid #e5eaf2; border-radius:18px; box-shadow:0 8px 28px #1b396b0b; }
.stats div { padding:16px; }.stats strong,.stats span { display:block; }.stats strong { font-size:25px; }.stats span { color:#72809a; font-size:13px; margin-top:4px; }
.wrong-book { margin:0 0 18px; padding:18px; border:1px solid #f0d4d4; border-radius:16px; background:#fffafa; }.wrong-book-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }.wrong-book-heading h2 { margin:0; color:#8f3030; font-size:20px; }.wrong-book-heading span { color:#9a6b6b; font-size:12px; }.wrong-book-list { display:grid; gap:9px; max-height:360px; overflow:auto; }.wrong-book-item { padding:11px 13px; border-radius:10px; background:#fff; border:1px solid #f0dddd; }.wrong-book-item strong,.wrong-book-item span { display:block; }.wrong-book-item strong { color:#752b2b; line-height:1.5; }.wrong-book-item span { margin-top:4px; color:#765f5f; font-size:13px; line-height:1.5; }.wrong-book-empty { margin:0; color:#7a879c; }
.card { padding:22px; }.progress { height:8px; background:#edf0f5; border-radius:99px; overflow:hidden; }.progress span { display:block; height:100%; width:0; background:#5d70f5; transition:width .25s; }
.status { min-height:24px; color:#64728a; }.play { width:100%; border:0; border-radius:14px; background:#edf1ff; color:#3147be; font-weight:700; font-size:18px; padding:17px; cursor:pointer; }
.start-audio { width:100%; margin-bottom:10px; border:0; border-radius:14px; background:#5668e8; color:#fff; font-size:17px; font-weight:800; padding:16px; cursor:pointer; }
.audio-player { display:block; width:100%; height:42px; margin-top:10px; }
.mode-title { margin:18px 0 9px; color:#263450; font-size:19px; font-weight:800; }.question { margin:0 0 14px; padding:18px; border-left:4px solid #6072ed; background:#f5f7ff; color:#223050; font-size:22px; font-weight:750; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }.form-grid.single-field { grid-template-columns:1fr; } label { color:#66748d; font-size:14px; } input,textarea { display:block; width:100%; margin-top:7px; padding:14px; border:1px solid #dce3ef; border-radius:10px; font:inherit; font-size:17px; outline-color:#6475e9; } textarea { min-height:52px; resize:vertical; line-height:1.65; } textarea.long-answer { min-height:180px; }
.actions { display:flex; gap:10px; }.actions button,.ghost { border:0; border-radius:10px; padding:12px 17px; cursor:pointer; font-weight:700; }.primary { color:white; background:#5668e8; }.ghost { color:#596a86; background:#eef1f5; }
.part-of-speech { display:inline-block; margin-left:9px; padding:2px 7px; border-radius:6px; background:#e9edff; color:#4b5fc7; font-size:13px; font-weight:800; }
button:disabled { opacity:.45; cursor:not-allowed; }.feedback,.answer { margin-top:17px; padding:14px; border-radius:11px; line-height:1.7; }.feedback.ok { background:#eaf8ef; color:#17743b; }.feedback.bad { background:#fff0f0; color:#a83232; }.answer { background:#f7f8fb; }.hidden { display:none; }.tip { color:#7a879c; font-size:13px; line-height:1.7; }
@media (max-width:760px) { .module-grid { grid-template-columns:1fr; }.module-card { min-height:175px; }.stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .form-grid { grid-template-columns:1fr; }.header { align-items:stretch; flex-direction:column; }.header-actions { justify-content:flex-start; }.header .ghost { align-self:flex-start; }.list-picker { align-items:stretch; flex-direction:column; gap:4px; }.list-picker-main { flex-basis:auto; }.list-picker span { padding:0; }.wrong-book-heading { align-items:flex-start; flex-direction:column; }.portable-heading { align-items:flex-start; flex-direction:column; }.portable-actions { display:grid; grid-template-columns:1fr; }.portable-button { width:100%; } }