: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); }
  
    
    label { display:block; margin:10px 0 6px; color:#ddd; }
    input, textarea {
      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 1fr; 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; }
    button.copy { margin-left: 8px; background:#2bdc7f; width:auto; }

.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;
}


.credit-info {
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.4;
}

.credit-info strong {
  color: #4CBB17;
}


#status {
  white-space: pre-line;
}