body { font-family: 'Arial', sans-serif; background-color: #e9ecef; margin: 0; }
.main-header { background: #1a1a1a; color: #ffd700; padding: 25px; text-align: center; border-bottom: 5px solid #8b0000; }
.tagline { display: block; font-size: 0.8rem; color: #fff; letter-spacing: 3px; margin-top: 10px; }

.container { display: flex; max-width: 1200px; margin: 20px auto; gap: 20px; padding: 20px; }

/* SIDEBAR */
.sidebar { flex: 1; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); height: fit-content; }
.profile-card img { width: 100%; border-radius: 5px; margin-bottom: 10px; }
.side-nav ul { list-style: none; padding: 0; }
.side-nav li a { text-decoration: none; color: #333; display: block; padding: 10px; border-bottom: 1px solid #eee; }
.side-nav li a:hover { background: #f8f9fa; color: #8b0000; }

/* MAIN CONTENT */
.content { flex: 3; background: white; padding: 25px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* 4-IMAGE ROW */
/* 4-IMAGE ROW SETTINGS */
.image-row { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    margin-bottom: 30px; 
}

.img-box { 
    height: 200px; /* Set a consistent height for all boxes */
    background-color: #000; /* Adds a black background if the photo is a different shape */
    border: 2px solid #333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.img-box img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; /* THIS IS THE KEY: it shows the whole image */
}

/* FORM STYLES */
.form-group { margin-bottom: 15px; text-align: left; }
label { display: block; font-weight: bold; margin-bottom: 5px; }
input, textarea, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.btn-submit { background: #1a1a1a; color: #ffd700; padding: 12px 25px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%; }
.btn-submit:hover { background: #333; }

/* RESPONSE LIST */
.response-item { background: #f1f1f1; padding: 15px; border-left: 5px solid #8b0000; margin-bottom: 10px; text-align: left; }
hr { margin: 40px 0; border: 0; border-top: 1px solid #eee; }

@media (max-width: 768px) { .container { flex-direction: column; } .image-row { grid-template-columns: repeat(2, 1fr); } }