:root {
  --bg: #0b0d12;
  --card: #14171f;
  --line: #232735;
  --txt: #e7e9ee;
  --dim: #8b90a0;
  --accent: #6c8cff;
  --bad: #ff5d5d;
  --ok: #36d399;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2030, var(--bg));
  color: var(--txt);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.card {
  width: 100%; max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.brand { text-align: center; margin-bottom: 26px; }
.logo {
  display: inline-block; font-size: 30px; color: var(--accent);
  margin-bottom: 6px; transform: rotate(0deg);
}
.brand h1 { font-size: 24px; letter-spacing: .5px; }
.sub { color: var(--dim); font-size: 13px; margin-top: 4px; }

.state { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hidden { display: none; }

.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-ok, .icon-bad {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
}
.icon-ok { background: rgba(54,211,153,.15); color: var(--ok); }
.icon-bad { background: rgba(255,93,93,.15); color: var(--bad); }

.model {
  width: 100%; text-align: center;
  padding: 18px; border-radius: 14px;
  background: linear-gradient(135deg, #1d2540, #161a26);
  border: 1px solid var(--line);
}
.model-name { font-size: 22px; font-weight: 700; }
.model-meta { color: var(--dim); font-size: 13px; margin-top: 6px; }

.rows { width: 100%; }
.row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.row:last-child { border-bottom: 0; }
.row dt { color: var(--dim); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }

#btn-mint {
  width: 100%; padding: 14px; margin-top: 6px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
  transition: filter .15s, opacity .15s;
}
#btn-mint:hover { filter: brightness(1.08); }
#btn-mint:disabled { opacity: .5; cursor: not-allowed; }

.hint { font-size: 13px; min-height: 18px; text-align: center; }
.hint.bad { color: var(--bad); }
.hint.ok { color: var(--ok); }

#tx-link { color: var(--accent); text-decoration: none; word-break: break-all; }
#tx-link:hover { text-decoration: underline; }