:root{--primary: #007aff;--primary-hover: #0062cc;--bg: #f5f5f7;--card-bg: rgba(255, 255, 255, .8);--text: #1d1d1f;--text-secondary: #86868b;--border: #d2d2d7;--key-bg: #ffffff;--key-shadow: 0 1px 2px rgba(0, 0, 0, .1);--radius: 16px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.main-card{width:100%;max-width:480px;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius);box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.4);display:flex;flex-direction:column;overflow:hidden}.header{padding:20px 24px;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:8px}.logo-icon{font-size:20px;color:var(--primary)}.header h1{font-size:18px;margin:0;font-weight:600;letter-spacing:-.02em}.github-link{font-size:13px;color:var(--text-secondary);text-decoration:none;padding:6px 12px;border-radius:20px;background:#0000000d;transition:all .2s}.github-link:hover{background:#0000001a;color:var(--text)}.display-area{padding:0 24px 16px}.pinyin-indicator{font-size:13px;color:var(--primary);height:18px;margin-bottom:4px;font-weight:500;opacity:0;transition:opacity .2s}.pinyin-indicator.visible{margin-left:2px;animation:blink 1s step-end infinite;will-change:opacity;word-break:break-all;line-height:1.2}.cursor{color:var(--primary);animation:blink 1s step-end infinite;margin-left:2px;will-change:opacity}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.candidate-bar{height:56px;display:flex;align-items:center;padding:0 16px;gap:8px;background:#00000005;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.candidate-bar::-webkit-scrollbar{display:none}.candidate-item{min-width:44px;height:40px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border-radius:8px;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.candidate-item:hover{background:#007aff1a;color:var(--primary)}.candidate-item:active{transform:scale(.9)}.empty-hint{width:100%;text-align:center;color:var(--text-secondary);font-size:14px}.input-tabs{display:flex;padding:12px 24px;gap:8px}.tab-btn{flex:1;border:none;padding:8px;font-size:14px;font-weight:500;border-radius:10px;cursor:pointer;background:#0000000d;color:var(--text-secondary);transition:all .2s}.tab-btn.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px #0000000d}.panel-container{padding:0 24px 20px;height:260px}.handwriting-panel{height:100%}.canvas-container{width:100%;height:100%;background:#fff;border-radius:12px;border:1px solid var(--border);touch-action:none;cursor:crosshair;transition:border-color .3s}.canvas-container.drawing{border-color:var(--primary)}canvas{width:100%;height:100%;display:block}.keyboard{display:flex;flex-direction:column;gap:8px}.kb-row{display:flex;justify-content:center;gap:6px}.key{height:44px;flex:1;background:var(--key-bg);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--key-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .1s}.key:active{transform:translateY(2px);background:#f2f2f7;box-shadow:none}.key.wide{flex:1.5;font-size:14px;background:#f2f2f7}.key.danger{color:#ff3b30}.key.space{flex:5;font-size:14px}.actions{padding:0 24px 24px;display:grid;grid-template-columns:1fr 2fr;gap:12px}.btn{border:none;padding:14px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:#0000000d;color:var(--text)}.btn-secondary:hover{background:#0000001a}.btn:active{transform:scale(.98)}.loading-overlay{position:absolute;inset:0;background:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f2f2f7;border-top-color:var(--primary);border-radius:50%;animation:spin 1s cubic-bezier(.4,0,.2,1) infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.loader-text{font-size:15px;color:var(--text-secondary)}.mini-spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin-right:6px;vertical-align:middle}.recognizer-hint{color:var(--primary);font-weight:500}