.uplot,.uplot *,.uplot *:before,.uplot *:after{box-sizing:border-box}.uplot{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5;width:min-content}.u-title{text-align:center;font-size:18px;font-weight:700}.u-wrap{position:relative;-webkit-user-select:none;user-select:none}.u-over,.u-under{position:absolute}.u-under{overflow:hidden}.uplot canvas{display:block;position:relative;width:100%;height:100%}.u-axis{position:absolute}.u-legend{font-size:14px;margin:auto;text-align:center}.u-inline{display:block}.u-inline *{display:inline-block}.u-inline tr{margin-right:16px}.u-legend th{font-weight:600}.u-legend th>*{vertical-align:middle;display:inline-block}.u-legend .u-marker{width:1em;height:1em;margin-right:4px;background-clip:padding-box!important}.u-inline.u-live th:after{content:":";vertical-align:middle}.u-inline:not(.u-live) .u-value{display:none}.u-series>*{padding:4px}.u-series th{cursor:pointer}.u-legend .u-off>*{opacity:.3}.u-select{background:#00000012;position:absolute;pointer-events:none}.u-cursor-x,.u-cursor-y{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}.u-hz .u-cursor-x,.u-vt .u-cursor-y{height:100%;border-right:1px dashed #607D8B}.u-hz .u-cursor-y,.u-vt .u-cursor-x{width:100%;border-bottom:1px dashed #607D8B}.u-cursor-pt{position:absolute;top:0;left:0;border-radius:50%;border:0 solid;pointer-events:none;will-change:transform;background-clip:padding-box!important}.u-axis.u-off,.u-select.u-off,.u-cursor-x.u-off,.u-cursor-y.u-off,.u-cursor-pt.u-off{display:none}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:400px;background:#fff;overflow-y:auto;box-shadow:2px 0 10px #0000001a;transition:transform .3s ease;z-index:1000}.sidebar-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center}.sidebar-header h1{font-size:1.5em;margin-bottom:5px}.sidebar-header p{opacity:.9;font-size:.9em}.sidebar-content{padding:20px}.section{margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #e0e0e0}.section:last-child{border-bottom:none}.section h2{color:#667eea;margin-bottom:15px;font-size:1.2em}.main-content{flex:1;overflow-y:auto;padding:20px}.live-view-container{max-width:1200px;margin:0 auto}.live-card{background:#fff;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 4px 20px #0000001a}.live-card h2{color:#667eea;margin-bottom:20px;font-size:1.4em}.hamburger{display:none;position:fixed;top:20px;left:20px;z-index:1001;background:#fff;border:none;padding:12px;border-radius:8px;cursor:pointer;box-shadow:0 2px 10px #0003}.hamburger span{display:block;width:25px;height:3px;background:#667eea;margin:5px 0;border-radius:2px;transition:.3s}.form-group{margin-bottom:15px}label{display:block;margin-bottom:5px;color:#333;font-weight:500;font-size:.9em}select,input{width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:6px;font-size:14px;transition:border-color .2s}select:focus,input:focus{outline:none;border-color:#667eea}button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:transform .2s,box-shadow .2s;width:100%;margin-top:5px}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #667eea66}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:#6c757d}.status{display:inline-block;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:15px}.status.disconnected{background:#ffe0e0;color:#c92a2a}.status.connected{background:#d3f9d8;color:#2b8a3e}.position-bars{display:flex;justify-content:space-around;align-items:flex-end;height:300px;padding:20px;background:#f8f9fa;border-radius:8px;margin-bottom:20px;margin-top:40px}.bar-container{display:flex;flex-direction:column;align-items:center;width:100px}.bar-label{font-weight:600;margin-bottom:10px;margin-top:15px;color:#495057}.bar-wrapper{position:relative;width:60px;height:250px;background:#e9ecef;border-radius:8px;overflow:hidden;border:2px solid #dee2e6}.bar{position:absolute;bottom:0;width:100%;background:linear-gradient(180deg,#667eea,#764ba2);transition:height .1s linear;border-radius:6px 6px 0 0}.range-line{position:absolute;left:-5px;right:-5px;height:2px;border-top:2px dashed #ff6b6b;opacity:0;transition:opacity .3s;pointer-events:none}.range-line.visible{opacity:.8}.range-line.min{border-color:#ff6b6b}.range-line.max{border-color:#51cf66}.range-band{position:absolute;left:0;right:0;opacity:0;transition:opacity .3s;pointer-events:none}.range-band.visible{opacity:.15}.range-band.min{background-color:#ff6b6b}.range-band.max{background-color:#51cf66}.bar-value{margin-top:10px;font-size:.9em;color:#495057}#loadGraphContainer{background:#f8f9fa;border-radius:8px;margin-bottom:20px;padding:15px}.uplot{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.u-legend{font-size:13px}.u-series:hover{cursor:pointer}.time-range-selector{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap;align-items:center}.time-range-selector button{width:auto;padding:8px 16px;font-size:13px;margin:0;flex:0 0 auto}.time-range-selector button.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea66}.time-range-selector button:not(.active){background:#fff;color:#667eea;border:2px solid #667eea}.time-range-selector .export-btn{margin-left:auto;background:#2b8a3e}.time-range-selector .export-btn:hover{box-shadow:0 5px 20px #2b8a3e66}.data-retention-note{font-size:.75em;color:#6c757d;margin-top:-10px;margin-bottom:10px;font-style:italic}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}.stat-card{background:#f8f9fa;padding:15px;border-radius:8px;border-left:4px solid #667eea}.stat-label{font-size:.85em;color:#6c757d;margin-bottom:5px}.stat-value{font-size:1.8em;font-weight:700;color:#212529}.stat-unit{font-size:.6em;color:#6c757d;font-weight:400}#log{background:#1e1e1e;color:#0f0;padding:15px;border-radius:8px;font-family:Courier New,monospace;font-size:12px;max-height:300px;overflow-y:auto}.log-line{margin:2px 0}.log-error{color:#ff6b6b}.log-success{color:#51cf66}.log-info{color:#74c0fc}.hidden{display:none}.history-item{background:#fff;padding:12px 15px;border-radius:6px;border-left:4px solid #667eea;font-size:.9em}.history-item-title{font-weight:600;color:#212529;margin-bottom:3px}.history-item-details{color:#6c757d;font-size:.95em;margin-bottom:8px}.view-graph-btn{background:linear-gradient(135deg,#51cf66,#37b24d);color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.85em;font-weight:600;transition:transform .2s,box-shadow .2s;width:100%;margin-top:8px}.view-graph-btn:hover{transform:translateY(-1px);box-shadow:0 3px 12px #51cf6666}.view-graph-btn:active{transform:translateY(0)}@media(min-width:1280px){#graphHistoryContainer{grid-template-columns:2fr 1fr!important}}@media(max-width:768px){.sidebar{position:fixed;left:0;top:0;height:100vh;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.hamburger{display:block}.main-content{width:100%}.position-bars{height:200px}.bar-wrapper{height:150px;width:40px}.stats-grid{grid-template-columns:1fr}}.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999}.overlay.show{display:block}