:root{--font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;--bg: #fafaf9;--surface: #ffffff;--border: #e4e4e7;--text: #18181b;--muted: #71717a;--muted-light: #a1a1aa;--blue: #3b82f6;--blue-hover: #2563eb;--blue-light: #eff6ff;--green: #10b981;--green-light: #ecfdf5;--r-lg: 14px;--r-md: 10px;--r-sm: 8px;--r-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .04), 0 4px 6px -2px rgba(0, 0, 0, .02)}*{box-sizing:border-box;margin:0;padding:0;cursor:none!important}input,textarea,select,button,a,[role=button],input[type=range]{cursor:none!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{cursor:none!important}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh}#ir-cursor{position:fixed;pointer-events:none;z-index:20000;width:20px;height:20px;top:0;left:0;transform:translate(0);will-change:transform}#ir-cursor svg{width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(59,130,246,.55));transition:filter .13s,transform .12s}#ir-cursor.hover svg{filter:drop-shadow(0 0 9px rgba(96,165,250,.8))}#ir-cursor.click svg{transform:scale(.83)}#ir-trail{position:fixed;pointer-events:none;z-index:19999;width:14px;height:14px;opacity:.3;top:0;left:0;transition:left .18s ease-out,top .18s ease-out;transform:translate(0)}#ir-trail svg{width:100%;height:100%}@media (hover:none),(pointer:coarse){*{cursor:auto!important}#ir-cursor,#ir-trail{display:none!important}}@media (prefers-reduced-motion:reduce){*{cursor:auto!important}#ir-cursor,#ir-trail{display:none!important}*{animation:none!important;transition:none!important}}.ir-header{height:72px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}.ir-backbtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--muted);text-decoration:none;border:1px solid var(--border);transition:all .2s;background:transparent}.ir-backbtn:hover{background:var(--border);color:var(--text)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:600;font-size:16px}.brand-icon{width:32px;height:32px;background:var(--blue);color:#fff;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #3b82f633}.active-file-pill{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-full);padding:6px 14px;font-size:13px;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-file-icon{color:var(--muted);display:flex;align-items:center}.active-file-specs{color:var(--muted);font-size:11px}.export-btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border:none;font-weight:500;font-size:13.5px;padding:9px 18px;border-radius:var(--r-full);box-shadow:0 2px 8px #3b82f62e;transition:background .15s,transform .1s}.export-btn:hover{background:var(--blue-hover)}.export-btn:active{transform:scale(.98)}.export-btn:disabled{background:var(--border);color:var(--muted-light);box-shadow:none}.ir-workspace{display:grid;grid-template-columns:80px 1fr 280px;min-height:calc(100vh - 72px);position:relative}.filmstrip{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 8px;gap:12px;overflow-y:auto;flex-shrink:0}.thumbnail-wrapper{position:relative;width:58px;height:58px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s}.thumbnail-wrapper:hover{border-color:var(--muted-light)}.thumbnail-wrapper.active{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-light)}.thumbnail-img{width:100%;height:100%;object-fit:cover}.thumbnail-remove{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#18181bb3;color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:8px;opacity:0;transition:opacity .15s}.thumbnail-wrapper:hover .thumbnail-remove{opacity:1}.thumbnail-remove:hover{background:#ef4444e6}.processed-dot{position:absolute;bottom:4px;right:4px;width:8px;height:8px;background:var(--green);border-radius:50%;border:1.5px solid var(--surface)}.add-tile{width:58px;height:58px;border-radius:var(--r-sm);border:1.5px dashed var(--border);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:border-color .15s,background .15s}.add-tile:hover{border-color:var(--blue);background:var(--blue-light);color:var(--blue)}.canvas-column{display:flex;flex-direction:column;background:var(--bg);padding:20px;overflow:hidden;position:relative;align-items:center;justify-content:center}.canvas-toolbar{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:10}.toolbar-group{display:flex;gap:8px;pointer-events:auto}.toolbar-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:6px 12px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s}.toolbar-btn:hover{background:var(--bg);border-color:var(--muted-light)}.toolbar-btn.active{background:var(--blue-light);border-color:var(--blue);color:var(--blue)}.zoom-controls{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);overflow:hidden;pointer-events:auto}.zoom-btn{background:transparent;border:none;color:var(--text);padding:6px 10px;display:flex;align-items:center;font-size:12px;transition:background .12s}.zoom-btn:hover{background:var(--bg)}.zoom-value{font-size:11px;font-weight:600;color:var(--muted);min-width:36px;text-align:center;-webkit-user-select:none;user-select:none}.canvas-viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;position:relative;padding:40px 0}.preview-container{position:relative;display:inline-block;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-lg);border-radius:4px}.preview-img{display:block;width:100%;height:100%;pointer-events:none;border-radius:4px}.resize-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border:2.5px solid var(--blue);pointer-events:none;box-sizing:border-box}.resize-overlay.aspect-locked{border-color:var(--blue)}.handle{position:absolute;width:11px;height:11px;background:var(--surface);border:2px solid var(--blue);pointer-events:auto;box-sizing:border-box;border-radius:2px;z-index:15}.handle:hover{background:var(--blue-light)}.handle-tl{top:-6px;left:-6px}.handle-tr{top:-6px;right:-6px}.handle-bl{bottom:-6px;left:-6px}.handle-br{bottom:-6px;right:-6px}.handle-t{top:-6px;left:calc(50% - 6px)}.handle-b{bottom:-6px;left:calc(50% - 6px)}.handle-l{left:-6px;top:calc(50% - 6px)}.handle-r{right:-6px;top:calc(50% - 6px)}.dimension-label{position:absolute;bottom:-32px;left:50%;transform:translate(-50%);background:#18181be6;color:#fff;padding:4px 10px;border-radius:var(--r-sm);font-size:11.5px;font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-md);font-family:monospace}.canvas-footer{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:center;gap:24px;font-size:12px;color:var(--muted);pointer-events:none}.canvas-footer span{background:var(--surface);border:1px solid var(--border);padding:4px 12px;border-radius:var(--r-full);box-shadow:var(--shadow-sm);pointer-events:auto}.canvas-footer strong{color:var(--text)}.properties-panel{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:20px;gap:20px;flex-shrink:0}.tabs-row{display:flex;background:var(--bg);padding:4px;border-radius:var(--r-full);border:1px solid var(--border)}.tab-btn{flex:1;background:transparent;border:none;font-size:12.5px;font-weight:500;color:var(--muted);padding:6px 4px;border-radius:var(--r-full);transition:background .12s,color .12s;text-align:center}.tab-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.panel-section{display:flex;flex-direction:column;gap:12px}.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.pixels-grid{display:flex;align-items:center;gap:8px}.input-container{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:11px;color:var(--muted)}.num-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;font-size:14px;color:var(--text);font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s}.num-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-light)}.aspect-lock-btn{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;margin-top:15px;transition:background .15s,border-color .15s,color .15s}.aspect-lock-btn.locked{background:var(--blue-light);border-color:var(--blue);color:var(--blue)}.unit-row{display:flex;gap:8px}.select-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 30px 8px 12px;font-size:13px;color:var(--text);font-weight:500;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px}.select-input:focus{border-color:var(--blue)}.lock-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0}.lock-toggle-label{font-size:13px;color:var(--text);font-weight:500}.switch{position:relative;display:inline-block;width:38px;height:20px}.switch input{opacity:0;width:0;height:0}.slider-switch{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--border);transition:.2s;border-radius:var(--r-full)}.slider-switch:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.slider-switch{background-color:var(--blue)}input:checked+.slider-switch:before{transform:translate(18px)}.percent-readout{font-size:12px;color:var(--muted);font-weight:500}.range-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:var(--r-full);background:var(--border);outline:none;padding:0;margin:8px 0}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--blue);border:2.5px solid var(--surface);box-shadow:var(--shadow-sm);transition:transform .1s}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.chips-row{display:flex;gap:8px}.chip-btn{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-full);padding:6px 0;font-size:12px;font-weight:600;color:var(--muted);text-align:center;transition:background .12s,border-color .12s,color .12s}.chip-btn:hover{border-color:var(--muted-light);color:var(--text)}.chip-btn.active{background:var(--blue-light);border-color:var(--blue);color:var(--blue)}.info-note{display:flex;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;font-size:11.5px;color:var(--muted);line-height:1.4}.info-note-icon{color:var(--muted-light);flex-shrink:0;margin-top:1px}.format-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.stat-card{background:var(--blue-light);border:1px solid rgba(59,130,246,.15);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:8px}.stat-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}.stat-label{color:var(--muted)}.stat-val{font-weight:600;color:var(--text)}.stat-val.success{color:var(--green)}.reassurance-line{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--muted);margin-top:4px}.reassurance-icon{color:var(--muted-light)}.apply-all-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:500;font-size:13px;padding:10px;border-radius:var(--r-md);transition:background .15s,border-color .15s;text-align:center}.apply-all-btn:hover{background:var(--bg);border-color:var(--muted-light)}.upload-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--surface);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;transition:opacity .2s ease-in-out}.upload-overlay.hidden{opacity:0;pointer-events:none}.drop-zone{max-width:480px;width:100%;border:2px dashed var(--border);border-radius:var(--r-lg);padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:border-color .18s,background .18s;background:var(--bg)}.drop-zone.dragover{border-color:var(--blue);background:var(--blue-light)}.upload-icon{width:48px;height:48px;color:var(--muted-light);display:flex;align-items:center;justify-content:center;font-size:32px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);margin-bottom:8px}.drop-zone.dragover .upload-icon{color:var(--blue);box-shadow:0 0 10px #3b82f626}.upload-title{font-size:15px;font-weight:600;color:var(--text)}.upload-subtitle{font-size:12.5px;color:var(--muted);margin-top:-8px}.select-btn{background:var(--blue);color:#fff;border:none;font-weight:500;font-size:13px;padding:8px 18px;border-radius:var(--r-full);box-shadow:var(--shadow-sm);transition:background .15s}.select-btn:hover{background:var(--blue-hover)}.privacy-badge{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:16px}.error-banner{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#fef2f2;border:1px solid #fee2e2;color:#ef4444;font-size:13px;font-weight:500;padding:10px 18px;border-radius:var(--r-full);display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-lg);z-index:1000;transition:opacity .2s,transform .2s;pointer-events:none}.mobile-bottom-nav{display:none}@media (max-width: 860px){body{height:100dvh;overflow:hidden}.ir-header{height:60px;padding:0 16px;gap:10px;flex-shrink:0}.brand span{display:none}.active-file-pill{flex:1;max-width:none;min-width:0;font-size:12px}.active-file-specs{display:none}.ir-workspace{display:flex;flex-direction:column;height:calc(100dvh - 60px);overflow:hidden;position:relative}.ir-workspace.has-images{height:calc(100dvh - 124px)}.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:64px;background:var(--surface);border-top:1px solid var(--border);z-index:200;align-items:stretch;box-shadow:0 -2px 12px #0000000f}.ir-workspace.has-images~.mobile-bottom-nav{display:flex}.mob-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.03em;padding:8px 4px;transition:color .15s,background .15s;border-top:2px solid transparent;min-height:unset}.mob-nav-btn.active{color:var(--blue);border-top-color:var(--blue);background:var(--blue-light)}.mob-nav-btn svg{flex-shrink:0}.filmstrip,.canvas-column,.properties-panel{flex:1;width:100%;border:none;border-radius:0;min-height:0;overflow-y:auto;display:none}.filmstrip.mob-active{display:flex;flex-direction:column;padding:16px;gap:12px;background:var(--bg)}.canvas-column.mob-active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:16px;background:var(--bg);overflow:auto}.properties-panel.mob-active{display:flex;flex-direction:column;gap:20px;padding:20px 16px;background:var(--surface)}.filmstrip.mob-active #thumbnailsList{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px}.filmstrip.mob-active .thumbnail-wrapper,.filmstrip.mob-active .add-tile{width:100%;height:72px}.filmstrip.mob-active .add-tile{grid-column:span 1}.thumbnail-remove{opacity:1!important}.canvas-column.mob-active .canvas-viewport{width:100%;height:auto;min-height:240px;padding:12px 0;flex:1}.canvas-column.mob-active .preview-img{max-width:100%;max-height:55vh;object-fit:contain}.canvas-column.mob-active .canvas-toolbar{position:relative;top:unset;left:unset;right:unset;margin-bottom:12px;display:flex!important;pointer-events:auto;width:100%}.canvas-column.mob-active .canvas-footer{position:relative;bottom:unset;left:unset;right:unset;margin-top:12px;display:flex!important;justify-content:center;flex-wrap:wrap;gap:8px}.upload-overlay{position:absolute;top:0;left:0;right:0;bottom:64px}}@media (max-width: 480px){.ir-header{height:56px;padding:0 12px}.export-btn{font-size:12px;padding:7px 12px}.ir-workspace{height:calc(100dvh - 120px)}.mobile-bottom-nav{height:64px}.mob-nav-btn{font-size:9px}.tab-btn{font-size:11px;padding:6px 4px}.filmstrip.mob-active #thumbnailsList{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.filmstrip.mob-active .thumbnail-wrapper,.filmstrip.mob-active .add-tile{height:64px}}@media (max-width: 860px){button,.tab-btn,.chip-btn,.select-btn,.export-btn,.num-input,.select-input,.aspect-lock-btn,.thumbnail-wrapper{min-height:40px}}