* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg,#003f7f,#00539c); min-height:100vh; padding:20px; }
.dashboard-container { max-width:1400px; margin:0 auto; min-height:calc(100vh - 120px); }
.header { text-align:center; margin-bottom:30px; color:white; }
.header h1 { font-size:2.5rem; margin-bottom:10px; text-shadow:2px 2px 4px rgba(0,0,0,.3); }
.file-upload, .controls, .chart-container, .table-container, .stat-card { background:white; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,.1); }
.file-upload { padding:20px; margin-bottom:30px; text-align:center; }
.upload-area { border:2px dashed #003f7f; border-radius:10px; padding:30px; cursor:pointer; transition:.3s; }
.upload-area:hover { border-color:#00539c; background:#f8f9ff; }
#fileInput { display:none; }
.controls { padding:20px; margin-bottom:30px; display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.filter-section { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.control-group { display:flex; flex-direction:column; gap:5px; }
.control-group label { font-weight:600; color:#333; font-size:.9rem; }
select { padding:8px 12px; border:2px solid #e1e5e9; border-radius:8px; font-size:.9rem; background:white; }
select:focus { outline:none; border-color:#003f7f; }
.export-btn { background:#003f7f; color:white; border:none; padding:12px 20px; border-radius:8px; cursor:pointer; font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.export-btn:hover { background:#00539c; transform:translateY(-2px); }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); gap:25px; margin-bottom:30px; }
.chart-container { padding:25px; transition:.3s; }
.chart-container:hover { transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,.15); }
.chart-title { font-size:1.3rem; font-weight:600; color:#333; margin-bottom:20px; text-align:center; border-bottom:2px solid #f0f0f0; padding-bottom:10px; }
.chart-wrapper { position:relative; height:300px; }
.table-container { padding:25px; margin-bottom:25px; }
.table-wrapper { overflow-x:auto; max-height:400px; overflow-y:auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { padding:12px; text-align:left; border-bottom:1px solid #e1e5e9; }
th { background:linear-gradient(135deg,#003f7f,#00539c); color:white; position:sticky; top:0; z-index:10; }
tr:nth-child(even){ background:#f8f9ff; } tr:hover{ background:#e8ebff; }
.stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:20px; margin-bottom:30px; }
.stat-card { padding:25px; text-align:center; }
.stat-number { font-size:2.5rem; font-weight:bold; color:#003f7f; margin-bottom:5px; }
.stat-label { font-size:.9rem; color:#666; text-transform:uppercase; letter-spacing:.5px; }
.footer { background:rgba(255,255,255,.1); color:white; text-align:center; padding:20px; margin-top:40px; border-radius:15px; backdrop-filter:blur(10px); }
.footer p { margin:0; font-size:.95rem; opacity:.9; }
.error { color:#e74c3c; background:white; padding:20px; border-radius:10px; margin:20px 0; border-left:4px solid #e74c3c; }
.success { color:#27ae60; background:white; padding:20px; border-radius:10px; margin:20px 0; border-left:4px solid #27ae60; }
@media (max-width:768px){ .dashboard-grid{ grid-template-columns:1fr; } .controls{ flex-direction:column; align-items:stretch;} .header h1{ font-size:2rem;}}