:root{--bg: #0e141b;--card: #17202a;--ink: #e8eef5;--muted: #8ea0b5;--line: #2a3a4d;--accent: #3aa1ff;--accent-ink: #041018;--cand: #1d2b3a;--shadow: 0 18px 50px rgba(0, 0, 0, .35);--radius: 16px;font-family:SF Pro Display,PingFang SC,Noto Sans SC,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);min-height:100%}button,textarea,input{font:inherit}#app{max-width:1180px;margin:0 auto;padding:28px 20px 48px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.brand{display:flex;gap:14px;align-items:center}.logo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),#7ad0ff);color:var(--accent-ink);font-weight:800;font-size:26px}h1{margin:0;font-size:22px;letter-spacing:.04em}.ver{margin-left:8px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);vertical-align:middle}.brand p,.tiny,.hint{color:var(--muted);margin:4px 0 0;font-size:13px}.top-actions,.row,.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}button{background:var(--cand);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}button:hover,button.active{border-color:var(--accent);color:#fff}button.danger{border-color:#ff6b6b}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}.editor-card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.editor-card{display:flex;flex-direction:column;min-height:620px;overflow:hidden}.toolbar{padding:12px;border-bottom:1px solid var(--line)}.hint{margin-left:auto}.editor{flex:1;min-height:360px;border:0;padding:22px;background:transparent;color:var(--ink);outline:none;line-height:1.7;font-size:20px;white-space:pre-wrap;word-break:break-word;cursor:text;-webkit-user-select:none;user-select:none}.editor.empty:before{content:attr(data-placeholder);color:var(--muted);white-space:pre-wrap}.editor .preedit{display:inline}.editor .marked{color:var(--accent);border-bottom:2px solid var(--accent);margin:0}.editor .marked.confirmed{color:var(--ink);border-bottom-style:solid}.editor .marked.pending{color:var(--accent);border-bottom-style:dotted}.editor .caret{display:inline-block;width:2px;height:1.05em;margin:0 1px;background:var(--accent);vertical-align:text-bottom;animation:caret 1s step-end infinite}.editor:not(:focus) .caret{opacity:.3;animation:none}@keyframes caret{50%{opacity:0}}.ime-bar{border-top:1px solid var(--line);padding:10px 14px 14px;background:color-mix(in srgb,var(--card) 86%,black)}.comp{font-size:15px;color:var(--accent);min-height:22px;letter-spacing:.08em}.cands{display:flex;gap:8px;list-style:none;padding:8px 0 0;margin:0;flex-wrap:wrap}.cands li{background:var(--cand);border:1px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer;display:flex;gap:6px;align-items:baseline}.cands li:hover,.cands li.on{border-color:var(--accent)}.cands b{color:var(--accent);font-weight:600}.cands small{color:var(--muted);font-size:11px}.pages{color:var(--muted);font-size:12px;margin-top:6px}.side{display:flex;flex-direction:column;gap:14px}.panel{padding:16px}.panel h2{margin:0 0 12px;font-size:16px}.panel h3{margin:16px 0 8px;font-size:14px;color:var(--muted)}.panel label{display:flex;gap:8px;align-items:center;margin:7px 0;font-size:14px}.emoji-grid,.skin-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.emoji-grid button{font-size:22px;padding:6px}.skin-swatch{height:54px;border-radius:12px;border:2px solid transparent;cursor:pointer}.skin-swatch.on{border-color:#fff}.hw-overlay{border-top:1px solid var(--line);padding:10px 14px 14px;background:color-mix(in srgb,var(--card) 90%,black);overflow-anchor:none;overscroll-behavior:contain}.hw-head{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;margin-bottom:8px;min-height:36px}.hw-head strong{flex:0 0 auto}.hw-head .hw-engine{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.hw-head button{flex:0 0 auto}.hw-engine{font-size:12px;line-height:1;padding:5px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}.hw-engine[data-mode=cnn]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.hw-engine[data-mode=geo]{color:var(--muted);background:color-mix(in srgb,var(--cand) 80%,transparent)}.hw-cands{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:8px;list-style:none;margin:0 0 10px;padding:0;width:100%;min-height:56px;overflow-x:auto}.hw-cands li{flex:0 0 auto;min-width:56px;height:56px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--cand);border:1px solid var(--line);border-radius:10px;cursor:pointer}.hw-cands li:hover,.hw-cands li.on{border-color:var(--accent)}.hw-cands b{color:var(--accent);font-weight:600;font-size:12px}.hw-cands .hw-zi{font-size:26px;line-height:1}#hw-canvas{width:100%;height:280px;display:block;background:linear-gradient(to right,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0 / 25% 100%,linear-gradient(to bottom,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0 / 100% 100%,color-mix(in srgb,var(--bg) 35%,var(--card));border:1px solid var(--line);border-radius:12px;touch-action:none;overscroll-behavior:none;cursor:crosshair;user-select:none;-webkit-user-select:none}#user-dict,#hw-teach{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px}@media(max-width:900px){.workspace{grid-template-columns:1fr}#app{padding:16px 12px 32px}}body.skin-ink{--bg:#111214;--card:#1b1d22;--ink:#f3f1ea;--muted:#9a968a;--line:#2d3038;--accent:#d8b36a;--cand:#262830;--accent-ink:#1a1408}body.skin-sakura{--bg:#2a1720;--card:#3a2030;--ink:#ffe8f0;--muted:#d7a3b5;--line:#5a3146;--accent:#ff8fb3;--cand:#4a283b;--accent-ink:#2a1018}body.skin-mint{--bg:#10211c;--card:#17352d;--ink:#e5fff5;--muted:#8ab8a8;--line:#2b5448;--accent:#3ee0b0;--cand:#1d4439;--accent-ink:#042018}body.skin-paper{--bg:#efe7d6;--card:#fffaf0;--ink:#2b2416;--muted:#7a6d55;--line:#e0d3b6;--accent:#c4552a;--cand:#f4ead4;--accent-ink:#fff;--shadow: 0 10px 30px rgba(90,70,30,.12)}body.skin-ifly{--bg:#071525;--card:#0d2138;--ink:#e7f3ff;--muted:#7aa3c7;--line:#1c3d5c;--accent:#1e9fff;--cand:#12324f;--accent-ink:#041018}