body {
	font-family: Arial, sans-serif;
	padding: 30px;
	background: var(--bg);
	color: var(--fg);
	transition: 0.3s;
}

:root {
	--bg: #f5f5f5;
	--fg: #000;
	--card-bg: #fff;
}

.dark {
	--bg: #1e1e1e;
	--fg: #eee;
	--card-bg: #2c2c2c;
}

h1 { margin-bottom: 20px; }

button {
	display: block;
	width: 250px;
	padding: 12px;
	margin: 10px 0;
	font-size: 16px;
	cursor: pointer;
}

#output {
	margin-top: 30px;
	padding: 20px;
	background: var(--card-bg);
	border-radius: 8px;
	min-height: 100px;
	border: 1px solid #ccc;
	white-space: pre-wrap;
}

#theme-box {
	margin-bottom: 20px;
	padding: 10px;
	background: var(--card-bg);
	border-radius: 8px;
	width: 150px;
	border: 1px solid #ccc;
}

/* Health grid */
#health-grid {
	display: grid;
	grid-template-columns: repeat(3, 200px);
	gap: 15px;
	margin-bottom: 25px;
}

.health-item {
	background: var(--card-bg);
	padding: 12px;
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #ccc;
	position: relative;
}

.dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: gray;
	border: 2px solid #0003;
}

/* Tooltip */
.health-item:hover::after {
	content: attr(data-tip);
	position: absolute;
	bottom: -35px;
	left: 0;
	background: #000;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0.9;
}

/* System status */
#system-box {
	background: var(--card-bg);
	padding: 15px;
	border-radius: 8px;
	width: 300px;
	border: 1px solid #ccc;
	margin-bottom: 20px;
}