/* =================================


   DESIGN SYSTEM - UNIFIED VARIABLES
   ================================= */
:root {
	/* Base font size for rem calculations - 16px default */
	font-size: 1vw;

	/* Primary Brand Colors - Solid Industry Standard */
	--primary-color: #222222; /* Blue 600 - Professional primary */
	--primary-hover: #222222; /* Blue 700 - Hover state */
	--primary-active: #222222; /* Blue 800 - Active state */
	--primary-light: #222222; /* Light blue tint */
	--primary-glow: rgba(0, 0, 0, 0.464); /* Glow effect */

	/* Secondary Colors - Complementary */
	--secondary-color: #64748b; /* Slate 500 - Secondary gray */
	--secondary-hover: #475569; /* Slate 600 - Hover state */
	--secondary-light: rgba(100, 116, 139, 0.15); /* Light gray tint */

	/* Success Colors */
	--success-color: #222222; /* Emerald 500 - Success green */
	--success-hover: #222222; /* Emerald 600 - Hover state */

	/* Status Colors */
	--warning-color: #222222; /* Amber 500 - Warning */
	--error-color: #222222; /* Red 500 - Error */
	--info-color: #222222; /* Sky 500 - Info blue */

	/* Glass Effect Variables - Refined */
	--glass-bg: rgba(255, 255, 255, 0.85); /* Lighter for white backgrounds */
	--glass-bg-dark: rgba(235, 235, 235, 0.312); /* Darker for dark backgrounds */
	--glass-bg-light: rgba(59, 59, 59, 0.7);
	--glass-border: rgb(0, 0, 0);
	--glass-border-hover: rgba(0, 0, 0, 0.25);
	--glass-border-dark: rgba(255, 255, 255, 0.25);
	--glass-blur: blur(0.75rem);
	--glass-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
	--glass-shadow-dark: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);

	/* Text Colors - Better contrast */
	--text-primary: #ffffff; /* Slate 800 - Primary text */
	--text-secondary: #3e3e3e; /* Slate 500 - Secondary text */
	--text-tertiary: #343434; /* Slate 400 - Tertiary text */
	--text-white: #ffffff; /* White text */
	--text-black: #000000; /* Black text */

	/* Component Sizing */
	--border-radius: 0.75rem;
	--border-radius-small: 0.5rem;
	--border-radius-large: 1rem;
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
}

/* =================================
   GLOBAL STYLES
   ================================= */

/* Responsive font size scaling for rem units */
html {
	font-size: 1vw; /* Base size for rem calculations */
}

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

body {
	font-family: "Bitcount Grid Double", "SF Pro Display", "Segoe UI",
		"Helvetica Neue", Arial, sans-serif;
	background: #ffffff;
	color: var(--text-primary);
	height: 100vh;
	overflow: hidden;
	font-weight: 400;
	letter-spacing: -0.01rem;
	line-height: 1.5;
}

/* =================================
   3D VIEWPORT
   ================================= */
.viewport-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #1a1a1a;
	z-index: 1;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/* =================================
   UNIFIED PANEL SYSTEM - ENHANCED
   ================================= */

/* Base Panel Class - ALL panels inherit this */
.floating-top-bar,
.floating-toolbar,
.floating-layers-panel,
.floating-brush-panel,
.floating-sticker-panel,
.floating-shortcuts-panel,
.floating-minimap,
.floating-record-panel,
.notification {
	background: var(--glass-bg-dark);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 0.0625rem solid var(--glass-border);
	border-radius: var(--border-radius);
	box-shadow: var(--glass-shadow);
	color: var(--text-secondary);
	font-family: "Bitcount Grid Double", "Inter", "Segoe UI", Tahoma, Geneva,
		Verdana, sans-serif;
	transform: translate3d(0, 0, 0);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

/* Unified hover effects */
.floating-top-bar:hover,
.floating-toolbar:hover,
.floating-layers-panel:hover,
.floating-brush-panel:hover,
.floating-sticker-panel:hover,
.floating-shortcuts-panel:hover,
.floating-minimap:hover,
.floating-record-panel:hover {
	border-color: var(--glass-border-hover);
	box-shadow: var(--glass-shadow), 0 0 1.875rem var(--primary-glow);
}

/* Unified hover effects */
.floating-top-bar:hover,
.floating-toolbar:hover,
.floating-layers-panel:hover,
.floating-brush-panel:hover,
.floating-sticker-panel:hover,
.floating-shortcuts-panel:hover,
.floating-minimap:hover,
.floating-record-panel:hover {
	border-color: var(--glass-border-hover);
	box-shadow: var(--glass-shadow), 0 0 1.25rem var(--primary-glow);
}

/* =================================
   SPECIFIC PANEL POSITIONING
   ================================= */

/* Top Bar - WorldBuilder Title */
.floating-top-bar {
	position: fixed;
	top: var(--spacing-lg);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	padding: var(--spacing-sm) var(--spacing-md);
	z-index: 100;
}

.floating-top-bar:hover {
	transform: translateX(-50%) translateY(-0.125rem);
}

/* Left Toolbar - Centered vertically on left side */
.floating-toolbar {
	position: fixed;
	top: 50%;
	left: var(--spacing-lg);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	padding: var(--spacing-md);
	z-index: 1100;
	background: var(--glass-bg-dark);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	box-shadow: var(--glass-shadow);
}

/* Right Layers Panel */
.floating-layers-panel {
	position: fixed;
	top: 50%;
	right: var(--spacing-lg);
	transform: translateY(-50%);
	width: 5rem;
	padding: var(--spacing-md);
	z-index: 90;
	display: none;
}

/* Right Side Shortcuts Panel */
.floating-shortcuts-panel {
	position: fixed;
	bottom: var(--spacing-lg);
	right: var(--spacing-lg);
	width: 11.5rem;
	padding: var(--spacing-sm);
	z-index: 85;
	display: none;
}

.floating-shortcuts-panel .panel-header {
	font-size: 0.7875rem;
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
	text-align: center;
	color: var(--text-primary);
}

.shortcuts-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.shortcut-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.1875rem 0.375rem;
	border-radius: 0.25rem;
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.2s ease;
}

