:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#233047;background:#f3f5fa}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;padding:24px 16px}main{max-width:720px;margin:auto;background:white;border-radius:20px;padding:28px;box-shadow:0 10px 35px #21365612}h1{margin:0 0 24px}h2{margin:0 0 18px;font-size:22px}p,small{color:#65718a;line-height:1.7}label{display:flex;flex-direction:column;gap:8px;margin:18px 0;font-weight:600}input{width:100%;min-width:0;padding:13px;font:inherit;border:1px solid #ced6e4;border-radius:10px}input[type=range]{padding:0}button{padding:12px 22px;border:0;border-radius:10px;color:white;background:#5265e9;font:inherit;font-weight:600;cursor:pointer}button:disabled{opacity:.55;cursor:wait}.secondary{background:#eaf0fa;color:#34456d}button:focus-visible,.file-button:focus-within{outline:3px solid #a5afff;outline-offset:3px}.image-box{position:relative;width:100%;aspect-ratio:16/9;padding:8px;border:2px dashed #b8c3df;background:#f8faff;color:#5265e9;overflow:hidden}.image-box:hover{border-color:#5265e9}.image-box img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px}#imageEmpty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}.upload-icon{font-size:36px;font-weight:400}#changeImage{position:absolute;right:16px;bottom:16px;border-radius:8px;padding:7px 12px;background:#ffffffed;color:#34456d;font-size:13px}canvas{width:100%;height:auto;display:block;margin:18px 0;border-radius:10px;background:#e7eaf0;touch-action:none;cursor:grab}#message,#cropMessage{color:#a14545}#message:empty,#cropMessage:empty,#eta:empty,#stage:empty{display:none}.query-section{border-top:1px solid #dfe5ef;margin-top:30px;padding-top:26px}.query-actions,.dialog-actions{display:flex;gap:12px}.query-actions button{flex:1}#refreshIcon{display:inline-block;margin-right:7px}.spinning{animation:spin .5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#progress{margin-top:20px}.progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.progress-item{padding:16px;background:#f5f7fc;border:1px solid #e7ecf5;border-radius:12px;display:flex;flex-direction:column;gap:10px}.progress-item span{font-size:14px;color:#65718a}.progress-item strong{font-size:16px;line-height:1.6}dialog{width:50vw;max-width:720px;max-height:90dvh;overflow-y:auto;border:0;border-radius:18px;padding:24px;color:#233047;box-shadow:0 16px 70px #16274740}dialog::backdrop{background:#18243c80}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.dialog-heading h2{margin:0}.close-button{background:#eef2f8;color:#65718a;padding:3px 11px;font-size:26px}.file-button{display:table;position:relative;background:#5265e9;color:white;border-radius:10px;padding:11px 20px;cursor:pointer;margin:20px 0 10px}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0}.dialog-actions{justify-content:space-between}body:has(dialog[open]){overflow:hidden}@media(max-width:600px){body{padding:12px}main{padding:20px;border-radius:14px}#submit{width:100%}dialog{width:calc(100vw - 32px);padding:20px;max-height:88dvh}.progress-grid{grid-template-columns:1fr}.query-actions button{padding:12px 10px}}@media(prefers-reduced-motion:reduce){.spinning{animation:none}}

