ElementManager.lua

local ElementManager = {}
local TweenService = game:GetService("TweenService")
local ThemeManager = require(script.Parent:WaitForChild("ThemeManager"))

local function autoResize(frame, desc, baseHeight, extraBottom)
	extraBottom = extraBottom or 10
	local function update()
		local h = math.max(baseHeight, 25 + desc.TextBounds.Y + extraBottom)
		frame.Size = UDim2.new(1, 0, 0, h)
	end
	desc:GetPropertyChangedSignal("TextBounds"):Connect(update)
	task.defer(update)
end

function ElementManager:CreateButton(container, titleText, descText, callback, customConfig)
	local theme = ThemeManager:GetTheme()
	local config = customConfig or {}
	local glowColor = config.GlowColor or theme.SelectionColor or Color3.fromRGB(100, 200, 255)
	local iconColor = config.IconColor or Color3.fromRGB(255, 255, 255)

	local itemButton = Instance.new("TextButton")
	itemButton.Name = "ButtonModule"
	itemButton.Size = UDim2.new(1, 0, 0, 48)
	itemButton.BackgroundColor3 = theme.MainColor
	itemButton.BackgroundTransparency = 0.5
	itemButton.BorderSizePixel = 0
	itemButton.AutoButtonColor = false
	itemButton.Text = ""
	itemButton.ClipsDescendants = true
	itemButton.Active = true
	itemButton.Parent = container

	local corner = Instance.new("UICorner")
	corner.CornerRadius = UDim.new(0, 6)
	corner.Parent = itemButton

	local stroke = Instance.new("UIStroke")
	stroke.Transparency = 0.85
	stroke.Color = theme.SelectionColor
	stroke.Thickness = 0.8
	stroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
	stroke.Parent = itemButton

	local glowOverlay = Instance.new("Frame")
	glowOverlay.Name = "GlowOverlay"
	glowOverlay.Size = UDim2.new(1, 24, 1, 0)
	glowOverlay.Position = UDim2.new(0, -12, 0, 0)
	glowOverlay.BackgroundColor3 = glowColor
	glowOverlay.BackgroundTransparency = 1
	glowOverlay.BorderSizePixel = 0
	glowOverlay.ZIndex = 3
	glowOverlay.Parent = itemButton
	Instance.new("UICorner", glowOverlay).CornerRadius = UDim.new(0, 6)

	local padding = Instance.new("UIPadding")
	padding.PaddingLeft = UDim.new(0, 12)
	padding.PaddingRight = UDim.new(0, 12)
	padding.Parent = itemButton

	local title = Instance.new("TextLabel")
	title.Name = "Title"
	title.Size = UDim2.new(1, -30, 0, 20)
	title.Position = UDim2.new(0, 0, 0, 7)
	title.BackgroundTransparency = 1
	title.Text = titleText
	title.TextColor3 = theme.TextColor or Color3.fromRGB(255, 255, 255)
	title.Font = Enum.Font.GothamMedium
	title.TextSize = 13
	title.TextXAlignment = Enum.TextXAlignment.Left
	title.TextTruncate = Enum.TextTruncate.AtEnd
	title.ZIndex = 4
	title.Parent = itemButton

	local desc = Instance.new("TextLabel")
	desc.Name = "Description"
	desc.Size = UDim2.new(1, -30, 0, 14)
	desc.Position = UDim2.new(0, 0, 0, 25)
	desc.BackgroundTransparency = 1
	desc.Text = descText
	desc.TextColor3 = Color3.fromRGB(230, 240, 245)
	desc.TextTransparency = 0.4
	desc.Font = Enum.Font.Gotham
	desc.TextSize = 11
	desc.TextXAlignment = Enum.TextXAlignment.Left
	desc.TextWrapped = true
	desc.ZIndex = 4
	desc.Parent = itemButton

	local arrowLabel = Instance.new("TextLabel")
	arrowLabel.Name = "Arrow"
	arrowLabel.Size = UDim2.new(0, 20, 0, 20)
	arrowLabel.AnchorPoint = Vector2.new(0, 0.5)
	arrowLabel.Position = UDim2.new(1, -20, 0.5, 0)
	arrowLabel.BackgroundTransparency = 1
	arrowLabel.Text = ">"
	arrowLabel.TextColor3 = iconColor
	arrowLabel.TextTransparency = 0.3
	arrowLabel.Font = Enum.Font.GothamBold
	arrowLabel.TextSize = 16
	arrowLabel.TextXAlignment = Enum.TextXAlignment.Center
	arrowLabel.ZIndex = 4
	arrowLabel.Parent = itemButton

	autoResize(itemButton, desc, 48)

	local callbacks = {}
	if callback then table.insert(callbacks, callback) end

	local function playClickEffect()
		TweenService:Create(glowOverlay, TweenInfo.new(0.08, Enum.EasingStyle.Quart, Enum.EasingDirection.Out), {BackgroundTransparency = 0.72}):Play()
		TweenService:Create(arrowLabel, TweenInfo.new(0.1, Enum.EasingStyle.Quart, Enum.EasingDirection.Out), {TextTransparency = 0}):Play()
		task.delay(0.12, function()
			TweenService:Create(glowOverlay, TweenInfo.new(0.35, Enum.EasingStyle.Quart, Enum.EasingDirection.Out), {BackgroundTransparency = 1}):Play()
			TweenService:Create(arrowLabel, TweenInfo.new(0.25, Enum.EasingStyle.Back, Enum.EasingDirection.Out), {TextTransparency = 0.3}):Play()
		end)
	end

	itemButton.MouseButton1Click:Connect(function()
		playClickEffect()
		for _, cb in ipairs(callbacks) do cb() end
	end)

	itemButton.MouseEnter:Connect(function()
		game:GetService("Players").LocalPlayer:GetMouse().Icon = "rbxasset://SystemCursors/PointingHand"
		TweenService:Create(itemButton, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.4}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.7}):Play()
		TweenService:Create(arrowLabel, TweenInfo.new(0.2, Enum.EasingStyle.Quart), {TextTransparency = 0}):Play()
	end)
	itemButton.MouseLeave:Connect(function()
		game:GetService("Players").LocalPlayer:GetMouse().Icon = ""
		TweenService:Create(itemButton, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.5}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.85}):Play()
		TweenService:Create(arrowLabel, TweenInfo.new(0.2, Enum.EasingStyle.Quart), {TextTransparency = 0.3}):Play()
	end)

	ThemeManager:RegisterContainer(itemButton, stroke)

	local api = {Frame = itemButton}
	function api:OnChanged(cb) table.insert(callbacks, cb) end
	return api
end

