:root{--bg:#f4f5f7;--panel:#fff;--sunken:#eceef2;--line:#e4e6eb;--line-2:#d5d8df;--ink:#16181d;--ink-2:#454b57;--ink-3:#7c8391;--accent:#3355ff;--accent-2:#2443e6;--accent-weak:#eef1ff;--warn:#b45309;--warn-bg:#fff7ed;--r:8px;--font:"Inter","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 var(--font)}
header{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 20px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
header strong{font-size:15px}
header span{color:var(--ink-3);font-size:12px}
header a.back{margin-left:auto;color:var(--accent);font-weight:600;text-decoration:none;font-size:12.5px}
main{display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px;padding:16px 20px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
h2{margin:0 0 12px;font-size:13px;font-weight:650}
h2:not(:first-child){margin-top:8px}
label{display:flex;flex-direction:column;gap:5px;margin:0 0 10px;font-size:12px;font-weight:500;color:var(--ink-2)}
label.inline{flex-direction:row;align-items:center;gap:8px}
input,select,textarea{height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink);font:13px var(--font);width:100%}
textarea{height:auto;min-height:110px;padding:8px 10px;font:12px/1.7 Consolas,monospace;resize:vertical}
input[type=color]{padding:2px;height:32px}
input[type=checkbox],input[type=radio]{width:15px;height:15px}
input[type=file]{padding:5px 8px;height:auto}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.hint{margin:-4px 0 12px;font-size:11.5px;color:var(--ink-3);line-height:1.7}
.warn{padding:8px 10px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font-size:12px}
button{height:34px;padding:0 14px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink-2);font:600 12.5px var(--font);cursor:pointer}
button:hover{border-color:var(--ink-3)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{background:var(--accent-2)}
button.small{height:26px;padding:0 8px;font-size:12px}
button:disabled{opacity:.5;cursor:default}
.actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.stage{display:grid;place-items:center;min-height:200px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background-color:#fff;background-image:linear-gradient(45deg,#eceef2 25%,transparent 25%,transparent 75%,#eceef2 75%),linear-gradient(45deg,#eceef2 25%,transparent 25%,transparent 75%,#eceef2 75%);background-size:16px 16px;background-position:0 0,8px 8px;overflow:auto}
.stage img,.stage canvas{max-width:100%;display:block}
.status{margin-top:10px;font-size:12px;color:var(--ink-3)}
.progress{height:6px;border-radius:3px;background:var(--sunken);overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.empty{padding:40px;text-align:center;color:var(--ink-3)}
.out{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.out a.dl{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:6px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none}
.code{width:100%;min-height:120px}
@media(max-width:900px){main{grid-template-columns:1fr;padding:12px}}
header a.home{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;font-size:12.5px}