:root{--bg1:#fff7ed;--bg2:#eef9ff;--ink:#2b2d42;--muted:#6b7280;--brand:#ff8c42;--brand2:#4cc9f0;--green:#57cc99;--card:#fff;--shadow:0 10px 30px rgba(43,45,66,.12)}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:PingFang SC,Microsoft YaHei,Segoe UI,system-ui,sans-serif;color:var(--ink);background:linear-gradient(160deg,var(--bg1),var(--bg2));min-height:100vh}.page{max-width:880px;margin:0 auto;padding:16px 16px 40px}.topbar{justify-content:space-between;padding:10px 4px}.brand,.topbar{display:flex;align-items:center}.brand{gap:12px}.logo{font-size:38px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.brand-title{font-weight:800;font-size:20px}.brand-sub{font-size:12px;color:var(--muted)}.settings-btn{border:none;background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s}.settings-btn:hover{transform:translateY(-2px)}.hero{text-align:center;padding:22px 10px 8px}.hero h1{font-size:30px;margin:8px 0;line-height:1.3}.hero .hl{color:var(--brand)}.hero p{color:var(--muted);max-width:600px;margin:0 auto;font-size:15px}.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}.badges span{background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;box-shadow:var(--shadow)}.chat-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);margin-top:18px;overflow:hidden}.chat-card,.messages{display:flex;flex-direction:column}.messages{padding:18px;height:46vh;min-height:320px;overflow-y:auto;gap:14px}.bubble-row{display:flex;align-items:flex-end;gap:8px}.bubble-row.user{justify-content:flex-end}.avatar{font-size:26px;width:40px;height:40px;display:grid;place-items:center;background:#fff3e6;border-radius:50%;flex:none}.avatar.user{background:#e6f7ff}.bubble{max-width:74%;padding:10px 15px;border-radius:18px;font-size:15px;line-height:1.55}.bubble p{margin:0 0 4px}.bubble p:last-child{margin-bottom:0}.bubble.assistant{background:#f1f6ff;border-bottom-left-radius:6px}.bubble.user{background:linear-gradient(135deg,var(--brand),#ffb072);color:#fff;border-bottom-right-radius:6px}.bubble.typing{display:flex;gap:5px}.bubble.typing span{width:8px;height:8px;background:#9bb4d6;border-radius:50%;animation:blink 1.2s infinite both}.bubble.typing span:nth-child(2){animation-delay:.2s}.bubble.typing span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}.quick{display:flex;flex-wrap:wrap;gap:8px;padding:4px 14px 12px}.quick button{border:1.5px solid #ffe2c7;background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;transition:all .15s}.quick button:hover:not(:disabled){background:#fff3e6;transform:translateY(-2px)}.quick button:disabled{opacity:.5;cursor:not-allowed}.composer{display:flex;gap:10px;padding:14px;border-top:1px solid #f0f0f0}.composer input{flex:1 1;border:1.5px solid #e5e7eb;border-radius:999px;padding:12px 18px;font-size:15px;outline:none;transition:border .15s}.composer input:focus{border-color:var(--brand2)}.composer button{border:none;background:linear-gradient(135deg,var(--brand2),#4895ef);color:#fff;border-radius:999px;padding:0 22px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s}.composer button:hover:not(:disabled){transform:translateY(-2px)}.composer button:disabled{opacity:.5;cursor:not-allowed}.speak-btn{margin-top:8px;border:none;background:#e6f0ff;color:#2c6fdb;border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer;transition:background .15s}.speak-btn:hover{background:#d4e6ff}.bubble.speaking{box-shadow:inset 0 0 0 2px #4cc9f0}.practice-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);margin-top:18px;padding:20px 18px}.practice-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.practice-head h2{font-size:18px;margin:0}.accent-toggle{display:flex;gap:6px}.accent-toggle button{border:1.5px solid #e5e7eb;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}.accent-toggle button.on{background:var(--brand2);color:#fff;border-color:var(--brand2)}.practice-tip{color:var(--muted);font-size:13px;margin:10px 0 14px}.word-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.word-chips button{border:1.5px solid #d6f0e6;background:#f3fbf7;color:var(--ink);border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer}.word-chips button.on{background:var(--green);color:#fff;border-color:var(--green)}.practice-target{display:flex;gap:8px;flex-wrap:wrap}.practice-target input{flex:1 1;min-width:160px;border:1.5px solid #e5e7eb;border-radius:14px;padding:11px 16px;font-size:15px;outline:none}.practice-target input:focus{border-color:var(--brand2)}.practice-target .listen,.practice-target .record{border:none;border-radius:14px;padding:0 18px;font-size:14px;font-weight:600;cursor:pointer;color:#fff}.practice-target .listen{background:linear-gradient(135deg,#4cc9f0,#4895ef)}.practice-target .record{background:linear-gradient(135deg,#ff8c42,#ff6b6b)}.practice-target .record.stop{background:linear-gradient(135deg,#ef476f,#c1121f);animation:pulse 1s infinite}.practice-target button:disabled{opacity:.45;cursor:not-allowed}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.listening-hint{margin-top:12px;color:#ef476f;font-size:14px;text-align:center}.result{margin-top:16px;display:flex;gap:14px;align-items:center;background:#f7fbff;border-radius:16px;padding:14px 16px}.result-emoji{font-size:34px}.result-score{font-weight:800;font-size:16px}.result-text{color:var(--ink);font-size:14px;margin-top:2px}.result-heard{color:var(--muted);font-size:12px;margin-top:4px}.result.stars-3{background:#f0fff6}.practice-warn,.result.stars-0{background:#fff5f5}.practice-warn{margin-top:12px;font-size:12px;color:#c1121f;border-radius:10px;padding:8px 12px}.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:20px;line-height:1.6}.modal-mask{position:fixed;inset:0;background:rgba(20,25,40,.45);display:grid;place-items:center;padding:16px;z-index:50}.modal{background:#fff;border-radius:20px;padding:24px;width:100%;max-width:440px;box-shadow:var(--shadow);max-height:88vh;overflow-y:auto}.modal h2{margin:0 0 16px}.modal label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}.modal input,.modal select{width:100%;border:1.5px solid #e5e7eb;border-radius:12px;padding:10px 12px;font-size:14px;outline:none}.modal input:focus,.modal select:focus{border-color:var(--brand2)}.divider{margin:20px 0 4px;font-size:13px;font-weight:700;color:var(--ink);border-top:1px dashed #e5e7eb;padding-top:14px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-actions button{border:none;border-radius:999px;padding:10px 20px;font-size:14px;cursor:pointer}.modal-actions .ghost{background:#f1f5f9;color:var(--ink)}.modal-actions .primary{background:linear-gradient(135deg,var(--green),#38a3a5);color:#fff;font-weight:600}.hint{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}@media (max-width:600px){.hero h1{font-size:24px}.bubble{max-width:82%}}.tabs{display:flex;justify-content:center;flex-wrap:wrap;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--shadow);max-width:520px;margin:8px auto 4px}.tabs button{flex:1 1;min-width:100px;border:none;background:transparent;border-radius:999px;padding:10px 14px;font-size:14px;cursor:pointer;color:var(--muted);transition:all .15s}.tabs button.on{background:linear-gradient(135deg,var(--brand2),#4895ef);color:#fff;font-weight:600}.chat-toolbar{padding:10px 16px 0}.toggle,.toggle-row{display:flex;align-items:center;font-size:13px;color:var(--muted);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.toggle input,.toggle-row input{margin-right:8px}.mic-btn{border:none;background:#fff3e6;border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer;flex:none;transition:transform .15s}.mic-btn:hover:not(:disabled){transform:scale(1.08)}.mic-btn.active{background:#ffe0e0;animation:pulse 1s infinite}.progress-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);margin-top:18px;padding:20px 18px}.progress-summary{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:16px}.progress-ring{width:100px;height:100px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--pct, 0) * 1%),#eef2f7 0);display:grid;place-items:center;margin-right:20px}.ring-pct{font-size:22px;font-weight:800;color:var(--green)}.ring-label{font-size:11px;color:var(--muted)}.progress-stats{display:flex;flex-wrap:wrap;justify-content:center;margin-top:8px}.progress-stats div{text-align:center;margin:0 12px}.progress-stats strong{display:block;font-size:22px;color:var(--ink)}.progress-stats span{font-size:12px;color:var(--muted)}.progress-meta p{margin:4px 0;font-size:14px}.progress-desc{color:var(--muted);font-size:13px;background:#f8fafc;padding:10px 14px;border-radius:12px;margin:12px 0}.unit-block{margin-top:16px;border-top:1px solid #f0f0f0;padding-top:12px}.unit-block h3{font-size:15px;margin:0 0 8px;display:flex;align-items:center;flex-wrap:wrap;justify-content:center}.unit-theme{color:var(--muted);background:#f1f5f9}.current-badge,.unit-theme{font-size:11px;padding:2px 8px;border-radius:999px;margin-left:8px;font-weight:400}.current-badge{background:var(--brand);color:#fff}.topic-list{list-style:none;padding:0;margin:0}.topic-item{display:flex;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:10px;margin-bottom:4px;font-size:13px}.topic-item.mastered{background:#f0fff6}.topic-item.weak{background:#fff5f5}.topic-item.learning{background:#f0f7ff}.topic-status{width:24px;flex:none}.topic-name{flex:1 1;min-width:140px}.topic-cat{font-size:11px;color:var(--muted);background:#fff;padding:2px 8px;border-radius:999px;margin-left:8px}.topic-note{width:100%;font-size:11px;color:#c1121f;margin-left:24px;margin-top:2px}.progress-actions{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px}.progress-actions button{border:none;background:linear-gradient(135deg,var(--brand2),#4895ef);color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;cursor:pointer;margin:4px}.progress-actions .ghost{background:#f1f5f9;color:var(--ink)}