.shortcut-item:hover {
	background: rgba(255, 255, 255, 0.1);
}

.shortcut-key {
	font-size: 0.725rem;
	font-weight: bold;
	color: var(--primary-color);
	background: rgba(var(--primary-rgb), 0.2);
	padding: 0.125rem 0.375rem;
	border-radius: 0.1875rem;
	min-width: 1.25rem;
	text-align: center;
}

.shortcut-desc {
	font-size: 0.725rem;
	color: var(--text-secondary);
	flex: 1;
	text-align: right;
}

/* Enhanced Brush/Sticker Panel for Better UX */
.floating-brush-panel,
.floating-sticker-panel {
	position: fixed;
	top: 50%;
	right: var(--spacing-lg);
	transform: translateY(-50%);
	width: 20rem; /* Increased from 17.5rem to accommodate larger stickers */
	padding: var(--spacing-lg);
	display: none;
	z-index: 90;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	-webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	max-height: 85vh; /* Ensure panel doesn't exceed viewport */
	overflow-y: auto; /* Add scrolling if content is too tall */
}

/* Top Right Minimap */
.floating-minimap {
	position: fixed;
	top: var(--spacing-lg);
	right: var(--spacing-lg);
	width: 11.25rem;
	padding: var(--spacing-md);
	z-index: 80;
	display: none;
}

/* Bottom Center Record Panel */
.floating-record-panel {
	position: fixed;
	bottom: var(--spacing-lg);
	left: 50%;
	transform: translateX(-50%);
	padding: var(--spacing-lg);
	display: none;
	z-index: 90;
}

/* Top Right Notifications - Positioned below undo/redo panel */
.notification {
	position: fixed;
	top: calc(var(--spacing-lg) + 3.75rem);
	right: var(--spacing-lg);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-weight: 600;
	z-index: 1000;
	transform: translateX(25rem);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 18.75rem;
	word-wrap: break-word;
	box-shadow: var(--glass-shadow);
	border: 1px solid black;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	color: var(--text-primary);
	background: var(--glass-bg-light);
}

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

.notification.error {
	background: linear-gradient(45deg, var(--error-color), var(--success-color));
	/* color: white; */
}

.notification.warning {
	background: linear-gradient(45deg, var(--warning-color), #ffd700);
	/* color: #0a0a0a; */
}

.notification.info {
	background: linear-gradient(45deg, var(--info-color), var(--success-color));
	/* color: white; */
}

/* =================================
   PANEL CONTENT STYLING - SOLID COLORS
   ================================= */

/* Unified Panel Headers */
.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 0.125rem solid #000000;
}

.panel-header span {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-secondary);
	text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
}

/* Top Bar Content */
.app-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
}

.mode-display span {
	background: var(--primary-light);
	color: var(--primary-color);
	padding: 0.25rem 0.75rem;
	border-radius: var(--border-radius-small);
	border: 1px solid var(--glass-border);
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.3s ease;
}

/* =================================
   TOOL BUTTONS
   ================================= */
/* =================================
   TOOL BUTTONS - WITH TEXT LABELS
   ================================= */
.tool-btn {
	width: 6rem;
	height: 6rem;
	background: #ffffff;
	/* border: 1px solid var(--glass-border); */
	border-radius: var(--border-radius-small);
	color: #000000;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	font-weight: 500;
	/* box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); */
	gap: 0.375rem;
	padding: 0.5rem;
	font-family: "Bitcount Grid Double", "Sixtyfour Convergence";
	border: none;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.tool-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--primary-light);
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: -1;
}

.tool-btn:hover {
	background: var(--primary-color);
	border-color: var(--primary-hover);
	color: var(--text-primary);
	/* border-color: var(--primary-color); */
	/* color: var(--primary-color); */
	/* transform: translateY(-0.125rem); */
	/* box-shadow: 0 0.25rem 0.75rem var(--primary-glow); */
}

.tool-btn:hover::before {
	opacity: 1;
}

.tool-btn.active {
	background: var(--primary-color);
	border-color: var(--primary-hover);
	color: var(--text-primary);
	transform: scale(1.05);
	box-shadow: 0 0 0.9375rem var(--primary-glow);
	font-weight: 600;
}

.tool-btn.active::before {
	opacity: 0;
}

.tool-btn-svg {
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.25rem;
}

.tool-label {
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.2;
}

/* =================================
   LAYER ITEMS
   ================================= */
.layer-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.layer-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--spacing-sm);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-small);
	background: var(--glass-bg-light);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.layer-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--primary-light), transparent);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.layer-item:hover {
	border-color: var(--primary-color);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.25rem 0.9375rem var(--primary-glow);
}

.layer-item:hover::before,
.layer-item.active::before {
	opacity: 1;
}

.layer-item.active {
	border-color: var(--primary-color);
	background: var(--primary-light);
	box-shadow: 0 0 0.9375rem var(--primary-glow);
}

.layer-icon {
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
	position: relative;
	z-index: 1;
}

.layer-name {
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--text-secondary);
	text-align: center;
	position: relative;
	z-index: 1;
	text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
}

.layer-item.active .layer-name {
	color: var(--text-primary);
}

