:root{--primary-color: #007bff;--primary-color-dark: #0056b3;--background-light: #f4f7f9;--background-white: #ffffff;--text-color: #333;--border-color: #ccc;--grid-color: #e9e9e9;--shadow-color: rgba(0, 0, 0, .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--background-light);color:var(--text-color);margin:0;padding:20px}#root{display:flex;justify-content:center}main{background-color:var(--background-white);padding:20px 40px;border-radius:8px;box-shadow:0 4px 12px var(--shadow-color);width:100%;max-width:900px}h1,h2{text-align:center;color:var(--primary-color)}.form-group{margin-bottom:15px}label{display:block;margin-bottom:5px;font-weight:700}select{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;font-size:16px;background-color:#fff}#status,#graphs-status{text-align:center;margin-top:20px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;min-height:30px}#graphs-container{margin-top:30px;display:flex;flex-direction:column;gap:20px}.chart-wrapper{position:relative;padding:20px;border:1px solid var(--grid-color);border-radius:8px;background-color:#fff;box-shadow:0 2px 6px #0000000d}.chart-wrapper h3{text-align:center;margin-top:0;margin-bottom:15px;color:#555;font-size:1em;font-weight:500}.chart-wrapper canvas{height:350px!important}.chart-wrapper.chart-wrapper-small canvas{height:120px!important}.hidden{display:none}.spinner{border:4px solid rgba(0,0,0,.1);width:24px;height:24px;border-radius:50%;border-left-color:var(--primary-color);animation:spin 1s ease infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#sparkline-container-wrapper{margin-top:20px;border:1px solid var(--grid-color);border-radius:8px;padding:15px}#sparkline-container-wrapper h4{margin:0 0 15px;text-align:center;font-weight:700;color:#555}#sparkline-container{display:flex;justify-content:space-around;align-items:flex-end;gap:10px}.sparkline-item{flex:1;text-align:center;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s;padding:5px;border-radius:4px}.sparkline-item:hover{transform:scale(1.05);background-color:#f0f0f0}.sparkline-item canvas{height:40px!important;width:100%!important}.sparkline-item label{font-size:.8em;color:#666;display:block;margin-bottom:5px}#accumulated-traffic-container{text-align:center;margin-bottom:15px;padding:10px;background-color:var(--background-light);border-radius:5px;font-size:1.1em;color:var(--text-color);font-weight:500}.chart-container-with-controls{position:relative;width:100%;height:100%}.reset-zoom-btn{position:absolute;top:5px;right:10px;padding:6px 12px;background-color:var(--primary-color);color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:12px;font-weight:700;opacity:.8;transition:opacity .2s ease-in-out,transform .2s ease-in-out;z-index:10}.reset-zoom-btn:hover{opacity:1;transform:scale(1.05)}