.gth-gradient-generator .gth-gradient-preview { height: 150px; border-radius: var(--gth-radius-lg); margin-bottom: var(--gth-space-4); box-shadow: var(--gth-shadow-md); }
.gth-gradient-generator .gth-gradient-controls { margin-bottom: var(--gth-space-4); }
.gth-gradient-generator .gth-range { flex: 1; }
.gth-gradient-generator .gth-range-value { min-width: 40px; text-align: right; font-weight: var(--gth-font-medium); }
.gth-gradient-generator .gth-color-stops { margin-top: var(--gth-space-3); }
.gth-gradient-generator .gth-stop-list { display: flex; flex-direction: column; gap: var(--gth-space-2); margin-bottom: var(--gth-space-2); }
.gth-gradient-generator .gth-stop-item { display: flex; align-items: center; gap: var(--gth-space-2); }
.gth-gradient-generator .gth-color-input { width: 50px; height: 36px; padding: 0; border: none; cursor: pointer; border-radius: var(--gth-radius-sm); }
.gth-gradient-generator .gth-stop-position { width: 70px; text-align: center; }
.gth-gradient-generator .gth-stop-remove { padding: var(--gth-space-1) var(--gth-space-2); background: var(--gth-error); color: white; border: none; border-radius: var(--gth-radius-sm); cursor: pointer; }
.gth-gradient-generator .gth-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gth-space-2); }
.gth-gradient-generator .gth-code-output { display: block; padding: var(--gth-space-3); background: var(--gth-bg-secondary); border-radius: var(--gth-radius-md); font-family: monospace; font-size: var(--gth-text-sm); word-break: break-all; }