:root { color-scheme: dark; }
body {
  margin: 0; font-family: system-ui, Segoe UI, Arial, sans-serif;
  background: #0b0b0f; color: #f3f3f3;
}
header {
  padding: 18px 16px; border-bottom: 1px solid #222;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
}
header a { color:#f3f3f3; text-decoration:none; opacity:.9; }
header a:hover { opacity:1; text-decoration:underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.meta { opacity: .8; margin: 10px 0 18px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.card {
  border: 1px solid #222; background: #12121a;
  border-radius: 12px; padding: 12px;
  display:grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items:center;
}
.rank {
  width: 56px; height: 56px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background:#1b1b27; font-weight: 800; font-size: 20px;
}
.pic {
  width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
  border: 1px solid #2a2a3a;
}
.name { font-weight: 800; font-size: 18px; }
.sub { opacity: .85; font-size: 13px; margin-top: 2px; }
.reason { opacity: .9; font-size: 14px; margin-top: 6px; line-height: 1.35; }
.badges { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.badge {
  font-size: 12px; padding: 6px 8px; border-radius: 999px;
  border: 1px solid #2a2a3a; background:#0f0f16;
  white-space: nowrap;
}
.controls { display:flex; gap:10px; flex-wrap: wrap; }
select, input {
  background:#0f0f16; color:#f3f3f3; border:1px solid #2a2a3a;
  padding: 8px 10px; border-radius: 10px;
}
.small { font-size: 12px; opacity: .75; }
footer { padding: 18px 16px; border-top:1px solid #222; opacity:.8; }