:root{--bg:#1c1b22;--card:#2a2933;--border:#44434f;--text:#eee;--text-dim:#8b8a94;--accent:#5eead4;--warn:#fbbf24;--ok:#4ade80;--bad:#f87171}[data-theme=light]{--bg:#f5f4f8;--card:#fff;--border:#d8d6e0;--text:#23222b;--text-dim:#6f6e7a}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,PingFang SC,Helvetica Neue,sans-serif}#root{max-width:480px;margin:0 auto;padding:16px 16px 40px}.app-title{text-align:center;margin:48px 0 4px}.subtitle{text-align:center;color:var(--text-dim);margin:0 0 24px}.page-loading{text-align:center;color:var(--text-dim);padding:60px 0}.btn{background:var(--accent);color:#10231f;cursor:pointer;border:none;border-radius:10px;width:100%;padding:12px 0;font-size:16px;font-weight:700;display:block}.btn-dim{background:var(--card);color:var(--text);border:1px solid var(--border)}.btn-play{background:var(--card);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:10px;margin-right:8px;padding:10px 14px}.link-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;margin:16px auto;display:block}input[type=email],input[type=password],.blank-input input,.pwd-wrap input{background:var(--card);border:1px solid var(--border);width:100%;color:var(--text);border-radius:10px;margin-bottom:10px;padding:12px;font-size:16px}.form-error{color:var(--bad);font-size:13px}.pwd-wrap{position:relative}.pwd-wrap input{padding-right:48px}.pwd-toggle{cursor:pointer;background:0 0;border:none;font-size:18px;position:absolute;top:8px;right:8px}.step-card{background:var(--card);border-radius:16px;padding:18px 16px}.step-label{color:var(--warn);background:#333240;border-radius:10px;margin-bottom:12px;padding:3px 10px;font-size:12px;display:inline-block}.zh{color:var(--text-dim);margin:4px 0;font-size:16px}.en{font-size:19px;font-weight:600;line-height:1.8}.blank{border-bottom:2px solid var(--accent);color:var(--accent);padding:0 2px}.blank.blank-tap{cursor:pointer;display:inline-block}.blank-slot{vertical-align:baseline;display:inline-block}.blank-slot input{font:inherit;text-align:center;color:var(--accent);border:none;border-bottom:2px solid var(--accent);background:0 0;border-radius:0;margin:0;padding:0 4px;font-size:18px}.blank.ok{border-color:var(--ok);color:var(--ok)}.blank.revealed{border-color:var(--bad);color:var(--bad)}.blank.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.feedback{margin:10px 0;font-size:14px}.feedback.ok{color:var(--ok)}.feedback.bad{color:var(--bad)}.blank-input{align-items:stretch;gap:8px;display:flex}.blank-input input{flex:1;margin-bottom:0}.blank-input .btn{width:auto;padding:12px 20px}.session-header{color:var(--text-dim);justify-content:space-between;margin-bottom:8px;font-size:13px;display:flex}.progress{background:#3a3947;border-radius:3px;height:6px;margin-bottom:16px;overflow:hidden}.progress>div{background:var(--accent);height:100%;transition:width .4s}.audio-row,.record-row{margin:12px 0}.btn-mic{background:var(--bad);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:12px 24px;font-size:16px;font-weight:700}.btn-mic.recording{animation:1s infinite pulse}@keyframes pulse{50%{opacity:.6}}.my-recording{width:100%;margin-top:10px}.hint{color:var(--text-dim);font-size:14px}.self-grade{gap:10px;display:flex}.self-grade .btn{flex:1}.arrival{text-align:center;padding-top:60px}.arrival .train{font-size:64px;animation:1.2s ease-out arrive}@keyframes arrive{0%{opacity:0;transform:translate(-300px)}to{opacity:1;transform:translate(0)}}.arrival-xp{color:var(--warn);font-weight:700}.metro-line{padding-left:26px;position:relative}.metro-line:before{content:"";background:var(--border);border-radius:2px;width:4px;position:absolute;top:12px;bottom:12px;left:9px}.station-row{cursor:pointer;border-radius:12px;align-items:center;gap:12px;padding:14px 12px;display:flex;position:relative}.station-row .dot{background:var(--border);border:3px solid var(--bg);border-radius:50%;width:16px;height:16px;position:absolute;top:50%;left:-26px;transform:translateY(-50%)}.station-row.done .dot{background:var(--accent)}.station-row.current .dot{background:var(--warn);animation:1.5s infinite pulse}.station-row.current{background:var(--card)}.station-row.locked{opacity:.45;cursor:not-allowed}.st-name{font-weight:700}.st-theme{color:var(--text-dim);font-size:12px}.line-map header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.line-map h1{margin:0;font-size:18px}.line-map .streak{color:var(--warn);font-weight:700}.map-nav{gap:10px;margin-bottom:18px;display:flex}.map-nav a{text-align:center;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px;flex:1;padding:10px 0;text-decoration:none}.settings .setting-item{background:var(--card);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;padding:14px;display:flex}.page-header{justify-content:space-between;align-items:center;margin:10px 0 20px;display:flex}.page-header h2{letter-spacing:1px;margin:0;font-size:24px;font-weight:800}.back-link{color:var(--accent);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:opacity .2s}.back-link:active{opacity:.6}.back-link-sm{padding:4px 12px;font-size:15px}.settings .setting-item small{width:100%;color:var(--text-dim);margin-top:6px}.settings input[type=range]{width:100%;margin-top:8px}.auth-page{padding-top:40px}.auth-form{max-width:340px;margin:0 auto}