@font-face {
  font-family: SpaceGrotesk;
  src: url("/static/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: block;
}

:root {
  --bg: #17212b;
  --fg: #f5f5f5;
  --muted: #8a9aa9;
  --accent: #d2d2d2;
  --accent-fg: #17212b;
  --panel: rgba(255, 255, 255, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

#app { max-width: 480px; margin: 0 auto; display: grid; gap: 20px; }

.preview canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

.input-wrap {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel); border-radius: 14px; padding: 14px 16px;
}
.at { color: var(--muted); font-size: 20px; }
#username {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--fg); font-size: 20px; font-family: SpaceGrotesk, inherit;
}

.rows { display: grid; gap: 2px; }
.row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px; background: var(--panel);
}
.row:first-child { border-radius: 14px 14px 4px 4px; }
.row:last-child { border-radius: 4px 4px 14px 14px; }
.row span { color: var(--muted); }
.row b { font-weight: 600; }

.hint { margin: 0; min-height: 20px; font-size: 14px; color: var(--muted); }
.hint.error { color: #ff6b6b; }

.primary {
  border: 0; border-radius: 14px; padding: 16px;
  background: var(--accent); color: var(--accent-fg);
  font-size: 17px; font-weight: 600; cursor: pointer;
}
.primary:disabled { opacity: .4; cursor: default; }

.status {
  display: grid; gap: 10px; justify-items: center;
  padding: 20px; background: var(--panel); border-radius: 14px;
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--muted); border-top-color: transparent;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.status p { margin: 0; }
.link { color: var(--accent); }

.tabs {
  display: flex; gap: 4px; max-width: 480px; margin: 0 auto 16px;
  background: var(--panel); border-radius: 14px; padding: 4px;
}
.tab {
  flex: 1; border: 0; border-radius: 10px; padding: 10px;
  background: transparent; color: var(--muted);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.tab.active { background: var(--accent); color: var(--accent-fg); }

.nfts { max-width: 480px; margin: 0 auto; display: grid; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card {
  display: grid; gap: 8px; text-decoration: none; color: var(--fg);
  background: var(--panel); border-radius: 14px; padding: 10px;
}
.card img { width: 100%; height: auto; border-radius: 10px; display: block; }
.card span { font-size: 15px; font-weight: 600; }