function ElementManager:CreateToggle(container, titleText, descText, callback, customConfig)
	local theme = ThemeManager:GetTheme()
	local config = customConfig or {}
	local onColor = config.OnColor or Color3.fromRGB(48, 209, 88)
	local offColor = config.OffColor or Color3.fromRGB(120, 120, 120)
	local dotColor = config.DotColor or Color3.fromRGB(255, 255, 255)

	local itemFrame = Instance.new("Frame")
	itemFrame.Name = "ToggleModule"
	itemFrame.Size = UDim2.new(1, 0, 0, 48)
	itemFrame.BackgroundColor3 = theme.MainColor
	itemFrame.BackgroundTransparency = 0.5
	itemFrame.BorderSizePixel = 0
	itemFrame.ClipsDescendants = true
	itemFrame.Active = true
	itemFrame.Parent = container

	local corner = Instance.new("UICorner")
	corner.CornerRadius = UDim.new(0, 6)
	corner.Parent = itemFrame

	local stroke = Instance.new("UIStroke")
	stroke.Transparency = 0.85
	stroke.Color = theme.SelectionColor
	stroke.Thickness = 0.8
	stroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
	stroke.Parent = itemFrame

	local padding = Instance.new("UIPadding")
	padding.PaddingLeft = UDim.new(0, 12)
	padding.PaddingRight = UDim.new(0, 12)
	padding.Parent = itemFrame

	local title = Instance.new("TextLabel")
	title.Name = "Title"
	title.Size = UDim2.new(1, -60, 0, 20)
	title.Position = UDim2.new(0, 0, 0, 7)
	title.BackgroundTransparency = 1
	title.Text = titleText
	title.TextColor3 = Color3.fromRGB(255, 255, 255)
	title.Font = Enum.Font.GothamMedium
	title.TextSize = 13
	title.TextXAlignment = Enum.TextXAlignment.Left
	title.TextTruncate = Enum.TextTruncate.AtEnd
	title.Parent = itemFrame

	local desc = Instance.new("TextLabel")
	desc.Name = "Description"
	desc.Size = UDim2.new(1, -60, 0, 14)
	desc.Position = UDim2.new(0, 0, 0, 25)
	desc.BackgroundTransparency = 1
	desc.Text = descText
	desc.TextColor3 = Color3.fromRGB(230, 240, 245)
	desc.TextTransparency = 0.4
	desc.Font = Enum.Font.Gotham
	desc.TextSize = 11
	desc.TextXAlignment = Enum.TextXAlignment.Left
	desc.TextWrapped = true
	desc.Parent = itemFrame

	local ToggleBG = Instance.new("TextButton")
	ToggleBG.Name = "ToggleBG"
	ToggleBG.Size = UDim2.new(0, 34, 0, 18)
	ToggleBG.AnchorPoint = Vector2.new(0, 0.5)
	ToggleBG.Position = UDim2.new(1, -34, 0.5, 0)
	ToggleBG.BackgroundColor3 = offColor
	ToggleBG.AutoButtonColor = false
	ToggleBG.Text = ""
	ToggleBG.Parent = itemFrame
	Instance.new("UICorner", ToggleBG).CornerRadius = UDim.new(1, 0)

	local Dot = Instance.new("Frame")
	Dot.Name = "Dot"
	Dot.Size = UDim2.new(0, 14, 0, 14)
	Dot.Position = UDim2.new(0, 2, 0.5, -7)
	Dot.BackgroundColor3 = dotColor
	Dot.Parent = ToggleBG
	Instance.new("UICorner", Dot).CornerRadius = UDim.new(1, 0)

	autoResize(itemFrame, desc, 48)

	local state = false
	local callbacks = {}
	if callback then table.insert(callbacks, callback) end

	local function updateToggle()
		local targetPos = state and UDim2.new(1, -16, 0.5, -7) or UDim2.new(0, 2, 0.5, -7)
		local targetColor = state and onColor or offColor
		TweenService:Create(Dot, TweenInfo.new(0.2, Enum.EasingStyle.Quart), {Position = targetPos}):Play()
		TweenService:Create(ToggleBG, TweenInfo.new(0.2, Enum.EasingStyle.Quart), {BackgroundColor3 = targetColor}):Play()
	end

	ToggleBG.MouseButton1Click:Connect(function()
		state = not state
		updateToggle()
		for _, cb in ipairs(callbacks) do cb(state) end
	end)

	itemFrame.MouseEnter:Connect(function()
		game:GetService("Players").LocalPlayer:GetMouse().Icon = "rbxasset://SystemCursors/PointingHand"
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.4}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.7}):Play()
	end)
	itemFrame.MouseLeave:Connect(function()
		game:GetService("Players").LocalPlayer:GetMouse().Icon = ""
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.5}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.85}):Play()
	end)

	ThemeManager:RegisterContainer(itemFrame, stroke)

	local api = {Frame = itemFrame, Value = state}
	function api:SetValue(val)
		state = val
		api.Value = state
		updateToggle()
		for _, cb in ipairs(callbacks) do cb(state) end
	end
	function api:OnChanged(cb) table.insert(callbacks, cb) end
	return api
end

function ElementManager:CreateParagraph(container, titleText, descText)
	local theme = ThemeManager:GetTheme()

	local itemFrame = Instance.new("Frame")
	itemFrame.Name = "ParagraphModule"
	itemFrame.Size = UDim2.new(1, 0, 0, 65)
	itemFrame.BackgroundColor3 = theme.MainColor
	itemFrame.BackgroundTransparency = 0.5
	itemFrame.BorderSizePixel = 0
	itemFrame.ClipsDescendants = true
	itemFrame.Parent = container

	local corner = Instance.new("UICorner")
	corner.CornerRadius = UDim.new(0, 6)
	corner.Parent = itemFrame

	local stroke = Instance.new("UIStroke")
	stroke.Transparency = 0.85
	stroke.Color = theme.SelectionColor
	stroke.Thickness = 0.8
	stroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
	stroke.Parent = itemFrame

	local padding = Instance.new("UIPadding")
	padding.PaddingLeft = UDim.new(0, 12)
	padding.PaddingRight = UDim.new(0, 12)
	padding.PaddingTop = UDim.new(0, 8)
	padding.PaddingBottom = UDim.new(0, 8)
	padding.Parent = itemFrame

	local title = Instance.new("TextLabel")
	title.Name = "Title"
	title.Size = UDim2.new(1, 0, 0, 20)
	title.BackgroundTransparency = 1
	title.Text = titleText
	title.TextColor3 = Color3.fromRGB(255, 255, 255)
	title.Font = Enum.Font.GothamMedium
	title.TextSize = 13
	title.TextXAlignment = Enum.TextXAlignment.Left
	title.Parent = itemFrame

	local desc = Instance.new("TextLabel")
	desc.Name = "Description"
	desc.Size = UDim2.new(1, 0, 1, -22)
	desc.Position = UDim2.new(0, 0, 0, 22)
	desc.BackgroundTransparency = 1
	desc.Text = descText
	desc.TextColor3 = Color3.fromRGB(230, 240, 245)
	desc.TextTransparency = 0.4
	desc.Font = Enum.Font.Gotham
	desc.TextSize = 11
	desc.TextXAlignment = Enum.TextXAlignment.Left
	desc.TextYAlignment = Enum.TextYAlignment.Top
	desc.TextWrapped = true
	desc.Parent = itemFrame

	local function updateSize()
		itemFrame.Size = UDim2.new(1, 0, 0, math.max(65, desc.TextBounds.Y + 40))
	end
	desc:GetPropertyChangedSignal("TextBounds"):Connect(updateSize)
	task.defer(updateSize)

	ThemeManager:RegisterContainer(itemFrame, stroke)

	local api = {Frame = itemFrame}
	return api
end

function ElementManager:CreateClipboard(container, titleText, descText, copyText)
	local theme = ThemeManager:GetTheme()
	local clipboardIcon = theme.ClipboardIcon or "rbxassetid://106330002535278"

	local itemButton = Instance.new("TextButton")
	itemButton.Name = "ClipboardModule"
	itemButton.Size = UDim2.new(1, 0, 0, 65)
	itemButton.BackgroundColor3 = theme.MainColor
	itemButton.BackgroundTransparency = 0.5
	itemButton.BorderSizePixel = 0
	itemButton.AutoButtonColor = false
	itemButton.Text = ""
	itemButton.ClipsDescendants = true
	itemButton.Parent = container

	local corner = Instance.new("UICorner")
	corner.CornerRadius = UDim.new(0, 6)
	corner.Parent = itemButton

	local stroke = Instance.new("UIStroke")
	stroke.Transparency = 0.85
	stroke.Color = theme.SelectionColor
	stroke.Thickness = 0.8
	stroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
	stroke.Parent = itemButton

	local padding = Instance.new("UIPadding")
	padding.PaddingLeft = UDim.new(0, 12)
	padding.PaddingRight = UDim.new(0, 12)
	padding.PaddingTop = UDim.new(0, 8)
	padding.PaddingBottom = UDim.new(0, 8)
	padding.Parent = itemButton

	local title = Instance.new("TextLabel")
	title.Name = "Title"
	title.Size = UDim2.new(1, -35, 0, 20)
	title.BackgroundTransparency = 1
	title.Text = titleText
	title.TextColor3 = Color3.fromRGB(255, 255, 255)
	title.Font = Enum.Font.GothamMedium
	title.TextSize = 13
	title.TextXAlignment = Enum.TextXAlignment.Left
	title.TextTruncate = Enum.TextTruncate.AtEnd
	title.Parent = itemButton

	local desc = Instance.new("TextLabel")
	desc.Name = "Description"
	desc.Size = UDim2.new(1, -35, 1, -22)
	desc.Position = UDim2.new(0, 0, 0, 22)
	desc.BackgroundTransparency = 1
	desc.Text = descText
	desc.TextColor3 = Color3.fromRGB(230, 240, 245)
	desc.TextTransparency = 0.4
	desc.Font = Enum.Font.Gotham
	desc.TextSize = 11
	desc.TextXAlignment = Enum.TextXAlignment.Left
	desc.TextYAlignment = Enum.TextYAlignment.Top
	desc.TextWrapped = true
	desc.Parent = itemButton

	local arrowIcon = Instance.new("ImageLabel")
	arrowIcon.Name = "Arrow"
	arrowIcon.Size = UDim2.new(0, 20, 0, 20)
	arrowIcon.AnchorPoint = Vector2.new(0, 0.5)
	arrowIcon.Position = UDim2.new(1, -25, 0.5, 0)
	arrowIcon.BackgroundTransparency = 1
	arrowIcon.Image = clipboardIcon
	arrowIcon.ImageColor3 = theme.SelectionColor
	arrowIcon.Parent = itemButton

	local function updateSize()
		itemButton.Size = UDim2.new(1, 0, 0, math.max(65, desc.TextBounds.Y + 40))
	end
	desc:GetPropertyChangedSignal("TextBounds"):Connect(updateSize)
	task.defer(updateSize)

	itemButton.MouseButton1Click:Connect(function()
		if setclipboard then setclipboard(copyText) end
	end)
	itemButton.MouseEnter:Connect(function()
		game:GetService("Players").LocalPlayer:GetMouse().Icon = "rbxasset://SystemCursors/PointingHand"
		TweenService:Create(itemButton, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.4}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.7}):Play()
	end)
	itemButton.MouseLeave:Connect(function()
		game:GetService("Players").LocalPlayer:GetMouse().Icon = ""
		TweenService:Create(itemButton, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.5}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.85}):Play()
	end)

	ThemeManager:RegisterContainer(itemButton, stroke)

	local api = {Frame = itemButton}
	return api
