:root{--green-50: #edf7f1;--green-100: #d7ecdf;--green-200: #afdcc2;--green-300: #7ec7a0;--green-400: #4fab7d;--green-500: #2e9163;--green-600: #1e7a55;--green-700: #176345;--green-800: #124d37;--green-900: #0d3a2a;--water-300: #7cc7e8;--water-400: #3aa6d8;--water-500: #1f86bd;--water-600: #176a99;--soil-300: #d8b892;--soil-500: #a9743e;--soil-600: #8a5c2f;--info: #2f7dd1;--success: #2e9163;--warning: #c77f14;--critical: #cf4337;--chart-1: #23855a;--chart-2: #1f86bd;--chart-3: #b97f24;--chart-4: #8461d1;--bg: #f3f6f4;--bg-elevated: #fdfefd;--surface: #ffffff;--surface-alt: #edf1ee;--surface-hover: #e5ebe7;--border: #dfe6e1;--border-strong: #c6d1c9;--text: #17251e;--text-muted: #5b6b62;--text-faint: #8b9891;--text-inverse: #ffffff;--accent: var(--green-600);--accent-hover: var(--green-700);--accent-soft: #e0f0e8;--accent-contrast: #ffffff;--ring: color-mix(in srgb, var(--accent) 32%, transparent);--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Consolas", ui-monospace, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-3xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-8: 3rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(13, 34, 24, .05), 0 1px 3px rgba(13, 34, 24, .05);--shadow-md: 0 2px 6px rgba(13, 34, 24, .06), 0 6px 18px rgba(13, 34, 24, .07);--shadow-lg: 0 8px 20px rgba(13, 34, 24, .1), 0 18px 44px rgba(13, 34, 24, .12);--sidebar-width: 248px;--header-height: 60px;--transition-fast: .12s ease;--transition: .2s ease;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0f1613;--bg-elevated: #141c18;--surface: #151d19;--surface-alt: #1d2721;--surface-hover: #243029;--border: #27342c;--border-strong: #37473d;--text: #e6efe9;--text-muted: #a2b3a9;--text-faint: #718078;--text-inverse: #0f1613;--accent: #4fab7d;--accent-hover: #6fc096;--accent-soft: rgba(79, 171, 125, .16);--accent-contrast: #081209;--ring: color-mix(in srgb, var(--accent) 40%, transparent);--info: #4b9de6;--success: #4fab7d;--warning: #dfa040;--critical: #e56b62;--water-500: #3a93c7;--soil-500: #b8862f;--chart-1: #3f9c68;--chart-2: #3a93c7;--chart-3: #b8862f;--chart-4: #9377d6;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);--shadow-md: 0 3px 10px rgba(0, 0, 0, .5);--shadow-lg: 0 12px 34px rgba(0, 0, 0, .6);color-scheme:dark}}:root[data-theme=dark]{--bg: #0f1613;--bg-elevated: #141c18;--surface: #151d19;--surface-alt: #1d2721;--surface-hover: #243029;--border: #27342c;--border-strong: #37473d;--text: #e6efe9;--text-muted: #a2b3a9;--text-faint: #718078;--text-inverse: #0f1613;--accent: #4fab7d;--accent-hover: #6fc096;--accent-soft: rgba(79, 171, 125, .16);--accent-contrast: #081209;--ring: color-mix(in srgb, var(--accent) 40%, transparent);--info: #4b9de6;--success: #4fab7d;--warning: #dfa040;--critical: #e56b62;--water-500: #3a93c7;--soil-500: #b8862f;--chart-1: #3f9c68;--chart-2: #3a93c7;--chart-3: #b8862f;--chart-4: #9377d6;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);--shadow-md: 0 3px 10px rgba(0, 0, 0, .5);--shadow-lg: 0 12px 34px rgba(0, 0, 0, .6);color-scheme:dark}:root{--sev-info: var(--info);--sev-warning: var(--warning);--sev-critical: var(--critical)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body,.card,.sidebar,.app-header,.input,.select{transition:background-color var(--transition),color var(--transition),border-color var(--transition)}h1,h2,h3,h4,p,figure{margin:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}svg{display:block}.page-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em}.page-subtitle{color:var(--text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}.text-muted{color:var(--text-muted)}.text-faint{color:var(--text-faint)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row{display:flex;align-items:center;gap:var(--space-3)}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.grid{display:grid;gap:var(--space-4)}.spacer{flex:1 1 auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card-pad{padding:var(--space-5)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:.55rem 1rem;border-radius:var(--radius-md);border:1px solid transparent;background:var(--surface-alt);color:var(--text);font-weight:600;font-size:var(--text-sm);transition:background var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast);white-space:nowrap}.btn:hover{background:var(--surface-hover)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--accent-contrast)}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:transparent;border-color:var(--border)}.btn-ghost:hover{background:var(--surface-alt)}.btn-danger{background:var(--critical);color:#fff}.btn-danger:hover{filter:brightness(.95)}.btn-sm{padding:.35rem .7rem;font-size:var(--text-xs)}.btn-block{width:100%}.btn-icon{padding:.5rem;border-radius:var(--radius-md)}.field{display:flex;flex-direction:column;gap:var(--space-2)}.label{font-size:var(--text-sm);font-weight:600;color:var(--text-muted)}.input,.select{width:100%;padding:.6rem .8rem;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-md);color:var(--text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}.input::placeholder{color:var(--text-faint)}.form-error{color:var(--critical);font-size:var(--text-sm)}.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh}.app-main{display:flex;flex-direction:column;min-width:0}.app-content{padding:var(--space-6);max-width:1200px;width:100%;margin:0 auto}.sidebar{background:var(--bg-elevated);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--space-4);gap:var(--space-2);position:sticky;top:0;height:100vh}.sidebar-brand{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-4);font-weight:700;font-size:var(--text-lg)}.sidebar-brand .brand-mark{width:34px;height:34px;border-radius:var(--radius-md);background:var(--accent);color:var(--accent-contrast);display:grid;place-items:center}.nav{display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;gap:var(--space-3);padding:.6rem .8rem;border-radius:var(--radius-md);color:var(--text-muted);font-weight:600;font-size:var(--text-sm);transition:background var(--transition-fast),color var(--transition-fast)}.nav-link:hover{background:var(--surface-alt);color:var(--text);text-decoration:none}.nav-link.active{background:var(--accent-soft);color:var(--accent)}.nav-badge{margin-left:auto}.app-header{height:var(--header-height);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-6);border-bottom:1px solid var(--border);background:var(--bg-elevated);position:sticky;top:0;z-index:10}.conn-dot{width:9px;height:9px;border-radius:var(--radius-full);background:var(--text-faint);flex:none}.conn-dot.open{background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 25%,transparent)}.conn-dot.connecting,.conn-dot.reconnecting{background:var(--warning)}.conn-dot.closed{background:var(--critical)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:.15rem .55rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;line-height:1.4;border:1px solid transparent}.toast-host{position:fixed;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);z-index:1000;max-width:min(380px,calc(100vw - 2 * var(--space-5)))}.toast{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--border);border-left-width:4px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:toast-in .18s ease}.toast-info{border-left-color:var(--info)}.toast-success{border-left-color:var(--success)}.toast-warning{border-left-color:var(--warning)}.toast-error{border-left-color:var(--critical)}.toast-body{min-width:0;flex:1}.toast-title{font-weight:600;font-size:var(--text-sm)}.toast-msg{font-size:var(--text-sm);color:var(--text-muted);word-break:break-word}.toast-close{background:transparent;border:none;color:var(--text-faint);padding:2px;border-radius:var(--radius-sm)}.toast-close:hover{color:var(--text);background:var(--surface-alt)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.spinner{display:inline-block;border-radius:50%;border:2.5px solid var(--border-strong);border-top-color:var(--accent);animation:spin .7s linear infinite}.spinner-center{display:grid;place-items:center;padding:var(--space-8)}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);color:var(--text-muted)}.empty-state .empty-icon{color:var(--text-faint)}.empty-state h3{color:var(--text);font-size:var(--text-lg)}.stat-tile{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5)}.stat-tile .stat-head{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted);font-size:var(--text-sm);font-weight:600}.stat-tile .stat-value{font-size:var(--text-3xl);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stat-tile .stat-unit{font-size:var(--text-lg);color:var(--text-muted);font-weight:600;margin-left:.25rem}.stat-tile .stat-sub{font-size:var(--text-xs);color:var(--text-faint)}.valve-card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5)}.valve-card .valve-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.valve-card .valve-name{font-weight:700;font-size:var(--text-lg)}.valve-card .valve-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.valve-card .valve-metric{display:flex;flex-direction:column}.valve-card .valve-metric .m-value{font-weight:700;font-variant-numeric:tabular-nums}.valve-card .valve-metric .m-label{font-size:var(--text-xs);color:var(--text-faint)}.login-screen{min-height:100vh;display:grid;place-items:center;padding:var(--space-5);background:radial-gradient(1200px 600px at 100% -10%,var(--accent-soft),transparent 60%),var(--bg)}.login-card{width:100%;max-width:400px;padding:var(--space-6)}.login-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}.login-brand .brand-mark{width:44px;height:44px;border-radius:var(--radius-md);background:var(--accent);color:var(--accent-contrast);display:grid;place-items:center}@media (max-width: 860px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:50;transform:translate(-100%);transition:transform var(--transition);width:var(--sidebar-width);box-shadow:var(--shadow-lg)}.sidebar.open{transform:translate(0)}.app-content{padding:var(--space-4)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:40}}@media (min-width: 861px){.menu-btn,.sidebar-backdrop{display:none}}