*{margin:0;padding:0;box-sizing:border-box}html{overflow-y:auto;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333;overflow-x:hidden}header{background-color:#2c3e50;color:#fff;padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0000001a;height:60px}h1{font-size:1.25rem;font-weight:600}#connection-status{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:20px;background-color:#ffffff1a}.status{display:flex;align-items:center;gap:.5rem}.status-text{font-size:.9rem;color:#ffffffe6}.last-update{font-size:.85rem;color:#ffffffb3;margin-left:.5rem;display:none}.status-dot{width:10px;height:10px;border-radius:50%;background-color:#e74c3c}.status.connected .status-dot{background-color:#2ecc71;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.dashboard{width:100%;min-height:calc(100vh - 60px);display:grid;grid-template-columns:1fr 500px;gap:1rem;padding:1rem;overflow:auto}.left-panel{display:flex;flex-direction:column;gap:1rem;overflow-y:visible;padding-right:.5rem;min-height:0}section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}h2{font-size:1.1rem;margin-bottom:.75rem;color:#2c3e50}.map-section{display:flex;flex-direction:column;min-height:400px;height:100%;background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a}.map-section h2{margin-bottom:.75rem}#map{flex:1;border-radius:4px;overflow:hidden;width:100%}.info-panel{background:#f8f9fa;padding:1rem;border-radius:4px}.info-panel p{margin-bottom:.5rem;display:flex;justify-content:space-between}.metrics-section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.metric-card{background:#f8f9fa;padding:.6rem;border-radius:6px;border:1px solid #e9ecef;min-width:0}.metric-card h3{font-size:.8rem;margin-bottom:.5rem;color:#495057;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-values{display:flex;flex-direction:column;gap:.4rem}.metric-item{display:flex;justify-content:space-between;align-items:center;padding:.25rem .4rem;background:#fff;border-radius:4px;gap:.25rem}.metric-item .label{font-size:.7rem;color:#6c757d;flex-shrink:0}.metric-item .value{font-size:.85rem;font-weight:600;color:#2c3e50;text-align:right;white-space:nowrap}.charts-section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a;flex:1;display:flex;flex-direction:column;min-height:0}.charts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;flex:1;min-height:0}.chart-container{position:relative;background:#f8f9fa;padding:.5rem;border-radius:6px;border:1px solid #e9ecef;display:flex;flex-direction:column;min-height:120px;max-height:180px}.chart-container canvas{flex:1;width:100%!important;height:100%!important}.driving-info-section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a}.driving-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.info-card{background:#f8f9fa;padding:1rem;border-radius:6px;border:1px solid #e9ecef}.info-card h3{font-size:.9rem;margin-bottom:.75rem;color:#495057}.accelerator-gauge{display:flex;flex-direction:column;gap:.5rem}.gauge-bar{height:30px;background:#e9ecef;border-radius:15px;overflow:hidden;position:relative}.accelerator-gauge .gauge-fill{height:100%;background:linear-gradient(to right,#28a745,#ffc107,#dc3545);transition:width .3s ease;border-radius:15px}.gauge-value{text-align:center;font-size:1.5rem;font-weight:600;color:#2c3e50}.brake-status{display:flex;flex-direction:column;gap:.75rem;align-items:center}.brake-indicator{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600;transition:all .3s ease;border:4px solid}.brake-indicator.off{background:#e9ecef;border-color:#adb5bd;color:#6c757d}.brake-indicator.on{background:#dc3545;border-color:#bd2130;color:#fff;animation:brake-pulse 1s infinite}@keyframes brake-pulse{0%,to{transform:scale(1);box-shadow:0 0 #dc3545b3}50%{transform:scale(1.05);box-shadow:0 0 0 10px #dc354500}}.brake-duration{font-size:.9rem;color:#6c757d}.brake-duration span{font-weight:600;color:#2c3e50}.fuel-section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a}.fuel-container{display:flex;gap:1.5rem;align-items:center}.fuel-gauge{flex:1}.gauge-background{position:relative;height:30px;background:#e9ecef;border-radius:15px;overflow:hidden;margin-bottom:.5rem}.gauge-fill{height:100%;background:linear-gradient(to right,#e74c3c,#f39c12,#2ecc71);transition:width .5s ease;border-radius:20px}.gauge-marks{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 10px;pointer-events:none}.gauge-marks .mark{font-size:.75rem;font-weight:600;color:#333;text-shadow:1px 1px 2px rgba(255,255,255,.8)}.fuel-info{display:flex;gap:1.5rem;align-items:center;justify-content:center}.fuel-remaining,.fuel-percent,.fuel-consumption{font-size:.9rem;color:#495057;margin:0}.fuel-remaining{font-weight:600;color:#2c3e50}.refuel-controls{background:#f8f9fa;padding:.75rem;border-radius:8px;text-align:center;min-width:200px}.refuel-controls h3{font-size:.9rem;margin-bottom:.5rem;color:#495057}.refuel-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.75rem}.refuel-btn{padding:.6rem .8rem;font-size:.9rem;font-weight:600;background:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease}.refuel-btn:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.refuel-btn:active{transform:translateY(0)}.refuel-btn:disabled{background:#95a5a6;cursor:not-allowed;transform:none}.refuel-btn.reset-btn{background:#27ae60;grid-column:span 3}.refuel-btn.reset-btn:hover{background:#229954}.refuel-btn.custom-btn{background:#9b59b6}.refuel-btn.custom-btn:hover{background:#8e44ad}.refuel-message{font-size:.875rem;margin:0;min-height:20px}.refuel-message.success{color:#27ae60}.refuel-message.error{color:#e74c3c}.refuel-message.warning{color:#f39c12}.fuel-gauge.warning .gauge-fill{background:#f39c12;animation:pulse-warning 2s infinite}.fuel-gauge.critical .gauge-fill{background:#e74c3c;animation:pulse-critical 1s infinite}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}@keyframes pulse-critical{0%,to{opacity:1}50%{opacity:.5}}.left-panel::-webkit-scrollbar{width:6px}.left-panel::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.left-panel::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.left-panel::-webkit-scrollbar-thumb:hover{background:#555}@media (min-width: 1920px){.dashboard{height:calc(100vh - 60px);overflow:hidden}.left-panel{overflow-y:auto}}@media (max-width: 1600px){.dashboard{grid-template-columns:1fr 400px}}@media (max-width: 1400px){.charts-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 1200px){.dashboard{grid-template-columns:1fr;grid-template-rows:auto;height:auto;min-height:calc(100vh - 60px)}.map-section{min-height:300px;height:400px}.metrics-grid,.charts-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 1366px){.fuel-container{flex-direction:column}}@media (max-width: 1024px){.dashboard{grid-template-columns:1fr;grid-template-rows:auto}.map-section{order:-1;min-height:300px;height:400px}.left-panel{padding-right:0}}@media (max-width: 900px){.charts-grid,.metrics-grid{grid-template-columns:repeat(2,1fr)}.chart-container{min-height:140px;max-height:200px}}@media (max-width: 768px){.dashboard{padding:.5rem;gap:.5rem}.metrics-grid{grid-template-columns:repeat(1,1fr)}.charts-grid{grid-template-columns:repeat(1,1fr);gap:.5rem}.chart-container{min-height:150px;max-height:200px;padding:.3rem}.fuel-container{flex-direction:column}.driving-info-grid{grid-template-columns:repeat(1,1fr)}#map{min-height:250px}.refuel-buttons{grid-template-columns:repeat(2,1fr)}header h1{font-size:1rem}}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-header h2{margin:0}.section-header .reset-btn{background:#7f8c8d;color:#fff;border:none;padding:6px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .3s}.section-header .reset-btn:hover{background:#5f6a6b}.section-header .reset-btn:active{transform:scale(.98)}