body{
  margin:0;
  font-family: system-ui, sans-serif;
  background:#f7fbff;
}

.topbar{
  padding:16px;
  display:flex;
  gap:12px;
  align-items:center;
}
.back{
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  background:#e5e7eb;
}

.wrap{max-width:1200px;margin:auto;padding:16px;}
.card{
  background:#fff;
  border-radius:18px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:0 14px 35px rgba(0,0,0,.08);
}

.grid{
  display:grid;
  gap:14px;
}
@media(min-width:900px){
  .grid{grid-template-columns:1.2fr .8fr}
}

.muted{
  color:#475569;
  line-height:1.45;
}

.containerWrap{
  display:grid;
  gap:12px;
}

.container{
  height:260px;
  border-radius:18px;
  border:2px solid #94a3b8;
  position:relative;
  overflow:hidden;
  transition:all .4s ease;
}

.gas div{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#60a5fa;
}

.meters{
  display:flex;
  gap:10px;
}
.meter{
  flex:1;
  background:#f1f5f9;
  border-radius:14px;
  padding:10px;
  text-align:center;
}

.controls{
  margin-top:10px;
}
label{font-weight:700; display:block; margin-top:10px;}
input[type=range]{width:100%;}

.autoTag{
  display:inline-block;
  margin-left:6px;
  font-size:12px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  background:#e2e8f0;
  color:#334155;
  vertical-align:middle;
}

input[type=range]:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.graph select{
  width:100%;
  padding:8px;
  border-radius:12px;
  margin-bottom:10px;
}