/* Design System Core Variables */
:root {
	/* Dark Mode Default Theme (HSL values for smooth transitions) */
	--bg-color-h: 240;
	--bg-color-s: 15%;
	--bg-color-l: 6%;
	--bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

	--panel-color-h: 240;
	--panel-color-s: 14%;
	--panel-color-l: 10%;
	--panel-color: hsl(
		var(--panel-color-h),
		var(--panel-color-s),
		var(--panel-color-l)
	);

	--border-color-h: 240;
	--border-color-s: 10%;
	--border-color-l: 16%;
	--border-color: hsl(
		var(--border-color-h),
		var(--border-color-s),
		var(--border-color-l)
	);

	--text-h: 240;
	--text-s: 8%;
	--text-l: 96%;
	--text-color: hsl(var(--text-h), var(--text-s), var(--text-l));

	--text-muted-h: 240;
	--text-muted-s: 8%;
	--text-muted-l: 64%;
	--text-muted: hsl(
		var(--text-muted-h),
		var(--text-muted-s),
		var(--text-muted-l)
	);

	--accent-h: 271;
	--accent-s: 91%;
	--accent-l: 65%;
	--accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-glow: hsla(
		var(--accent-h),
		var(--accent-s),
		var(--accent-l),
		0.15
	);
	--accent-border: hsla(
		var(--accent-h),
		var(--accent-s),
		var(--accent-l),
		0.4
	);

	--code-bg-h: 240;
	--code-bg-s: 12%;
	--code-bg-l: 13%;
	--code-bg: hsl(var(--code-bg-h), var(--code-bg-s), var(--code-bg-l));

	--success-color: #10b981;

	/* Fonts */
	--font-sans:
		"Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
	--font-mono:
		"Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		monospace;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md:
		0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg:
		0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl:
		0 20px 25px -5px rgba(0, 0, 0, 0.15),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Light Theme Variables overrides */
[data-theme="light"] {
	--bg-color-h: 210;
	--bg-color-s: 20%;
	--bg-color-l: 98%;
	--bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

	--panel-color-h: 0;
	--panel-color-s: 0%;
	--panel-color-l: 100%;
	--panel-color: hsl(
		var(--panel-color-h),
		var(--panel-color-s),
		var(--panel-color-l)
	);

	--border-color-h: 210;
	--border-color-s: 16%;
	--border-color-l: 90%;
	--border-color: hsl(
		var(--border-color-h),
		var(--border-color-s),
		var(--border-color-l)
	);

	--text-h: 220;
	--text-s: 40%;
	--text-l: 10%;
	--text-color: hsl(var(--text-h), var(--text-s), var(--text-l));

	--text-muted-h: 215;
	--text-muted-s: 16%;
	--text-muted-l: 44%;
	--text-muted: hsl(
		var(--text-muted-h),
		var(--text-muted-s),
		var(--text-muted-l)
	);

	--accent-h: 271;
	--accent-s: 85%;
	--accent-l: 58%;
	--accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
	--accent-border: hsla(
		var(--accent-h),
		var(--accent-s),
		var(--accent-l),
		0.3
	);

	--code-bg-h: 210;
	--code-bg-s: 12%;
	--code-bg-l: 95%;
	--code-bg: hsl(var(--code-bg-h), var(--code-bg-s), var(--code-bg-l));
}

/* Global Reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-sans);
	background-color: var(--bg-color);
	color: var(--text-color);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	overflow-x: hidden;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Scrollbars styling */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--accent-color);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Layout Classes */
.dashboard-container {
	display: flex;
	width: 100vw;
	min-height: 100vh;
	position: relative;
}

/* Sidebar */
.sidebar {
	width: 280px;
	background-color: var(--panel-color);
	border-right: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	height: 100vh;
	position: sticky;
	top: 0;
	flex-shrink: 0;
	z-index: 10;
	transition:
		width 0.3s ease,
		transform 0.3s ease;
}

.sidebar-header {
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--border-color);
}

.sidebar-logo {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, var(--accent-color), #3b82f6);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: white;
	box-shadow: 0 0 15px var(--accent-glow);
}

.sidebar-title h1 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
	background: linear-gradient(to right, var(--text-color), var(--text-muted));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sidebar-nav {
	flex-grow: 1;
	padding: 20px 12px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	color: var(--text-muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

.nav-item:hover {
	background-color: var(--accent-glow);
	color: var(--text-color);
}

.nav-item.active {
	background: linear-gradient(to right, var(--accent-glow), transparent);
	color: var(--accent-color);
	border-left: 3px solid var(--accent-color);
	padding-left: 13px;
	font-weight: 600;
}

.nav-item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.sidebar-footer {
	padding: 16px;
	border-top: 1px solid var(--border-color);
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
}

/* Main Content Area */
.main-content {
	flex-grow: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Header */
.main-header {
	height: 80px;
	padding: 0 40px;
	border-bottom: 1px solid var(--border-color);
	background-color: hsla(
		var(--panel-color-h),
		var(--panel-color-s),
		var(--panel-color-l),
		0.8
	);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 5;
}

.search-container {
	display: flex;
	align-items: center;
	background-color: var(--code-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 8px 16px;
	width: 320px;
	gap: 10px;
	transition: all 0.2s ease;
}

.search-container:focus-within {
	border-color: var(--accent-color);
	box-shadow: 0 0 10px var(--accent-glow);
}

.search-container input {
	background: none;
	border: none;
	color: var(--text-color);
	font-family: inherit;
	font-size: 14px;
	width: 100%;
	outline: none;
}

.search-container input::placeholder {
	color: var(--text-muted);
}

.search-container svg {
	width: 18px;
	height: 18px;
	color: var(--text-muted);
}

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

/* Theme Toggle Button */
.icon-btn {
	background-color: var(--panel-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	width: 42px;
	height: 42px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.icon-btn:hover {
	border-color: var(--accent-color);
	background-color: var(--accent-glow);
	color: var(--accent-color);
}

.icon-btn svg {
	width: 20px;
	height: 20px;
}

/* Custom Primary Button */
.btn-primary {
	background: linear-gradient(
		135deg,
		var(--accent-color),
		hsl(271, 91%, 50%)
	);
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px var(--accent-glow);
}

.svg-icon {
	width: 1rem;
	height: 1rem;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px var(--accent-glow);
}

.btn-primary:active {
	transform: translateY(0);
}

/* Content Container */
.content-body {
	padding: 40px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
}

/* Playground Controls Panel */
.playground-controls {
	background-color: var(--panel-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	box-shadow: var(--shadow-md);
}

.control-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 200px;
}

.control-group label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.control-group input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--border-color);
	outline: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent-color);
	cursor: pointer;
	transition: transform 0.1s;
}

.control-group input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

.control-group select,
.control-group input[type="text"] {
	background-color: var(--code-bg);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	padding: 10px;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	outline: none;
	width: 100%;
	transition: border-color 0.2s ease;
}

.control-group select:focus,
.control-group input[type="text"]:focus {
	border-color: var(--accent-color);
}

.control-value {
	font-size: 12px;
	color: var(--accent-color);
	font-weight: 600;
	text-align: right;
	margin-top: -4px;
}

/* Category Intro Section */
.category-intro {
	margin-bottom: 8px;
}

.category-intro h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--text-color);
	letter-spacing: -0.5px;
	margin-bottom: 8px;
}

.category-intro p {
	color: var(--text-muted);
	font-size: 16px;
	max-width: 800px;
}

/* Scroll Trigger Spacer Alert (when Scroll mode is enabled) */
.scroll-indicator-banner {
	background-color: var(--accent-glow);
	border: 1px dashed var(--accent-border);
	border-radius: 8px;
	padding: 16px;
	color: var(--accent-color);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.scroll-indicator-banner svg {
	width: 20px;
	height: 20px;
	animation: bounce-vertical 1.5s infinite;
}

@keyframes bounce-vertical {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

/* Cards Grid */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 24px;
}

/* Animation Cards */
.animation-card {
	background-color: var(--panel-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	height: 320px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.animation-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent-border);
	box-shadow:
		var(--shadow-xl),
		0 10px 30px var(--accent-glow);
}

.card-header {
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--border-color);
}

.card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}

.card-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 12px;
	background-color: var(--code-bg);
	color: var(--text-muted);
	text-transform: uppercase;
	font-family: var(--font-mono);
}

.animation-card:hover .card-badge {
	color: var(--accent-color);
	background-color: var(--accent-glow);
}

/* Card Preview Content Area */
.card-preview {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: var(--bg-color);
	position: relative;
	overflow: hidden;
	/* Visual checker grid pattern */
	background-image: radial-gradient(
		var(--border-color) 1.5px,
		transparent 1.5px
	);
	background-size: 16px 16px;
	background-position: center;
}

/* Card Footer with controls */
.card-footer {
	padding: 14px 20px;
	border-top: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--panel-color);
}

.card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.card-btn {
	background: none;
	border: 1px solid var(--border-color);
	color: var(--text-muted);
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.card-btn:hover {
	color: var(--accent-color);
	border-color: var(--accent-color);
	background-color: var(--accent-glow);
}

.card-btn svg {
	width: 16px;
	height: 16px;
}

.trigger-badge {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	background-color: var(--code-bg);
	padding: 4px 8px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
}

.trigger-badge:hover {
	background-color: var(--border-color);
	color: var(--text-color);
}

.trigger-badge.scroll-trigger {
	color: #3b82f6;
	background-color: rgba(59, 130, 246, 0.1);
}

.trigger-badge.load-trigger {
	color: #10b981;
	background-color: rgba(16, 185, 129, 0.1);
}

/* Dashboard Panel (Home Overview) */
.dashboard-home {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.welcome-banner {
	background: linear-gradient(135deg, hsl(271, 76%, 20%), hsl(240, 15%, 10%));
	border: 1px solid var(--accent-border);
	border-radius: 16px;
	padding: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: var(--shadow-xl);
	overflow: hidden;
	position: relative;
}

[data-theme="light"] .welcome-banner {
	background: linear-gradient(135deg, hsl(271, 76%, 95%), hsl(210, 20%, 90%));
}

.welcome-text {
	max-width: 600px;
	position: relative;
	z-index: 2;
}

.welcome-text h2 {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 12px;
	background: linear-gradient(
		to right,
		var(--text-color),
		var(--accent-color)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.welcome-text p {
	font-size: 16px;
	color: var(--text-muted);
	margin-bottom: 24px;
}

.welcome-graphics {
	position: relative;
	width: 320px;
	height: 200px;
}

.dashboard-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.stat-card {
	background-color: var(--panel-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: var(--shadow-sm);
}

.stat-num {
	font-size: 40px;
	font-weight: 800;
	color: var(--accent-color);
	line-height: 1;
}

.stat-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-desc {
	font-size: 12px;
	color: var(--text-muted);
}

.quick-setup-box {
	background-color: var(--panel-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 32px;
}

.quick-setup-box h3 {
	font-size: 20px;
	margin-bottom: 16px;
	color: var(--text-color);
}

.quick-setup-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.setup-step {
	display: flex;
	gap: 16px;
}

.step-number {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--accent-color);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.step-content p {
	font-size: 14px;
	margin-bottom: 8px;
	color: var(--text-color);
}

.code-snippet {
	background-color: var(--code-bg);
	border: 1px solid var(--border-color);
	padding: 12px 16px;
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-color);
	overflow-x: auto;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.code-snippet code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.copy-snippet-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.copy-snippet-btn:hover {
	color: var(--accent-color);
	background-color: var(--accent-glow);
}

.copy-snippet-btn svg {
	width: 16px;
	height: 16px;
}

/* Category Demo Element Styles */

/* Typewriter & glitch specifics */
.typed-text {
	color: var(--accent-color);
	font-weight: 700;
}

.cursor {
	color: var(--accent-color);
	font-weight: 700;
	margin-left: 2px;
}

.demo-text-block {
	text-align: center;
	font-size: 18px;
	width: 100%;
}

.demo-p-block {
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	width: 100%;
	color: var(--text-muted);
}

/* Buttons in previews */
.demo-btn {
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	border: none;
	background-color: var(--accent-color);
	color: white;
	border-radius: 6px;
	cursor: pointer;
	outline: none;
	font-family: var(--font-sans);
}

/* Element preview shapes */
.demo-shape {
	width: 80px;
	height: 80px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--accent-color), #2563eb);
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 14px;
}

.demo-shape.draggable {
	cursor: grab;
	background: linear-gradient(135deg, #10b981, #059669);
}

.demo-shape.draggable:active {
	cursor: grabbing;
}

/* Image preview wrappers */
.demo-img-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.demo-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scroll Trigger Playground Spacers */
.scroll-spacer {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(
		rgba(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l), 0) 90%,
		var(--border-color) 90%
	);
	background-size: 100% 40px;
	color: var(--text-muted);
	font-size: 20px;
	font-weight: 700;
	border-bottom: 2px dashed var(--border-color);
}

/* Toast Notification */
.toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background-color: #10b981;
	color: white;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	box-shadow: var(--shadow-xl);
	display: flex;
	align-items: center;
	gap: 8px;
	transform: translateY(100px);
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 100;
}

.toast.show {
	transform: translateY(0);
	opacity: 1;
}

.toast svg {
	width: 18px;
	height: 18px;
}

/* Code Snippet Modal Overlay */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal-overlay.show {
	opacity: 1;
}

.modal-box {
	background-color: var(--panel-color);
	border: 1px solid var(--border-color);
	width: 600px;
	max-width: 90%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-xl);
	transform: scale(0.95);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.show .modal-box {
	transform: scale(1);
}

.modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-header h3 {
	font-size: 18px;
	font-weight: 700;
}

.modal-close {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
}

.modal-close:hover {
	color: var(--accent-color);
}

.modal-body {
	padding: 24px;
}

.modal-body pre {
	background-color: var(--code-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 16px;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 13px;
	margin-bottom: 16px;
	color: var(--text-color);
}

/* Global Rules Builder Section */
.rules-builder-box {
	background-color: var(--panel-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rules-builder-box h3 {
	font-size: 18px;
}

.rules-form {
	display: flex;
	gap: 12px;
}

.rules-form input,
.rules-form select {
	background-color: var(--code-bg);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	outline: none;
}

.rules-form input {
	flex-grow: 1;
}

.rules-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rule-chip {
	background-color: var(--code-bg);
	border: 1px solid var(--border-color);
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rule-chip code {
	color: var(--accent-color);
	background: none;
	padding: 0;
	font-weight: 600;
}

.rule-remove {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-weight: 700;
}

.rule-remove:hover {
	color: #ef4444;
}

/* Responsive Overrides */
@media (max-width: 990px) {
	.dashboard-container {
		flex-direction: column;
	}

	.sidebar {
		width: 100%;
		height: auto;
		border-right: none;
		border-bottom: 1px solid var(--border-color);
	}

	.sidebar-header {
		padding: 16px 20px;
		justify-content: space-between;
	}

	.sidebar-nav {
		flex-direction: row;
		overflow-x: auto;
		padding: 10px 20px;
		height: auto;
		gap: 8px;
	}

	.nav-item {
		padding: 8px 14px;
		white-space: nowrap;
		border-left: none;
		border-bottom: 3px solid transparent;
	}

	.nav-item.active {
		border-left: none;
		border-bottom: 3px solid var(--accent-color);
		padding-left: 14px;
		background: none;
	}

	.sidebar-footer {
		display: none;
	}

	.main-header {
		padding: 0 20px;
		height: 70px;
	}

	.search-container {
		width: 200px;
	}

	.content-body {
		padding: 20px;
	}
}

@media (max-width: 600px) {
	.search-container {
		display: none;
	}

	.playground-controls {
		flex-direction: column;
		gap: 16px;
	}

	.welcome-banner {
		padding: 24px;
	}

	.welcome-graphics {
		display: none;
	}
}