:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #19212b; background: #f4f6f8; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 1480px; margin: 0 auto; padding: 38px 42px 60px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.view-nav { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #cbd7da; border-radius: 6px; background: #eef3f3; }
.view-nav-button { border: 0; border-radius: 4px; background: transparent; color: #5d7078; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 8px 11px; }
.view-nav-button:hover { color: #1d6671; }
.view-nav-button.active { background: white; color: #1d6671; box-shadow: 0 1px 2px rgba(27, 58, 63, .12); }
.view-nav-button:focus-visible { outline: 2px solid rgba(29, 102, 113, .35); outline-offset: 1px; }
.eyebrow { margin: 0 0 8px; color: #607080; font-size: 12px; font-weight: 700; letter-spacing: 0; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 32px; letter-spacing: 0; }
h2 { margin-bottom: 5px; font-size: 18px; }
.subtitle, .muted { color: #697785; }
.subtitle { margin-bottom: 0; font-size: 14px; }
.button { border: 1px solid #1d6671; border-radius: 6px; background: #1d6671; color: white; cursor: pointer; font: inherit; font-weight: 700; padding: 10px 16px; }
.button:hover { background: #15525c; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button.secondary { background: white; color: #255865; border-color: #c8d5d9; font-weight: 600; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #d9e0e4; border-radius: 8px; background: #d9e0e4; margin-bottom: 22px; }
.summary-item { background: white; padding: 18px 20px; }
.summary-item span { display: block; color: #72808d; font-size: 12px; margin-bottom: 8px; }
.summary-item strong { font-size: 26px; }
.statistics-view { display: grid; gap: 22px; }
.statistics-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.statistics-head h2 { margin-bottom: 6px; }
.statistics-head p { margin-bottom: 0; }
.statistics-kpis { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #d9e0e4; border-radius: 8px; background: #d9e0e4; }
.statistics-kpi { min-height: 122px; background: white; padding: 17px 18px; }
.statistics-kpi span { display: block; color: #72808d; font-size: 12px; font-weight: 700; }
.statistics-kpi strong { display: block; margin-top: 9px; color: #1e2a32; font-size: 27px; line-height: 1; }
.statistics-kpi small { display: block; margin-top: 10px; color: #89969f; font-size: 11px; }
.statistics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.statistics-panel { overflow: hidden; border: 1px solid #d9e0e4; border-radius: 8px; background: white; }
.statistics-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 19px 13px; border-bottom: 1px solid #e6ebee; }
.statistics-panel-head h3 { margin: 0 0 5px; color: #30424c; font-size: 14px; }
.statistics-panel-head p { margin: 0; color: #89969f; font-size: 11px; }
.statistics-panel-head > span { flex: 0 0 auto; color: #5d7078; font-size: 12px; font-weight: 700; }
.statistics-bars { display: grid; gap: 12px; padding: 17px 19px 20px; }
.statistics-bar-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 2fr) 44px 38px; align-items: center; gap: 10px; min-height: 21px; }
.statistics-bar-label { overflow: hidden; color: #53666f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.statistics-bar-track { display: block; height: 8px; overflow: hidden; border-radius: 2px; background: #edf2f2; }
.statistics-bar-track i { display: block; height: 100%; border-radius: inherit; background: #3c827b; }
.statistics-bar-row strong { color: #26333c; font-size: 12px; text-align: right; }
.statistics-bar-row small { color: #89969f; font-size: 10px; text-align: right; }
.statistics-empty { padding: 23px 0 18px; color: #89969f; font-size: 12px; text-align: center; }
.hourly-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.hourly-bars .statistics-bar-row { grid-template-columns: 44px minmax(55px, 1fr) 30px; gap: 8px; }
.hourly-bars .statistics-bar-row small { display: none; }
.panel { overflow: hidden; border: 1px solid #d9e0e4; border-radius: 8px; background: white; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.panel-head { border-bottom: 1px solid #e6ebee; }
.filter-result { margin: 0; color: #566674; font-size: 13px; font-weight: 700; }
.filters { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); align-items: end; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #e6ebee; background: #fafbfb; }
.filter-control { display: grid; gap: 6px; color: #697785; font-size: 12px; font-weight: 700; }
.filter-control input, .filter-control select { width: 100%; min-width: 0; height: 38px; border: 1px solid #cbd5da; border-radius: 5px; background: white; color: #19212b; padding: 0 10px; font: inherit; }
.filter-control input:focus, .filter-control select:focus { border-color: #1d6671; outline: 2px solid rgba(29, 102, 113, .14); outline-offset: 0; }
.filter-pair { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.filter-clear { height: 38px; white-space: nowrap; }
.notice { margin: 14px 20px 0; border-left: 3px solid #b56b20; background: #fff8ed; color: #754815; padding: 10px 12px; font-size: 13px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1600px; }
th, td { padding: 14px 16px; border-bottom: 1px solid #edf0f2; text-align: left; vertical-align: middle; white-space: nowrap; }
th { background: #fafbfb; color: #687784; font-size: 12px; font-weight: 700; }
td { font-size: 13px; }
td strong { display: block; font-size: 13px; }
td small { display: block; margin-top: 4px; color: #8996a0; font-size: 11px; }
.device-row { cursor: pointer; }
.device-row:hover > td { background: #f7faf9; }
.device-row:focus { outline: none; }
.device-row:focus > td { background: #f2f8f7; box-shadow: inset 0 2px #79a9a7, inset 0 -2px #79a9a7; }
.device-row.selected > td { background: #edf6f4; border-bottom-color: #d7e6e2; }
.device-cell { min-width: 250px; }
.device-identity { display: flex; align-items: center; gap: 10px; }
.device-identity > div { min-width: 0; }
.row-toggle, .icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #526470; cursor: pointer; font: inherit; }
.row-toggle:hover, .icon-button:hover { border-color: #c5d4d5; background: white; color: #1d6671; }
.row-toggle:focus-visible, .icon-button:focus-visible { outline: 2px solid rgba(29, 102, 113, .35); outline-offset: 1px; }
.row-toggle span { display: block; font-size: 22px; line-height: 1; transition: transform .15s ease; }
.device-row.selected .row-toggle span { transform: rotate(90deg); }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.online { color: #207a50; }.offline { color: #9b4b45; }.unknown { color: #8a7b31; }
.state-running, .state-normal, .state-good, .state-strong, .state-wifi { color: #207a50; }
.state-paused, .state-average, .state-unmounted, .state-not-ready { color: #8f5d14; }
.state-idle, .state-unreported { color: #6f7e88; }
.state-abnormal, .state-offline { color: #9b4b45; }
.state-removed { color: #8a7b31; }
.missing { color: #9aa5ad; }
.table-metric { display: grid; gap: 4px; }
.table-metric strong { display: block; }
.table-metric small { margin-top: 0; color: #8996a0; font-size: 11px; }
.row-error { display: inline-block; margin-left: 8px; color: #a65e1b; font-size: 11px; }
.empty { padding: 42px; color: #7d8992; text-align: center; }
.device-detail-row > .device-detail-cell { padding: 0; background: #f7faf9; white-space: normal; }
.device-detail { border-left: 4px solid #3c827b; color: #26333c; }
.maintenance-loading { display: grid; min-height: 180px; place-items: center; color: #647580; font-weight: 700; }
.maintenance-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.maintenance-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.maintenance-title > strong { font-size: 15px; }
.maintenance-meta { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 8px; color: #6f7e88; font-size: 11px; }
.maintenance-warning { margin: 0; padding: 10px 22px; border-top: 1px solid #e0e8e6; background: #fff8ed; color: #754815; font-size: 12px; }
.maintenance-groups { border-top: 1px solid #dfe7e5; }
.maintenance-group { padding: 16px 22px 20px; }
.maintenance-group + .maintenance-group { border-top: 1px solid #dfe7e5; }
.maintenance-group h3 { margin: 0 0 10px; color: #52636e; font-size: 12px; font-weight: 800; }
.maintenance-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); border-top: 1px solid #dfe7e5; border-left: 1px solid #dfe7e5; }
.maintenance-item { min-height: 82px; padding: 12px 14px; border-right: 1px solid #dfe7e5; border-bottom: 1px solid #dfe7e5; background: rgba(255, 255, 255, .6); }
.maintenance-label { display: block; margin-bottom: 7px; color: #71808a; font-size: 11px; font-weight: 700; }
.maintenance-value { display: block; color: #1e2a32; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.maintenance-item small { margin-top: 6px; color: #89969f; }
.timeline-section { border-top: 1px solid #dfe7e5; padding: 18px 22px 24px; }
.timeline-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.timeline-header h3 { margin: 0; color: #52636e; font-size: 12px; font-weight: 800; }
.timeline-header > span { color: #89969f; font-size: 11px; }
.timeline { position: relative; display: grid; gap: 0; padding-left: 22px; }
.timeline::before { position: absolute; top: 7px; bottom: 7px; left: 5px; width: 1px; background: #cfdedb; content: ""; }
.timeline-event { position: relative; display: grid; grid-template-columns: 1fr; padding: 0 0 16px 14px; }
.timeline-marker { position: absolute; top: 5px; left: -21px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #3c827b; box-shadow: 0 0 0 1px #3c827b; }
.timeline-event.diagnostic .timeline-marker { background: #b56b20; box-shadow: 0 0 0 1px #b56b20; }
.timeline-event-body { min-width: 0; padding: 12px 14px; border: 1px solid #dfe7e5; border-radius: 6px; background: rgba(255, 255, 255, .72); }
.timeline-event-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
.timeline-event-head strong { color: #26333c; font-size: 13px; }
.timeline-event-body time { display: block; margin-top: 4px; color: #89969f; font-size: 11px; }
.timeline-code, .timeline-event-body code { color: #526e73; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.timeline-kind { padding: 2px 6px; border-radius: 3px; background: #e8f3f0; color: #2d746b; font-size: 10px; font-weight: 800; }
.timeline-event.diagnostic .timeline-kind { background: #fff1df; color: #9a5b18; }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 8px; color: #63757d; font-size: 11px; }
.timeline-detail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; color: #4e626b; font-size: 12px; line-height: 1.45; }
.timeline-detail b { color: #778891; font-size: 11px; }
.timeline-values { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.timeline-values span { display: inline-flex; gap: 5px; align-items: baseline; padding: 5px 7px; border: 1px solid #d9e7e3; border-radius: 4px; background: #f7fbfa; color: #334e52; font-size: 12px; }
.timeline-values b { color: #6d8385; font-size: 10px; }
.timeline-invalid { color: #a64d40; font-weight: 700; }
.timeline-empty { padding: 24px 0 8px; color: #89969f; font-size: 12px; }
.maintenance-error { display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; }
.maintenance-error strong { font-size: 14px; }
.maintenance-error p { margin: 6px 0 0; color: #7a5551; white-space: normal; }
.maintenance-actions { display: flex; align-items: center; gap: 8px; }
.button.compact { padding: 7px 10px; font-size: 12px; }
@media (max-width: 900px) { .maintenance-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } }
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(2, minmax(170px, 1fr)); } }
@media (max-width: 760px) { .shell { padding: 24px 16px 40px; } .topbar { display: block; } .topbar-actions { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 18px; } .topbar .button { margin-top: 0; } .summary { grid-template-columns: repeat(2, 1fr); } .panel-head { align-items: flex-start; flex-direction: column; } .filters { grid-template-columns: 1fr; } .filter-pair { grid-template-columns: 1fr; } .filter-clear { width: 100%; } .device-detail { position: sticky; left: 0; width: calc(100vw - 34px); } .maintenance-header, .maintenance-error { align-items: flex-start; } .maintenance-meta { display: grid; gap: 4px; } .maintenance-group { padding: 14px 16px 18px; } .maintenance-grid { grid-template-columns: 1fr; } .timeline-section { padding: 16px; } .timeline-header { align-items: flex-start; flex-direction: column; gap: 5px; } .statistics-head { align-items: flex-start; flex-direction: column; gap: 7px; } .statistics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .statistics-grid { grid-template-columns: 1fr; gap: 16px; } .hourly-bars { grid-template-columns: 1fr; } }