:root{--bg:#f4f6f3;--panel:#ffffff;--ink:#1d2b26;--muted:#6b7a75;--key:#ffffff;--func:#e7efe9;--accent:#1f6f54;--accent-ink:#ffffff;--pressed:#cfe6da;--border:#d5ded9;--gloss:#75857f}html[data-theme=dark]{--bg:#101715;--panel:#16211d;--ink:#e8f0ec;--muted:#93a49d;--key:#22302b;--func:#1b2924;--accent:#3fa37f;--accent-ink:#06231a;--pressed:#2c4a3f;--border:#26352f;--gloss:#9db3aa}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}#app{max-width:720px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}#topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px}.brand{display:flex;gap:10px;align-items:center}.logo{width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}.t1{font-weight:700}.t2{font-size:12px;color:var(--muted)}.top-actions{display:flex;gap:6px;flex-wrap:wrap}.top-actions button,.panel button,#btn-expand,#btn-clear-pred,#btn-collapse,#btn-clear-compose{border:1px solid var(--border);background:var(--panel);color:var(--ink);border-radius:10px;padding:7px 10px;font-size:14px;cursor:pointer}#btn-mode{min-width:44px;font-weight:700}#editor-wrap{padding:0 12px}#editor{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px;font-size:17px;line-height:1.6;background:var(--panel);color:var(--ink);resize:vertical}#composing-row{display:flex;align-items:center;gap:8px;margin:8px 0 0}#raw-chip{background:var(--func);border:1px solid var(--border);border-radius:8px 8px 8px 0;padding:2px 10px;font-size:14px;border-left:3px solid var(--accent)}#fixed-prefix{font-size:16px}#status{font-size:12px;color:var(--muted);margin:6px 0}#candidate-wrap{display:flex;gap:6px;padding:0 12px;align-items:stretch;min-height:58px}#candidates{flex:1;display:flex;gap:4px;overflow-x:auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:4px 6px;scrollbar-width:thin}.cand{min-width:76px;max-width:166px;border-radius:9px;padding:2px 10px 4px;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid transparent;flex:0 0 auto}.cand.first{background:var(--func)}.cand.pressed{background:var(--pressed)}.cand .g{font-size:11px;color:var(--gloss);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}.cand .w{font-size:19px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cand .up{font-size:11px;color:var(--accent);float:right}#grid-wrap{margin:8px 12px 0;background:var(--panel);border:1px solid var(--border);border-radius:12px;max-height:316px;display:flex;flex-direction:column}#grid-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-size:13px;color:var(--muted)}#grid{overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 10px 10px}#grid .cand{border:1px solid var(--border);max-width:none}#keyboard{margin:8px 12px 0;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:6px;touch-action:none;-webkit-user-select:none;user-select:none}.kb-row{display:flex;gap:5px;margin:3px 0}.key{flex:1;min-width:0;border-radius:8px;background:var(--key);border:1px solid var(--border);padding:0;height:calc(46px * var(--kb-scale,1));display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative}.key.func{background:var(--func);font-size:13px}.key.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}.key.pressed{background:var(--pressed)}.key .main{font-size:19px;line-height:1}.key.func .main{font-size:13px}.key .sub{font-size:9px;color:var(--muted);position:absolute;top:3px;right:5px}.key.space .main{font-size:12px}.panel{margin:8px 12px 0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px}.panel-title{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:8px}.panel-title .hint{font-weight:400;font-size:12px;color:var(--muted)}.edit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.clip-title{margin:10px 0 6px;font-size:13px;color:var(--muted)}#clipboard{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow:auto}.clip-item{display:flex;justify-content:space-between;gap:8px;border:1px solid var(--border);border-radius:8px;padding:6px 8px;font-size:13px}#emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;font-size:22px}#emoji-grid span{text-align:center;cursor:pointer;padding:6px 0;border-radius:8px}#emoji-grid span:hover{background:var(--func)}.row{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:14px}.links{justify-content:space-between;font-size:12px;color:var(--muted)}#detail-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;padding:20px;z-index:30}.detail-card{background:var(--panel);color:var(--ink);border-radius:14px;max-width:520px;width:100%;padding:14px;border:1px solid var(--border)}.detail-head{display:flex;gap:10px;align-items:center}.detail-head strong{font-size:22px}#detail-pinyin{color:var(--muted);font-size:13px}#detail-meanings{margin:10px 0;font-size:14px;line-height:1.7;white-space:pre-wrap}.detail-src{font-size:12px;color:var(--muted)}.detail-actions{display:flex;gap:8px;margin-top:10px}#hold-popup{position:fixed;z-index:40;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:6px;display:flex;gap:6px;box-shadow:0 8px 24px #0000002e}#hold-popup button{font-size:20px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--key);color:var(--ink)}#hold-popup button.sel{background:var(--accent);color:var(--accent-ink)}#key-preview{position:fixed;z-index:40;background:var(--accent);color:var(--accent-ink);border-radius:12px;padding:8px 16px;font-size:26px;pointer-events:none;transform:translate(-50%,-110%)}#foot{text-align:center;font-size:12px;color:var(--muted);padding:14px;margin-top:auto}@media(max-width:480px){.cand{min-width:68px}#emoji-grid{grid-template-columns:repeat(6,1fr)}}