*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#111;color:#ddd;font-size:14px;overflow:hidden}#layout{display:flex;flex-direction:column;height:100dvh}#g2-section{display:none}#phone-section{flex:1;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 20px;gap:8px}@media (min-width: 769px){body{overflow:auto}#layout{display:grid;grid-template-columns:300px 1fr;height:auto;min-height:100vh}#g2-section{display:flex}#phone-section{overflow:auto;padding:20px;gap:20px}}#g2-section{background:#0a0a0a;border-right:1px solid #222;padding:16px;display:flex;flex-direction:column;gap:12px}#g2-section h2{font-size:13px;color:#555;font-weight:400;letter-spacing:.05em}#g2-section h2 small{font-size:11px}.g2-screen{background:#030603;color:#00e87a;font-family:Courier New,monospace;font-size:13px;line-height:1.55;padding:12px;border:1px solid #0a2a15;border-radius:3px;min-height:220px}.g2-header{font-size:11px;color:#084;margin-bottom:8px}.g2-heard{margin-bottom:10px;color:#afc}.g2-candidate{margin-bottom:10px;padding:5px 7px;border:1px solid transparent;border-radius:2px}.g2-candidate.g2-selected{border-color:#00e87a;background:#041a0a}.g2-key{font-weight:700;margin-right:4px}.g2-label{font-size:11px;color:#084}.g2-reply-ja{margin-top:3px;font-size:12px}.g2-reply-target{margin-top:2px;font-size:12px;color:#00c060}.g2-reply-pinyin{margin-top:1px;font-size:11px;color:#007a44;font-style:italic}.g2-message{color:#888;font-style:italic}#g2-keys{display:flex;gap:4px;flex-wrap:wrap}#g2-keys button{background:#1a1a1a;color:#00e87a;border:1px solid #2a2a2a;border-radius:3px;padding:4px 8px;font-size:11px;cursor:pointer;font-family:inherit}#g2-keys button:hover{background:#222}#g2-keys button:active{background:#0a2a15}#g2-kbd-hint{font-size:11px;color:#444;line-height:1.6}#phone-section h2{font-size:13px;color:#555;font-weight:400;letter-spacing:.05em;display:none}@media (min-width: 769px){#phone-section h2{display:block}}#mode-container{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}#mode-container::-webkit-scrollbar{display:none}@media (min-width: 769px){#mode-container{flex-wrap:wrap;overflow-x:visible}}.mode-btn{background:#1e1e1e;color:#aaa;border:1px solid #333;border-radius:20px;padding:5px 14px;font-size:13px;cursor:pointer;font-family:inherit;transition:background .1s,color .1s}.mode-btn:hover{background:#252525;color:#ddd}.mode-btn.active{background:#1a3a25;color:#00e87a;border-color:#00e87a55}#heard-display{padding:8px 12px;background:#1a1a2e;border-left:3px solid #4a9eff;border-radius:4px;flex-shrink:0}#heard-display:empty{display:none}.heard-en{margin:0 0 2px;font-size:.9rem;color:#cce0ff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.heard-ja{margin:0;font-size:.8rem;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#candidates-container{display:flex;flex-direction:column;gap:8px;flex:1;flex-shrink:0;overflow:hidden;padding-bottom:8px}.candidate{flex:1;display:flex;flex-direction:column;justify-content:center;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:14px 16px;transition:border-color .1s,background .1s;min-height:0}.candidate.selected{border-color:#00e87a88;background:#0d2018}.candidate-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px}.candidate-key{font-weight:700;font-size:18px;color:#00e87a;flex-shrink:0;line-height:1.3}.candidate-ja{font-size:15px;color:#ddd;line-height:1.4}.candidate-target{font-size:14px;color:#888;line-height:1.4}.candidate-pinyin{font-size:12px;color:#5a9a7a;line-height:1.4;font-style:italic}#stt-status{font-size:11px;color:#084;min-height:16px;flex-shrink:0}.listen-btn{width:100%;padding:18px;background:#0d2018;color:#00e87a;border:2px solid #00e87a;border-radius:10px;font-size:17px;font-family:inherit;cursor:pointer;flex-shrink:0}.listen-btn.listening{background:#1a0d0d;color:#ff6b6b;border-color:#ff6b6b}.listen-btn:active{opacity:.7}.mic-btn{width:100%;padding:14px;background:#1a3a25;color:#00e87a;border:1px solid #00e87a55;border-radius:10px;font-size:16px;font-family:inherit;cursor:pointer;flex-shrink:0}.mic-btn:hover{background:#1f4a2e}.mic-btn:disabled{opacity:.5;cursor:default}.auto-btn{width:100%;padding:10px;background:#1a1a1a;color:#888;border:1px solid #333;border-radius:10px;font-size:14px;font-family:inherit;cursor:pointer;flex-shrink:0}.auto-btn.active{background:#1a2a3a;color:#4a9eff;border-color:#4a9eff88}.auto-btn:hover{opacity:.85}#settings-panel{border:1px solid #2a2a2a;border-radius:6px;padding:10px 14px;flex-shrink:0;margin-bottom:12px}#settings-panel summary{font-size:12px;color:#666;cursor:pointer;user-select:none}#settings-body{display:flex;flex-direction:column;gap:10px;margin-top:12px}#settings-body label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#888}#settings-body input,#settings-body select{background:#111;color:#ddd;border:1px solid #333;border-radius:4px;padding:5px 8px;font-size:13px;font-family:inherit}#settings-body button{align-self:flex-start;background:#1a3a25;color:#00e87a;border:1px solid #00e87a55;border-radius:4px;padding:5px 14px;font-size:13px;cursor:pointer;font-family:inherit}#settings-body button:hover{background:#1f4a2e}#s-token-status{font-size:12px;color:#888}.phone-overlay{position:fixed;inset:0;background:#000000eb;display:none;justify-content:center;align-items:center;z-index:100;flex-direction:column;gap:20px;padding:40px}.phone-display-inner{text-align:center;max-width:600px}.phone-display-target{font-size:52px;font-weight:700;color:#fff;line-height:1.2}.phone-display-ja{font-size:18px;color:#999;margin-top:16px}.phone-display-close{margin-top:32px;background:transparent;color:#555;border:1px solid #333;border-radius:4px;padding:8px 24px;font-size:14px;cursor:pointer;font-family:inherit}.phone-display-close:hover{color:#aaa;border-color:#555}