/* =================================
   BRUSH CONTROLS
   ================================= */
.control-group {
	margin-bottom: var(--spacing-md);
	background: rgba(255, 255, 255, 0.874);
	padding: var(--spacing-sm);
	border-radius: var(--border-radius-small);
	border: 1px solid var(--glass-border-dark);
	/* add shadow */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-group label {
	display: block;
	margin-bottom: var(--spacing-sm);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-secondary);
	/* text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3); */
}

/* Input Styling - Enhanced */
input[type="range"] {
	width: 100%;
	height: 0.5rem;
	background: var(--glass-bg-light);
	border-radius: 0.25rem;
	outline: none;
	border: 1px solid var(--glass-border);
}

input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 1.375rem;
	height: 1.375rem;
	background: var(--primary-color);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0.1875rem 0.625rem var(--primary-glow);
	transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 0.25rem 0.9375rem var(--primary-glow);
}

input[type="color"] {
	width: 3rem;
	height: 3rem;
	/* border: 1px solid var(--glass-border-dark); */
	border-radius: 0.3rem;
	/* background: var(--glass-bg-light); */
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
	border: none;
	width: 4rem;
	height: 4rem;
	border: none;
	border-radius: 1.2rem;
	cursor: pointer;
	background: none;
}

input[type="color"]:hover {
	border-color: var(--primary-color);
	box-shadow: 0 0 0.9375rem var(--primary-glow);
}

/* =================================
   ENHANCED STICKER GRID SYSTEM
   ================================= */
.sticker-grid {
	display: grid;
	grid-template-columns: repeat(
		2,
		1fr
	); /* Changed from 3 to 2 for larger previews */
	gap: var(--spacing-md); /* Increased gap for better spacing */
	max-height: 16rem; /* Increased height for better scrolling */
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) var(--glass-bg-light);
	padding: var(--spacing-sm); /* Added padding for better visual spacing */
}

.sticker-grid::-webkit-scrollbar {
	width: 0.5rem; /* Slightly wider scrollbar */
}

.sticker-grid::-webkit-scrollbar-track {
	background: var(--glass-bg-light);
	border-radius: 0.25rem;
}

.sticker-grid::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 0.25rem;
	border: 1px solid var(--glass-border);
}

.sticker-grid::-webkit-scrollbar-thumb:hover {
	background: var(--primary-hover);
}

/* Enhanced Sticker Items */
.sticker-item {
	width: 5rem; /* Increased from 3.75rem */
	height: 5rem; /* Increased from 3.75rem */
	background-size: contain;
	background-position: center;
	border: 2px solid var(--glass-border); /* Thicker border */
	border-radius: var(--border-radius); /* Larger border radius */
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: visible; /* Changed to visible for better button placement */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Added subtle shadow */
}

.sticker-item.selected {
	border-color: var(--primary-color);
	box-shadow: 0 0 0.9375rem var(--primary-glow);
	transform: scale(1.1);
}

/* =================================
   CUSTOM STICKER UPLOAD SYSTEM
   ================================= */

/* Upload Section Header */
.sticker-upload-section {
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-md);
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--border-radius);
	border: 1px solid var(--glass-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upload-header {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-md);
	text-align: center;
	border-bottom: 1px solid var(--glass-border);
	padding-bottom: var(--spacing-sm);
}

/* Upload Zone Styling */
.sticker-upload-zone {
	border: 2px dashed var(--glass-border);
	border-radius: var(--border-radius);
	padding: var(--spacing-sm);
	text-align: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: rgba(255, 255, 255, 0.02);
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sticker-upload-zone::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--primary-light), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.sticker-upload-zone:hover {
	border-color: var(--primary-color);
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px var(--primary-glow);
}

.sticker-upload-zone:hover::before {
	opacity: 0.1;
}

.sticker-upload-zone.drag-over {
	border-color: var(--primary-color);
	background: var(--primary-light);
	transform: scale(1.02);
	box-shadow: 0 6px 20px var(--primary-glow);
}

.sticker-upload-zone.drag-over::before {
	opacity: 0.2;
}

.upload-icon {
	font-size: 2rem;
	margin-bottom: var(--spacing-sm);
	opacity: 0.7;
	transition: all 0.3s ease;
}

.sticker-upload-zone:hover .upload-icon {
	opacity: 1;
	transform: scale(1.1);
}

.upload-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.upload-main {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-secondary);
}

.upload-sub {
	font-size: 0.75rem;
	color: var(--text-secondary);
	opacity: 0.8;
}

/* Upload Progress Indicator */
.upload-progress {
	margin-top: var(--spacing-md);
	text-align: center;
}

.progress-bar {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: var(--spacing-sm);
}

.progress-fill {
	height: 100%;
	background: linear-gradient(
		90deg,
		var(--primary-color),
		var(--primary-hover)
	);
	border-radius: 2px;
	transition: width 0.3s ease;
	width: 0%;
}

.progress-text {
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-weight: 500;
}

/* Enhanced Category Tabs */
.sticker-categories {
	margin-bottom: var(--spacing-md);
}

.category-tabs {
	display: flex;
	gap: 0.125rem; /* Tighter gap for better connection */
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius);
	padding: 0.1875rem;
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.category-tab {
	flex: 1;
	padding: 0.625rem 0.75rem; /* Increased padding for better click target */
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 0.8rem; /* Slightly larger text */
	font-weight: 600; /* Bolder text */
	border-radius: var(--border-radius-small);
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.category-tab::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		var(--primary-color),
		var(--primary-color)
	);
	opacity: 0;
	transition: all 0.3s ease;
	z-index: -1;
	border-radius: var(--border-radius-small);
}

