/* VOID LIQUID GLASS + MoPaint-smooth canvas */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root {
	--void-bg: #02030a; --void-text: #f4f6fb; --void-muted: #9aa6c0; --void-red: #c41e3a;
	--void-blue-glow: #5b9bff; --void-font: "Inter", system-ui, -apple-system, sans-serif;
	--lg-blur: 28px; --lg-radius: 18px; --lg-radius-sm: 12px;
	--lg-spec: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.28);
	--lg-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.12);
	--void-border: rgba(255,255,255,0.12);
}
html, body, .jspaint {
	background: radial-gradient(ellipse at 30% 15%, #0b1530 0%, var(--void-bg) 50%, #000 100%) !important;
	color: var(--void-text) !important; font-family: var(--void-font) !important;
}
* { scrollbar-width: thin; scrollbar-color: #3d5a9a #0a0c14; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #0a0c14; border-radius: 10px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4d7cff, #c41e3a); border-radius: 10px; border: 2px solid #0a0c14; }
.menus, .component-area, .status-area, .menu-popup, .os-window, .tools-component, .colors-component, #void-color-extras {
	background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 42%, rgba(18,28,55,0.38)) !important;
	backdrop-filter: blur(var(--lg-blur)) saturate(160%) !important;
	border: 1px solid var(--void-border) !important;
	box-shadow: var(--lg-shadow), var(--lg-spec), 0 0 40px rgba(26, 79, 255, 0.14) !important;
	border-radius: var(--lg-radius) !important;
}
body::before {
	content: ""; pointer-events: none !important; position: fixed; inset: 0; z-index: 99998; opacity: 0.24;
	background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(40,100,255,0.25) 2px, rgba(40,100,255,0.25) 3px, transparent 3px, transparent 6px, rgba(0,0,0,0.6) 6px, rgba(0,0,0,0.6) 7px);
	animation: void-scan 5.5s linear infinite; mix-blend-mode: screen;
}
body::after {
	content: ""; pointer-events: none !important; position: fixed; inset: 0; z-index: 99997; opacity: 0.55;
	background: radial-gradient(ellipse at 50% -10%, rgba(40,100,255,0.3), transparent 48%), radial-gradient(ellipse at 90% 110%, rgba(196,30,58,0.22), transparent 42%);
}
@keyframes void-scan { 0% { background-position: 0 0; } 100% { background-position: 0 140px; } }
body, .jspaint, .menu-button, .menu-item, .status-area, .status-text, .window-title, .os-window, label, button, input, select, a {
	text-shadow: 0 0 6px rgba(91,155,255,0.55), 0 0 14px rgba(91,155,255,0.25), 0 1px 2px rgba(0,0,0,0.85) !important;
	color: var(--void-text) !important;
}
.tools-component, .component.tools-component {
	display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
	align-items: center !important; height: auto !important; max-height: calc(100vh - 120px) !important;
	width: 58px !important; min-width: 58px !important; overflow-x: hidden !important; overflow-y: auto !important;
	padding: 8px 4px !important; margin: 6px !important;
}
.tools-component .tools, .tools {
	display: flex !important; flex-flow: row wrap !important; justify-content: center !important;
	width: 50px !important; max-width: 50px !important; height: auto !important; overflow: visible !important;
}
.tools .tool {
	position: relative !important; overflow: visible !important; border: 1px solid transparent !important; outline: none !important;
	background: rgba(255,255,255,0.06) !important; margin: 1px !important;
	width: 22px !important; height: 22px !important; border-radius: 8px !important; flex: 0 0 22px !important;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.tools .tool.tool-pressed {
	transform: scale(0.92) !important;
	background: rgba(91, 155, 255, 0.28) !important;
	box-shadow: inset 0 0 0 2px rgba(91, 155, 255, 0.85) !important;
}
.tools .tool.selected {
	border: 2px solid #ff3d6e !important;
	background: rgba(196, 30, 58, 0.38) !important;
	box-shadow:
		0 0 0 2px rgba(255, 61, 110, 0.5),
		0 0 20px rgba(255, 61, 110, 0.8),
		inset 0 0 12px rgba(255, 61, 110, 0.3) !important;
	z-index: 6 !important;
	transform: scale(1.1) !important;
}
.tools .tool.selected.tool-pressed {
	transform: scale(0.96) !important;
}
.tools .tool::before, .tools .tool::after { display: none !important; content: none !important; }
.tools-component .tool-options, .tool-options {
	display: flex !important; flex-direction: column !important; position: relative !important;
	margin: 8px 0 4px 0 !important; width: 44px !important; height: 70px !important; padding: 4px !important; order: 99 !important;
	border-radius: 12px !important; border: 1px solid rgba(91,155,255,0.35) !important;
	background: rgba(10, 14, 28, 0.65) !important;
}
.menus { margin: 6px !important; padding: 4px 8px !important; display: flex; gap: 4px; }
.menu-button { min-height: 30px; padding: 4px 12px !important; cursor: pointer; touch-action: manipulation; border-radius: 999px !important; background: rgba(255,255,255,0.06) !important; }
.menu-popup { padding: 8px !important; z-index: 100000 !important; border-radius: 16px !important; }
.menu-item { padding: 8px 12px !important; border-radius: 10px !important; }
.colors-component { padding: 10px !important; margin: 6px !important; }
.color-button { width: 18px !important; height: 18px !important; border-radius: 6px !important; }
.canvas-area {
	background: #1a1e28 !important; border-radius: 16px !important; margin: 6px !important; overflow: hidden !important;
	box-shadow: inset 0 0 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(91,155,255,0.15) !important;
}
.os-window { border-radius: 16px !important; overflow: hidden !important; }
.os-window .window-titlebar {
	background: linear-gradient(90deg, rgba(196,30,58,0.35), rgba(26,79,255,0.3)) !important; border-radius: 0 !important;
}
.os-window button { border-radius: 999px !important; padding: 6px 14px !important; }
input, select, textarea { background: rgba(0,0,0,0.4) !important; border-radius: 10px !important; color: var(--void-text) !important; }
/* MoPaint-style SMOOTH canvas (not pixel-crisp) */
.main-canvas,
.canvas-area canvas,
.selection > canvas,
.helper-layer > canvas,
canvas {
	image-rendering: auto !important;
	image-rendering: high-quality !important;
	image-rendering: smooth !important;
	-ms-interpolation-mode: bicubic !important;
}
.canvas-area.disable-aa-for-things-at-main-canvas-scale .main-canvas,
.disable-aa-for-things-at-main-canvas-scale canvas {
	image-rendering: auto !important;
	image-rendering: high-quality !important;
}
.main-canvas {
	box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) !important;
}
.inset-deep, .status-area, .component-area, .window-content { border-radius: 14px !important; }
.inset-deep {
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 8px 24px rgba(0,0,0,0.35) !important;
	border: none !important;
}
.tools .tool:nth-child(n+17) {
	box-shadow: 0 0 8px rgba(91,155,255,0.35) !important;
	border: 1px solid rgba(91,155,255,0.35) !important;
}
.tools .tool:nth-child(n+17).selected {
	border: 2px solid #ff3d6e !important;
	box-shadow: 0 0 0 2px rgba(255, 61, 110, 0.5), 0 0 20px rgba(255, 61, 110, 0.8) !important;
}
#void-palette-load, #void-history-open {
	cursor: pointer; padding: 8px 12px; border-radius: 999px !important;
	background: rgba(91,155,255,0.15) !important; border: 1px solid rgba(91,155,255,0.45) !important;
	color: #fff !important; font-weight: 600;
}
@media (pointer: coarse) {
	.tools .tool { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
	.tools-component { width: 70px !important; min-width: 70px !important; }
}