.app{display:flex;flex-direction:column;min-height:100vh;background:var(--bg-primary)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle)}.app-logo{display:flex;align-items:center;gap:.75rem}.app-logo-icon{font-size:1.5rem}.app-logo-text{font-size:1.25rem;font-weight:600;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{font-size:.875rem;color:var(--text-muted)}.app-content{flex:1;display:flex;flex-direction:column}.drop-container{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;width:min(500px,90vw);height:min(400px,60vh);background:var(--bg-secondary);border:2px dashed var(--border-default);border-radius:1rem;cursor:pointer;transition:all .3s ease}.drop-zone:hover{border-color:var(--accent-primary);background:var(--bg-tertiary)}.drop-zone.drag-over{border-color:var(--accent-primary);background:var(--bg-tertiary);box-shadow:0 0 40px var(--accent-glow);transform:scale(1.02)}.drop-icon{font-size:4rem;opacity:.8;transition:transform .3s ease}.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon{transform:scale(1.1)}.drop-text{text-align:center}.drop-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0 0 .5rem}.drop-subtitle{font-size:.875rem;color:var(--text-muted);margin:0}.drop-hint{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-elevated);border-radius:2rem;font-size:.75rem;color:var(--text-secondary)}.drop-hint-icon{color:var(--accent-primary)}.editor{flex:1;display:flex;flex-direction:column;min-height:0}.editor-canvas{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg-secondary);min-height:0;overflow:hidden}.editor-img-container{position:relative;max-width:100%;max-height:100%}.editor-img{display:block;max-width:100%;max-height:calc(100vh - 300px);object-fit:contain;border-radius:.5rem;box-shadow:0 20px 60px #00000080}.editor-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}.editor-overlay svg{width:100%;height:100%}.editor-toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle)}.toolbar-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:.5rem;color:var(--text-secondary);font-size:.875rem;font-weight:500}.toolbar-btn:hover{background:var(--bg-elevated);border-color:var(--border-hover);color:var(--text-primary)}.toolbar-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.toolbar-separator{width:1px;height:1.5rem;background:var(--border-default)}.toolbar-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.editor-controls{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;background:var(--bg-primary);border-top:1px solid var(--border-subtle)}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group.gradient-preview{flex:1;min-width:200px}.control-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.gradient-bar{height:48px;border-radius:.5rem;border:1px solid var(--border-default);background:repeating-conic-gradient(#808080 0% 25%,transparent 0% 50%) 50% / 16px 16px;overflow:hidden}.gradient-bar-inner{height:100%;width:100%}.samples-control{display:flex;align-items:center;gap:.75rem}.samples-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:120px;height:4px;background:var(--bg-elevated);border-radius:2px;outline:none}.samples-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform .15s ease}.samples-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.samples-value{min-width:2.5rem;padding:.25rem .5rem;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:.25rem;color:var(--text-primary);font-size:.875rem;text-align:center}.export-buttons{display:flex;gap:.5rem}.export-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:.5rem;color:var(--text-secondary);font-size:.875rem;font-weight:500;white-space:nowrap}.export-btn:hover{background:var(--bg-elevated);border-color:var(--accent-primary);color:var(--text-primary)}.export-btn.copied{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 0 20px var(--success-glow)}.export-btn-icon{font-size:1rem}.editor-help{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-secondary);border-top:1px solid var(--border-subtle);font-size:.75rem;color:var(--text-muted)}.help-item{display:flex;align-items:center;gap:.25rem}.help-key{padding:.125rem .375rem;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:.25rem;font-family:monospace;font-size:.625rem}.editor-overlay svg path{stroke:#fff;stroke-width:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.editor-overlay svg g circle:last-child{stroke:#fff;stroke-width:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));cursor:grab}.editor-overlay svg g circle:last-child:active{cursor:grabbing}.editor-overlay svg .sample-point{opacity:.8}:root{--bg-primary: #0a0a0b;--bg-secondary: #141416;--bg-tertiary: #1c1c1f;--bg-elevated: #232326;--border-subtle: rgba(255, 255, 255, .08);--border-default: rgba(255, 255, 255, .12);--border-hover: rgba(255, 255, 255, .2);--text-primary: #fafafa;--text-secondary: #a1a1a6;--text-muted: #6b6b70;--accent-primary: #6366f1;--accent-secondary: #818cf8;--accent-glow: rgba(99, 102, 241, .4);--success: #10b981;--success-glow: rgba(16, 185, 129, .4);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);background:var(--bg-primary)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;transition:all .2s ease}input{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}