.grad-preview{height: 220px;border-radius: var(--radius);overflow: hidden;border: 1px solid var(--border)}.grad-preview>div{height: 100%}.grad-bar-wrap{position: relative;padding-bottom: 22px}.grad-bar{height: 28px;border-radius: 8px;overflow: hidden;cursor: copy;border: 1px solid var(--border)}.grad-bar>div{height: 100%}.grad-stops{position: absolute;left: 0;right: 0;top: 18px;height: 30px;pointer-events: none}.grad-stop{position: absolute;top: 0;width: 22px;height: 22px;margin-left: -11px;border-radius: 50%;border: 3px solid #fff;box-shadow: 0 0 0 1px rgba(0,0,0,.35),var(--shadow-sm);cursor: grab;pointer-events: auto;touch-action: none;padding: 0}.grad-stop.active{box-shadow: 0 0 0 2px var(--brand),var(--shadow);transform: scale(1.15)}.presets{display: grid;grid-template-columns: repeat(auto-fill,minmax(110px,1fr));gap: 10px}.preset{height: 72px;border: 1px solid var(--border);border-radius: 10px;cursor: pointer;display: flex;align-items: flex-end;padding: 6px 8px;font: 600 0.78rem var(--font);color: #fff;text-shadow: 0 1px 2px rgba(0,0,0,.45);transition: transform 0.15s}.preset:hover{transform: translateY(-2px)}