:root{color:#324352;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#cfd8e2;font-family:Tahoma,Verdana,Arial,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background-color:#cfd8e2;min-width:320px;margin:0}button,input,textarea,select{font:inherit}h1,h2,h3,p{margin:0}button{font-family:Tahoma,Verdana,Arial,sans-serif}.monitor-shell{min-height:100vh;padding:12px}.monitor-shell--locked{background:linear-gradient(#d6e0ea 0%,#c7d2dd 100%);place-items:center;display:grid}.access-panel{background:#dce4ee;border:1px solid #97a6b6;width:min(460px,100%);padding:16px;box-shadow:inset 0 1px #fff}.access-panel__header h1{color:#345;margin:4px 0 0;font-size:20px}.access-panel__copy{color:#526474;margin-top:8px;font-size:12px}.access-form{gap:10px;margin-top:14px;display:grid}.access-form__field{color:#4b5b6a;gap:4px;font-size:11px;display:grid}.access-form__field input{color:#283847;font:inherit;background:#fff;border:1px solid #9eacbb;padding:8px 10px}.access-form__field input:focus-visible{outline-offset:1px;outline:2px solid #2e6aa2}.access-form__error{color:#b72f2f;margin:0;font-size:11px}.access-form__submit{justify-self:start}.monitor-board{background:#dce4ee;border:1px solid #97a6b6;width:min(1280px,100%);margin:0 auto;box-shadow:inset 0 1px #fff}.chrome-bar{background:linear-gradient(#dfe9f4 0%,#b7c9dc 100%);border-bottom:1px solid #93a6bb;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;display:flex}.brand-lockup{align-items:center;gap:10px;display:flex}.brand-mark{background:linear-gradient(135deg,#f2c048 0%,#d89b17 100%);border-radius:3px;width:28px;height:28px;box-shadow:inset 0 1px #ffffffb3}.brand-name{letter-spacing:.02em;color:#4b5c6d;margin:0;font-size:22px;font-weight:700}.brand-subtitle{color:#6e7d8e;margin:1px 0 0;font-size:11px}.chrome-actions{gap:6px;display:flex}.chrome-button,.refresh-button,.text-action{color:#4d5d6e;cursor:pointer;background:linear-gradient(#fff 0%,#d8e1ea 100%);border:1px solid #9eacbb;font-size:11px}.chrome-button,.refresh-button{padding:4px 8px}.path-bar{color:#4f5f6d;background:#edf2f7;border-top:1px solid #f6f8fb;border-bottom:1px solid #aab8c8;justify-content:space-between;gap:12px;padding:6px 10px;font-size:11px;display:flex}.dashboard-layout{grid-template-columns:240px minmax(0,1fr);gap:10px;padding:10px;display:grid}.asset-sidebar{align-content:start;gap:8px;display:grid}.asset-panel,.matrix-panel{background:#f4f6f9;border:1px solid #aab7c7;box-shadow:inset 0 1px #fff}.asset-panel{padding:8px}.asset-panel__header,.asset-panel__toolbar,.matrix-panel__header,.matrix-footer{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.asset-panel__header h1,.matrix-panel__header h2,.asset-panel__toolbar h2{color:#345;margin:0;font-size:12px}.asset-panel__header h1{overflow-wrap:anywhere}.asset-status{text-transform:uppercase;background:#fff;border:1px solid #a6b3bf;padding:2px 6px;font-size:10px;font-weight:700}.asset-status--online{color:#2f7d22}.asset-status--degraded{color:#a27a10}.asset-status--offline{color:#b72f2f}.asset-details{gap:4px;margin-top:8px;display:grid}.asset-details__row,.module-row{color:#4b5b6a;justify-content:space-between;align-items:flex-start;gap:8px;font-size:11px;display:flex}.asset-details__row span{flex:0 0 88px}.asset-details__row strong{text-align:right;overflow-wrap:anywhere;flex:1}.asset-details__row strong,.module-value,.toolbar-readout strong,.matrix-summary strong{color:#283847}.asset-panel__toolbar{border-bottom:1px solid #d4dde6;padding-bottom:6px}.text-action{padding:1px 5px}.module-list{gap:5px;margin-top:6px;display:grid}.module-value--online{color:#2f7d22}.module-value--offline{color:#b72f2f}.matrix-panel{padding:8px}.panel-caption,.toolbar-readout span,.matrix-summary span{color:#637385;margin:0;font-size:11px}.probe-alert{color:#8a4720;background:#fff2e6;border:1px solid #d3a07c;margin:8px 0 0;padding:8px 10px;font-size:11px;line-height:1.45}.matrix-panel__header h2{margin-top:2px;font-size:18px}.matrix-toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toolbar-readout{background:#fff;border:1px solid #cad4df;min-width:112px;padding:4px 6px}.toolbar-readout strong{margin-top:2px;font-size:11px;display:block}.matrix-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:10px;padding:4px;display:grid}.matrix-cell{appearance:none;text-align:left;aspect-ratio:1/.9;cursor:pointer;background:linear-gradient(#fdfefe 0%,#d6dee6 100%);border:1px solid #a0adb9;width:100%;padding:0;position:relative;box-shadow:inset 0 1px #ffffffe6}.matrix-cell:hover{border-color:#718399}.matrix-cell[data-selected=true]{border-color:#304c69;box-shadow:0 0 0 2px #304c6938,inset 0 1px #ffffffe6}.matrix-cell:focus-visible{outline-offset:2px;outline:2px solid #2e6aa2}.matrix-cell__inner{border:1px solid #ffffffa6;align-items:flex-end;padding:6px;display:flex;position:absolute;inset:4px;box-shadow:inset 0 1px #ffffff73}.matrix-cell__label{color:#fff;text-shadow:0 1px 1px #00000059;overflow-wrap:anywhere;font-size:11px;font-weight:700;line-height:1.2;display:block}.matrix-cell__meta{color:#ffffffeb;text-shadow:0 1px 1px #00000059;margin-top:4px;font-size:10px;display:block}.matrix-cell--online .matrix-cell__inner{background:linear-gradient(#84d57a 0%,#4da84b 100%)}.matrix-cell--offline .matrix-cell__inner{background:linear-gradient(#ef7770 0%,#cf3c30 100%)}.matrix-footer{border-top:1px solid #cbd5df;margin-top:12px;padding-top:8px}.matrix-legend{flex-wrap:wrap;gap:8px;display:flex}.legend-chip{background:#fff;border:1px solid #a5b2bf;padding:3px 7px;font-size:11px}.legend-chip--online{color:#2f7d22}.legend-chip--offline{color:#b72f2f}.matrix-summary{text-align:right;font-size:11px}@media (width<=960px){.path-bar,.dashboard-layout,.matrix-panel__header,.matrix-footer{grid-template-columns:1fr}.path-bar,.dashboard-layout,.matrix-panel__header,.matrix-footer,.asset-panel__header,.asset-panel__toolbar{display:grid}.dashboard-layout{grid-template-columns:1fr}}@media (width<=720px){.monitor-shell{padding:4px}.chrome-bar{grid-template-columns:1fr}.chrome-bar,.chrome-actions{display:grid}.matrix-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
