* { box-sizing: border-box; }
body { font-family: system-ui, Arial, sans-serif; margin: 0; background:#f5f7fa; color:#222; }
header { background:#0d47a1; color:#fff; padding:1rem 1.5rem; }
header h1 { margin:0 0 .25rem; font-size:1.5rem; }
header p { margin:0; font-size:.9rem; opacity:.85; }
#controls { display:flex; flex-direction:column; gap:.5rem; padding:.75rem 1rem; background:#fff; border-bottom:1px solid #d0d7de; }
.control-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.control-row.secondary { font-size:.75rem; }
#controls label { font-size:.75rem; display:flex; align-items:center; gap:.35rem; background:#eef3f8; padding:.35rem .55rem; border-radius:4px; }
#controls button { background:#0d47a1; color:#fff; border:none; padding:.5rem .85rem; border-radius:4px; cursor:pointer; font-size:.75rem; font-weight:500; }
#controls button.warn { background:#b42318; }
#controls button.warn:hover { background:#7f170f; }
#controls button:hover { background:#08326d; }
.grid { display:grid; gap:1rem; padding:1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background:#fff; border:1px solid #d0d7de; border-radius:10px; padding:.75rem .85rem 1rem; display:flex; flex-direction:column; gap:.65rem; box-shadow:0 2px 4px rgba(0,0,0,.06); position:relative; }
.card .meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#555; }
.badge { background:#0d47a1; color:#fff; padding:.25rem .5rem; border-radius:3px; font-size:.65rem; }
pre.json { background:#0f172a; color:#e2e8f0; padding:.6rem .7rem; border-radius:6px; max-height:240px; overflow:auto; font-size:.68rem; line-height:1.2; }
details > summary { cursor:pointer; font-weight:600; }
footer { text-align:center; padding:1rem; font-size:.7rem; color:#666; }
.ip { font-size:.65rem; background:#e0e7ff; padding:.2rem .4rem; border-radius:3px; }

.kv-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.pill { background:#f1f5f9; border:1px solid #d8e0e8; border-radius:999px; padding:.25rem .6rem; font-size:.65rem; display:inline-flex; gap:.35rem; align-items:baseline; max-width:100%; }
.pill strong { font-weight:600; color:#0d47a1; font-size:.65rem; }
.pill span { color:#334155; font-weight:400; }

@media (max-width: 600px) {
	header h1 { font-size:1.15rem; }
	.grid { grid-template-columns: 1fr; padding:.75rem; }
	#controls { padding:.6rem .75rem; }
	#controls button { font-size:.7rem; }
	.hide-xs { display:none; }
}