:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #14213d;
  --muted: #5f6b7a;
  --accent: #2563eb;
  --border: #d9e1ec;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #e6efff, var(--bg));
}
.wrap { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0; }
.hero { text-align: center; margin-bottom: 28px; }
.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); margin: 0 0 12px; }
.hero p:last-child { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 1.1rem; line-height: 1.5; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 20px 50px rgba(20, 33, 61, .08); }
.app { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 28px; }
.controls label { display: block; font-weight: 700; margin: 14px 0 6px; }
input, textarea, select {
  width: 100%; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px;
  font: inherit; background: #fff; color: var(--text);
}
textarea { resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
button {
  width: 100%; margin-top: 18px; padding: 14px 18px; border: 0; border-radius: 14px;
  background: var(--accent); color: white; font-weight: 800; font-size: 1rem; cursor: pointer;
}
button:hover { filter: brightness(.95); }
.preview { display: grid; place-items: center; align-content: center; text-align: center; background: #f8fbff; border-radius: 20px; padding: 24px; }
.qrbox { width: min(100%, 360px); min-height: 360px; display: grid; place-items: center; background: white; border-radius: 18px; padding: 20px; border: 1px dashed var(--border); }
.qrbox canvas { max-width: 100%; height: auto !important; }
.preview p, .status, .info p { color: var(--muted); }
.hidden { display: none; }
.info { margin-top: 24px; padding: 24px; }
.info h2 { margin-top: 0; }
.privacy .info h2 { margin-top: 28px; }
.privacy .info h2:first-child { margin-top: 0; }
.siteFooter {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 32px;
  display: flex;
  gap: 18px;
  justify-content: center;
  color: var(--muted);
}
.siteFooter a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.siteFooter a:hover { text-decoration: underline; }
@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .qrbox { min-height: 260px; }
}