:root {
  color-scheme: dark;
  --ink: #f7f8ff;
  --muted: #99a4bf;
  --panel: rgba(13, 17, 35, 0.82);
  --line: rgba(151, 164, 202, 0.17);
  --violet: #8b5cf6;
  --violet-bright: #a78bfa;
  --cyan: #39d8ff;
  --green: #5ee5a4;
  --danger: #ff7b91;
  --warning: #f4c76b;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #050712; }
body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 50% -15%, rgba(83, 64, 180, 0.22), transparent 42%),
    linear-gradient(180deg, #070a17 0%, #050712 55%, #03050d 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.site-shell { min-height: 100vh; overflow: hidden; position: relative; }
.page-wrap { width: min(1060px, calc(100% - 36px)); margin: 0 auto; position: relative; z-index: 2; }
.ambient { position: fixed; pointer-events: none; filter: blur(8px); opacity: .7; }
.ambient-one { width: 420px; height: 420px; right: -170px; top: 18%; background: radial-gradient(circle, rgba(94, 75, 212, .22), transparent 68%); }
.ambient-two { width: 360px; height: 360px; left: -170px; bottom: 0; background: radial-gradient(circle, rgba(18, 155, 191, .14), transparent 68%); }

.brand-bar { height: 112px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.coin-mark {
  width: 49px; height: 49px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(118, 218, 255, .42);
  background: linear-gradient(145deg, #8b5cf6, #312e81 52%, #0e7490);
  box-shadow: inset 0 0 18px rgba(255,255,255,.14), 0 0 30px rgba(112, 70, 232, .34);
  font-size: 22px; font-weight: 900; letter-spacing: -.05em;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: .16em; }
.brand small { margin-top: 4px; color: #7d8aa8; font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.network-pill { display: inline-flex; align-items: center; gap: 9px; color: #8e99b5; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.network-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.hero-copy { padding: 68px 0 40px; text-align: center; }
.eyebrow, .step-label { margin: 0; color: #8e9ab8; font-size: 10px; font-weight: 850; letter-spacing: .19em; }
.eyebrow span { display: inline-block; width: 25px; height: 1px; margin: 0 10px 3px 0; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
h1 { margin: 20px auto 17px; font-size: clamp(38px, 6.3vw, 65px); line-height: 1.01; letter-spacing: -.047em; }
h1 em { color: #aeb8d5; font-style: normal; font-weight: 500; }
.lead { width: min(690px, 100%); margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.75; }

.verify-card {
  width: min(830px, 100%); margin: 0 auto; padding: 34px;
  border: 1px solid var(--line); border-radius: 24px;
  background: linear-gradient(145deg, rgba(17, 21, 43, .91), rgba(8, 12, 27, .9));
  box-shadow: 0 28px 90px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(16px);
}
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.card-heading h2 { margin: 8px 0 0; font-size: 23px; letter-spacing: -.025em; }
.expiry { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(94,229,164,.2); border-radius: 999px; color: var(--green); background: rgba(94,229,164,.07); font-size: 11px; font-weight: 750; }
.expiry.expired { color: var(--danger); border-color: rgba(255,123,145,.25); background: rgba(255,123,145,.07); }
.wallet-target { margin-top: 25px; padding: 17px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4, 7, 18, .56); }
.wallet-orb { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: var(--cyan); background: rgba(57,216,255,.09); font-size: 19px; }
.wallet-target div:nth-child(2) { flex: 1; min-width: 0; }
.wallet-target span, .wallet-target strong { display: block; }
.wallet-target span { margin-bottom: 4px; color: #7f8ba8; font-size: 10px; }
.wallet-target strong { font: 700 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .025em; }
.copy-mini { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: #aeb8d2; background: rgba(255,255,255,.03); cursor: pointer; font-size: 11px; }
.progress-track { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 24px 0 18px; }
.progress-track span { height: 3px; border-radius: 99px; background: #252b40; }
.progress-track span.active { background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 12px rgba(82,128,255,.28); }
.status-message { min-height: 43px; display: flex; align-items: center; padding: 11px 13px; border-radius: 10px; color: #9da9c6; background: rgba(255,255,255,.025); font-size: 12px; line-height: 1.5; }
.status-message.success { color: #a8f3cc; background: rgba(94,229,164,.07); }
.status-message.danger { color: #ffb2c0; background: rgba(255,123,145,.075); }
.action-row { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.primary-button {
  min-height: 49px; padding: 0 18px; border: 1px solid rgba(173,145,255,.42); border-radius: 11px;
  color: white; background: linear-gradient(135deg, #7357db, #5a36c8); cursor: pointer;
  box-shadow: 0 10px 28px rgba(91,54,200,.24); font-size: 13px; font-weight: 800;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.primary-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.primary-button:focus-visible, summary:focus-visible, .copy-mini:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.primary-button:disabled { cursor: not-allowed; opacity: .38; box-shadow: none; }
.sign-button { background: linear-gradient(135deg, #087f9b, #5b36c8); }
.signature-panel { margin-top: 24px; padding: 22px; border: 1px solid rgba(94,229,164,.22); border-radius: 15px; background: rgba(94,229,164,.055); }
.signature-panel[hidden] { display: none; }
.success-badge { float: left; width: 38px; height: 38px; margin-right: 13px; display: grid; place-items: center; border-radius: 50%; color: #04150d; background: var(--green); font-weight: 950; }
.signature-copy h3 { margin: 5px 0 5px; font-size: 18px; }
.signature-copy p:not(.step-label) { margin: 0; color: #9eabc6; font-size: 12px; line-height: 1.6; }
.signature-panel textarea { width: 100%; height: 82px; margin: 18px 0 11px; padding: 12px; resize: none; border: 1px solid var(--line); border-radius: 10px; color: #dce4ff; background: #050817; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.signature-panel .primary-button { width: 100%; }
.challenge-details { margin-top: 23px; border-top: 1px solid var(--line); }
.challenge-details summary { padding: 19px 1px 0; color: #98a4bf; cursor: pointer; font-size: 12px; font-weight: 720; }
.challenge-details pre { overflow-x: auto; margin: 15px 0 0; padding: 15px; border-radius: 10px; color: #aab5d0; background: #050817; font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.security-grid > div { padding: 14px; display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.security-icon { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: rgba(94,229,164,.08); font-size: 11px; }
.security-grid p { margin: 0; color: #7885a2; font-size: 10px; line-height: 1.5; }
.security-grid strong { display: block; margin-bottom: 2px; color: #b9c2da; font-size: 11px; }
.compact-card { margin-top: 110px; text-align: center; padding: 55px 34px; }
.compact-card h1 { font-size: clamp(34px, 5vw, 50px); }
.error-icon { width: 52px; height: 52px; margin: 0 auto 18px; display: grid; place-items: center; border: 1px solid rgba(244,199,107,.3); border-radius: 50%; color: var(--warning); background: rgba(244,199,107,.07); font-size: 21px; font-weight: 900; }
.notice { width: min(590px, 100%); margin: 25px auto 0; padding: 15px; border-radius: 11px; color: #d7bf8c; background: rgba(244,199,107,.07); font-size: 12px; line-height: 1.6; }
.notice code { color: #fff0c8; }
footer { display: flex; justify-content: center; gap: 9px; padding: 34px 0 42px; color: #59637b; font-size: 10px; letter-spacing: .06em; }
.loading-card { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; color: #dce4ff; font: 600 14px/1.5 ui-sans-serif, system-ui, sans-serif; }

@media (max-width: 700px) {
  .page-wrap { width: min(100% - 22px, 1060px); }
  .brand-bar { height: 90px; }
  .network-pill { display: none; }
  .hero-copy { padding: 48px 5px 32px; }
  h1 { font-size: clamp(37px, 11vw, 52px); }
  .lead { font-size: 14px; }
  .verify-card { padding: 22px 16px; border-radius: 18px; }
  .card-heading { align-items: center; }
  .card-heading h2 { font-size: 19px; }
  .expiry { padding: 7px 9px; }
  .action-row, .security-grid { grid-template-columns: 1fr; }
  .wallet-target { padding: 14px; }
  .wallet-target strong { font-size: 12px; }
  .compact-card { margin-top: 60px; padding: 45px 20px; }
  footer { flex-wrap: wrap; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}