:root {
	--bg: #f3f4f6;
	--surface: #ffffff;
	--text: #111827;
	--text-muted: #6b7280;
	--sidebar-bg: #111827;
	--sidebar-link: #d1d5db;
	--sidebar-hover: #1f2937;
	--border: #d1d5db;
	--table-border: #e5e7eb;
	--button-bg: #111827;
	--button-text: #ffffff;
	--shadow: rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f172a;
		--surface: #1e293b;
		--text: #e2e8f0;
		--text-muted: #94a3b8;
		--sidebar-bg: #020617;
		--sidebar-link: #cbd5e1;
		--sidebar-hover: #1e293b;
		--border: #334155;
		--table-border: #334155;
		--button-bg: #334155;
		--button-text: #f8fafc;
		--shadow: rgba(0, 0, 0, 0.28);
	}
}

body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); }
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: var(--button-text); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.sidebar h2 { font-size: 18px; margin-bottom: 12px; }
.sidebar a { color: var(--sidebar-link); text-decoration: none; padding: 10px; border-radius: 8px; }
.sidebar a:hover { background: var(--sidebar-hover); color: var(--button-text); }
.content { padding: 20px; }
.card { background: var(--surface); color: var(--text); border-radius: 10px; padding: 14px; box-shadow: 0 2px 4px var(--shadow); margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px; }
.metric { font-size: 24px; font-weight: 700; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--table-border); text-align: left; padding: 8px; }
input, button { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); }
input { background: var(--surface); color: var(--text); }
button { background: var(--button-bg); color: var(--button-text); cursor: pointer; }
.row { display: flex; gap: 8px; align-items: center; }
.muted { color: var(--text-muted); font-size: 13px; }
.auth-box { max-width: 420px; margin: 80px auto; }
