:root{
  --bg:#020a0e;
  --panel:#06181d;
  --panel2:#082126;
  --line:#087985;
  --line2:#0da9b8;
  --cyan:#25efff;
  --cyan2:#67fbff;
  --green:#18ff9a;
  --yellow:#ffd35a;
  --orange:#ff9a4a;
  --red:#ff5178;
  --purple:#b783ff;
  --text:#ddffff;
  --muted:#73aeb3;
  --grid:rgba(22,115,126,.10);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    radial-gradient(circle at 50% 0%,rgba(0,229,255,.08),transparent 30%),
    #02090d;
  background-size:32px 32px,32px 32px,100% 100%,100% 100%;
  color:var(--text);
  font-family:"Segoe UI",Arial,sans-serif;
}

body{padding:18px}

button{font:inherit}

.page-shell{
  position:relative;
  max-width:1680px;
  margin:0 auto;
  min-height:calc(100vh - 36px);
}

.side-brand{
  position:absolute;
  top:10px;
  width:160px;
  z-index:2;
  font:600 10px/1.45 Consolas,monospace;
  letter-spacing:.18em;
  color:#2fd9e4;
  display:flex;
  flex-direction:column;
  opacity:.88;
}
.side-brand i{width:38px;height:3px;background:#15e8f7;margin-top:9px;box-shadow:0 0 10px #15e8f7}
.side-brand-left{left:6px}
.side-brand-right{right:6px;align-items:flex-end;text-align:right}

.hero{
  width:min(1180px,78vw);
  margin:0 auto;
  padding:16px 22px;
  border:1px solid #087684;
  background:linear-gradient(180deg,rgba(7,35,40,.97),rgba(4,22,27,.97));
  box-shadow:0 0 28px rgba(0,238,255,.18),inset 0 0 28px rgba(0,238,255,.04);
  clip-path:polygon(1% 0,99% 0,100% 16%,100% 84%,99% 100%,1% 100%,0 84%,0 16%);
}
.hero-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.hero-logo-wrap{
  flex:none;
  width:118px;
  height:118px;
  border-radius:50%;
  padding:8px;
  background:radial-gradient(circle at 50% 50%, rgba(36,239,255,.09), rgba(36,239,255,.02) 60%, transparent 70%);
  box-shadow:0 0 18px rgba(34,238,252,.18);
}
.hero-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(34,238,252,.20));
}
.hero-text{
  text-align:center;
}
.hero h1{
  margin:0;
  color:#22eefc;
  font-size:clamp(22px,3vw,42px);
  letter-spacing:.10em;
  font-weight:850;
  text-shadow:0 0 8px rgba(34,238,252,.75),0 0 20px rgba(34,238,252,.35);
}
.hero p{
  margin:7px 0 0;
  color:#66dfe6;
  font:600 13px Consolas,monospace;
  letter-spacing:.12em;
}

