*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 20%,#07518a,#031b36 75%);color:#fff;font:17px Arial,sans-serif}
a{color:#fff;text-decoration:none}
button,input{font:inherit}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(100deg,#041b3d,#07508b,#04182f);border:2px solid #075eb2;border-radius:15px;padding:10px 18px;box-shadow:0 2px 15px #00162d}
header .brand{font-size:clamp(24px,3vw,43px);font-weight:800}
nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
nav a,.tab{border:1px solid #1689dc;border-radius:9px;background:linear-gradient(#11508d,#052349);padding:9px 12px;font-weight:700}
nav .danger,.danger{background:linear-gradient(#ab1d28,#560e23);border-color:#ed3e49}
main{max-width:1560px;margin:auto;padding:12px}
h2{margin:6px 0 12px;text-align:center}
h3{margin:7px 0 12px}
.dashboard{display:grid;gap:12px}
.tanks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.panel{background:linear-gradient(145deg,#062c50,#03182d);border:1px solid #087bd3;border-radius:14px;padding:14px;min-width:0}
.tankline{display:flex;align-items:center;justify-content:space-around;gap:12px}
.tank{flex:0 0 43%;max-width:250px;height:340px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;border:9px ridge #a5cce8;border-radius:55px 55px 35px 35px;background:linear-gradient(#f9371c 0%,#f53d2c 37%,#6739a3 62%,#0455d3 86%);box-shadow:inset 10px 0 20px #ffffff50,inset -10px 0 20px #00112e,0 5px 18px #000}
.tank.tuv{background:linear-gradient(#ffb22b,#f67d14 40%,#7744a1 65%,#0758d5 87%)}
.tank b{font-size:clamp(24px,3vw,43px);text-shadow:0 2px 5px #001a37}
.pipes{display:flex;flex-direction:column;gap:14px;flex:1;min-width:95px}
.pipe{height:10px;border-radius:9px;background:linear-gradient(#ffaf76,#ff381f,#9b0a16);box-shadow:0 0 10px #ff392c}
.pipe.cold{background:linear-gradient(#9eefff,#1195ff,#064cba);box-shadow:0 0 10px #128cff}
.state{padding:9px;border:1px solid #2b6c9b;border-radius:10px;background:#052344;text-align:center}
.state strong{display:block;margin-top:5px}
.green{color:#00f477}
.red{color:#ff5555}
.muted{color:#a8c9e6}
.equipment{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.equipment .panel{min-height:180px;text-align:center}
.equipment h2{font-size:24px}
.equipment .icon{font-size:42px}
.nibe{background:linear-gradient(130deg,#8c3909,#381b14)}
.hotjet{background:linear-gradient(130deg,#8c1330,#290e24)}
.fve{background:linear-gradient(130deg,#0758ae,#06234d)}
.fotton{background:linear-gradient(130deg,#066a42,#062b28)}
.apartments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.apartments .panel{text-align:center;background:linear-gradient(135deg,#0864bd,#06214d)}
.apartments .panel:nth-child(2){background:linear-gradient(135deg,#5425b6,#201456)}
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #1b537d;padding:7px 3px}
.line strong{text-align:right}
.actions{display:flex;gap:7px;margin-top:12px}
.btn,button{display:inline-block;padding:10px 12px;border-radius:8px;border:1px solid #35baff;background:linear-gradient(#1374d1,#084483);color:white;font-weight:700;text-align:center;cursor:pointer}
.btn.ok{background:linear-gradient(#00d95e,#008a40);border-color:#36fb88}
.btn.stop{background:linear-gradient(#ff4a4a,#a8111b);border-color:#ff7a7a}
.btn[disabled]{opacity:.48;cursor:not-allowed}
.actions .btn{flex:1}
.auth{max-width:800px;margin:6vh auto;padding:35px;background:linear-gradient(145deg,#06437e,#041f44);border:2px solid #0c83eb;border-radius:26px;text-align:center}
.auth .symbol{font-size:90px}
.auth h1{font-size:clamp(40px,5vw,66px);margin:8px 0 25px}
.auth h2{color:#ff942d}
.auth label{display:block;text-align:left;margin:16px 0 8px;font-size:22px}
.pw{display:flex}
.pw input{min-width:0;flex:1;background:#083666;border:2px solid #17b9ff;border-radius:12px 0 0 12px;color:white;padding:17px;font-size:22px}
.pw button{border-radius:0 12px 12px 0;font-size:24px}
.auth .submit{width:100%;margin-top:20px;padding:19px;font-size:25px;background:linear-gradient(#00df69,#009342);border-color:#40ff9b}
.attempt{padding:14px;margin-top:12px;border:2px solid #e5323c;border-radius:13px;background:#351a30}
.remember{display:flex!important;align-items:center;justify-content:flex-start;gap:10px;margin:14px 0 0!important;font-size:20px!important}
.remember input{width:22px;height:22px}
.tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:10px 0}
.tabs a{font-size:14px;text-align:center}
.tabs .active{background:linear-gradient(#0093fb,#06479a)}
.sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.section{margin-bottom:12px}
.section h2{text-align:left}
.note{padding:10px;border:1px solid #e1a33e;border-radius:9px;color:#ffcd7b;margin:10px 0}
.back{font-size:22px}
footer{text-align:center;padding:15px;color:#b1d1ea}
@media(max-width:850px){
.tanks,.sections{grid-template-columns:1fr}
.equipment{grid-template-columns:repeat(2,1fr)}
.tabs{grid-template-columns:repeat(4,1fr)}
.tank{height:280px}
.auth{margin:4vh 10px}
}
@media(max-width:560px){
header{padding:8px}
.equipment{grid-template-columns:repeat(2,1fr)}
.apartments{grid-template-columns:1fr}
.tank{height:240px;flex-basis:48%}
.pipes{min-width:80px}
.tabs{grid-template-columns:repeat(3,1fr)}
.auth{padding:17px}
.auth .symbol{font-size:65px}
.auth .submit{font-size:20px}
}