:root{--bg-base:#f0f4f8;--bg-top:#f0f4f8;--bg-bottom:#e4ecf4;--bg-gradient:radial-gradient(ellipse 90% 70% at 8% 15%, #7dd3fc73 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 92% 8%, #c4b5fd66 0%, transparent 50%), radial-gradient(ellipse 70% 65% at 78% 88%, #a7f3d059 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 18% 90%, #a5b4fc47 0%, transparent 50%), radial-gradient(ellipse 40% 35% at 50% 45%, #bae6fd40 0%, transparent 60%), linear-gradient(168deg, #f0f4f8 0%, #e8eef5 42%, #e4ecf4 100%);--ink:#0f172a;--ink-2:#334155c7;--ink-3:#64748bd9;--ink-on-accent:#042f2e;--nav:#ffffff9e;--nav-border:#ffffffb8;--card-ai:#ffffffb8;--card-user:#bae6fd9e;--card-user-border:#06b6d447;--tag-bg:#06b6d41f;--tag-border:#06b6d452;--accent:#06b6d4;--accent-teal:#14b8a6;--accent-cyan-bright:#0891b2;--accent-dim:#06b6d424;--accent-glow:#06b6d459;--record:#e94560;--record-ring:#e9456047;--offline-bg:#fef3c7;--offline-ink:#92400e;--offline-line:#fcd34d;--input-bg:#ffffffb8;--input-border:#94a3b866;--line:#94a3b847;--glass-fill:#ffffff85;--glass-fill-strong:#ffffffad;--glass-fill-soft:#fff6;--glass-border:#ffffffb8;--glass-border-strong:#ffffffe6;--glass-border-inner:#94a3b838;--glass-blur:28px;--glass-blur-lg:40px;--glass-blur-sm:16px;--glass-saturate:1.45;--glass-shadow:0 12px 40px #0f172a14, 0 4px 12px #0f172a0a, 0 0 0 1px #ffffff80;--glass-shadow-lg:0 24px 64px #0f172a1a, 0 8px 20px #0f172a0d, 0 0 40px #7dd3fc1f;--glass-inset:inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #94a3b814;--glass-fallback:#f0f4f8f5;--glass-fallback-strong:#fffffff7;--btn-primary-bg:linear-gradient(135deg, #22d3ee 0%, #14b8a6 55%, #0d9488 100%);--btn-primary-text:#042f2e;--btn-primary-shadow:0 6px 28px #06b6d459, 0 0 40px #14b8a62e;--shadow-card:0 8px 28px #0f172a0f;--radius-card:16px;--radius-pill:999px;--font:"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;--header-h:56px;--composer-h:72px;--max-col:720px;--scrim:#0f172a47;--danger-bg:#fef2f2;--danger-line:#fecaca;--warning:#b45309}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background-color:var(--bg-base);background-image:var(--bg-gradient);-webkit-font-smoothing:antialiased;background-repeat:no-repeat;background-attachment:fixed}button,textarea,select{font:inherit}button{cursor:pointer;color:inherit;background:0 0;border:none;padding:0}button:disabled{cursor:not-allowed;opacity:.5}img{display:block}.app-shell{flex-direction:column;align-items:center;height:100%;min-height:100%;display:flex}.app-column{width:100%;max-width:var(--max-col);background:0 0;flex-direction:column;height:100%;min-height:100dvh;display:flex;position:relative}.app-header{height:var(--header-h);background:var(--nav);color:var(--ink);z-index:10;border-bottom:1px solid var(--nav-border);box-shadow:var(--glass-inset);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));flex-shrink:0;grid-template-columns:48px 1fr 48px;align-items:center;padding:0 8px;display:grid}.app-title{text-align:center;letter-spacing:.02em;margin:0;font-size:16px;font-weight:600}.header-btn{width:40px;height:40px;color:var(--ink);border-radius:10px;place-items:center;display:grid}.header-btn:hover{background:#ffffff73}.header-spacer{width:40px;height:40px}.hamburger{font-size:20px;line-height:1}.icon-btn{place-items:center;display:inline-grid}.offline-banner{width:100%;max-width:var(--max-col);background:var(--offline-bg);color:var(--offline-ink);text-align:center;border-bottom:1px solid var(--offline-line);padding:8px 12px;font-size:13px}.message-list{-webkit-overflow-scrolling:touch;flex:1;padding:16px 12px 12px;overflow-y:auto}.empty-state{padding:40px 8px 24px}.empty-title{color:var(--ink);margin:0 0 8px;font-size:30px;font-weight:700}.empty-sub{color:var(--ink-2);margin:0 0 20px;font-size:14px}.topic-row{scrollbar-width:none;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.topic-row::-webkit-scrollbar{display:none}.topic-chip{border-radius:var(--radius-pill);background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--accent);white-space:nowrap;flex-shrink:0;padding:8px 14px;font-size:13px;font-weight:500}.topic-chip:hover{filter:brightness(.97)}.bubble{border-radius:var(--radius-card);max-width:85%;margin-bottom:12px;padding:14px;position:relative}.bubble-ai{background:var(--card-ai);border:1px solid var(--glass-border);box-shadow:var(--shadow-card), var(--glass-inset);-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));max-width:70%;margin-right:auto}.bubble-user-wrap{flex-direction:column;align-items:flex-end;margin-bottom:12px;display:flex}.bubble-user{background:var(--card-user);border:1px solid var(--card-user-border);box-shadow:var(--shadow-card);max-width:65%;margin-bottom:0;margin-left:auto}.bubble-primary{color:var(--ink);white-space:pre-wrap;word-break:break-word;margin:0;font-size:15.5px;line-height:1.7}.bubble-divider{background:var(--line);height:1px;margin:10px 0}.bubble-secondary{color:var(--ink-3);white-space:pre-wrap;word-break:break-word;margin:0;font-size:13px;line-height:1.5}.bubble-actions{justify-content:flex-end;margin-top:8px;display:flex}.play-btn{background:var(--glass-fill-strong);border:1px solid var(--glass-border-inner);width:44px;min-width:44px;height:44px;min-height:44px;color:var(--ink);touch-action:manipulation;border-radius:50%;place-items:center;display:grid}.play-btn.playing{background:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:#0000;animation:1.6s linear infinite spin-soft}.play-btn.muted{opacity:.55}.voice-tag{color:var(--ink-2);margin-top:6px;font-size:12px;display:block}.retry-link{color:var(--record);margin-top:4px;margin-right:4px;font-size:12px;text-decoration:underline}.msg-enter-ai{animation:.26s ease-out slide-in-left}.msg-enter-user{animation:.26s ease-out slide-in-right}@keyframes slide-in-left{0%{opacity:0;transform:translate(-10px)translateY(8px)}to{opacity:1;transform:none}}@keyframes slide-in-right{0%{opacity:0;transform:translate(10px)translateY(8px)}to{opacity:1;transform:none}}@keyframes spin-soft{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-row{align-items:center;gap:10px;padding:8px 4px 16px;display:flex}.loading-label{color:var(--ink-3);font-size:13px}.dots{gap:6px;display:inline-flex}.dots i{background:#64748b73;border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite bounce;display:block}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,to{opacity:.5;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}.composer{background:var(--glass-fill-strong);border-top:1px solid var(--glass-border);box-shadow:var(--glass-inset);-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));flex-shrink:0}.composer-hint{color:var(--ink-3);margin-bottom:6px;padding-left:4px;font-size:11px}.composer-row{align-items:flex-end;gap:8px;min-width:0;display:flex}.composer-input{resize:none;border:1px solid var(--input-border);background:var(--input-bg);border-radius:var(--radius-pill);min-width:0;max-height:120px;color:var(--ink);outline:none;flex:1;padding:12px 16px;font-size:15px;line-height:1.4}.composer-input:focus{border-color:#06b6d4b3;box-shadow:0 0 0 3px #06b6d42e}.composer-input::placeholder{color:var(--ink-3)}.mic-btn{background:var(--glass-fill-strong);width:44px;height:44px;color:var(--ink);border:1px solid var(--glass-border-inner);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;place-items:center;display:grid}.mic-btn.recording{background:var(--record);color:#fff;border-color:#0000;animation:1s ease-in-out infinite pulse-mic}.mic-btn.recording img{filter:invert()}.mic-btn.denied{background:#94a3b873}@keyframes pulse-mic{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.send-btn{background:var(--btn-primary-bg);width:44px;height:44px;color:var(--btn-primary-text);box-shadow:var(--btn-primary-shadow);border-radius:50%;flex-shrink:0;place-items:center;display:grid}.mic-denied-tip{color:var(--record);margin:6px 4px 0;font-size:12px}.record-overlay{background:var(--scrim);z-index:40;-webkit-backdrop-filter:blur(6px);place-items:center;display:grid;position:fixed;inset:0}.record-panel{color:var(--ink);background:var(--glass-fill-strong);border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow-lg), var(--glass-inset);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border-radius:24px;flex-direction:column;align-items:center;gap:14px;padding:28px 32px 22px;display:flex}.record-mic{background:var(--record);width:96px;height:96px;box-shadow:0 0 0 12px var(--record-ring);border-radius:50%;place-items:center;animation:1.2s ease-in-out infinite pulse-mic;display:grid}.record-mic img{filter:invert()}.record-mic.cancel{background:#64748b;box-shadow:0 0 0 12px #64748b47}.waveform{align-items:flex-end;gap:5px;height:28px;display:flex}.waveform span{background:var(--accent);border-radius:2px;width:4px;height:10px;animation:.8s ease-in-out infinite wave}@keyframes wave{0%,to{height:8px}50%{height:26px}}.record-time{font-variant-numeric:tabular-nums;margin:0;font-size:18px}.countdown{color:var(--warning);font-weight:600}.record-tip{opacity:.9;margin:0;font-size:14px}.record-tip.cancel{color:var(--record)}.record-actions{justify-content:center;align-items:center;gap:12px;margin-top:8px;display:flex}.record-cancel-btn{border-radius:var(--radius-pill);border:1px solid var(--glass-border-inner);min-width:88px;min-height:44px;color:var(--ink);touch-action:manipulation;background:#ffffff8c;padding:10px 22px;font-weight:600}.record-send-btn{border-radius:var(--radius-pill);background:var(--btn-primary-bg);min-width:88px;min-height:44px;color:var(--btn-primary-text);box-shadow:var(--btn-primary-shadow);touch-action:manipulation;margin-top:0;padding:10px 28px;font-weight:600}.sheet-backdrop{background:var(--scrim);z-index:50;-webkit-backdrop-filter:blur(4px);justify-content:flex-end;align-items:stretch;display:flex;position:fixed;inset:0}.settings-sheet{background:var(--glass-fill-strong);border-left:1px solid var(--glass-border-strong);width:min(360px,100%);box-shadow:var(--glass-shadow-lg), var(--glass-inset);-webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));padding:16px 18px 32px;animation:.22s ease-out sheet-in;overflow-y:auto}@media (width<=767px){.sheet-backdrop{justify-content:center;align-items:flex-end}.settings-sheet{border-left:none;border-top:1px solid var(--glass-border-strong);border-radius:16px 16px 0 0;width:100%;max-height:80dvh;animation:.22s ease-out sheet-up}}@keyframes sheet-in{0%{transform:translate(100%)}to{transform:none}}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}.sheet-head{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.sheet-head h2{margin:0;font-size:18px}.sheet-section{margin-bottom:22px}.sheet-section h3{color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;font-size:13px;font-weight:600}.danger-btn{background:var(--danger-bg);width:100%;color:var(--record);border:1px solid var(--danger-line);border-radius:12px;padding:12px;font-weight:600}.seg{gap:8px;display:flex}.seg button{background:var(--input-bg);border-radius:10px;flex:1;padding:10px;font-size:14px}.seg button.active{background:var(--tag-bg);color:var(--accent);border:1px solid var(--tag-border);font-weight:600}.sheet-section select{border:1px solid var(--line);background:var(--input-bg);border-radius:10px;width:100%;padding:10px 12px}.stub-note{color:var(--ink-3);margin:8px 0 0;font-size:12px}.switch-row{justify-content:space-between;align-items:center;font-size:15px;display:flex}.word-tap{color:inherit;font:inherit;line-height:inherit;cursor:pointer;text-underline-offset:3px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:3px;margin:0;padding:0 1px;-webkit-text-decoration:underline #06b6d466;text-decoration:underline #06b6d466;text-decoration-thickness:1.5px;display:inline}.word-tap:hover,.word-tap:focus-visible{color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);background:#06b6d41a;outline:none}.word-tap:active{background:#06b6d429}.bubble-user .word-tap{text-decoration-color:#0f172a47}.bubble-user .word-tap:hover,.bubble-user .word-tap:focus-visible{color:var(--accent-cyan-bright);background:#06b6d424}.dict-backdrop{z-index:55;justify-content:center;align-items:flex-end}.dict-sheet{background:var(--glass-fill-strong);border:1px solid var(--glass-border-strong);width:min(480px,100%);max-height:min(70dvh,520px);box-shadow:var(--glass-shadow-lg), var(--glass-inset);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));padding:16px 18px calc(24px + env(safe-area-inset-bottom,0px));color:var(--ink);border-radius:16px 16px 0 0;animation:.22s ease-out sheet-up;overflow-y:auto}@media (width>=768px){.dict-backdrop{align-items:center}.dict-sheet{border-radius:16px;max-height:min(80dvh,560px);animation:.2s ease-out dict-fade-in}}@keyframes dict-fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.dict-state{color:var(--ink-2);flex-direction:column;align-items:center;gap:12px;padding:28px 12px;font-size:14px;display:flex}.dict-state p{margin:0}.dict-spinner{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin-soft}.dict-error{color:var(--record)}.dict-retry{background:var(--glass-fill-strong);border:1px solid var(--tag-border);min-height:44px;color:var(--accent-cyan-bright);border-radius:12px;margin-top:4px;padding:10px 20px;font-size:14px;font-weight:600}.dict-body{padding-bottom:8px}.dict-word{color:var(--ink);letter-spacing:-.02em;margin:0 0 8px;font-size:26px;font-weight:700}.dict-phonetic-row{align-items:center;gap:10px;min-height:44px;margin-bottom:16px;display:flex}.dict-phonetic{color:var(--ink-2);font-size:15px}.dict-audio-btn{background:var(--glass-fill-strong);border:1px solid var(--glass-border-inner);touch-action:manipulation;width:44px;min-width:44px;height:44px;min-height:44px;box-shadow:var(--shadow-card);border-radius:50%;place-items:center;display:grid}.dict-audio-btn.playing{background:var(--btn-primary-bg);border-color:#0000}.dict-meanings{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.dict-meanings li{border:1px solid var(--glass-border);box-shadow:var(--shadow-card);background:#ffffffb8;border-radius:12px;flex-wrap:wrap;align-items:baseline;gap:8px;padding:12px 14px;font-size:15px;line-height:1.5;display:flex}.dict-pos{color:var(--accent);background:var(--tag-bg);border:1px solid var(--tag-border);border-radius:6px;flex-shrink:0;padding:2px 8px;font-size:12px;font-weight:600}.dict-zh{color:var(--ink)}.toast{left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--glass-fallback-strong);max-width:min(90vw,360px);color:var(--ink);border:1px solid var(--glass-border-strong);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));z-index:60;text-align:center;border-radius:12px;padding:10px 16px;font-size:13px;animation:.2s ease-out toast-in;position:fixed;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (width>=1024px){.bubble-ai{max-width:70%}.bubble-user{max-width:65%}}@media (width>=768px) and (width<=1023px){.app-column{max-width:640px}}@media (prefers-reduced-transparency:reduce){.app-header,.composer,.bubble-ai,.settings-sheet,.dict-sheet,.record-panel,.record-overlay,.sheet-backdrop,.toast{-webkit-backdrop-filter:none}.app-header,.composer,.bubble-ai,.settings-sheet,.dict-sheet,.record-panel,.toast{background:var(--glass-fallback-strong)}}