:root { --ok:#22c55e; --bad:#ef4444; --muted:#6b7280; --bg:#0b1220; --card:#111827; --text:#e5e7eb; --pill:#1f2937; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; background: var(--bg); color: var(--text); }
header { padding: 16px 20px; border-bottom: 1px solid #1f2937; position: sticky; top:0; background: rgba(11,18,32,0.9); backdrop-filter: blur(6px); }
h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.sub { color: var(--muted); font-size: 13px; }
.wrap { padding: 18px 20px 40px; max-width: 1100px; margin: 0 auto; }
.controls { display:flex; gap:8px; align-items:center; margin: 12px 0 18px; font-size: 13px; color: var(--muted);}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.card { background: var(--card); border: 1px solid #1f2937; border-radius: 14px; padding: 14px; display:flex; flex-direction:column; gap:8px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.app { font-weight: 700; font-size: 15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing:.3px; background: var(--pill); border:1px solid #374151;}
.pill.ok { background: rgba(34,197,94,0.1); color: #86efac; border-color: rgba(34,197,94,0.3); }
.pill.bad { background: rgba(239,68,68,0.08); color: #fca5a5; border-color: rgba(239,68,68,0.3); }
.muted { color: var(--muted); font-size: 12px; }
.kv-list { display: flex; flex-direction: column; gap: 4px; background: #0b1220; border: 1px solid #1f2937; border-radius: 10px; padding: 8px; }
.kv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.kv-key { font-weight: 600; color: #93c5fd; }
.kv-val { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; color: #e5e7eb; word-break: break-word; text-align: right; }
.legend{ display:flex; gap:10px; align-items:center;}
button, select { background:#0b1220; color:var(--text); border:1px solid #1f2937; border-radius:8px; padding:6px 10px; font-size: 13px; }
.count { font-weight:700; }
footer{ margin-top: 18px; color: var(--muted); font-size: 12px; text-align:center;}
/* Sign coloring for profit-ish fields */
.kv-val.pos { color: #86efac; } /* green */
.kv-val.neg { color: #fca5a5; } /* red */

/* Optional: align numbers to the right (already applied), keep monospace */
.kv-val { text-align: right; }

.pill.active {
  outline: 2px solid #fff;
  cursor: pointer;
}
.legend .pill { cursor: pointer; }
.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 18px;
  font-size: 13px;
  color: var(--muted);

  position: sticky;   /* makes it stick */
  top: 50px;          /* adjust offset so it sits below the header */
  background: rgba(11,18,32,0.95); /* same bg as page, slightly opaque */
  backdrop-filter: blur(6px);     /* optional nice effect */
  padding: 8px 10px;
  z-index: 100;       /* make sure it stays above cards */
  border-bottom: 1px solid #1f2937;
}