.category-tab:hover {
	color: var(--text-primary);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.category-tab:hover::before {
	opacity: 0.15;
}

.category-tab.active {
	background: var(--primary-color);
	color: var(--text-primary);
	font-weight: 700;
	box-shadow: 0 3px 12px var(--primary-glow);
	transform: translateY(-1px);
}

.category-tab.active::before {
	opacity: 1;
}

/* Sticker Content Container */
.sticker-content {
	position: relative;
}

.sticker-grid {
	display: none;
}

.sticker-grid.active {
	display: grid;
}

/* Enhanced Custom Sticker Identification */
.sticker-item.custom-sticker {
	position: relative;
	/* border: 3px solid var(--primary-color); Distinctive border for custom stickers */
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--primary-glow); /* Enhanced shadow with glow */
}

.sticker-item.custom-sticker:hover {
	/* border-color: var(--primary-hover); */
	transform: scale(1.08); /* Slightly more scaling for custom stickers */
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--primary-glow);
}

.sticker-item.custom-sticker.selected {
	border-color: var(--success-color);
	transform: scale(1.12);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(251, 255, 0, 0.5);
}

/* Custom Sticker Badge - Repositioned to bottom-right corner */
.sticker-item.custom-sticker::after {
	content: "🎨";
	position: absolute;
	bottom: -0.5rem;
	right: -0.5rem;
	width: 2rem;
	height: 2rem;
	background: var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	border: 2px solid white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 3;
	transition: all 0.2s ease;
}

.sticker-item.custom-sticker:hover::after {
	transform: scale(1.1);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Enhanced Delete Button - Repositioned to top-right corner */
.sticker-item.custom-sticker .delete-sticker {
	position: absolute;
	top: -0.5px; /* Moved closer to card */
	right: -0.5px; /* Moved to top-right corner */
	width: 2rem; /* Slightly smaller for better proportion */
	height: 2rem;
	background: #ff4757;
	color: white;
	border: none;
	border-radius: 50%;
	font-size: 1.5rem;
	font-weight: bold;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 4; /* Higher than the custom badge */
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
	border: 2px solid white;
	line-height: 1; /* Better centering */
}

.sticker-item.custom-sticker:hover .delete-sticker {
	display: flex;
	animation: deleteButtonAppear 0.2s ease-out;
}

.delete-sticker:hover {
	background: #ff3742;
	transform: scale(1.2); /* Slightly more pronounced scaling */
	box-shadow: 0 3px 12px rgba(255, 71, 87, 0.6);
}

.delete-sticker:active {
	transform: scale(0.9);
}

/* Improved animation for better visual feedback */
@keyframes deleteButtonAppear {
	from {
		opacity: 0;
		transform: scale(0.3) rotate(-180deg);
	}
	to {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

/* Sticker Item Tooltip Enhancement */
.sticker-item {
	position: relative;
}

.sticker-item::before {
	content: attr(title);
	position: absolute;
	bottom: -35px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.9);
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.6875rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 10;
}

.sticker-item:hover::before {
	opacity: 1;
}

/* Empty State for Custom Stickers */
.no-custom-stickers {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-xl);
	color: var(--text-secondary);
}

.empty-icon {
	font-size: 2.5rem;
	margin-bottom: var(--spacing-md);
	opacity: 0.5;
}

.empty-text {
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.empty-sub {
	font-size: 0.75rem;
	opacity: 0.7;
}

/* =================================
   COLOR PICKER ENHANCEMENTS
   ================================= */

.color-picker-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.square-color-picker {
	width: 3.75rem;
	height: 3.75rem;
	border: 0.125rem solid var(--glass-border);
	border-radius: var(--border-radius-small);
	background: var(--glass-bg-light);
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.square-color-picker:hover {
	border-color: var(--primary-color);
	box-shadow: 0 0 0.625rem var(--primary-glow);
	transform: scale(1.05);
}

.color-preview-indicator {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
}

.color-preview-box {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 2px solid var(--glass-border);
}

.color-preview-text {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-secondary);
}

/* Color History - Enhanced */
.color-history {
	margin-top: var(--spacing-md);
	padding: 0.5rem;
	background: rgba(0, 0, 0, 0.05);
	border-radius: var(--border-radius-small);
	border: 1px solid var(--glass-border);
}

.color-history-header {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-sm);
	text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
}

.color-history-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.375rem;
}

.color-history-item {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--border-radius-small);
	border: 1px solid var(--glass-border);
	cursor: pointer;
	transition: all 0.2s ease;
}

.color-history-item:hover {
	transform: scale(1.1);
	border-color: var(--primary-color);
	box-shadow: 0 0 0.625rem var(--primary-glow);
}

/* =================================
   BRUSH INDICATORS
   ================================= */
#brush2dIndicator,
#eraser2dIndicator {
	position: fixed;
	border-radius: 50%;
	pointer-events: none;
	z-index: 50;
	display: none;
	transform: translate3d(0, 0, 0);
	will-change: transform, width, height;
	transition: width 0.1s ease-out, height 0.1s ease-out;
}

#brush2dIndicator {
	border: 2px solid #ff0000;
	background: rgba(255, 0, 0, 0.05);
}

#eraser2dIndicator {
	border: 0.125rem dashed var(--glass-border-dark);
	background: rgba(255, 107, 107, 0.1);
	box-shadow: 0 0 0.9375rem rgba(255, 107, 107, 0.3);
}

/* Brush inner elements - properly styled */
.brush-inner-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30%;
	height: 30%;
	border: 0.0625rem solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	animation: innerRingSpin 6s linear infinite;
}

