:root { color-scheme: light dark; }
body { font-family: system-ui, Arial, sans-serif; margin: 20px; line-height: 1.45; }
h1 { margin: 0 0 12px; }
.card { border: 1px solid #e3e3e3; border-radius: 10px; padding: 16px; max-width: 720px; }
label { display: block; font-size: 14px; margin: 10px 0 6px; }
input[type="number"], input[type="text"], input[type="tel"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; }
button { padding: 10px 14px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; font-weight: 600; }
button.secondary { background: #6b7280; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1; min-width: 200px; }
.muted { color: #666; font-size: 13px; }
#qr { display: grid; place-items: center; padding: 12px; }
#qr canvas, #qr img { width: 240px; height: 240px; }
.copy { font-size: 12px; margin-left: 8px; background: #f3f4f6; color: #111; border: 1px solid #ddd; }
.alert { margin-top: 10px; padding: 10px; border-radius: 8px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }