:root{--color-bg:#f8f9fb;--color-surface:#fff;--color-surface-hover:#f0f2f5;--color-primary:#4f6ef7;--color-primary-hover:#3d5bd9;--color-primary-light:#e8ecff;--color-accent:#ff6b6b;--color-text:#1a1d23;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;--color-border:#e5e7eb;--color-border-focus:#4f6ef7;--color-grid-line:#4f6ef7b3;--color-grid-line-hover:#4f6ef7;--color-crop-box:#ff6b6b4d;--color-crop-box-border:#ff6b6bcc;--color-success:#10b981;--color-warning:#f59e0b;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001a;--shadow-lg:0 8px 24px #0000001f;--panel-width:280px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);height:100%;color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.app-layout{grid-template-columns:var(--panel-width)1fr var(--panel-width);grid-template-rows:56px 1fr;gap:0;height:100vh;display:grid}.app-header{padding:0 var(--spacing-xl);background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:100;grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}.app-header h1{color:var(--color-text);align-items:center;gap:var(--spacing-sm);font-size:18px;font-weight:700;display:flex}.app-header h1 span{font-size:22px}.header-actions{align-items:center;gap:var(--spacing-sm);display:flex}.panel{background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--spacing-lg);overflow-y:auto}.panel:last-child{border-right:none;border-left:1px solid var(--color-border)}.panel-section{margin-bottom:var(--spacing-xl)}.panel-section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin-bottom:var(--spacing-md);font-size:11px;font-weight:700}.canvas-container{cursor:grab;-webkit-user-select:none;user-select:none;background:#e8eaed;position:relative;overflow:hidden}.canvas-container:active{cursor:grabbing}.canvas-inner{transform-origin:0 0;position:absolute}.canvas-image{pointer-events:none;display:block}.upload-zone{justify-content:center;align-items:center;gap:var(--spacing-lg);cursor:pointer;flex-direction:column;height:100%;display:flex}.upload-zone-inner{justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl)60px;border:2px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);flex-direction:column;transition:all .2s;display:flex}.upload-zone-inner:hover,.upload-zone.drag-over .upload-zone-inner{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary)}.upload-icon{font-size:48px;line-height:1}.upload-text{font-size:14px;font-weight:500}.upload-hint{color:var(--color-text-muted);font-size:12px}.grid-line{z-index:10;transition:background-color .15s;position:absolute}.grid-line-x{cursor:col-resize;background:var(--color-grid-line);width:2px;top:0;bottom:0}.grid-line-y{cursor:row-resize;background:var(--color-grid-line);height:2px;left:0;right:0}.grid-line:hover,.grid-line.active{z-index:15;background:var(--color-grid-line-hover)!important}.grid-line-x:hover,.grid-line-x.active{width:4px;margin-left:-1px}.grid-line-y:hover,.grid-line-y.active{height:4px;margin-top:-1px}.grid-block-label{z-index:5;pointer-events:none;color:#4f6ef780;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex;position:absolute}.crop-block{z-index:10;border:2px solid var(--color-crop-box-border);background:var(--color-crop-box);cursor:move;transition:border-color .15s;position:absolute}.crop-block:hover{border-color:var(--color-accent)}.crop-block-name{background:var(--color-accent);color:#fff;white-space:nowrap;cursor:pointer;z-index:20;border-radius:3px;padding:2px 6px;font-size:11px;position:absolute;top:-22px;left:0}.crop-block-name-input{color:var(--color-text);border:1px solid var(--color-primary);background:#fff;border-radius:3px;outline:none;width:80px;padding:1px 4px;font-size:11px}.crop-block-delete{background:var(--color-accent);color:#fff;cursor:pointer;opacity:0;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;transition:opacity .15s;display:flex;position:absolute;top:-22px;right:0}.crop-block:hover .crop-block-delete{opacity:1}.resize-handle{border:2px solid var(--color-accent);z-index:15;background:#fff;border-radius:2px;width:8px;height:8px;position:absolute}.resize-handle.nw{cursor:nw-resize;top:-4px;left:-4px}.resize-handle.ne{cursor:ne-resize;top:-4px;right:-4px}.resize-handle.sw{cursor:sw-resize;bottom:-4px;left:-4px}.resize-handle.se{cursor:se-resize;bottom:-4px;right:-4px}.draw-preview{border:2px dashed var(--color-accent);pointer-events:none;z-index:20;background:#ff6b6b1a;position:absolute}.btn{justify-content:center;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:var(--color-surface);color:var(--color-text);white-space:nowrap;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.btn:hover{background:var(--color-surface-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-danger{color:var(--color-accent);border-color:var(--color-accent)}.btn-danger:hover{background:#ff6b6b1a}.btn-sm{padding:var(--spacing-xs)var(--spacing-sm);font-size:12px}.btn-group{background:var(--color-border);border-radius:var(--radius-sm);gap:1px;display:flex;overflow:hidden}.btn-group .btn{border:none;border-radius:0;flex:1}.btn-group .btn.active{background:var(--color-primary);color:#fff}.form-row{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);display:flex}.form-label{color:var(--color-text-secondary);min-width:40px;font-size:12px;font-weight:500}.form-input{padding:var(--spacing-xs)var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);outline:none;flex:1;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--color-border-focus)}.form-input-number{text-align:center;width:60px}.form-select{padding:var(--spacing-xs)var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);cursor:pointer;outline:none;flex:1;font-size:13px}.form-textarea{width:100%;min-height:80px;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);resize:vertical;outline:none;font-family:Consolas,Monaco,monospace;font-size:12px;transition:border-color .15s}.form-textarea:focus{border-color:var(--color-border-focus)}.zoom-slider{width:100%;accent-color:var(--color-primary)}.zoom-value{color:var(--color-primary);text-align:right;min-width:40px;font-size:12px;font-weight:600}.name-list{list-style:none}.name-list-item{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;transition:background-color .15s;display:flex}.name-list-item:hover{background:var(--color-surface-hover)}.name-list-item .index{color:var(--color-text-muted);min-width:24px;font-weight:600}.name-list-item .name{color:var(--color-text);flex:1}.name-list-item .name.empty{color:var(--color-text-muted);font-style:italic}.name-list-item .status{background:var(--color-success);border-radius:50%;width:8px;height:8px}.name-list-item .status.unassigned{background:var(--color-text-muted)}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;max-width:80vw;max-height:85vh;display:flex;overflow:hidden}.modal-header{padding:var(--spacing-lg)var(--spacing-xl);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.modal-header h2{font-size:16px;font-weight:600}.modal-body{padding:var(--spacing-xl);flex:1;overflow-y:auto}.modal-footer{justify-content:flex-end;gap:var(--spacing-sm);padding:var(--spacing-lg)var(--spacing-xl);border-top:1px solid var(--color-border);display:flex}.preview-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));display:grid}.preview-item{align-items:center;gap:var(--spacing-xs);flex-direction:column;display:flex}.preview-item img{aspect-ratio:1;object-fit:contain;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:repeating-conic-gradient(#f0f0f0 0% 25%,#fff 0% 50%) 0 0/16px 16px;width:100%}.preview-item .name{color:var(--color-text-secondary);text-align:center;word-break:break-all;max-width:100%;font-size:11px}.progress-overlay{z-index:1100;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.progress-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl)40px;box-shadow:var(--shadow-lg);text-align:center;min-width:300px}.progress-bar{background:var(--color-border);width:100%;height:8px;margin:var(--spacing-md)0;border-radius:4px;overflow:hidden}.progress-bar-fill{background:var(--color-primary);border-radius:4px;height:100%;transition:width .2s}.progress-text{color:var(--color-text-secondary);font-size:13px}.image-info{color:var(--color-text-muted);text-align:center;padding:var(--spacing-xs);font-size:11px}.divider{background:var(--color-border);height:1px;margin:var(--spacing-lg)0}.confirm-dialog{width:400px;max-width:90vw}.confirm-message{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);font-size:14px;line-height:1.6}.confirm-checkbox{align-items:center;gap:var(--spacing-sm);color:var(--color-text);cursor:pointer;font-size:13px;display:flex}.confirm-checkbox input[type=checkbox]{accent-color:var(--color-primary);cursor:pointer;width:16px;height:16px}