:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8e8ea;
  background: #16171a;
  --panel: #222428;
  --panel2: #292b30;
  --border: #393c43;
  --muted: #9da1aa;
  --accent: #7d5cff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #25262c 0, #16171a 42%); }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  background: rgba(22,23,26,.94); backdrop-filter: blur(12px);
}
.brand { font-weight: 800; letter-spacing: .13em; font-size: 17px; }
.subtitle, .muted, #updated { color: var(--muted); font-size: 12px; margin-top: 3px; }

.network { display: flex; align-items: center; gap: 8px; }
.network label { color: var(--muted); font-size: 12px; }
input, select, button {
  border: 1px solid var(--border); background: var(--panel);
  color: inherit; border-radius: 8px; padding: 9px 11px; font: inherit;
}
button { cursor: pointer; }
button:hover { background: var(--panel2); }
.primary { background: var(--accent); border-color: var(--accent); color: white; }
.network input { width: 130px; }

.status { border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800; }
.status.online { background: #214d35; color: #8df0b0; }
.status.offline { background: #4c2727; color: #ff9c9c; }

main { max-width: 1500px; margin: 0 auto; padding: 20px 24px 50px; }
.toolbar { display: flex; gap: 10px; align-items: center; }
.search { flex: 1; min-width: 180px; }
.stats { display: flex; gap: 20px; color: var(--muted); font-size: 12px; padding: 14px 2px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
}
.card {
  min-height: 150px; padding: 13px; border: 1px solid var(--border);
  border-radius: 10px; background: linear-gradient(145deg, #24262a, #1f2024);
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.card:hover { transform: translateY(-2px); border-color: #5b5e68; }
.icon { height: 64px; display: flex; align-items: center; justify-content: center; }
.icon img { width: 54px; height: 54px; image-rendering: pixelated; object-fit: contain; }
.name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.amount { font-size: 17px; font-weight: 700; margin-top: 12px; }
.craftable { color: #a995ff; font-size: 10px; margin-top: 3px; }

.empty { text-align: center; padding: 60px; color: var(--muted); }

dialog {
  border: 1px solid var(--border); border-radius: 12px; background: #202125;
  color: inherit; padding: 20px; width: min(390px, calc(100vw - 30px));
}
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog h2 { margin: 0 0 5px; }
dialog label { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; }
dialog input { display: block; width: 100%; margin-top: 7px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

@media (max-width: 650px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .network { width: 100%; }
  .network input { flex: 1; }
  .toolbar { flex-wrap: wrap; }
  .search { flex-basis: 100%; }
}