:root{--ink:#18212f;--muted:#667085;--line:#e3e8ef;--blue:#2563eb;--soft:#f5f7fa}*{box-sizing:border-box}body{margin:0;background:#f3f5f8;color:var(--ink);font:14px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}header{height:82px;padding:0 max(24px,calc((100vw - 1320px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.brand,.job,.title{display:flex;align-items:center}.brand{gap:12px}.brand-icon{display:block;width:38px;height:38px;flex-shrink:0;object-fit:contain;border-radius:22%}.brand h1{font-size:20px;margin:0}.brand h1 i{font-style:normal;color:var(--blue);font-weight:500}.brand small,.title p,.job label{display:block;color:var(--muted);font-size:12px;margin-top:3px}.job{gap:22px;text-align:right}.job>span>small,h3{font-size:10px;letter-spacing:.11em;color:#98a2b3;font-weight:800}.job>strong{padding:8px 12px;border-radius:99px;background:#f2f4f7;color:#475467;font-size:12px}.job strong[data-status=running],.job strong[data-status=queued]{background:#fff4d7;color:#9a6700}.job strong[data-status=complete]{background:#e8f8f0;color:#067647}.job strong[data-status=failed],.job strong[data-status=cancelled]{background:#fff0ee;color:#b42318}.workspace{max-width:1320px;margin:auto;padding:28px 24px 22px;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start}main{display:grid;gap:18px}section,details{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 25px #1018280d;padding:24px}.sticky{position:sticky;top:102px}.title{gap:13px;margin-bottom:22px}.title>b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#edf3ff;color:var(--blue)}h2,p{margin:0}.title h2,.resultTitle h2{font-size:17px}.drop{height:128px;border:1.5px dashed #b9c5d6;background:#f9fbfd;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}.drop.dragging,.drop:hover{border-color:var(--blue);background:#f2f6ff}.drop input{display:none}.drop i{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:8px;color:var(--blue);background:#fff;font-style:normal;font-size:18px}.drop strong{font-size:13px}.drop small,.field small,.toggle small,.hint,.empty small{font-size:11px;color:var(--muted)}.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:#98a2b3;font-size:10px;text-transform:uppercase}.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}.field{display:grid;gap:7px;min-width:0}.field>span{font-size:11px;color:#475467;font-weight:700}.field input,.field select{width:100%;height:39px;padding:0 11px;border:1px solid #d5dce5;border-radius:8px;background:#fbfcfd;color:var(--ink);outline:0}.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2563eb1a;background:#fff}.grid{display:grid;gap:15px}.four{grid-template-columns:repeat(4,minmax(0,1fr))}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.wide{grid-column:span 2}h3{margin:2px 0 12px}.space{margin-top:23px}.segments{display:inline-flex;padding:3px;background:#f1f3f6;border-radius:9px;margin-bottom:14px}.segments button{border:0;background:transparent;color:var(--muted);padding:7px 15px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer}.segments button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px #10182822}details{padding:0;overflow:hidden}summary{list-style:none;padding:20px 24px;display:flex;justify-content:space-between;cursor:pointer}summary::-webkit-details-marker{display:none}summary span{display:grid;gap:4px}summary small{color:var(--muted)}summary i{font-size:20px;color:#98a2b3}.advanced{border-top:1px solid var(--line);padding:20px 24px 24px}.toggle{min-height:55px;border:1px solid #dfe4ea;border-radius:9px;padding:9px 10px;display:flex;align-items:center;gap:9px;cursor:pointer}.toggle input{accent-color:var(--blue)}.toggle span{display:grid;gap:3px}.toggle b{font-size:11px}.standalone{margin:16px 0}.primary,.cancel{width:100%;height:46px;border:0;border-radius:9px;color:#fff;font-weight:750;cursor:pointer}.primary{background:linear-gradient(#3473ed,#174fc4);box-shadow:0 4px 12px #2563eb38}.primary kbd{margin-left:22px;color:#dbe8ff;background:#ffffff20;padding:3px 6px;border-radius:4px;font-size:10px}.cancel{background:#c2413a;margin-top:8px}.hint{text-align:center;margin-top:9px}hr{border:0;border-top:1px solid var(--line);margin:21px 0}.util{display:flex;align-items:center;justify-content:space-between}.util button,.resultTitle button{border:0;background:none;color:var(--blue);font-size:11px;font-weight:700;cursor:pointer}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.actions button{min-height:37px;border:1px solid #dbe1e8;background:#f9fafb;border-radius:8px;color:#344054;font-size:11px;font-weight:700;cursor:pointer}.actions button:hover{background:#f1f5f9}.results{max-width:1320px;margin:auto;padding:0 24px 40px}.resultTitle{display:flex;align-items:end;justify-content:space-between;margin:6px 2px 12px}.resultTitle h3{margin:0 0 4px}.resultGrid{display:grid;grid-template-columns:1fr;gap:18px}.resultGrid section{padding:0;overflow:hidden}.files h4{font-size:12px;margin:0;padding:15px 17px;border-bottom:1px solid var(--line)}#files{padding:12px;display:grid;gap:7px}.empty{min-height:178px;place-content:center;text-align:center;color:var(--blue);font-size:20px}.empty b,.empty small{display:block;margin-top:7px}.empty b{font-size:12px;color:var(--ink)}.file-row{padding:10px;border:1px solid var(--line);border-radius:8px;background:#fafbfc;color:#174fc4;text-decoration:none;font-size:12px;font-weight:700;overflow-wrap:anywhere}.terminal>div{height:38px;background:#182230;color:#98a2b3;padding:12px 14px;font-size:9px;letter-spacing:.1em}pre{margin:0;height:190px;padding:15px 17px;overflow:auto;white-space:pre-wrap;background:#111827;color:#cbd5e1;font:11px/1.6 ui-monospace,monospace}button:disabled{opacity:.5;cursor:not-allowed}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#101828;color:#fff;padding:10px 15px;border-radius:8px;font-size:12px;opacity:0;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){.workspace{grid-template-columns:1fr}.sticky{position:static}.four{grid-template-columns:repeat(2,1fr)}.resultGrid{grid-template-columns:1fr}}@media(max-width:600px){header{padding:12px 16px;height:auto}.job>span{display:none}.workspace,.results{padding-left:12px;padding-right:12px}section{padding:18px}.four,.two{grid-template-columns:1fr}.wide{grid-column:auto}.brand small{display:none}}

.marking-options{display:flex;flex-wrap:wrap;gap:12px;border:1px solid var(--line);border-radius:8px;padding:12px;margin:0}.marking-options legend{font-size:11px;font-weight:700;color:#475467}.marking-options label{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 10px;background:var(--soft);border-radius:6px}.marking-options input{accent-color:var(--blue)}.marking-help{font-size:11px;color:var(--muted);margin-top:7px}

#logOutput { color: #0a8236; }

.conversion-preview { margin-top: 24px; border-top: 1px solid #ddd; padding-top: 20px; }
#pixel_sensitivity { width: 100%; accent-color: #397b72; }
#previewPanels { margin-top: 18px; }
.preview-viewport { height: 300px; overflow: auto; background: white; border: 1px solid #ccc; cursor: grab; }
.preview-viewport img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }
#previewActions { margin-top: 12px; }
[hidden] { display: none !important; }


.file-generation { border-top: 1px solid #ddd; margin-top: 24px; }