body { font-family: sans-serif; background: #f4f4f4; padding: 40px; }
.container { max-width: 500px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin: auto; }
.field { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, textarea { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
button { background: #ff4500; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; width: 100%; }
.result { margin-top: 30px; text-align: center; }
.result img { border: 1px solid #ddd; padding: 10px; }

/*===To make the preview stand out as a professional UI element:=== */

#live-preview-container {
    background: #fff;
    border: 2px dashed #FF4500;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
}

#qrcode-live img {
    margin: 0 auto;
    display: block;
}