/* ============================================
       CSS VARIABLES & MIN/MAX FOUNDATIONS
       Extensive use of clamp(), min(), max(), minmax()
    ============================================ */

:root {
	/* Fluid spacing using clamp() */
	--space-2xs: clamp(0.125rem, 0.1rem + 0.15vw, 0.25rem);
	--space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
	--space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
	--space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
	--space-lg: clamp(1rem, 0.8rem + 1vw, 1.75rem);
	--space-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
	--space-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);

	/* Fluid typography */
	--text-xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
	--text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--text-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
	--text-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	--text-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	--text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
	--text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);

	/* Color palette */
	--bg-base: #08080c;
	--bg-surface: #0f0f15;
	--bg-elevated: #16161f;
	--bg-overlay: #1c1c28;
	--bg-input: #222230;
	--bg-hover: #2a2a3a;

	--border-subtle: #252535;
	--border-default: #32324a;
	--border-focus: #6366f1;

	--text-primary: #f4f4f8;
	--text-secondary: #9898a8;
	--text-muted: #5c5c70;
	--text-inverse: #08080c;

	--accent-primary: #6366f1;
	--accent-secondary: #8b5cf6;
	--accent-tertiary: #a855f7;
	--accent-glow: rgba(99, 102, 241, 0.25);

	--success: #10b981;
	--warning: #f59e0b;
	--error: #ef4444;
	--info: #3b82f6;

	/* Grid cell colors */
	--cell-1: #6366f1;
	--cell-2: #8b5cf6;
	--cell-3: #a855f7;
	--cell-4: #d946ef;
	--cell-5: #ec4899;
	--cell-6: #f43f5e;
	--cell-7: #f97316;
	--cell-8: #eab308;
	--cell-9: #84cc16;
	--cell-10: #22c55e;
	--cell-11: #14b8a6;
	--cell-12: #06b6d4;
}

/* ============================================
       RESET & BASE
    ============================================ */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	font-family: "Outfit", -apple-system, sans-serif;
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--text-primary);
	background: var(--bg-base);
	min-height: 100vh;
	overflow-x: hidden;
}

/* ============================================
       APP LAYOUT - Using CSS Grid with minmax()
    ============================================ */

.app {
	display: grid;
	grid-template-columns: minmax(min(100%, 320px), 380px) 1fr minmax(
			min(100%, 300px),
			360px
		);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"header header header"
		"sidebar canvas panel";
	min-height: 100vh;
	gap: 1px;
	background: var(--border-subtle);
}

@media (max-width: 1200px) {
	.app {
		grid-template-columns: minmax(280px, 340px) 1fr;
		grid-template-areas:
			"header header"
			"sidebar canvas";
	}

	.code-panel {
		display: none;
	}
}

@media (max-width: 768px) {
	.app {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"header"
			"sidebar"
			"canvas";
	}

	.sidebar {
		max-height: 40vh;
		overflow-y: auto;
	}
}

/* ============================================
       HEADER
    ============================================ */

