body { font-family: sans-serif; margin: 2em; background-color: #f4f4f4; }
#auth-container { text-align: center; padding: 50px; }
#user-info { text-align: right; margin-bottom: 1em; color: #555; }
#notification-bar { padding: 1em; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 5px; margin-bottom: 1em; display: none; text-align: center; }
#camera-container { margin-bottom: 20px; }
#video { width: 100%; max-width: 500px; border: 1px solid #ccc; }
#canvas { display: none; }
#location-container { margin-bottom: 20px; }
.viewport { width: 100%; max-width: 500px; height: 300px; position: relative; overflow: hidden; border: 1px solid #ccc; }
.viewport video, .viewport canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#barcode-result { margin-top: 10px; font-weight: bold; }
#new-product-form-container form { display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
button { padding: 10px 15px; font-size: 1em; cursor: pointer; border-radius: 5px; border: none; background-color: #007bff; color: white; }
button:disabled { background-color: #ccc; }
select, input { padding: 8px; font-size: 1em; border-radius: 5px; border: 1px solid #ccc; }
hr { border: 0; height: 1px; background: #ddd; margin: 2em 0; }