:root{
	--cell-size:16px;
	/* Force pure black background & darker panels for the pixel editor */
	--bg: #000000;
	--panel: rgba(0,0,0,0.92);
	/* slightly lighter gray panel for header / sidebar */
	--panel-2: rgba(24,24,24,0.96);
	/* slightly darker panel used specifically for the grid (between black and panel-2) */
	--panel-3: rgba(12,12,12,0.98);
	--muted: rgba(255,255,255,0.03);
	--text: var(--container-text, #e6eef8);
	--muted-text: #9aa7bd;
	--accent: var(--accent, #7c3aed);
	--accent-2: var(--accent2, var(--accent-2, #06d6a0));
	--border: rgba(255,255,255,0.04);
}

*{box-sizing:border-box;font-family:Inter,Segoe UI,system-ui,Roboto,Arial,sans-serif}
body{margin:0;background:var(--bg);color:var(--text);}
header{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.04);background:transparent;position:relative;z-index:10}
/* Gradient title with accent glow */
header h1{
 	margin:0;
 	font-size:36px;
	font-weight:700;
	display:inline-block;
	position:relative;
	background: linear-gradient(90deg, var(--accent, #67f3da), var(--accent-2, #06d6a0));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 6px 20px rgba(var(--accent-rgb,103,243,218),0.06);
}
header h1::after{
	content: '';
	position: absolute;
	left: -6px; right: -6px; top: 50%; height: 10px;
	background: linear-gradient(90deg, rgba(var(--accent-rgb,103,243,218),0.14), rgba(255,255,255,0.02));
	transform: translateY(-50%);
	filter: blur(8px);
	opacity: 0.9;
	z-index: -1;
	border-radius: 6px;
}
.container{display:flex;height:calc(100vh - 66px)}
.canvas-area{flex:1;padding:14px;display:flex;flex-direction:column}
.controls-top{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.controls-top label{color:var(--muted-text);font-size:13px}
/* Number control with custom spin buttons */
.num-control{display:inline-flex;align-items:center;gap:6px}
.num-control input[type=number]{-moz-appearance:textfield;appearance:textfield;padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.9);background:transparent;color:var(--text);width:84px}
.num-control .spin{display:flex;flex-direction:column}
.num-control .spin button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:4px 6px;margin:0;cursor:pointer;border-radius:6px;font-size:11px;line-height:0.9}
.num-control .spin button:hover{background:rgba(255,255,255,0.02);border-color:rgba(var(--accent-rgb,103,243,218),0.18)}
.num-control .spin button:active{transform:translateY(1px);filter:brightness(0.95)}
.num-control input[type=number]::-webkit-outer-spin-button,.num-control input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.grid{flex:1;display:grid;align-content:center;justify-content:center;border:1px solid rgba(255,255,255,0.06);background:var(--panel-3);padding:10px;overflow:auto;border-radius:6px}
.grid.show-lines > div{outline:1px solid rgba(255,255,255,0.08)}
.grid > div{width:var(--cell-size);height:var(--cell-size);background:transparent}
.grid, .grid *{
	-webkit-user-drag: none;
	user-select: none;
}
.controls-top button[disabled]{opacity:0.45;cursor:default}
.sidebar{width:260px;border-left:1px solid rgba(255,255,255,0.04);padding:14px;background:transparent;position:relative;overflow:hidden}

/* Make the top control strip feel like a panel too */
.controls-top{background:var(--panel-2);padding:10px;border-radius:8px}

/* Back to Home button in the sidebar (bottom) */
.back-home{
	/* fixed to viewport so it's always visible without scrolling */
	position: fixed;
	right: 18px;
	bottom: 18px;
	display: block;
	width: 220px;
	max-width: calc(40vw);
	text-align: center;
	padding: 10px 12px;
	background: rgba(255,255,255,0.02);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	z-index: 2200;
	box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.back-home:hover{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: var(--text); }
.sidebar h3{margin:6px 0;color:var(--text)}
.tools{display:flex;flex-direction:column;gap:8px}
.tool{
	padding:8px;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.03);
	background:transparent;
	color:var(--text);
	cursor:pointer;
	text-align:left;
	transition: transform 140ms ease, box-shadow 200ms ease, background 160ms ease, border-color 160ms ease;
}
.tool:hover{
	background: linear-gradient(90deg, rgba(var(--accent-rgb,103,243,218),0.06), rgba(255,255,255,0.02));
	transform: translateX(-6px);
	box-shadow: 0 10px 24px rgba(var(--accent-rgb,103,243,218),0.12);
	border-color: rgba(var(--accent-rgb,103,243,218),0.18);
}
.tool:focus{
}
.tool:focus{ outline: none; }
.tool:focus-visible{
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb,103,243,218),0.08);
}
.tool.active{
}
.tool.active{
	background: linear-gradient(90deg,var(--accent),var(--accent-2));
	color:#fff;
	/* keep a 1px border to avoid layout shift/flash — just make it transparent */
	border: 1px solid rgba(255,255,255,0.0);
	transform: translateX(-6px) scale(1.01);
	box-shadow: 0 18px 40px rgba(var(--accent-rgb,103,243,218),0.22), inset 0 -2px 8px rgba(0,0,0,0.12);
	/* colored outline to indicate selection without layout shift (use theme accent)
		 fallback to a bright teal if --accent is not defined */
	outline: 2px solid var(--accent, #67f3da);
	outline-offset: 3px;
}

/* slightly stronger glow for the selected tool outline */
.tool.active::after{
	content: '';
	position: absolute;
	pointer-events: none;
	inset: -6px -6px -6px -6px;
	/* use the theme accent rgb for the glow; fallback is teal */
	box-shadow: 0 6px 26px rgba(var(--accent-rgb,103,243,218),0.22);
	border-radius: 10px;
	mix-blend-mode: screen;
}
.palette{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.swatch{width:32px;height:24px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.6);cursor:pointer;outline:2px solid rgba(255,255,255,0.02)}
#palette .swatch.picker{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff1 0%, #0001 100%);}
.swatch.picker svg{opacity:0.95;filter:drop-shadow(0 1px 0 rgba(0,0,0,0.6));}
#colorPicker{width:100%;height:40px;padding:0;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent}
.controls-top input[type=number]{width:76px;padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.9);background:transparent;color:var(--text)}
button{cursor:pointer;border-radius:8px;padding:8px 10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text)}
.controls-top button:hover{background:rgba(255,255,255,0.03)}
.info{margin-top:14px;font-size:13px;color:var(--muted-text)}

@media (max-width:900px){.sidebar{display:none}.container{flex-direction:column}.canvas-area{height:calc(100vh - 140px)}}

/* Particle canvas placed behind the header */
.particle-canvas{position:fixed;left:0;top:0;width:100%;height:66px;pointer-events:none;z-index:5;mix-blend-mode:screen}

/* Sidebar particle canvas */
.sidebar-particles{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen}
.sidebar{z-index:3}