#system-monitor {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 1000;
	font-family: "Fira Sans", system-ui, sans-serif;
}

#system-monitor .monitor-toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text-2);
	box-shadow: var(--shadow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s, color 0.15s;
}

#system-monitor .monitor-toggle:hover {
	border-color: var(--accent);
	color: var(--accent);
}

#system-monitor .monitor-toggle i { font-size: 1.1rem; }

#system-monitor .monitor-panel {
	position: absolute;
	right: 0;
	bottom: 50px;
	width: 290px;
	padding: 14px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	box-shadow: var(--shadow);
	display: none;
}

#system-monitor.open .monitor-panel { display: block; }

#system-monitor .monitor-title {
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-2);
	margin-bottom: 10px;
}

#system-monitor .monitor-row {
	font-size: 0.8rem;
	line-height: 1.5;
	margin-bottom: 6px;
	color: var(--text-2);
}

#system-monitor .monitor-row strong { color: var(--text); }

#system-monitor .monitor-errors {
	color: var(--red);
	max-height: 80px;
	overflow: auto;
}

@media (max-width: 640px) {
	#system-monitor { right: 10px; bottom: 10px; }
	#system-monitor .monitor-panel { width: 250px; }
}