@keyframes innerRingSpin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Brush opacity indicator - properly styled */
.brush-opacity-indicator {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--glass-bg-dark);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 0.0625rem solid var(--glass-border);
	border-radius: 50%;
	font-size: 0.5625rem;
	font-weight: 600;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--glass-shadow);
	transform: translate3d(0, 0, 0);
	transition: all 0.1s ease;
}

/* Eraser inner cross - properly styled */
.eraser-inner-cross {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: 60%;
}

.eraser-inner-cross::before,
.eraser-inner-cross::after {
	content: "";
	position: absolute;
	background: rgba(255, 107, 107, 0.8);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0.25rem rgba(255, 107, 107, 0.5);
}

.eraser-inner-cross::before {
	width: 100%;
	height: 0.125rem;
}

.eraser-inner-cross::after {
	width: 0.125rem;
	height: 100%;
}

/* Eraser size indicator - properly styled */
.eraser-size-indicator {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--glass-bg-dark);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 0.0625rem solid rgba(255, 107, 107, 0.5);
	border-radius: 50%;
	font-size: 0.5625rem;
	font-weight: 600;
	color: var(--primary-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--glass-shadow);
	transform: translate3d(0, 0, 0);
	transition: all 0.1s ease;
}

/* Hide indicators in paint mode if user prefers cleaner experience */
body[data-mode="paint"] .brush-opacity-indicator,
body[data-mode="eraser"] .eraser-size-indicator {
	/* Comment out the line below to show size/opacity indicators */
	display: none;
}

/* Alternative: Show only on hover/active painting */
body[data-mode="paint"]:hover .brush-opacity-indicator,
body[data-mode="eraser"]:hover .eraser-size-indicator {
	/* Uncomment to show indicators only during interaction */
	/* display: flex; */
}

/* Clear canvas functionality removed - UI decluttered */

/* =================================
   MODE-SPECIFIC VISIBILITY
   ================================= */
body[data-mode="paint"] .floating-brush-panel,
body[data-mode="paint"] .floating-shortcuts-panel,
body[data-mode="paint"] .floating-minimap {
	display: block;
}

body[data-mode="sticker"] .floating-sticker-panel,
body[data-mode="sticker"] .floating-shortcuts-panel,
body[data-mode="sticker"] .floating-layers-panel {
	display: block;
}

body[data-mode="eraser"] .floating-brush-panel,
body[data-mode="eraser"] .floating-shortcuts-panel {
	display: block;
}

body[data-mode="rotate"] .floating-shortcuts-panel {
	display: block;
}

body[data-mode="eraser"] .floating-brush-panel {
	border-color: rgba(52, 52, 52, 0.632);
}

body[data-mode="eraser"] .floating-brush-panel .panel-header {
	border-bottom-color: rgba(3, 3, 3, 0.425);
}

body[data-mode="eraser"] .floating-brush-panel .panel-header span {
	color: var(--primary-hover);
}

/* Hide color controls in eraser mode */
body[data-mode="eraser"] input[type="color"],
body[data-mode="eraser"] .color-history {
	display: none !important;
}

/* Hide entire color control group in eraser mode */
body[data-mode="eraser"] .control-group:first-child {
	display: none !important;
}

/* Sticker grid styling moved to unified section above */

.sticker-item {
	width: 7rem;
	height: 7rem;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 0.125rem solid var(--glass-border);
	border-radius: var(--border-radius-small);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.sticker-item.selected {
	border-color: var(--primary-color);
	box-shadow: 0 0 0.9375rem var(--primary-glow);
	transform: scale(1.05);
}

.sticker-item.selected::before {
	opacity: 0.5;
}

/* =================================
   STICKER PREVIEW CURSOR
   ================================= */
#sticker-preview {
	position: fixed;
	pointer-events: none;
	z-index: 50;
	display: none;
	transform: translate3d(0, 0, 0);
	will-change: transform, width, height;
	transition: width 0.1s ease-out, height 0.1s ease-out;
	border: 2px dashed var(--primary-color);
	border-radius: var(--border-radius-small);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0.9375rem var(--primary-glow);
	/* Semi-transparent background for better visibility */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Add a subtle overlay to make the preview more visible */
#sticker-preview::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 120, 212, 0.1);
	border-radius: inherit;
	z-index: -1;
}

/* Add a small corner indicator to show it's a preview */
#sticker-preview::after {
	content: "🏷️";
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1rem;
	height: 1rem;
	background: var(--primary-color);
	border-radius: 50%;
	font-size: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
}

/* =================================
   TOOL STATUS DISPLAY
   ================================= */
.tool-status-viewport {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.75rem 1.5rem;
	background: rgba(255, 255, 255, 0.8);
	color: var(--text-secondary);
	border-radius: 1.5625rem;
	font-size: 1rem;
	font-weight: 500;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	white-space: nowrap;
	box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.3);
	/* text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2); */
	max-width: 90vw; /* Ensure it doesn't exceed viewport width */
	overflow: hidden;
	text-overflow: ellipsis;
}

.tool-status-viewport.show {
	opacity: 1;
	transform: translate(-50%, -60%);
	animation: statusPulse 1.5s infinite;
}

/* =================================
   KEYFRAME ANIMATIONS
   ================================= */

@keyframes statusPulse {
	0% {
		transform: translate(-50%, -60%) scale(1);
	}
	50% {
		transform: translate(-50%, -60%) scale(1.05);
	}
	100% {
		transform: translate(-50%, -60%) scale(1);
	}
}

