:root {
   --primary-color: #25D366;
   --background: #f0f2f5;
   --text-color: #3d3d3d;
}



h1 {
   color: var(--text-color);
   margin-bottom: 1.5rem;
   text-align: center;
}

.form-group {
   margin-bottom: 1.5rem;
}

label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
}

input, textarea {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #ddd;
   border-radius: 6px;
   font-size: 1rem;
   transition: border-color 0.3s ease;
}

input:focus, textarea:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2);
}

button:hover {
   filter: brightness(0.95);
}

.result-container {
   margin-top: 1.5rem;
   position: relative;
}

.copy-button {
   position: absolute;
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
   padding: 0.25rem 0.75rem;
   font-size: 0.875rem;
   width: auto;
}

.qr-code {
   text-align: center;
   margin-top: 1rem;
}

.error-message {
   color: #ff4444;
   font-size: 0.875rem;
   margin-top: 0.5rem;
   display: none;
}

.instructions {
   margin-top: 1.5rem;
   font-size: 0.875rem;
   color: #666;
   line-height: 1.5;
}