*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.container{display:flex;flex-direction:column;height:100%}header{background:#2c3e50;color:#fff;padding:1rem;display:flex;justify-content:space-between;align-items:center}header h1{font-size:1.5rem}.refresh-btn{background:#3498db;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:1rem}.refresh-btn:hover{background:#2980b9}.refresh-btn:disabled{background:#95a5a6;cursor:not-allowed}.map-container{flex:1;width:100%;position:relative;display:flex;flex-direction:column}#map{flex:1;width:100%}.legend{position:absolute;bottom:30px;right:10px;background:#fff;padding:1rem;border-radius:8px;box-shadow:0 2px 10px #0003;z-index:1000}.legend h3{margin-bottom:.5rem;font-size:.9rem}.legend-item{display:flex;align-items:center;gap:.5rem;margin:.3rem 0;font-size:.8rem}.legend-color{width:30px;height:4px;border-radius:2px}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 10px #0003;z-index:1000}.error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#e74c3c;color:#fff;padding:2rem;border-radius:8px;z-index:1000}.stats{background:#34495e;color:#fff;padding:.5rem 1rem;font-size:.85rem}.filters{background:#ecf0f1;padding:.75rem 1rem;display:flex;gap:1.5rem;flex-wrap:wrap}.filter-group{display:flex;align-items:center;gap:.5rem}.filter-group label{font-size:.9rem;font-weight:500;color:#2c3e50}.filter-group select{padding:.4rem .6rem;border:1px solid #bdc3c7;border-radius:4px;font-size:.9rem;background:#fff;cursor:pointer}.filter-group select:focus{outline:none;border-color:#3498db}.offenders-panel{position:absolute;top:160px;left:10px;background:#fff;padding:1rem;border-radius:8px;box-shadow:0 2px 10px #0003;z-index:1000;max-width:320px;max-height:calc(100vh - 200px);overflow-y:auto}.offenders-panel h3{margin-bottom:.75rem;font-size:1rem;color:#c0392b;border-bottom:2px solid #e74c3c;padding-bottom:.5rem}.offenders-panel ul{list-style:none}.offender-item{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem;margin:.25rem 0;background:#ffeaea;border-radius:4px;cursor:pointer;transition:background .2s}.offender-item:hover{background:#fcc}.offender-rank{font-weight:700;color:#c0392b;min-width:28px}.offender-name{flex:1;font-size:.85rem;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.offender-stats{font-size:.8rem;color:#7f8c8d;width:100%;text-align:right}.offender-stats strong{color:#c0392b}.popup-content{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.popup-content strong{font-size:1.1em;display:block;margin-bottom:8px;color:#2c3e50}.popup-table{width:100%;border-collapse:collapse;font-size:.85em}.popup-table td{padding:3px 6px;border-bottom:1px solid #ecf0f1}.popup-table td:first-child{color:#7f8c8d;width:40%}.popup-table td:last-child{text-align:right;color:#2c3e50}.tabs{display:flex;background:#34495e}.tab{flex:1;padding:.75rem 1rem;border:none;background:transparent;color:#bdc3c7;font-size:.95rem;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent}.tab:hover{background:#ffffff1a;color:#fff}.tab.active{color:#fff;border-bottom-color:#3498db;background:#ffffff0d}.worst-roads-container{flex:1;overflow-y:auto;background:#f5f6fa;padding:1.5rem}.worst-roads-list{max-width:900px;margin:0 auto;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:1.5rem}.worst-roads-list h2{color:#2c3e50;margin-bottom:.5rem}.worst-roads-desc{color:#7f8c8d;font-size:.9rem;margin-bottom:1.5rem}.no-data{color:#95a5a6;text-align:center;padding:2rem;font-style:italic}.worst-roads-table{width:100%;border-collapse:collapse}.worst-roads-table th,.worst-roads-table td{padding:.75rem;text-align:left;border-bottom:1px solid #ecf0f1}.worst-roads-table th{background:#f8f9fa;color:#2c3e50;font-weight:600;font-size:.85rem;text-transform:uppercase}.worst-roads-table tbody tr:hover{background:#f8f9fa}.worst-roads-table .rank{font-weight:700;color:#c0392b;width:40px}.worst-roads-table .road-name{font-weight:500;color:#2c3e50}.worst-roads-table .count{font-weight:700;color:#e74c3c}.worst-roads-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.worst-roads-header h2{margin-bottom:0}.clickable-row{cursor:pointer;transition:background .2s,transform .1s}.clickable-row:hover{background:#e8f4fc!important;transform:translate(2px)}.clickable-row:active{background:#d5e9f7!important}.selected-road{display:inline-flex;align-items:center;gap:.5rem;background:#9b59b6;color:#fff;padding:.3rem .6rem;border-radius:4px;font-size:.8rem;margin-left:1rem}.selected-road button{background:#fff3;border:none;color:#fff;padding:.1rem .4rem;border-radius:3px;cursor:pointer;font-size:.75rem}.selected-road button:hover{background:#ffffff4d}.stats-with-controls{display:flex;justify-content:space-between;align-items:center}.period-selector{display:flex;gap:.25rem;background:#0003;padding:.2rem;border-radius:6px}.period-selector button{background:transparent;border:none;color:#bdc3c7;padding:.3rem .75rem;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.period-selector button:hover{background:#ffffff1a;color:#fff}.period-selector button.active{background:#3498db;color:#fff}.worst-roads-filters{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.worst-roads-filters .period-selector{background:#ecf0f1}.worst-roads-filters .period-selector button{color:#7f8c8d}.worst-roads-filters .period-selector button:hover{background:#0000001a;color:#2c3e50}.worst-roads-filters .period-selector button.active{background:#3498db;color:#fff}@media (max-width: 768px){header{padding:.75rem;flex-wrap:wrap;gap:.5rem}header h1{font-size:1.1rem;flex:1}.refresh-btn{padding:.4rem .8rem;font-size:.9rem}.tabs{flex-wrap:nowrap;overflow-x:auto}.tab{padding:.6rem .5rem;font-size:.85rem;white-space:nowrap}.filters{padding:.5rem;gap:.75rem}.filter-group{flex:1 1 auto}.filter-group label{font-size:.8rem}.filter-group select{padding:.3rem .4rem;font-size:.85rem;max-width:120px}.stats{padding:.4rem .75rem;font-size:.8rem}.stats-with-controls{flex-direction:column;gap:.5rem;align-items:stretch}.period-selector{justify-content:center}.period-selector button{padding:.25rem .5rem;font-size:.8rem}.offenders-panel{top:auto;bottom:10px;left:10px;right:10px;max-width:none;max-height:35vh;font-size:.9rem}.offenders-panel h3{font-size:.9rem}.offender-item{padding:.4rem}.offender-name{font-size:.8rem}.offender-stats{font-size:.75rem}.legend{bottom:auto;top:10px;right:10px;padding:.5rem;font-size:.75rem}.legend h3{font-size:.8rem;margin-bottom:.3rem}.legend-item{font-size:.7rem;margin:.2rem 0}.worst-roads-container{padding:.75rem}.worst-roads-list{padding:1rem}.worst-roads-list h2{font-size:1.1rem}.worst-roads-header{flex-direction:column;align-items:stretch}.worst-roads-filters{flex-direction:column;gap:.5rem}.worst-roads-filters .period-selector{justify-content:center}.worst-roads-table{font-size:.8rem}.worst-roads-table th,.worst-roads-table td{padding:.5rem .3rem}.worst-roads-table .road-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup-content{font-size:.85rem}.popup-table{font-size:.8rem}}@media (max-width: 480px){header h1{font-size:1rem}.tab{padding:.5rem .4rem;font-size:.75rem}.worst-roads-table th:nth-child(5),.worst-roads-table td:nth-child(5),.worst-roads-table th:nth-child(6),.worst-roads-table td:nth-child(6){display:none}.offenders-panel{max-height:30vh}.period-selector button{padding:.2rem .4rem;font-size:.75rem}}