:root {
	--bg: #f7f8fa;
	--surface: #ffffff;
	--surface-2: #eef4f1;
	--text: #13201f;
	--muted: #65716d;
	--border: #dce4e1;
	--accent: #0a8f7a;
	--accent-dark: #076858;
	--danger: #b42318;
	--warning: #b76e00;
	--ok: #147a3d;
	--shadow: 0 16px 40px rgba(18, 32, 31, 0.08);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

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

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

.app-shell {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	min-height: 100vh;
}

.sidebar {
	background: #ffffff;
	border-right: 1px solid var(--border);
	color: var(--text);
	display: flex;
	flex-direction: column;
	padding: 24px 18px;
}

.brand {
	align-items: center;
	display: flex;
	font-size: 20px;
	font-weight: 800;
	gap: 10px;
	margin-bottom: 34px;
}

.brand-mark {
	align-items: center;
	background: #dff8f2;
	border-radius: 8px;
	color: var(--accent-dark);
	display: inline-flex;
	font-size: 12px;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.nav {
	display: grid;
	gap: 8px;
}

.nav a {
	border-radius: 8px;
	color: #33413d;
	font-weight: 650;
	padding: 11px 12px;
}

.nav a:hover {
	background: var(--surface-2);
	color: var(--accent-dark);
}

.sidebar-foot {
	align-items: center;
	color: var(--muted);
	display: flex;
	font-size: 13px;
	gap: 8px;
	margin-top: auto;
}

.status-dot {
	background: #49d49e;
	border-radius: 99px;
	height: 8px;
	width: 8px;
}

.main {
	padding: 28px;
}

.topbar {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin-bottom: 22px;
}

.topbar h1 {
	font-size: 28px;
	line-height: 1.1;
	margin: 2px 0 0;
}

.eyeline {
	color: var(--accent-dark);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0;
	text-transform: uppercase;
}

.topbar-actions {
	align-items: center;
	display: flex;
	gap: 12px;
}

.account,
.muted {
	color: var(--muted);
	font-size: 13px;
}

.messages {
	display: grid;
	gap: 8px;
	margin-bottom: 16px;
}

.message {
	background: #e8f7f1;
	border: 1px solid #bfe9da;
	border-radius: 8px;
	margin: 0;
	padding: 10px 12px;
}

.message.error {
	background: #fff0ee;
	border-color: #ffd3ce;
}

.metric-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 16px;
}

.split {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-bottom: 16px;
}

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: var(--shadow);
	min-width: 0;
	padding: 18px;
}

.wide {
	min-width: 0;
}

.panel h2 {
	font-size: 16px;
	margin: 0 0 14px;
}

.panel-head {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.panel-head h2 {
	margin: 0;
}

.label {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.panel strong {
	display: block;
	font-size: 24px;
	line-height: 1.1;
	margin-bottom: 6px;
}

.meter {
	background: #e8eeee;
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.meter span {
	background: var(--accent);
	display: block;
	height: 100%;
}

.button {
	align-items: center;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 8px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 750;
	justify-content: center;
	min-height: 38px;
	padding: 8px 13px;
}

.button:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

.button.ghost {
	background: #ffffff;
	border-color: var(--border);
	color: var(--text);
}

.button.danger {
	background: #fff5f3;
	border-color: #ffd2cc;
	color: var(--danger);
}

.button.small {
	font-size: 13px;
	min-height: 32px;
	padding: 6px 10px;
}

.inline-action {
	color: var(--accent-dark);
	font-size: 13px;
	font-weight: 800;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-bottom: 1px solid var(--border);
	padding: 11px 10px;
	text-align: left;
	vertical-align: middle;
}

th {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

td {
	font-size: 14px;
}

.empty {
	color: var(--muted);
	font-size: 14px;
}

.empty-block {
	align-items: center;
	display: flex;
	min-height: 260px;
}

.chip {
	background: #eef3f1;
	border-radius: 999px;
	color: #4d5b57;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	padding: 4px 8px;
}

.chip.ok,
.chip.online,
.chip.active {
	background: #e3f6ec;
	color: var(--ok);
}

.chip.danger,
.chip.banned,
.chip.offline {
	background: #fff0ee;
	color: var(--danger);
}

.chip.degraded,
.chip.suspended,
.chip.maintenance {
	background: #fff4df;
	color: var(--warning);
}

.node-list,
.event-list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.node-list li,
.event-list li {
	align-items: center;
	border-bottom: 1px solid var(--border);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 0;
}

.node-list small,
.event-list span {
	color: var(--muted);
	display: block;
	font-size: 12px;
	margin-top: 2px;
}

.stack {
	display: grid;
	gap: 12px;
}

.stack p,
.node-form p {
	display: grid;
	gap: 6px;
	margin: 0;
}

.node-form {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.node-form button {
	align-self: end;
}

.invite-form {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invite-form p:last-of-type,
.invite-form button {
	grid-column: 1 / -1;
}

.table-actions {
	align-items: center;
	display: flex;
	gap: 8px;
}

.copy-field {
	font-size: 12px;
	min-width: 260px;
}

.event-list strong {
	font-size: 14px;
	margin-bottom: 2px;
}

label {
	color: var(--text);
	font-size: 13px;
	font-weight: 750;
}

input,
select,
textarea {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	min-height: 38px;
	padding: 8px 10px;
	width: 100%;
}

textarea {
	resize: vertical;
}

.helptext {
	color: var(--muted);
	font-size: 12px;
}

.errorlist {
	color: var(--danger);
	font-size: 13px;
	margin: 0;
	padding-left: 18px;
}

.config {
	background: #10211f;
	border-radius: 8px;
	color: #e5fff8;
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	overflow: auto;
	padding: 14px;
	white-space: pre-wrap;
}

.qr-placeholder {
	align-items: center;
	aspect-ratio: 1 / 1;
	background:
		linear-gradient(90deg, #10211f 12px, transparent 12px) 0 0 / 28px 28px,
		linear-gradient(#10211f 12px, transparent 12px) 0 0 / 28px 28px,
		#ffffff;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: transparent;
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
	max-width: 180px;
}

.actions,
.inline-form {
	align-items: center;
	display: flex;
	gap: 8px;
}

.inline-form input {
	min-width: 160px;
}

.auth-panel {
	display: grid;
	margin: 8vh auto 0;
	max-width: 520px;
}

.prose {
	max-width: 820px;
}

.prose p {
	color: #3f4d49;
	margin: 0 0 14px;
}

.qr-panel {
	max-width: 520px;
}

.qr svg {
	background: #ffffff;
	max-width: 100%;
}

@media (max-width: 980px) {
	.app-shell {
		grid-template-columns: 1fr;
	}

	.sidebar {
		position: static;
	}

	.metric-grid,
	.split,
	.node-form {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.main {
		padding: 18px;
	}

	.topbar,
	.topbar-actions,
	.actions,
	.inline-form {
		align-items: stretch;
		flex-direction: column;
	}

	table {
		display: block;
		overflow-x: auto;
	}
}