*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f4f2ef;--sidebar-bg:#1e1e2e;--sidebar-border:#2d2d42;--card-bg:#fff;--accent:#7c6ef0;--accent-hover:#6a5bdf;--accent2:#f4a261;--danger:#e05252;--success:#52b788;--text:#1a1a2e;--text-muted:#6b7280;--text-sidebar:#e2e2f0;--text-sidebar-muted:#9a9ab8;--border:#e5e2dc;--shadow:0 2px 12px #00000014;--shadow-lg:0 8px 32px #0000001f;--radius:10px;--radius-sm:6px;--header-h:58px;--sidebar-w:320px;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif}html,body{height:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-size:14px}#root,.app{flex-direction:column;height:100%;display:flex}.app-header{height:var(--header-h);background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-border);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.header-right{align-items:center;gap:10px;display:flex}.logo{align-items:center;gap:8px;display:flex}.logo-text{color:#fff;letter-spacing:-.3px;font-size:16px;font-weight:700}.header-stats{align-items:center;gap:8px;display:flex}.header-stat{color:var(--text-sidebar-muted);white-space:nowrap;font-size:12px}.header-coverage{white-space:nowrap;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700}.header-coverage.coverage-good{color:var(--success);background:#52b7882e}.header-coverage.coverage-ok{color:var(--accent2);background:#f4a2612e}.header-coverage.coverage-low{color:#e05252;background:#e0525226}.sidebar-toggle{cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-direction:column;gap:4px;padding:6px;transition:background .15s;display:flex}.sidebar-toggle:hover{background:#ffffff14}.sidebar-toggle span{background:var(--text-sidebar);border-radius:2px;width:20px;height:2px;display:block}.app-body{flex:1;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);flex-direction:column;flex-shrink:0;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.sidebar.closed{width:0}.sidebar-inner{width:var(--sidebar-w);flex-direction:column;gap:0;height:100%;display:flex;overflow:hidden auto}.sidebar-inner::-webkit-scrollbar{width:4px}.sidebar-inner::-webkit-scrollbar-thumb{background:var(--sidebar-border);border-radius:4px}.divider{background:var(--sidebar-border);height:1px;margin:0 16px}.sidebar-section{padding:16px}.section-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-sidebar-muted);margin-bottom:12px;font-size:11px;font-weight:600}.canvas-settings{padding:16px}.fill-mode-cards{flex-direction:column;gap:6px;margin-bottom:4px;display:flex}.fill-mode-card{border:1.5px solid var(--sidebar-border);border-radius:var(--radius);text-align:left;cursor:pointer;background:#ffffff0d;width:100%;padding:9px 11px;transition:all .15s}.fill-mode-card:hover{border-color:#7c6ef073}.fill-mode-card.active{border-color:var(--accent);background:#7c6ef01a}.fill-mode-top{align-items:center;gap:7px;margin-bottom:3px;display:flex}.fill-mode-icon{color:var(--text-sidebar-muted);align-items:center;display:flex}.fill-mode-card.active .fill-mode-icon{color:var(--accent)}.fill-mode-label{color:var(--text-sidebar);flex:1;font-size:13px;font-weight:600}.fill-mode-check{color:var(--accent);font-size:11px;font-weight:700}.fill-mode-desc{color:var(--text-sidebar-muted);padding-left:21px;font-size:11px;line-height:1.4}.fill-mode-card.active .fill-mode-desc{color:#a29ae6e6}.settings-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-sidebar-muted);margin-bottom:12px;font-size:11px;font-weight:600}.settings-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.field-group{flex-direction:column;gap:4px;display:flex}.field-group label{color:var(--text-sidebar-muted);font-size:11px;font-weight:500}.field-group input,.field-group select{border:1px solid var(--sidebar-border);border-radius:var(--radius-sm);color:var(--text-sidebar);background:#ffffff12;outline:none;width:100%;padding:6px 8px;font-size:13px;transition:border-color .15s}.field-group input:focus,.field-group select:focus{border-color:var(--accent)}.field-group select option{background:#1e1e2e}.paper-buttons{gap:4px;display:flex}.paper-btn{border:1px solid var(--sidebar-border);border-radius:var(--radius-sm);color:var(--text-sidebar-muted);cursor:pointer;background:#ffffff12;flex:1;padding:5px 4px;font-size:11px;font-weight:600;transition:all .15s}.paper-btn:hover{border-color:var(--accent);color:var(--text-sidebar)}.paper-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.toggle-group{flex-direction:row;grid-column:1/-1;justify-content:space-between;align-items:center}.toggle-btn{border:1px solid var(--sidebar-border);color:var(--text-sidebar-muted);cursor:pointer;background:#ffffff12;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;transition:all .15s}.toggle-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}.canvas-info{color:var(--text-sidebar-muted);text-align:right;margin-top:10px;font-size:11px}.uploader-wrapper{flex-direction:column;gap:6px;display:flex}.uploader-folder-btn{border:1px solid var(--sidebar-border);border-radius:var(--radius-sm);color:var(--text-sidebar-muted);cursor:pointer;background:#ffffff0d;justify-content:center;align-items:center;gap:6px;width:100%;padding:7px 12px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.uploader-folder-btn:hover{border-color:var(--accent);color:var(--accent);background:#7c6ef014}.uploader{border:1.5px dashed var(--sidebar-border);border-radius:var(--radius);text-align:center;cursor:pointer;flex-direction:column;align-items:center;gap:6px;padding:24px 16px;transition:all .2s;display:flex}.uploader:hover,.uploader.dragging{border-color:var(--accent);background:#7c6ef014}.uploader-icon{color:var(--text-sidebar-muted)}.uploader:hover .uploader-icon,.uploader.dragging .uploader-icon{color:var(--accent)}.uploader-label{color:var(--text-sidebar);font-size:13px;font-weight:500}.uploader-hint{color:var(--text-sidebar-muted);font-size:11px}.image-list{flex-direction:column;gap:8px;margin-top:12px;display:flex}.image-card{border:1px solid var(--sidebar-border);border-radius:var(--radius);background:#ffffff0d;gap:10px;padding:10px;transition:border-color .15s;display:flex}.image-card:hover{border-color:#7c6ef066}.image-card.processing{opacity:.7}.image-card-thumb{border-radius:var(--radius-sm);background-color:#d8d8d8;background-image:linear-gradient(45deg,#f4f4f4 25%,#0000 25%),linear-gradient(-45deg,#f4f4f4 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f4f4f4 75%),linear-gradient(-45deg,#0000 75%,#f4f4f4 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;flex-shrink:0;width:56px;height:56px;position:relative;overflow:hidden}.image-card-thumb img{object-fit:contain;width:100%;height:100%}.processing-overlay{background:#1e1e2eb3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.image-card-body{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.image-card-name{color:var(--text-sidebar);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;overflow:hidden}.image-card-dims{color:var(--text-sidebar-muted);align-items:center;gap:6px;font-size:11px;display:flex}.badge-trans{color:var(--success);background:#52b78833;border-radius:20px;padding:1px 6px;font-size:10px;font-weight:600}.field-row{align-items:center;gap:6px;display:flex}.field-row label{color:var(--text-sidebar-muted);flex-shrink:0;width:56px;font-size:11px}.field-row input{border:1px solid var(--sidebar-border);border-radius:var(--radius-sm);width:60px;color:var(--text-sidebar);background:#ffffff12;outline:none;padding:3px 6px;font-size:12px}.field-row input:focus{border-color:var(--accent)}.field-hint{color:var(--text-sidebar-muted);font-size:11px}.balanced-copies-row{grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin-top:4px;display:grid}.balanced-copies-label{color:var(--text-sidebar-muted);white-space:nowrap;align-items:center;gap:5px;font-size:11px;font-weight:500;display:flex}.auto-tag{letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:#7c6ef026;border:1px solid #7c6ef04d;border-radius:10px;padding:1px 5px;font-size:9px;font-weight:700;line-height:1.4}.balanced-copies-input-group{align-items:center;gap:4px;display:flex}.balanced-copies-input-group input{border:1px solid var(--sidebar-border);border-radius:var(--radius-sm);width:52px;color:var(--text-sidebar);background:#ffffff12;outline:none;padding:4px 6px;font-size:13px;font-weight:600;transition:border-color .15s}.balanced-copies-input-group input:focus{border-color:var(--accent)}.reset-btn{border:1px solid var(--sidebar-border);border-radius:var(--radius-sm);color:var(--text-sidebar-muted);cursor:pointer;background:#ffffff12;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;transition:all .15s;display:flex}.reset-btn:hover{border-color:var(--accent);color:var(--accent);background:#7c6ef01a}.packed-info-inline{white-space:nowrap;text-align:right;font-size:11px}.packed-inline-num{color:var(--success);font-weight:600}.packed-inline-zero{color:var(--accent2);font-weight:600}.packed-info-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;display:flex}.packed-result{align-items:baseline;gap:4px;display:flex}.packed-num{color:var(--success);font-size:20px;font-weight:800;line-height:1}.packed-label{color:var(--text-sidebar-muted);font-size:11px;font-weight:500}.packed-rec{color:var(--text-sidebar-muted);border:1px solid var(--sidebar-border);background:#ffffff0f;border-radius:20px;align-items:center;gap:3px;padding:2px 7px;font-size:11px;display:flex}.packed-rec-icon{opacity:.7;font-style:normal}.packed-badge{color:var(--success);background:#52b78826;border:1px solid #52b7884d;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}.packed-badge.zero{color:var(--accent2);background:#f4a2611f;border-color:#f4a2614d}.image-card-actions{flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;display:flex}.removebg-group{align-items:center;gap:4px;display:flex}.quality-toggle{border:1px solid var(--sidebar-border);background:#ffffff0f;border-radius:20px;gap:1px;padding:1px;display:flex}.quality-btn{color:var(--text-sidebar-muted);cursor:pointer;background:0 0;border:none;border-radius:18px;padding:2px 7px;font-size:10px;font-weight:600;line-height:1.5;transition:all .15s}.quality-btn:disabled{opacity:.4;cursor:not-allowed}.quality-btn.active{background:var(--accent);color:#fff}.btn-sm{cursor:pointer;border:1px solid #0000;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;transition:all .15s}.btn-secondary{color:var(--accent);background:#7c6ef026;border-color:#7c6ef04d}.btn-secondary:hover{background:var(--accent);color:#fff}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.btn-danger{color:var(--danger);background:#e052521f;border-color:#e0525240}.btn-danger:hover{background:var(--danger);color:#fff}.main-area{background:var(--bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-wrapper{flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-header{border-bottom:1px solid var(--border);background:#fff;flex-shrink:0;align-items:center;gap:12px;height:44px;padding:0 20px;display:flex}.preview-title{color:var(--text);font-size:13px;font-weight:600}.preview-meta{color:var(--text-muted);font-size:12px}.preview-warning{color:var(--accent2);background:#f4a2611f;border-radius:20px;margin-left:auto;padding:2px 10px;font-size:11px;font-weight:600}.preview-count{color:var(--text-muted);font-size:11px;font-weight:600}.preview-coverage{border-radius:20px;margin-left:auto;padding:2px 10px;font-size:11px;font-weight:700}.preview-coverage.coverage-good{color:var(--success);background:#52b7881f}.preview-coverage.coverage-ok{color:var(--accent2);background:#f4a2611f}.preview-coverage.coverage-low{color:#e05252;background:#e052521a}.preview-bg-toggle{background:#0000000f;border-radius:20px;gap:2px;margin-left:auto;padding:2px;display:flex}.bg-toggle-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:18px;padding:3px 10px;font-size:11px;font-weight:600;transition:all .15s}.bg-toggle-btn.active{color:var(--text);background:#fff;box-shadow:0 1px 4px #0000001f}.preview-canvas-container{flex:1;justify-content:center;align-items:center;padding:24px;display:flex;overflow:auto}.preview-canvas{box-shadow:var(--shadow-lg);border-radius:2px;max-width:100%;max-height:100%;display:block}.preview-empty{color:#c5c0bb;flex-direction:column;align-items:center;gap:12px;display:flex}.preview-empty p{color:var(--text-muted);font-size:14px}.export-panel{gap:8px;display:flex}.export-btn-group{flex-direction:column;align-items:center;gap:2px;display:flex}.export-note{color:var(--text-sidebar-muted);letter-spacing:.01em;font-size:10px}.btn-export{border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.btn-export:disabled{opacity:.4;cursor:not-allowed}.btn-export-png{background:var(--accent);color:#fff}.btn-export-png:hover:not(:disabled){background:var(--accent-hover)}.btn-export-pdf{color:var(--text-sidebar);border:1px solid var(--sidebar-border);background:#ffffff1a}.btn-export-pdf:hover:not(:disabled){background:#ffffff29}.btn-export.loading{opacity:.7}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:13px;height:13px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){:root{--sidebar-w:100vw;--header-h:52px}.app-body{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--sidebar-border);width:100%;height:auto;max-height:50vh;transition:max-height .3s cubic-bezier(.4,0,.2,1)}.sidebar.closed{width:100%;max-height:0}.sidebar-inner{width:100%}.settings-grid{grid-template-columns:1fr 1fr}.main-area{flex:1;min-height:0}.preview-canvas-container{padding:12px}.header-stat{display:none}.btn-export{padding:6px 10px;font-size:12px}.btn-export svg{display:none}}@media (width<=400px){.settings-grid{grid-template-columns:1fr}.paper-buttons{flex-wrap:wrap}}