:root { --bg:#0b0b0b; --fg:#f4f4f4; --muted:#9aa0a6; --accent:#ffd400; }
    body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif; }
    .wrap { max-width:760px; margin:0 auto; padding:24px; }
    h1 { margin:0 0 8px; font-size:28px; }
    p.sub { margin:0 0 18px; color:var(--muted); }
    .card { background:#121212; border:1px solid #222; border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,0.35); }
    label { display:block; margin:10px 0 6px; color:#ddd; }
    input, textarea, select { width:100%; padding:10px 12px; background:#181818; color:var(--fg); border:1px solid #2a2a2a; border-radius:10px; outline:none; }
    input:focus, textarea:focus { border-color:#3d3d3d; }
    .row { display:grid; grid-template-columns: 1fr 2fr; gap:12px; }
    button { width:100%; margin-top:14px; padding:12px 14px; border:0; border-radius:12px; background:var(--accent); color:#000; font-weight:700; cursor:pointer; }
    button[disabled] { opacity:.6; cursor:not-allowed; }
    .muted { color:var(--muted); font-size:14px; }
    .hr { height:1px; background:#222; margin:16px 0; }
    .result { margin-top:16px; display:none; }
    .bolt { word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .qr { display:flex; justify-content:center; padding:12px; }
    a { color:#9ad; }
    .ok { color:#7CFC00; }
    .err { color:#ff6b6b; }
    .pill { display:inline-block; padding:2px 8px; border-radius:999px; background:#1a1a1a; border:1px solid #2a2a2a; font-size:12px; margin-left:6px; }
    button.copy { margin-left: 8px; background:#2bdc7f; }
    .radio-group { border: none; padding: 0; margin: 0; }
    .radio-option { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; color:#ddd; }
.qr {
  display: flex;
  justify-content: center;
  padding: 12px;
}

/* Make whatever is inside the QR area sit on white */
.qr img,
.qr canvas {
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
}


#status.err {
  font-size: 18px;     /* bigger text */
  color: #ff5555;      /* bright red (optional) */
  font-weight: 600;    /* bold (optional) */
}



.live-zap-row {
  margin-top: 4px;
  margin-bottom: 6px;
}

.live-zap-count {
  display: inline-block;
  padding: 2px 6px;
  background: #222;
  border-radius: 4px;
  font-size: 13px;
}

/* ---------------------------------------------------------
   Zap page responsive layout
   --------------------------------------------------------- */

/* Keep grid contents from overflowing their columns. */
.row > * {
  min-width: 0;
}

/* Radio choices sit beside each other and wrap only as complete choices. */
.radio-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}

/* The general input rule is width:100%; radios must stay their natural size. */
.radio-option input[type="radio"] {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* Small utility buttons should not inherit the full-width page-button rule. */
button.copy {
  width: auto;
  margin-top: 0;
}

/* Close button belongs at the lower-right corner. */
#closeBtn {
  display: block;
  width: auto;
  margin: 20px 0 0 auto;
  background-color: #666;
}

@media screen and (max-width: 600px) {
  .wrap {
    padding: 16px 10px;
  }

  .card {
    padding: 14px;
  }

  /* Amount and message become two clean full-width rows on mobile. */
  .amount-message-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .radio-options {
    gap: 8px 14px;
  }
}