.header {
	grid-area: header;
	background: var(--bg-surface);
	padding: var(--space-md) var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.logo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.logo-icon {
	width: 36px;
	height: 36px;
	background: linear-gradient(
		135deg,
		var(--accent-primary),
		var(--accent-tertiary)
	);
	border-radius: 10px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 3px;
	padding: 6px;
}

.logo-icon span {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2px;
}

.logo-text {
	font-size: var(--text-lg);
	font-weight: 700;
	background: linear-gradient(
		135deg,
		var(--text-primary),
		var(--text-secondary)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border-default);
	border-radius: 10px;
	background: var(--bg-elevated);
	color: var(--text-secondary);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
	border-color: var(--border-focus);
}

.btn-primary {
	background: linear-gradient(
		135deg,
		var(--accent-primary),
		var(--accent-secondary)
	);
	border-color: transparent;
	color: white;
}

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

.btn-icon {
	padding: var(--space-sm);
	aspect-ratio: 1;
}

/* ============================================
       SIDEBAR - GRID CONTROLS
    ============================================ */

.sidebar {
	grid-area: sidebar;
	background: var(--bg-surface);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	overflow-y: auto;
}

.control-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

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

.section-title {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.section-badge {
	font-size: var(--text-xs);
	font-weight: 500;
	padding: 2px 8px;
	background: var(--bg-input);
	border-radius: 100px;
	color: var(--text-muted);
}

/* Input Groups */
.input-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.input-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}

.input-label {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.input-value {
	font-family: "Fira Code", monospace;
	font-size: var(--text-xs);
	color: var(--accent-primary);
	background: var(--bg-input);
	padding: 2px 6px;
	border-radius: 4px;
}

/* Number Inputs with min/max */
.number-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.number-input {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	padding-right: 70px;
	background: var(--bg-input);
	border: 1px solid var(--border-subtle);
	border-radius: 10px;
	color: var(--text-primary);
	font-family: "Fira Code", monospace;
	font-size: var(--text-sm);
	outline: none;
	transition: all 0.2s ease;
}

.number-input:focus {
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

.number-input::-webkit-inner-spin-button,
.number-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.input-suffix {
	position: absolute;
	right: var(--space-sm);
	font-size: var(--text-xs);
	color: var(--text-muted);
	pointer-events: none;
}

.input-stepper {
	position: absolute;
	right: 40px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.stepper-btn {
	width: 20px;
	height: 14px;
	background: var(--bg-elevated);
	border: none;
	color: var(--text-muted);
	font-size: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.stepper-btn:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.stepper-btn:first-child {
	border-radius: 3px 3px 0 0;
}

.stepper-btn:last-child {
	border-radius: 0 0 3px 3px;
}

/* Range Slider */
.range-slider {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.range-track {
	position: relative;
	height: 6px;
	background: var(--bg-input);
	border-radius: 3px;
}

.range-input {
	width: 100%;
	height: 6px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	position: relative;
	z-index: 2;
}

.range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	background: linear-gradient(
		135deg,
		var(--accent-primary),
		var(--accent-secondary)
	);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 8px var(--accent-glow);
	transition: transform 0.2s ease;
}

.range-input::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

.range-input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: linear-gradient(
		135deg,
		var(--accent-primary),
		var(--accent-secondary)
	);
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

.range-limits {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* Select Dropdown */
.select-wrapper {
	position: relative;
}

.select-input {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	padding-right: 36px;
	background: var(--bg-input);
	border: 1px solid var(--border-subtle);
	border-radius: 10px;
	color: var(--text-primary);
	font-family: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
	outline: none;
	appearance: none;
	transition: all 0.2s ease;
}

.select-input:focus {
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

.select-arrow {
	position: absolute;
	right: var(--space-sm);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--text-muted);
	font-size: 10px;
}

/* Toggle Switch */
.toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) 0;
}

.toggle-label {
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.toggle-switch {
	position: relative;
	width: 44px;
	height: 24px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	inset: 0;
	background: var(--bg-input);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.toggle-slider::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: var(--text-secondary);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
	background: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
	transform: translateX(20px);
	background: white;
}

/* Preset Buttons */
.preset-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xs);
}

.preset-btn {
	padding: var(--space-sm);
	background: var(--bg-input);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.preset-btn:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
	border-color: var(--border-default);
}

.preset-btn.active {
	background: var(--accent-glow);
	border-color: var(--accent-primary);
	color: var(--text-primary);
}

.preset-icon {
	width: 32px;
	height: 24px;
	display: grid;
	gap: 2px;
	padding: 2px;
	background: var(--bg-elevated);
	border-radius: 4px;
}

.preset-icon span {
	background: var(--accent-primary);
	border-radius: 1px;
	opacity: 0.7;
}

.preset-icon.grid-2x2 {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.preset-icon.grid-3x3 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.preset-icon.grid-holy {
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 1fr;
}

.preset-icon.grid-sidebar {
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 1fr;
}

.preset-icon.grid-header {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 3fr;
}

.preset-icon.grid-masonry {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.preset-icon.grid-masonry span:first-child {
	grid-row: span 2;
}

/* ============================================
       GRID CANVAS
    ============================================ */

.canvas-area {
	grid-area: canvas;
	background: var(--bg-base);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	overflow: auto;
}

.canvas-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.canvas-title {
	font-size: var(--text-md);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.canvas-info {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.info-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.info-value {
	font-family: "Fira Code", monospace;
	color: var(--accent-primary);
}

/* Grid Preview Container */
.grid-container {
	flex: 1;
	min-height: 300px;
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: 16px;
	padding: var(--space-md);
	position: relative;
	overflow: hidden;
}

.grid-preview {
	width: 100%;
	height: 100%;
	min-height: 280px;
	display: grid;
	gap: var(--preview-gap, 12px);
	transition: all 0.3s ease;
}

/* Grid Cell */
.grid-cell {
	background: var(--cell-color, var(--cell-1));
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	min-height: 60px;
}

.grid-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.grid-cell:hover::before {
	opacity: 1;
}

.grid-cell:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

.grid-cell.selected {
	outline: 3px solid white;
	outline-offset: -3px;
}

.cell-label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: white;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cell-size {
	font-family: "Fira Code", monospace;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.2);
	padding: 2px 8px;
	border-radius: 4px;
}

/* Cell Actions */
.cell-actions {
	position: absolute;
	top: var(--space-xs);
	right: var(--space-xs);
	display: flex;
	gap: 4px;
	opacity: 0;
	transform: translateY(-5px);
	transition: all 0.2s ease;
}

.grid-cell:hover .cell-actions {
	opacity: 1;
	transform: translateY(0);
}

.cell-action-btn {
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	border: none;
	border-radius: 6px;
	color: white;
	font-size: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.cell-action-btn:hover {
	background: rgba(0, 0, 0, 0.6);
	transform: scale(1.1);
}

/* Empty State */
.grid-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--text-muted);
	gap: var(--space-md);
}

.grid-empty-icon {
	font-size: 48px;
	opacity: 0.5;
}

/* ============================================
       CODE PANEL
    ============================================ */

.code-panel {
	grid-area: panel;
	background: var(--bg-surface);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.code-header {
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border-subtle);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.code-title {
	font-size: var(--text-md);
	font-weight: 600;
}

.code-tabs {
	display: flex;
	padding: 0 var(--space-lg);
	gap: var(--space-xs);
	border-bottom: 1px solid var(--border-subtle);
}

.code-tab {
	padding: var(--space-sm) var(--space-md);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-bottom: -1px;
}

.code-tab:hover {
	color: var(--text-secondary);
}

.code-tab.active {
	color: var(--accent-primary);
	border-bottom-color: var(--accent-primary);
}

.code-content {
	flex: 1;
	overflow: auto;
	padding: var(--space-md);
}

.code-block {
	background: var(--bg-base);
	border-radius: 12px;
	padding: var(--space-md);
	overflow-x: auto;
}

.code-block pre {
	font-family: "Fira Code", monospace;
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--text-primary);
	margin: 0;
}

/* Syntax highlighting */
.code-selector {
	color: #f97316;
}

.code-property {
	color: #c792ea;
}

.code-value {
	color: #82aaff;
}

.code-unit {
	color: #89ddff;
}

.code-function {
	color: #c3e88d;
}

.code-number {
	color: #f78c6c;
}

.code-comment {
	color: #546e7a;
	font-style: italic;
}

.code-bracket {
	color: #89ddff;
}

.code-string {
	color: #c3e88d;
}

/* Code Actions */
.code-actions {
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--border-subtle);
	display: flex;
	gap: var(--space-sm);
}

.code-actions .btn {
	flex: 1;
}

/* ============================================
       CELL EDITOR MODAL
    ============================================ */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

.modal {
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: 20px;
	width: min(90vw, 420px);
	max-height: 90vh;
	overflow: auto;
	transform: scale(0.9) translateY(20px);
	transition: all 0.3s ease;
}

.modal-overlay.active .modal {
	transform: scale(1) translateY(0);
}

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

.modal-title {
	font-size: var(--text-md);
	font-weight: 600;
}

.modal-close {
	width: 32px;
	height: 32px;
	background: var(--bg-input);
	border: none;
	border-radius: 8px;
	color: var(--text-secondary);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.modal-close:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.modal-body {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.modal-footer {
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--border-subtle);
	display: flex;
	gap: var(--space-sm);
	justify-content: flex-end;
}

/* Color Picker Grid */
.color-picker-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-xs);
}

.color-option {
	aspect-ratio: 1;
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s ease;
}

.color-option:hover {
	transform: scale(1.1);
}

.color-option.selected {
	border-color: white;
	box-shadow: 0 0 0 2px var(--bg-elevated);
}

/* ============================================
       TOAST NOTIFICATIONS
    ============================================ */

.toast-container {
	position: fixed;
	bottom: var(--space-lg);
	right: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	z-index: 1001;
}

.toast {
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	padding: var(--space-sm) var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	transform: translateX(120%);
	transition: all 0.3s ease;
}

.toast.show {
	transform: translateX(0);
}

.toast.success {
	border-color: var(--success);
}

.toast-icon {
	font-size: 16px;
}

/* ============================================
       RESPONSIVE MOBILE ADJUSTMENTS
    ============================================ */

@media (max-width: 480px) {
	.header {
		padding: var(--space-sm) var(--space-md);
	}

	.logo-text {
		display: none;
	}

	.canvas-area {
		padding: var(--space-md);
	}

	.preset-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}