@import url("../fonts/fonts.baf9e357687e.css");
:root{--accent:#00de85;--accent-soft:#ddfff0;--accent-dark:#006942;--accent-rgb:0,222,133;--fit:1;--density:1;--ink:#080b0d;--muted:#74808b;--font:'Roboto Condensed',Arial,sans-serif;--display:'Orbitron','Arial Black',sans-serif}:root[data-theme=amber]{--accent:#efc313;--accent-soft:#fff5c5;--accent-dark:#7c6000;--accent-rgb:239,195,19}:root[data-theme=red]{--accent:#741e29;--accent-soft:#f0e0e3;--accent-dark:#57121d;--accent-rgb:116,30,41}*{box-sizing:border-box}body{margin:0;background:#edf0f2;color:var(--ink);font-family:var(--font);overflow:hidden}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:wait}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,h3,p{margin:0}.icon{width:25px;height:25px;flex:none;vertical-align:middle}.muted{color:var(--muted)}.accent{color:var(--accent)}.unit{font-family:var(--font);font-size:.42em;margin-left:4px;letter-spacing:0;white-space:nowrap}.unit sup{font-size:.65em}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.viewport{position:fixed;inset:0;overflow:hidden}.app-canvas{position:absolute;left:50%;top:50%;width:1280px;height:720px;margin:-360px 0 0 -640px;transform:scale(var(--fit));overflow:hidden;background:linear-gradient(135deg,#f4f6f8,#fff 40%,#eef1f3);isolation:isolate}.app-canvas::before{content:'';position:absolute;inset:145px 0 0;z-index:-1;background:linear-gradient(45deg,transparent 12%,#d5d9dc70 12.1%,#fff 12.8%,transparent 13%),linear-gradient(135deg,transparent 81%,#dfe3e7 81.2%,#fff 82%,transparent 82.4%)}
.app-header{position:absolute;inset:0 0 auto;height:145px;background:url("../reference-native/home.c2e73d315877.png") 0 0/1280px 720px no-repeat}.brand-link{position:absolute;left:15px;top:5px;width:243px;height:61px}.header-controls{position:absolute;right:17px;top:8px;display:flex;align-items:center;justify-content:flex-end;gap:20px;height:46px;width:288px;padding:0 8px;background:linear-gradient(100deg,#fafbfc,#f7f8fa)}.demo-badge{border:0;padding:0;background:transparent;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;letter-spacing:1.5px;white-space:nowrap}.demo-badge b{width:11px;height:11px;border-radius:50%;background:#00dd90;box-shadow:0 0 9px #00ebaa}.icon-button{background:none;border:0;padding:5px;display:grid;place-items:center}.logout-button{border-left:1px solid #b3b6bb;padding-left:22px}.logout-button .icon{width:29px;height:29px}.header-swatches{display:flex;gap:9px}.swatch{width:14px;height:14px;border-radius:50%;border:0;padding:0}.swatch.green{background:#00d789}.swatch.amber{background:#f8c914}.swatch.red{background:#741e29}.swatch[aria-pressed=true]{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--accent)}
.product-nav{position:absolute;top:64px;left:187px;width:600px;height:74px;display:flex;padding:5px 5px 6px;background:linear-gradient(#989fa1,#0a0e0d 7%,#050706 88%,#697473);clip-path:polygon(4% 0,96% 0,100% 52%,95% 100%,5% 100%,0 44%)}.product-nav a{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(130deg,#090d0c,#000);color:#eceeef;transform:skew(34deg);border-left:1px solid #636d70;border-bottom:2px solid #343b3c;font-size:16px;font-weight:700}.product-nav a>*{transform:skew(-34deg)}.product-nav .icon{width:29px;height:29px}.product-nav a.active{color:var(--accent);border-bottom:3px solid var(--accent);box-shadow:inset 0 0 20px rgba(var(--accent-rgb),.15)}.product-nav a.active span{color:#f6fff9}.footer-nav{position:absolute;left:28px;right:28px;bottom:10px;height:50px;display:flex;gap:5px;padding-right:211px}.footer-nav a{flex:1;background:linear-gradient(130deg,#fff,#f0f2f4);border-top:1px solid #b7bcc1;border-bottom:1px solid #9aa2a9;clip-path:polygon(0 0,86% 0,100% 100%,9% 100%);display:flex;align-items:center;justify-content:center;gap:15px;font-weight:700;font-size:16px;letter-spacing:.6px;padding-left:8px}.footer-nav a:first-child{clip-path:polygon(9% 0,86% 0,100% 100%,9% 100%,0 50%)}.footer-nav a.active{background:radial-gradient(ellipse at top,rgba(var(--accent-rgb),.22),#050908 70%);color:white;border-color:var(--accent)}.footer-nav .icon{width:27px;height:27px}.footer-signature{position:absolute;right:0;bottom:6px;font-size:10px;letter-spacing:2px;color:#616b76;text-align:right;width:190px}.footer-signature::after{content:'';display:block;border-top:1px solid #7b858b;width:85px;margin:8px 0 0 auto}.page-title{font-family:var(--display);font-size:35px;font-weight:900;line-height:1.18;letter-spacing:-1.3px}.section-title{font-size:14px;letter-spacing:.6px;font-weight:700;display:flex;align-items:center;gap:12px}.eyebrow{font-size:11px;letter-spacing:5px;font-weight:600}.underline::after{content:'';display:block;width:56px;border-bottom:4px solid var(--accent);margin-top:7px}.panel-light{background:linear-gradient(125deg,#fff,#f0f2f4);border:1px solid #d3d7da;box-shadow:inset 0 0 0 4px #ffffffb0;clip-path:polygon(4% 0,95% 0,100% 8%,100% 93%,96% 100%,4% 100%,0 92%,0 8%)}
.black-frame{background:linear-gradient(140deg,#f4f5f6,#707579 8%,#f2f4f4 26%,#181c1c 47%,#c5c9cd 80%,#e8ecee);padding:5px;clip-path:polygon(2.5% 0,97.5% 0,100% 15%,100% 83%,97% 100%,3% 100%,0 83%,0 16%)}.black-inner{height:100%;background:linear-gradient(125deg,#0b100f,#050707);color:#f0f4f3;clip-path:polygon(2.5% 0,97.5% 0,100% 15%,100% 83%,97% 100%,3% 100%,0 83%,0 16%)}.action{min-height:39px;display:flex;align-items:center;justify-content:center;gap:13px;background:linear-gradient(135deg,#101716,#030706);border:1px solid #82928a;color:white;clip-path:polygon(5% 0,94% 0,100% 32%,100% 100%,5% 100%,0 64%,0 17%);font-size:15px;font-weight:700;letter-spacing:.4px;padding:5px 15px}.action .icon{width:23px;height:23px}.action.primary{background:linear-gradient(135deg,#dbfff1,var(--accent) 16%,var(--accent) 82%,var(--accent-dark));color:#061a12;border-color:var(--accent);box-shadow:inset 0 0 12px #e8fff999}.action:hover{filter:brightness(1.13)}.action.outline{border:2px solid var(--accent);box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.3)}.action.outline .icon{color:var(--accent)}
.home-heading{position:absolute;left:56px;right:40px;top:149px;height:53px;display:flex;gap:25px}.home-heading .page-title{font-size:34px;white-space:nowrap}.home-subtitle{border-left:1px solid #b0b5bb;padding-left:20px;font-size:15px;color:#737c87;max-width:215px;margin-top:5px;line-height:1.18}.overview-strip{position:absolute;left:40px;right:40px;top:210px;height:62px}.overview-strip .black-inner{display:flex;align-items:center;padding:6px 45px}.overview-stat{flex:1;display:flex;gap:25px;align-items:center;border-right:1px solid var(--accent-dark);padding:0 38px}.overview-stat:first-child{padding-left:8px}.overview-stat:last-child{border:0}.overview-stat .icon{width:32px;height:32px}.overview-stat label{font-size:13px;font-weight:600;white-space:nowrap}.overview-stat strong{font-size:40px;font-weight:800;line-height:1}.product-cards{position:absolute;left:29px;right:27px;top:281px;height:203px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.product-card{position:relative;overflow:hidden;padding:9px 25px 13px 65px;background:linear-gradient(125deg,#fff,#f1f3f5);border:3px solid #bdc2c5;clip-path:polygon(7% 0,94% 0,100% 13%,100% 87%,94% 100%,7% 100%,0 87%,0 17%);box-shadow:inset 0 0 0 3px white}.product-card::before,.product-card::after{content:'';position:absolute;width:23px;height:90px;background:linear-gradient(45deg,#040b08 60%,var(--accent) 63%,#09100d 67%);transform:rotate(-42deg)}.product-card::before{left:0;bottom:-24px}.product-card::after{right:0;top:-24px}.brand-small{font-family:var(--display);letter-spacing:4px;font-size:10px;font-weight:600}.product-card h2{font-family:var(--display);font-size:35px;letter-spacing:-1px;font-weight:900;line-height:1.05;white-space:nowrap}.product-card h2::after{content:'';display:block;width:35px;border-bottom:4px solid var(--accent);margin-top:5px}.card-info{height:70px;display:flex;align-items:center;gap:18px;margin-top:3px}.card-info>.icon{width:71px;height:62px}.card-info>div{border-left:1px solid #abb2b6;padding-left:17px;min-width:0}.card-info small{font-size:14px;display:block;white-space:nowrap}.card-info strong{display:block;font-size:39px;line-height:1.08;font-weight:800}.card-info strong small{display:inline;font-size:27px}.product-card .action{position:absolute;left:78px;right:28px;bottom:10px;height:38px;min-height:38px}
.chart-panel{position:absolute;left:17px;right:17px;top:493px;height:157px}.chart-panel .black-inner{display:flex;padding:10px 29px 8px;gap:20px}.chart-main{flex:1;min-width:0;position:relative}.chart-heading{height:24px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}.chart-heading .icon{width:19px;height:19px}.period-buttons{margin-left:auto;display:flex;gap:7px;align-items:center}.period-buttons button{border:1px solid transparent;background:transparent;color:#d2d9d5;min-width:43px;font-size:11px;height:22px;border-radius:2px}.period-buttons button.active{border-color:var(--accent);color:var(--accent)}.chart-area{height:109px;position:relative;outline:none}.chart-area svg{width:100%;height:100%;display:block;overflow:visible}.chart-tooltip{position:absolute;top:0;background:#090e0ff0;color:#fff;border:1px solid #4a5b56;border-radius:4px;padding:5px 8px;font-size:11px;line-height:1.4;pointer-events:none;z-index:4;white-space:nowrap}.chart-extra{width:253px;border-left:1px solid #535a55;padding-left:19px}.chart-extra h3{font-size:13px;border-bottom:1px solid #363d38;padding-bottom:9px;margin:2px 0 6px}.event{display:grid;grid-template-columns:10px 39px 67px 1fr;gap:5px;align-items:center;font-size:11px;min-height:30px;border-bottom:1px solid #1c2421;white-space:nowrap}.status-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:#00da7b;flex:none}.status-dot.offline{background:#9199a0}.status-dot.warning{background:#eac200}
.device-sidebar{position:absolute;left:20px;top:149px;width:204px;height:318px;padding-top:5px}.side-heading{height:43px;padding:0 14px 12px;border-bottom:1px solid #c8cdd0;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700}.side-heading .icon{width:23px;height:23px}.side-list{margin-top:14px}.side-list button{width:100%;display:flex;align-items:center;justify-content:space-between;height:45px;border:0;background:transparent;padding:0 22px 0 26px;font-size:16px;font-weight:700;text-align:left}.side-list button .icon{width:16px;height:16px}.side-list button.active{background:linear-gradient(100deg,#ebf4f1,#fafbfb);border-left:4px solid var(--accent);border-right:4px solid var(--accent);padding-left:22px;padding-right:18px}.side-list button:hover{background:#e2f1ea}.hero-art{position:absolute;left:700px;top:141px;width:353px;height:359px;background:url("../reference-native/prime.5d44bde56c96.png") -700px -141px/1280px 720px no-repeat;z-index:-1}.hero-art.link{background-image:url("../reference-native/link.7cdcae76af1e.png")}.hero-art.mbus{background-image:url("../reference-native/mbus.4109e402f940.png");left:752px;width:300px;background-position:-752px -141px}.device-content{position:absolute;left:264px;top:158px;width:449px;height:327px}.product-name{font-family:var(--display);font-size:41px;line-height:1.1;font-weight:900;letter-spacing:-1.2px}.device-name{font-weight:800;font-size:22px;margin-top:14px}.location-line{font-size:16px;color:#74808c;display:flex;align-items:center;gap:4px;line-height:1.4}.location-line .icon{width:14px;height:17px}.hero-volume{margin-top:17px}.metric-label{font-size:13px;letter-spacing:3px;font-weight:700}.hero-number{font-size:84px;font-weight:800;line-height:1.03;letter-spacing:-3px;white-space:nowrap}.flow-box{position:absolute;top:247px;left:0;width:301px;height:80px;display:flex;align-items:center;gap:16px;border:1px solid #c6ccd1;clip-path:polygon(0 0,91% 0,100% 32%,100% 100%,9% 100%,0 68%);padding:10px 23px;background:linear-gradient(110deg,#fafbfc,#f1f3f5)}.flow-box>.icon{width:44px;height:44px}.flow-box>div{border-left:1px solid #c1c8cd;padding-left:15px}.flow-box .metric-label{font-size:10px;letter-spacing:2px}.flow-number{font-size:43px;font-weight:800;line-height:1.12;white-space:nowrap}.water-note{position:absolute;left:330px;top:255px;width:143px;border-left:2px solid var(--accent);padding-left:22px;display:flex;gap:12px;align-items:center}.water-note .icon{width:35px;height:45px;color:#66747b}.water-note small{font-size:9px;letter-spacing:1.8px;line-height:1.55}.status-stack{position:absolute;left:1064px;top:149px;width:209px;display:grid;gap:7px}.status-card{height:65px;display:flex;align-items:center;gap:19px;color:white;background:linear-gradient(130deg,#0c1110,#020604);clip-path:polygon(6% 0,89% 0,100% 37%,100% 95%,4% 100%,0 76%,0 9%);border-bottom:2px solid var(--accent-dark);padding:9px 15px 8px 21px}.status-card>.icon{width:37px;height:37px;color:#d9fff2}.status-card div{min-width:0}.status-card small{font-size:10px;letter-spacing:.7px;display:block;text-transform:uppercase}.status-card strong{font-size:27px;font-weight:700;line-height:1.2;white-space:nowrap}.status-card.compact strong{font-size:20px}.status-stack .action{height:42px;min-height:0}.status-stack.link{gap:6px}.status-stack.link .status-card{height:63px}.status-stack.link .action{height:33px;font-size:13px}.detail-chart .chart-extra{width:210px;display:flex;flex-direction:column;justify-content:center;padding-right:2px}.stat-line{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #303a34;padding:9px 1px;align-items:center}.stat-line small{font-size:11px;text-transform:uppercase;letter-spacing:.6px}.stat-line strong{font-size:17px;white-space:nowrap}
.link-metadata{display:flex;align-items:flex-end;justify-content:space-between;width:413px}.imei{font-size:14px;padding-bottom:3px}.imei small{display:block;color:#727d87;letter-spacing:1px;font-size:10px}.imei button{border:0;background:none;padding:0;margin-left:5px}.imei .icon{width:15px;height:15px}.dual-meters{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:17px}.meter-reading{min-width:0}.meter-reading+.meter-reading{border-left:1px solid var(--accent);padding-left:21px}.meter-reading .metric-label{font-size:10px;letter-spacing:2.3px}.meter-reading strong{font-size:50px;line-height:1.13;white-space:nowrap;font-weight:800;letter-spacing:-1.3px}.meter-reading small{display:flex;gap:7px;align-items:center;color:#79838e;font-size:13px;margin-top:5px;white-space:nowrap}.meter-reading small .icon{width:21px;height:21px;color:var(--accent-dark)}.link-diagram{position:absolute;left:55px;top:242px;display:grid;grid-template-columns:55px 97px 230px;align-items:center}.modem-icon .icon{width:45px;height:43px;color:#176f56}.modem-icon strong,.modem-icon small{display:block;text-align:center;font-size:10px}.branches{height:70px;position:relative}.branches::before{content:'';position:absolute;left:0;right:0;top:35px;border-top:2px solid var(--accent)}.branches::after{content:'';position:absolute;left:60px;top:9px;width:36px;height:51px;border:2px solid var(--accent);border-right:0;background:#f7faf9}.end-meter{display:flex;gap:14px;align-items:center;margin:0 0 13px 6px}.end-meter>.icon{width:34px;height:34px}.end-meter strong{font-size:11px}.end-meter small{display:block;font-size:12px;color:#77818a}.mbus-content .hero-volume{width:280px;margin-top:15px}.mbus-content .hero-number{font-size:70px;letter-spacing:-2px}.mbus-flow{margin-top:6px}.mbus-flow strong{font-size:44px;line-height:1.1}.module-photo{position:absolute;left:280px;top:109px;width:210px;height:190px;background:url("../reference-native/mbus.4109e402f940.png") -541px -267px/1280px 720px no-repeat}.mbus-content .location-line{font-size:18px}
.registry-heading{position:absolute;left:29px;right:25px;top:151px;height:45px;display:flex;align-items:center;gap:22px}.registry-heading .section-title{width:170px;flex:none;border-right:1px solid #b6bec5}.registry-heading h1{font-size:32px}.registry-heading .count{font-size:31px;font-weight:800;border-left:1px solid #cad0d5;padding-left:14px}.registry-body{position:absolute;left:21px;top:204px;width:969px;height:440px;background:#ffffffd9;clip-path:polygon(1% 0,99% 0,100% 3%,100% 97%,99% 100%,1% 100%,0 97%,0 3%);padding:8px 10px;border:1px solid #dde2e5}.filters{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.07fr;gap:10px;height:42px;margin-bottom:10px}.field{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid #d7dce1;border-radius:5px;background:#f6f8fa;padding:0 12px}.field .icon{width:22px;height:22px}.field input{border:0;outline:0;background:transparent;min-width:0;width:100%;font-size:14px}.select-control{width:100%;background:#f7f9fb;border:1px solid #d7dce1;border-radius:5px;padding:6px 12px;color:#28343a;font-size:14px}.filters .action{font-size:13px}.table-wrap{border:1px solid #d8dee2;border-radius:5px;overflow:hidden;background:white;height:309px}.device-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:14px}.device-table th{height:39px;font-weight:600;font-size:12px;text-align:left;background:#f0f3f6;border-bottom:1px solid #dce1e5;padding:0 12px;white-space:nowrap}.device-table td{height:33.5px;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-table tbody tr:nth-child(even){background:#f2f5f7}.device-table tbody tr{cursor:pointer}.device-table tbody tr:hover{background:#e9fff4}.device-table tbody tr.selected{background:var(--accent-soft);box-shadow:inset 3px 0 var(--accent)}.device-table th:nth-child(1){width:40px}.device-table th:nth-child(2){width:114px}.device-table th:nth-child(3){width:210px}.device-table th:nth-child(4){width:123px}.device-table th:nth-child(5){width:165px}.device-table th:nth-child(6){width:123px}.device-table td .status-dot{margin-right:6px}.device-table td.node{font-weight:700}.battery-inline{display:inline-flex;align-items:center;gap:8px}.battery-inline .icon{width:25px;height:18px;color:#00bf72}.battery-inline.low .icon{color:#b8192e}.table-volumes{display:flex;gap:9px;font-size:11px}.table-volumes small{font-size:9px;color:#6f7780;display:block}.pagination{display:flex;align-items:center;gap:8px;margin-top:16px}.pagination button{min-width:36px;height:36px;background:linear-gradient(#fff,#f5f7f9);border:1px solid #dce1e5;border-radius:4px;font-size:15px}.pagination button.active{background:#071b13;color:white;border-color:var(--accent);box-shadow:0 0 7px rgba(var(--accent-rgb),.3)}.pagination .icon{width:17px;height:17px}.pagination .previous .icon{transform:rotate(180deg)}.table-totals{margin-left:auto;display:flex;gap:27px;color:#62717b;font-size:13px;padding-right:3px}.table-totals .status-dot{margin-right:7px}.device-inspector{position:absolute;left:999px;top:194px;width:274px;height:451px;background:linear-gradient(145deg,#f1f5f3,#7f8585 10%,#fff 23%,#939994 60%,#fff);padding:5px;clip-path:polygon(7% 0,84% 0,100% 12%,100% 93%,93% 100%,7% 100%,0 93%,0 7%)}.inspector-inner{height:100%;background:linear-gradient(130deg,#0c100f,#040605);color:#f5f8f6;padding:16px 13px;clip-path:inherit}.inspector-name{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}.inspector-name h2{font-size:26px}.inspector-name span{font-size:12px;color:var(--accent);white-space:nowrap}.inspector-inner .location-line{font-size:13px;color:#d4d9d6;margin-top:8px}.inspector-inner .location-line .icon{width:19px;height:21px}.inspector-metrics{border:1px solid #2b322f;border-radius:5px;margin-top:19px}.inspector-row{padding:12px 11px;min-height:77px;border-bottom:1px solid #2a302e;display:flex;gap:16px;align-items:center}.inspector-row:last-child{border:0}.inspector-row>.icon{width:34px;height:34px;color:var(--accent)}.inspector-row small{display:block;font-size:11px;letter-spacing:1px}.inspector-row strong{font-size:29px;line-height:1.1;white-space:nowrap}.inspector-row strong .unit{font-size:12px}.inspector-row .two-values{display:flex;gap:12px}.inspector-row .two-values strong{font-size:19px}.inspector-row .two-values small{font-size:9px;letter-spacing:0}.inspector-inner>.action{margin-top:11px;font-size:12px;width:100%;height:48px}
.settings-sidebar{height:312px}.settings-sidebar .side-list button{font-size:14px;padding-right:12px}.settings-main{position:absolute;left:263px;top:159px;width:558px}.settings-main .page-title{font-size:36px;letter-spacing:-1.6px;margin-top:2px;white-space:nowrap}.settings-subtitle{font-size:12px;letter-spacing:2px;color:#7d8590;margin-top:10px}.setting-label{font-size:14px;font-weight:700;letter-spacing:2px;margin:23px 0 9px}.theme-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.theme-choice{background:#fafbfc;border:1px solid #dce1e4;border-radius:12px;padding:9px 9px 11px;position:relative;height:165px;text-align:center;overflow:hidden}.theme-choice.selected{border:2px solid var(--accent);padding:8px}.theme-thumb{height:98px;overflow:hidden;background:url("../reference-native/settings.2c6ae021cd03.png") -272px -308px/1280px 720px;border-radius:2px}.theme-choice.amber .theme-thumb{filter:hue-rotate(295deg)}.theme-choice.red .theme-thumb{filter:hue-rotate(153deg) saturate(.55)}.choice-check{position:absolute;right:8px;top:8px;width:27px;height:27px;background:var(--accent);border-radius:50%;border:2px solid white;color:white;display:grid;place-items:center}.choice-check .icon{width:19px;height:19px}.theme-choice strong{display:block;font-size:16px;margin-top:10px}.theme-choice small{font-size:9px;letter-spacing:.6px;color:#79838a;display:block;margin-top:3px}.setting-lower{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin-top:24px}.setting-lower .setting-label{font-size:13px;letter-spacing:1px;margin-top:0}.segmented{display:flex;height:60px;border:1px solid #d7dce1;border-radius:8px;overflow:hidden;background:#fafbfc}.segmented button{flex:1;border:0;border-right:1px solid #d7dce1;background:none;font-size:14px;min-width:0;padding:6px 3px}.segmented button.selected{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:7px}.segmented button small{display:block;font-size:9px;color:#66747c;margin-top:6px}.preview-frame{position:absolute;left:840px;top:166px;width:428px;height:438px;padding:8px;clip-path:polygon(8% 0,92% 0,100% 9%,100% 92%,92% 100%,8% 100%,0 91%,0 8%);background:linear-gradient(135deg,#515659,#eee 11%,#777 55%,#eee 90%,#494c4f)}.preview-inner{height:100%;background:#050907;color:white;clip-path:inherit;padding:21px 31px}.preview-inner h3{font-size:14px;letter-spacing:1.5px}.preview-inner>small{font-size:11px;letter-spacing:2px;display:block;margin-top:4px}.preview-viewport{height:263px;margin-top:12px;display:grid;place-items:center;overflow:hidden}.preview-widget{width:285px;height:204px;border:1px solid var(--accent);padding:12px;clip-path:polygon(6% 0,94% 0,100% 10%,100% 90%,94% 100%,6% 100%,0 90%,0 10%);background:linear-gradient(135deg,#0a1110,#020605);transform:scale(var(--preview-scale,1));transform-origin:center;display:grid;grid-template-columns:1.7fr 1fr;gap:6px}.preview-brand{grid-column:1/3;display:flex;justify-content:space-between;font-family:var(--display);font-size:19px;letter-spacing:3px}.preview-brand span{font-family:var(--font);font-size:10px;letter-spacing:0;color:var(--accent)}.preview-cell{border:1px solid #2b3430;padding:6px;display:flex;align-items:center;gap:7px}.preview-cell small{font-size:8px;letter-spacing:.6px;display:block}.preview-cell strong{font-size:24px;white-space:nowrap}.preview-cell>.icon{width:23px;height:23px;color:var(--accent)}.preview-cell.compact strong{font-size:16px}.preview-inner .action{height:54px;width:100%;font-size:22px;margin-top:5px}.settings-account{padding:30px 8px}.settings-account .field{height:48px;margin:15px 0}.settings-account h2{font-family:var(--display);font-size:28px}.settings-account label{display:flex;gap:10px;align-items:center;margin:18px 0}
.reports-heading{position:absolute;left:39px;right:25px;top:149px;height:76px;display:flex;gap:30px}.reports-title{width:463px;flex:none}.reports-title h1{font-size:33px}.reports-title small{font-size:12px;letter-spacing:1.7px;color:#6e7881}.summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1}.summary-card{height:74px;padding:9px 13px 9px 17px;display:flex;gap:15px;align-items:center;background:linear-gradient(125deg,#fff,#f4f6f8);border-left:2px solid var(--accent);clip-path:polygon(0 0,88% 0,100% 32%,100% 82%,94% 100%,0 100%)}.summary-card .icon{width:32px;height:32px}.summary-card label{font-size:11px;letter-spacing:1.5px;display:block;font-weight:700}.summary-card strong{font-size:36px;line-height:1;white-space:nowrap;font-weight:800}.summary-card strong .unit{font-size:16px}.report-filters{position:absolute;left:39px;right:25px;top:229px;height:35px;display:flex;align-items:center;gap:15px;font-size:12px;font-weight:700}.date-range{display:flex;gap:7px;align-items:center;padding:4px 8px;background:#fff;border:1px solid #d4d9dc;border-radius:3px;height:35px}.date-range input{width:117px;border:0;background:none;font-size:13px;min-width:0}.report-filters .select-control{width:216px;height:35px}.filter-divider{height:32px;border-left:1px solid var(--accent);margin:0 12px}.reports-chart{top:273px;height:190px}.reports-chart .black-inner{padding:8px 24px}.reports-chart .chart-area{height:145px}.report-bottom{position:absolute;left:20px;right:18px;top:470px;height:184px;display:grid;grid-template-columns:2.17fr 1fr;gap:17px}.report-comparison{background:#ffffffd9;border:1px solid #d5dce0;padding:7px 10px}.report-comparison .section-title{height:26px}.report-comparison table{width:100%;border-collapse:collapse;font-size:12px;margin-top:5px;table-layout:fixed}.report-comparison th{background:#e9edf0;height:25px;font-size:10px;text-align:left}.report-comparison td{height:23px;padding:2px 6px;white-space:nowrap}.report-comparison tr:nth-child(even){background:#f1f4f5}.report-comparison tfoot{font-weight:700;background:#e9edf0}.distribution{border-left:1px solid #a9b1b5;padding-left:16px}.distribution .section-title{font-size:14px;margin-bottom:4px}.donut-content{display:flex;align-items:center;gap:18px;height:112px}.donut{width:111px;height:111px;border-radius:50%;display:grid;place-items:center;flex:none}.donut>div{width:74px;height:74px;background:#f8fafb;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}.donut strong{font-size:20px}.donut small{font-size:9px}.legend{font-size:12px;width:100%}.legend-row{display:flex;align-items:flex-start;gap:7px;margin:5px 0}.legend-row .status-dot{margin-top:3px}.legend-row small{display:block;color:#76808a;font-size:10px}.legend-row b{margin-left:auto;font-size:11px}.exports{display:flex;gap:8px;margin-top:4px}.exports .action{flex:1;font-size:12px;height:35px;min-height:0;padding:4px}.exports .icon{width:20px;height:20px}
.map-summary{position:absolute;left:24px;right:18px;top:146px;height:61px;display:flex;background:linear-gradient(100deg,#fff,#f3f6f7);border-bottom:1px solid #d5dbdf}.map-stat{display:flex;align-items:center;gap:16px;flex:1;padding:4px 22px;border-right:1px solid #ccd1d5}.map-stat>.icon{width:34px;height:34px}.map-stat small{font-size:10px;letter-spacing:1.5px;display:block}.map-stat strong{font-size:32px;line-height:1.1}.map-stat.water{flex:1.5}.map-caption{width:166px;padding:12px;font-size:11px;letter-spacing:2px}.map-caption small{display:block;letter-spacing:1px;margin-top:5px;color:#65717b}.map-sidebar{position:absolute;left:25px;top:219px;width:190px;height:413px;background:#fafcfd;padding:0 8px}.map-sidebar .field{height:37px;padding:0 8px}.map-sidebar .field input{font-size:12px}.filter-heading{font-size:13px;font-weight:700;margin:18px 0 9px;display:flex;gap:7px;align-items:center}.filter-heading .icon{width:18px;height:18px}.map-type{height:35px;border:1px solid #e0e5e8;border-bottom:0;padding:5px 8px;display:flex;align-items:center;gap:11px;font-size:13px}.map-type input{accent-color:var(--accent);width:17px;height:17px;margin:0}.map-type>.icon{width:23px;height:23px}.map-type small{margin-left:auto;color:#6d7b84}.map-status{display:flex;align-items:center;gap:12px;height:33px;padding:5px 8px;font-size:13px;border-bottom:1px solid #e9edef}.map-status small{margin-left:auto;color:#6d7b84}.map-canvas{position:absolute;left:232px;top:213px;width:756px;height:432px;background:#eff2f2;overflow:hidden;clip-path:polygon(0 0,98% 0,100% 4%,100% 100%,2% 100%,0 94%)}.map-canvas iframe{width:100%;height:100%;border:0}.map-inspector{top:214px;height:416px;left:996px;width:277px}.map-inspector .inspector-inner{padding:15px 14px}.map-inspector .inspector-name h2{font-size:22px}.map-inspector .inspector-metrics{margin-top:13px}.map-inspector .inspector-row{min-height:69px;padding:10px}.map-inspector .inspector-row strong{font-size:28px}.map-inspector .inspector-row.split{gap:15px}.map-inspector .inspector-row.split>div{display:flex;gap:7px;align-items:center;flex:1}.map-inspector .inspector-row.split .icon{width:28px;height:28px;color:var(--accent)}.map-inspector .inspector-row.split strong{font-size:18px}.map-inspector .inspector-row.split small{font-size:9px}.map-inspector .action{font-size:14px}.map-device-picker{position:absolute;bottom:9px;left:10px;max-width:330px;display:flex;gap:4px;flex-wrap:wrap;padding:6px;background:#ffffffec;border-radius:6px;box-shadow:0 2px 8px #0002}.map-device-picker button{font-size:11px;border:1px solid #ccd7d0;background:white;padding:5px 7px;border-radius:3px}.map-device-picker button.active{background:var(--accent-soft);border-color:var(--accent)}.map-loader{position:absolute;inset:0;display:grid;place-items:center;font-size:15px}
dialog{border:1px solid #8fa69b;padding:28px;background:#fafcfb;border-radius:8px;max-width:min(94vw,480px);width:480px;box-shadow:0 14px 80px #0006}dialog::backdrop{background:#04100bab}dialog h2{font-family:var(--display);font-size:21px;margin-bottom:20px}dialog .dialog-close{position:absolute;top:10px;right:10px;background:none;border:0}dialog label{font-size:14px;display:block;margin:13px 0 5px}dialog input,dialog select{width:100%;height:42px;border:1px solid #c8d0cc;border-radius:4px;padding:8px;background:white}dialog .action{width:100%;margin-top:20px}dialog .error{color:#741e29;margin:10px 0;font-size:14px}.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px}.detail-list dt{color:#738179}.detail-list dd{margin:0;font-weight:600;overflow-wrap:anywhere}#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;padding:12px 20px;background:#091c15;color:white;border:1px solid var(--accent);border-radius:5px;box-shadow:0 6px 25px #0004;max-width:90vw;font-size:15px;text-align:center}
.login-art{position:absolute;inset:0;background:url("../reference-native/login.0f45ccf02f33.png") 0 0/1280px 720px}.login-brand{position:absolute;left:24px;top:8px;width:260px;height:73px}.login-tools{position:absolute;left:859px;top:18px;height:56px;right:43px;background:#f9fafb;display:flex;align-items:flex-start;gap:30px}.swatch-group{display:flex;gap:14px;position:relative;padding:9px 13px 23px}.swatch-group .swatch{width:19px;height:19px}.swatch-group small{position:absolute;left:39px;top:38px;font-size:10px;letter-spacing:3px}.login-tools .demo-badge{height:40px;border-left:1px solid #aeb4b9;padding-left:30px}.login-door{border-left:1px solid #aeb4b9;padding-left:29px;margin-top:6px}.login-door .icon{width:30px;height:30px}.login-form{position:absolute;left:756px;top:136px;width:483px;height:514px;padding:3px 7px;background:linear-gradient(105deg,#fafbfc,#f7f9fa 68%,#f4f6f8)}.login-form .eyebrow{font-size:10px;letter-spacing:6px;margin-bottom:10px}.login-form h1{font-family:var(--display);font-size:41px;font-weight:900;letter-spacing:-1.3px;margin-bottom:37px;white-space:nowrap}.login-form>label:not(.remember){display:block;font-size:16px;font-weight:700;letter-spacing:2px;margin-bottom:8px}.credential-frame{height:55px;display:flex;align-items:center;border:1px solid #b8bec4;border-left:3px solid var(--accent);border-radius:1px;background:linear-gradient(100deg,#fff,#f1f3f5);margin-bottom:25px;clip-path:polygon(0 0,97% 0,100% 25%,100% 100%,0 100%)}.credential-frame>span{width:62px;height:32px;border-right:1px solid #dce0e2;display:grid;place-items:center;flex:none}.credential-frame .icon{width:26px;height:26px}.credential-frame input{flex:1;min-width:0;border:0;background:none;font-size:18px;padding:0 13px;height:100%;outline:none;color:#20282d}.credential-frame input[type=password]{letter-spacing:4px;font-size:23px}.credential-frame input[type=password]::placeholder{color:#111b20;opacity:1}.credential-frame input::placeholder{color:#7a838c}.credential-frame button{height:100%;width:72px;border:0;border-left:1px solid #bfc7cb;background:transparent;flex:none}.remember{display:flex;gap:13px;align-items:center;font-size:17px;margin:22px 0 25px;height:25px;cursor:pointer}.remember input{width:23px;height:23px;accent-color:var(--accent);margin:0}.login-form .action{height:75px;font-size:28px;letter-spacing:.4px;width:100%}.login-form .action .icon{width:30px;height:30px}.login-note{text-align:center;color:#838b95;font-size:15px;margin-top:33px;padding:0 40px}.login-note.error,.error{color:#741e29}
:root[data-theme=amber] .hero-art,:root[data-theme=amber] .login-art{filter:hue-rotate(295deg)}:root[data-theme=red] .hero-art,:root[data-theme=red] .login-art{filter:hue-rotate(153deg) saturate(.55) brightness(.95)}
@media(prefers-reduced-motion:no-preference){.action,.product-nav a,.footer-nav a{transition:filter .12s,color .12s}.screen-content{animation:appear .14s ease-out}@keyframes appear{from{opacity:.65}to{opacity:1}}}
/* Reference alignment: independent content and decorative frame slices. */
.app-header{background:none}
.app-header::before{content:'';position:absolute;inset:0;background:url("../reference-native/home.c2e73d315877.png") 0 0/1280px 720px no-repeat;z-index:-1}
.app-canvas:not([data-page=home]) .app-header::before{background-image:url("../reference-native/prime.5d44bde56c96.png")}
.product-nav{width:598px;filter:drop-shadow(0 2px 2px #0005);padding:7px 9px 8px}
.product-nav a{font-family:Arial,sans-serif;font-size:16px;gap:15px;border-top:1px solid #252c29}
.product-nav a.active{box-shadow:inset 0 -3px 10px rgba(var(--accent-rgb),.42),inset 0 2px 0 var(--accent)}
.product-nav a:nth-child(1){flex:1.18}.product-nav a:nth-child(2){flex:1.1}.product-nav a:nth-child(3){flex:.95}
.footer-nav{gap:5px;padding-right:205px}
.footer-nav a:nth-child(1){flex:.9}.footer-nav a:nth-child(2){flex:1.3}.footer-nav a:nth-child(3){flex:1}.footer-nav a:nth-child(4){flex:1.24}
.footer-nav a{font-family:Arial,sans-serif;font-size:14px;letter-spacing:.2px}
.footer-nav a.active{background:radial-gradient(ellipse 50% 17% at top,var(--accent),transparent 95%),linear-gradient(110deg,#080d0b,#020403);box-shadow:inset 0 0 13px rgba(var(--accent-rgb),.3)}
.home-heading .page-title{font-size:39px;letter-spacing:-1px;width:580px;flex:none;transform:scaleX(1.09);transform-origin:left top}
.home-heading{gap:24px}.home-subtitle{margin-left:0;font-size:16px}
.page-title{font-weight:900}
.product-card{padding-left:70px}
.product-card h2{font-size:36px;transform:scaleX(1.3);transform-origin:left center;width:76%}
.product-card .brand-small{font-size:10px}
.card-info{gap:20px;margin-top:8px;height:70px}
.card-info>div{padding-left:18px}.card-info small{font-size:14px}
.card-info strong{font-family:Arial,sans-serif;font-size:41px;font-weight:900;letter-spacing:-1.5px}
.card-info strong small{font-family:Arial,sans-serif;letter-spacing:-.5px}
.overview-stat{gap:28px;padding:0 65px}
.overview-stat label{font-size:13px;letter-spacing:.6px}
.overview-stat strong{font-family:Arial,sans-serif;font-size:42px;font-weight:900}
.overview-stat .icon{width:34px;height:34px}
.overview-strip{clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%);padding:4px}
.overview-strip .black-inner{clip-path:inherit;box-shadow:inset 0 0 0 1px var(--accent-dark)}
.product-card{background:linear-gradient(135deg,#fff 4%,#f1f4f6 7%,#fff 8%,#f5f7f8 93%,#d8dce0 94%,#fff 98%);box-shadow:inset 0 0 0 3px white,inset 0 0 0 5px #d6dbde}
.product-card::before{width:37px;height:99px;left:0;bottom:-24px}.product-card::after{width:37px;height:93px;right:0;top:-26px}
.product-card .action{bottom:11px;left:80px;right:28px;height:39px;font-family:Arial,sans-serif;font-size:14px}
.action{clip-path:polygon(5% 0,94% 0,100% 32%,100% 79%,95% 100%,5% 100%,0 68%,0 25%);box-shadow:inset 0 0 0 1px #ffffff20}
.action.primary{background:linear-gradient(140deg,#86ffda,var(--accent) 25%,var(--accent) 77%,#ffffff60 78%,var(--accent) 79%);box-shadow:inset 0 0 0 2px #afffdd,inset 0 0 15px #fff7}
.action.outline{box-shadow:inset 0 0 0 1px #a0ffc9,inset 0 0 17px rgba(var(--accent-rgb),.45)}
.login-form h1{font-size:43px;line-height:1.15;letter-spacing:-.8px;transform:scaleX(1.3);transform-origin:left center;margin-top:12px;margin-bottom:37px;width:76%}
.login-form .eyebrow{margin-bottom:0}
.login-form{background:linear-gradient(105deg,#fafbfc,#f7f9fa 68%,#f4f6f8)}
.login-form .credential-frame{margin-bottom:26px}
.login-note{font-family:Arial,sans-serif;font-size:14px;margin-top:35px;padding:0 15px;white-space:nowrap}
.login-form .action{font-family:Arial,sans-serif;font-size:28px;font-weight:800}
.hero-art{clip-path:polygon(34% 0,100% 0,100% 100%,55% 100%,30% 70%,16% 70%,1% 47%,14% 26%,2% 26%)}
.hero-art.mbus{clip-path:polygon(20% 0,100% 0,100% 100%,55% 100%,0 40%,0 15%)}
.device-content .product-name{font-size:42px;letter-spacing:.4px;transform:scaleX(1.36);transform-origin:left center;width:73%;margin-top:1px}
.device-name{margin-top:12px;font-family:Arial,sans-serif;font-size:20px}
.location-line{font-family:Arial,sans-serif;font-size:13px}
.hero-number{font-family:Arial,sans-serif;font-size:88px;font-weight:900;letter-spacing:-5px;line-height:1.07}
.hero-volume{margin-top:21px}
.hero-number .unit{font-size:34px;letter-spacing:0}
.metric-label{font-family:Arial,sans-serif;font-size:12px}
.flow-box{top:248px}.flow-number{font-family:Arial,sans-serif;font-size:44px;font-weight:800;letter-spacing:-1px}
.flow-number .unit{font-size:23px}
.water-note{width:185px;left:332px;top:257px;padding-left:22px;gap:12px}
.water-note small{font-family:Arial,sans-serif;font-size:9px;letter-spacing:1.1px}
.status-stack{gap:6px}
.status-card{height:64px;gap:21px;padding-left:22px;box-shadow:inset 0 0 7px #819e9144}
.status-card strong{font-family:Arial,sans-serif;font-size:25px;font-weight:700}
.status-card small{font-size:11px}
.status-stack .action{height:43px;font-size:16px}
.status-stack.link{gap:6px}
.status-stack.link .status-card{height:63px}
.status-stack.link .action{height:33px}
.status-stack{z-index:3}
.detail-chart{clip-path:polygon(2.5% 0,80% 0,83% 27%,97.5% 27%,100% 45%,100% 82%,97.5% 100%,2.5% 100%,0 82%,0 17%)}
.detail-chart>.black-inner{clip-path:polygon(2.5% 0,80% 0,83% 27%,97.5% 27%,100% 45%,100% 82%,97.5% 100%,2.5% 100%,0 82%,0 17%);gap:20px}
.detail-chart .chart-extra{padding-top:32px;justify-content:flex-start;overflow:hidden;width:210px}
.detail-chart .stat-line{padding:6px 0;min-height:27px}
.detail-chart .chart-extra h3{font-size:10px;padding-bottom:5px;margin:0}
.stat-line strong{font-family:Arial,sans-serif;font-size:14px}.stat-line .unit{font-size:11px}
.stat-line small{font-size:10px}
.link-metadata{width:418px;position:relative}
.link-metadata .imei{position:absolute;left:267px;top:-5px;white-space:nowrap;font-size:15px}
.dual-meters{margin-top:18px;gap:17px;width:455px;grid-template-columns:220px 218px}
.meter-reading+.meter-reading{padding-left:20px}
.meter-reading strong{font-family:Arial,sans-serif;font-size:47px;font-weight:900;letter-spacing:-2.3px}
.meter-reading strong .unit{font-size:21px;letter-spacing:0;margin-left:4px}
.meter-reading small{font-size:13px;gap:9px}
.link-diagram{top:241px}
.mbus-content .hero-number{font-family:Arial,sans-serif;font-size:67px;letter-spacing:-3px}
.mbus-content .hero-number .unit{font-size:28px}
.mbus-content .hero-volume{margin-top:20px}
.mbus-content .location-line{font-size:16px}
.mbus-flow strong{font-family:Arial,sans-serif;font-size:44px;font-weight:900}
.mbus-flow .unit{font-size:23px}
.module-photo{clip-path:polygon(4% 2%,98% 0,100% 100%,1% 96%,0 16%)}
.inspector-inner{padding-top:13px}
.inspector-row{min-height:63px;height:63px;padding:8px 11px}
.inspector-metrics{margin-top:15px}
.inspector-inner>.action{height:49px;margin-top:14px;font-size:12px;min-height:0}
.inspector-row strong{font-family:Arial,sans-serif;font-size:26px}
.inspector-row .two-values{gap:9px}
.inspector-row .two-values strong{font-size:17px}
.inspector-row:has(.two-values){gap:8px;padding-left:7px}
.inspector-row:has(.two-values)>.icon{width:24px;height:24px}
.inspector-name h2{font-family:Arial,sans-serif;font-size:24px}
.device-table{font-family:Arial,sans-serif;font-size:12px}
.device-table th{font-size:10px;padding:0 11px}.device-table td{padding:0 11px}
.table-volumes{font-size:10px}
.registry-heading h1{font-size:34px;transform:scaleX(1.08);transform-origin:left center;margin-right:34px}
.registry-heading .count{font-family:Arial,sans-serif;font-size:30px}
.chart-heading{font-size:14px;letter-spacing:.2px}
.event{font-size:11px;grid-template-columns:10px 39px 65px 1fr;gap:5px}
.chart-extra h3{font-size:14px}
.reports-title .page-title{font-size:33px;transform:scaleX(1.13);transform-origin:left center}
.summary-card strong{font-family:Arial,sans-serif;font-weight:900;font-size:36px;letter-spacing:-1.5px}
.summary-card strong .unit{font-size:20px;margin-left:5px}
.summary-card label{font-size:12px}
.report-comparison table{font-family:Arial,sans-serif;font-size:11px}
.report-comparison th{font-size:9px}.report-comparison .section-title{font-size:13px}
.legend{font-family:Arial,sans-serif;font-size:11px}
.theme-thumb{background-size:1536px 864px;background-position:-326px -370px}
.theme-choice.amber .theme-thumb{filter:url(#artk-amber)}
.theme-choice.red .theme-thumb{filter:url(#artk-red)}
.settings-main .page-title{font-size:40px;letter-spacing:-.7px;transform:scaleX(1.17);transform-origin:left center;width:85%}
.setting-label{font-size:14px}
.preview-inner{padding:19px 25px}
.preview-inner h3{font-family:Arial,sans-serif;font-size:12px;letter-spacing:2px}
.preview-viewport{height:264px;overflow:visible}
.preview-widget{width:340px;height:234px;padding:13px;transform:scale(var(--preview-scale));grid-template-columns:1.8fr 1fr;position:relative;clip-path:none;border:2px solid var(--accent-dark);border-radius:18px;background:linear-gradient(135deg,#151c19,#000);box-shadow:inset 0 0 0 1px #798e82,0 0 10px #00ff8a0c}
.preview-brand{height:40px;align-items:center;letter-spacing:3px;font-size:26px}
.preview-logo{width:181px;height:45px;background:url("../reference-native/settings.2c6ae021cd03.png") -893px -252px/1280px 720px no-repeat}
.preview-brand span{display:flex;align-items:center;gap:5px;color:white;font-size:11px}
.preview-brand .icon{width:25px;height:25px;color:var(--accent)}
.preview-cell strong{font-family:Arial,sans-serif;font-size:30px;letter-spacing:-1.1px}
.preview-cell .unit{font-size:14px;letter-spacing:0}
.preview-cell small{font-size:9px;letter-spacing:1px}
.preview-cell.compact strong{font-size:16px;letter-spacing:0}
.preview-cell.compact small{font-size:7px}
.preview-inner .action{margin-top:10px;height:56px;font-family:Arial,sans-serif;font-size:23px}
:root[data-theme=amber] .app-header::before,:root[data-theme=amber] .hero-art,:root[data-theme=amber] .login-art,:root[data-theme=amber] .preview-logo{filter:url(#artk-amber)}
:root[data-theme=red] .app-header::before,:root[data-theme=red] .hero-art,:root[data-theme=red] .login-art,:root[data-theme=red] .preview-logo{filter:url(#artk-red)}
:root[data-theme=red] .action.primary{color:#fff;box-shadow:inset 0 0 0 1px #e8a5af,inset 0 0 10px #ba5d6844}
.map-inspector .inspector-row{height:auto;min-height:66px}
.map-stat{padding:4px 18px;gap:12px}.map-stat small{letter-spacing:1px}
.map-stat strong{font-family:Arial,sans-serif;font-weight:900;font-size:29px}
.map-stat.water{flex:1.5}.map-stat.water strong{font-size:27px;white-space:nowrap}
.map-stat.water .unit{font-size:18px}
.viewport:has(.stage-space){overflow:auto}
.stage-space{position:relative;width:calc(1280px * var(--stage-scale,1));height:calc(720px * var(--stage-scale,1));margin:max(0px,calc((100vh - 720px * var(--stage-scale,1))/2)) auto 0}
.stage-space .app-canvas{top:0;left:0;margin:0;transform:scale(var(--stage-scale,1));transform-origin:top left}

.preview-widget{transform:none}.preview-cell strong{font-size:calc(28px * var(--preview-scale));letter-spacing:-1px}.preview-cell.compact strong{font-size:calc(16px * var(--preview-scale));letter-spacing:0}.preview-cell small{font-size:calc(8px * var(--preview-scale))}.preview-cell.compact small{font-size:calc(7px * var(--preview-scale));letter-spacing:.2px}.preview-cell>.icon{width:calc(24px * var(--preview-scale));height:calc(24px * var(--preview-scale))}.preview-brand{font-size:calc(22px * var(--preview-scale))}.preview-logo{width:181px;height:45px;transform:scale(min(var(--preview-scale),1.12));transform-origin:left center}.preview-viewport{overflow:hidden}.preview-cell{min-width:0}.preview-cell .unit{font-size:calc(13px * var(--preview-scale))}.settings-main .page-title{width:87%}.home-heading .page-title{width:555px;transform:scaleX(1.06)}.home-heading{gap:45px}.card-info>.icon{flex-shrink:0}.login-form .remember{margin-top:22px;margin-bottom:25px}

.hero-art{clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,26% 73%,5% 73%,5% 42%,0 42%)}
.hero-art.mbus{clip-path:none}
.chart-area svg{overflow:visible}
.device-sidebar{border-right:1px solid #b8c0c5;background:linear-gradient(135deg,#fcfdfe,#f5f7f9 63%,#e5e8eb 64%,#fafbfd 65%,#f4f6f8 91%,#e7ebee 92%,#fff 94%)}
.preview-widget{border-radius:0;clip-path:polygon(6% 0,94% 0,100% 9%,100% 91%,94% 100%,6% 100%,0 91%,0 9%)}

.preview-widget{grid-template-rows:45px 1fr;grid-template-columns:1.9fr 1.05fr;height:244px;width:350px}
.preview-left{display:grid;grid-template-rows:1.15fr 1fr;gap:5px;min-width:0}
.preview-right{display:grid;grid-template-rows:1fr .85fr 1fr;gap:5px;min-width:0}
.preview-cell{padding:6px;gap:7px}
.preview-cell.compact{padding:5px;gap:5px}
.preview-cell.supply small{font-size:calc(6px * var(--preview-scale));line-height:1.45;letter-spacing:.2px}
.preview-cell.supply .icon{color:#fff;width:23px;height:28px}
.preview-viewport{height:268px}
.preview-widget .preview-brand{grid-column:1/3}
.device-sidebar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:110px;background:url("../reference-native/prime.5d44bde56c96.png") -20px -357px/1280px 720px no-repeat;z-index:-1;opacity:.9}
.settings-sidebar::after{height:80px;background-position:-20px -382px}
:root[lang=ru] .overview-stat{gap:18px}
:root[lang=ru] .status-stack.link .action{font-size:12px}
:root[lang=ru] .filters .action{font-size:11px;gap:6px}
:root[lang=ru] .login-form h1{font-family:Arial,sans-serif;font-size:41px;font-weight:900;transform:scaleX(1.04);width:95%;line-height:1.2}
:root[lang=en] .login-form h1{transform:scaleX(1.12);width:89%}

.chart-key{display:flex;gap:16px;margin-left:auto;align-items:center;font-size:10px;font-weight:400;white-space:nowrap}
.chart-key span{display:flex;align-items:center;gap:6px}
.chart-key span::before{content:'';display:inline-block;width:23px;border-top:2px solid var(--accent)}
.chart-key span+span::before{border-color:#eef4f0;border-top-style:dashed}
.chart-key+.period-buttons{margin-left:24px}
:root[lang=ru] .chart-key{font-size:9px;gap:8px}

/* Blend the PRIME decoration into the page along its diagonal outline. */
.hero-art.prime{left:630px;width:423px;background-position:-630px -141px;clip-path:none;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22630%20141%20423%20359%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%228%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M810%2090%20687%20233%20728%20295%20700%20321%20747%20395%20800%20404%20878%20520H1110V90Z%22%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(to right,#000 calc(100% - 18px),transparent);mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:intersect}

/* Keep content steady while interacting; animate only actual page navigation. */
.screen-content{animation:none!important;opacity:1}
button,a{-webkit-tap-highlight-color:transparent}
button[aria-busy=true],.status-stack button:disabled{opacity:1;cursor:progress}
.action,.side-list button,.segmented button,.theme-choice,.pagination button,.period-buttons button,.map-device-picker button,.icon-button,.swatch{transition:filter 130ms ease,background-color 130ms ease,border-color 130ms ease,box-shadow 130ms ease,translate 110ms ease,scale 110ms ease}
.action:hover{filter:brightness(1.035)}
.action:active:not(:disabled){translate:0 1px;scale:.995;filter:brightness(.94);transition-duration:55ms}
.side-list button:active,.segmented button:active,.pagination button:active,.period-buttons button:active,.map-device-picker button:active,.icon-button:active{translate:0 1px;filter:brightness(.96)}
.theme-choice:active{scale:.987}
.swatch:active{scale:.9}
.product-nav a,.footer-nav a{transition:filter 130ms ease,background-color 130ms ease,box-shadow 130ms ease,translate 110ms ease}
.product-nav a:hover,.footer-nav a:hover{filter:brightness(1.035)}
.product-nav a:active,.footer-nav a:active{translate:0 1px;filter:brightness(.96)}
.action[data-pending]{position:relative}
.action[data-pending]::after{content:'';position:absolute;right:10px;top:calc(50% - 6px);width:12px;height:12px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:artk-wait .8s linear infinite}
@keyframes artk-wait{to{rotate:360deg}}
::view-transition{pointer-events:none}
::view-transition-group(root){animation-duration:150ms}
::view-transition-old(root),::view-transition-new(root){animation-duration:150ms;animation-timing-function:cubic-bezier(.2,.65,.3,1)}
@media(prefers-reduced-motion:reduce){
 .action,.side-list button,.segmented button,.theme-choice,.pagination button,.period-buttons button,.map-device-picker button,.icon-button,.swatch,.product-nav a,.footer-nav a{transition:none}
 .action:active:not(:disabled),.side-list button:active,.segmented button:active,.pagination button:active,.period-buttons button:active,.map-device-picker button:active,.icon-button:active,.product-nav a:active,.footer-nav a:active{translate:none;scale:none}
 .theme-choice:active,.swatch:active{scale:none}
 .action[data-pending]::after{animation:none}
}


/* Google owns the geographic layer; ARTK owns only device marker content. */
.map-canvas[data-map-mode=google] .map-device-picker{display:none}
.artk-map-pin{position:relative;width:38px;height:53px;font-family:var(--font);--pin-color:var(--accent);cursor:pointer}
.artk-pin-head{position:absolute;left:2px;top:0;width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--pin-color);border-radius:50% 50% 3px 50%;transform:rotate(45deg);background:linear-gradient(135deg,#123d30,#061612);box-shadow:0 2px 7px #00261966;color:#e7fff5;transition:box-shadow .15s ease,background-color .15s ease}
.artk-pin-head .icon{width:22px;height:22px;transform:rotate(-45deg)}
.artk-pin-base{position:absolute;left:10px;bottom:0;width:20px;height:10px;border:2px solid var(--pin-color);border-radius:50%;background:#102b22;box-shadow:0 0 0 3px #ffffffb3}
.artk-pin-label{position:absolute;top:10px;left:42px;white-space:nowrap;background:#ffffffeb;border:1px solid #d7e5df;border-radius:3px;padding:3px 5px;color:#142b23;font-size:12px;font-weight:700;line-height:1.1;box-shadow:0 1px 3px #05241716;pointer-events:none}
.artk-map-pin.selected .artk-pin-head{color:var(--pin-color);box-shadow:0 0 0 4px #ffffffc9,0 0 18px rgba(var(--accent-rgb),.65)}
.artk-map-pin.selected .artk-pin-base{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.17),0 0 12px rgba(var(--accent-rgb),.75)}
.artk-map-pin.selected .artk-pin-label{border-color:var(--pin-color);background:#fff}
.artk-map-pin.offline{--pin-color:#83918c}
.map-feedback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:#eff3f1;color:#53675e;padding:30px;text-align:center}
.map-feedback .action{font-size:13px;min-width:130px}
.map-empty{position:absolute;top:12px;left:50%;transform:translateX(-50%);padding:10px 18px;max-width:90%;background:#ffffffef;border:1px solid #dce5e0;box-shadow:0 2px 9px #183b2024;border-radius:4px;font-size:14px}

/* Existing DEMO label now opens a keyboard-accessible explanation. */
.demo-badge:active{translate:0 1px}
.demo-explanation{margin-top:16px;line-height:1.65;font-size:17px}