.progress-item{--status-color:#5265e9;--status-background:#f1f3ff;--status-border:#dce1ff;background:var(--status-background);border-color:var(--status-border);transition:background-color .2s,border-color .2s}.progress-item strong{color:var(--status-color)}.progress-item[data-state=approved],.progress-item[data-state=completed]{--status-color:#237549;--status-background:#edf9f1;--status-border:#c6e8d2}.progress-item[data-state=rejected],.progress-item[data-state=failed]{--status-color:#bb3546;--status-background:#fff0f2;--status-border:#f3ccd2}.progress-item[data-state=resubmit],.progress-item[data-state=review]{--status-color:#95600e;--status-background:#fff7e8;--status-border:#eedab1}.progress-item[data-state=running]{--status-color:#7551bd;--status-background:#f5f0ff;--status-border:#dfd3f3}.progress-item[data-state=stopped],.progress-item[data-state=stopping],.progress-item[data-state=not_found]{--status-color:#5f6b7e;--status-background:#f3f5f8;--status-border:#dce2eb}

.submit-row{display:flex;align-items:center;gap:16px}.submit-row #submit{flex-shrink:0}.login-warning{margin:0;padding:11px 14px;border:1px solid #f0c5cc;border-radius:10px;background:#fff1f3;color:#b52c3f;font-size:14px;font-weight:700;line-height:1.65}@media(max-width:600px){.submit-row{flex-wrap:wrap;gap:12px}.login-warning{width:100%;font-size:14px}}

.compression-help{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#f1f3ff;font-size:14px}.compression-help a{color:#4657ce;font-weight:700;text-underline-offset:3px}.compression-help small{display:block;font-size:12px;margin-top:3px}

.tool-ad{max-width:720px;margin:0 auto 18px;border:1px solid #d9dff7;border-radius:16px;background:linear-gradient(110deg,#eef1ff,#fff8f2);overflow:hidden}.tool-ad a{display:flex;align-items:center;gap:15px;padding:18px 22px;text-decoration:none;color:#233047}.tool-ad a:hover{background:#eef1ff}.tool-ad a:focus-visible{outline:3px solid #5265e9;outline-offset:-3px}.tool-ad img{flex-shrink:0;object-fit:contain;border-radius:12px}.tool-ad-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}.tool-ad-copy strong{font-size:21px}.tool-ad-copy>span:last-child{font-size:13px;color:#65718a;line-height:1.6}.ad-label{font-size:11px;color:#65718a}.ad-cta{font-size:13px;font-weight:700;white-space:nowrap;padding:10px 13px;background:#5265e9;border-radius:9px;color:white}.tool-ad-bottom{margin:20px auto 0;background:linear-gradient(110deg,#f0f3ff,#f6f1ff)}@media(max-width:600px){.tool-ad a{padding:15px;gap:12px;flex-wrap:wrap}.tool-ad-copy{flex-basis:calc(100% - 64px)}.ad-cta{margin-left:64px}.tool-ad-copy strong{font-size:19px}.tool-ad{border-radius:14px}}

.tool-ad a{gap:14px;padding:18px 20px}.tool-ad-copy{align-items:flex-start;gap:9px}.tool-ad-copy strong{font-size:20px;line-height:1.4}.tool-ad-copy>span:not(.ad-cta){font-size:14px;color:#65718a;line-height:1.7}.tool-ad .tool-ad-interface{width:180px;height:170px;object-fit:contain;border-radius:0;flex-shrink:0}.tool-ad-copy .ad-cta{margin:0;font-size:13px;color:#fff;line-height:1.4;flex:none}@media(max-width:600px){.tool-ad a{flex-wrap:nowrap;padding:15px;gap:12px}.tool-ad .tool-ad-icon{display:none}.tool-ad-copy{flex:1;flex-basis:auto}.tool-ad-copy strong{font-size:17px}.tool-ad-copy>span:not(.ad-cta){font-size:12px}.tool-ad .tool-ad-interface{width:112px;height:148px}.tool-ad-copy .ad-cta{padding:8px 11px;font-size:12px}}
.tool-ad-copy > .ad-cta:last-child{color:#fff;font-size:13px;line-height:1.4}@media(max-width:600px){.tool-ad-copy > .ad-cta:last-child{font-size:12px}}

.code-field{margin:18px 0}.code-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.code-heading label{margin:0;display:block}.buy-uploads{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:8px 12px;border-radius:9px;background:linear-gradient(115deg,#ff774c,#eb4870);color:white;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 4px 12px #f05c6330}.buy-uploads:hover{filter:brightness(1.05)}.buy-uploads:focus-visible{outline:3px solid #f8a3a3;outline-offset:3px}.buy-uploads[aria-disabled=true]{opacity:.75}@media(min-width:1100px){.tool-ad{position:fixed;top:50%;left:max(16px,calc(50% - 620px));width:clamp(150px,calc((100vw - 800px)/2),240px);margin:0;transform:translateY(-50%);z-index:2}.tool-ad-bottom{left:auto;right:max(16px,calc(50% - 620px));margin:0}.tool-ad a{flex-direction:column;align-items:center;padding:20px 14px;gap:14px;text-align:center}.tool-ad-copy{align-items:center;gap:10px}.tool-ad-copy strong{font-size:19px}.tool-ad-copy>span:not(.ad-cta){font-size:13px}.tool-ad .tool-ad-interface{width:100%;height:auto;max-height:225px}.tool-ad .tool-ad-icon{width:48px;height:48px}.tool-ad-copy .ad-cta{margin:0}}@media(max-width:420px){.code-heading{gap:8px}.buy-uploads{font-size:12px;padding:8px 9px}}

.page-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}.page-heading h1{margin:0;font-size:28px}.preview-button{background:#fff;color:#34456d;border:1px solid #ced6e4;padding:8px 14px;font-size:14px;white-space:nowrap}.preview-button:hover{background:#f5f7fc}#previewDialog{width:min(680px,calc(100vw - 32px))}.preview-images{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}.preview-images img{display:block;min-width:0;width:auto;max-width:68%;max-height:300px;height:auto;object-fit:contain;border-radius:8px}.preview-images img:first-child{max-width:26%}@media(max-width:600px){.page-heading{gap:10px}.page-heading h1{font-size:23px}.preview-images{gap:10px}.preview-images img{max-height:240px}#previewDialog{padding:18px}}