:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --bg: #0f1216;
  --text: #e8edf2;
  --muted: #8a97a6;
  --bnb: #f0b90b;
  --tron: #e4002b;
  --ok: #3fd9a0;
  --err: #ff6b6b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wrap { width: 100%; max-width: 420px; text-align: center; }

.title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.sub { margin: 0 0 28px; color: var(--muted); font-size: 14px; }

.buttons { display: grid; gap: 14px; }

.btn {
  border: 0;
  border-radius: 14px;
  padding: 18px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  min-height: 58px;
  color: #111;
  transition: transform .18s var(--ease), filter .2s var(--ease);
}
.btn:active { transform: scale(.97); filter: brightness(1.05); }
.btn--bnb { background: var(--bnb); }
.btn--tron { background: var(--tron); color: #fff; }

.status {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.5;
  min-height: 20px;
  color: var(--muted);
  word-break: break-all;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.status.show { opacity: 1; transform: none; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }