:root{--background: 0 0% 3.9%;--foreground: 0 0% 98%;--card: 0 0% 3.9%;--card-foreground: 0 0% 98%;--popover: 0 0% 3.9%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 0 0% 9%;--secondary: 0 0% 14.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 14.9%;--muted-foreground: 0 0% 63.9%;--accent: 0 0% 14.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 0 0% 14.9%;--input: 0 0% 14.9%;--ring: 0 0% 83.1%;--radius: 4px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif;background:hsl(var(--background));color:hsl(var(--foreground));min-height:100vh;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh}.toolbar-top,.toolbar-bottom{background:hsl(var(--card));padding:12px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-color:hsl(var(--border))}.toolbar-top{justify-content:space-between;border-bottom:1px solid hsl(var(--border))}.toolbar-bottom{border-top:1px solid hsl(var(--border));flex-direction:column;gap:0;padding:0}.toolbar-left,.toolbar-right{display:flex;gap:6px;align-items:center}.category-tabs{display:flex;gap:0;justify-content:center;padding:8px 16px}.category-btn{border-radius:0;border-right-width:0}.category-btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}.category-btn:last-child{border-radius:0 var(--radius) var(--radius) 0;border-right-width:1px}.category-btn.active{background:hsl(var(--accent))}.tool-panel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;padding:12px 16px;border-top:1px solid hsl(var(--border))}.tool-panel.hidden{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:13px;font-weight:500;height:32px;padding:0 12px;border-radius:var(--radius);border:1px solid hsl(var(--border));background:transparent;color:hsl(var(--foreground));cursor:pointer;transition:background .15s,border-color .15s,color .15s}.btn:hover:not(:disabled){background:hsl(var(--accent));border-color:hsl(var(--accent))}.btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.btn:disabled,.btn.disabled{opacity:.5;pointer-events:none}.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}.btn-primary:hover:not(:disabled){background:hsl(var(--primary) / .9)}.btn-ghost{border:none}.btn-ghost:hover:not(:disabled){background:hsl(var(--accent))}.btn-sm{height:28px;padding:0 10px;font-size:12px}.btn-icon{width:32px;height:32px;padding:0}.btn-icon svg{width:16px;height:16px;stroke:currentColor}.tool-btn{min-width:70px}.select{display:inline-flex;align-items:center;height:32px;padding:0 10px;font-size:13px;border-radius:var(--radius);border:1px solid hsl(var(--border));background:transparent;color:hsl(var(--foreground));cursor:pointer;transition:border-color .15s}.select:hover{border-color:hsl(var(--ring))}.select:focus{outline:2px solid hsl(var(--ring));outline-offset:2px}.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;background:#0f0f0f;position:relative;overflow:hidden}#preview-canvas{max-width:100%;max-height:100%;background:repeating-conic-gradient(#1f1f1f,#1f1f1f 25%,#141414 0%,#141414 50%) 50% / 16px 16px}.no-image-message{position:absolute;color:hsl(var(--muted-foreground));font-size:14px;text-align:center}.no-image-message.hidden{display:none}.crop-overlay{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px #00000073;cursor:move;touch-action:none;z-index:10}.crop-overlay.hidden{display:none}.crop-handle{position:absolute;width:18px;height:18px;background:#fff;border-radius:3px;touch-action:none}.crop-handle-nw{top:-9px;left:-9px;cursor:nw-resize}.crop-handle-ne{top:-9px;right:-9px;cursor:ne-resize}.crop-handle-sw{bottom:-9px;left:-9px;cursor:sw-resize}.crop-handle-se{bottom:-9px;right:-9px;cursor:se-resize}.shape-overlay{position:absolute;border:2px dashed #fff;cursor:move;touch-action:none;z-index:10}.shape-overlay.hidden{display:none}.shape-handle{position:absolute;width:18px;height:18px;background:#fff;border-radius:3px;touch-action:none}.shape-handle-nw{top:-9px;left:-9px;cursor:nw-resize}.shape-handle-ne{top:-9px;right:-9px;cursor:ne-resize}.shape-handle-sw{bottom:-9px;left:-9px;cursor:sw-resize}.shape-handle-se{bottom:-9px;right:-9px;cursor:se-resize}.slider-group{display:flex;align-items:center;gap:8px}.slider-group label{font-size:12px;color:hsl(var(--muted-foreground));min-width:64px}.slider-group input[type=range]{width:100px;height:6px;border-radius:3px;background:hsl(var(--secondary));cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:hsl(var(--primary));cursor:pointer;transition:transform .1s}.slider-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider-group input[type=range]:disabled{opacity:.5;cursor:not-allowed}.slider-group span{font-size:11px;min-width:36px;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}.dialog{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog.hidden{display:none}.dialog-content{background:hsl(var(--card));border:1px solid hsl(var(--border));padding:24px;border-radius:calc(var(--radius) * 1.5);text-align:center;min-width:280px}.dialog-content h3{font-size:16px;font-weight:600;margin-bottom:16px;color:hsl(var(--foreground))}.dialog-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.hidden{display:none!important}.input-sm{display:inline-flex;align-items:center;height:32px;padding:0 8px;font-size:13px;border-radius:var(--radius);border:1px solid hsl(var(--border));background:transparent;color:hsl(var(--foreground));width:60px;text-align:center}.input-sm:focus{outline:2px solid hsl(var(--ring));outline-offset:2px}.muted{font-size:13px;color:hsl(var(--muted-foreground))}.panel-label{font-size:12px;color:hsl(var(--muted-foreground));-webkit-user-select:none;user-select:none}kbd{display:inline-flex;align-items:center;height:16px;padding:0 4px;font-size:10px;font-family:inherit;border-radius:3px;border:1px solid hsl(var(--border));background:hsl(var(--muted));color:hsl(var(--muted-foreground));margin-left:4px;pointer-events:none;-webkit-user-select:none;user-select:none}.color-input{width:32px;height:32px;border-radius:var(--radius);border:1px solid hsl(var(--border));background:transparent;cursor:pointer;padding:2px}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}@media (max-width: 640px){kbd{display:none}.toolbar-top{padding:8px 12px}.category-tabs{overflow-x:auto;justify-content:flex-start;padding:8px 12px;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.tool-panel{padding:10px 12px;gap:6px}.slider-group{width:100%}.slider-group input[type=range]{flex:1;width:auto}.dialog-content{min-width:0;width:calc(100vw - 32px)}}.separator{width:1px;height:20px;background:hsl(var(--border));margin:0 4px}