:root {
--color-bg: #020204;
--color-bg-soft: #08090d;
--color-panel: rgba(12, 14, 20, 0.86);
--color-panel-border: rgba(255, 255, 255, 0.18);

--color-text: #f3f5f7;
--color-muted: #9ca3af;
--color-subtle: #6b7280;

--color-accent: #ffffff;
--color-green: #0f8f3a;
--color-green-hover: #18b653;
--color-red: #b91c1c;
--color-red-hover: #dc2626;

--radius-xl: 28px;
--radius-lg: 18px;
--radius-md: 10px;
--radius-sm: 6px;

--shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.55);
--font-main: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
box-sizing: border-box;
}

html {
min-height: 100%;
background: #020204;
}

body {
min-height: 100vh;
margin: 0;
font-family: var(--font-main);
color: var(--color-text);
background:
	radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.18), transparent 28%),
	radial-gradient(circle at 85% 20%, rgba(100, 116, 139, 0.16), transparent 32%),
	linear-gradient(135deg, #030305 0%, #090a0f 45%, #020204 100%);
overflow-x: hidden;
	scroll-behavior: smooth;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0.13;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 42px 42px;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

.hidden {
	display: none !important;
}

*
{
	color: var(--color-text);
}