:root {
	/* Light Theme (Less emphasis, but keeping it consistent) */
	--primary-light: #3498db;
	--accent-light: #2ecc71;
	--text-light: #1a202c;
	--text-secondary-light: #718096;
	--bg-light: #f7fafc;
	--card-light: rgba(255, 255, 255, 0.8);
	--border-light: rgba(0, 0, 0, 0.08);
	--glow-light: rgba(52, 152, 219, 0.3);
	--radius: 16px;
	--blur: 10px;

	/* Dark Theme (Futuristic Focus) */
	--primary-dark: #00f2ea;
	/* Bright Cyan/Teal */
	--accent-dark: #ff00e6;
	/* Bright Magenta */
	--text-dark: #e2e8f0;
	--text-secondary-dark: #a0aec0;
	/* --bg-dark: #0d1117; */
	--bg-dark: #2a3445;
	--card-dark: rgba(26, 32, 44, 0.7);
	--border-dark: rgba(255, 255, 255, 0.1);
	--glow-dark: rgba(0, 242, 234, 0.4);
}

[data-theme="light"] {
	--primary: var(--primary-light);
	--accent: var(--accent-light);
	--text: var(--text-light);
	--text-secondary: var(--text-secondary-light);
	--bg: var(--bg-light);
	--card: var(--card-light);
	--border: var(--border-light);
	--glow: var(--glow-light);
	--primary-rgb: 52, 152, 219;
	/* RGB for --primary-light */
	--accent-rgb: 46, 204, 113;
	/* RGB for --accent-light */
}

[data-theme="dark"] {
	--primary: var(--primary-dark);
	--accent: var(--accent-dark);
	--text: var(--text-dark);
	--text-secondary: var(--text-secondary-dark);
	--bg: var(--bg-dark);
	--card: var(--card-dark);
	--border: var(--border-dark);
	--glow: var(--glow-dark);
	--primary-rgb: 0, 242, 234;
	/* RGB for --primary-dark */
	--accent-rgb: 255, 0, 230;
	/* RGB for --accent-dark */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

html,
body {
	height: 100%;
}

body {
	background-color: var(--bg);
	/* Subtle animated gradient background */
	background-image: linear-gradient(45deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, var(--primary) 15%) 100%);
	background-attachment: fixed;
	color: var(--text);
	padding: 32px;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	overflow-x: hidden;
}

.app-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: center;
	z-index: 1;
	padding-bottom: 1rem;
}

.header {
	padding-bottom: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	display: flex;
	align-items: center;
	gap: 16px;
}

.logo svg {
	width: 36px;
	height: 36px;
	fill: var(--primary);
}

.logo h1 {
	font-size: 28px;
	font-weight: 700;
	background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.header-controls {
	display: flex;
	gap: 16px;
}

.theme-toggle,
.settings-button {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	cursor: pointer;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	padding: 10px;
	border-radius: 50%;
	backdrop-filter: blur(5px);
}

.settings-button span {
	display: none;
}

/* Hide text on small button */

.theme-toggle:hover,
.settings-button:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--primary);
	box-shadow: 0 0 15px var(--glow);
}

.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	gap: 32px;
	flex: 1;
}

.card {
	background-color: var(--card);
	border-radius: var(--radius);
	padding: 32px;
	border: 1px solid var(--border);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(var(--blur));
	/* Glassmorphism */
	-webkit-backdrop-filter: blur(var(--blur));
	/* Safari */
}

.input-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.input-section label {
	font-weight: 600;
	color: var(--text);
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.input-section label svg {
	width: 20px;
	height: 20px;
	fill: var(--primary);
}

textarea {
	width: 100%;
	min-height: 45vh;
	height: auto;
	padding: 18px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background-color: color-mix(in srgb, var(--bg) 80%, transparent 20%);
	font-size: 16px;
	resize: vertical;
	color: var(--text);
	backdrop-filter: blur(calc(var(--blur) / 2));
	line-height: 1.6;
}

textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 15px var(--glow);
}

.generate-button {
	background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
	color: var(--bg-dark);
	/* Dark text for contrast on bright button */
	border: none;
	border-radius: var(--radius);
	padding: 14px 28px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	align-self: flex-end;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.generate-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px var(--glow), 0 4px 15px rgba(0, 0, 0, 0.3);
}

.generate-button svg {
	/* Ensure SVG inside button matches text color needs */
	stroke: var(--bg-dark);
}