@keyframes tooltipShow {
	from {
		opacity: 0;
		transform: translateY(0.3125rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =================================
   RECORD MODE - CLEAN UI
   ================================= */

/* Hide all UI panels when in record mode */
body[data-mode="record"] .floating-toolbar,
body[data-mode="record"] .floating-layers-panel,
body[data-mode="record"] .floating-brush-panel,
body[data-mode="record"] .floating-sticker-panel,
body[data-mode="record"] .floating-minimap,
body[data-mode="record"] .undo-redo-panel,
body[data-mode="record"] .notification {
	display: none !important;
}

/* Simplify top bar in record mode - only show title and record controls */
body[data-mode="record"] .floating-top-bar {
	background: var(--glass-bg-dark);
	border: 1px solid rgba(220, 53, 69, 0.3);
	box-shadow: var(--glass-shadow), 0 0 1.25rem rgba(220, 53, 69, 0.2);
}

/* Hide mode display when in record mode since the controls show the state */
body[data-mode="record"] .mode-display {
	display: none;
}

/* =================================
   RECORD SECTION STYLING
   ================================= */

/* Record Section Layout */
.record-section {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

/* Record Button - Match glassmorphism design */
.record-button {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 0.25rem 0.75rem;
	background: var(--glass-bg-light);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-small);
	color: var(--text-primary);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.record-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), transparent);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.record-button:hover {
	border-color: rgba(220, 53, 69, 0.4);
	color: var(--primary-hover);
	transform: translateY(-0.0625rem);
	box-shadow: 0 0.25rem 0.9375rem rgba(220, 53, 69, 0.2);
}

.record-button:hover::before {
	opacity: 1;
}

.record-button svg {
	width: 1rem;
	height: 1rem;
	transition: all 0.2s ease;
}

/* Active record mode styling */
body[data-mode="record"] .record-button {
	background: rgba(220, 53, 69, 0.15);
	border-color: rgba(220, 53, 69, 0.4);
	color: var(--primary-hover);
	animation: recordPulse 2s infinite;
}

body[data-mode="record"] .record-button::before {
	opacity: 1;
}

@keyframes recordPulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.9;
		transform: scale(1.02);
	}
}

/* Record Controls - Match glassmorphism design */
.record-controls {
	display: none;
	gap: var(--spacing-sm);
	align-items: center;
}

body[data-mode="record"] .record-controls {
	display: flex;
}

.btn-confirm,
.btn-cancel {
	padding: 0.25rem 1rem;
	border: 0.0625rem solid var(--glass-border);
	border-radius: var(--border-radius-small);
	background: var(--glass-bg-light);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.btn-confirm::before,
.btn-cancel::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.btn-confirm {
	color: #28a745;
	border-color: rgba(40, 167, 69, 0.3);
}

.btn-confirm::before {
	background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), transparent);
}

.btn-confirm:hover {
	border-color: rgba(40, 167, 69, 0.5);
	color: #218838;
	transform: translateY(-0.0625rem);
	box-shadow: 0 0.25rem 0.9375rem rgba(40, 167, 69, 0.2);
}

.btn-confirm:hover::before {
	opacity: 1;
}

.btn-cancel {
	color: var(--text-secondary);
	border-color: var(--glass-border);
}

.btn-cancel::before {
	background: linear-gradient(135deg, rgba(108, 117, 125, 0.15), transparent);
}

.btn-cancel:hover {
	border-color: rgba(108, 117, 125, 0.4);
	color: var(--text-primary);
	transform: translateY(-0.0625rem);
	box-shadow: 0 0.25rem 0.9375rem rgba(108, 117, 125, 0.2);
}

.btn-cancel:hover::before {
	opacity: 1;
}

/* Recording indicator - show during actual recording */
.recording-indicator {
	display: none;
	position: fixed;
	top: calc(var(--spacing-lg) + 5rem);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 71, 87, 0.95);
	color: white;
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--border-radius);
	font-size: 0.875rem;
	font-weight: 600;
	z-index: 1000;
	box-shadow: var(--glass-shadow);
	animation: recordingBounce 1s ease-in-out infinite alternate;
}

@keyframes recordingBounce {
	from {
		transform: translateX(-50%) scale(1);
	}
	to {
		transform: translateX(-50%) scale(1.05);
	}
}

/* Clean viewport during recording */
body[data-mode="record"] .viewport-container {
	background: #1a1a1a;
}

/* Hide cursors during record mode */
body[data-mode="record"] #brush2dIndicator,
body[data-mode="record"] #eraser2dIndicator,
body[data-mode="record"] #sticker-preview {
	display: none !important;
}

/* =================================
   UNDO/REDO PANEL - UNIFIED DESIGN - ENHANCED
   ================================= */
.undo-redo-panel {
	position: fixed;
	top: var(--spacing-lg);
	right: var(--spacing-lg);
	display: flex;
	gap: var(--spacing-sm);
	background: var(--glass-bg-dark);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	padding: var(--spacing-sm);
	box-shadow: var(--glass-shadow);
	z-index: 100;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.undo-redo-panel:hover {
	border-color: var(--glass-border-hover);
	box-shadow: var(--glass-shadow), 0 0 1.875rem var(--primary-glow);
}

.undo-btn,
.redo-btn {
	width: 3rem;
	height: 3rem;
	background: #ffffff;
	border: 0.0625rem solid var(--glass-border);
	border-radius: var(--border-radius-small);
	color: #000000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

.undo-btn::before,
.redo-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--primary-color);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.undo-btn:hover,
.redo-btn:hover {
	border-color: var(--primary-color);
	color: var(--text-primary);
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.375rem 1.25rem var(--primary-glow);
}

.undo-btn:hover::before,
.redo-btn:hover::before {
	opacity: 0.2;
}

.undo-btn:disabled,
.redo-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	color: var(--text-tertiary);
}

.undo-btn:disabled:hover,
.redo-btn:disabled:hover {
	transform: none;
	border-color: var(--glass-border);
	box-shadow: none;
}

