.charts{grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);align-items:start}
.devices{grid-template-columns:1fr}.device-card{display:grid;grid-template-columns:minmax(0,1fr) 90px 100px;background:white;border:1px solid #d6dfe7}.device-card .device{margin:0;box-shadow:none;min-width:0;overflow-wrap:anywhere}.device-ribbon{display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-size:14px;font-weight:bold;border-left:10px solid #77818b;background:#eef1f3;color:#34404b}.device-card.normal .device-ribbon{border-color:#19824b;background:#edf8f1;color:#155e37}.device-card.danger .device-ribbon{border-color:#c42d32;background:#fff0f0;color:#a01c22}.profile-button{border:0;border-radius:0;font-size:26px;padding:12px}.profile-button span{display:block;font-size:14px}.profile-dialog{border:1px solid #ccd5df;border-radius:10px;width:min(600px,calc(100% - 32px));max-height:85vh;overflow:auto;padding:24px;color:#172d42}.profile-dialog::backdrop{background:rgba(12,29,45,.6)}.profile-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.profile-heading h2{overflow-wrap:anywhere}.profile-dialog textarea{width:100%;font:inherit;padding:12px;border:1px solid #788797;resize:vertical}.profile-dialog p{font-size:14px}.profile-dialog button:focus-visible,.profile-dialog textarea:focus-visible{outline:3px solid #efb800;outline-offset:3px}@media(max-width:520px){.device-card{grid-template-columns:minmax(0,1fr) 64px 68px}.device-ribbon{padding:6px;border-left-width:6px}.profile-button{padding:6px}.profile-dialog{padding:18px}}
.charts>section{min-width:0}
.charts>.hourly-section{min-width:0}
.charts>.hourly-section:last-child{grid-column:1/-1}
.detail-bars[data-step="60"]{grid-template-columns:repeat(24,minmax(22px,1fr));gap:1px}
.detail-bars[data-step="60"] .detail-bin{min-width:22px;padding:2px 0;font-size:12px}
@media(max-width:900px){.charts{grid-template-columns:minmax(0,1fr)}.charts>.hourly-section{grid-column:1}}
.chart-controls{display:flex;gap:24px;flex-wrap:wrap;margin:16px 0}.chart-controls select{padding:10px;font:inherit;max-width:100%}.detail-scroll{overflow-x:auto}.detail-bars{display:grid;grid-template-columns:repeat(var(--count),minmax(48px,1fr));min-width:100%;gap:2px}.detail-bin{border:0;background:transparent;padding:3px;min-width:48px;color:#24374a;font-size:12px}.detail-bin[aria-pressed=true]{outline:2px solid #00529b;outline-offset:-2px}.detail-track{height:180px;display:flex;align-items:flex-end;background:repeating-linear-gradient(to top,#e2e7ec 0,#e2e7ec 1px,transparent 1px,transparent 25%);border-bottom:1px solid #8091a2}.detail-track i{display:block;width:100%;background:#ffda1a;min-height:0}.bin-detail{overflow-wrap:anywhere;line-height:1.6}.distribution-scroll{overflow-x:auto}.distribution-scroll svg{width:100%;min-width:540px;max-height:390px;font:14px Arial,sans-serif;fill:#24374a}details{margin-top:24px}summary{cursor:pointer;padding:12px 0}
#hourly{overflow-x:auto;max-width:100%;padding-bottom:8px}
.hour-chart{display:block;width:100%;min-width:960px;height:auto;overflow:visible;font:14px Arial,"Malgun Gothic",sans-serif;fill:#33495f}
.hour-grid{stroke:#dce3e9;stroke-width:1}.hour-axis{stroke:#8091a2;stroke-width:1}
.hour-range{fill:#cbd4dd}.hour-actual{fill:#ffda1a;stroke:#a28200;stroke-width:.7}
.hour-mean{stroke:#00529b;stroke-width:3}
.hour-slot{cursor:pointer;outline:none}.hour-slot:focus .hour-hit,.hour-slot:hover .hour-hit{fill:#00529b;fill-opacity:.07;stroke:#00529b;stroke-width:1}
.hour-detail{font-size:14px;min-height:2em;margin:10px 0 0;position:sticky;left:0;max-width:100%;white-space:normal}
.hour-legend{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:14px;margin-bottom:12px}.hour-legend span{display:inline-flex;align-items:center;gap:7px}.hour-legend i{display:inline-block;width:18px;height:12px}.legend-actual{background:#ffda1a;border:1px solid #a28200}.legend-mean{background:#00529b;height:3px!important}.legend-range{background:#cbd4dd}