/* Base Theme */
:root {
  --primary: #D81B60;
  --bg: #F7F9FA;
  --card: #FFFFFF;
  --text: #0F172A;
  --muted: #90A4AE;
  --border: #E6EBF0;
  --success: #43A047;
  --warn: #FFC107;
  --error: #E53935;
  --info: #1E88E5;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.4;
}

/* Header */
.site-header { text-align: center; padding: 32px 16px 8px; }
.brand { font-weight: 700; letter-spacing: .2px; }
.tagline { color: var(--muted); margin-top: 6px; font-size: 0.95rem; }

/* Layout */
.container { max-width: 760px; width: fit-content; margin: 0 auto; padding: 8px 16px 48px; }
.center { display: flex; justify-content: center; }
.card {
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.stack { display: grid; gap: 14px; place-items: center; width: 100%; }
.stack-sm { display: flex; flex-direction: column; width: 72%; gap: 8px; }

/* Forms */
.label { font-size: 0.95rem; color: var(--text); text-align: center; }
.input { width: 100%; max-width: 520px; margin-inline: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #FFF; font-size: 1rem; }
.input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent); border-color: var(--primary); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.input-row { gap: 8px; align-items: center; width: 100%; max-width: 520px; margin: 0 auto; }
.btns { display: flex; gap: 8px;}
/* Buttons */
.btn { flex: 1; border: 1px solid transparent; border-radius: 12px; padding: 12px 16px; cursor: pointer; font-weight: 600; }
#btnCreate {width: 72%}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 10px rgba(216,27,96,0.25); text-align: center; text-decoration: none;}
.btn-primary:hover { filter: brightness(1.03); }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: #fafbfc; }
.stack .btn-primary { justify-self: center; }

/* Feedback Cards */
.feedback { display: grid; gap: 8px; justify-items: center; }
.msg { width: 100%; max-width: 560px; padding: 12px 14px; border-radius: 12px; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; border: 1px solid var(--border); }
.msg .ico { font-size: 18px; text-align: center; }
.msg.info { background: #E8F3FF; color: #0D47A1; }
.msg.warn { background: #FFF8E1; color: #7A5C00; }
.msg.success { background: #E8F5E9; color: #1B5E20; }
.msg.error { background: #FDECEA; color: #B71C1C; }

/* Result */
.result { width: 100%; display: grid; gap: 12px; justify-items: center; }
.result.hidden { display: none; }
.qr-card { margin-top: 12px; padding: 16px; background: #FFF; border: 1px solid var(--border); border-radius: 14px; display: grid; gap: 12px; justify-items: center; }
.qr-title { color: var(--muted); font-size: 0.95rem; }
canvas#qrCanvas { image-rendering: pixelated; border-radius: 10px; border: 1px solid var(--border); }

/* Footer */
.footnote { max-width: 560px; margin: 20px auto 0; color: var(--muted); text-align: center; font-size: 0.95rem; }

/* Responsive */
@media (max-width: 520px){
  .input-row { grid-template-columns: 1fr; }
}