.undo-btn:disabled::before,
.redo-btn:disabled::before {
	opacity: 0;
}

.undo-btn:disabled:hover::before,
.redo-btn:disabled:hover::before {
	opacity: 0;
}

/* =================================
   MULTI-SCREEN WORKFLOW SYSTEM
   ================================= */

/* Screen Progress Indicator - Enhanced */
.screen-progress {
	position: fixed;
	top: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	gap: 0.75rem;
	background: var(--glass-bg-dark);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	padding: 0.75rem 1.25rem;
	box-shadow: var(--glass-shadow);
	transition: opacity 0.5s ease-in-out;
}

.progress-step {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.875rem;
	border-radius: var(--border-radius-small);
	border: 1px solid var(--glass-border);
	transition: all 0.3s ease;
	opacity: 0.7;
	background: var(--glass-bg-light);
}

.progress-step.active {
	background: var(--primary-light);
	border: 1px solid var(--primary-color);
	opacity: 1;
	box-shadow: 0 0 0.9375rem var(--primary-glow);
}

.progress-step.completed {
	background: var(--success-color);
	opacity: 0.6;
}

.step-number {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-secondary);
}

.progress-step.active .step-number {
	color: var(--primary-color);
	color: rgb(0, 0, 0);
	box-shadow: 0 0 0.625rem var(--primary-glow);
}

.progress-step.completed .step-number {
	/* background: white; */
	/* color: var(--success-color); */
}

.step-label {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Screen Container System */
.screen-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.screen-container.active {
	opacity: 1;
	pointer-events: none; /* Let 3D viewport receive mouse events */
}

/* Allow pointer events only on screen UI elements */
.screen-container.active .screen-header,
.screen-container.active .screen-actions,
.screen-container.active .base-color-controls,
.screen-container.active .pose-toolbar,
.screen-container.active .floating-toolbar,
.screen-container.active .floating-layers-panel,
.screen-container.active .floating-brush-panel,
.screen-container.active .floating-sticker-panel,
.screen-container.active .floating-minimap-panel,
.screen-container.active .undo-redo-panel,
.screen-container.active .floating-panel-toggle {
	pointer-events: all;
}

/* Screen Headers */
.screen-header {
	position: fixed;
	top: 5rem;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 101;
	/* More opaque background for better backdrop-filter visibility */
	background: rgba(255, 255, 255, 0.25);
	/* Enhanced backdrop blur effect with better browser support */
	backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	-webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	padding: 1rem 1.5rem;
	max-width: 90vw;
	transition: all 0.5s ease-in-out;
	/* Enhanced shadows for better depth perception */
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	/* Force hardware acceleration for better rendering */
	transform: translateX(-50%) translateZ(0);
	will-change: transform, opacity;
}

.screen-header h2 {
	font-size: 1.5rem;
	margin-bottom: 0.375rem;
	color: var(--text-secondary);
	font-weight: 800;
}

.screen-header p {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	margin: 0;
	font-weight: 500;
}

.top-ui-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 150px; /* Area to trigger hover */

	pointer-events: auto;
}

/* Screen Actions */
.screen-actions {
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%) translateZ(0);
	z-index: 101;
	display: flex;
	gap: 1rem;
	/* background: rgba(255, 255, 255, 0.2); */
	/* backdrop-filter: blur(16px) saturate(1.4) brightness(1.1); */
	-webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	/* border: 1px solid var(--glass-border); */
	border-radius: var(--border-radius);
	/* padding: 1rem 1.5rem; */
	/* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); */
	will-change: transform, opacity;
}

/* Button Styles */
.btn-primary,
.btn-secondary,
.btn-finish {
	padding: 0.875rem 1.75rem;
	border: none;
	border-radius: var(--border-radius-small);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	position: relative;
	overflow: hidden;
	font-family: "Bitcount Grid Double", "Sixtyfour Convergence", "SF Pro Display",
		"Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.btn-primary {
	background: var(--primary-color);
	color: var(--text-on-primary);
	box-shadow: 0 4px 12px var(--primary-glow);
	border: 1px solid var(--primary-hover);
}