end

function ElementManager:CreateSlider(container, titleText, descText, minVal, maxVal, defaultVal, callback, customConfig)
	local theme = ThemeManager:GetTheme()
	local config = customConfig or {}
	local fillColor = config.FillColor or theme.SelectionColor
	local trackColor = config.TrackColor or Color3.fromRGB(80, 80, 80)
	local dotColor = config.DotColor or Color3.fromRGB(255, 255, 255)
	local currentVal = math.clamp(defaultVal or minVal, minVal, maxVal)

	local itemFrame = Instance.new("Frame")
	itemFrame.Name = "SliderModule"
	itemFrame.Size = UDim2.new(1, 0, 0, 48)
	itemFrame.BackgroundColor3 = theme.MainColor
	itemFrame.BackgroundTransparency = 0.5
	itemFrame.BorderSizePixel = 0
	itemFrame.ClipsDescendants = true
	itemFrame.Active = true
	itemFrame.Parent = container

	local corner = Instance.new("UICorner")
	corner.CornerRadius = UDim.new(0, 6)
	corner.Parent = itemFrame

	local stroke = Instance.new("UIStroke")
	stroke.Transparency = 0.85
	stroke.Color = theme.SelectionColor
	stroke.Thickness = 0.8
	stroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
	stroke.Parent = itemFrame

	local padding = Instance.new("UIPadding")
	padding.PaddingLeft = UDim.new(0, 12)
	padding.PaddingRight = UDim.new(0, 12)
	padding.Parent = itemFrame

	local title = Instance.new("TextLabel")
	title.Name = "Title"
	title.Size = UDim2.new(1, -145, 0, 20)
	title.Position = UDim2.new(0, 0, 0, 7)
	title.BackgroundTransparency = 1
	title.Text = titleText
	title.TextColor3 = Color3.fromRGB(255, 255, 255)
	title.Font = Enum.Font.GothamMedium
	title.TextSize = 13
	title.TextXAlignment = Enum.TextXAlignment.Left
	title.TextTruncate = Enum.TextTruncate.AtEnd
	title.Parent = itemFrame

	local desc = Instance.new("TextLabel")
	desc.Name = "Description"
	desc.Size = UDim2.new(1, -145, 0, 14)
	desc.Position = UDim2.new(0, 0, 0, 25)
	desc.BackgroundTransparency = 1
	desc.Text = descText
	desc.TextColor3 = Color3.fromRGB(230, 240, 245)
	desc.TextTransparency = 0.4
	desc.Font = Enum.Font.Gotham
	desc.TextSize = 11
	desc.TextXAlignment = Enum.TextXAlignment.Left
	desc.TextWrapped = true
	desc.Parent = itemFrame

	local ValueLabel = Instance.new("TextLabel")
	ValueLabel.Name = "ValueLabel"
	ValueLabel.Size = UDim2.new(0, 30, 0, 14)
	ValueLabel.AnchorPoint = Vector2.new(0, 0.5)
	ValueLabel.Position = UDim2.new(1, -130, 0.5, 0)
	ValueLabel.BackgroundTransparency = 1
	ValueLabel.Text = tostring(currentVal)
	ValueLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
	ValueLabel.Font = Enum.Font.GothamMedium
	ValueLabel.TextSize = 11
	ValueLabel.TextXAlignment = Enum.TextXAlignment.Right
	ValueLabel.ZIndex = 4
	ValueLabel.Parent = itemFrame

	local SliderTrack = Instance.new("Frame")
	SliderTrack.Name = "SliderTrack"
	SliderTrack.Size = UDim2.new(0, 90, 0, 4)
	SliderTrack.AnchorPoint = Vector2.new(0, 0.5)
	SliderTrack.Position = UDim2.new(1, -90, 0.5, 0)
	SliderTrack.BackgroundColor3 = trackColor
	SliderTrack.BorderSizePixel = 0
	SliderTrack.Parent = itemFrame
	Instance.new("UICorner", SliderTrack).CornerRadius = UDim.new(1, 0)

	local SliderFill = Instance.new("Frame")
	SliderFill.Name = "SliderFill"
	SliderFill.Size = UDim2.new(0, 0, 1, 0)
	SliderFill.BackgroundColor3 = fillColor
	SliderFill.BorderSizePixel = 0
	SliderFill.ZIndex = 2
	SliderFill.Parent = SliderTrack
	Instance.new("UICorner", SliderFill).CornerRadius = UDim.new(1, 0)

	local SliderDot = Instance.new("Frame")
	SliderDot.Name = "SliderDot"
	SliderDot.Size = UDim2.new(0, 12, 0, 12)
	SliderDot.AnchorPoint = Vector2.new(0.5, 0.5)
	SliderDot.Position = UDim2.new(0, 0, 0.5, 0)
	SliderDot.BackgroundColor3 = dotColor
	SliderDot.BorderSizePixel = 0
	SliderDot.ZIndex = 3
	SliderDot.Parent = SliderTrack
	Instance.new("UICorner", SliderDot).CornerRadius = UDim.new(1, 0)

	local SliderButton = Instance.new("TextButton")
	SliderButton.Name = "SliderButton"
	SliderButton.Size = UDim2.new(1, 0, 1, 8)
	SliderButton.Position = UDim2.new(0, 0, 0, -4)
	SliderButton.BackgroundTransparency = 1
	SliderButton.Text = ""
	SliderButton.ZIndex = 5
	SliderButton.Parent = SliderTrack

	autoResize(itemFrame, desc, 48)

	local callbacks = {}
	if callback then table.insert(callbacks, callback) end

	local function updateSlider(val)
		val = math.clamp(math.round(val), minVal, maxVal)
		currentVal = val
		local ratio = (val - minVal) / (maxVal - minVal)
		TweenService:Create(SliderFill, TweenInfo.new(0.1, Enum.EasingStyle.Linear), {Size = UDim2.new(ratio, 0, 1, 0)}):Play()
		TweenService:Create(SliderDot, TweenInfo.new(0.1, Enum.EasingStyle.Linear), {Position = UDim2.new(ratio, 0, 0.5, 0)}):Play()
		ValueLabel.Text = tostring(val)
		for _, cb in ipairs(callbacks) do cb(val) end
	end
	updateSlider(currentVal)

	local dragging = false
	SliderButton.MouseButton1Down:Connect(function()
		dragging = true
		game:GetService("Players").LocalPlayer:GetMouse().Icon = "rbxasset://SystemCursors/PointingHand"
	end)
	game:GetService("UserInputService").InputEnded:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 and dragging then
			dragging = false
			game:GetService("Players").LocalPlayer:GetMouse().Icon = ""
		end
	end)
	game:GetService("UserInputService").InputChanged:Connect(function(input)
		if dragging and input.UserInputType == Enum.UserInputType.MouseMovement then
			local ratio = math.clamp((input.Position.X - SliderTrack.AbsolutePosition.X) / SliderTrack.AbsoluteSize.X, 0, 1)
			updateSlider(minVal + (maxVal - minVal) * ratio)
		end
	end)

	itemFrame.MouseEnter:Connect(function()
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.4}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.7}):Play()
	end)
	itemFrame.MouseLeave:Connect(function()
		if not dragging then game:GetService("Players").LocalPlayer:GetMouse().Icon = "" end
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.5}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.85}):Play()
	end)

	ThemeManager:RegisterContainer(itemFrame, stroke)

	local api = {Frame = itemFrame, Value = currentVal}
	function api:SetValue(val)
		updateSlider(val)
		api.Value = currentVal
	end
	function api:OnChanged(cb) table.insert(callbacks, cb) end
	return api
