:root{--color-primary: #2563eb;--color-success: #16a34a;--color-warning: #ea580c;--color-error: #dc2626;--color-bg: #0f172a;--color-bg-card: #1e293b;--color-bg-hover: #334155;--color-text: #f1f5f9;--color-text-secondary: #94a3b8;--color-border: #334155;--border-radius: 8px;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.header{background-color:var(--color-bg-card);padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow)}.header h1{font-size:1.75rem;font-weight:700;color:var(--color-text)}.status-badges{display:flex;gap:.75rem;align-items:center}.status-badge{padding:.5rem 1rem;border-radius:var(--border-radius);font-weight:600;font-size:.875rem}.status-badge.healthy{background-color:#16a34a33;color:var(--color-success);border:1px solid var(--color-success)}.status-badge.unhealthy{background-color:#dc262633;color:var(--color-error);border:1px solid var(--color-error)}.status-badge.connected{background-color:#2563eb33;color:var(--color-primary);border:1px solid var(--color-primary)}.status-badge.disconnected{background-color:#ea580c33;color:var(--color-warning);border:1px solid var(--color-warning)}.demo-info-trigger{padding:.5rem .75rem;border-radius:var(--border-radius);font-weight:600;font-size:.875rem;background-color:#2563eb33;color:var(--color-primary);border:1px solid var(--color-primary);cursor:pointer;transition:all .2s}.demo-info-trigger:hover{background-color:#2563eb4d;transform:scale(1.05)}.demo-info-trigger:active{transform:scale(.98)}.main{flex:1;padding:2rem;max-width:1200px;width:100%;margin:0 auto}.card{background-color:var(--color-bg-card);border-radius:var(--border-radius);padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--color-border);box-shadow:var(--shadow)}.card h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--color-text);border-bottom:2px solid var(--color-primary);padding-bottom:.5rem}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.info-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background-color:#33415580;border-radius:6px}.info-item.full-width{grid-column:1 / -1}.label{font-weight:500;color:var(--color-text-secondary);font-size:.875rem}.value{font-weight:600;color:var(--color-text);font-size:.875rem}.value-success{font-weight:600;color:var(--color-success);font-size:.65rem}.value-warning{font-weight:600;color:var(--color-warning);font-size:.875rem}.value-error{font-weight:600;color:var(--color-error);font-size:.65rem}.miners-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.miner-item{background-color:#33415580;padding:1rem;border-radius:6px;border:1px solid var(--color-border);transition:transform .2s,box-shadow .2s}.miner-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0006;background-color:var(--color-bg-hover)}.miner-name{font-weight:600;color:var(--color-text);margin-bottom:.25rem;font-size:1rem}.miner-ip{color:var(--color-text-secondary);font-size:.875rem;margin-bottom:.5rem;font-family:Courier New,monospace}.miner-status{display:inline-block;padding:.25rem .75rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.miner-status.status-active{background-color:#16a34a33;color:var(--color-success)}.miner-status.status-standby{background-color:#ea580c33;color:var(--color-warning)}.miner-status.status-unknown{background-color:#94a3b833;color:var(--color-text-secondary)}.devices-section{position:relative;min-height:820px;overflow:hidden}.devices-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url(/demo/assets/ems-B0QvPwxq.png);background-size:contain;background-position:center;background-repeat:no-repeat;z-index:0}.devices-content{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;min-height:250px;width:100%;height:100%}.pv-power-display{text-align:center;background-color:#1e293be6;padding:.1875rem .3125rem;border-radius:var(--border-radius);border:2px solid var(--color-primary);box-shadow:0 8px 16px #0006}.pv-power-label{font-size:1rem;font-weight:500;color:var(--color-text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}.pv-power-value{font-size:1.25rem;font-weight:700;color:var(--color-success);text-shadow:0 2px 4px rgba(0,0,0,.3)}.system-info .info-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.footer{background-color:var(--color-bg-card);padding:1.5rem 2rem;text-align:center;border-top:1px solid var(--color-border);color:var(--color-text-secondary);font-size:.875rem}.loading,.error{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:1.25rem;font-weight:600}.error{color:var(--color-error);flex-direction:column;gap:1rem}.solar-info{background-color:#1e293bf2;border-radius:var(--border-radius);border:2px solid var(--color-primary);box-shadow:0 8px 16px #0006;overflow:hidden}.solar-info-content{padding:.5rem;display:flex;flex-direction:column;gap:.4rem}.solar-info-item{display:flex;justify-content:space-between;align-items:center;padding:.35rem .5rem;background-color:#33415566;border-radius:4px;border:1px solid rgba(51,65,85,.6)}.solar-info-label{font-size:.75rem;font-weight:500;color:var(--color-text-secondary)}.solar-info-value{font-size:.875rem;font-weight:700;color:var(--color-text);font-family:Courier New,monospace}.mpc-summary{display:flex;gap:2rem;margin-bottom:1.5rem;padding:1rem;background-color:#33415580;border-radius:6px;flex-wrap:wrap}.mpc-summary-item{display:flex;flex-direction:column;gap:.25rem}.mpc-summary-label{font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.mpc-summary-value{font-size:1.25rem;font-weight:700;color:var(--color-text)}.mpc-summary-value.value-success{color:var(--color-success)}.mpc-summary-value.value-error{color:var(--color-error)}.mpc-table-container{overflow-x:auto;border-radius:6px;border:1px solid var(--color-border)}.mpc-table{width:100%;border-collapse:collapse;font-size:.7rem;table-layout:fixed}.mpc-table thead{background-color:#334155b3}.mpc-table th{padding:.4rem .5rem;text-align:left;font-weight:600;color:var(--color-text);border-bottom:2px solid var(--color-border);text-transform:uppercase;font-size:.65rem;letter-spacing:.03em}.mpc-table th:first-child,.mpc-table td:first-child{width:120px}.mpc-table th:not(:first-child),.mpc-table td:not(:first-child){width:25px;text-align:center}.mpc-table td{padding:.4rem .5rem;border-bottom:1px solid var(--color-border);color:var(--color-text)}.mpc-table tbody tr{transition:background-color .2s}.mpc-table tbody tr:hover{background-color:#3341554d}.mpc-table tbody tr:last-child td{border-bottom:none}.mpc-table thead tr:first-child th{vertical-align:middle}.mpc-table thead tr:nth-child(2) th{padding-top:.3rem;padding-bottom:.4rem;font-size:.6rem}.action-charge,.action-import{color:var(--color-warning);font-weight:600}.action-discharge,.action-export{color:var(--color-success);font-weight:600}.action-idle{color:var(--color-text-secondary);font-style:italic}.price-highest{background-color:#ef444433;font-weight:600;padding:2px 4px;border-radius:3px}.price-lowest{background-color:#22c55e33;font-weight:600;padding:2px 4px;border-radius:3px}@media (max-width: 768px){.header{flex-direction:column;gap:1rem;text-align:center}.header h1{font-size:1.5rem}.status-badges{flex-direction:column;gap:.5rem}.main{padding:1rem}.info-grid,.miners-list{grid-template-columns:1fr}.devices-section{min-height:auto;padding:1rem}.devices-section:before{display:none}.devices-content{min-height:auto;flex-direction:column;gap:1rem;padding:0;position:static!important}.devices-content .power-display-wrapper{position:static!important;margin:0 auto;width:100%;max-width:280px;display:flex;flex-direction:column;align-items:center}.devices-content .power-display-wrapper:before{content:attr(data-mobile-label);font-size:.875rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;text-align:center}.devices-content .power-display-wrapper .pv-power-display{position:static!important;margin:0 auto;width:100%;padding:1rem 1.5rem;display:flex;flex-direction:column;align-items:center}.devices-content .solar-info{position:static!important;width:100%!important;max-width:280px;margin:0 auto}.pv-power-value{font-size:1.5rem}.pv-power-label{font-size:.875rem;margin-bottom:.5rem;margin-top:0!important}.mpc-summary{flex-direction:column;gap:1rem}.mpc-table-container{overflow-x:scroll}.mpc-table{font-size:.75rem}.mpc-table th,.mpc-table td{padding:.5rem}}.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}.demo-info-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.demo-info-card{background-color:var(--color-bg-card);border-radius:var(--border-radius);padding:2rem;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;border:2px solid var(--color-primary);box-shadow:0 20px 50px #00000080;position:relative;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.demo-info-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--color-text-secondary);font-size:1.5rem;cursor:pointer;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.demo-info-close:hover{background-color:#ffffff1a;color:var(--color-text)}.demo-info-card h2{font-size:1.75rem;font-weight:700;color:var(--color-text);margin-bottom:1rem;border-bottom:2px solid var(--color-primary);padding-bottom:.75rem}.demo-info-description{font-size:1rem;color:var(--color-text-secondary);margin-bottom:1.5rem;line-height:1.6}.demo-info-section{margin-bottom:1.5rem}.demo-info-section h3{font-size:1.125rem;font-weight:600;color:var(--color-text);margin-bottom:.75rem}.demo-info-section p{font-size:.9375rem;color:var(--color-text-secondary);line-height:1.6;margin-bottom:.5rem}.demo-info-section ul{list-style:none;padding:0;margin:0}.demo-info-section li{font-size:.9375rem;color:var(--color-text-secondary);padding:.5rem 0 .5rem .5rem;line-height:1.5;border-left:3px solid var(--color-primary);margin-bottom:.5rem;background-color:#2563eb0d;border-radius:0 4px 4px 0}.demo-info-note{background-color:#ea580c1a;border:1px solid var(--color-warning);border-radius:6px;padding:1rem;margin-bottom:1.5rem;font-size:.875rem;line-height:1.6;color:var(--color-text-secondary)}.demo-info-note strong{color:var(--color-warning);font-weight:600}.demo-info-note code{background-color:#0000004d;padding:.125rem .375rem;border-radius:3px;font-family:Courier New,monospace;font-size:.8125rem;color:var(--color-text)}.demo-info-button{width:100%;background-color:var(--color-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0003}.demo-info-button:hover{background-color:#1d4ed8;transform:translateY(-1px);box-shadow:0 4px 8px #0000004d}.demo-info-button:active{transform:translateY(0);box-shadow:0 1px 2px #0003}@media (max-width: 768px){.demo-info-card{padding:1.5rem;width:95%}.demo-info-card h2{font-size:1.5rem}.demo-info-section h3{font-size:1rem}.demo-info-section p,.demo-info-section li{font-size:.875rem}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}#root{min-height:100vh}