:root{--bg-main: #fff4db;--bg-sub: #ffe9b9;--surface: #ffffff;--surface-soft: #fff9ed;--text-main: #3e2a12;--text-soft: #7a6447;--accent: #ffb020;--accent-strong: #f08f00;--accent-press: #db7f00;--pill: #f6ebd2;--shadow: 0 10px 24px rgba(129, 86, 24, .15);--shadow-soft: 0 6px 16px rgba(129, 86, 24, .1);--badge-learned-bg: rgba(66, 186, 110, .18);--badge-learned-text: #2b8a4a;--badge-fresh-bg: rgba(255, 176, 32, .2);--badge-fresh-text: #c56f00}:root[data-theme=green]{--bg-main: #e3f7df;--bg-sub: #c7eec4;--surface: #ffffff;--surface-soft: #f1fbef;--text-main: #1f4129;--text-soft: #4f7259;--accent: #4ac774;--accent-strong: #34a85d;--accent-press: #2a894b;--pill: #e5f7e9;--shadow: 0 10px 24px rgba(34, 114, 66, .15);--shadow-soft: 0 6px 16px rgba(34, 114, 66, .1);--badge-learned-bg: rgba(52, 168, 93, .2);--badge-learned-text: #1f7a45;--badge-fresh-bg: rgba(74, 199, 116, .18);--badge-fresh-text: #1f7a45}:root[data-theme=eye-care]{--bg-main: #f4f9e2;--bg-sub: #e4f0ba;--surface: #ffffff;--surface-soft: #f8fce9;--text-main: #3d4b24;--text-soft: #677544;--accent: #9dbf40;--accent-strong: #86a630;--accent-press: #728d28;--pill: #eef6cf;--shadow: 0 10px 24px rgba(104, 129, 47, .14);--shadow-soft: 0 6px 16px rgba(104, 129, 47, .1);--badge-learned-bg: rgba(134, 166, 48, .24);--badge-learned-text: #5f7d23;--badge-fresh-bg: rgba(157, 191, 64, .2);--badge-fresh-text: #5f7d23}:root[data-theme=night]{--bg-main: #070b14;--bg-sub: #0f1727;--surface: #161f33;--surface-soft: #1b2740;--text-main: #edf3ff;--text-soft: #c0d0ef;--accent: #4f91ff;--accent-strong: #3a73d4;--accent-press: #2b5cb0;--pill: #263652;--shadow: 0 14px 30px rgba(0, 0, 0, .45);--shadow-soft: 0 8px 18px rgba(0, 0, 0, .32);--badge-learned-bg: rgba(78, 143, 255, .24);--badge-learned-text: #d8e6ff;--badge-fresh-bg: rgba(196, 210, 236, .24);--badge-fresh-text: #e9f1ff}*{box-sizing:border-box}body{margin:0;font-family:Nunito,Trebuchet MS,PingFang SC,sans-serif;color:var(--text-main);background:radial-gradient(circle at 8% 6%,rgba(255,255,255,.45),transparent 28%),radial-gradient(circle at 92% 10%,rgba(255,255,255,.4),transparent 32%),linear-gradient(155deg,var(--bg-main),var(--bg-sub));min-height:100vh;overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom;transition:background .26s ease,color .22s ease}a{color:inherit;text-decoration:none}.app-shell{max-width:460px;width:100%;margin:0 auto;padding:14px 12px 20px;display:grid;gap:12px;overflow-x:clip;touch-action:pan-y pinch-zoom}.surface-card{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);transition:background .24s ease,box-shadow .24s ease,color .22s ease}.top-bar{padding:14px;display:grid;gap:10px}.brand-row{display:flex;align-items:center;gap:10px}.mascot-dot{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(160deg,var(--accent),var(--accent-strong));box-shadow:var(--shadow-soft)}.brand{font-size:2rem;line-height:1;font-weight:900;letter-spacing:.3px}.tagline{margin:2px 0 0;color:var(--text-soft);font-size:.88rem;font-weight:700}.theme-compact{justify-self:end;position:relative}.theme-trigger{border:none;border-radius:999px;background:var(--pill);color:var(--text-main);padding:6px 10px;min-height:38px;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .14s ease,filter .14s ease,box-shadow .2s ease,background .22s ease,color .22s ease}.theme-trigger:hover{transform:translateY(-1px);filter:brightness(1.03)}.theme-trigger:active{transform:translateY(0) scale(.98)}.theme-trigger.open{box-shadow:0 10px 20px color-mix(in oklab,var(--accent) 28%,transparent)}.theme-compact-prefix{font-size:.78rem;font-weight:800;color:var(--text-soft);letter-spacing:.3px}.theme-current{font-weight:800;color:var(--text-main)}.theme-caret{font-size:.84rem;opacity:.85}.theme-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;padding:8px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);display:grid;gap:6px;z-index:40;animation:pop-in .16s ease}.theme-option{border:none;text-align:left;border-radius:10px;padding:10px 12px;background:transparent;color:var(--text-main);font-weight:800;cursor:pointer;transition:background .18s ease,color .18s ease}.theme-option:hover{background:var(--pill)}.theme-option.active{color:#fff;background:linear-gradient(160deg,var(--accent),var(--accent-strong))}.streak-panel{display:grid;gap:6px;padding:10px;border-radius:14px;background:var(--surface-soft)}.streak-meta,.xp-meta{display:flex;justify-content:space-between;align-items:center;font-weight:800}.streak-title{color:var(--text-soft)}.progress-track{width:100%;height:10px;border-radius:999px;background:#00000014;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(160deg,var(--accent),var(--accent-strong));transition:width .28s ease}.tabs-strip{display:flex;gap:8px;overflow-x:hidden;flex-wrap:wrap;padding:4px 2px 10px;scrollbar-width:none;transition:color .22s ease}.tab-pill{flex:0 0 auto;min-width:86px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px 12px;border-radius:999px;background:var(--pill);font-weight:800;box-shadow:var(--shadow-soft);transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .15s ease,filter .15s ease}.tab-pill.active{color:#fff;background:linear-gradient(160deg,var(--accent),var(--accent-strong))}.tab-icon{font-size:.95rem;line-height:1}.tab-text{display:grid;line-height:1.1}.tab-text strong{font-size:.86rem}.tab-text small{font-size:.68rem;opacity:.85}.page-container{min-height:520px}.module-page{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:14px;animation:rise-in .32s ease both;overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom;transition:background .24s ease,box-shadow .24s ease,color .22s ease}.module-page h2{margin:0 0 10px;font-size:1.65rem}.loading{padding:22px;text-align:center}.theme-btn,.pager-btn,.level-chip{border:none;border-radius:999px;font-weight:800;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .15s ease,filter .15s ease,background .2s ease}.theme-btn,.pager-btn{background:linear-gradient(160deg,var(--accent),var(--accent-strong));color:#fff;padding:10px 14px}.theme-btn:hover,.pager-btn:hover,.tab-pill:hover,.level-chip:hover{filter:brightness(1.03);transform:translateY(-1px)}.theme-btn:active,.pager-btn:active,.tab-pill:active,.level-chip:active{transform:translateY(0)}.listening-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}.level-switch{display:flex;gap:8px;overflow-x:hidden;flex-wrap:wrap;padding:6px 2px;scrollbar-width:none}.level-chip{flex:0 0 auto;display:grid;place-items:center;gap:2px;min-width:88px;padding:10px 12px;background:var(--pill);color:var(--text-main);transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .15s ease,filter .15s ease}.level-chip small{font-size:.72rem;color:var(--text-soft);font-weight:700}.level-chip.active{background:linear-gradient(160deg,var(--accent),var(--accent-strong));color:#fff}.level-chip.active small{color:#ffffffe6}.toggle-item{display:flex;align-items:center;gap:6px;font-weight:700}.translate-toggle{border:none;border-radius:999px;padding:8px 12px 8px 8px;background:var(--pill);color:var(--text-main);display:inline-flex;align-items:center;gap:8px;font-weight:800;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .15s ease,filter .15s ease,background .2s ease}.translate-toggle .switch-dot{width:18px;height:18px;border-radius:50%;background:#0003;transition:background .2s ease,box-shadow .2s ease}.translate-toggle.active{background:linear-gradient(160deg,var(--accent),var(--accent-strong));color:#fff}.translate-toggle.active .switch-dot{background:#fff;box-shadow:0 0 0 4px #fff3}.translate-toggle:hover{filter:brightness(1.03);transform:translateY(-1px)}.translate-toggle:active{transform:translateY(0)}.level-header{margin-top:10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}.listening-grid,.placeholder-grid{margin-top:10px;display:grid;grid-template-columns:1fr;gap:12px}.listening-card,.placeholder-box{border-radius:16px;background:var(--surface-soft);box-shadow:var(--shadow-soft);animation:rise-in .35s ease both;transition:background .24s ease,box-shadow .24s ease,color .22s ease}.listening-card:nth-child(2n),.placeholder-box:nth-child(2n){animation-delay:.05s}.listening-card:nth-child(3n),.placeholder-box:nth-child(3n){animation-delay:.1s}.placeholder-box{min-height:110px;display:grid;place-items:center;color:var(--text-soft)}.listening-card img{width:100%;height:170px;object-fit:cover;border-radius:16px 16px 0 0}.text-pair{min-width:0;padding:12px;display:grid;gap:8px}.card-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.item-title{margin:0;font-size:1.05rem}.item-summary{margin:0;color:var(--text-soft);overflow-wrap:anywhere}.learn-badge{font-size:.72rem;font-weight:800;border-radius:999px;padding:6px 10px;white-space:nowrap}.learn-badge.learned{background:var(--badge-learned-bg);color:var(--badge-learned-text);transition:background .22s ease,color .22s ease}.learn-badge.fresh{background:var(--badge-fresh-bg);color:var(--badge-fresh-text);transition:background .22s ease,color .22s ease}.speech-status{margin:8px 0 0;color:var(--text-soft);font-weight:700}.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}.dialogue-line{padding:10px;border-radius:12px;background:#ffffff8c;transition:background .24s ease,color .22s ease}.line-en,.line-zh{margin:0;line-height:1.46;overflow-wrap:anywhere}.line-en{font-weight:800}.line-zh.hidden{opacity:.5;font-style:italic}.speaker-tag{display:inline-block;min-width:56px;color:var(--accent-press)}.detail-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.detail-image-wrap{margin:8px 0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft)}.detail-image{width:100%;height:240px;object-fit:cover}@keyframes pop-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes rise-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (min-width: 980px){.app-shell{max-width:1280px;padding:24px;gap:16px}.top-bar{grid-template-columns:1fr auto;grid-template-areas:"brand theme" "streak streak";align-items:start}.brand-row{grid-area:brand}.theme-compact{grid-area:theme;align-self:start;justify-content:flex-end}.streak-panel{grid-area:streak}.tabs-strip{justify-content:flex-start;overflow:visible;flex-wrap:wrap;gap:10px}.tab-pill{min-width:122px;padding:12px 14px;font-size:1.02rem}.module-page{padding:22px}.module-page h2{font-size:2rem}.listening-grid,.placeholder-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.listening-card img{height:196px}.detail-image{height:320px}.level-switch{flex-wrap:wrap;overflow:visible}.level-chip{min-width:140px;padding:12px 14px}}.module-subpanel{margin-top:14px;padding:12px;border-radius:14px;background:var(--surface-soft);box-shadow:var(--shadow-soft)}.module-subpanel h4{margin:0 0 8px}.practice-steps{margin:0;padding-left:20px;display:grid;gap:6px}