.input-wrapper{width:100%;max-width:900px;margin:0 auto;padding:40px 20px}.input-area{position:relative}.ime-input{resize:vertical;color:#1e293b;letter-spacing:4px;background-color:#fff;border:2px solid #e2e8f0;border-radius:12px;outline:none;width:100%;min-height:200px;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:24px;line-height:1.6;transition:all .2s}.ime-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.ime-input::placeholder{letter-spacing:normal;color:#94a3b8}.dark .ime-input{color:#f1f5f9;background-color:#1e293b;border-color:#334155}.dark .ime-input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa33}.dark .ime-input::placeholder{color:#64748b}.ime-panel{z-index:50;background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-top:8px;display:none;position:absolute;top:100%;left:0;right:0;overflow:hidden;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.ime-panel:has(.candidates-list:not(:empty)){display:block}.dark .ime-panel{background:#1e293b;border-color:#334155}.pinyin-display{color:#3b82f6;background:#f1f5f9;border-bottom:1px solid #e2e8f0;padding:12px 16px;font-size:18px;font-weight:600}.dark .pinyin-display{color:#60a5fa;background:#334155;border-color:#475569}.candidates-list{flex-wrap:wrap;gap:4px;max-height:200px;padding:8px;display:flex;overflow-y:auto}.candidate-item{cursor:pointer;border-radius:8px;align-items:center;padding:8px 14px;transition:background-color .15s;display:flex}.candidate-item:hover,.candidate-item.active{color:#2563eb;background-color:#eff6ff}.dark .candidate-item:hover,.dark .candidate-item.active{color:#60a5fa;background-color:#1e3a5f}.candidate-index{color:#94a3b8;margin-right:6px;font-size:12px;font-weight:500}.candidate-word{font-size:20px;font-weight:500}.handwriting-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px}.dark .handwriting-panel{background:#1e293b;border-color:#334155}.canvas-container{background:#fff;border:2px solid #cbd5e1;border-radius:8px;flex:1;min-width:280px;height:220px;position:relative;overflow:hidden}.dark .canvas-container{background:#0f172a;border-color:#475569}.handwriting-canvas{cursor:crosshair;touch-action:none;width:100%;height:100%}.canvas-actions{gap:4px;display:flex;position:absolute;top:8px;right:8px}.candidates-container{min-width:200px;max-width:280px}.candidates-label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-size:12px;font-weight:500}.candidates-grid{flex-wrap:wrap;gap:8px;display:flex}.candidate-btn{cursor:pointer;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;transition:all .15s;display:flex}.candidate-btn:hover{color:#fff;background:#3b82f6;border-color:#3b82f6}.dark .candidate-btn{color:#f1f5f9;background:#334155;border-color:#475569}.dark .candidate-btn:hover{background:#3b82f6;border-color:#3b82f6}@media (max-width:640px){.handwriting-panel>.flex{flex-direction:column}.canvas-container{min-width:100%;height:200px}.candidates-container{max-width:100%;margin-top:12px}.candidates-grid{justify-content:flex-start}}