:root{
	/* Dark theme */
	--bg: #071021; /* solid dark background */
	--card: #0b1522;
	--muted: #9aa4b2;
	--text: #e6eef6;
	--accent: #00a86b; /* MongoDB SpringGreen */
	--row-hover: rgba(255,255,255,0.02);
	--glass: rgba(255,255,255,0.03);
	--table-border: rgba(255,255,255,0.06);
}

:root.light{
	/* Light theme */
	--bg: #f6faf8;
	--card: #ffffff;
	--muted: #4b5563;
	--text: #042023;
	--accent: #00a86b;
	--row-hover: rgba(2,6,23,0.04);
	--glass: rgba(11,18,32,0.02);
	--table-border: rgba(2,6,23,0.06);
}

*{box-sizing:border-box}
body{
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
	margin:28px;
	color:var(--text);
	background-color:var(--bg); /* solid background for better contrast */
}
main{max-width:1200px;margin:0 auto}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:44px;height:44px;object-fit:contain;border-radius:8px}
h1{margin:0;font-size:20px;font-weight:700;color:var(--text)}
.header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#theme-toggle{background:transparent;border:1px solid var(--table-border);padding:6px 10px;border-radius:12px;cursor:pointer;font-size:16px;color:var(--text);backdrop-filter: blur(4px)}

.controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.controls label{font-size:13px;color:var(--muted)}
.controls select,input{margin-left:6px;padding:8px 10px;border-radius:12px;border:1px solid var(--table-border);background:var(--card);color:var(--text)}
button#clear{padding:8px 10px;border-radius:12px;border:1px solid var(--table-border);background:var(--glass);color:var(--text)}
.status{margin:8px 0;color:var(--muted)}
.table-wrap{overflow:auto;border-radius:12px;background:var(--card);box-shadow:0 8px 24px rgba(2,6,23,0.35);border:1px solid var(--table-border)}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:12px 14px;border-bottom:1px solid var(--table-border);text-align:left}
th{background:transparent;font-weight:700;color:var(--muted);font-size:13px}
/* Sort indicator styles */
th.sorted{background:linear-gradient(90deg, rgba(0,168,107,0.06), transparent);color:var(--text);}
th.sorted::after{content:'';display:inline-block;margin-left:8px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--muted);vertical-align:middle}
th.sorted.asc::after{border-top-color:var(--muted);transform:rotate(180deg);margin-top:-2px}
th.sorted.desc::after{border-top-color:var(--muted);}
tbody tr:hover{background:var(--row-hover)}
a{color:var(--accent);text-decoration:none}

/* accent for index */
td.index-cell{font-weight:700;color:var(--accent)}

@media (max-width:900px){.controls{flex-direction:column;align-items:stretch}th,td{font-size:13px;padding:8px}}

/* Admonition / callout */
.admonition{border-left:4px solid var(--accent);background:linear-gradient(90deg, rgba(0,0,0,0.02), transparent);padding:12px 16px;border-radius:8px;margin:12px 0;color:var(--text)}
.admonition h3{margin:0 0 6px 0;font-size:15px}
.admonition p{margin:0 0 6px 0;color:var(--muted)}
.admonition .weights{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.admonition .weights .item{background:var(--glass);padding:6px 10px;border-radius:999px;font-size:13px;color:var(--text);border:1px solid var(--table-border)}