@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color-scheme:light;--color-background: #eef3f1;--color-surface: #ffffff;--color-surface-muted: #f1f6f4;--color-border: #dce7e3;--color-border-strong: #cbd5d2;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-primary: #087f5b;--color-success: #166534;--color-warning: #92400e;--color-critical: #991b1b;--color-info: #1d4ed8;--shadow-card: 0 10px 30px rgba(28, 68, 55, .07);--radius-card: 14px;font-family:Space Grotesk,ui-sans-serif,system-ui,sans-serif;color:var(--color-text-primary);background:var(--color-background);line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;min-width:320px}body{background-color:var(--color-background);background-image:linear-gradient(rgba(8,127,91,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,91,.035) 1px,transparent 1px);background-size:32px 32px;overflow-x:hidden}a{color:inherit;text-decoration:none}button,select{font:inherit}.app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;max-width:1680px;margin:0 auto}.side-nav{position:sticky;top:0;height:100vh;overflow:auto;padding:20px 14px;border-right:1px solid var(--color-border);background:#ffffffeb}.app-frame{min-width:0;max-width:none;margin:0;padding:0 24px 28px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:64px;padding:10px 0;background:#eef3f1eb;color:var(--color-text-primary);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:flex-start;gap:12px;min-width:0;font-weight:700;letter-spacing:-.02em;line-height:1.25}.brand>div:last-child{min-width:0}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#34d399,#059669);font-size:1.4rem}.brand small{display:block;max-width:22ch;color:#6c8379;font-size:.72rem;font-weight:500;line-height:1.35;letter-spacing:0;text-transform:none}.nav-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;color:#334155;font-size:.92rem;line-height:1.35;transition:background .16s ease,color .16s ease}.desktop-nav{display:grid;gap:16px;margin-top:22px}.nav-group{display:grid;gap:4px}.nav-group p{margin:0 10px 4px;color:#789083;font-size:.72rem;font-weight:700}.nav-link.active{background:#dcfce7;color:#166534;font-weight:700}.menu-wrap{position:relative}.menu-button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--color-border-strong);background:#fff;color:#236344;border-radius:9px;padding:8px 10px;cursor:pointer;font-weight:700;letter-spacing:.06em}.header-actions{display:flex;align-items:center;gap:12px}.connection-status{display:inline-flex;align-items:center;gap:6px;color:#456553;font-size:.72rem;font-weight:800;letter-spacing:.06em}.connection-status.stale{color:#a16207}.connection-status.offline{color:#b42318}.connection-dot{width:8px;height:8px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 3px #dcfce7}.connection-status.stale .connection-dot{background:#f59e0b;box-shadow:0 0 0 3px #fef3c7}.connection-status.offline .connection-dot{background:#dc2626;box-shadow:0 0 0 3px #fee2e2}.connection-status.connecting{color:#64748b}.connection-status.connecting .connection-dot{background:#94a3b8;box-shadow:0 0 0 3px #e2e8f0}.brand-mark{background:#dff5e7;color:#16804f;border:1px solid #bce8cb}.menu-button:focus-visible,.nav-link:focus-visible,.filter-button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #86efac;outline-offset:2px}.menu-panel{position:absolute;z-index:10;top:calc(100% + 10px);right:0;width:min(300px,calc(100vw - 32px));padding:8px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;box-shadow:0 18px 36px #0f172a29}.menu-panel small{color:#92400e;background:#fef3c7;border-radius:999px;padding:3px 6px;font-size:.65rem;font-weight:800}.content{margin-top:20px}.page-stack{display:grid;gap:16px}.app-footer{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding:18px 4px 0;border-top:1px solid var(--color-border);color:#94a3b8;font-size:.72rem}.app-footer span:first-child{color:#64748b;font-weight:800;letter-spacing:.08em}.card{min-width:0;background:var(--color-surface);border-radius:var(--radius-card);padding:18px;border:1px solid var(--color-border);box-shadow:var(--shadow-card);animation:card-enter .42s ease both}@keyframes card-enter{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mini-label{display:flex;align-items:center;gap:6px;max-width:100%;font-size:.75rem;font-weight:700;line-height:1.35;letter-spacing:.01em;color:#475569;margin-bottom:8px}.metric-value{font-size:clamp(1.7rem,2.4vw,2.4rem);font-weight:700;line-height:1.15;overflow-wrap:anywhere}.metric-value,.table,.detail-stack strong,.chart-legend{font-family:IBM Plex Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums}.metric-unit{font-size:.9rem;color:#64748b}.status-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:4px 8px;border-radius:999px;font-weight:700;font-size:.7rem;line-height:1.35;text-align:center;text-transform:uppercase;text-wrap:balance}.status-pill.ok,.status-pill.success{background:#dcfce7;color:#166534}.status-pill.info{background:#dbeafe;color:#1d4ed8}.status-pill.warning{background:#fef3c7;color:#92400e}.status-pill.alert{background:#fee2e2;color:#991b1b}.status-pill.idle{background:#e2e8f0;color:#334155}.status-badge{display:inline-flex;align-items:center;gap:6px;max-width:min(100%,320px);width:fit-content;border-radius:999px;font-weight:800;letter-spacing:.02em;line-height:1.3;text-wrap:balance}.status-badge-small{padding:6px 9px;font-size:.68rem}.status-badge-normal,.status-badge-live{color:#166534;background:#dcfce7}.status-badge-stale,.status-badge-warning{color:#92400e;background:#fef3c7}.status-badge-offline,.status-badge-critical{color:#991b1b;background:#fee2e2}.status-badge-connecting,.status-badge-idle{color:#475569;background:#e2e8f0}.page-title{margin:0 0 6px;font-size:clamp(1.55rem,2vw,2.05rem);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}.page-subtitle{max-width:68ch;color:#475569;margin:0;line-height:1.45}.page-heading,.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.eyebrow{display:flex;align-items:center;gap:6px;color:#198754;font-size:.78rem;font-weight:700;line-height:1.35;margin-bottom:8px}.page-stamp{color:#789083;font-size:.72rem;text-align:right;line-height:1.6}.page-stamp strong{color:#235d3e;font-size:.9rem}.section-heading h2{margin:0;color:#173b2b;font-size:1.12rem;line-height:1.35;text-wrap:balance}.section-heading.compact{align-items:center}.section-heading.compact .mini-label{display:flex;align-items:center;gap:6px}.section-heading.compact h2{margin-top:2px}.metric-card{min-height:176px}.metric-heading{display:flex;align-items:center;gap:9px}.metric-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px}.metric-icon.warning{color:#b45309;background:#fff3d6}.metric-icon.info{color:#187a68;background:#dff6ed}.metric-icon.success,.metric-icon.ok{color:#16804f;background:#dff5e7}.form-card{display:grid;gap:12px}.form-card>.filter-button{justify-self:start}.form-card label{display:grid;gap:6px;color:#475569;font-size:.82rem;font-weight:700}.form-card input,.form-card select{padding:8px 10px;border:1px solid var(--color-border-strong);border-radius:8px;color:var(--color-text-primary);background:#fff;font:inherit}.table-actions{display:flex;flex-wrap:wrap;gap:6px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-card input[readonly],.form-card select:disabled{background:#f4f7f5;color:#64748b}.field-error{color:#b42318;font-size:.76rem;font-weight:600}.inline-form{margin-bottom:16px;padding:14px;border:1px dashed var(--color-border-strong);border-radius:10px}.metric-icon.idle{color:#64748b;background:#eef2f0}.metric-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:14px;color:#779083;font-size:.78rem;line-height:1.35}.progress-track{height:8px;margin-top:16px;overflow:hidden;border-radius:99px;background:#e4eee7}.progress-track span{display:block;height:100%;border-radius:inherit;background:#22a06b}.text-link{display:inline-block;margin-top:14px;color:#16804f;font-weight:700;font-size:.86rem}.section-icon{color:#c98216}.live-label{margin-top:12px;color:#16804f;font-size:.72rem;font-weight:700;line-height:1.4;letter-spacing:.02em}.alert-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;color:#7c5b23}.alert-summary span{padding:8px 10px;border-radius:8px;background:#fff7df}.health-card .status-pill{margin-top:12px}.empty-state,.error-state,.loading-state{padding:18px;border-radius:16px;background:#f8fafc;border:1px dashed #cbd5e1;color:#475569}.table{width:100%;border-collapse:collapse;font-size:.92rem}.table th,.table td{text-align:left;vertical-align:middle;padding:12px 10px;border-bottom:1px solid #e2e8f0;line-height:1.4;white-space:nowrap}.table th{white-space:nowrap}.table-scroll{overflow-x:auto}.table-scroll .table{width:max-content;min-width:100%}.history-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.range-summary{color:#71847c;font:.76rem IBM Plex Mono,monospace}.range-summary strong{color:#087f5b}.table-card h2{margin:0;font-size:1rem}.pagination{display:flex;gap:6px}.history-toolbar.time-filter input{min-width:0;padding:6px 8px}.time-filter label{display:inline-flex;align-items:center;gap:6px}.telemetry-log td{white-space:nowrap}.plc-error{color:#b91c1c;font-weight:700}.log-reason{color:#087f5b;font:600 .66rem IBM Plex Mono,monospace}.log-gap td{color:#b45309;background:#fffbeb;font-size:.78rem;text-align:center;padding:4px 8px}.log-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.chart-card{overflow:hidden}.chart-card h2{margin:0 0 14px;font-size:1rem;letter-spacing:-.02em}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.chart-heading h2{margin-bottom:0}.chart-latest,.filter-count{color:#087f5b;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:4px 7px;font:600 .62rem IBM Plex Mono,monospace;white-space:nowrap}.recharts-wrap{width:100%;height:210px;margin:8px 0 4px}.chart-tooltip{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--color-border);border-radius:9px;background:#fffffff5;box-shadow:0 8px 24px #0f172a1f;font:.72rem IBM Plex Mono,monospace}.chart-tooltip strong{color:#64748b;font-weight:500}.chart-tooltip span{color:#087f5b;font-weight:600}.chart-card svg{display:block;width:100%;height:170px;overflow:visible;margin:2px 0 4px}.chart-line{fill:none;stroke:#087f5b;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:#fff;stroke:#087f5b;stroke-width:1.5}.chart-area{fill:#14b8a61f}.chart-axis{stroke:#cbd5e1;stroke-width:1}.chart-grid-line{stroke:#e2e8f0;stroke-width:.8;stroke-dasharray:2 2}.chart-axis-label{fill:#71847c;font-size:3.5px;font-family:IBM Plex Mono,monospace}.chart-unit{color:#64748b;font-size:.78rem;font-weight:500}.chart-time-labels{display:flex;justify-content:space-between;gap:8px;color:#64748b;font-size:.7rem}.chart-time-labels span{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-empty{color:#64748b;min-height:150px;display:grid;place-items:center}.filter-group{display:flex;gap:6px;flex-wrap:wrap}.filter-button{border:1px solid #cbd5e1;background:#fff;color:#334155;padding:7px 10px;border-radius:8px;cursor:pointer;line-height:1.3;white-space:nowrap;transition:background .12s ease,transform .12s ease,border-color .12s ease}.filter-button:hover{border-color:#0f766e;color:#0f766e}.filter-button:active{transform:translateY(1px);background:#ccfbf1;border-color:#0f766e}.filter-button.active{background:#0f766e;border-color:#0f766e;color:#fff}.filter-button.active:hover{background:#115e59;color:#fff}.filter-button.active:active{background:#134e4a;color:#fff}.filter-button:disabled{opacity:.55;cursor:not-allowed;transform:none}.history-toolbar input{min-width:min(320px,100%);padding:8px 10px;border:1px solid var(--color-border-strong);border-radius:8px;color:var(--color-text-primary);background:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.alarm-history-scroll{max-height:min(560px,60vh);overflow-y:auto;overscroll-behavior:contain}.current-alarm-scroll{max-height:min(360px,45vh);margin:10px 0}.zone-chip{display:grid;gap:2px;min-width:140px;text-align:left;flex:0 0 auto}.zone-chip span{font-size:.82rem}.zone-chip small{font-size:.72rem;opacity:.8}.zone-scope-bar{position:static;z-index:15;display:grid;gap:8px;margin:16px 0 0;padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;background:#fffffffa;box-shadow:0 8px 24px #1c443714;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.zone-scope-bar.fallback{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.zone-scope-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}.zone-scope-field{display:grid;gap:4px}.zone-scope-field select{padding:7px 10px;border:1px solid var(--color-border-strong);border-radius:8px;background:#fff;max-width:100%}.zone-scope-chips{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding-bottom:2px}.zone-scope-summary{display:flex;flex-wrap:wrap;gap:4px 14px;color:#475569;font-size:.8rem}.zone-scope-note{color:#475569;font-size:.84rem}.zone-scope-wait{color:#a16207;font-weight:600}.scope-state{display:grid;gap:4px;padding:12px 14px;margin-bottom:16px;border:1px dashed var(--color-border-strong);border-radius:10px;background:var(--color-surface-muted);color:#475569}.scope-state strong{color:#334155}.sample-note{display:block;margin-top:6px;color:#64748b;font-size:.76rem}.alarm-scope{display:inline-flex;gap:6px;flex-wrap:wrap}.zone-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}.zone-filter select{padding:7px 10px;border:1px solid var(--color-border-strong);border-radius:8px;background:#fff}.alarm-events-toggle{margin-top:6px;border:0;background:transparent;padding:0;cursor:pointer;font-size:.82rem}.alarm-events{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;color:#475569;font-size:.8rem}.alarm-list{display:grid;gap:10px}.alarm-item{position:relative;border-left:4px solid #f59e0b;background:#fffbeb;padding:12px;border-radius:8px}.alarm-item.critical{border-left-color:#dc2626;background:#fef2f2}.alarm-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.alarm-severity{font:700 .72rem IBM Plex Mono,monospace;letter-spacing:.04em;color:#92400e}.alarm-item.critical .alarm-severity{color:#b42318}.alarm-status-tag{display:inline-block;margin-top:8px;font:700 .68rem IBM Plex Mono,monospace;letter-spacing:.04em;color:#475569}.alarm-action-menu{position:relative}.alarm-more{border:0;background:transparent;color:#64748b;padding:4px;border-radius:6px;cursor:pointer}.alarm-more:hover{background:#e2e8f0;color:#0f766e}.alarm-menu-panel{position:absolute;right:0;top:28px;z-index:6;min-width:220px;display:grid;background:#fff;border:1px solid var(--color-border-strong);border-radius:10px;box-shadow:0 10px 30px #0f172a1f;padding:6px}.alarm-menu-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:7px;color:#334155;cursor:pointer}.alarm-menu-item:hover{background:#f1f5f4}.alarm-menu-item.danger{color:#b42318;border-top:1px solid #e2e8f0;margin-top:4px;border-radius:0 0 7px 7px}.alarm-confirm{position:absolute;right:0;top:28px;z-index:7;width:min(260px,70vw);background:#fff;border:1px solid var(--color-border-strong);border-radius:10px;box-shadow:0 10px 30px #0f172a1f;padding:12px}.alarm-confirm p{margin:0 0 10px;color:#334155;font-size:.84rem}.alarm-meta{display:flex;justify-content:space-between;gap:12px;color:#64748b;font-size:.82rem}.alarm-detail{display:grid;gap:4px;margin-top:6px;color:#64748b;font-size:.84rem}.muted{color:#64748b}.analysis-list{display:grid;gap:10px;padding-left:20px}.unavailable-grid,.safety-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}.unavailable-grid span,.safety-grid span{padding:10px 12px;border:1px solid var(--color-border);border-radius:9px;background:var(--color-surface-muted);color:#64748b;font-size:.8rem}.unavailable-grid strong{display:block;color:#92400e;margin-top:3px}.analysis-source,.control-health{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;color:#64748b;font-size:.8rem}.source-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 7px;font:700 .62rem IBM Plex Mono,monospace;letter-spacing:.04em}.source-badge.api{color:#087f5b;background:#ecfdf5;border:1px solid #a7f3d0}.control-health{padding:10px 12px;border:1px solid var(--color-border);border-radius:9px;background:var(--color-surface-muted)}.chart-legend{display:flex;flex-wrap:wrap;gap:10px;color:#475569;font-size:.82rem}.detail-stack,.health-grid,.alert-list{display:grid;gap:8px}.health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.health-cell{display:grid;gap:5px;padding:12px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface-muted)}.health-cell small{color:#71847c;font-size:.72rem}.health-cell strong{color:#334155;font-size:.86rem}.health-cell.ok strong{color:#087f5b}.health-cell.warning strong{color:#a16207}.health-cell.alert strong{color:#b42318}.health-note{margin-top:12px;color:#71847c;font-size:.78rem}.pump-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pump-status{display:grid;gap:4px;min-width:0;padding:12px;border-radius:10px;text-align:center;border:1px solid #cbd5e1}.pump-status strong,.pump-status small,.detail-stack span,.card h2,.page-stamp strong{overflow-wrap:anywhere}.pump-status.on{background:#dcfce7;color:#166534;border-color:#86efac}.pump-status.off{background:#f1f5f9;color:#475569}.pump-status.unknown{background:#fef3c7;color:#92400e}.alert-row{padding:8px 10px;border-radius:8px;background:#fef3c7;color:#92400e}.alert-row.critical{background:#fee2e2;color:#991b1b}@media(max-width:768px){.chart-grid,.health-grid,.grid-4{grid-template-columns:1fr}}.control-preview{display:inline-block;color:#92400e;background:#fef3c7;padding:4px 8px;border-radius:999px;font-size:.7rem;text-transform:uppercase;font-weight:800;letter-spacing:.08em}@media(max-width:768px){.grid-3,.grid-2{grid-template-columns:1fr}.app-frame{padding-inline:16px}.topbar{justify-content:space-between}.page-heading{display:block}.page-stamp{margin-top:-6px;text-align:left}.header-actions{gap:7px}.connection-status span:last-child{display:none}.menu-button-label{display:none}.app-footer{display:grid;gap:5px}.unavailable-grid,.safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.alarm-history-scroll{max-height:60vh}.zone-scope-bar{padding:8px 10px;gap:6px}.zone-scope-row{display:grid;gap:6px}.zone-scope-field{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}.zone-scope-field select{width:100%}.zone-chip{min-width:112px;padding:5px 8px}.zone-chip small{display:none}.zone-scope-summary{font-size:.74rem}.zone-scope-summary .muted{display:none}}@media(max-width:1099px){.app-shell{grid-template-columns:1fr}.side-nav{display:none}.grid-3{grid-template-columns:1fr}}@media(min-width:1100px){.topbar-brand,.menu-wrap{display:none}.zone-scope-bar:not(.fallback){position:sticky;top:64px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(min-width:769px)and (max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}