.gradient-generator{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-lg)}.gradient-preview{width:100%;height:200px;border-radius:var(--radius-xl);border:1px solid var(--color-border-subtle)}.gradient-controls{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-xl);background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid var(--color-border-subtle)}.control-group{display:flex;flex-direction:column;gap:var(--space-sm)}.control-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}.control-label strong{color:var(--color-accent-light)}.type-buttons{display:flex;gap:var(--space-sm)}.type-btn{flex:1;padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all .2s ease}.type-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.type-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.angle-slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:var(--color-border);border-radius:4px;outline:none}.angle-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--color-accent);border-radius:50%;cursor:pointer}.color-stops{display:flex;flex-direction:column;gap:var(--space-sm)}.color-stop{display:flex;align-items:center;gap:var(--space-sm)}.color-picker{width:40px;height:40px;padding:0;border:none;border-radius:var(--radius-md);cursor:pointer}.color-input{flex:1;padding:var(--space-sm);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-mono);font-size:var(--text-sm)}.position-input{width:60px;padding:var(--space-sm);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-sm);text-align:center}.position-label{color:var(--color-text-muted);font-size:var(--text-sm)}.remove-btn{width:28px;height:28px;padding:0;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--text-lg);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.remove-btn:hover{background:#ef4444;border-color:#ef4444;color:#fff}.add-color-btn{padding:var(--space-sm) var(--space-md);background:transparent;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--text-sm);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--space-xs)}.add-color-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.action-buttons{display:flex;gap:var(--space-sm)}.action-btn{flex:1;padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--space-xs)}.action-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.presets-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-sm)}.preset-btn{aspect-ratio:1;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.preset-btn:hover{border-color:var(--color-accent);transform:scale(1.1)}.css-output{display:flex;flex-direction:column;gap:var(--space-sm)}.css-code{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle)}.css-code code{flex:1;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-secondary);word-break:break-all}.gradient-generator .copy-btn{padding:var(--space-sm) var(--space-md);background:var(--color-accent);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--text-sm);cursor:pointer;transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;gap:var(--space-xs)}.gradient-generator .copy-btn:hover{background:var(--color-accent-light)}@media(max-width:600px){.css-code{flex-direction:column;align-items:stretch}.css-code code{font-size:var(--text-xs)}.presets-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:500px){.gradient-controls{padding:var(--space-lg)}.presets-grid{grid-template-columns:repeat(3,1fr)}.color-stop{flex-wrap:wrap}.color-input{order:1;width:100%;font-size:16px}.position-input{font-size:16px}.color-picker{width:44px;height:44px}.action-buttons{flex-direction:column}.type-btn{padding:var(--space-sm) var(--space-xs);font-size:var(--text-xs)}.gradient-preview{height:150px}.remove-btn{width:36px;height:36px}}