:root{--bg:#15171b;--panel:#1c1f25;--line:#2c313a;--text:#e4e6eb;--dim:#8b93a1;--accent:#7aa2f7;--amber:#e0a458;--amber-bg:rgba(224,164,88,.14);--danger:#e06c75}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px}.settings-fields code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.bubble,.hanzi,.composer input{font-family:Noto Sans SC,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Source Han Sans SC,sans-serif}.app{height:100dvh;display:flex;position:fixed;inset:0;overflow:hidden}.login-screen{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;font-size:18px;display:flex}.login-form{flex-direction:column;gap:12px;width:min(320px,100vw - 32px);display:flex}.app-brand{flex-shrink:0;line-height:0}.app-brand img{width:48px;height:auto;display:block}.login-screen .app-brand{margin-bottom:16px}.login-screen .app-brand img{width:min(256px,100vw - 32px)}.pane{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.tab-bar{border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:8px 16px 0;display:flex}button.tab{color:var(--dim);background:0 0;border-bottom:3px solid transparent;border-radius:0;padding:12px 18px}button.tab.active{color:var(--accent);border-bottom-color:var(--accent)}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.chat-view,.tab-view{flex:1;min-height:0;display:flex}.chat-view[hidden],.tab-view[hidden]{display:none}.page{flex:1;padding:24px;overflow-y:auto}.page h1{margin:0 0 20px;font-size:26px}.vocab-controls{flex-wrap:wrap;gap:16px;margin-bottom:16px;display:flex}.vocab-controls label,.settings-fields label{flex-direction:column;gap:8px;display:flex}.search-field{flex:1;min-width:min(280px,100%)}.new-chat-dialog{border:1px solid var(--line);background:var(--panel);width:min(480px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text);border-radius:16px;padding:0;box-shadow:0 16px 48px rgba(0,0,0,.4)}.new-chat-dialog::backdrop{background:rgba(0,0,0,.6)}.new-chat-form{background:var(--panel);flex-direction:column;gap:8px;padding:24px;display:flex}.new-chat-form h2{margin:0 0 8px;font-size:22px}.new-chat-form .hint{margin:0}.new-chat-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.login-form input,.new-chat-form input,.page input,.page select{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0;padding:10px 12px}.vocab-group h2{align-items:center;gap:12px;margin:28px 0 12px;font-size:19px;display:flex}.word-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));grid-auto-rows:184px;gap:12px;display:grid;position:absolute;left:0;right:0}.virtual-word-grid{position:relative}.vocab-page{overflow-anchor:none}.word-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);overflow-wrap:anywhere;border-radius:10px;padding:10px 12px;overflow-y:auto}.word-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.word-heading .hanzi{margin-right:auto;font-size:24px}.word-pos{flex-wrap:wrap;justify-content:flex-end;gap:4px;min-width:0;display:flex}.pos-bubble{--pos-hue:210;border:1px solid hsl(var(--pos-hue) 45% 65% / .4);background:hsl(var(--pos-hue) 45% 45% / .2);color:hsl(var(--pos-hue) 65% 78%);border-radius:999px;padding:2px 8px;font-size:11px;line-height:1.5}.pos-bubble[data-pos=noun]{--pos-hue:210}.pos-bubble[data-pos=verb]{--pos-hue:145}.pos-bubble[data-pos=adjective]{--pos-hue:280}.pos-bubble[data-pos=adverb]{--pos-hue:35}.pos-bubble[data-pos=pronoun]{--pos-hue:185}.pos-bubble[data-pos=numeral]{--pos-hue:55}.pos-bubble[data-pos=classifier]{--pos-hue:95}.pos-bubble[data-pos=preposition]{--pos-hue:245}.pos-bubble[data-pos=conjunction]{--pos-hue:315}.pos-bubble[data-pos=particle]{--pos-hue:15}.pos-bubble[data-pos=interjection]{--pos-hue:345}.definition-edit{flex-shrink:0;place-items:center;padding:4px;display:grid}.page input.known-checkbox,.popover input.known-checkbox{appearance:none;border:2px solid var(--dim);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;place-content:center;width:22px;height:22px;margin:0;padding:0;display:grid}.page input.known-checkbox:checked,.popover input.known-checkbox:checked{background:#89c99b;border-color:#89c99b}.known-checkbox:checked:after{content:"";border:solid var(--bg);border-width:0 2px 2px 0;width:5px;height:9px;transform:translateY(-1px)rotate(45deg)}.known-checkbox:disabled{opacity:.5;cursor:wait}.word-card .pinyin{color:var(--accent);margin:4px 0}.chat-word.unresolved{border-bottom:1px dotted var(--dim)}.word-card .definition-pinyin{color:var(--accent)}.word-card .definition{margin:4px 0;line-height:1.5}.settings-fields{border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:24px;max-width:520px;margin:24px 0 16px;padding:20px;display:flex}.settings-fields label:has(input[type=checkbox]){cursor:pointer;flex-direction:row;align-items:center;gap:12px;min-height:32px}.csv-example{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-x:auto}.import-success{color:#98c379;margin:0}.import-failure{flex-direction:column;gap:12px;display:flex}.import-failure .hint{color:var(--danger);margin:0}.import-table-scroll{border:1px solid var(--line);border-radius:10px;max-height:360px;overflow:auto}.import-table{border-collapse:separate;border-spacing:0;text-align:left;width:100%}.import-table th,.import-table td{border-bottom:1px solid var(--line);padding:10px 14px}.import-table th{background:var(--panel);position:sticky;top:0}.import-table tr:last-child td{border-bottom:none}button.mark-known-button{color:var(--bg);background:#98c379}.export-result{background:var(--panel);border:1px solid var(--line);border-radius:10px;align-items:center;gap:12px;padding:10px 14px;font-size:14px;line-height:1.5;display:flex}.export-result p{margin:0}.export-result-icon{color:var(--accent);flex-shrink:0}.settings-fields input[type=checkbox]{appearance:none;border:2px solid var(--dim);background:var(--bg);cursor:pointer;border-radius:6px;flex-shrink:0;place-content:center;width:22px;height:22px;margin:0;padding:0;display:grid}.settings-fields input[type=checkbox]:hover:not(:disabled){border-color:var(--accent)}.settings-fields input[type=checkbox]:checked{border-color:var(--accent);background:var(--accent)}.settings-fields input[type=checkbox]:checked:after{content:"";border:solid var(--bg);border-width:0 2px 2px 0;width:5px;height:9px;transform:translateY(-1px)rotate(45deg)}.settings-fields input[type=checkbox]:disabled{opacity:.5;cursor:wait}.settings-fields:disabled label:has(input[type=checkbox]){cursor:wait}.spacer{flex:1}.tag{border:1px solid var(--line);color:var(--dim);border-radius:10px;padding:1px 7px;font-size:12px}.error-banner{width:100%;color:var(--danger);background:rgba(224,108,117,.12);flex-shrink:0;grid-template-columns:minmax(0,1fr) auto;align-self:stretch;align-items:center;gap:12px;padding:8px 16px;font-size:14px;display:grid}.error-banner>span{overflow-wrap:anywhere;min-width:0}.error-feedback{color:var(--text);margin-top:4px;font-size:13px;display:block}.error-banner .error-action{background:var(--panel);color:var(--text);border:1px solid var(--dim);justify-self:end;padding:6px 12px;font-size:14px;font-weight:600}.error-banner .error-action:hover:not(:disabled){background:var(--line);border-color:var(--text)}.error-banner .error-action:active:not(:disabled){background:var(--line);border-color:var(--text);transform:translateY(1px)}.error-banner .error-action:focus-visible{outline-color:var(--text)}.error-banner .error-action:disabled{opacity:.75}.messages{overscroll-behavior:contain;flex-direction:column;flex:1;gap:12px;min-height:0;padding:20px 16px;display:flex;overflow-y:auto}.row{align-items:flex-end;gap:8px;display:flex}.row.you{justify-content:flex-end}button.message-audio{width:44px;height:44px;color:var(--dim);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}button.message-audio:hover{background:var(--panel);color:var(--accent)}.row.you .message-audio{order:-1}.audio-spinner{border:2px solid;border-right-color:transparent;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite audio-spin;display:none}@keyframes audio-spin{to{transform:rotate(360deg)}}.message-audio[aria-busy=true] .audio-spinner{display:block}.message-audio[aria-busy=true] svg{display:none}.message-audio-controls{background:var(--line);-webkit-user-select:none;user-select:none;cursor:pointer;touch-action:none;border-radius:0 0 14px 14px;align-items:center;min-width:120px;margin:4px -14px -10px;padding:0 6px;display:flex;position:relative;overflow:hidden}.message-audio-controls[hidden]{display:none}button.message-audio-toggle{width:28px;height:28px;color:var(--accent);z-index:1;background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.message-audio-controls progress{appearance:none;opacity:.3;pointer-events:none;background:0 0;border:none;width:100%;height:100%;position:absolute;inset:0}.message-audio-controls progress::-webkit-progress-bar{background:0 0}.message-audio-controls progress::-webkit-progress-value{background:var(--accent)}.message-audio-controls progress::-moz-progress-bar{background:var(--accent)}.message-audio-toggle[data-paused=false] .audio-play-icon,.message-audio-toggle[data-paused=true] .audio-pause-icon{display:none}button.question-hint{border:1px solid var(--line);text-align:left;max-width:80%;min-height:44px;color:var(--dim);background:0 0;align-items:center;gap:10px;padding:6px 12px;display:flex}.question-hint-label{color:var(--accent);flex-shrink:0;font-size:13px}.question-hint .hanzi{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button.question-hint:hover,button.question-hint[aria-expanded=true]{border-color:var(--accent);background:var(--panel)}.bubble{background:var(--panel);white-space:pre-wrap;border-radius:14px;max-width:min(60ch,80%);padding:10px 14px;font-size:22px;line-height:1.75;position:relative}.row.you .bubble{-webkit-user-select:none;user-select:none;background:#2a3550}.bubble.not-understood{color:var(--danger);border-left:3px solid var(--danger);background:rgba(224,108,117,.12)}.bubble.thinking{color:var(--dim);letter-spacing:4px}.bubble.correction{color:#b8a1ee;background:#292238;border-left:3px solid #b8a1ee;font-size:16px}.chat-pinyin-line{color:var(--dim);-webkit-user-select:none;user-select:none;margin-top:4px;font-size:.72em;line-height:1.4}.unknown-wrap{position:relative}@media (any-pointer:coarse){.messages:not(.mouse-selection) .row.agent .chat-hanzi-line{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}.messages.touch-selection-enabled:not(.mouse-selection) .row.agent .chat-hanzi-line{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.chat-selection-overlay{z-index:25;pointer-events:none;position:fixed;inset:0}.chat-selection-highlight{background:rgba(127,178,255,.35);position:absolute}.chat-selection-handle{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:44px;height:44px;position:absolute;transform:translate(-50%)}.chat-selection-handle:before{content:"";background:var(--accent);width:3px;height:12px;position:absolute;top:0;left:20px}.chat-selection-handle:after{content:"";background:var(--accent);border-radius:50%;width:16px;height:16px;position:absolute;top:8px;left:14px}.unknown{background:var(--amber-bg);cursor:pointer;text-decoration-line:underline;text-decoration-style:dotted;-webkit-text-decoration-color:var(--amber);text-decoration-color:var(--amber);text-underline-offset:3px;border-radius:3px;text-decoration-thickness:2px}.popover{z-index:20;visibility:hidden;overflow-wrap:anywhere;overscroll-behavior:contain;border:1px solid var(--line);border-left:3px solid var(--amber);cursor:auto;background:#22262e;border-radius:10px;width:270px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px;font-size:15px;line-height:1.5;position:fixed;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.45)}.word-card.known{border-left-color:#89c99b}.popover-head{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;margin-right:auto;display:flex}.popover .hanzi{font-size:23px}.popover .pinyin{color:var(--accent);margin-top:2px}.popover .english{color:var(--dim);margin-top:4px}.floating{visibility:hidden;z-index:30;overscroll-behavior:contain;border:1px solid var(--line);background:#22262e;border-radius:12px;flex-wrap:wrap;gap:6px;width:max-content;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:6px;display:flex;position:fixed;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}.floating button{overflow-wrap:anywhere;min-width:0;padding:6px 10px}.composer{border-top:1px solid var(--line);flex-shrink:0;gap:8px;padding:12px 16px;display:flex}.chat-keyboard{flex:1;min-width:0}.chat-keyboard pinyin-ime-editor{--pinyin-ime-border-color:var(--line);--pinyin-ime-focus-border:var(--accent);--pinyin-ime-focus-shadow:rgba(122,162,247,.2);--pinyin-ime-popup-bg:var(--panel);--pinyin-ime-popup-border:var(--line);--pinyin-ime-cursor-color:var(--accent);--pinyin-ime-hover-bg:#22262e;--pinyin-ime-active-bg:#2a3550;--pinyin-ime-text-color:var(--text);--pinyin-ime-muted-color:var(--dim);font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;display:block}.composer input{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;outline:none;flex:1;padding:10px 12px;font-size:18px}.composer input:focus{border-color:var(--accent)}button{font:inherit;color:var(--text);background:var(--accent);cursor:pointer;border:none;border-radius:10px;padding:8px 14px}.composer button{font-size:15px}button.logout-button{background:var(--danger);min-width:120px;color:var(--bg);padding:8px 14px}button:disabled{opacity:.5;cursor:default}button.ghost{border:1px solid var(--line);color:var(--dim);background:0 0;padding:5px 10px;font-size:14px}.chat-message-area{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.chat-message-area .messages{padding-bottom:88px}button.new-chat-button{right:max(16px, env(safe-area-inset-right));width:56px;height:56px;color:var(--accent);background:var(--panel);border:1px solid var(--accent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,.4)}button.new-chat-button:hover:not(:disabled){background:var(--line)}.sidebar{border:0;border-left:1px solid var(--line);background:var(--panel);width:380px;max-width:45vw;height:100%;min-height:0;max-height:none;color:var(--text);flex-direction:column;flex-shrink:0;margin:0;padding:0;display:flex;position:static}.sidebar:not([open]){display:none}.sidebar-head{border-bottom:1px solid var(--line);flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:8px;padding:12px 14px;display:flex}.sidebar-quote{flex:1;min-width:0;margin:0}button.sidebar-close{flex-shrink:0;min-width:44px;min-height:44px}.sidebar-head .hanzi{overflow-wrap:anywhere;font-size:20px}.turns{overscroll-behavior:contain;flex-direction:column;flex:1;gap:14px;min-height:0;padding:14px;display:flex;overflow-y:auto}.turn .q{color:var(--accent);margin:0 0 6px;font-size:14px}.turn .a{overflow-wrap:anywhere;margin:0;line-height:1.6}.turn .a>:first-child{margin-top:0}.turn .a>:last-child{margin-bottom:0}.turn .a p{white-space:pre-line;margin:0 0 12px}.sidebar .composer input{min-width:0;font-size:16px}.sidebar .composer{flex-shrink:0}@media (width<=767px){.sidebar{inset:auto 0 var(--sheet-bottom,0px);width:100%;max-width:none;height:min(80dvh, var(--sheet-height,100dvh));max-height:var(--sheet-height,100dvh);border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;position:fixed;overflow:hidden;box-shadow:0 -8px 32px rgba(0,0,0,.35)}.sidebar::backdrop{background:rgba(0,0,0,.4)}.sidebar-head{padding-left:max(14px, env(safe-area-inset-left));padding-right:max(14px, env(safe-area-inset-right))}.composer{padding-bottom:max(12px, env(safe-area-inset-bottom));padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}.sidebar .composer button{min-height:44px}}.hint{color:var(--dim);margin:0;font-size:14px}