body { font-family: Arial, sans-serif; background-color: #f4f4f4; }
        .container { max-width: 600px; margin: 50px auto; padding: 20px; background: #fff; border-radius: 8px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
        button { width: 100%; padding: 15px;  margin-top: 15px; border-radius: 4px; cursor: pointer;           font-size: 1.2rem;
            transition: background-color 0.3s ease;   }
        
        button#generateok-btn {
            background-color: #007BFF;
            color: #fff;
            border: none;
            font-size: 1.5rem;
        }

        button#generateok-btn:hover {
            background-color: #0056b3;
        }

        button.transparent {
            background-color: transparent;
            color: #007BFF;
            border: 2px solid #007BFF;
        }

        button.transparent:hover {
            background-color: #007BFF;
            color: #fff;
        }

        header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

.tagline {
    font-size: 1.2em;
    margin: 10px 0;
}
        #qrcode { text-align: center; margin-top: 20px; }
        img { max-width: 100%; }
        .hidden { display: none; }
        .loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 60px; height: 60px; animation: spin 2s linear infinite; margin: 20px auto; }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        footer {  background-color: #333;     color: white;     text-align: center;      padding: 10px 0; }