.player-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.player-section h2 {
	font-size: 20px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.player-section h2 svg {
	width: 22px;
	height: 22px;
	fill: var(--primary);
}

.player-container {
	background-color: color-mix(in srgb, var(--bg) 80%, transparent 20%);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 0;
	/* Remove top margin if selection takes its place */
}

/* More stylized waveform placeholder */
.waveform {
	width: 100%;
	height: 90px;
	border-radius: calc(var(--radius) / 2);
	position: relative;
	overflow: hidden;
	background: linear-gradient(to right, var(--primary) 0%, var(--accent) 100%);
	opacity: 0.55;
	transition: opacity 0.3s ease;
	/* Added transition for smoother appearance */
}

/* Add some fake visual bars */
.waveform::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(var(--primary), var(--primary) 50%,
			transparent 50%, transparent 100%),
		linear-gradient(90deg,
			rgba(255, 255, 255, 0.2) 1px, transparent 1px);
	background-size: 100% 100%, 8px 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Crect x='0' y='20' width='2' height='30' rx='1' fill='white'/%3E%3Crect x='4' y='10' width='2' height='40' rx='1' fill='white'/%3E%3Crect x='8' y='0' width='2' height='50' rx='1' fill='white'/%3E%3Crect x='12' y='15' width='2' height='35' rx='1' fill='white'/%3E%3Crect x='16' y='25' width='2' height='25' rx='1' fill='white'/%3E%3Crect x='20' y='5' width='2' height='45' rx='1' fill='white'/%3E%3Crect x='24' y='18' width='2' height='32' rx='1' fill='white'/%3E%3Crect x='28' y='12' width='2' height='38' rx='1' fill='white'/%3E%3Crect x='32' y='2' width='2' height='48' rx='1' fill='white'/%3E%3Crect x='36' y='22' width='2' height='28' rx='1' fill='white'/%3E%3Crect x='40' y='8' width='2' height='42' rx='1' fill='white'/%3E%3Crect x='44' y='14' width='2' height='36' rx='1' fill='white'/%3E%3Crect x='48' y='20' width='2' height='30' rx='1' fill='white'/%3E%3Crect x='52' y='4' width='2' height='46' rx='1' fill='white'/%3E%3Crect x='56' y='24' width='2' height='26' rx='1' fill='white'/%3E%3Crect x='60' y='10' width='2' height='40' rx='1' fill='white'/%3E%3Crect x='64' y='19' width='2' height='31' rx='1' fill='white'/%3E%3Crect x='68' y='2' width='2' height='48' rx='1' fill='white'/%3E%3Crect x='72' y='15' width='2' height='35' rx='1' fill='white'/%3E%3Crect x='76' y='25' width='2' height='25' rx='1' fill='white'/%3E%3Crect x='80' y='5' width='2' height='45' rx='1' fill='white'/%3E%3Crect x='84' y='18' width='2' height='32' rx='1' fill='white'/%3E%3Crect x='88' y='12' width='2' height='38' rx='1' fill='white'/%3E%3Crect x='92' y='2' width='2' height='48' rx='1' fill='white'/%3E%3Crect x='96' y='22' width='2' height='28' rx='1' fill='white'/%3E%3C/svg%3E");
	mask-repeat: repeat-x;
	mask-size: contain;
	opacity: 0.7;
}

.waveform::after {
	/* Use ::after for the animation overlay */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(var(--primary-rgb), 0.5) 30%,
			rgba(var(--accent-rgb), 1) 50%,
			rgba(var(--primary-rgb), 0.5) 70%,
			transparent 100%);
	background-size: 200% 100%;
	/* Make background wider than element */
	opacity: 0;
	/* Hidden by default */
	transition: opacity 0.4s ease-in-out;
	animation: waveform-active-shimmer 2.5s linear infinite;
	animation-play-state: paused;
	/* Animation is paused initially */
	border-radius: inherit;
	/* Inherit border radius */
}


/* When the waveform is 'playing', show the animation overlay */
.waveform.is-playing::after {
	opacity: 0.6;
	/* Make shimmer visible but slightly transparent */
	animation-play-state: running;
	/* Start the animation */
}

@keyframes waveform-active-shimmer {
	0% {
		background-position: 100% 0;
		/* Start from right */
	}

	100% {
		background-position: -100% 0;
		/* Move fully to the left */
	}
}


.controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.playback-controls {
	display: flex;
	gap: 16px;
	align-items: center;
}

.play-button {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--primary);
	border: none;
	color: var(--bg-dark);
	/* Dark icon on bright button */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.play-button:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 15px var(--glow);
}

.play-button svg {
	stroke: var(--bg-dark);
	fill: var(--bg-dark);
}

.time-display {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 500;
	background: rgba(0, 0, 0, 0.1);
	padding: 4px 8px;
	border-radius: 8px;
}

.download-button {
	padding: 10px 20px;
	background-color: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-secondary);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	backdrop-filter: blur(5px);
}

.download-button:hover {
	border-color: var(--primary);
	color: var(--primary);
	box-shadow: 0 0 10px var(--glow);
}

.download-button svg {
	stroke: currentColor;
}

.settings-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100;
	backdrop-filter: blur(8px);
	/* Blur background behind modal */
	-webkit-backdrop-filter: blur(8px);
	/*background-color: rgba(0, 0, 0, 0.5); /* Added overlay */
}

.settings-panel {
	background-color: var(--card);
	border-radius: var(--radius);
	padding: 32px;
	width: 90%;
	max-width: 500px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	border: 1px solid var(--border);
	backdrop-filter: blur(var(--blur));
	/* Apply glassmorphism */
	-webkit-backdrop-filter: blur(var(--blur));
}

.settings-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

.settings-header h2 {
	font-size: 22px;
	font-weight: 600;
	color: var(--text);
}

.close-button {
	background: none;
	border: none;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	color: var(--text-secondary);
	line-height: 1;
}

.close-button:hover {
	color: var(--primary);
}

.settings-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.form-group label {
	font-weight: 500;
	color: var(--text);
	font-size: 14px;
}

.form-group input,
.form-group textarea {
	padding: 14px;
	border-radius: calc(var(--radius) / 1.5);
	border: 1px solid var(--border);
	background-color: color-mix(in srgb, var(--bg) 80%, transparent 20%);
	color: var(--text);
	font-size: 15px;
}

.form-group textarea {
	resize: vertical;
	min-height: 80px;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 10px var(--glow);
}

.save-button {
	background: var(--primary);
	color: var(--bg-dark);
	border: none;
	border-radius: calc(var(--radius) / 1.5);
	padding: 14px;
	font-weight: 600;
	margin-top: 12px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.save-button:hover {
	background: var(--accent);
	transform: translateY(-1px);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--accent), transparent 50%);
}

@media (min-width: 768px) {

	/* Limit height on desktop */
	.container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		/* max-height: calc(80vh - 160px); */
		align-items: stretch;
		/* Make cards equal height */
	}

	.card {
		display: flex;
		flex-direction: column;
	}

	.input-section {
		/* max-height: calc(100vh - 160px - 32px); */
		/* Account for gap */
	}

	.input-section textarea {
		flex-grow: 1;
		/* Allow textarea to fill space */
		min-height: 200px;
		/* Ensure minimum height on desktop */
	}

	.player-section {
		justify-content: space-between;
		/* max-height: calc(100vh - 160px - 32px); */
		/* Account for gap */
	}

	/* Show text on wider screens */
	.settings-button span {
		display: inline;
		margin-left: 8px;
	}

	/* More standard radius on desktop */
	.settings-button {
		border-radius: var(--radius);
		padding: 10px 16px;
	}

	.theme-toggle {
		padding: 10px 16px;
		border-radius: var(--radius);
	}

}

/* --- Instrument Selection Styles --- */
.instrument-selection {
	margin-bottom: 20px;
	padding-top: 8px;
}

.instrument-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.instrument-header label {
	font-weight: 600;
	color: var(--text);
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.instrument-header label svg {
	fill: var(--primary);
	stroke: var(--primary);
	/* Ensure stroke also takes color */
}

.select-all-button {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	border-radius: calc(var(--radius) / 2);
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.select-all-button svg {
	transition: all 0.2s ease;
	stroke: currentColor;
	/* Make SVG inherit button color */
}

.select-all-button:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Selected state for "Select All" */
.select-all-button.selected {
	background-color: var(--primary);
	color: var(--bg-dark);
	/* Text color on primary bg */
	border-color: var(--primary);
	box-shadow: 0 0 8px var(--glow);
}

.select-all-button.selected svg {
	stroke: var(--bg-dark);
	/* Icon color on primary bg */
}

.instrument-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-height: 250px;
	/* Increased max-height slightly */
	overflow-y: auto;
	/* Enable VERTICAL scrolling */
	padding: 10px 5px 10px 10px;
	/* Space for scrollbar */
	/* Vertical Scrollbar Styles */
	scrollbar-width: thin;
	/* Firefox */
	scrollbar-color: var(--primary) transparent;
	/* Firefox */
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) / 2);
	background-color: rgba(0, 0, 0, 0.05);
}

/* Webkit Scrollbar Styles */
.instrument-list::-webkit-scrollbar {
	width: 8px;
	/* Width of vertical scrollbar */
}

.instrument-list::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}

.instrument-list::-webkit-scrollbar-thumb {
	background-color: var(--primary);
	border-radius: 4px;
	border: 1px solid var(--bg);
}

.instrument-list::-webkit-scrollbar-thumb:hover {
	background-color: var(--accent);
}

.instrument-button {
	padding: 8px 16px;
	background-color: color-mix(in srgb, var(--bg) 60%, transparent 40%);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.instrument-button:hover {
	border-color: var(--primary);
	color: var(--primary);
	box-shadow: 0 0 8px var(--glow);
}

/* Selected state for instrument buttons */
.instrument-button.selected {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--bg-dark);
	/* Text color on primary bg */
	font-weight: 600;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--glow) 50%, transparent 50%);
}