end

function ElementManager:CreateDropdown(container, titleText, descText, options, defaultOption, callback, customConfig)
	local Players = game:GetService("Players")
	local UserInputService = game:GetService("UserInputService")
	local config = customConfig or {}
	local selectionBarColor = config.SelectionBarColor
	local glowColor = config.GlowColor or Color3.fromRGB(255, 255, 255)
	local currentOption = type(defaultOption) == "string" and defaultOption or (options[1] or "None")
	local isOpen = false
	local isProcessing = false
	local W = 160; local ITEM_H = 34; local PADDING = 4; local MAX_H = 220
	local RADIUS = UDim.new(0, 8)
	local function getTheme() return ThemeManager:GetTheme(ThemeManager.CurrentTheme) end
	local parentScrollFrame = container
	while parentScrollFrame and not parentScrollFrame:IsA("ScrollingFrame") do parentScrollFrame = parentScrollFrame.Parent end

	local itemFrame = Instance.new("Frame")
	itemFrame.Name = "DropdownModule"
	itemFrame.Size = UDim2.new(1, 0, 0, 48)
	itemFrame.BackgroundColor3 = getTheme().MainColor
	itemFrame.BackgroundTransparency = 0.5
	itemFrame.BorderSizePixel = 0
	itemFrame.ClipsDescendants = true
	itemFrame.Active = true
	itemFrame.Parent = container
	Instance.new("UICorner", itemFrame).CornerRadius = UDim.new(0, 6)

	local stroke = Instance.new("UIStroke")
	stroke.Transparency = 0.85; stroke.Color = getTheme().SelectionColor; stroke.Thickness = 0.8
	stroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border; stroke.Parent = itemFrame

	local padding = Instance.new("UIPadding")
	padding.PaddingLeft = UDim.new(0, 12); padding.PaddingRight = UDim.new(0, 12); padding.Parent = itemFrame

	local title = Instance.new("TextLabel")
	title.Name = "Title"; title.Size = UDim2.new(1, -(W + 10), 0, 20); title.Position = UDim2.new(0, 0, 0, 7)
	title.BackgroundTransparency = 1; title.Text = titleText; title.TextColor3 = Color3.fromRGB(255, 255, 255)
	title.Font = Enum.Font.GothamMedium; title.TextSize = 13; title.TextXAlignment = Enum.TextXAlignment.Left
	title.TextTruncate = Enum.TextTruncate.AtEnd; title.Parent = itemFrame

	local desc = Instance.new("TextLabel")
	desc.Name = "Description"; desc.Size = UDim2.new(1, -(W + 10), 0, 14); desc.Position = UDim2.new(0, 0, 0, 25)
	desc.BackgroundTransparency = 1; desc.Text = descText; desc.TextColor3 = Color3.fromRGB(230, 240, 245)
	desc.TextTransparency = 0.4; desc.Font = Enum.Font.Gotham; desc.TextSize = 11
	desc.TextXAlignment = Enum.TextXAlignment.Left; desc.TextWrapped = true; desc.Parent = itemFrame

	local dropdownButton = Instance.new("TextButton")
	dropdownButton.Name = "DropdownButton"; dropdownButton.Size = UDim2.new(0, W, 0, 32)
	dropdownButton.AnchorPoint = Vector2.new(0, 0.5); dropdownButton.Position = UDim2.new(1, -W, 0.5, 0)
	dropdownButton.BackgroundColor3 = getTheme().MainColor; dropdownButton.BackgroundTransparency = 0.5
	dropdownButton.BorderSizePixel = 0; dropdownButton.AutoButtonColor = false
	dropdownButton.Text = ""; dropdownButton.ZIndex = 2; dropdownButton.Parent = itemFrame
	Instance.new("UICorner", dropdownButton).CornerRadius = RADIUS

	local selectedLabel = Instance.new("TextLabel")
	selectedLabel.Name = "SelectedLabel"; selectedLabel.Size = UDim2.new(1, -32, 1, 0); selectedLabel.Position = UDim2.new(0, 12, 0, 0)
	selectedLabel.BackgroundTransparency = 1; selectedLabel.Text = currentOption; selectedLabel.TextColor3 = getTheme().TextColor
	selectedLabel.Font = Enum.Font.GothamMedium; selectedLabel.TextSize = 13; selectedLabel.TextXAlignment = Enum.TextXAlignment.Left
	selectedLabel.TextTruncate = Enum.TextTruncate.AtEnd; selectedLabel.ZIndex = 3; selectedLabel.Parent = dropdownButton

	local arrowLabel = Instance.new("TextLabel")
	arrowLabel.Name = "Arrow"; arrowLabel.Size = UDim2.new(0, 24, 1, 0); arrowLabel.Position = UDim2.new(1, -26, 0, 0)
	arrowLabel.BackgroundTransparency = 1; arrowLabel.Text = "▼"; arrowLabel.TextColor3 = getTheme().TextColor
	arrowLabel.Font = Enum.Font.GothamBold; arrowLabel.TextSize = 15; arrowLabel.ZIndex = 3; arrowLabel.Parent = dropdownButton

	autoResize(itemFrame, desc, 48)

	local screenGui = Players.LocalPlayer:WaitForChild("PlayerGui"):FindFirstChild("GeneralUI_Base")

	local overlayFrame = Instance.new("Frame")
	overlayFrame.Name = "DropdownOverlay"; overlayFrame.Size = UDim2.new(1, 0, 1, 0)
	overlayFrame.BackgroundTransparency = 1; overlayFrame.BorderSizePixel = 0
	overlayFrame.Visible = false; overlayFrame.Active = false; overlayFrame.ZIndex = 999; overlayFrame.Parent = screenGui

	local dropdownList = Instance.new("Frame")
	dropdownList.Name = "DropdownList"; dropdownList.Size = UDim2.new(0, W, 0, 0)
	dropdownList.BackgroundColor3 = getTheme().MainColor; dropdownList.BackgroundTransparency = 0.15
	dropdownList.BorderSizePixel = 0; dropdownList.ClipsDescendants = true
	dropdownList.Visible = false; dropdownList.ZIndex = 1000; dropdownList.Parent = screenGui

	local gradientBg = Instance.new("Frame")
	gradientBg.Size = UDim2.new(1, 0, 1, 0); gradientBg.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	gradientBg.BackgroundTransparency = 0; gradientBg.BorderSizePixel = 0; gradientBg.ZIndex = -2; gradientBg.Parent = dropdownList
	Instance.new("UICorner", gradientBg).CornerRadius = RADIUS

	local uiGradient = Instance.new("UIGradient")
	uiGradient.Color = ColorSequence.new{ColorSequenceKeypoint.new(0, getTheme().GradientStart or getTheme().MainColor),ColorSequenceKeypoint.new(1, getTheme().GradientEnd or getTheme().MainColor)}
	uiGradient.Rotation = 135
	uiGradient.Transparency = NumberSequence.new{NumberSequenceKeypoint.new(0, 0.3),NumberSequenceKeypoint.new(1, 0.5)}
	uiGradient.Parent = gradientBg

	local blurBg = Instance.new("Frame")
	blurBg.Size = UDim2.new(1, 0, 1, 0); blurBg.BackgroundColor3 = getTheme().MainColor
	blurBg.BackgroundTransparency = 0.1; blurBg.BorderSizePixel = 0; blurBg.ZIndex = -1; blurBg.Parent = dropdownList
	Instance.new("UICorner", blurBg).CornerRadius = RADIUS
	Instance.new("UICorner", dropdownList).CornerRadius = RADIUS

	local optionsContainer = Instance.new("Frame")
	optionsContainer.Name = "OptionsContainer"; optionsContainer.Size = UDim2.new(1, 0, 1, 0)
	optionsContainer.BackgroundTransparency = 1; optionsContainer.BorderSizePixel = 0
	optionsContainer.ClipsDescendants = false; optionsContainer.ZIndex = 1001; optionsContainer.Parent = dropdownList

	local listLayout = Instance.new("UIListLayout")
	listLayout.Parent = optionsContainer; listLayout.SortOrder = Enum.SortOrder.LayoutOrder; listLayout.Padding = UDim.new(0, 2)

	local listPadding = Instance.new("UIPadding")
	listPadding.PaddingTop = UDim.new(0, PADDING); listPadding.PaddingBottom = UDim.new(0, PADDING)
	listPadding.PaddingLeft = UDim.new(0, PADDING); listPadding.PaddingRight = UDim.new(0, PADDING); listPadding.Parent = optionsContainer

	local function updateTheme()
		local t = getTheme()
		dropdownButton.BackgroundColor3 = t.MainColor; selectedLabel.TextColor3 = t.TextColor; arrowLabel.TextColor3 = t.TextColor
		dropdownList.BackgroundColor3 = t.MainColor; blurBg.BackgroundColor3 = t.MainColor
		uiGradient.Color = ColorSequence.new{ColorSequenceKeypoint.new(0, t.GradientStart or t.MainColor),ColorSequenceKeypoint.new(1, t.GradientEnd or t.MainColor)}
		for _, child in ipairs(optionsContainer:GetChildren()) do
			if child:IsA("TextButton") then
				child.BackgroundColor3 = t.MainColor
				local lbl = child:FindFirstChild("Label"); if lbl then lbl.TextColor3 = t.TextColor end
				local bar = child:FindFirstChild("SelectionBar"); if bar and not selectionBarColor then bar.BackgroundColor3 = t.SelectionColor end
			end
		end
	end

	local function getTargetHeight() return math.min(#options * (ITEM_H + 2) + (PADDING * 2), MAX_H) end
	local function updateDropdownPosition()
		local bPos = dropdownButton.AbsolutePosition; local bSize = dropdownButton.AbsoluteSize
		dropdownList.Position = UDim2.new(0, bPos.X, 0, bPos.Y + (bSize.Y / 2) - (getTargetHeight() / 2))
	end

	local function closeDropdown(instant)
		if not isOpen then return end; isOpen = false; overlayFrame.Visible = false
		if parentScrollFrame then parentScrollFrame.ScrollingEnabled = true end
		if instant then dropdownList.Visible = false; arrowLabel.Rotation = 0
		else
			TweenService:Create(dropdownList, TweenInfo.new(0.22, Enum.EasingStyle.Quart), {Size = UDim2.new(0, W, 0, 0)}):Play()
			TweenService:Create(arrowLabel, TweenInfo.new(0.22, Enum.EasingStyle.Quart), {Rotation = 0}):Play()
			task.delay(0.22, function() if not isOpen then dropdownList.Visible = false end end)
		end
	end

	local function openDropdown()
		isOpen = true; overlayFrame.Visible = true
		if parentScrollFrame then parentScrollFrame.ScrollingEnabled = false end
		updateDropdownPosition(); dropdownList.Size = UDim2.new(0, W, 0, 0); dropdownList.Visible = true
		TweenService:Create(dropdownList, TweenInfo.new(0.22, Enum.EasingStyle.Quart), {Size = UDim2.new(0, W, 0, getTargetHeight())}):Play()
		TweenService:Create(arrowLabel, TweenInfo.new(0.22, Enum.EasingStyle.Quart), {Rotation = 180}):Play()
	end

	overlayFrame.InputBegan:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 and isOpen then
			local mp = UserInputService:GetMouseLocation(); local lp = dropdownList.AbsolutePosition; local ls = dropdownList.AbsoluteSize
			if not (mp.X >= lp.X and mp.X <= lp.X + ls.X and mp.Y >= lp.Y and mp.Y <= lp.Y + ls.Y) then closeDropdown(false) end
		end
	end)

	local callbacks = {}
	if callback then table.insert(callbacks, callback) end

	local optionButtons = {}
	for idx = 1, #options do
		local function createOption(index, value)
			local optBtn = Instance.new("TextButton")
			optBtn.Name = "Option_"..tostring(index); optBtn.Size = UDim2.new(1, 0, 0, ITEM_H)
			optBtn.BackgroundColor3 = getTheme().MainColor; optBtn.BackgroundTransparency = 0.6
			optBtn.BorderSizePixel = 0; optBtn.AutoButtonColor = false; optBtn.Text = ""
			optBtn.ZIndex = 1002; optBtn.LayoutOrder = index; optBtn.Active = true; optBtn.Parent = optionsContainer
			Instance.new("UICorner", optBtn).CornerRadius = UDim.new(0, 6)

			local selectionBar = Instance.new("Frame")
			selectionBar.Name = "SelectionBar"; selectionBar.Size = UDim2.new(0, 3, 0, 20)
			selectionBar.Position = UDim2.new(0, 6, 0.5, -10); selectionBar.BackgroundColor3 = selectionBarColor or getTheme().SelectionColor
			selectionBar.BorderSizePixel = 0; selectionBar.Visible = false; selectionBar.ZIndex = 1003; selectionBar.Parent = optBtn
			Instance.new("UICorner", selectionBar).CornerRadius = UDim.new(1, 0)

			local optLabel = Instance.new("TextLabel")
			optLabel.Name = "Label"; optLabel.Size = UDim2.new(1, -18, 1, 0); optLabel.Position = UDim2.new(0, 18, 0, 0)
			optLabel.BackgroundTransparency = 1; optLabel.Text = value; optLabel.TextColor3 = getTheme().TextColor
			optLabel.Font = Enum.Font.GothamMedium; optLabel.TextSize = 13; optLabel.TextXAlignment = Enum.TextXAlignment.Left
			optLabel.TextTruncate = Enum.TextTruncate.AtEnd; optLabel.ZIndex = 1003; optLabel.Parent = optBtn

			local glowFrame = Instance.new("Frame")
			glowFrame.Name = "Glow"; glowFrame.Size = UDim2.new(1, 0, 1, 0); glowFrame.BackgroundColor3 = glowColor
			glowFrame.BackgroundTransparency = 1; glowFrame.BorderSizePixel = 0; glowFrame.ZIndex = 999; glowFrame.Parent = optBtn
			Instance.new("UICorner", glowFrame).CornerRadius = UDim.new(0, 6)

			if value == currentOption then selectionBar.Visible = true; glowFrame.BackgroundTransparency = 0.97 end
			optionButtons[value] = {Button = optBtn, Bar = selectionBar, Glow = glowFrame, Value = value}

			optBtn.MouseEnter:Connect(function()
				TweenService:Create(optBtn, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.3}):Play()
				TweenService:Create(glowFrame, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.96}):Play()
			end)
			optBtn.MouseLeave:Connect(function()
				TweenService:Create(optBtn, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.6}):Play()
				if value ~= currentOption then TweenService:Create(glowFrame, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 1}):Play() end
			end)
			optBtn.MouseButton1Click:Connect(function()
				if isProcessing then return end; isProcessing = true
				for _, data in pairs(optionButtons) do
					data.Bar.Visible = false
					TweenService:Create(data.Glow, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 1}):Play()
				end
				currentOption = value; selectedLabel.Text = value; selectionBar.Visible = true
				TweenService:Create(glowFrame, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.97}):Play()
				closeDropdown(false)
				task.spawn(function()
					for _, cb in ipairs(callbacks) do pcall(cb, value) end
					task.wait(0.3); isProcessing = false
				end)
			end)
		end
		createOption(idx, options[idx])
	end

	dropdownButton.MouseButton1Click:Connect(function() if isOpen then closeDropdown(false) else openDropdown() end end)
	dropdownButton.MouseEnter:Connect(function() TweenService:Create(dropdownButton, TweenInfo.new(0.2, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.3}):Play() end)
	dropdownButton.MouseLeave:Connect(function() TweenService:Create(dropdownButton, TweenInfo.new(0.2, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.5}):Play() end)

	if parentScrollFrame then
		parentScrollFrame:GetPropertyChangedSignal("CanvasPosition"):Connect(function()
			if not isOpen then return end
			local hP = parentScrollFrame.AbsolutePosition; local hS = parentScrollFrame.AbsoluteSize
			local fP = itemFrame.AbsolutePosition; local fS = itemFrame.AbsoluteSize
			if (fP.Y + fS.Y) < hP.Y or fP.Y > (hP.Y + hS.Y) then closeDropdown(true) end
		end)
	end

	local mainFrame = screenGui and screenGui:FindFirstChild("MainFrame")
	if mainFrame then mainFrame:GetPropertyChangedSignal("BackgroundColor3"):Connect(updateTheme) end

	itemFrame.MouseEnter:Connect(function()
		Players.LocalPlayer:GetMouse().Icon = "rbxasset://SystemCursors/PointingHand"
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.4}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.7}):Play()
	end)
	itemFrame.MouseLeave:Connect(function()
		Players.LocalPlayer:GetMouse().Icon = ""
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.5}):Play()
		TweenService:Create(stroke, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.85}):Play()
	end)

	ThemeManager:RegisterContainer(itemFrame, stroke)

	itemFrame.AncestryChanged:Connect(function()
		if not itemFrame:IsDescendantOf(game) then
			if dropdownList then dropdownList:Destroy() end
			if overlayFrame then overlayFrame:Destroy() end
		end
	end)

	task.defer(updateTheme)

	local api = {Frame = itemFrame, Value = currentOption}
	function api:SetValue(val)
		if not optionButtons[val] then return end
		for _, data in pairs(optionButtons) do
			data.Bar.Visible = false
			TweenService:Create(data.Glow, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 1}):Play()
		end
		currentOption = val
		api.Value = val
		selectedLabel.Text = val
		optionButtons[val].Bar.Visible = true
		TweenService:Create(optionButtons[val].Glow, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.97}):Play()
		for _, cb in ipairs(callbacks) do pcall(cb, val) end
	end
	function api:OnChanged(cb) table.insert(callbacks, cb) end
	return api