.btn-primary:hover {
	/* background: var(--primary-hover); */
	transform: translateY(-2px);
	box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-primary:active {
	transform: scale(0.98);
}

.btn-secondary {
	background: var(--glass-bg-dark);
	color: var(--text-secondary);
	box-shadow: 0 4px 12px var(--primary-glow);
	/* border: 1px solid var(--primary-hover); */
}

.btn-secondary:hover {
	background: var(--secondary-light);
	border-color: var(--secondary-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary:active {
	transform: scale(0.98);
}

.btn-finish {
	background: var(--success-color);
	color: white;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
	border: 1px solid var(--success-hover);
}

.btn-finish:hover {
	background: var(--success-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-finish:active {
	transform: scale(0.98);
}

.btn-finish:active {
	transform: scale(0.98);
}

/* =================================
   SCREEN 1: BASE COLOR SELECTION
   ================================= */

.base-color-controls {
	position: fixed;
	top: 50%;
	left: var(--spacing-lg);
	transform: translateY(-50%) translateZ(0);
	z-index: 101;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	-webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	padding: 2rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	width: 20rem;
	will-change: transform, opacity;
}

.color-palette {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
	margin-bottom: 1.25rem;
}

.color-option {
	width: 3rem;
	height: 3rem;
	border-radius: 4.3rem;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 3px solid transparent;
	position: relative;
}

.color-option:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.color-option.active {
	border-color: white;
	transform: scale(1.15);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.color-option.active::after {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 3rem;
	font-weight: bold;
	font-family: monospace;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.custom-color-section {
	text-align: left;
	padding-top: 1rem;
	border-top: 1px solid var(--glass-border);
}

.custom-color-section label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--text-secondary);
	font-size: 1.1rem;
}

#custom-base-color {
	width: 4rem;
	height: 4rem;
	border: none;
	border-radius: 1.2rem;
	cursor: pointer;
	background: none;
}

/* =================================
   SCREEN 2: PAINT & STYLE (Enhanced existing styles)
   ================================= */

/* Hide paint screen UI elements on other screens */
body[data-screen="base-color"] #screen-paint .floating-toolbar,
body[data-screen="base-color"] #screen-paint .floating-layers-panel,
body[data-screen="base-color"] #screen-paint .floating-brush-panel,
body[data-screen="base-color"] #screen-paint .floating-sticker-panel,
body[data-screen="base-color"] #screen-paint .floating-minimap-panel,
body[data-screen="base-color"] #screen-paint .undo-redo-panel,
body[data-screen="pose"] #screen-paint .floating-toolbar,
body[data-screen="pose"] #screen-paint .floating-layers-panel,
body[data-screen="pose"] #screen-paint .floating-brush-panel,
body[data-screen="pose"] #screen-paint .floating-sticker-panel,
body[data-screen="pose"] #screen-paint .floating-minimap-panel,
body[data-screen="pose"] #screen-paint .undo-redo-panel {
	opacity: 0;
	pointer-events: none;
}

/* Show paint screen UI elements only on paint screen */
body[data-screen="paint"] #screen-paint .floating-toolbar,
body[data-screen="paint"] #screen-paint .floating-layers-panel,
body[data-screen="paint"] #screen-paint .floating-brush-panel,
body[data-screen="paint"] #screen-paint .floating-sticker-panel,
body[data-screen="paint"] #screen-paint .floating-minimap-panel,
body[data-screen="paint"] #screen-paint .undo-redo-panel {
	opacity: 1;
	pointer-events: all;
}

/* =================================
   SCREEN 3: POSE & ENVIRONMENT
   ================================= */

.pose-toolbar {
	position: fixed;
	top: 50%;
	left: var(--spacing-lg);
	transform: translateY(-50%) translateZ(0);
	z-index: 101;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	-webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.1);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	width: 16rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	will-change: transform, opacity;
}

.toolbar-section {
	text-align: left;
}

.toolbar-section h3 {
	font-size: 1rem;
	margin-bottom: 0.75rem;
	color: var(--text-secondary);
	border-bottom: 1px solid #000000;
	padding-bottom: 0.5rem;
}

.pose-options,
.hdri-options,
.camera-options {
	display: flex;
	gap: 0.5rem;
	flex-direction: row;
	flex-wrap: wrap;
}

.pose-btn,
.hdri-btn,
.camera-btn {
	width: 6rem;
	height: 6rem;
	background: #ffffff;
	/* border: 1px solid var(--glass-border); */
	border-radius: var(--border-radius-small);
	color: #000000;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	font-weight: 500;
	/* box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); */
	gap: 0.375rem;
	padding: 0.5rem;
	font-family: "Bitcount Grid Double", "Sixtyfour Convergence";
	border: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pose-btn:hover,
.hdri-btn:hover,
.camera-btn:hover {
	/* background: var(--glass-border-hover); */
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.pose-btn.active,
.hdri-btn.active,
.camera-btn.active {
	background: var(--primary-color);
	border-color: var(--primary-hover);
	box-shadow: 0 6px 20px var(--primary-glow);
	color: white;
	font-weight: 700;
}

.pose-icon,
.camera-icon {
	font-size: 1.75rem;
	margin-bottom: 0.375rem;
}

.hdri-preview {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	margin-bottom: 0.375rem;
	border: 2px solid transparent;
}

.hdri-btn.active .hdri-preview {
	border-color: white;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.hdri-preview.studio {
	background: linear-gradient(135deg, #ffffff, #d5d5d5);
}

.hdri-preview.outdoor {
	background: linear-gradient(135deg, #87ceeb, #4682b4);
}

.hdri-preview.sunset {
	background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.hdri-preview.forest {
	background: linear-gradient(135deg, #1b5e20, #4caf50);
}

.hdri-preview.beach {
	background: linear-gradient(135deg, #f57f17, #fff176);
}

.hdri-preview.dawn {
	background: linear-gradient(135deg, #e1bee7, #ff80ab);
}

.hdri-preview.cloudy {
	background: linear-gradient(135deg, #90a4ae, #cfd8dc);
}

.hdri-preview.golden-hour {
	background: linear-gradient(135deg, #ffa726, #ff8f00);
}

.hdri-preview.overcast {
	background: linear-gradient(135deg, #78909c, #546e7a);
}

.hdri-preview.dramatic {
	background: linear-gradient(135deg, #424242, #616161);
}

.pose-btn span,
.hdri-btn span,
.camera-btn span {
	font-size: 0.75rem;
	font-weight: 500;
}

/* =================================
   SCREEN TRANSITIONS & ANIMATIONS
   ================================= */

.screen-container {
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

.screen-container.active {
	animation-name: screenFadeIn;
}

.screen-container.hiding {
	animation-name: screenFadeOut;
}

@keyframes screenFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes screenFadeOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-20px);
	}
}

/* Progress step completion animation */
.progress-step.completing {
	animation: completeStep 0.6s ease;
}

@keyframes completeStep {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* Button click feedback */
.btn-primary:active,
.btn-secondary:active,
.btn-finish:active {
	transform: scale(0.98);
}

/* Color selection animation */
.color-option.selecting {
	animation: selectColor 0.3s ease;
}

@keyframes selectColor {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1.15);
	}
}