.gradient-preview{min-height:200px;border-radius:var(--radius-lg);border:1px solid var(--color-border);margin-bottom:var(--space-4);transition:background var(--duration-normal) var(--ease-default)}.gradient-controls{display:flex;flex-direction:column;gap:var(--space-4)}.type-selector{display:flex;gap:var(--space-2);flex-wrap:wrap}.type-selector label{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);color:var(--color-text-secondary);transition:all var(--duration-normal) var(--ease-default);flex:1;justify-content:center}.type-selector label:hover{border-color:var(--color-border-hover)}.type-selector input[type=radio]{accent-color:var(--color-accent)}.type-selector input[type=radio]:checked+span{color:var(--color-text);font-weight:var(--weight-medium)}.angle-control{display:flex;align-items:center;gap:var(--space-3)}.angle-control label{font-size:var(--text-sm);color:var(--color-text-secondary);white-space:nowrap}.angle-input{width:80px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.angle-input:focus{outline:none;border-color:var(--color-border-focus)}.color-stops{display:flex;flex-direction:column;gap:var(--space-3)}.color-stop-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md)}.color-stop-item input[type=color]{width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px;cursor:pointer;background:none;flex-shrink:0}.color-stop-item input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-stop-item input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.color-stop-item .hex-display{font-size:var(--text-sm);font-family:var(--font-mono);color:var(--color-text-secondary);min-width:70px}.color-stop-item .position-input{width:60px;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.color-stop-item .position-input:focus{outline:none;border-color:var(--color-border-focus)}.position-label{font-size:var(--text-xs);color:var(--color-text-tertiary)}.remove-stop-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--color-text-tertiary);cursor:pointer;transition:all var(--duration-normal) var(--ease-default);margin-left:auto;flex-shrink:0}.remove-stop-btn:hover{color:var(--color-error);border-color:var(--color-error-light);background:var(--color-error-light)}.add-stop-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-accent-light);border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-normal) var(--ease-default);width:100%}.add-stop-btn:hover{border-color:var(--color-border-hover);color:var(--color-text)}.presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.preset-swatch{aspect-ratio:1;border-radius:var(--radius-md);border:2px solid var(--color-border);cursor:pointer;transition:all var(--duration-normal) var(--ease-default);position:relative;overflow:hidden}.preset-swatch:hover{border-color:var(--color-border-hover);transform:scale(1.05);box-shadow:var(--shadow-md)}.preset-swatch .preset-name{position:absolute;bottom:0;left:0;right:0;padding:var(--space-1);background:#00000080;color:#fff;font-size:var(--text-xs);text-align:center;opacity:0;transition:opacity var(--duration-normal) var(--ease-default)}.preset-swatch:hover .preset-name{opacity:1}.css-output{position:relative}.css-output pre{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);overflow-x:auto;white-space:pre-wrap;word-break:break-all;line-height:var(--leading-relaxed);margin:0}.copy-css-btn{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:var(--color-accent);border:none;border-radius:var(--radius-sm);color:var(--color-accent-text);font-size:var(--text-xs);cursor:pointer;transition:all var(--duration-normal) var(--ease-default)}.copy-css-btn:hover{background:var(--color-accent-hover)}.preview-shapes{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.preview-button{padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:default;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.2)}.preview-card{padding:var(--space-6);border-radius:var(--radius-lg);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.preview-card-title{font-size:var(--text-base);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}.preview-card-text{font-size:var(--text-sm);opacity:.9}.section-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);margin-bottom:var(--space-2)}@media(min-width:768px){.presets-grid{grid-template-columns:repeat(4,1fr)}.gradient-preview{min-height:240px}}@media not (min-width:480px){.presets-grid{grid-template-columns:repeat(4,1fr)}.preview-shapes{grid-template-columns:1fr}.color-stop-item{flex-wrap:wrap}}