:root { --bg:#0d0d10; --fg:#e8e8ea; --mut:#9a9aa2; --acc:#7aa2f7; --line:#23232a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
header { padding:24px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:22px; } .mut { color:var(--mut); }
main { padding:24px; max-width:1100px; margin:0 auto; }
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#141418; }
.card .big { font-size:34px; font-weight:700; }
input { width:100%; padding:10px 12px; margin-bottom:14px; border-radius:8px;
  border:1px solid var(--line); background:#141418; color:var(--fg); }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { cursor:pointer; color:var(--mut); font-weight:600; position:sticky; top:0; background:var(--bg); }
.owned { color:#9ece6a; } .no { color:var(--mut); }
.pill { font-size:11px; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:1px 7px; }