:root{
  --green:#2ecb70;--green-dark:#1ea956;--blue:#2db5e8;--navy:#183153;--ink:#243550;--muted:#6f7f96;--line:#dfe7f0;--bg:#f4f7fb;--card:#fff;--yellow:#ffc83d;--red:#ef5a67;--shadow:0 10px 28px rgba(25,49,83,.08);--safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{max-width:720px;margin:auto;min-height:100vh;background:var(--bg);padding-bottom:calc(84px + var(--safe-bottom))}.topbar{position:sticky;top:0;z-index:20;height:66px;padding:10px 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f5}.brand{display:flex;gap:10px;align-items:center}.brand-pearl{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#61e9bb,#29b6de);box-shadow:inset -5px -6px 0 rgba(0,0,0,.08),0 5px 14px rgba(45,181,232,.25);font-size:24px}.brand b{display:block;font-size:17px}.brand small{display:block;color:var(--muted);margin-top:2px}.top-stats{display:flex;gap:8px}.top-stats span{background:#f2f6fa;border-radius:14px;padding:7px 9px;font-size:13px}.screen{display:none;padding:18px 15px}.screen.active{display:block}.unit-banner{background:linear-gradient(135deg,#20bdf2,#238ddf);color:#fff;border-radius:24px;padding:22px;display:flex;justify-content:space-between;gap:18px;box-shadow:0 16px 35px rgba(35,141,223,.25)}.unit-banner small{font-weight:800;opacity:.86}.unit-banner h1{margin:7px 0 5px;font-size:29px}.unit-banner p{margin:0;line-height:1.65;opacity:.92}.unit-progress{min-width:85px;height:85px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.4)}.unit-progress b{font-size:22px}.unit-progress span{font-size:11px}.method-strip{display:flex;overflow:auto;gap:8px;padding:13px 2px 4px;scrollbar-width:none}.method-strip span{white-space:nowrap;background:#fff;border:1px solid var(--line);padding:7px 11px;border-radius:999px;font-size:12px;color:#53647a}.section-title,.page-title{display:flex;justify-content:space-between;align-items:center;margin:22px 2px 12px}.section-title small,.page-title small{color:var(--muted)}.section-title h2,.page-title h1{margin:4px 0 0}.ghost{border:0;background:#e7f7ee;color:var(--green-dark);font-weight:800;border-radius:12px;padding:10px 13px}.learning-path{position:relative;padding:12px 0 35px}.learning-path:before{content:"";position:absolute;left:50%;top:28px;bottom:30px;width:6px;border-radius:8px;background:linear-gradient(#79dff5,#dfe5eb);transform:translateX(-50%)}.day-node{position:relative;min-height:150px;display:flex;align-items:center}.day-node:nth-child(odd){justify-content:flex-start}.day-node:nth-child(even){justify-content:flex-end}.day-node-card{width:44%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);position:relative}.day-node:nth-child(odd) .day-node-card:after{content:"";position:absolute;right:-18px;top:50%;width:18px;height:3px;background:#bdd2df}.day-node:nth-child(even) .day-node-card:after{content:"";position:absolute;left:-18px;top:50%;width:18px;height:3px;background:#bdd2df}.day-orb{position:absolute;left:50%;transform:translateX(-50%);width:74px;height:74px;border-radius:50%;border:7px solid #fff;display:grid;place-items:center;font-size:30px;background:#dfe4e9;color:#8d98a4;box-shadow:0 7px 0 #c4cad0,0 12px 25px rgba(34,49,72,.12);z-index:2}.day-node.current .day-orb{background:linear-gradient(145deg,#46cfff,#168bcf);color:#fff;box-shadow:0 7px 0 #0e6da4,0 0 0 7px rgba(45,181,232,.18),0 14px 28px rgba(35,141,223,.28);animation:pulse 2s infinite}.day-node.complete .day-orb{background:linear-gradient(145deg,#50df8b,#20b45e);color:#fff;box-shadow:0 7px 0 #178a48}.day-node.locked{opacity:.62}.day-node-card small{display:block;color:var(--muted);font-weight:700}.day-node-card h3{margin:7px 0 5px;font-size:17px}.day-node-card p{margin:0;color:#65758a;line-height:1.5;font-size:13px}.node-status{display:inline-flex;margin-top:10px;padding:5px 8px;border-radius:10px;background:#eef3f7;font-size:11px;font-weight:800}.current .node-status{background:#e5f7ff;color:#168bcf}.complete .node-status{background:#e4f8ec;color:#159452}.count{background:#edf3f8;border-radius:999px;padding:7px 10px;color:#617185;font-weight:800;font-size:12px}.search-row{display:grid;grid-template-columns:1fr 105px 105px;gap:9px;position:sticky;top:66px;z-index:8;background:var(--bg);padding:8px 0 12px}.search-row input,.search-row select,.settings-card input{border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px;color:var(--ink);outline:none}.knowledge-list{display:grid;gap:10px}.knowledge-item{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:0 6px 18px rgba(25,49,83,.04)}.knowledge-item-head{display:flex;justify-content:space-between;gap:10px}.knowledge-item h3{margin:5px 0 6px;font-size:16px}.knowledge-item p{margin:0;color:#64748a;line-height:1.6;font-size:13px}.knowledge-item .tags{display:flex;gap:6px}.tag{font-size:11px;font-weight:800;border-radius:8px;padding:4px 7px;background:#edf7ff;color:#2089bb}.practice-link{margin-top:12px;border:0;background:#e9f8ef;color:#199653;font-weight:800;padding:9px 12px;border-radius:10px}.review-hero,.profile-card,.settings-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}.review-hero{text-align:center}.review-icon{font-size:44px}.review-hero h2{margin:7px 0}.review-hero p{color:var(--muted);line-height:1.65}.review-list{display:grid;gap:10px;margin-top:15px}.review-item{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px}.review-item b{display:block;margin-bottom:5px}.review-item span{color:var(--muted);font-size:13px}.profile-card{display:flex;align-items:center;gap:15px}.avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#e9f8ef;font-size:30px}.profile-card h2{margin:0 0 5px}.profile-card p{margin:0;color:var(--muted)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.stats-grid div{background:#fff;border:1px solid var(--line);border-radius:16px;text-align:center;padding:16px}.stats-grid b{display:block;font-size:24px}.stats-grid span{color:var(--muted);font-size:12px}.settings-card{display:grid;gap:15px}.settings-card label>input{margin-top:7px;width:100%}.toggle{display:flex;align-items:center;justify-content:space-between;gap:14px}.toggle span b,.toggle span small{display:block}.toggle span small{color:var(--muted);margin-top:3px}.toggle input{width:22px;height:22px}.primary{border:0;background:var(--green);color:#fff;font-weight:900;padding:13px 18px;border-radius:14px;box-shadow:0 5px 0 var(--green-dark)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green-dark)}.wide{width:100%}.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:25;width:min(720px,100%);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:8px 8px calc(8px + var(--safe-bottom));backdrop-filter:blur(15px)}.bottom-nav button{border:0;background:transparent;color:#7c899a;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px}.bottom-nav i{font-style:normal;font-size:22px}.bottom-nav button.active{color:var(--green-dark);font-weight:900}
.day-overlay,.lesson-overlay{position:fixed;inset:0;z-index:50;background:var(--bg);display:none;max-width:720px;margin:auto}.day-overlay.open,.lesson-overlay.open{display:block}.day-head,.lesson-head{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:9px 12px;gap:12px}.icon-btn{border:0;background:transparent;font-size:23px;padding:8px}.day-head>div:nth-child(2),.lesson-head>div:nth-child(2){flex:1;text-align:center}.day-head small,.lesson-head small{display:block;color:var(--muted);font-size:11px}.day-head b,.lesson-head b{display:block;font-size:15px;margin-top:2px}.day-head-stats,.lesson-hud{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:10px;color:var(--muted)}.day-progress,.lesson-progress{height:5px;background:#e6edf3}.day-progress i,.lesson-progress i{display:block;height:100%;width:0;background:var(--green);transition:.35s}.stage-map{height:calc(100vh - 69px);overflow:auto;padding:24px 16px 45px;position:relative}.stage-map:before{content:"";position:absolute;left:50%;top:65px;bottom:70px;width:5px;background:#dfe7ed;transform:translateX(-50%)}.stage-node{min-height:130px;display:flex;align-items:center;position:relative}.stage-node:nth-child(odd){justify-content:flex-start}.stage-node:nth-child(even){justify-content:flex-end}.stage-card{width:42%;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;box-shadow:var(--shadow)}.stage-card b{display:block}.stage-card span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.stage-orb{position:absolute;left:50%;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#dfe4e9;border:6px solid #fff;box-shadow:0 6px 0 #c5cbd0;font-size:27px;z-index:2}.stage-node.available .stage-orb{background:var(--blue);box-shadow:0 6px 0 #1688b6;color:#fff}.stage-node.done .stage-orb{background:var(--green);box-shadow:0 6px 0 var(--green-dark);color:#fff}.stage-node.locked{opacity:.55}.lesson-body{height:calc(100vh - 141px);overflow:auto;padding:22px 15px 120px}.lesson-footer{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);border-top:1px solid var(--line);padding:12px 14px calc(12px + var(--safe-bottom))}.teach-card,.question-card,.summary-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}.lesson-kicker{display:inline-flex;background:#e8f8ef;color:#169652;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:900}.teach-card h1,.question-card h1{font-size:25px;line-height:1.35;margin:14px 0}.teach-card p,.question-card p{color:#5d6c80;line-height:1.75}.scene-box{background:#eef8ff;border-left:4px solid var(--blue);padding:14px;border-radius:12px;margin:13px 0}.dialogue-row{display:grid;grid-template-columns:74px 1fr;gap:9px;padding:8px 0;border-bottom:1px dashed #d9e6ef}.dialogue-row:last-child{border:0}.dialogue-row b{font-size:12px;color:#218bb8}.goal-list,.rule-list{display:grid;gap:9px;margin:13px 0}.goal-list div,.rule-list div{background:#f4f7fa;border-radius:12px;padding:11px}.method-note{background:#fff6d9;border-left:4px solid var(--yellow);border-radius:12px;padding:13px;margin-top:15px;color:#715f28;font-size:13px;line-height:1.6}.vocab-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:19px;text-align:center}.vocab-word{font-size:31px;font-weight:900;margin-top:14px}.vocab-ipa{color:#3c8ab1;margin:6px 0}.vocab-zh{font-size:18px}.vocab-example{background:#f4f7fa;border-radius:12px;padding:12px;margin-top:15px;line-height:1.6}.speak-btn{border:0;background:#eaf4ff;color:#267fa7;border-radius:12px;padding:10px 13px;font-weight:800;margin-top:12px}.options{display:grid;gap:10px;margin-top:18px}.option{border:2px solid var(--line);background:#fff;border-radius:16px;padding:15px;text-align:left;font-weight:800;color:var(--ink);box-shadow:0 4px 0 #dce3ea;transition:.18s}.option:active{transform:translateY(3px);box-shadow:0 1px 0 #dce3ea}.option.correct{border-color:#39ce75;background:#eafaf0;color:#168b49}.option.wrong{border-color:#ef6673;background:#fff0f2;color:#c43c49;animation:shake .35s}.feedback{margin-top:18px;border-radius:14px;padding:14px;line-height:1.65}.feedback.correct{background:#e9f9ef;color:#167943}.feedback.wrong{background:#fff0f2;color:#9c3340}.word-bank,.answer-bank{display:flex;gap:8px;flex-wrap:wrap;min-height:54px;padding:10px;border-radius:14px;background:#f2f6f9;margin:14px 0}.word-chip{border:1px solid #cdd9e4;background:#fff;border-radius:11px;padding:9px 12px;box-shadow:0 3px 0 #d5dde5;font-weight:800}.type-input{width:100%;border:2px solid var(--line);border-radius:15px;padding:14px;margin-top:13px;outline:none;font-size:17px}.grammar-table{width:100%;border-collapse:separate;border-spacing:0 7px}.grammar-table td{background:#f3f6fa;padding:10px}.grammar-table td:first-child{border-radius:10px 0 0 10px;font-weight:900}.grammar-table td:last-child{border-radius:0 10px 10px 0;color:#168d4a}.error-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:8px 0}.error-pair div{border-radius:11px;padding:10px}.error-pair .bad{background:#fff0f2;color:#b33d47}.error-pair .good{background:#eaf9ef;color:#168447}.speech-panel{text-align:center}.mic-button{width:92px;height:92px;border:0;border-radius:50%;font-size:36px;background:linear-gradient(145deg,#45d486,#1fac5d);box-shadow:0 8px 0 #158c4b;color:#fff}.speech-result{margin-top:15px;background:#f3f7fa;border-radius:14px;padding:13px}.stage-complete{text-align:center}.stage-complete .big-pearl{font-size:72px;animation:pop .7s}.stage-complete h1{margin:8px}.stage-complete p{color:var(--muted);line-height:1.65}.modal{position:fixed;inset:0;z-index:80;background:rgba(13,30,52,.45);display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-card,.knowledge-modal-card{width:min(430px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:25px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.2);text-align:center}.modal-pearl{font-size:56px;color:#2db5e8}.modal-card h2{margin:7px}.modal-card p{color:var(--muted);line-height:1.65}.text-btn{border:0;background:transparent;color:#738197;padding:13px}.knowledge-modal-card{text-align:left;position:relative}.modal-close{position:absolute;right:10px;top:8px}.knowledge-modal-card h2{padding-right:35px}.knowledge-example{background:#f4f7fa;border-radius:12px;padding:11px;margin:8px 0}.toast{position:fixed;left:50%;bottom:105px;transform:translate(-50%,20px);z-index:100;background:#183153;color:#fff;padding:10px 14px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.xp-fly{position:fixed;left:50%;top:45%;z-index:100;color:#f3a500;font-size:24px;font-weight:900;animation:fly 1s forwards}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}@keyframes fly{0%{opacity:0;transform:translate(-50%,20px)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-70px)}}
@media(max-width:560px){.knowledge-filters{grid-template-columns:1fr 1fr}.knowledge-filters input{grid-column:1/-1}}
@media(max-width:480px){.unit-banner{padding:18px}.unit-banner h1{font-size:25px}.unit-progress{min-width:72px;height:72px}.day-node-card,.stage-card{width:40%;padding:11px}.day-node-card h3{font-size:14px}.day-node-card p{font-size:11px}.day-orb{width:66px;height:66px}.stage-orb{width:60px;height:60px}.search-row{grid-template-columns:1fr 95px 95px}.knowledge-filters{grid-template-columns:1fr 1fr}.knowledge-filters input{grid-column:1/-1}.error-pair{grid-template-columns:1fr}.lesson-body{padding-left:12px;padding-right:12px}}