:root {
	--bg: #0a0a0a;
	--panel: #121212;
	--panel2: #1e1e1e;
	--ink: #c9c9c9;
	--muted: #7a7a7a;
	--line: #232323;
	--blue: #3b82f6;
	--green: #22c55e;
	--accent: #3b82f6;
	--danger: #f87171;
}

*, *::before { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--ink);
	line-height: 1.65;
}

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

.wrap { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }

.topbar {
	position: sticky; top: 0; z-index: 10;
	background: rgba(10, 10, 10, 0.92);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(6px);
}
.bar-in { display: flex; align-items: center; gap: 1.25rem; height: 56px; }
.logo {
	font-weight: 800; font-size: 1.25rem; letter-spacing: 0.03em;
	background: linear-gradient(90deg, var(--blue), var(--green));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar nav { margin-left: auto; display: flex; gap: 1rem; }
.topbar nav a { color: var(--muted); }
.topbar nav a:hover { color: var(--ink); }

.btn {
	display: inline-block; padding: 0.45rem 1rem;
	border: 1px solid var(--line); border-radius: 10px;
	color: var(--ink); background: var(--panel);
	transition: 0.15s;
}
.btn:hover { border-color: var(--muted); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-accent:hover { filter: brightness(1.1); }
.btn-big { padding: 0.7rem 1.5rem; font-size: 1.05rem; }