.toolbar{
  margin:20px auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.tabs,.status-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tab,.status-pill{
  min-height:42px;
  border:1px solid #0da6b4;
  background:#06171c;
  color:#61eef5;
  padding:0 20px;
  font-weight:800;
  letter-spacing:.06em;
  clip-path:polygon(5% 0,95% 0,100% 20%,100% 80%,95% 100%,5% 100%,0 80%,0 20%);
}
.tab{cursor:pointer}
.tab:hover{background:#08262c}
.tab.active{
  background:#20eaff;
  color:#001215;
  box-shadow:0 0 18px rgba(32,234,255,.45);
}
.status-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  font-size:12px;
}
.status-dot{
  width:12px;height:12px;border-radius:50%;
  box-shadow:0 0 12px currentColor;
}
.status-dot.online{background:var(--green);color:var(--green)}
.status-dot.offline{background:var(--red);color:var(--red)}
.status-icon{color:#17eaff;font-size:18px}

.dashboard-page{display:none}
.dashboard-page.active{display:block}

.gauge-grid{
  display:grid;
  gap:14px;
}
.gauge-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gauge-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}

.gauge-card,.panel,.digital-card{
  position:relative;
  background:linear-gradient(180deg,rgba(8,32,37,.98),rgba(4,20,25,.98));
  border:1px solid #087885;
  clip-path:polygon(3% 0,100% 0,100% 92%,97% 100%,0 100%,0 8%);
  box-shadow:inset 0 0 22px rgba(0,235,255,.025);
}
.gauge-card{
  min-height:258px;
  padding:16px 18px 10px;
}
.gauge-card::before,.panel::before,.digital-card::before{
  content:"";
  position:absolute;
  left:0;top:0;width:22px;height:3px;background:#20eaf8;
  box-shadow:0 0 9px rgba(32,234,248,.65);
}
.gauge-card header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.metric-head-left{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.icon-badge{
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  line-height:1;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 10px rgba(255,255,255,.03);
  flex:none;
}
.metric-head-text{min-width:0}
.icon-temp{color:#ff9b49;text-shadow:0 0 10px rgba(255,155,73,.55)}
.icon-humidity{color:#7bd3ff;text-shadow:0 0 10px rgba(123,211,255,.55)}
.icon-pressure{color:#59f2b7;text-shadow:0 0 10px rgba(89,242,183,.55)}
.icon-iaq{color:#82f16c;text-shadow:0 0 10px rgba(130,241,108,.55)}
.icon-airquality{color:#51f6da;text-shadow:0 0 10px rgba(81,246,218,.55)}
.icon-uv{color:#c688ff;text-shadow:0 0 10px rgba(198,136,255,.55)}
.icon-light{color:#ffe266;text-shadow:0 0 10px rgba(255,226,102,.55)}
.icon-vislight{color:#7dffce;text-shadow:0 0 10px rgba(125,255,206,.55)}
.icon-irlight{color:#ff7ca2;text-shadow:0 0 10px rgba(255,124,162,.55)}
.icon-gaslevel{color:#ffbe60;text-shadow:0 0 10px rgba(255,190,96,.55)}
.icon-dust{color:#79c8ff;text-shadow:0 0 10px rgba(121,200,255,.55)}
.icon-gas{color:#ffd35a;text-shadow:0 0 10px rgba(255,211,90,.55)}
.icon-altitude{color:#7fd9ff;text-shadow:0 0 10px rgba(127,217,255,.55)}
.metric-name{
  font-size:18px;
  letter-spacing:.06em;
  font-weight:800;
  color:#22eafb;
}
.metric-topic{
  margin-top:3px;
  font:600 11px Consolas,monospace;
  color:#44bac3;
}
.metric-range{
  flex:none;
  font:600 11px/1.55 Consolas,monospace;
  color:#a8d6d9;
  text-align:right;
}
.gauge-svg{width:100%;height:185px;display:block;margin-top:2px}
.gauge-track{fill:none;stroke:#11262c;stroke-width:18;stroke-linecap:round}
.gauge-arc{fill:none;stroke-width:14;stroke-linecap:round}
.gauge-needle{
  stroke:#efffff;
  stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.65));
  transform-origin:110px 108px;
  transition:transform .45s ease;
}
.gauge-hub{fill:#efffff}
.gauge-value{
  fill:#27efff;
  font:800 24px "Segoe UI",Arial,sans-serif;
  text-anchor:middle;
}
.gauge-min,.gauge-max{
  fill:#bbebed;
  font:600 10px Consolas,monospace;
}
.gauge-max{text-anchor:end}
.gauge-unit{font-size:.72em}

.bottom-grid-main{
  display:grid;
  grid-template-columns:2.2fr 1fr;
  gap:14px;
  margin-top:14px;
}
.panel{padding:14px 16px}
.panel-title{
  color:#34eefa;
  font:800 13px Consolas,monospace;
  letter-spacing:.08em;
  margin-bottom:12px;
}
.mini-chart-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.mini-chart-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mini-chart-card{
  min-width:0;
  border:1px solid #0b6974;
  background:#06161b;
  padding:10px;
}
.mini-chart-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#3ceaf5;
  font:700 11px Consolas,monospace;
}
.mini-chart-card canvas{
  width:100%;
  height:115px;
  display:block;
  margin-top:5px;
}
.system-panel,.mqtt-info-panel{min-height:100%}
.system-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:9px 0;
  border-bottom:1px solid #12323a;
  color:#c6e9eb;
  font:600 12px Consolas,monospace;
}
.good{color:var(--green)!important}
.bad{color:var(--red)!important}
.warn{color:var(--yellow)!important}

.node-box{
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:17px;
  padding-top:15px;
  border-top:1px solid #0d5962;
  color:#67cbd1;
  font:600 11px/1.65 Consolas,monospace;
}
.server-cube{
  width:56px;height:56px;
  border:1px solid #1edce8;
  transform:skewY(-10deg);
  position:relative;
  box-shadow:inset 0 0 18px rgba(30,220,232,.05);
}
.server-cube span{
  display:block;
  height:33%;
  border-bottom:1px solid #167780;
}

.highlight-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,400px));
  justify-content:center;
  gap:16px;
  margin:14px auto;
}
.digital-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  min-height:100px;
}
.digital-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
}
.digital-label{color:#39eaf5;font-weight:800;letter-spacing:.05em}
.topic-label{font:600 10px Consolas,monospace;color:#4bbcc5;margin-top:4px}
.digital-value{
  color:#22efff;
  border:1px solid #0b9caa;
  min-width:128px;
  padding:8px 16px;
  text-align:center;
  font-size:30px;
  font-weight:850;
}
.digital-range{
  grid-column:3;
  font:600 10px Consolas,monospace;
  color:#9fd5d8;
  text-align:right;
}

.advanced-bottom-grid{
  display:grid;
  grid-template-columns:1.75fr .72fr 1.1fr;
  gap:14px;
}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font:600 10px Consolas,monospace}
th,td{padding:6px 7px;border:1px solid #0c4850;text-align:left;white-space:nowrap}
th{color:#5be8ef;background:#08242a}
td{color:#c9e8ea}
.status-cell{text-align:center}
.status-cell span{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(24,255,154,.7);
}

footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:14px;
  padding:0 8px;
  color:#2c8b93;
  font:600 9px Consolas,monospace;
  letter-spacing:.14em;
}

@media(max-width:1380px){
  .side-brand{display:none}
  .hero{width:min(1180px,94vw)}
  .gauge-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .advanced-bottom-grid{grid-template-columns:1.6fr .9fr}
  .table-panel{grid-column:1/-1}
}
@media(max-width:1000px){
  .hero-inner{flex-direction:column}
  body{padding:10px}
  .gauge-grid-3,.gauge-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bottom-grid-main,.advanced-bottom-grid{grid-template-columns:1fr}
  .mini-chart-grid{grid-template-columns:1fr}
  .mini-chart-grid-2{grid-template-columns:1fr}
  .highlight-row{grid-template-columns:1fr}
}
@media(max-width:650px){
  .hero-logo-wrap{width:92px;height:92px}
  .hero{width:100%;padding:16px 12px}
  .hero h1{font-size:19px}
  .toolbar{justify-content:stretch}
  .tabs,.status-pills{width:100%}
  .tab,.status-pill{flex:1 1 auto;justify-content:center}
  .gauge-grid-3,.gauge-grid-5{grid-template-columns:1fr}
  .digital-card{grid-template-columns:auto 1fr}
  .digital-value,.digital-range{grid-column:1/-1}
  footer{flex-direction:column}
}

.digital-card .icon-gas{color:#ffd35a;text-shadow:0 0 10px rgba(255,211,90,.55)}
.digital-card .icon-altitude{color:#7fd9ff;text-shadow:0 0 10px rgba(127,217,255,.55)}

.icon-badge svg,
.digital-icon svg{
  width:26px;
  height:26px;
  display:block;
}
.icon-badge svg *,.digital-icon svg *{
  vector-effect:non-scaling-stroke;
}
.node-logo{
  width:76px;
  height:76px;
  object-fit:contain;
  border-radius:50%;
  box-shadow:0 0 12px rgba(34,238,252,.16);
  background:rgba(255,255,255,.02);
}