.qr-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 80% 10%, rgba(241, 208, 121, .22), transparent 26rem),
    linear-gradient(135deg, #f6efdf, #e7f0e9);
}

.qr-shell {
  width: min(1040px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 70px;
  padding: 50px 0;
}

.qr-copy h1 {
  font-family: "Songti SC", "STSong", serif;
  color: var(--green-950);
  font-size: clamp(52px, 7vw, 82px);
  line-height: 1.08;
  margin: 0 0 24px;
  letter-spacing: -.05em;
}
.qr-copy > p { color: var(--muted); font-size: 17px; line-height: 1.8; max-width: 550px; }
.qr-copy label { display: grid; gap: 9px; margin-top: 34px; }
.qr-copy label span { color: #52675d; font-size: 13px; font-weight: 700; }
.qr-copy input { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 14px; padding: 15px 16px; color: var(--ink); outline: none; }
.qr-copy input:focus { border-color: var(--green-800); box-shadow: 0 0 0 4px rgba(20,84,64,.08); }
.qr-actions { display: flex; gap: 10px; margin-top: 15px; }
.network-tip { font-size: 12px !important; color: #86928c !important; }

.qr-card {
  position: relative;
  overflow: hidden;
  background: var(--green-900);
  color: white;
  border-radius: 34px;
  min-height: 560px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 80px rgba(6,40,31,.24);
}
.qr-card::after { content: "月"; position: absolute; right: -12px; bottom: -65px; font: 700 220px "Songti SC", serif; color: rgba(255,255,255,.05); }
.qr-brand { position: absolute; left: 30px; top: 24px; z-index: 2; display: flex; align-items: center; gap: 13px; }
.qr-brand img { width: 128px; height: auto; }
.qr-brand span { padding-left: 13px; border-left: 1px solid rgba(255,255,255,.24); color: var(--gold-light); font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.qr-card .qr-code-image { width: min(290px, 76vw); aspect-ratio: 1; border-radius: 22px; background: var(--paper); padding: 12px; position: relative; z-index: 1; }
.qr-card strong { margin-top: 22px; font-size: 16px; }
.qr-card .text-button { color: var(--gold-light); margin-top: 9px; position: relative; z-index: 1; }
.qr-moon { position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -55px; top: -55px; background: rgba(242,216,144,.16); box-shadow: 0 0 60px rgba(242,216,144,.14); }

@media (max-width: 760px) {
  .qr-shell { width: min(100% - 28px, 1040px); grid-template-columns: 1fr; gap: 30px; padding: calc(38px + env(safe-area-inset-top)) 0 calc(38px + env(safe-area-inset-bottom)); }
  .qr-copy { text-align: center; }
  .qr-copy h1 { font-size: 52px; }
  .qr-copy > p { margin-left: auto; margin-right: auto; }
  .qr-copy input { min-height: 50px; font-size: 16px; }
  .qr-actions { flex-direction: column; }
  .qr-actions button { min-height: 50px; }
  .qr-card { min-height: 490px; padding: 30px; }
  .qr-brand { left: 24px; top: 22px; }
  .qr-brand img { width: 112px; }
  .qr-brand span { font-size: 11px; }
}