:root{--ink:#1d1d1f;--mut:#6b6b70;--line:#e3e3e6;--bg:#f6f6f4;--ok:#1f7a45;--warn:#b25b00;--acc:#1d1d1f}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,system-ui,Segoe UI,sans-serif}
#app{max-width:980px;margin:0 auto;padding:16px}
h1{font-size:1.4rem;margin:8px 0 2px}.muted{color:var(--mut);font-size:.9rem}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 16px}
.prog{flex:1;min-width:140px;height:8px;background:var(--line);border-radius:4px;overflow:hidden}.prog>i{display:block;height:100%;background:var(--ok)}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin:14px 0}
.card h2{font-size:1rem;margin:0 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{font-size:.75rem;padding:2px 8px;border-radius:99px;background:var(--line);color:var(--ink)}.badge.ok{background:#dff3e6;color:var(--ok)}.badge.warn{background:#fdebd3;color:var(--warn)}.badge.test{background:#ffe9a8}
.imgwrap{position:relative;line-height:0;cursor:crosshair}.imgwrap img{width:100%;height:auto;border-radius:6px;display:block}
.pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#d6336c;color:#fff;font:600 12px/22px sans-serif;text-align:center;pointer-events:none}.pin.new{background:#1971c2}.pin.old{opacity:.4}
.thread{margin:10px 0}.cm{padding:8px 10px;border-radius:8px;background:#f3f3f1;margin:6px 0;font-size:.95rem;white-space:pre-wrap;word-break:break-word}.cm.p{background:#e8f0fe}.cm small{display:block;color:var(--mut)}
textarea,input{width:100%;font:inherit;padding:9px;border:1px solid var(--line);border-radius:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
button{font:inherit;padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer}button.pri{background:var(--acc);color:#fff;border-color:var(--acc)}button.ok{background:var(--ok);color:#fff;border-color:var(--ok)}button:disabled{opacity:.45;cursor:default}
.note{background:#fff7e0;border:1px solid #f0d98a;border-radius:8px;padding:8px 10px;font-size:.88rem;margin:8px 0}.err{color:#b00020;font-size:.9rem;margin-top:6px}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.chip{padding:6px 12px;border-radius:99px;font-size:.85rem}.chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.toast{position:sticky;top:8px;z-index:5;background:#e9f6ee;border:1px solid #b9dfc8;color:#14532d;border-radius:8px;padding:10px 12px;margin:8px 0;font-size:.92rem}
.zoom{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;background:#111;z-index:50;display:flex;flex-direction:column}.zbar{display:flex;gap:8px;align-items:center;padding:8px 12px;color:#fff;background:#000;flex-wrap:wrap}.zbar b{flex:1;min-width:140px}
.zscroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.zimg{display:block;width:max(100vw,2400px);max-width:none;height:auto}
@media (max-width:600px){.zimg{width:2400px}}

.swap{margin-top:10px;border:1px dashed var(--line);border-radius:8px;padding:8px}.swap summary{cursor:pointer;font-weight:600}.swap input{margin-top:8px}.att{max-width:220px;border-radius:6px;display:block;margin:6px 0}