body { font-family: sans-serif; margin: 0; padding: 15px; background: #f4f7f6; color: #333; }
nav { background: #004a99; padding: 10px; margin: -15px -15px 20px -15px; text-align: center; }
nav a { color: white; text-decoration: none; margin: 0 10px; font-weight: bold; }
form, .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }
input, select, button { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
button { background: #28a745; color: white; border: none; cursor: pointer; font-weight: bold; }
button.edit { background: #ffc107; color: #212529; width: auto; padding: 5px 10px; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
img { max-width: 100px; border-radius: 4px; }
#reader { border: 2px solid #004a99; border-radius: 8px; overflow: hidden; }

/* Wymuszenie proporcji 1:1 dla obrazka QR */
.qr-code, #qr_img {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain; /* Gwarantuje, że obrazek nie zostanie rozciągnięty */
    display: block;
    margin: 0 auto;
}