:root{color:#1f2933;background:#eef2f6;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#eef2f6}button,input,select{font:inherit}button{border:0}button:disabled{cursor:not-allowed}#root{min-height:100vh}.app-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:100vh;color:#1f2933}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #d6dee8;background:#f8fafc;box-shadow:0 1px #0f172a0a}.toolbar-logo{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding-right:12px;border-right:1px solid #d6dee8;margin-right:4px;color:#2262a9}.toolbar-title{margin:0;font-size:16px;font-weight:700;color:#1f2933;white-space:nowrap;letter-spacing:-.01em}.tool-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;border:1px solid #c6d1dd;border-radius:8px;color:#243447;background:#fff;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease}.tool-button{gap:8px;padding:0 12px;white-space:nowrap}.icon-button{width:38px;padding:0}.tool-button:hover:not(:disabled),.icon-button:hover:not(:disabled){border-color:#87a4c4;background:#f1f6fb}.tool-button:focus-visible,.tool-button:focus-within,.icon-button:focus-visible{outline:3px solid rgba(34,98,169,.32);outline-offset:2px;border-color:#2262a9}.tool-button:active:not(:disabled),.icon-button:active:not(:disabled){transform:translateY(1px)}.tool-button:disabled,.icon-button:disabled{color:#9aa8b7;background:#edf1f5;border-color:#d7dfe7}.tool-button.primary{color:#fff;border-color:#2262a9;background:#2262a9}.tool-button.primary:hover:not(:disabled){border-color:#174f8d;background:#174f8d}.tool-button input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%)}.toolbar-divider{width:1px;height:28px;margin:0 2px;background:#d6dee8}.work-scale-control{display:inline-grid;grid-template-columns:auto 88px 72px auto;align-items:center;gap:8px;min-height:38px;padding:0 10px;border:1px solid #c6d1dd;border-radius:8px;color:#415164;background:#fff;white-space:nowrap}.work-scale-control select{height:28px;width:88px;border:1px solid #c6d1dd;border-radius:6px;color:#1f2933;background:#fff}.work-scale-control input{width:72px;height:28px;padding:0 7px;border:1px solid #c6d1dd;border-radius:6px;color:#1f2933;background:#fff}.work-scale-control:has(select:disabled),.work-scale-control:has(input:disabled){color:#9aa8b7;background:#edf1f5;border-color:#d7dfe7}.toolbar-spacer{flex:1 1 auto;min-width:12px}.zoom-label{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:38px;padding:0 8px;border-radius:8px;color:#415164;background:#edf3f8;font-variant-numeric:tabular-nums}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:16px;min-height:0;padding:16px}.workspace,.right-sidebar,.slice-panel{min-width:0;min-height:0}.right-sidebar{display:flex;flex-direction:column;gap:12px}.ad-slot{flex-shrink:0;display:grid;place-items:center;min-height:250px;border:1px dashed #9db4cb;border-radius:8px;background:#f7fafc}.ad-placeholder{color:#9aa8b7;font-size:14px}.workspace,.slice-panel{border:1px solid #d7dfe7;border-radius:8px;background:#fff}.workspace{display:grid;place-items:center;overflow:hidden}.drop-zone{display:grid;place-items:center;align-content:center;gap:10px;width:min(560px,calc(100% - 32px));min-height:260px;padding:32px;border:2px dashed #9db4cb;border-radius:8px;color:#536579;text-align:center;background:#f7fafc}.drop-zone strong{color:#1f2933;font-size:22px;line-height:1.25}.drop-zone span{max-width:38rem;line-height:1.6}.canvas-workspace{display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;width:100%;height:100%;min-height:420px;padding:16px}.image-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:#536579}.image-summary strong{max-width:100%;overflow:hidden;color:#1f2933;text-overflow:ellipsis;white-space:nowrap}.canvas-stage{position:relative;min-height:0;border:1px solid #d7dfe7;border-radius:8px;overflow:hidden;background:linear-gradient(45deg,#e5ebf1 25%,transparent 25%),linear-gradient(-45deg,#e5ebf1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5ebf1 75%),linear-gradient(-45deg,transparent 75%,#e5ebf1 75%);background-color:#f8fafc;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.source-preview-image{position:absolute;left:0;top:0;display:block;max-width:none;max-height:none;image-rendering:pixelated;pointer-events:none;transform-origin:0 0;-webkit-user-select:none;user-select:none}.workspace-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;min-width:100%;min-height:100%;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}.workspace-canvas:active{cursor:grabbing}.selection-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.selection-box{position:absolute;border:2px solid #1d4ed8;background:#2563eb1f;box-shadow:0 0 0 1px #ffffffe6,0 0 0 4px #2563eb29}.selection-box.selected{border-color:#f59e0b;background:#f59e0b24;box-shadow:0 0 0 1px #fffffff2,0 0 0 4px #f59e0b3d}.selection-handle{position:absolute;width:10px;height:10px;border:2px solid #f59e0b;border-radius:2px;background:#fff}.selection-handle.nw{left:-6px;top:-6px}.selection-handle.ne{right:-6px;top:-6px}.selection-handle.sw{left:-6px;bottom:-6px}.selection-handle.se{right:-6px;bottom:-6px}.slice-panel{display:flex;flex-direction:column;flex:1 1 0;overflow:hidden;padding:14px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #e1e7ee}.panel-heading span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;color:#2262a9;background:#e6f0fa;font-weight:700;font-variant-numeric:tabular-nums}.muted{margin:14px 0 0;color:#64748b;line-height:1.6}.slice-list{display:grid;gap:10px;flex:1 1 0;min-height:0;margin-top:12px;align-content:start;overflow:auto}.slice-row{display:grid;grid-template-columns:64px minmax(0,1fr) 34px 34px;align-items:start;gap:10px;padding:10px;border:1px solid #d7dfe7;border-radius:8px;background:#fff;cursor:pointer;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}.slice-row:hover{border-color:#9db4cb;background:#f7fafc}.slice-row.selected{border-color:#2262a9;box-shadow:0 0 0 3px #2262a929}.slice-thumb{width:64px;height:64px;border:1px solid #d7dfe7;border-radius:6px;object-fit:contain;background:linear-gradient(45deg,#e5ebf1 25%,transparent 25%),linear-gradient(-45deg,#e5ebf1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5ebf1 75%),linear-gradient(-45deg,transparent 75%,#e5ebf1 75%);background-color:#f8fafc;background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.slice-meta{display:grid;min-width:0;gap:8px}.slice-meta input{width:100%;min-width:0;height:30px;padding:0 8px;border:1px solid #c6d1dd;border-radius:6px;color:#1f2933;background:#fff}.slice-meta select,.slice-export-controls input{min-width:0;height:34px;border:1px solid #c6d1dd;border-radius:6px;color:#1f2933;background:#fff}.slice-meta input:focus{outline:3px solid rgba(34,98,169,.24);outline-offset:1px;border-color:#2262a9}.slice-meta select:focus,.slice-export-controls input:focus{outline:3px solid rgba(34,98,169,.24);outline-offset:1px;border-color:#2262a9}.slice-meta span{color:#64748b;font-size:12px;line-height:1.35;overflow-wrap:anywhere}.slice-export-controls{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;align-items:center}.slice-export-controls label{display:grid;grid-template-columns:16px minmax(88px,1fr);align-items:center;gap:6px}.slice-export-controls label span,.slice-size-fields span{color:#64748b;font-size:12px}.slice-size-fields{display:grid;grid-template-columns:minmax(76px,1fr) auto minmax(76px,1fr);align-items:center;gap:6px}.slice-size-fields input,.slice-export-controls label input{width:100%;padding:0 8px}.small-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #c6d1dd;border-radius:6px;color:#243447;background:#fff;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.small-icon:hover:not(:disabled){border-color:#87a4c4;background:#eef5fb}.small-icon:focus-visible{outline:3px solid rgba(34,98,169,.28);outline-offset:2px}.small-icon.danger{color:#b42318}.small-icon.danger:hover:not(:disabled){border-color:#f2a7a0;background:#fff1f0}.status-bar{min-height:36px;padding:8px 16px;border-top:1px solid #d6dee8;color:#415164;background:#f8fafc;line-height:1.4;overflow-wrap:anywhere}@media (max-width: 860px){.workspace-grid{grid-template-columns:1fr}.slice-panel{min-height:180px}}@media (max-width: 1180px){.workspace-grid{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}.slice-export-controls{grid-template-columns:1fr}.slice-size-fields{grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr)}}@media (max-width: 560px){.toolbar{padding:10px}.toolbar-spacer{flex-basis:100%;height:0}.tool-button{flex:1 1 auto}.workspace-grid{padding:10px}.drop-zone{width:calc(100% - 20px);min-height:220px;padding:22px}.canvas-workspace{min-height:340px;padding:12px}}