*{margin:0;padding:0;box-sizing:border-box}:root{--bg-page: #050505;--bg-toolbar: #0f0f12;--bg-toolbar-2: #0a0a0d;--line-soft: #252525;--line-mid: #363636;--text-main: #ffffff;--text-soft: var(--text-main);--text-muted: #b5b5b5;--text-dim: #8a8a8a;--accent: #6466e9;--accent-strong: var(--accent);--brand-blue: var(--accent);--brand-blue-rgb: 100, 102, 233;--panel-bg: #131315;--panel-edge: #262626;--panel-dash: #3c3c3c}html,body{width:100%;height:100%}body{font-family:Inter,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg-page);color:var(--text-main);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;flex-direction:column;height:100vh}.hidden{display:none!important}#toolbar{position:relative;height:54px;padding:0 16px;background:linear-gradient(180deg,var(--bg-toolbar) 0%,var(--bg-toolbar-2) 100%);border-bottom:1px solid var(--line-soft);flex-shrink:0}#toolbar:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--brand-blue-rgb),.36),transparent)}.toolbar-row{height:100%;display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}.toolbar-row::-webkit-scrollbar{display:none}.toolbar-group{display:flex;align-items:center;gap:4px;flex-shrink:0}.toolbar-actions{gap:1px}.toolbar-control{gap:8px;padding:0 6px}.toolbar-divider{width:1px;height:24px;background:linear-gradient(180deg,transparent,#3a3a3a,transparent);flex-shrink:0}.toolbar-label{font-size:12px;color:#fff;letter-spacing:.01em}.toolbar-control .toolbar-label,.toolbar-control #brush-size-val,.toolbar-control #algo-select,.toolbar-control .select-chevron{opacity:.5;transition:opacity .18s,color .18s,filter .18s,box-shadow .18s}.toolbar-control:hover .toolbar-label,.toolbar-control:hover #brush-size-val,.toolbar-control:hover #algo-select,.toolbar-control:hover .select-chevron,.toolbar-control:focus-within .toolbar-label,.toolbar-control:focus-within #brush-size-val,.toolbar-control:focus-within #algo-select,.toolbar-control:focus-within .select-chevron{opacity:1}.toolbar-control:hover .select-chevron,.toolbar-control:focus-within .select-chevron{color:var(--brand-blue);filter:drop-shadow(0 0 6px rgba(var(--brand-blue-rgb),.9))}.btn{height:32px;padding:0 10px;border:1px solid rgba(0,0,0,0);border-radius:8px;background:transparent;color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:border-color .18s,background .18s,color .18s,opacity .18s;white-space:nowrap}.btn span,.btn .toolbar-icon{opacity:.5;transition:opacity .18s,color .18s,filter .18s}.btn:not(:disabled):hover,.btn:not(:disabled):focus-visible,.btn:not(:disabled):active{border-color:transparent;background:linear-gradient(180deg,rgba(var(--brand-blue-rgb),.12),rgba(var(--brand-blue-rgb),.06));color:#fff;box-shadow:inset 0 -2px 0 var(--brand-blue),0 0 12px rgba(var(--brand-blue-rgb),.18)}.btn:not(:disabled):hover span,.btn:not(:disabled):focus-visible span,.btn:not(:disabled):active span,.btn:not(:disabled):hover .toolbar-icon,.btn:not(:disabled):focus-visible .toolbar-icon,.btn:not(:disabled):active .toolbar-icon{opacity:1}.btn:focus-visible{outline:none}.btn:disabled{opacity:1;cursor:default}.btn-primary{border-color:#0000;background:transparent;color:#fff}.toolbar-icon{width:13px;height:13px;flex-shrink:0;stroke-width:2}.toolbar-brand-logo{width:32px;height:32px;flex-shrink:0;display:block;object-fit:contain;opacity:1;margin-right:6px;filter:brightness(0) invert(1)}.btn:not(:disabled):hover .toolbar-icon,.btn:not(:disabled):focus-visible .toolbar-icon,.btn:not(:disabled):active .toolbar-icon{color:var(--brand-blue);filter:drop-shadow(0 0 6px rgba(var(--brand-blue-rgb),.9))}#brush-size{width:136px;height:4px;accent-color:var(--accent)}#brush-size-val{min-width:22px;text-align:right;color:#fff;font-size:12px}.toolbar-mono{font-family:JetBrains Mono,Consolas,Courier New,monospace;font-weight:700}.select-wrap{position:relative;display:inline-flex;align-items:center}#algo-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:32px;min-width:162px;padding:0 30px 0 10px;border-radius:8px;border:1px solid var(--line-mid);background:#161616;color:#fff;font-size:12px;line-height:1;transition:border-color .18s,box-shadow .18s}#algo-select:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 2px rgba(var(--brand-blue-rgb),.22)}#algo-select option{opacity:1;color:#fff;-webkit-text-fill-color:#ffffff;font-weight:600;background:#1a1a1a}#algo-select option:checked{color:#fff;background:var(--brand-blue)}.select-chevron{position:absolute;right:11px;color:#fff;pointer-events:none}#canvas-area{flex:1;overflow:hidden;position:relative;background:#050505}#placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-start;justify-content:center;padding:48px 26px 26px;pointer-events:auto}.upload-panel-shell{width:min(860px,calc(100vw - 280px));height:min(730px,calc(100vh - 150px))}.upload-panel{width:100%;height:100%;border:1px solid var(--panel-edge);border-radius:20px;background:var(--panel-bg);box-shadow:0 22px 58px #00000085;display:flex;flex-direction:column;padding:22px}.upload-panel-title{display:flex;align-items:center;gap:8px;color:#f0f0f0;font-size:20px;font-weight:700;line-height:1;margin-bottom:28px}.upload-title-icon{width:20px;height:20px;color:#dfdfdf;stroke-width:2}.upload-dropzone{flex:1;border-radius:14px;border:2px dashed var(--panel-dash);background:#131315;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}.upload-dropzone:hover,.upload-dropzone:focus-visible{border-color:var(--brand-blue);background:linear-gradient(180deg,rgba(var(--brand-blue-rgb),.05),rgba(var(--brand-blue-rgb),.031));box-shadow:inset 0 0 0 1px rgba(var(--brand-blue-rgb),.113),0 0 0 1px rgba(var(--brand-blue-rgb),.075);outline:none}.upload-dropzone:hover .upload-drop-icon,.upload-dropzone:focus-visible .upload-drop-icon{color:var(--brand-blue);border-color:rgba(var(--brand-blue-rgb),.15);filter:drop-shadow(0 0 8px rgba(var(--brand-blue-rgb),.29))}.upload-dropzone:hover .upload-drop-title,.upload-dropzone:focus-visible .upload-drop-title{color:#e8e8e8}.upload-dropzone:hover .upload-drop-subtitle,.upload-dropzone:focus-visible .upload-drop-subtitle{color:#aaa}.upload-dropzone-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;color:var(--text-dim);max-width:460px;padding:26px}.upload-drop-icon{width:56px;height:56px;border-radius:999px;border:1px solid #353535;background:linear-gradient(180deg,#232323,#1a1a1a);display:inline-flex;align-items:center;justify-content:center;color:#c6c6c6}.upload-drop-title{font-size:31px;color:#d6d6d6;font-weight:700;line-height:1.2}.upload-drop-subtitle{font-size:16px;color:#8a8a8a;line-height:1.45}#canvas-wrapper{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;background-image:linear-gradient(45deg,#1a1a1a 25%,transparent 25%),linear-gradient(-45deg,#1a1a1a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a1a 75%),linear-gradient(-45deg,transparent 75%,#1a1a1a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#canvas-main{display:block}#canvas-mask{position:absolute;top:0;left:0;cursor:crosshair;opacity:.5;touch-action:none}#progress-bar-wrap{position:relative;height:22px;background:#111;border-top:1px solid var(--line-soft);overflow:hidden;flex-shrink:0}#progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#6466e9,#6466e9);transition:width .15s ease-out}#progress-bar-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#e6e6e6;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.5)}#statusbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 16px;background:#111;border-top:1px solid var(--line-soft);font-size:12px;color:#9d9d9d;flex-shrink:0}.status-left{display:flex;align-items:center;gap:8px;min-width:0}#status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-icon{--status-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");width:16px;height:16px;border-radius:4px;position:relative;flex-shrink:0}.status-icon:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;background:#fff;-webkit-mask:var(--status-icon-mask) center / contain no-repeat;mask:var(--status-icon-mask) center / contain no-repeat}.status-icon-ready{background:rgba(var(--brand-blue-rgb),.3);border:1px solid rgba(var(--brand-blue-rgb),.55);box-shadow:0 0 8px rgba(var(--brand-blue-rgb),.2)}.status-icon-processing{--status-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3.6-7.2'/%3E%3Cpolyline points='22 4 21 12 13 11'/%3E%3C/svg%3E");background:rgba(var(--brand-blue-rgb),.86);border:1px solid rgba(var(--brand-blue-rgb),.92);box-shadow:0 0 8px rgba(var(--brand-blue-rgb),.35)}.status-icon-success{--status-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background:#3cae71;border:1px solid #45c57f;box-shadow:0 0 8px #3cae7159}.status-icon-error{--status-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");background:#b95353;border:1px solid #d46767;box-shadow:0 0 8px #b9535352}@media(max-width:1200px){.upload-panel-shell{width:min(790px,calc(100vw - 120px));height:min(660px,calc(100vh - 160px))}.upload-panel-title{font-size:18px}.upload-drop-title{font-size:22px}}@media(max-width:980px){#toolbar{height:auto;min-height:58px;padding:8px 10px}.toolbar-row{gap:8px;white-space:normal;overflow-x:visible;flex-wrap:wrap;height:auto}.toolbar-divider{display:none}.toolbar-group{width:100%;flex-wrap:wrap;gap:8px}.toolbar-control{justify-content:flex-start}#brush-size{width:min(176px,48vw)}#placeholder{padding:18px}.upload-panel-shell{width:calc(100vw - 48px);height:calc(100vh - 150px)}.upload-panel{border-radius:16px;padding:14px}.upload-panel-title{font-size:24px;margin-bottom:10px}.upload-dropzone{border-radius:12px}.upload-drop-title{font-size:18px}.upload-drop-subtitle{font-size:13px}}