:root{--bg1:#f6f8ff;--bg2:#fff8ef;--card:#fff;--text:#23304a;--muted:#71809b;--primary:#6c63ff;--primary2:#8b84ff;--green:#168657;--red:#c83f4b;--shadow:0 12px 30px rgba(55,63,96,.10);--radius:22px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 10% 10%,rgba(108,99,255,.10),transparent 25%),radial-gradient(circle at 90% 15%,rgba(255,186,73,.14),transparent 28%),linear-gradient(135deg,var(--bg1),var(--bg2))}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.72}.app{max-width:1120px;margin:auto;padding:22px 18px 48px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);padding:18px 20px;border-radius:26px;box-shadow:var(--shadow);margin-bottom:22px;position:sticky;top:10px;z-index:20}.brand{display:flex;align-items:center;gap:12px}.avatar{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#9b8cff);color:#fff;font-size:24px}.brand h1{margin:0;font-size:20px}.brand small,.section-title span{color:var(--muted)}.stats,.btn-row{display:flex;gap:10px;flex-wrap:wrap}.stats{justify-content:flex-end}.pill{background:#f5f6ff;border:1px solid #ececff;border-radius:999px;padding:9px 13px;font-size:13px;font-weight:700;white-space:nowrap}.pill strong{color:var(--primary);margin-left:4px}.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-bottom:20px}.hero-main,.hero-side,.card,.question-card{background:rgba(255,255,255,.95);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-main{padding:30px;position:relative;overflow:hidden}.hero-main:after{content:"★";position:absolute;right:24px;top:8px;font-size:110px;color:rgba(108,99,255,.08);transform:rotate(12deg)}.hero h2{font-size:30px;margin:0 0 10px}.hero p{margin:0;color:var(--muted);line-height:1.7}.hero-side{padding:24px;display:flex;flex-direction:column;justify-content:center}.progress-title{display:flex;justify-content:space-between;font-weight:700;margin-bottom:9px}.progress{height:12px;border-radius:999px;background:#edf0f7;overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--primary),#9e91ff);transition:.35s}.hint{margin:16px 0;color:var(--muted);font-size:13px;line-height:1.65;background:#f8f9fc;padding:12px 14px;border-radius:14px}.hint.compact{margin-bottom:0}.section-title{display:flex;justify-content:space-between;align-items:end;margin:26px 4px 12px}.section-title h3{margin:0;font-size:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mode-card{border:0;text-align:left;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--shadow);min-height:150px;transition:.18s}.mode-card:hover{transform:translateY(-3px)}.mode-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#f3f2ff;font-size:25px}.mode-card h4{margin:14px 0 7px;font-size:17px}.mode-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.card{padding:24px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panel-head h2{margin:0}.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:800}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.btn.secondary{background:#f1f3f9;color:var(--text)}.btn.danger{background:#fff0f1;color:var(--red)}.learn-wrap{max-width:760px;margin:auto}.question-card{padding:30px;min-height:450px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.mode-label{color:var(--primary);font-weight:800;background:#f0efff;padding:7px 12px;border-radius:999px;font-size:13px;margin-bottom:18px}.cn{font-size:28px;font-weight:900;margin:6px 0 12px}.prompt{color:var(--muted);margin:0 0 12px}.speaker{width:54px;height:54px;border-radius:50%;border:0;background:#eef6ff;font-size:24px;margin:8px}.answer{width:min(430px,100%);border:2px solid #e5e8f0;border-radius:16px;padding:14px 16px;text-align:center;font-size:19px;outline:none}.answer:focus{border-color:#aaa5ff;box-shadow:0 0 0 4px rgba(108,99,255,.09)}.submit{margin-top:12px;min-width:150px}.feedback{min-height:76px;margin-top:18px;font-weight:800;font-size:17px;line-height:1.55}.feedback.ok{color:var(--green)}.feedback.bad{color:var(--red)}.answer-word{font-size:27px;font-weight:900}.answer-meaning{color:var(--text);font-size:20px}.options,.mole-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(620px,100%);margin-top:10px}.option,.mole{border:2px solid #e7e9f2;background:#fff;border-radius:18px;padding:18px 12px;font-weight:800;min-height:64px}.mole{min-height:110px;border:0;border-radius:50% 50% 20px 20px;background:#f6f2e7}.correct{border-color:#8cddb9!important;background:#eafaf3!important;color:#167a4f!important}.wrong{border-color:#ffabb2!important;background:#fff0f1!important;color:#c63f4b!important}.chunk-answer{min-height:60px;width:min(620px,100%);padding:12px;border:2px dashed #dcd9ff;border-radius:16px;font-size:25px;font-weight:900;color:var(--primary);margin:8px}.chunks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;width:min(650px,100%);margin:12px}.chunk{border:2px solid #dedcff;background:#f7f6ff;color:#443ac5;border-radius:15px;padding:13px 17px;font-size:20px;font-weight:900}.chunk.used{visibility:hidden}.match-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;margin-top:10px}.match-card{min-height:92px;border:2px solid #e7e9f2;background:#fff;border-radius:16px;padding:10px;font-weight:800}.match-card.selected{border-color:#837bff;background:#f2f1ff}.match-card.matched{visibility:hidden}.word-table{width:100%;border-collapse:separate;border-spacing:0 8px}.word-table th{text-align:left;color:var(--muted);font-size:12px;padding:0 10px}.word-table td{background:#f8f9fc;padding:11px 10px;font-size:13px}.tag{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;background:#eef0ff}.empty{color:var(--muted);padding:30px;text-align:center}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#263048;color:#fff;padding:11px 16px;border-radius:999px;z-index:1000;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1}.star{position:fixed;left:50%;top:45%;font-size:60px;pointer-events:none;z-index:999;animation:pop .8s ease forwards}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}45%{transform:translate(-50%,-70%) scale(1.35);opacity:1}100%{transform:translate(-50%,-120%) scale(.8);opacity:0}}.footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:24px}
@media(max-width:820px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.match-board{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.app{padding:12px 10px 28px}.topbar{align-items:flex-start;position:static;padding:14px}.stats{gap:6px}.pill{padding:7px 9px;font-size:12px}.brand small{display:none}.hero-main{padding:22px}.hero h2{font-size:24px}.grid{grid-template-columns:1fr}.question-card{padding:22px 14px;min-height:430px}.options,.mole-grid{grid-template-columns:1fr}.cn{font-size:24px}.word-table th:nth-child(3),.word-table td:nth-child(3){display:none}}