body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f0f2f5}.App{max-width:1200px;margin:0 auto;padding:20px}header{background-color:#1a73e8;color:#fff;padding:20px;text-align:center;border-radius:8px 8px 0 0}h1{margin:0}main{background-color:#fff;border-radius:0 0 8px 8px;padding:20px;box-shadow:0 2px 10px #0000001a}.filters{display:flex;justify-content:space-between;margin-bottom:20px}.filters div{display:flex;flex-direction:column}.filters label{margin-bottom:5px;font-weight:700}.filters select,.filters input{padding:8px;border:1px solid #ccc;border-radius:4px}.charts{display:flex;justify-content:space-between;margin-bottom:20px;overflow:auto}.chart{background-color:#f9f9f9;border-radius:8px;padding:15px;box-shadow:0 2px 5px #0000001a;flex:1;margin-right:10px;min-width:45%}.chart:last-child{margin-right:0}.chart h2{margin-top:0;color:#333}.data-list{background-color:#f9f9f9;border-radius:8px;padding:15px;box-shadow:0 2px 5px #0000001a}.data-list h2{margin-top:0;color:#333}.list-header{display:flex;font-weight:700;padding:10px 0;border-bottom:2px solid #ddd}.list-header span{flex:1;text-align:center}.row{display:flex;padding:5px 0;border-bottom:1px solid #eee}.row span{flex:1;text-align:center}@media (max-width: 1200px){.App{padding:10px}.charts{flex-direction:column}.chart{margin-bottom:10px}.chart:last-child{margin-bottom:0}}