:root{--bg-0: #050b16;--bg-1: #0a1628;--cyan: #6ec8ff;--cyan-bright: #dff6ff;--line: rgba(110, 200, 255, .28);--text: #e8f4ff;--muted: #8fb0cc;--danger: #ff7b8a;--panel: rgba(8, 20, 38, .72);--font-display: "Orbitron", "Noto Sans SC", sans-serif;--font-body: "Noto Sans SC", "Noto Sans", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--text);background:radial-gradient(1200px 700px at 15% -10%,rgba(40,120,200,.35),transparent 55%),radial-gradient(900px 600px at 90% 10%,rgba(20,80,160,.28),transparent 50%),linear-gradient(180deg,var(--bg-1),var(--bg-0))}button,textarea,input{font:inherit}.app{position:relative;min-height:100vh;max-width:1180px;margin:0 auto;padding:24px 20px 32px;overflow:hidden}.glow{position:absolute;border-radius:999px;filter:blur(50px);pointer-events:none;z-index:0}.glow-a{width:280px;height:280px;left:-60px;top:120px;background:#46a0ff2e}.glow-b{width:320px;height:320px;right:-80px;bottom:40px;background:#286ec829}.topbar,.stage,.modal{position:relative;z-index:1}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:22px}.brand{display:flex;align-items:center;gap:14px;justify-self:start}.brand-mark{width:14px;height:14px;border-radius:50%;background:var(--cyan-bright);box-shadow:0 0 0 6px #6ec8ff26,0 0 24px #b4e6ffcc}.brand h1{margin:0;font-family:var(--font-display);letter-spacing:.18em;font-size:1.35rem}.topbar .ghost-btn{justify-self:end}.mode-btn{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:#14304eb3;color:var(--text);cursor:pointer;transition:.2s ease}.mode-btn strong{font-size:.9rem}.mode-btn span{font-size:.68rem;color:var(--muted);font-family:var(--font-display);letter-spacing:.06em}.mode-btn.dictionary{border-color:#6ec8ff8c;background:#1e5082bf;box-shadow:0 0 18px #50aaff40}.mode-btn:hover{border-color:#96dcff8c;background:#285a8c8c}.ghost-btn,.composer-actions button,.modal-actions button{border:1px solid var(--line);background:#14304e8c;color:var(--text);border-radius:999px;padding:10px 16px;cursor:pointer;transition:.2s ease}.ghost-btn:hover,.composer-actions button:hover,.modal-actions button:hover{border-color:#6ec8ff8c;background:#285a8c8c}.stage{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:20px;min-height:calc(100vh - 120px)}.avatar-panel,.chat-panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:24px}.avatar-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;gap:18px}.avatar-ring{position:relative;width:min(78vw,280px);aspect-ratio:1;border-radius:50%;padding:8px;background:radial-gradient(circle at 50% 50%,rgba(180,230,255,.25),transparent 55%),#06101ee6;box-shadow:0 0 0 1px #6ec8ff59,0 0 40px #50aaff40;overflow:hidden;animation:idle-pulse 3.6s ease-in-out infinite}.avatar-core{position:relative;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#0b1c33,#06101c 62%,#03070f);display:grid;place-items:center}.avatar-halo{position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;background:radial-gradient(circle,rgba(80,170,255,.35),transparent 70%);filter:blur(2px)}.avatar-ring-mid{position:absolute;top:22%;right:22%;bottom:22%;left:22%;border-radius:50%;border:2px solid rgba(110,190,255,.35);box-shadow:inset 0 0 24px #5ab4ff40}.avatar-eye{position:relative;width:42%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(230,248,255,.95);box-shadow:0 0 18px #c8f0ffd9,inset 0 0 18px #78c8ff59;background:radial-gradient(circle at 50% 50%,#041018 40%,#0a2038)}.avatar-pupil{position:absolute;width:14%;aspect-ratio:1;border-radius:50%;right:18%;bottom:18%;background:#f4fbff;box-shadow:0 0 10px #fffffff2}.avatar-ring.speaking{animation:speak-pulse 1.1s ease-in-out infinite;box-shadow:0 0 0 1px #c8f0ff8c,0 0 55px #78c8ff73}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.12) 0px,rgba(0,0,0,.12) 1px,transparent 2px,transparent 4px);pointer-events:none;mix-blend-mode:soft-light}.avatar-meta{text-align:center;display:grid;gap:4px}.avatar-meta strong{font-family:var(--font-display);letter-spacing:.14em}.avatar-meta span{color:var(--muted);font-size:.9rem}.avatar-meta .fr{font-size:.82rem;opacity:.85}.chat-panel{display:flex;flex-direction:column;min-height:560px;overflow:hidden}.messages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}.bubble{max-width:min(100%,560px);padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#0c1c30cc}.bubble.user{align-self:flex-end;background:#183a60c7}.bubble.assistant{align-self:flex-start}.bubble.pending{opacity:.75}.bubble-label{font-size:.75rem;color:var(--cyan);margin-bottom:6px;letter-spacing:.04em}.bubble p{margin:0;line-height:1.55;white-space:pre-wrap;word-break:break-word}.line-zh,.line-main{margin-bottom:8px!important}.typo-error{background:transparent;color:#ff6b7a;font-weight:600;text-decoration:underline wavy #ff6b7a;text-underline-offset:2px}.line-correct{margin:0 0 8px!important;padding:6px 8px;border-radius:8px;background:#2878502e;border:1px solid rgba(120,220,160,.28);color:#b8f0d0;font-size:.9rem;line-height:1.45}.line-correct span{display:block;color:#7dcea0;font-size:.68rem;margin-bottom:2px;letter-spacing:.03em}.line-fr,.line-sub{color:#b7d3ea;font-size:.95rem;border-top:1px dashed rgba(110,200,255,.22);padding-top:8px}.live-translate-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch;margin:0 18px 8px}.live-translate{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}.live-translate>div{border:1px solid var(--line);border-radius:10px;padding:5px 8px;background:#071222b3;min-height:0}.live-translate span{display:block;color:var(--cyan);font-size:.65rem;margin-bottom:2px;letter-spacing:.02em}.live-translate p{margin:0;color:#cfe4f7;font-size:.78rem;line-height:1.35;min-height:1.1em;max-height:2.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.live-translate-hidden{border:1px dashed rgba(110,200,255,.28);border-radius:10px;padding:8px 10px;background:#07122273;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}.live-translate-hidden span{color:var(--cyan);font-size:.68rem}.live-translate-hidden p{margin:0;color:var(--muted);font-size:.78rem}.side-actions{display:flex;flex-direction:row;gap:6px;align-items:stretch}.register-btn,.hide-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:#14304ea6;color:var(--text);cursor:pointer;transition:.2s ease}.register-btn strong,.hide-btn strong{font-size:.78rem;font-weight:600}.register-btn span,.hide-btn span{font-size:.68rem;color:var(--muted);font-family:var(--font-display);letter-spacing:.06em}.register-btn.formal{box-shadow:inset 0 0 0 1px #96d2ff33}.register-btn.informal{border-color:#78dcb473;background:#123830a6;box-shadow:inset 0 0 0 1px #78dcb42e}.register-btn.informal span{color:#9fd9c4}.hide-btn.on{border-color:#ffaa6e80;background:#4628188c}.hide-btn.on span{color:#ffc39a}.register-btn:hover,.hide-btn:hover{border-color:#96dcff8c;background:#285a8c8c}.line-fr-only{margin:0;line-height:1.55;color:#e8f4ff;white-space:pre-wrap;word-break:break-word}.line-zh-under{margin:8px 0 0!important;padding-top:8px;border-top:1px dashed rgba(110,200,255,.22);color:#b7d3ea;font-size:.95rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}.line-sub-label{display:block;color:var(--cyan);font-size:.68rem;margin-bottom:2px}.error{margin:0 18px 8px;color:var(--danger);font-size:.9rem}.composer{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px 18px 18px;border-top:1px solid rgba(110,200,255,.16)}.composer-actions{display:flex;flex-direction:column;gap:8px}.composer textarea{resize:none;border-radius:16px;border:1px solid var(--line);background:#050e1cd9;color:var(--text);padding:12px 14px;outline:none}.composer textarea:focus{border-color:#96dcff8c;box-shadow:0 0 0 3px #50a0e626}.composer-actions button{border:1px solid var(--line);background:#14304e8c;color:var(--text);border-radius:999px;padding:10px 16px;cursor:pointer;transition:.2s ease;white-space:nowrap}.composer-actions button:hover{border-color:#6ec8ff8c;background:#285a8c8c}.composer-actions button:disabled{opacity:.45;cursor:not-allowed}.voice-btn{border-color:#6ec8ff8c!important;background:linear-gradient(180deg,#4696dcd9,#2364aae6)!important;color:#f2f9ff!important;box-shadow:0 0 16px #50aaff59;font-weight:600}.voice-btn:hover{background:linear-gradient(180deg,#5aaaf0f2,#2d78bef2)!important;border-color:#b4e6ffb3!important}.line-zh-dict{margin:0;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--text)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#020810b8;display:grid;place-items:center;z-index:20;padding:16px}.modal{width:min(480px,100%);background:#0b1a2d;border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:12px}.modal h2{margin:0;font-family:var(--font-display);letter-spacing:.08em;font-size:1.1rem}.modal-hint{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}.modal label{display:grid;gap:6px;font-size:.85rem;color:var(--cyan)}.modal input{border-radius:12px;border:1px solid var(--line);background:#050e1ce6;color:var(--text);padding:10px 12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}@keyframes idle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.015)}}@keyframes speak-pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.12)}}@media(max-width:900px){.topbar{grid-template-columns:1fr auto;gap:10px}.mode-btn{grid-column:1 / -1;justify-self:stretch}.topbar .ghost-btn{justify-self:end}.stage{grid-template-columns:1fr}.avatar-panel{min-height:auto;padding:20px}.avatar-ring{width:min(56vw,220px)}.chat-panel{min-height:62vh}.live-translate-row{grid-template-columns:1fr}.side-actions{justify-content:flex-end}.live-translate{grid-template-columns:1fr 1fr}.register-btn,.hide-btn{min-width:64px}.composer-actions{flex-direction:column}}