/* frontend/style.css */
body { font-family: sans-serif; background-color: #f4f7f6; color: #333; display: flex; justify-content: center; padding: 20px; }
.container { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); max-width: 600px; width: 100%; }
h1, h2 { color: #0056b3; }
input[type="file"] { display: block; margin: 15px 0; }
button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px; }
button:hover { background-color: #0056b3; }
.hidden { display: none; }
#results { margin-top: 20px; }
.metrics p { margin: 5px 0; background-color: #e9ecef; padding: 8px; border-radius: 4px; }
#histogram-container img { max-width: 100%; border-radius: 4px; margin-top: 10px; }
#error { color: red; margin-top: 15px; }
.download-btn { display: inline-block; margin-top: 10px; padding: 8px 12px; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px; }
.download-btn:hover { background-color: #218838; }