:root{--bg:#f4f5f9;--card:#fff;--ink:#1c2033;--mute:#6b7190;--acc:#4f46e5;--line:#e4e6ef;--ok:#16a34a;--warn:#d97706;--bad:#dc2626}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,sans-serif;background:var(--bg);color:var(--ink)}
header{display:flex;align-items:baseline;gap:16px;padding:16px 28px;background:var(--card);border-bottom:1px solid var(--line)}
h1{margin:0;font-size:22px}h1 span{color:var(--acc)}
header p{margin:0;color:var(--mute);flex:1}
.badge{font-size:12px;padding:3px 10px;border-radius:99px;background:#e0e7ff;color:var(--acc)}
.badge.demo{background:#fef3c7;color:var(--warn)}
main{display:grid;grid-template-columns:minmax(300px,2fr) 3fr;gap:20px;padding:20px 28px;align-items:start}
@media(max-width:800px){main{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
#drop{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:32px 12px;border:2px dashed #c3c7e0;border-radius:10px;cursor:pointer;color:var(--mute)}
#drop:hover,#drop.over{border-color:var(--acc);background:#f5f5ff}
#drop strong{color:var(--ink)}
#preview{margin-top:16px}
#viewer{max-height:70vh;overflow:auto;border:1px solid var(--line);background:#eceef6;cursor:grab}
.imgwrap{position:relative;width:100%;transform-origin:0 0}
.imgwrap img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.zoombar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.zoombar button{padding:3px 12px;border:1px solid var(--line);background:var(--card);border-radius:6px}
.zoombar span{min-width:52px;text-align:center;color:var(--mute);font-variant-numeric:tabular-nums}
#boxes div{position:absolute;border:2px solid var(--acc);background:rgba(79,70,229,.12);pointer-events:none}
button{font:inherit;cursor:pointer}
#go{display:block;width:100%;margin-top:14px;padding:10px;border:0;border-radius:8px;background:var(--acc);color:#fff;font-weight:600}
#go:disabled{opacity:.5;cursor:wait}
#empty,#loading{color:var(--mute);text-align:center;padding:60px 0}
.spinner{width:32px;height:32px;margin:0 auto 12px;border:4px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
#error{background:#fef2f2;color:var(--bad);padding:12px;border-radius:8px;white-space:pre-wrap}
#tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
#tabs button{border:0;background:none;padding:8px 14px;color:var(--mute);border-bottom:2px solid transparent}
#tabs button.on{color:var(--acc);border-color:var(--acc);font-weight:600}
#tabs i{font-style:normal;font-size:12px;background:var(--bg);padding:1px 7px;border-radius:99px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;color:var(--mute)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr.hl:hover{background:#f5f5ff}
.conf{font-size:12px;font-weight:600}.hi{color:var(--ok)}.mid{color:var(--warn)}.lo{color:var(--bad)}
.k{color:var(--mute);font-family:ui-monospace,monospace;font-size:13px}
.total td{font-weight:700;border-top:2px solid var(--ink)}
pre{background:#12141f;color:#d6d9f0;padding:14px;border-radius:8px;overflow:auto;max-height:65vh;font-size:13px}
.small{float:right;margin:6px;padding:3px 10px;border:1px solid var(--line);background:var(--card);border-radius:6px}
.lines div{padding:3px 0;border-bottom:1px dotted var(--line)}
#timing{margin:0 0 10px;color:var(--mute);font-size:13px}#timing b{color:var(--ink)}