:root{--bg1:#eef2ff;--bg2:#fdf2f8;--card:rgba(255,255,255,.86);--fg:#172033;--mut:#667085;--acc:#4f46e5;--acc2:#7c3aed;--bd:#e4e7ef;--soft:#f4f6fb;--red:#e5484d;--sh:0 10px 30px rgba(30,41,90,.08)}
@media(prefers-color-scheme:dark){:root{--bg1:#0b1020;--bg2:#1a1030;--card:rgba(22,27,40,.88);--fg:#e8ebf4;--mut:#8f98ad;--acc:#818cf8;--acc2:#a78bfa;--bd:#2a3145;--soft:#1c2233;--sh:0 10px 30px rgba(0,0,0,.35)}}
*{box-sizing:border-box}html,body{margin:0}
body{min-height:100vh;background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;color:var(--fg);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;padding:28px 14px 60px}
.wrap{max-width:560px;margin:0 auto}
.top{display:flex;align-items:center;gap:14px;margin-bottom:16px}.top>div:nth-child(2){flex:1}
.logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:var(--sh)}
h1{margin:0;font-size:22px;letter-spacing:.3px}.top p{margin:2px 0 0;color:var(--mut);font-size:13px}
.ring{width:52px;height:52px;flex:none}.ring circle{fill:none;stroke-width:4}.trk{stroke:var(--bd)}
.arc{stroke:var(--acc);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;stroke-dasharray:119.38;transition:stroke-dashoffset .3s linear,stroke .3s}
.ring text{font:600 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:var(--fg)}.ring.low .arc{stroke:var(--red)}.ring.low text{fill:var(--red)}
.card{background:var(--card);backdrop-filter:blur(10px);border:1px solid var(--bd);border-radius:20px;padding:18px;box-shadow:var(--sh);margin-bottom:16px}
textarea,input{width:100%;padding:12px 14px;border:1.5px solid var(--bd);border-radius:12px;background:var(--soft);color:var(--fg);font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;outline:none;transition:border .15s,box-shadow .15s;resize:vertical}
input{font-family:inherit}textarea:focus,input:focus{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 20%,transparent)}
.row{display:flex;gap:10px;margin-top:10px}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;transition:transform .08s,opacity .15s}button:active{transform:scale(.97)}
.primary{padding:0 22px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:600;white-space:nowrap}
.ghost{background:none;color:var(--mut);font-size:13px;padding:4px 8px}.ghost:hover{color:var(--red)}
.err{color:var(--red);font-size:13px;margin:8px 2px 0;min-height:0}.err:empty{display:none}
.results{display:grid;gap:10px;margin-top:12px}.results:empty{display:none}
.res{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--soft);border:1px solid var(--bd);cursor:pointer}
.res .lb{flex:1;min-width:0}.res .em{font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code{font:700 34px/1.15 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:2px;color:var(--fg)}.res.one .code{font-size:46px}
.low .code,.code.low{color:var(--red)}
.icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--card);border:1px solid var(--bd);color:var(--fg);flex:none}
.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon.del:hover{color:var(--red)}
.hhead{display:flex;justify-content:space-between;align-items:center}h2{font-size:15px;margin:0}
.hist{list-style:none;padding:0;margin:10px 0 0}.hist li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid var(--bd)}
.hist .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;cursor:pointer}.hist .n:hover{color:var(--acc)}
.hist .c{font:600 19px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;cursor:pointer}.hist .icon{width:32px;height:32px}
.hist .empty{color:var(--mut);justify-content:center;font-size:13px}
.foot{color:var(--mut);font-size:12px;margin:10px 0 0;text-align:center}
#toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);background:rgba(20,24,36,.92);color:#fff;padding:9px 18px;border-radius:999px;font-size:13px;opacity:0;transition:.2s;pointer-events:none}#toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:480px){body{padding:18px 10px 50px}.code{font-size:28px}.res.one .code{font-size:38px}.row{flex-direction:column}.primary{padding:11px}h1{font-size:19px}}