@charset "utf-8";
:root { 
		--bg-color: #0d1117; 
		--card-bg: #161b22; 
		--border-color: #30363d; 
		--text-main: #c9d1d9; 
		--text-muted: #8b949e; 
		--status-online: #238636; 
		--status-offline: #da3633; 
		--status-warning: #d29922; 
		}

* { 
	box-sizing: border-box; 
	margin: 0px; 
	padding: 0px; 
	}

body { 
	background-color: var(--bg-color); 
	color: var(--text-main); 
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 
	padding: 24px; 
	}

header { 
	margin-bottom: 24px; 
	}

h1 { 
	font-size: 24px; 
	font-weight: 600; 
	text-align: center;
	}

.summary-grid 
	{ 
		display: grid; 
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
		gap: 16px; 
		margin-bottom: 24px; 
	}

.kpi-card 
	{ 
		background-color: var(--card-bg); 
		border: 1px solid var(--border-color); 
		border-radius: 6px; 
		padding: 16px; 
	}

.kpi-label 
	{ 
		color: var(--text-muted); 
		font-size: 14px; 
		margin-bottom: 8px; 
	}

.kpi-value 
	{ 
		font-size: 28px; 
		font-weight: 600; 
	}

.main-content 
	{ 
		display: grid; 
		grid-template-columns: 2fr 1fr; 
		gap: 16px; 
	}


@media (max-width: 900px) 
	{ .main-content 
		{ grid-template-columns: 1fr; }
	}

.panel 
	{ 
		background-color: var(--card-bg); 
		border: 1px solid var(--border-color); 
		border-radius: 6px; padding: 20px; 
	}

.panel-title 
	{ 
		font-size: 16px; 
		font-weight: 600; 
		margin-bottom: 16px; 
	}

table 
	{ 
		width: 100%; 
		border-collapse: collapse; 
		text-align: left; 
	}

th, td 
	{ 
		padding: 12px; 
		font-size: 14px; 
	}

th 
	{ 
		color: var(--text-muted); 
		font-weight: 500; 
	}

.badge 	{ 
		display: inline-block; 
		padding: 2px 8px; 
		border-radius: 12px; 
		font-size: 12px; 
		font-weight: 500; 
	}

.badge-online 
	{ 
		background-color: rgba(35, 134, 54, 0.15); 
		border: 1px solid var(--status-online); 
		color: rgb(46, 160, 67); 
	}

.badge-offline 
	{ 
		background-color: rgba(218, 54, 51, 0.15); 
		color: rgb(248, 81, 73); 
		border: 1px solid var(--status-offline); 
	}

.badge-maintenance 
	{ background-color: rgba(210, 153, 34, 0.15); 
	  color: rgb(210, 153, 34); border: 1px solid var(--status-warning); 
	}

.log-list 
	{ 
		list-style: none; 
	}

.log-item 
	{ 
		padding: 10px 0px; 
		border-bottom: 1px solid var(--border-color); 
		font-size: 13px; 
	}

.log-item:last-child 
	{ 
		border-bottom-width: medium; 
		border-bottom-style: none; 
		border-bottom-color: currentcolor; 
	}

.log-time 
	{ 
		color: var(--text-muted); 
		margin-right: 8px; 
		font-family: monospace; 
	}

.terminal-row 
	{ 
		padding: 10px; 
		margin: 5px 0;  
		font-family: monospace; 
	}