end

function ElementManager:CreateColorPicker(container, titleText, descText, defaultColor, callback)
	local UserInputService = game:GetService("UserInputService")
	local Players = game:GetService("Players")
	local theme = ThemeManager:GetTheme()
	local currentHue = 0; local currentSaturation = 1; local currentValue = 1
	local confirmedColor = defaultColor or Color3.fromRGB(255, 255, 255)
	if defaultColor then currentHue, currentSaturation, currentValue = defaultColor:ToHSV() end
	local isOpen = false; local draggingField = false; local draggingHue = false
	local allScrollFrames = {}
	local scan = container
	while scan do
		if scan:IsA("ScrollingFrame") then table.insert(allScrollFrames, scan) end
		scan = scan.Parent
	end
	local function lockAllScrolls()   for _, sf in ipairs(allScrollFrames) do sf.ScrollingEnabled = false end end
	local function unlockAllScrolls() for _, sf in ipairs(allScrollFrames) do sf.ScrollingEnabled = true  end end

	local itemFrame = Instance.new("Frame")
	itemFrame.Name = "ColorPickerModule"
	itemFrame.Size = UDim2.new(1, 0, 0, 48)
	itemFrame.BackgroundColor3 = theme.MainColor
	itemFrame.BackgroundTransparency = 0.5
	itemFrame.BorderSizePixel = 0
	itemFrame.ClipsDescendants = true
	itemFrame.Active = true
	itemFrame.Parent = container
	Instance.new("UICorner", itemFrame).CornerRadius = UDim.new(0, 6)

	local stroke = Instance.new("UIStroke")
	stroke.Transparency = 0.85; stroke.Color = theme.SelectionColor; stroke.Thickness = 0.8
	stroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border; stroke.Parent = itemFrame

	local padding = Instance.new("UIPadding")
	padding.PaddingLeft = UDim.new(0, 12); padding.PaddingRight = UDim.new(0, 12); padding.Parent = itemFrame

	local titleLabel = Instance.new("TextLabel")
	titleLabel.Name = "Title"; titleLabel.Size = UDim2.new(1, -50, 0, 20); titleLabel.Position = UDim2.new(0, 0, 0, 7)
	titleLabel.BackgroundTransparency = 1; titleLabel.Text = titleText
	titleLabel.TextColor3 = theme.TextColor or Color3.fromRGB(255, 255, 255)
	titleLabel.Font = Enum.Font.GothamMedium; titleLabel.TextSize = 13
	titleLabel.TextXAlignment = Enum.TextXAlignment.Left; titleLabel.TextTruncate = Enum.TextTruncate.AtEnd
	titleLabel.Parent = itemFrame

	local descLabel = Instance.new("TextLabel")
	descLabel.Name = "Description"; descLabel.Size = UDim2.new(1, -50, 0, 14); descLabel.Position = UDim2.new(0, 0, 0, 25)
	descLabel.BackgroundTransparency = 1; descLabel.Text = descText
	descLabel.TextColor3 = Color3.fromRGB(230, 240, 245); descLabel.TextTransparency = 0.4
	descLabel.Font = Enum.Font.Gotham; descLabel.TextSize = 11
	descLabel.TextXAlignment = Enum.TextXAlignment.Left; descLabel.TextWrapped = true
	descLabel.Parent = itemFrame

	local previewBox = Instance.new("TextButton")
	previewBox.Name = "PreviewBox"; previewBox.Size = UDim2.new(0, 22, 0, 22)
	previewBox.AnchorPoint = Vector2.new(0, 0.5); previewBox.Position = UDim2.new(1, -22, 0.5, 0)
	previewBox.BackgroundColor3 = confirmedColor; previewBox.BorderSizePixel = 0
	previewBox.AutoButtonColor = false; previewBox.Text = ""; previewBox.ZIndex = 2; previewBox.Parent = itemFrame
	Instance.new("UICorner", previewBox).CornerRadius = UDim.new(0, 5)

	autoResize(itemFrame, descLabel, 48)

	local screenGui = Players.LocalPlayer:WaitForChild("PlayerGui"):FindFirstChild("GeneralUI_Base")
	local mainFrame = screenGui and screenGui:FindFirstChild("MainFrame")
	local PANEL_W = 320; local FIELD_H = 190; local HUE_H = 18; local FOOTER_H = 60
	local PANEL_H = 10 + FIELD_H + 10 + HUE_H + 10 + 1 + FOOTER_H; local CORNER_R = 12

	local darkOverlay = Instance.new("Frame")
	darkOverlay.Name = "ColorPickerDarkOverlay"; darkOverlay.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
	darkOverlay.BackgroundTransparency = 1; darkOverlay.BorderSizePixel = 0
	darkOverlay.Visible = false; darkOverlay.Active = false; darkOverlay.ZIndex = 90; darkOverlay.Parent = screenGui
	Instance.new("UICorner", darkOverlay).CornerRadius = UDim.new(0, 8)

	local function syncOverlay()
		if not mainFrame then return end
		darkOverlay.Size = UDim2.new(0, mainFrame.AbsoluteSize.X, 0, mainFrame.AbsoluteSize.Y)
		darkOverlay.Position = UDim2.new(0, mainFrame.AbsolutePosition.X, 0, mainFrame.AbsolutePosition.Y)
	end

	local panel = Instance.new("Frame")
	panel.Name = "ColorPickerPanel"; panel.Size = UDim2.new(0, PANEL_W, 0, PANEL_H)
	panel.AnchorPoint = Vector2.new(0.5, 0.5); panel.BackgroundColor3 = theme.MainColor
	panel.BackgroundTransparency = 0.08; panel.BorderSizePixel = 0
	panel.Visible = false; panel.ZIndex = 100; panel.ClipsDescendants = true; panel.Parent = screenGui
	Instance.new("UICorner", panel).CornerRadius = UDim.new(0, CORNER_R)

	local function setPanelPosition()
		if not mainFrame then return end
		panel.Position = UDim2.new(0, mainFrame.AbsolutePosition.X + mainFrame.AbsoluteSize.X / 2 + 40, 0, mainFrame.AbsolutePosition.Y + mainFrame.AbsoluteSize.Y / 2)
	end

	local panelGradBg = Instance.new("Frame")
	panelGradBg.Size = UDim2.new(1, 0, 1, 0); panelGradBg.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	panelGradBg.BackgroundTransparency = 0; panelGradBg.BorderSizePixel = 0; panelGradBg.ZIndex = -2; panelGradBg.Parent = panel
	Instance.new("UICorner", panelGradBg).CornerRadius = UDim.new(0, CORNER_R)

	local panelUIG = Instance.new("UIGradient")
	panelUIG.Color = ColorSequence.new{ColorSequenceKeypoint.new(0, theme.GradientStart or theme.MainColor),ColorSequenceKeypoint.new(1, theme.GradientEnd or theme.MainColor)}
	panelUIG.Rotation = 135
	panelUIG.Transparency = NumberSequence.new{NumberSequenceKeypoint.new(0, 0.25),NumberSequenceKeypoint.new(1, 0.45)}
	panelUIG.Parent = panelGradBg

	local panelBlur = Instance.new("Frame")
	panelBlur.Size = UDim2.new(1, 0, 1, 0); panelBlur.BackgroundColor3 = theme.MainColor
	panelBlur.BackgroundTransparency = 0.15; panelBlur.BorderSizePixel = 0; panelBlur.ZIndex = -1; panelBlur.Parent = panel
	Instance.new("UICorner", panelBlur).CornerRadius = UDim.new(0, CORNER_R)

	local panelStroke = Instance.new("UIStroke")
	panelStroke.Thickness = 1; panelStroke.Color = Color3.fromRGB(255, 255, 255)
	panelStroke.Transparency = 0.8; panelStroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border; panelStroke.Parent = panel

	local function applyThemeToPanel()
		local t = ThemeManager:GetTheme(ThemeManager.CurrentTheme)
		panel.BackgroundColor3 = t.MainColor; panelBlur.BackgroundColor3 = t.MainColor
		panelUIG.Color = ColorSequence.new{ColorSequenceKeypoint.new(0, t.GradientStart or t.MainColor),ColorSequenceKeypoint.new(1, t.GradientEnd or t.MainColor)}
	end

	local fieldContainer = Instance.new("Frame")
	fieldContainer.Name = "FieldContainer"; fieldContainer.Size = UDim2.new(1, -20, 0, FIELD_H)
	fieldContainer.Position = UDim2.new(0, 10, 0, 10); fieldContainer.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	fieldContainer.BorderSizePixel = 0; fieldContainer.ClipsDescendants = true; fieldContainer.ZIndex = 1001; fieldContainer.Parent = panel
	Instance.new("UICorner", fieldContainer).CornerRadius = UDim.new(0, 8)

	local hueLayer = Instance.new("Frame")
	hueLayer.Name = "HueLayer"; hueLayer.Size = UDim2.new(1, 0, 1, 0)
	hueLayer.BackgroundColor3 = Color3.fromHSV(currentHue, 1, 1); hueLayer.BorderSizePixel = 0; hueLayer.ZIndex = 1001; hueLayer.Parent = fieldContainer

	local satGrad = Instance.new("Frame")
	satGrad.Size = UDim2.new(1, 0, 1, 0); satGrad.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	satGrad.BorderSizePixel = 0; satGrad.ZIndex = 1002; satGrad.Parent = fieldContainer
	local satUIG = Instance.new("UIGradient")
	satUIG.Transparency = NumberSequence.new{NumberSequenceKeypoint.new(0, 0), NumberSequenceKeypoint.new(1, 1)}
	satUIG.Rotation = 0; satUIG.Parent = satGrad

	local valGrad = Instance.new("Frame")
	valGrad.Size = UDim2.new(1, 0, 1, 0); valGrad.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
	valGrad.BorderSizePixel = 0; valGrad.ZIndex = 1003; valGrad.Parent = fieldContainer
	local valUIG = Instance.new("UIGradient")
	valUIG.Transparency = NumberSequence.new{NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(1, 0)}
	valUIG.Rotation = 90; valUIG.Parent = valGrad

	local fieldBtn = Instance.new("TextButton")
	fieldBtn.Size = UDim2.new(1, 0, 1, 0); fieldBtn.BackgroundTransparency = 1; fieldBtn.Text = ""; fieldBtn.ZIndex = 1005; fieldBtn.Parent = fieldContainer

	local picker = Instance.new("Frame")
	picker.Name = "Picker"; picker.Size = UDim2.new(0, 14, 0, 14); picker.AnchorPoint = Vector2.new(0.5, 0.5)
	picker.BackgroundTransparency = 1; picker.BorderSizePixel = 0; picker.ZIndex = 1006; picker.Parent = fieldContainer
	Instance.new("UICorner", picker).CornerRadius = UDim.new(1, 0)
	local pickerStroke = Instance.new("UIStroke")
	pickerStroke.Thickness = 2; pickerStroke.Color = Color3.fromRGB(255, 255, 255); pickerStroke.Transparency = 0
	pickerStroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border; pickerStroke.Parent = picker

	local hueTrackY = 10 + FIELD_H + 10
	local hueTrack = Instance.new("Frame")
	hueTrack.Name = "HueTrack"; hueTrack.Size = UDim2.new(1, -20, 0, HUE_H); hueTrack.Position = UDim2.new(0, 10, 0, hueTrackY)
	hueTrack.BackgroundColor3 = Color3.fromRGB(255, 255, 255); hueTrack.BorderSizePixel = 0
	hueTrack.ClipsDescendants = true; hueTrack.ZIndex = 1001; hueTrack.Parent = panel
	Instance.new("UICorner", hueTrack).CornerRadius = UDim.new(1, 0)

	local hueUIG = Instance.new("UIGradient")
	hueUIG.Color = ColorSequence.new{
		ColorSequenceKeypoint.new(0, Color3.fromHSV(0, 1, 1)), ColorSequenceKeypoint.new(0.17, Color3.fromHSV(0.17, 1, 1)),
		ColorSequenceKeypoint.new(0.33, Color3.fromHSV(0.33, 1, 1)), ColorSequenceKeypoint.new(0.50, Color3.fromHSV(0.50, 1, 1)),
		ColorSequenceKeypoint.new(0.67, Color3.fromHSV(0.67, 1, 1)), ColorSequenceKeypoint.new(0.83, Color3.fromHSV(0.83, 1, 1)),
		ColorSequenceKeypoint.new(1, Color3.fromHSV(1, 1, 1)),
	}
	hueUIG.Parent = hueTrack

	local hueThumb = Instance.new("Frame")
	hueThumb.Name = "HueThumb"; hueThumb.Size = UDim2.new(0, 6, 1, 4); hueThumb.AnchorPoint = Vector2.new(0.5, 0.5)
	hueThumb.Position = UDim2.new(currentHue, 0, 0.5, 0); hueThumb.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	hueThumb.BorderSizePixel = 0; hueThumb.ZIndex = 1003; hueThumb.Parent = hueTrack
	Instance.new("UICorner", hueThumb).CornerRadius = UDim.new(0, 3)
	local hueThumbStroke = Instance.new("UIStroke")
	hueThumbStroke.Thickness = 1.5; hueThumbStroke.Color = Color3.fromRGB(0, 0, 0); hueThumbStroke.Transparency = 0.6
	hueThumbStroke.ApplyStrokeMode = Enum.ApplyStrokeMode.Border; hueThumbStroke.Parent = hueThumb

	local hueBtn = Instance.new("TextButton")
	hueBtn.Size = UDim2.new(1, 0, 1, 0); hueBtn.BackgroundTransparency = 1; hueBtn.Text = ""; hueBtn.ZIndex = 1004; hueBtn.Parent = hueTrack

	local divider = Instance.new("Frame")
	divider.Size = UDim2.new(1, 0, 0, 1); divider.Position = UDim2.new(0, 0, 0, hueTrackY + HUE_H + 10)
	divider.BackgroundColor3 = Color3.fromRGB(255, 255, 255); divider.BackgroundTransparency = 0.82
	divider.BorderSizePixel = 0; divider.ZIndex = 1001; divider.Parent = panel

	local footer = Instance.new("Frame")
	footer.Name = "Footer"; footer.Size = UDim2.new(1, 0, 0, FOOTER_H); footer.Position = UDim2.new(0, 0, 1, -FOOTER_H)
	footer.BackgroundColor3 = Color3.fromRGB(0, 0, 0); footer.BackgroundTransparency = 0.55
	footer.BorderSizePixel = 0; footer.ZIndex = 1001; footer.Parent = panel
	Instance.new("UICorner", footer).CornerRadius = UDim.new(0, CORNER_R)

	local BTN_W = (PANEL_W - 30) / 2; local BTN_H = 36

	local doneBtn = Instance.new("TextButton")
	doneBtn.Size = UDim2.new(0, BTN_W, 0, BTN_H); doneBtn.Position = UDim2.new(0, 10, 0.5, -BTN_H / 2)
	doneBtn.BackgroundColor3 = Color3.fromRGB(255, 255, 255); doneBtn.BackgroundTransparency = 0.88
	doneBtn.BorderSizePixel = 0; doneBtn.AutoButtonColor = false; doneBtn.Text = "Done"
	doneBtn.TextColor3 = Color3.fromRGB(255, 255, 255); doneBtn.TextSize = 14; doneBtn.Font = Enum.Font.GothamBold
	doneBtn.ZIndex = 1002; doneBtn.Parent = footer
	Instance.new("UICorner", doneBtn).CornerRadius = UDim.new(0, 8)
	local doneHL = Instance.new("Frame"); doneHL.Size = UDim2.new(1, 0, 0, 1); doneHL.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	doneHL.BackgroundTransparency = 0.55; doneHL.BorderSizePixel = 0; doneHL.ZIndex = 1004; doneHL.Parent = doneBtn
	local doneSH = Instance.new("Frame"); doneSH.Size = UDim2.new(1, 0, 0, 1); doneSH.Position = UDim2.new(0, 0, 1, -1)
	doneSH.BackgroundColor3 = Color3.fromRGB(0, 0, 0); doneSH.BackgroundTransparency = 0.45; doneSH.BorderSizePixel = 0; doneSH.ZIndex = 1004; doneSH.Parent = doneBtn

	local cancelBtn = Instance.new("TextButton")
	cancelBtn.Size = UDim2.new(0, BTN_W, 0, BTN_H); cancelBtn.Position = UDim2.new(0, 10 + BTN_W + 10, 0.5, -BTN_H / 2)
	cancelBtn.BackgroundColor3 = Color3.fromRGB(255, 255, 255); cancelBtn.BackgroundTransparency = 0.92
	cancelBtn.BorderSizePixel = 0; cancelBtn.AutoButtonColor = false; cancelBtn.Text = "Cancel"
	cancelBtn.TextColor3 = Color3.fromRGB(255, 255, 255); cancelBtn.TextSize = 14; cancelBtn.Font = Enum.Font.GothamMedium
	cancelBtn.ZIndex = 1002; cancelBtn.Parent = footer
	Instance.new("UICorner", cancelBtn).CornerRadius = UDim.new(0, 8)
	local cancelHL = Instance.new("Frame"); cancelHL.Size = UDim2.new(1, 0, 0, 1); cancelHL.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	cancelHL.BackgroundTransparency = 0.7; cancelHL.BorderSizePixel = 0; cancelHL.ZIndex = 1004; cancelHL.Parent = cancelBtn
	local cancelSH = Instance.new("Frame"); cancelSH.Size = UDim2.new(1, 0, 0, 1); cancelSH.Position = UDim2.new(0, 0, 1, -1)
	cancelSH.BackgroundColor3 = Color3.fromRGB(0, 0, 0); cancelSH.BackgroundTransparency = 0.6; cancelSH.BorderSizePixel = 0; cancelSH.ZIndex = 1004; cancelSH.Parent = cancelBtn

	local callbacks = {}
	if callback then table.insert(callbacks, callback) end

	local function getCurrentColor() return Color3.fromHSV(currentHue, currentSaturation, currentValue) end
	local function updatePickerPosition() picker.Position = UDim2.new(currentSaturation, 0, 1 - currentValue, 0) end
	local function updateHueThumb()      hueThumb.Position = UDim2.new(currentHue, 0, 0.5, 0) end
	local function updateHueLayer()      hueLayer.BackgroundColor3 = Color3.fromHSV(currentHue, 1, 1) end

	updatePickerPosition(); updateHueThumb(); updateHueLayer(); applyThemeToPanel()

	local function openPanel()
		isOpen = true; applyThemeToPanel(); syncOverlay()
		darkOverlay.BackgroundTransparency = 1; darkOverlay.Visible = true
		TweenService:Create(darkOverlay, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.55}):Play()
		setPanelPosition(); panel.Visible = true; lockAllScrolls()
	end
	local function closePanel()
		isOpen = false; draggingField = false; draggingHue = false
		TweenService:Create(darkOverlay, TweenInfo.new(0.2, Enum.EasingStyle.Quart), {BackgroundTransparency = 1}):Play()
		task.delay(0.2, function() if not isOpen then darkOverlay.Visible = false end end)
		panel.Visible = false; unlockAllScrolls()
	end

	local function handleFieldInput(inputPos)
		local fPos = fieldContainer.AbsolutePosition; local fSize = fieldContainer.AbsoluteSize
		currentSaturation = math.clamp((inputPos.X - fPos.X) / fSize.X, 0, 1)
		currentValue = 1 - math.clamp((inputPos.Y - fPos.Y) / fSize.Y, 0, 1)
		updatePickerPosition()
	end
	local function handleHueInput(inputPos)
		local hPos = hueTrack.AbsolutePosition; local hSize = hueTrack.AbsoluteSize
		currentHue = math.clamp((inputPos.X - hPos.X) / hSize.X, 0, 1)
		updateHueThumb(); updateHueLayer()
	end

	fieldBtn.MouseButton1Down:Connect(function() draggingField = true; handleFieldInput(UserInputService:GetMouseLocation()) end)
	hueBtn.MouseButton1Down:Connect(function()   draggingHue = true; handleHueInput(UserInputService:GetMouseLocation()) end)

	UserInputService.InputChanged:Connect(function(input)
		if input.UserInputType ~= Enum.UserInputType.MouseMovement or not isOpen then return end
		if draggingField then handleFieldInput(input.Position) end
		if draggingHue   then handleHueInput(input.Position) end
	end)
	UserInputService.InputEnded:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 then draggingField = false; draggingHue = false end
	end)

	cancelBtn.MouseButton1Click:Connect(function()
		currentHue, currentSaturation, currentValue = confirmedColor:ToHSV()
		updatePickerPosition(); updateHueThumb(); updateHueLayer(); closePanel()
	end)
	doneBtn.MouseButton1Click:Connect(function()
		confirmedColor = getCurrentColor()
		previewBox.BackgroundColor3 = confirmedColor
		for _, cb in ipairs(callbacks) do cb(confirmedColor) end
		closePanel()
	end)
	previewBox.MouseButton1Click:Connect(function()
		if isOpen then
			currentHue, currentSaturation, currentValue = confirmedColor:ToHSV()
			updatePickerPosition(); updateHueThumb(); updateHueLayer(); closePanel()
		else openPanel() end
	end)

	itemFrame.MouseEnter:Connect(function()
		Players.LocalPlayer:GetMouse().Icon = "rbxasset://SystemCursors/PointingHand"
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.4}):Play()
		TweenService:Create(stroke,    TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.7}):Play()
	end)
	itemFrame.MouseLeave:Connect(function()
		Players.LocalPlayer:GetMouse().Icon = ""
		TweenService:Create(itemFrame, TweenInfo.new(0.25, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.5}):Play()
		TweenService:Create(stroke,    TweenInfo.new(0.25, Enum.EasingStyle.Quart), {Transparency = 0.85}):Play()
	end)
	cancelBtn.MouseEnter:Connect(function() TweenService:Create(cancelBtn, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.78}):Play() end)
	cancelBtn.MouseLeave:Connect(function() TweenService:Create(cancelBtn, TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.92}):Play() end)
	doneBtn.MouseEnter:Connect(function()   TweenService:Create(doneBtn,   TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.72}):Play() end)
	doneBtn.MouseLeave:Connect(function()   TweenService:Create(doneBtn,   TweenInfo.new(0.15, Enum.EasingStyle.Quart), {BackgroundTransparency = 0.88}):Play() end)

	if mainFrame then mainFrame:GetPropertyChangedSignal("BackgroundColor3"):Connect(applyThemeToPanel) end
	itemFrame.AncestryChanged:Connect(function()
		if not itemFrame:IsDescendantOf(game) then
			if panel then panel:Destroy() end
			if darkOverlay then darkOverlay:Destroy() end
		end
	end)

	ThemeManager:RegisterContainer(itemFrame, stroke)

	local api = {Frame = itemFrame, Value = confirmedColor}
	function api:SetValue(color)
		confirmedColor = color
		api.Value = color
		previewBox.BackgroundColor3 = color
		currentHue, currentSaturation, currentValue = color:ToHSV()
		updatePickerPosition(); updateHueThumb(); updateHueLayer()
		for _, cb in ipairs(callbacks) do cb(color) end
	end
	function api:OnChanged(cb) table.insert(callbacks, cb) end
	return api
end

return ElementManager