:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--bg-color: #1a202c;--card-bg-color: #2d3748;--border-color: #4a5568;--text-primary: #f7fafc;--text-secondary: #a0aec0;--accent-color: #4299e1}body{margin:0;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh}#root{max-width:1600px;margin:0 auto;padding:2rem}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}header h1{font-size:2.25em;font-weight:700;color:var(--text-primary);margin:0}.device-selector{display:flex;align-items:center;gap:.75rem}.device-selector label{font-size:1em;font-weight:500;color:var(--text-secondary)}.device-selector select{font-size:1em;background-color:var(--card-bg-color);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;padding:.5rem 1rem;cursor:pointer;transition:border-color .2s}.device-selector select:hover,.device-selector select:focus{border-color:var(--accent-color);outline:none}main{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:1.5rem}.chart-group{background-color:var(--card-bg-color);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .2s ease-in-out}.chart-group:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.chart-group h2{margin-top:0;margin-bottom:1.5rem;font-size:1.25em;font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--border-color);padding-bottom:.75rem}.info-pane,.error-pane{grid-column:1 / -1;text-align:center;padding:3rem;border-radius:8px;font-size:1.2rem;font-weight:500}.info-pane{background-color:var(--card-bg-color);color:var(--text-secondary)}.error-pane{background-color:#4a2222;color:#fed7d7}.recharts-wrapper .recharts-cartesian-grid-horizontal line,.recharts-wrapper .recharts-cartesian-grid-vertical line{stroke:var(--border-color);opacity:.5}.recharts-wrapper .recharts-text,.recharts-wrapper .recharts-legend-item-text{fill:var(--text-secondary)}.recharts-tooltip-wrapper{background:#252e3d!important;border:1px solid var(--border-color)!important;border-radius:6px!important;color:var(--text-primary)}.recharts-tooltip-label{color:var(--text-primary)!important;font-weight:600}.gpu-overview-page{display:flex;flex-direction:column;height:calc(100vh - 12rem);overflow:hidden}.overview-container{flex-grow:1;display:flex;gap:1.5rem;height:100%}.device-group{flex:1;min-width:320px;background-color:var(--card-bg-color);border:1px solid var(--border-color);border-radius:8px;padding:1rem;display:flex;flex-direction:column;min-height:0;transition:opacity .3s}.device-group.offline{opacity:.5}.device-group h2{margin-top:0;padding-bottom:.75rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;flex-shrink:0;font-size:1.2em}.gpu-cards-container{flex-grow:1;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:.5rem;margin-top:.75rem;min-height:0}.gpu-card{background-color:var(--bg-color);border-radius:6px;padding:.5rem;border:1px solid var(--border-color);display:flex;flex-direction:column;justify-content:center;font-size:.9em}.gpu-card h4{margin:0 0 .25rem;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.gpu-stat{display:flex;flex-wrap:wrap;align-items:baseline;font-size:.85em;margin-bottom:.25rem;color:var(--text-secondary)}.gpu-stat-label{width:3.5em;flex-shrink:0;white-space:nowrap;text-align:left}.gpu-stat-value{flex-grow:1;text-align:right;margin-left:auto;color:var(--text-primary);font-weight:600;font-size:1.2em}.progress-bar-container{flex-basis:100%;height:5px;background-color:#4a5568;border-radius:3px;margin-top:2px;overflow:hidden}.progress-bar{height:100%;border-radius:3px;transition:width .3s ease-in-out}.pagination-controls{display:flex;justify-content:center;align-items:center;padding-top:1.5rem;margin-top:auto;gap:1rem;flex-shrink:0}.pagination-controls button{background-color:var(--card-bg-color);color:var(--text-primary);border:1px solid var(--border-color);padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:background-color .2s}.pagination-controls button:hover:not(:disabled){background-color:#4a5568}.pagination-controls button:disabled{opacity:.4;cursor:not-allowed}.pagination-controls span{color:var(--text-secondary);font-weight:500}.autoplay-toggle{display:flex;align-items:center;gap:.5rem;margin-left:2rem}.autoplay-toggle label{color:var(--text-secondary);cursor:pointer}.autoplay-toggle input{cursor:pointer}.user-info{display:flex;align-items:center;gap:1rem}.user-info span{color:var(--text-secondary);font-weight:500}.user-info button{background-color:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:.4rem .8rem;border-radius:6px;cursor:pointer;transition:all .2s}.user-info button:hover{background-color:var(--card-bg-color);color:var(--text-primary);border-color:#a0aec0}.login-page-container{display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh;background-color:var(--bg-color)}.login-box{background-color:var(--card-bg-color);padding:2.5rem;border-radius:8px;border:1px solid var(--border-color);width:100%;max-width:400px;text-align:center}.login-box h1{margin-top:0;margin-bottom:.5rem}.login-box p{color:var(--text-secondary);margin-bottom:2rem}.login-box form{display:flex;flex-direction:column;gap:1.5rem}.input-group{text-align:left}.input-group label{display:block;margin-bottom:.5rem;font-weight:500}.input-group input{width:100%;padding:.75rem 1rem;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:1em}.input-group input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #4299e180}.login-box button{padding:.75rem;border:none;border-radius:6px;background-color:var(--accent-color);color:#fff;font-size:1em;font-weight:600;cursor:pointer;transition:background-color .2s}.login-box button:hover{background-color:#2b6cb0}.login-box button:disabled{opacity:.5;cursor:not-allowed}.login-error{color:#f56565;margin-top:1rem;margin-bottom:0}.gpu-detail-page .page-controls{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.time-range-selector{display:flex;align-items:center;gap:.75rem;background-color:var(--card-bg-color);padding:.5rem 1rem;border-radius:6px;border:1px solid var(--border-color)}.time-range-selector label{color:var(--text-secondary);font-weight:500}.time-range-selector select{font-size:1em;background-color:transparent;color:var(--text-primary);border:none;cursor:pointer}.time-range-selector select:focus{outline:none}.gpu-detail-group{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.gpu-detail-group:first-child{margin-top:0;padding-top:0;border-top:none}.gpu-detail-group h4{margin-top:0;margin-bottom:1rem;font-size:1.2em}.mini-charts-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}.mini-chart{background-color:var(--bg-color);padding:1rem;border-radius:6px}.mini-chart h5{margin:0 0 1rem;text-align:center;font-size:1em}