*{box-sizing:border-box}
html,body{margin:0;background:#f4f8fd;font-family:Arial,Helvetica,sans-serif}
.page{width:100%;overflow-x:auto}
.stage{position:relative;width:1595px;height:986px;margin:0 auto;transform-origin:top left}
.base{position:absolute;inset:0;width:1595px;height:986px;display:block;pointer-events:none}

/* Controller display */
.display-window{position:absolute;z-index:10;left:103px;top:210px;width:329px;height:132px;background:#130404;border:1px solid #eee}
.seg-display{position:absolute;inset:8px 11px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.digit{position:relative}
.seg{position:absolute;background:#371010;opacity:.17;border-radius:3px}
.seg.on{background:#ff2929;opacity:1;box-shadow:0 0 10px rgba(255,35,35,.98),0 0 17px rgba(255,35,35,.36)}
.seg.a,.seg.d,.seg.g{left:18%;width:64%;height:10%;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}
.seg.a{top:1%}.seg.g{top:45%}.seg.d{bottom:1%}
.seg.b,.seg.c,.seg.e,.seg.f{width:11%;height:39%;clip-path:polygon(50% 0,100% 8%,100% 92%,50% 100%,0 92%,0 8%)}
.seg.f{left:5%;top:8%}.seg.b{right:5%;top:8%}.seg.e{left:5%;bottom:8%}.seg.c{right:5%;bottom:8%}
.dot{position:absolute;right:-1%;bottom:1%;width:9%;aspect-ratio:1;border-radius:50%;background:#371010;opacity:.17}
.dot.on{background:#ff2929;opacity:1;box-shadow:0 0 7px #ff2929}

.hit{position:absolute;z-index:30;border:0;background:transparent;cursor:pointer;padding:0}
.menu{left:467px;top:183px;width:55px;height:56px;border-radius:50%}
.up{left:467px;top:239px;width:55px;height:56px;border-radius:50%}
.down{left:467px;top:296px;width:55px;height:56px;border-radius:50%}
.power{left:586px;top:345px;width:30px;height:90px;border-radius:4px}

/* Exact LED centers measured from approved controller artwork */
.lamp{position:absolute;z-index:15;width:22px;height:22px;border-radius:50%;opacity:0;pointer-events:none}
.lamp.on{opacity:1}
.lamp.green.on{background:#4ae326;box-shadow:0 0 10px rgba(74,227,38,.95),inset 0 0 4px white}
.lamp.red.on{background:#f3282f;box-shadow:0 0 10px rgba(243,40,47,.95),inset 0 0 4px white}
.l1{left:132px;top:359px}.l2{left:228px;top:359px}.l3{left:325px;top:359px}.l4{left:415px;top:359px}

.power-off{position:absolute;z-index:20;left:589px;top:349px;width:24px;height:82px;border-radius:3px;background:linear-gradient(#303030,#111);opacity:0}
.power-off.off{opacity:.92}

/* Humidity */
.humidity-readout{position:absolute;z-index:12;left:705px;top:163px;width:155px;height:47px;border:1px solid #dbe7f4;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;color:#1476e8;font-size:40px;font-weight:800}
.humidity-readout small{font-size:19px;margin-left:5px}
.hum,.hum-input,.hum-apply{position:absolute;z-index:13;top:163px;height:47px;border-radius:10px;border:1px solid #dbe7f4;background:#fff;text-align:center}
.hum{width:70px;color:#0f63ca;font-size:28px;cursor:pointer}
.minus{left:884px}.plus{left:992px}
.hum-input{left:1098px;width:82px;font-size:14px}
.hum-apply{left:1209px;width:124px;border:0;background:#1476e8;color:#fff;font-weight:700;cursor:pointer}

.scale{position:absolute;z-index:11;left:700px;top:268px;width:786px;height:9px;border-radius:999px;background:linear-gradient(90deg,#3564ff,#19b9cf 27%,#55c84d 46%,#e3dc28 63%,#ff9831 80%,#ed3434)}
.marker{position:absolute;z-index:13;top:225px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.marker:after{content:"";position:absolute;top:28px;width:2px;height:27px;background:currentColor}
.marker.current{background:#1476e8}.marker.low{background:#e4b414}.marker.high{background:#e33b32}
.scale-zero,.scale-half,.scale-hundred{position:absolute;z-index:12;top:286px;font-size:12px;color:#262d35}
.scale-zero{left:699px}.scale-half{left:1095px}.scale-hundred{left:1456px}
.threshold{position:absolute;z-index:12;top:309px;text-align:center}
.threshold small{display:block;font-size:12px}.threshold b{display:block;margin-top:5px;font-size:21px}
.threshold-low{left:855px;width:170px;color:#2cad36}.threshold-high{left:1267px;width:170px;color:#ef342f}

.humidity-status{position:absolute;z-index:12;left:690px;top:373px;width:802px;height:71px;border:1px solid #dbe7f2;border-radius:10px;background:#fff;padding:13px 14px}
.humidity-status-title{font-size:16px;font-weight:800;color:#101923}
.humidity-status-title.work{color:#2cad36}.humidity-status-title.wait{color:#e23b32}
.humidity-status-text{margin-top:8px;color:#6d7d90;font-size:13px;line-height:1.35}

/* State cells */
.state-cell{position:absolute;z-index:12;width:320px;height:51px;background:#f7fafe;border-radius:8px;padding:7px 10px}
.state-cell small{display:block;color:#718196;font-size:10px}.state-cell b{display:block;margin-top:4px;color:#101923;font-size:16px}
.sc1{left:690px;top:438px}.sc2{left:1021px;top:438px;width:270px}.sc3{left:1301px;top:438px;width:259px}
.sc4{left:690px;top:499px}.sc5{left:1021px;top:499px;width:270px}.sc6{left:1301px;top:499px;width:259px}

/* Settings */
.settings-grid{position:absolute;z-index:12;left:650px;top:607px;width:914px;height:97px;display:grid;grid-template-columns:repeat(12,1fr);background:#fff}
.setting{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #dce6ef;padding:2px}
.setting:last-child{border-right:0}
.setting .k{font-size:11px;color:#20262d}.setting .v{font-size:15px;color:#2cab35;font-weight:800;margin-top:5px}.setting .u{font-size:10px;color:#222;margin-top:4px}

.hold-track{position:absolute;z-index:14;left:172px;top:733px;width:416px;height:4px;border-radius:999px;background:#e6edf6;overflow:hidden}
.hold-track span{display:block;height:100%;width:0;background:#1476e8}

@media(max-width:1595px){
  .stage{transform:scale(calc(100vw / 1595));margin-bottom:calc(986px * (100vw / 1595) - 986px)}
}


/* ==============================================================
   Visual Prototype 2.6.1
   ONLY the user-marked right-hand blocks are changed.
   Controller geometry is intentionally untouched.
   ============================================================== */

/* Hide the old individual right-block positioning from 2.6 by overriding it.
   Every rebuilt card is fully opaque, so nothing underneath can show through. */
.v261-card{
  position:absolute;
  z-index:50;
  background:#fff;
  border:1px solid #dbe7f2;
  border-radius:12px;
  box-shadow:none;
  overflow:hidden;
  color:#101923;
}

/* 1. Humidity explanation/status */
.humidity-status-card{
  left:690px;
  top:365px;
  width:802px;
  height:74px;
  padding:13px 14px;
}
.humidity-status-card .humidity-status-title{
  position:static;
  margin:0;
  font-size:16px;
  line-height:19px;
  font-weight:800;
  color:#101923;
}
.humidity-status-card .humidity-status-title.work{color:#2cad36}
.humidity-status-card .humidity-status-title.wait{color:#e23b32}
.humidity-status-card .humidity-status-text{
  position:static;
  margin-top:7px;
  width:auto;
  color:#6d7d90;
  font-size:13px;
  line-height:17px;
}

/* 2. State block — one card, one title, exactly six cells */
.state-card{
  left:670px;
  top:452px;
  width:842px;
  height:154px;
  padding:14px 18px 15px;
}
.state-card h2,
.settings-card h2{
  margin:0;
  color:#101923;
  font-size:18px;
  line-height:22px;
  font-weight:800;
}
.state-card .state-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-rows:repeat(2, 48px);
  gap:9px 12px;
  margin-top:11px;
}
.state-card .state-cell{
  position:static;
  width:auto !important;
  height:48px;
  padding:7px 10px;
  border-radius:8px;
  background:#f5f9fe;
}
.state-card .state-cell small{
  display:block;
  margin:0;
  color:#718196;
  font-size:10px;
  line-height:12px;
  font-weight:400;
}
.state-card .state-cell b{
  display:block;
  margin-top:4px;
  color:#101923;
  font-size:15px;
  line-height:18px;
  font-weight:800;
}

/* Defuse the absolute coordinates from the original 2.6 .sc1 ... .sc6 rules. */
.state-card .sc1,
.state-card .sc2,
.state-card .sc3,
.state-card .sc4,
.state-card .sc5,
.state-card .sc6{
  left:auto !important;
  top:auto !important;
  width:auto !important;
}

/* 3. Current settings — one opaque card, one grid, no duplicated row below */
.settings-card{
  left:628px;
  top:618px;
  width:884px;
  height:128px;
  padding:11px 18px 12px;
}
.settings-card .settings-grid{
  position:static;
  width:100%;
  height:82px;
  margin-top:5px;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  background:#fff;
  overflow:hidden;
}
.settings-card .setting{
  min-width:0;
  height:82px;
  padding:5px 2px 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border-right:1px solid #dce6ef;
}
.settings-card .setting:last-child{border-right:0}
.settings-card .setting .k{
  margin:0;
  color:#20262d;
  font-size:10px;
  line-height:13px;
  font-weight:400;
}
.settings-card .setting .v{
  margin-top:5px;
  color:#2cab35;
  font-size:14px;
  line-height:17px;
  font-weight:800;
  white-space:nowrap;
}
.settings-card .setting .u{
  margin-top:4px;
  color:#222;
  font-size:9px;
  line-height:11px;
  font-weight:400;
  white-space:nowrap;
}

/* The original 2.6 hold indicator is outside the marked area and is unchanged. */

/* =========================================================
   Visual Prototype 2.6.2
   Блок управления не изменяется.
   Три правых блока имеют одинаковую геометрию и равные зазоры.
   ========================================================= */

.right-card{
  position:absolute;
  z-index:60;
  left:690px;
  width:802px;
  background:#fff;
  border:1px solid #dbe7f2;
  border-radius:12px;
  box-shadow:none;
  overflow:hidden;
  color:#101923;
}
.right-card h2{
  margin:0;
  font-size:18px;
  line-height:22px;
  font-weight:800;
  color:#101923;
}

/* Единая вертикальная сетка:
   block 1:  90..394
   gap:      12 px
   block 2: 406..554
   gap:      12 px
   block 3: 566..680
*/
.humidity-card{
  top:90px;
  height:304px;
  padding:14px 18px 12px;
}
.state-card{
  top:406px;
  height:148px;
  padding:12px 14px;
}
.settings-card{
  top:566px;
  height:114px;
  padding:9px 14px 10px;
}

/* HUMIDITY */
.humidity-card .subtitle{
  margin:5px 0 0;
  color:#6f7f93;
  font-size:13px;
  line-height:16px;
}
.humidity-controls{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:13px;
}
.humidity-readout{
  width:155px;
  height:47px;
  border:1px solid #dbe7f4;
  border-radius:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#1476e8;
  font-size:39px;
  line-height:1;
  font-weight:800;
}
.humidity-readout small{
  font-size:19px;
  margin-left:5px;
}
.humidity-card .hum{
  position:static;
  width:72px;
  height:47px;
  border:1px solid #dbe7f4;
  border-radius:10px;
  background:#fff;
  color:#1267d0;
  font-size:28px;
  cursor:pointer;
}
.humidity-card .hum-input{
  position:static;
  width:82px;
  height:47px;
  border:1px solid #dbe7f4;
  border-radius:10px;
  background:#fff;
  text-align:center;
  font-size:14px;
}
.humidity-card .hum-apply{
  position:static;
  width:124px;
  height:47px;
  border:0;
  border-radius:10px;
  background:#1476e8;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.scale-wrap{
  position:relative;
  height:55px;
  margin-top:14px;
}
.scale-wrap .scale{
  position:absolute;
  left:0;
  right:0;
  top:22px;
  width:auto;
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg,#3564ff,#19b9cf 27%,#55c84d 46%,#e3dc28 63%,#ff9831 80%,#ed3434);
}
.scale-wrap .marker{
  position:absolute;
  top:-2px;
  transform:translateX(-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:700;
}
.scale-wrap .marker:after{
  content:"";
  position:absolute;
  top:28px;
  width:2px;
  height:20px;
  background:currentColor;
}
.scale-wrap .marker.low{background:#e4b414}
.scale-wrap .marker.current{background:#1476e8}
.scale-wrap .marker.high{background:#e33b32}
.scale-labels{
  position:absolute;
  left:0;
  right:0;
  top:38px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#252b32;
}

.threshold-row{
  display:flex;
  justify-content:space-between;
  margin:-2px 145px 0;
}
.threshold-row .threshold{
  position:static;
  width:155px;
  text-align:center;
}
.threshold-row .threshold small{
  display:block;
  font-size:12px;
  line-height:14px;
}
.threshold-row .threshold b{
  display:block;
  margin-top:2px;
  font-size:19px;
  line-height:21px;
}
.threshold-low{color:#2cad36}
.threshold-high{color:#ef342f}

.humidity-card .humidity-status{
  position:absolute;
  left:14px;
  right:14px;
  bottom:10px;
  height:58px;
  border:1px solid #dbe7f2;
  border-radius:10px;
  background:#fff;
  padding:9px 12px;
}
.humidity-card .humidity-status-title{
  position:static;
  margin:0;
  font-size:15px;
  line-height:18px;
  font-weight:800;
}
.humidity-card .humidity-status-title.work{color:#2cad36}
.humidity-card .humidity-status-title.wait{color:#e23b32}
.humidity-card .humidity-status-text{
  position:static;
  width:auto;
  margin-top:5px;
  color:#6d7d90;
  font-size:12px;
  line-height:15px;
}

/* STATE */
.state-card .state-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,45px);
  gap:8px 10px;
  margin-top:10px;
}
.state-card .state-cell{
  position:static;
  width:auto !important;
  height:45px;
  border-radius:8px;
  background:#f5f9fe;
  padding:6px 9px;
}
.state-card .state-cell small{
  display:block;
  color:#718196;
  font-size:9px;
  line-height:11px;
}
.state-card .state-cell b{
  display:block;
  margin-top:3px;
  color:#101923;
  font-size:14px;
  line-height:17px;
  font-weight:800;
}
.state-card .sc1,.state-card .sc2,.state-card .sc3,
.state-card .sc4,.state-card .sc5,.state-card .sc6{
  left:auto!important; top:auto!important; width:auto!important;
}

/* SETTINGS */
.settings-card h2{
  font-size:16px;
  line-height:19px;
}
.settings-card .settings-grid{
  position:static;
  width:100%;
  height:77px;
  margin-top:3px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  background:#fff;
  overflow:hidden;
}
.settings-card .setting{
  min-width:0;
  height:77px;
  padding:3px 1px 2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border-right:1px solid #dce6ef;
}
.settings-card .setting:last-child{border-right:0}
.settings-card .setting .k{
  font-size:9px;
  line-height:11px;
  color:#20262d;
}
.settings-card .setting .v{
  margin-top:4px;
  color:#2cab35;
  font-size:13px;
  line-height:16px;
  font-weight:800;
  white-space:nowrap;
}
.settings-card .setting .u{
  margin-top:3px;
  color:#222;
  font-size:8px;
  line-height:10px;
  white-space:nowrap;
}

/* =========================================================
   Visual Prototype 2.6.3
   Блок управления не менялся.
   Блок "Проверка работы по влажности" восстановлен по эталону.
   ========================================================= */

.right-card{
  position:absolute !important;
  z-index:60 !important;
  left:668px !important;
  width:843px !important;
  background:#fff !important;
  border:1px solid #dbe7f3 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  overflow:hidden !important;
  color:#101923 !important;
}
.right-card h2{
  margin:0 !important;
  color:#101923 !important;
  font-size:18px !important;
  line-height:22px !important;
  font-weight:800 !important;
}

/* Equal 12px vertical spacing */
.humidity-card{top:90px !important;height:358px !important;padding:20px 25px 14px !important}
.state-card{top:460px !important;height:148px !important;padding:12px 14px !important}
.settings-card{top:620px !important;height:114px !important;padding:9px 14px 10px !important}

/* -------- HUMIDITY: geometry copied from approved visual -------- */
.humidity-card .subtitle{
  margin:8px 0 0 !important;
  color:#6f7f93 !important;
  font-size:13px !important;
  line-height:16px !important;
}
.humidity-card .humidity-controls{
  display:flex !important;
  align-items:center !important;
  gap:25px !important;
  margin-top:20px !important;
}
.humidity-card .humidity-readout{
  position:static !important;
  width:157px !important;
  height:49px !important;
  border:1px solid #dbe7f4 !important;
  border-radius:10px !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#1476e8 !important;
  font-size:39px !important;
  line-height:1 !important;
  font-weight:800 !important;
}
.humidity-card .humidity-readout small{font-size:19px !important;margin-left:5px !important}
.humidity-card .hum,
.humidity-card .hum-input,
.humidity-card .hum-apply{
  position:static !important;
  height:47px !important;
  border-radius:10px !important;
  text-align:center !important;
}
.humidity-card .hum{
  width:72px !important;
  border:1px solid #dbe7f4 !important;
  background:#fff !important;
  color:#1267d0 !important;
  font-size:28px !important;
}
.humidity-card .hum-input{
  width:82px !important;
  border:1px solid #dbe7f4 !important;
  background:#fff !important;
  font-size:14px !important;
}
.humidity-card .hum-apply{
  width:124px !important;
  border:0 !important;
  background:#1476e8 !important;
  color:#fff !important;
  font-weight:700 !important;
}

/* Scale exactly under controls */
.humidity-card .scale-wrap{
  position:relative !important;
  height:76px !important;
  margin-top:27px !important;
}
.humidity-card .scale-wrap .scale{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:18px !important;
  width:auto !important;
  height:9px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#3564ff,#19b9cf 27%,#55c84d 46%,#e3dc28 63%,#ff9831 80%,#ed3434) !important;
}
.humidity-card .scale-wrap .marker{
  position:absolute !important;
  top:-25px !important;
  transform:translateX(-50%) !important;
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:700 !important;
}
.humidity-card .scale-wrap .marker:after{
  content:"" !important;
  position:absolute !important;
  top:28px !important;
  width:2px !important;
  height:24px !important;
  background:currentColor !important;
}
.humidity-card .marker.low{background:#e4b414 !important}
.humidity-card .marker.current{background:#1476e8 !important}
.humidity-card .marker.high{background:#e33b32 !important}
.humidity-card .scale-labels{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:37px !important;
  display:flex !important;
  justify-content:space-between !important;
  color:#262d35 !important;
  font-size:12px !important;
  line-height:14px !important;
}

.humidity-card .threshold-row{
  display:flex !important;
  justify-content:space-between !important;
  margin:-5px 145px 0 !important;
}
.humidity-card .threshold{
  position:static !important;
  width:170px !important;
  text-align:center !important;
}
.humidity-card .threshold small{
  display:block !important;
  font-size:12px !important;
  line-height:14px !important;
}
.humidity-card .threshold b{
  display:block !important;
  margin-top:5px !important;
  font-size:21px !important;
  line-height:23px !important;
}
.humidity-card .threshold-low{color:#2cad36 !important}
.humidity-card .threshold-high{color:#ef342f !important}

.humidity-card .humidity-status{
  position:absolute !important;
  left:19px !important;
  right:19px !important;
  bottom:14px !important;
  width:auto !important;
  height:71px !important;
  border:1px solid #dbe7f2 !important;
  border-radius:10px !important;
  background:#fff !important;
  padding:13px 14px !important;
}
.humidity-card .humidity-status-title{
  position:static !important;
  margin:0 !important;
  color:#101923 !important;
  font-size:16px !important;
  line-height:19px !important;
  font-weight:800 !important;
}
.humidity-card .humidity-status-title.work{color:#2cad36 !important}
.humidity-card .humidity-status-title.wait{color:#e23b32 !important}
.humidity-card .humidity-status-text{
  position:static !important;
  width:auto !important;
  margin-top:8px !important;
  color:#6d7d90 !important;
  font-size:13px !important;
  line-height:1.35 !important;
}

/* Keep state/settings from 2.6.2, just aligned to same width */
.state-card .state-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,45px) !important;
  gap:8px 10px !important;
  margin-top:10px !important;
}
.state-card .state-cell{
  position:static !important;
  width:auto !important;
  height:45px !important;
  border-radius:8px !important;
  background:#f5f9fe !important;
  padding:6px 9px !important;
}
.settings-card .settings-grid{
  position:static !important;
  width:100% !important;
  height:77px !important;
  margin-top:3px !important;
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  background:#fff !important;
  overflow:hidden !important;
}


/* =========================================================
   Visual Prototype 2.6.5 — только два запрошенных изменения
   ========================================================= */

/* Динамический индикатор "Питание блока".
   Он закрывает статическую красную лампу и слово "Включено" из фонового макета. */
.power-status-overlay{
  position:absolute;
  z-index:70;
  left:0;
  top:0;
  pointer-events:none;
}
.power-status-lamp{
  position:absolute;
  left:65px;
  top:677px;
  width:23px;
  height:23px;
  border-radius:50%;
  background:#fff;
  border:1px solid #dfe7ef;
  box-shadow:0 0 0 2px #fff;
}
.power-status-lamp::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#ef2a2f;
  box-shadow:0 0 5px rgba(239,42,47,.45);
}
.power-status-lamp.on::after{
  background:#35c342;
  box-shadow:0 0 5px rgba(53,195,66,.45);
}
.power-status-text{
  position:absolute;
  left:104px;
  top:699px;
  width:110px;
  height:18px;
  display:block;
  background:#fff;
  color:#3f4c5d;
  font-size:11px;
  line-height:18px;
  white-space:nowrap;
}

/* Полоска удержания MENU теперь находится внутри блока "Питание блока",
   непосредственно под строкой:
   "удержание 5 сек — SET1, 10 сек — SET2, 15 сек — SET3". */
.hold-track{
  left:108px !important;
  top:738px !important;
  width:310px !important;
  height:4px !important;
  z-index:71 !important;
  border-radius:999px !important;
  background:#e6edf6 !important;
  overflow:hidden !important;
}
.hold-track span{
  display:block !important;
  height:100% !important;
  width:0;
  background:#1476e8 !important;
}


/* =========================================================
   Visual Prototype 2.6.6
   Единственное изменение: hold-track перенесён в третью,
   самую нижнюю строку блока "Питание блока".
   ========================================================= */
.hold-track{
  left:108px !important;
  top:758px !important;
  width:480px !important;
  height:5px !important;
  z-index:71 !important;
  border-radius:999px !important;
  background:#e6edf6 !important;
  overflow:hidden !important;
}
.hold-track span{
  display:block !important;
  height:100% !important;
  width:0;
  background:#1476e8 !important;
}


/* =========================================================
   Visual Prototype 2.6.8
   ИЗМЕНЁН ТОЛЬКО БЛОК "Проверка работы по влажности".
   Геометрия рассчитана по присланному эталону 899×380.
   Остальные блоки и таймер НЕ ИЗМЕНЕНЫ.
   ========================================================= */

/* Внешняя карточка */
.humidity-card{
  position:absolute !important;
  left:668px !important;
  top:90px !important;
  width:843px !important;
  height:358px !important;
  padding:0 !important;
  margin:0 !important;
  background:#fff !important;
  border:1px solid #dbe7f3 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* Заголовок */
.humidity-card > h2{
  position:absolute !important;
  left:26px !important;
  top:13px !important;
  margin:0 !important;
  padding:0 !important;
  color:#101923 !important;
  font-size:18px !important;
  line-height:22px !important;
  font-weight:800 !important;
}

/* Подзаголовок */
.humidity-card > .subtitle{
  position:absolute !important;
  left:26px !important;
  top:44px !important;
  margin:0 !important;
  padding:0 !important;
  color:#6f7f93 !important;
  font-size:13px !important;
  line-height:16px !important;
  font-weight:400 !important;
}

/* Верхняя строка: 67%, -, +, поле, Показать */
.humidity-card .humidity-controls{
  position:absolute !important;
  left:26px !important;
  top:73px !important;
  width:636px !important;
  height:49px !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
.humidity-card .humidity-readout{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:157px !important;
  height:49px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #dbe7f4 !important;
  border-radius:9px !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#1476e8 !important;
  font-size:39px !important;
  line-height:1 !important;
  font-weight:800 !important;
}
.humidity-card .humidity-readout small{
  margin-left:5px !important;
  font-size:19px !important;
  line-height:1 !important;
}
.humidity-card #humMinus{
  position:absolute !important;
  left:190px !important;
  top:0 !important;
  width:75px !important;
  height:49px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #dbe7f4 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#1267d0 !important;
  font-size:28px !important;
  line-height:47px !important;
  text-align:center !important;
}
.humidity-card #humPlus{
  position:absolute !important;
  left:296px !important;
  top:0 !important;
  width:75px !important;
  height:49px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #dbe7f4 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#1267d0 !important;
  font-size:28px !important;
  line-height:47px !important;
  text-align:center !important;
}
.humidity-card .hum-input{
  position:absolute !important;
  left:405px !important;
  top:0 !important;
  width:76px !important;
  height:49px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #dbe7f4 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#111 !important;
  text-align:center !important;
  font-size:14px !important;
}
.humidity-card .hum-apply{
  position:absolute !important;
  left:512px !important;
  top:0 !important;
  width:123px !important;
  height:49px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:#086fe7 !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:49px !important;
  font-weight:700 !important;
  text-align:center !important;
}

/* Шкала */
.humidity-card .scale-wrap{
  position:absolute !important;
  left:26px !important;
  right:26px !important;
  top:130px !important;
  height:84px !important;
  margin:0 !important;
  padding:0 !important;
}
.humidity-card .scale-wrap .scale{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:49px !important;
  width:auto !important;
  height:9px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    #355cff 0%,
    #079edb 20%,
    #35be67 39%,
    #b9d21b 55%,
    #ffd300 64%,
    #ff8514 82%,
    #ed1b24 100%
  ) !important;
}
.humidity-card .scale-wrap .marker{
  position:absolute !important;
  top:2px !important;
  transform:translateX(-50%) !important;
  width:30px !important;
  height:30px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:#fff !important;
  z-index:2 !important;
}
.humidity-card .scale-wrap .marker::after{
  content:"" !important;
  position:absolute !important;
  left:14px !important;
  top:29px !important;
  width:2px !important;
  height:28px !important;
  background:currentColor !important;
}
.humidity-card .marker.current{
  background:#0879e8 !important;
}
.humidity-card .marker.low{
  background:#ffd100 !important;
  color:#111 !important;
}
.humidity-card .marker.high{
  background:#ef1118 !important;
}
.humidity-card .scale-labels{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:72px !important;
  display:flex !important;
  justify-content:space-between !important;
  margin:0 !important;
  padding:0 !important;
  color:#111 !important;
  font-size:12px !important;
  line-height:14px !important;
}

/* Подписи h/H */
.humidity-card .threshold-row{
  position:absolute !important;
  left:0 !important;
  top:221px !important;
  width:100% !important;
  height:50px !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
.humidity-card .threshold{
  position:absolute !important;
  top:0 !important;
  width:170px !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
}
.humidity-card .threshold-low{
  left:162px !important;
  color:#18a42b !important;
}
.humidity-card .threshold-high{
  left:609px !important;
  color:#ef2026 !important;
}
.humidity-card .threshold small{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:14px !important;
  font-weight:400 !important;
}
.humidity-card .threshold b{
  display:block !important;
  margin:6px 0 0 !important;
  padding:0 !important;
  font-size:20px !important;
  line-height:22px !important;
  font-weight:700 !important;
}

/* Нижняя информационная карточка */
.humidity-card .humidity-status{
  position:absolute !important;
  left:19px !important;
  right:19px !important;
  top:276px !important;
  bottom:auto !important;
  width:auto !important;
  height:70px !important;
  margin:0 !important;
  padding:12px 14px !important;
  background:#fff !important;
  border:1px solid #dbe7f2 !important;
  border-radius:9px !important;
  box-shadow:none !important;
}
.humidity-card .humidity-status-title{
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  color:#101923 !important;
  font-size:15px !important;
  line-height:18px !important;
  font-weight:800 !important;
}
.humidity-card .humidity-status-title.work{
  color:#2cad36 !important;
}
.humidity-card .humidity-status-title.wait{
  color:#e23b32 !important;
}
.humidity-card .humidity-status-text{
  position:static !important;
  width:auto !important;
  margin:7px 0 0 !important;
  padding:0 !important;
  color:#6d7d90 !important;
  font-size:12px !important;
  line-height:15px !important;
}


/* =========================================================
   Visual Prototype 2.6.10
   Меняются ТОЛЬКО вертикальные расстояния между тремя правыми блоками.
   Содержимое и размеры блоков не изменяются.
   ========================================================= */

/*
  Проверка работы по влажности:
    top 90, height 358 => bottom 448

  Единый зазор: 25 px

  Состояние блока:
    top 473, height 148 => bottom 621

  Единый зазор: 25 px

  Текущие настройки:
    top 646

  Таким образом верхняя граница "Текущие настройки" совпадает
  по горизонтали с верхней границей блока "Питание блока".
*/
.humidity-card{
  top:90px !important;
}
.state-card{
  top:473px !important;
}
.settings-card{
  top:646px !important;
}


/* =========================================================
   Visual Prototype 2.6.11
   ONLY requested changes relative to 2.6.10:
   1) align power status text under title;
   2) marker digits black;
   3) marker stems match marker colors.
   ========================================================= */

/* "Включено / Выключено": first letter В directly under П in "Питание блока". */
.power-status-text{
  left:108px !important;
}

/* Humidity markers: black digits inside all circles. */
.humidity-card .scale-wrap .marker b{
  color:#111 !important;
}

/* Each marker stem matches the circle color. */
.humidity-card .scale-wrap .marker.current::after{
  background:#0879e8 !important;
}
.humidity-card .scale-wrap .marker.low::after{
  background:#ffd100 !important;
}
.humidity-card .scale-wrap .marker.high::after{
  background:#ef1118 !important;
}

/* =========================================================
   Visual Prototype 2.6.12 — two requested geometry changes only
   1) State card: equal visual top/bottom breathing room.
   2) Right edges of humidity/state/settings aligned to hysteresis card.
   ========================================================= */

/* Hysteresis card right edge in the approved base layout is x=1510px. */
.humidity-card,
.state-card,
.settings-card{
  left:668px !important;
  width:842px !important;
}

/* Keep the approved outer height/position. Rebalance only the State-card
   inner vertical rhythm so the bottom whitespace matches the title's
   top inset, without moving neighbouring cards. */
.state-card{
  padding:12px 14px !important;
}
.state-card .state-grid{
  grid-template-rows:repeat(2,35px) !important;
  gap:8px 10px !important;
  margin-top:10px !important;
}
.state-card .state-cell{
  height:35px !important;
  padding:3px 9px !important;
}
.state-card .state-cell small{
  line-height:11px !important;
}
.state-card .state-cell b{
  margin-top:1px !important;
  line-height:16px !important;
}

/* =========================================================
   Visual Prototype 2.6.13
   Изменены только границы и выравнивание информационных блоков.
   Блок управления слева не менялся.
   ========================================================= */

.right-card{
  position:absolute !important;
  z-index:60 !important;
  left:668px !important;
  width:843px !important;
  background:#ffffff !important;
  border:1px solid #dbe4ee !important;
  border-radius:14px !important;
  box-shadow:none !important;
  overflow:hidden !important;
  color:#101923 !important;
}

/* Единая сетка карточек справа: одинаковая ширина и ровные вертикальные интервалы */
.humidity-card{
  top:90px !important;
  height:358px !important;
  padding:0 !important;
}
.state-card{
  top:460px !important;
  height:148px !important;
  padding:12px 14px !important;
}
.settings-card{
  top:620px !important;
  height:114px !important;
  padding:9px 14px 10px !important;
}

/* Внутренние поля оставляем серыми, но делаем немного ярче */
.state-card .state-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,45px) !important;
  gap:8px 10px !important;
  margin-top:10px !important;
}
.state-card .state-cell{
  position:static !important;
  width:auto !important;
  height:45px !important;
  padding:6px 9px !important;
  border-radius:8px !important;
  background:#f0f4f8 !important;
  border:1px solid #edf2f7 !important;
}
.state-card .state-cell small{
  display:block !important;
  color:#718196 !important;
  font-size:9px !important;
  line-height:11px !important;
}
.state-card .state-cell b{
  display:block !important;
  margin-top:3px !important;
  color:#101923 !important;
  font-size:14px !important;
  line-height:17px !important;
  font-weight:800 !important;
}
.state-card .sc1,.state-card .sc2,.state-card .sc3,
.state-card .sc4,.state-card .sc5,.state-card .sc6{
  left:auto !important;
  top:auto !important;
  width:auto !important;
}

/* Текущие настройки — ровная рамка и симметричные отступы */
.settings-card h2{
  margin:0 !important;
  font-size:16px !important;
  line-height:19px !important;
  font-weight:800 !important;
}
.settings-card .settings-grid{
  position:static !important;
  width:100% !important;
  height:77px !important;
  margin-top:3px !important;
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  background:#ffffff !important;
  overflow:hidden !important;
}
.settings-card .setting{
  min-width:0 !important;
  height:77px !important;
  padding:3px 1px 2px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border-right:1px solid #dce6ef !important;
}
.settings-card .setting:last-child{border-right:0 !important}
.settings-card .setting .k{
  font-size:9px !important;
  line-height:11px !important;
  color:#20262d !important;
}
.settings-card .setting .v{
  margin-top:4px !important;
  color:#2cab35 !important;
  font-size:13px !important;
  line-height:16px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
.settings-card .setting .u{
  margin-top:3px !important;
  color:#222 !important;
  font-size:8px !important;
  line-height:10px !important;
  white-space:nowrap !important;
}

/* Влажность — оставляем геометрию 2.6.12, но фиксируем единую рамку */
.humidity-card{
  border:1px solid #dbe4ee !important;
}
.humidity-card .humidity-status{
  border:1px solid #dbe4ee !important;
}

/* =========================================================
   Visual Prototype 2.6.17
   Все информационные блоки теперь отрисовываются HTML/CSS.
   Нижние растровые карточки удалены из clean_base.png.
   ========================================================= */

:root{
  --info-border:#dbe4ee;
  --info-radius:14px;
  --info-bg:#fff;
  --info-text:#101923;
}

/* Единый визуальный стандарт для всех информационных карточек */
.right-card,
.info-card{
  background:var(--info-bg) !important;
  border:1px solid var(--info-border) !important;
  border-radius:var(--info-radius) !important;
  box-shadow:none !important;
  color:var(--info-text) !important;
}

.lower-card{
  position:absolute;
  z-index:60;
  overflow:hidden;
}
.lower-card h2{
  margin:0;
  color:#101923;
  font-size:16px;
  line-height:19px;
  font-weight:800;
}

/* Питание блока */
.power-card{
  left:42px;
  top:641px;
  width:573px;
  height:102px;
  padding:10px 18px 8px;
}
.power-row{display:flex;align-items:center;height:38px}
.power-status-lamp{
  position:relative !important;
  left:auto !important;top:auto !important;
  width:22px !important;height:22px !important;
  flex:0 0 22px;border-radius:50%;
  background:#fff;border:1px solid #dfe7ef;box-shadow:none !important;
}
.power-status-lamp::after{
  content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;
  background:#ef2a2f;box-shadow:0 0 5px rgba(239,42,47,.35)
}
.power-status-lamp.on::after{background:#35c342;box-shadow:0 0 5px rgba(53,195,66,.35)}
.power-copy{margin-left:14px;display:flex;flex-direction:column;gap:3px}
.power-copy b{font-size:13px;line-height:15px}.power-copy span{font-size:11px;line-height:13px;color:#5f6d7c}
.power-divider{height:1px;background:#e5edf5;margin:0 0 7px}
.power-menu-row{display:flex;align-items:flex-start}
.mini-menu-icon{
  width:23px;height:23px;flex:0 0 23px;border:1.5px solid #6aa5ff;border-radius:50%;
  display:grid;place-items:center;color:#1476e8;font-size:6px;font-weight:700;margin-top:0
}
.power-help{margin-left:14px;color:#26313d;font-size:10px;line-height:13px}
.power-help b{font-weight:800}
.hold-track{
  position:absolute !important;left:65px !important;right:18px !important;top:auto !important;bottom:6px !important;
  width:auto !important;height:4px !important;z-index:71 !important;background:#e6edf6 !important;border-radius:999px !important;overflow:hidden !important
}
.hold-track span{display:block !important;height:100% !important;width:0;background:#1476e8 !important}

/* Управление блоком */
.controls-card{left:42px;top:752px;width:384px;height:203px;padding:12px 18px}
.controls-card h2{margin-bottom:9px}
.control-help-row{display:flex;align-items:center;min-height:48px;color:#27313c;font-size:11px;line-height:15px}
.control-help-row+.control-help-row{margin-top:1px}
.round-icon{
  width:36px;height:36px;flex:0 0 36px;border:1.5px solid #5f9fff;border-radius:50%;
  display:grid;place-items:center;color:#1476e8;margin-right:14px;font-weight:700
}
.menu-symbol{font-size:9px}.arrow-symbol{font-size:29px;font-weight:400;line-height:1}

/* Быстрый старт */
.quick-card{left:434px;top:752px;width:441px;height:203px;padding:12px 18px}
.quick-card h2{margin-bottom:8px}
.quick-list>div{display:flex;align-items:flex-start;min-height:26px}
.quick-list span{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:#1476e8;color:white;display:grid;place-items:center;font-size:11px;font-weight:800;margin-right:10px}
.quick-list p{margin:1px 0 0;color:#27313c;font-size:10.5px;line-height:14px}

/* Принцип работы по влажности */
.hysteresis-card{left:884px;top:752px;width:646px;height:203px;padding:12px 18px}
.hysteresis-card h2{margin-bottom:8px}
.hysteresis-copy{color:#27313c;font-size:10.5px;line-height:14px}
.hyst-flow{position:absolute;left:18px;right:18px;bottom:11px;height:57px}
.hyst-values{display:grid;grid-template-columns:30px 24px 30px 24px 30px 24px 30px 24px 36px 36px 24px 30px 24px 30px;align-items:center;justify-content:space-between;font-size:12px}
.hyst-values b{text-align:center}.hyst-values i{font-style:normal;color:#68798d;text-align:center}.hyst-values .g{color:#2cab35}.hyst-values .r{color:#ef342f}
.hyst-brackets{position:relative;height:32px;margin-top:4px}
.bracket{position:absolute;top:0;height:13px;border-bottom:1.5px solid;border-left:1.5px solid;border-right:1.5px solid;border-radius:0 0 4px 4px}
.bracket:before{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;border-left:1.5px solid;border-bottom:1.5px solid;transform:translateX(-50%) rotate(-45deg);background:white}
.bracket span{position:absolute;top:16px;width:180px;text-align:center;font-size:10px;font-weight:800;left:50%;transform:translateX(-50%);white-space:nowrap}
.bracket.work{border-color:#37c64b;color:#37c64b}.bracket.wait{border-color:#ef4d4d;color:#ef4d4d}
.bracket.work.one{left:2px;width:205px}.bracket.wait{left:220px;width:260px}.bracket.work.two{right:0;width:105px}

/* =========================================================
   Visual Prototype 2.6.20
   Блоки 1, 2, 3 и 7 выровнены по правой границе.
   Правая граница блоков "Проверка работы по влажности",
   "Состояние блока" и "Текущие настройки блока (из меню)"
   теперь совпадает с правой границей блока
   "Принцип работы по влажности (гистерезис)".
   ========================================================= */
.humidity-card,
.state-card,
.settings-card{
  width:862px !important; /* right edge = 668 + 862 = 1530px */
}

/* =========================================================
   Visual Prototype 2.6.21
   Жёсткое выравнивание правой границы блоков 1, 2, 3 и 7.
   Теперь эти блоки привязаны к одной и той же координате справа.
   ========================================================= */
.humidity-card,
.state-card,
.settings-card,
.hysteresis-card{
  right:65px !important;
}

.humidity-card,
.state-card,
.settings-card{
  width:auto !important;
}

.hysteresis-card{
  width:auto !important;
}

/* =========================================================
   Visual Prototype 2.6.22
   Блок 3 выровнен по верхней и нижней границе с блоком 4.
   - Блок 4 остаётся на месте.
   - Блок 3 опущен ниже.
   - Высота блока 3 сделана равной высоте блока 4.
   ========================================================= */
.settings-card{
  top:641px !important;
  height:102px !important;
  padding:9px 14px 8px !important;
}

.settings-card .settings-grid{
  height:58px !important;
  margin-top:4px !important;
}

.settings-card .setting{
  height:58px !important;
  padding:2px 1px 1px !important;
}

.settings-card .setting .k{
  font-size:8px !important;
  line-height:10px !important;
}

.settings-card .setting .v{
  margin-top:3px !important;
  font-size:11px !important;
  line-height:13px !important;
}

.settings-card .setting .u{
  margin-top:2px !important;
  font-size:7px !important;
  line-height:9px !important;
}

/* =========================================================
   Visual Prototype 2.6.24
   Блок 2: симметричные верхний и нижний внутренние отступы.
   Верхний отступ от рамки до заголовка = нижнему отступу
   от нижнего ряда серых ячеек до рамки.
   ========================================================= */
.state-card{
  padding:12px 14px !important;
}
.state-card .state-grid{
  grid-template-rows:repeat(2,42px) !important;
  gap:8px 10px !important;
  margin-top:10px !important;
}
.state-card .state-cell{
  height:42px !important;
  padding:5px 9px !important;
}

/* =========================================================
   Visual Prototype 2.6.25
   Блок 2 перемещён так, чтобы расстояния между 1–2 и 2–3 были одинаковыми.
   ========================================================= */
.state-card{
  top:470.5px !important;
}

/* =========================================================
   Visual Prototype 2.6.26
   Увеличен шрифт примерно на 1 п. в блоках 3, 5, 6, 7.
   ========================================================= */

/* Блок 3 */
.settings-card h2{font-size:17px !important; line-height:20px !important;}
.settings-card .setting .k{font-size:9px !important; line-height:11px !important;}
.settings-card .setting .v{font-size:12px !important; line-height:14px !important;}
.settings-card .setting .u{font-size:8px !important; line-height:10px !important;}

/* Блок 5 */
.controls-card h2{font-size:17px !important; line-height:20px !important;}
.control-help-row{font-size:12px !important; line-height:16px !important;}
.menu-symbol{font-size:10px !important;}

/* Блок 6 */
.quick-card h2{font-size:17px !important; line-height:20px !important;}
.quick-list span{font-size:12px !important;}
.quick-list p{font-size:11.5px !important; line-height:15px !important;}

/* Блок 7 */
.hysteresis-card h2{font-size:17px !important; line-height:20px !important;}
.hysteresis-copy{font-size:11.5px !important; line-height:15px !important;}
.hyst-values{font-size:13px !important;}
.bracket span{font-size:11px !important;}

/* =========================================================
   Visual Prototype 2.6.30
   Блок 5: «Управление блоком» заменён на «Предупреждения и ошибки».
   Геометрия блока сохранена.
   ========================================================= */
.warnings-card{
  padding:12px 14px 9px !important;
}
.warnings-card h2{
  margin:0 0 6px !important;
  font-size:17px !important;
  line-height:20px !important;
}
.warning-copy{
  margin:0 0 5px;
  color:#27313c;
  font-size:8.4px;
  line-height:10.3px;
}
.warning-copy b{
  color:#101923;
  font-weight:800;
}
.warning-arrow-row{
  display:flex;
  align-items:center;
  min-height:25px;
  color:#27313c;
  font-size:10px;
  line-height:12px;
}
.warning-arrow-row + .warning-arrow-row{margin-top:1px}
.warning-arrow-row .round-icon{
  width:25px;
  height:25px;
  flex:0 0 25px;
  margin-right:10px;
}
.warning-arrow-row .arrow-symbol{
  font-size:21px !important;
}

/* =========================================================
   Visual Prototype 2.6.32
   Устранено наложение белого прямоугольника на нижний правый угол блока 8.
   Добавлена маска-копия угла контроллера поверх нижней карточки.
   ========================================================= */
.controller-corner-overlay{
  position:absolute;
  left:560px;
  top:560px;
  width:150px;
  height:100px;
  z-index:72;
  pointer-events:none;
  background-image:url('clean_base.png');
  background-repeat:no-repeat;
  background-size:1595px 986px;
  background-position:-560px -560px;
}


/* =========================================================
   Visual Prototype 2.6.34
   Убрана ошибочная маска controller-corner-overlay, которая
   перекрывала блоки 2 и 3. Никаких оверлеев поверх контроллера.
   ========================================================= */
.controller-corner-overlay{display:none !important;}

/* =========================================================
   Visual Prototype 2.6.35
   Исправлен белый уголок в блоке 8 и увеличен шрифт в блоке 5.
   ========================================================= */
.warnings-card h2{
  font-size:18px !important;
  line-height:21px !important;
}
.warning-copy{
  font-size:9.8px !important;
  line-height:12px !important;
}

/* =========================================================
   Visual Prototype 2.6.38
   - увеличен шрифт в блоке 5 (кроме заголовка)
   - увеличен шрифт чёрного текста в блоке 4 (кроме заголовка)
   - последовательность в блоке 7 зафиксирована в одну строку
   ========================================================= */

/* Блок 5 */
.warning-copy{
  font-size:10.8px !important;
  line-height:13px !important;
}

/* Блок 4 */
.power-copy span{
  font-size:12px !important;
  line-height:14px !important;
}
.power-help{
  font-size:11px !important;
  line-height:14px !important;
}

/* Блок 7 */
.hyst-values{
  display:grid !important;
  grid-template-columns:26px 18px 26px 18px 26px 18px 26px 18px 26px 18px 26px 18px 26px 18px 26px !important;
  align-items:center !important;
  justify-content:center !important;
  justify-items:center !important;
  white-space:nowrap !important;
  column-gap:0 !important;
}
.hyst-values b,
.hyst-values i{
  display:block;
  width:100%;
  text-align:center;
}

/* =========================================================
   Visual Prototype 2.6.39
   Блок 7: группы чисел выровнены над соответствующими скобками.
   ========================================================= */
.hyst-values{
  position:relative !important;
  display:block !important;
  height:18px !important;
  font-size:13px !important;
}
.hyst-group{
  position:absolute;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.hyst-group.one{left:2px;width:205px;}
.hyst-group.wait{left:220px;width:260px;}
.hyst-group.two{right:0;width:105px;}
.hyst-group b{text-align:center;display:inline-block;width:auto !important;}
.hyst-group i{
  display:inline-block;
  width:auto !important;
  font-style:normal;
  color:#000 !important;
  text-align:center;
}

/* =========================================================
   Visual Prototype 2.6.40
   Точная геометрия значений над скобками гистерезиса.
   ========================================================= */
.hyst-values{
  position:relative !important;
  height:22px !important;
  font-size:16px !important; /* +3 п. */
  line-height:20px !important;
}
.hyst-group{
  position:absolute !important;
  top:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0 !important;
  white-space:nowrap !important;
}
.hyst-group.one{left:2px !important;width:205px !important;}
.hyst-group.wait{left:220px !important;width:260px !important;}
.hyst-group.two{right:0 !important;width:105px !important;}
.hyst-group b,
.hyst-group i{
  display:inline-block !important;
  width:auto !important;
  flex:0 0 auto !important;
}
.hyst-group i{
  color:#000 !important;
  font-style:normal !important;
  font-size:14px !important;
}
.hyst-group .left{margin-left:3px !important;}
.hyst-group .right{margin-right:3px !important;}
.bridge{
  position:absolute !important;
  top:0 !important;
  color:#000 !important;
  font-style:normal !important;
  font-size:14px !important;
  line-height:20px !important;
  transform:translateX(-50%) !important;
}
.bridge-one{left:213px !important;}
.bridge-two{left:489px !important;}

/* =========================================================
   Visual Prototype 2.6.41
   - Блоки 5, 6, 7: одинаковый размер чёрного текста (кроме заголовков)
   - Блок 3: чёрный текст увеличен на 2 п. (кроме заголовка)
   ========================================================= */

/* Блоки 5, 6, 7 — унификация чёрного текста */
.warning-copy,
.quick-list p,
.hysteresis-copy{
  font-size:11.5px !important;
  line-height:15px !important;
}

/* Блок 3 — увеличение чёрного текста на 2 п. */
.settings-card .setting .k{
  font-size:11px !important;
  line-height:13px !important;
}
.settings-card .setting .u{
  font-size:10px !important;
  line-height:12px !important;
}

/* =========================================================
   Visual Prototype 2.6.42
   Верхняя голубая часть удалена из base-изображения.
   Заголовок вынесен в HTML/CSS. Подчищен левый край.
   ========================================================= */
.stage-header{
  position:absolute;
  inset:0 auto auto 0;
  width:1595px;
  height:96px;
  pointer-events:none;
  z-index:40;
}
.stage-header h1{
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  margin:0;
  text-align:center;
  font-size:33px;
  line-height:38px;
  font-weight:800;
  color:#101826;
  letter-spacing:-0.2px;
}
.stage-header p{
  position:absolute;
  top:51px;
  left:0;
  width:100%;
  margin:0;
  text-align:center;
  font-size:14px;
  line-height:18px;
  color:#7c8797;
  font-weight:600;
}
.stage-version{
  position:absolute;
  top:12px;
  left:1094px;
  min-width:145px;
  height:38px;
  padding:0 18px;
  border:2px solid #adc8ff;
  border-radius:18px;
  background:#f6fbff;
  color:#3978eb;
  font-size:13px;
  line-height:34px;
  font-weight:700;
  text-align:center;
  box-sizing:border-box;
}
.stage-help{
  position:absolute;
  top:11px;
  right:39px;
  height:44px;
  min-width:146px;
  padding:0 17px 0 15px;
  border:2px solid #adc8ff;
  border-radius:14px;
  background:#f7fbff;
  color:#3978eb;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:13px;
  line-height:16px;
  font-weight:700;
  box-sizing:border-box;
  pointer-events:auto;
}
.stage-help span{display:block;}
.stage-help:hover{background:#edf5ff;}
.stage-help:before{
  content:'?';
  display:inline-flex;
  width:20px;
  height:20px;
  border:2px solid #6da2ff;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
  font-weight:800;
}
.stage-help{color:#3978eb;}
.stage-help{font-family:inherit;}
.stage-help{cursor:default;}
.stage-help{outline:none;}
.stage-help{box-shadow:none;}
.stage-help{appearance:none;}
.stage-help{border-style:solid;}
.stage-help{background-clip:padding-box;}
.stage-help{position:absolute;}
.stage-help{overflow:visible;}
.stage-help{white-space:nowrap;}
.stage-help{pointer-events:none;}

/* =========================================================
   Visual Prototype 2.6.43
   Responsive fit inside the parent/iframe width.
   Desktop geometry stays 1595x986 and is scaled proportionally.
   ========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}
body{min-width:0 !important;}
.page{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}
.stage{
  flex:0 0 1595px !important;
  width:1595px !important;
  height:986px !important;
  margin:0 !important;
  transform-origin:top center !important;
}
/* Disable the old viewport scaling rule. Scaling is now calculated in JS. */
@media(max-width:1595px){
  .stage{
    margin-bottom:0 !important;
  }
}


/* =========================================================
   Visual Prototype 2.6.44
   Верхний отступ над блоком 1 сделан равным нижнему отступу
   под блоками 5, 6, 7: 31 px.
   ========================================================= */
.humidity-card{
  top:31px !important;
}

/* =========================================================
   Visual Prototype 2.6.45
   Исправление верхнего отступа:
   - блок 1 возвращён на исходную позицию;
   - верхняя белая область обрезается целиком на уровне страницы;
   - над блоком 1 остаётся 31 px, как снизу под блоками 5–7;
   - верхний служебный header скрыт.
   ========================================================= */
.humidity-card{
  top:90px !important;
}
.stage-header{
  display:none !important;
}


/* =========================================================
   Visual Prototype 2.6.47
   Блок 8 поднят выше без изменения его внешнего вида.
   Верхняя граница блока 8 выровнена по верхней границе блока 1.
   Сам контроллер вынесен отдельным изображением, а все интерактивные
   элементы смещены синхронно вверх на 21 px.
   ========================================================= */
.controller-hero{
  position:absolute;
  left:48px;
  top:90px;
  width:584px;
  height:531px;
  display:block;
  pointer-events:none;
  z-index:5;
}
.display-window{top:189px !important;}
.menu{top:162px !important;}
.up{top:218px !important;}
.down{top:275px !important;}
.power{top:324px !important;}
.l1,.l2,.l3,.l4{top:338px !important;}
.power-off{top:328px !important;}

/* =========================================================
   Visual Prototype 2.6.48
   Удаление артефактов на сайте:
   - нижняя голубая полоса заменена на белый фон;
   - служебная область iframe также белая.
   ========================================================= */
html,body{
  background:#ffffff !important;
}
.page{
  background:#ffffff !important;
}


/* =========================================================
   Visual Prototype 2.6.50
   Responsive readability fix.
   Геометрия 2.6.48 сохранена полностью; при уменьшении по ширине
   увеличиваются только шрифты/подписи, чтобы после scale() они
   оставались читаемыми на сайте.
   ========================================================= */
body.readability-compact .right-card h2,
body.readability-compact .lower-card h2{
  font-size:21px !important;
  line-height:24px !important;
}
body.readability-compact .humidity-card .subtitle{
  font-size:15px !important;
  line-height:18px !important;
}
body.readability-compact .humidity-card .humidity-readout{
  font-size:44px !important;
}
body.readability-compact .humidity-card .humidity-readout small{
  font-size:21px !important;
}
body.readability-compact .humidity-card .hum,
body.readability-compact .humidity-card .hum-input,
body.readability-compact .humidity-card .hum-apply{
  font-size:17px !important;
}
body.readability-compact .humidity-card .scale-labels,
body.readability-compact .humidity-card .threshold small,
body.readability-compact .humidity-card .humidity-status-text{
  font-size:13px !important;
  line-height:16px !important;
}
body.readability-compact .humidity-card .threshold b{
  font-size:20px !important;
  line-height:23px !important;
}
body.readability-compact .humidity-card .humidity-status-title{
  font-size:17px !important;
  line-height:20px !important;
}
body.readability-compact .state-card .state-cell small{
  font-size:11px !important;
  line-height:13px !important;
}
body.readability-compact .state-card .state-cell b{
  font-size:17px !important;
  line-height:19px !important;
}
body.readability-compact .settings-card .setting .k{
  font-size:13px !important;
  line-height:15px !important;
}
body.readability-compact .settings-card .setting .v{
  font-size:16px !important;
  line-height:18px !important;
}
body.readability-compact .settings-card .setting .u{
  font-size:12px !important;
  line-height:14px !important;
}
body.readability-compact .power-copy b{
  font-size:16px !important;
  line-height:18px !important;
}
body.readability-compact .power-copy span,
body.readability-compact .power-help{
  font-size:14px !important;
  line-height:17px !important;
}
body.readability-compact .warning-copy,
body.readability-compact .hysteresis-copy{
  font-size:14px !important;
  line-height:16.5px !important;
}
body.readability-compact .quick-list p{
  font-size:11.5px !important;
  line-height:14px !important;
}
body.readability-compact .quick-list span{
  font-size:12px !important;
}
body.readability-compact .controls-card,
body.readability-compact .quick-card{
  padding-left:14px !important;
  padding-right:14px !important;
}
body.readability-compact .hyst-values{
  font-size:18px !important;
  line-height:21px !important;
}
body.readability-compact .hyst-group i,
body.readability-compact .bridge{
  font-size:16px !important;
}
body.readability-compact .bracket span{
  font-size:13px !important;
}