:root{
  color-scheme:dark;
  --bg:#07131f;
  --bg-deep:#04101a;
  --panel:rgba(11,31,48,.86);
  --panel-strong:#0b2032;
  --panel-soft:rgba(255,255,255,.032);
  --line:rgba(116,190,218,.14);
  --line-strong:rgba(49,216,255,.28);
  --text:#f4fbff;
  --text-soft:#d9e9f2;
  --muted:#8eaabd;
  --muted-2:#66879d;
  --cyan:#2ed6ff;
  --teal:#35e2c4;
  --green:#63e7a4;
  --amber:#ffd166;
  --red:#ff7187;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --shadow-soft:0 14px 34px rgba(0,0,0,.20);
  --topbar:rgba(5,15,25,.84);
  --sidebar:rgba(5,16,26,.76);
  --input:rgba(255,255,255,.04);
  --hover:rgba(255,255,255,.045);
  --page-glow-1:rgba(0,186,225,.14);
  --page-glow-2:rgba(32,103,200,.12);
  --gridline:rgba(73,171,207,.035);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#edf6fb;
  --bg-deep:#e5f1f8;
  --panel:rgba(255,255,255,.82);
  --panel-strong:#ffffff;
  --panel-soft:rgba(8,43,63,.035);
  --line:rgba(18,91,123,.13);
  --line-strong:rgba(0,151,196,.25);
  --text:#0c2638;
  --text-soft:#17394c;
  --muted:#5f7d90;
  --muted-2:#7893a3;
  --cyan:#008fc0;
  --teal:#009f8a;
  --green:#188c5f;
  --amber:#a86a00;
  --red:#c24158;
  --shadow:0 22px 55px rgba(54,100,128,.14);
  --shadow-soft:0 12px 30px rgba(54,100,128,.11);
  --topbar:rgba(247,252,255,.88);
  --sidebar:rgba(242,249,253,.88);
  --input:rgba(8,50,73,.035);
  --hover:rgba(8,50,73,.055);
  --page-glow-1:rgba(0,176,220,.13);
  --page-glow-2:rgba(46,141,214,.11);
  --gridline:rgba(45,126,161,.045);
}

*{box-sizing:border-box}
html,body{
  margin:0;min-width:320px;min-height:100%;
  background:var(--bg);font-family:var(--font);color:var(--text);
}
body{min-height:100vh;overflow-x:hidden}
button,input,select{font:inherit}
a{color:inherit}
[hidden]{display:none!important}

.bg{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(circle at 9% 18%,var(--page-glow-1),transparent 28rem),
    radial-gradient(circle at 91% 7%,var(--page-glow-2),transparent 34rem),
    linear-gradient(var(--gridline) 1px,transparent 1px),
    linear-gradient(90deg,var(--gridline) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}

.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:72px;padding:10px clamp(12px,2.5vw,28px);
  border-bottom:1px solid var(--line);
  background:var(--topbar);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 8px 35px rgba(0,0,0,.06);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand>span:last-child{display:grid;line-height:1}
.brand b{font-size:17px;letter-spacing:-.02em}
.brand small{margin-top:5px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.22em}
.logo{
  display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:14px;
  color:#042130;font-size:15px;font-weight:950;letter-spacing:-.05em;
  background:linear-gradient(145deg,#30d8ff,#35e3c6);
  box-shadow:0 10px 26px rgba(24,202,232,.22);
}

.top-actions{display:flex;align-items:center;gap:8px;min-width:0}
.website-link,.theme-toggle,.ghost,.cloud{
  min-height:36px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel-soft);color:var(--text-soft);
}
.website-link{
  display:inline-flex;align-items:center;gap:7px;padding:0 11px;
  text-decoration:none;font-size:10px;font-weight:850;white-space:nowrap;
}
.website-link:hover{border-color:var(--line-strong);background:var(--hover)}
.website-link b{color:var(--cyan);font-size:12px}
.theme-toggle{
  display:inline-flex;align-items:center;gap:7px;padding:0 10px;
  cursor:pointer;font-size:10px;font-weight:850;
}
.theme-toggle:hover{border-color:var(--line-strong);background:var(--hover)}
.theme-toggle span{font-size:14px;line-height:1;color:var(--cyan)}
.ghost{
  padding:0 12px;cursor:pointer;font-size:10px;font-weight:800;
}
.ghost:hover{border-color:var(--line-strong);background:var(--hover)}
.ghost.big{min-height:42px}
.cloud{
  display:inline-flex;align-items:center;gap:7px;padding:0 11px;
  color:var(--amber);font-size:10px;font-weight:850;
}
.cloud i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.cloud.ok{color:var(--green)}
.cloud.bad{color:var(--red)}


.shell{
  display:grid;grid-template-columns:210px minmax(0,1fr);
  min-height:calc(100vh - 72px);
}
.side{
  position:sticky;top:72px;height:calc(100vh - 72px);
  padding:18px 12px;border-right:1px solid var(--line);
  background:var(--sidebar);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.side nav{display:grid;gap:7px}
.nav{
  display:flex;align-items:center;gap:11px;min-height:46px;padding:0 12px;
  border:1px solid transparent;border-radius:13px;
  color:var(--muted);background:transparent;text-align:left;cursor:pointer;
}
.nav span{width:22px;color:var(--cyan);font-size:16px;text-align:center}
.nav b{font-size:12px}
.nav:hover{color:var(--text);background:var(--hover)}
.nav.active{
  color:var(--text);
  border-color:var(--line-strong);
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 10%, transparent),var(--panel-soft));
  box-shadow:inset 3px 0 0 var(--cyan);
}

.main{min-width:0;padding:34px clamp(14px,3vw,40px) 52px}
.view{max-width:1420px;margin:0 auto}
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  margin-bottom:22px;
}
.page-head h1{
  margin:8px 0 6px;
  font-size:clamp(42px,4.8vw,70px);
  line-height:.94;letter-spacing:-.06em;
}
.page-head p{margin:0;color:var(--muted);font-size:14px}
.mode-note{
  margin-top:8px;color:var(--muted-2);
  font-size:10px;font-weight:650;
}

.eyebrow{
  color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.17em;
}

.primary{
  min-height:42px;padding:0 16px;border:1px solid color-mix(in srgb,var(--cyan) 36%, transparent);
  border-radius:12px;color:#032130;
  background:linear-gradient(135deg,#31d8ff,#31e0c5);
  font-weight:900;cursor:pointer;
  box-shadow:0 12px 28px rgba(17,194,222,.16);
}
.primary:hover{filter:brightness(1.03)}
.notice{
  margin-bottom:16px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--amber) 22%, transparent);
  border-radius:14px;background:color-mix(in srgb,var(--amber) 8%, transparent);
  color:var(--text-soft);font-size:12px;
}

.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-bottom:14px;
}
.stats article,.panel{
  position:relative;min-width:0;
  padding:19px;border:1px solid var(--line);border-radius:21px;
  background:var(--panel);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.stats article:before,.panel:before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:21px 21px 0 0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 28%, transparent),transparent);
  pointer-events:none;
}
.stats small,.stats span{display:block;color:var(--muted-2)}
.stats small{font-size:9px;font-weight:900;letter-spacing:.14em}
.stats strong{
  display:block;margin:6px 0 2px;
  font-size:36px;line-height:1;letter-spacing:-.045em;
}
.stats span{font-size:10px}

.grid,.device-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.wide{grid-column:1/-1}
.panel-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-bottom:14px;
}
.panel-head small{color:var(--cyan);font-size:8px;font-weight:900;letter-spacing:.14em}
.panel-head h2{margin:4px 0 0;font-size:20px;letter-spacing:-.03em}
.panel-head>span{color:var(--muted-2);font-size:9px}

.path{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(60px,.48fr) minmax(150px,1fr) minmax(60px,.48fr) minmax(150px,1fr);
  gap:10px;align-items:center;padding:18px;
  border:1px solid var(--line);border-radius:17px;background:var(--panel-soft);
}
.node{
  text-align:center;padding:15px;border:1px solid var(--line);border-radius:15px;
  background:var(--panel-soft);box-shadow:var(--shadow-soft);
}
.node small,.node span{display:block;color:var(--muted-2);font-size:8px}
.node b{display:block;margin:4px 0 3px;font-size:13px}
.cloud-node{border-color:var(--line-strong)}
.node.online{border-color:color-mix(in srgb,var(--green) 34%, transparent)}
.node.offline{border-color:color-mix(in srgb,var(--red) 34%, transparent)}
.line{
  position:relative;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 10%,transparent),color-mix(in srgb,var(--cyan) 50%,transparent),color-mix(in srgb,var(--teal) 12%,transparent));
}
.line i{
  position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
  transform:translateY(-50%);animation:pulse 2.8s linear infinite;
}
@keyframes pulse{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}

.list{display:grid;gap:9px}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 13px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel-soft);
}
.row:hover{border-color:var(--line-strong);background:var(--hover)}
.row-main{display:flex;align-items:center;gap:10px;min-width:0}
.dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--muted-2)}
.dot.online{background:var(--green);box-shadow:0 0 12px color-mix(in srgb,var(--green) 45%,transparent)}
.dot.offline{background:var(--red)}
.copy{min-width:0}
.copy strong,.copy span,.copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy strong{font-size:12px}
.copy span,.copy small{margin-top:2px;color:var(--muted-2);font-size:9px}
.pill{
  padding:5px 7px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font-size:8px;font-weight:900;text-transform:uppercase;
}
.pill.online{color:var(--green)}
.pill.offline{color:var(--red)}
.pill.score{color:var(--cyan)}
.empty{
  padding:22px;border:1px dashed var(--line);border-radius:14px;
  color:var(--muted-2);text-align:center;font-size:10px;
}

.device-form{display:grid;gap:12px}
.device-form label{display:grid;gap:6px}
.device-form label>span{
  color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase;
}
.device-form input,.device-form select{
  min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;
  outline:none;color:var(--text);background:var(--input);
}
.device-form input:focus,.device-form select:focus{
  border-color:var(--line-strong);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 8%,transparent);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-actions{display:flex;gap:9px}
.form-actions>*{flex:1}
.form-error{
  padding:10px 12px;border:1px solid color-mix(in srgb,var(--red) 18%,transparent);
  border-radius:10px;background:color-mix(in srgb,var(--red) 6%,transparent);
  color:var(--red);font-size:10px;
}
.help{margin:13px 0 0;color:var(--muted-2);font-size:10px;line-height:1.55}
.device-actions{display:flex;gap:7px}
.small{
  min-height:30px;padding:0 9px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel-soft);color:var(--text-soft);font-size:9px;font-weight:800;cursor:pointer;
}
.small.open{color:#071b27;background:linear-gradient(135deg,#31d8ff,#31e0c5)}
.control-note{
  margin-top:14px;padding:15px 17px;border:1px solid var(--line-strong);
  border-radius:16px;background:color-mix(in srgb,var(--cyan) 4%,var(--panel));
}
.control-note p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.55}

@media(max-width:1080px){
  .website-link span{display:none}
  .theme-toggle b{display:none}
}
@media(max-width:980px){
  .shell{grid-template-columns:74px minmax(0,1fr)}
  .nav{justify-content:center;padding:0}
  .nav b{display:none}
}
@media(max-width:740px){
  .top{min-height:64px;padding:8px 9px}
  .brand b{font-size:15px}
  .brand small{font-size:8px}
  .logo{width:38px;height:38px;flex-basis:38px}
  .website-link{width:36px;justify-content:center;padding:0}
  .theme-toggle{width:36px;justify-content:center;padding:0}
  .cloud{width:36px;justify-content:center;padding:0}
  .cloud>span{display:none}
  .ghost{padding:0 10px}
  .shell{display:block;padding-bottom:72px}
  .side{
    position:fixed;left:0;right:0;top:auto;bottom:0;z-index:40;
    width:auto;height:66px;padding:7px;border-right:0;border-top:1px solid var(--line);
    background:var(--topbar);
  }
  .side nav{grid-template-columns:repeat(5,1fr);gap:4px}
  .nav{display:grid;place-items:center;gap:2px;min-height:50px;padding:4px 2px}
  .nav b{display:block;font-size:7px}
  .nav span{height:18px}
  .main{padding:22px 10px 28px}
  .page-head{align-items:flex-start;flex-direction:column}
  .page-head h1{font-size:44px}
  .page-head .primary{width:100%}
  .stats,.grid,.device-grid{grid-template-columns:1fr}
  .wide{grid-column:auto}
  .path{grid-template-columns:1fr}
  .line{width:1px;height:28px;justify-self:center}
  .form-actions{flex-direction:column}
}
@media(max-width:430px){
  .top-actions{gap:5px}
  .brand>span:last-child{display:none}
  .ghost{font-size:9px}
  .page-head h1{font-size:40px}
  .form-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* v0.3.6 polish + accessibility */
html,body,.top,.side,.panel,.stats article,.row,.node,.device-form input,.device-form select{
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid color-mix(in srgb,var(--cyan) 32%,transparent);
  outline-offset:2px;
}
.website-link,.theme-toggle,.ghost,.primary,.nav,.small{
  -webkit-tap-highlight-color:transparent;
}
@media(prefers-reduced-motion:reduce){
  html,body,.top,.side,.panel,.stats article,.row,.node,.device-form input,.device-form select{
    transition:none!important;
  }
}


/* =========================================================
   ballastIQ ONE v0.3.7 product-console additions
   ========================================================= */
.page-actions{display:flex;align-items:flex-end;gap:10px}
.site-select{display:grid;gap:5px;min-width:138px}
.site-select>span{color:var(--muted-2);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.site-select select{min-height:42px;padding:0 34px 0 11px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:var(--panel);outline:none}
.site-select select:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 8%,transparent)}
.account-chip{max-width:170px;min-height:36px;padding:0 11px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);color:var(--text-soft);font-size:10px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-btn{border-color:color-mix(in srgb,var(--teal) 30%,var(--line));color:var(--teal)}

.health-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}
.health-strip article{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 13px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow-soft)}
.health-strip small,.health-strip strong{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.health-strip small{color:var(--muted-2);font-size:8px;font-weight:900;letter-spacing:.12em}
.health-strip strong{margin-top:3px;color:var(--text-soft);font-size:11px}
.health-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);color:var(--cyan);font-size:13px}
.cloud-health{color:var(--green)}

.overview-feature-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:14px;margin-bottom:14px}
.vision-feature,.alerts-feature{min-height:330px}
.camera-preview{position:relative;display:grid;place-items:center;min-height:245px;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--bg-deep) 92%,var(--cyan) 8%),var(--panel-soft))}
.camera-preview:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.14))}
.camera-preview img{display:block;width:100%;height:100%;min-height:245px;object-fit:cover}
.camera-placeholder{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;max-width:420px;padding:26px;text-align:center}
.camera-placeholder>span{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line-strong);border-radius:18px;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 7%,transparent);font-size:24px;box-shadow:0 0 30px color-mix(in srgb,var(--cyan) 10%,transparent)}
.camera-placeholder strong{font-size:16px}
.camera-placeholder small{color:var(--muted);font-size:10px;line-height:1.5}
.vision-meta{margin-top:10px;color:var(--muted-2);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert-list{display:grid;gap:9px}
.alert-item{display:flex;align-items:flex-start;gap:10px;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--panel-soft)}
.alert-item>span{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:9px;font-size:10px;font-weight:950}
.alert-item div{min-width:0}.alert-item strong,.alert-item small{display:block}.alert-item strong{font-size:10px}.alert-item small{margin-top:3px;color:var(--muted-2);font-size:9px;line-height:1.35}
.alert-item.ok>span{color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent)}
.alert-item.warning>span{color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.alert-item.info>span{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}

.timeline{display:grid;gap:0}
.timeline-item{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:8px 0 13px}
.timeline-item:not(:last-child):before{content:"";position:absolute;left:8px;top:22px;bottom:-1px;width:1px;background:var(--line)}
.timeline-dot{position:relative;z-index:1;width:9px;height:9px;margin-top:4px;border-radius:50%;background:var(--muted-2);box-shadow:0 0 0 4px var(--panel)}
.timeline-dot.online{background:var(--green)}.timeline-dot.warning{background:var(--amber)}.timeline-dot.event{background:var(--cyan)}
.timeline-item strong,.timeline-item span,.timeline-item small{display:block}.timeline-item strong{font-size:10px}.timeline-item span{margin-top:2px;color:var(--muted);font-size:9px}.timeline-item small{margin-top:3px;color:var(--muted-2);font-size:8px}

.energy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.energy-card{position:relative;min-height:170px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.energy-card:after{content:"";position:absolute;width:110px;height:110px;right:-48px;top:-48px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 7%,transparent);filter:blur(4px)}
.energy-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border:1px solid var(--line-strong);border-radius:13px;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 6%,transparent);font-size:18px}
.energy-card small{display:block;color:var(--muted-2);font-size:8px;font-weight:900;letter-spacing:.13em}.energy-card strong{display:block;margin-top:6px;font-size:18px;letter-spacing:-.025em}.energy-card p{margin:5px 0 0;color:var(--muted);font-size:9px}
.energy-flow-panel{margin-top:0}
.energy-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:17px;background:var(--panel-soft)}
.flow-node{display:grid;justify-items:center;gap:3px;padding:15px 10px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.flow-node>span{color:var(--cyan);font-size:20px}.flow-node b{font-size:11px}.flow-node small{color:var(--muted-2);font-size:8px}.flow-node.accent{border-color:var(--line-strong)}
.flow-link{color:var(--muted-2);font-size:18px}.flow-branch{display:none}

.vision-page-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:14px}
.vision-page-preview .camera-preview{min-height:430px}.vision-page-preview .camera-preview img{min-height:430px}
.events-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}

.device-type-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--line);border-radius:11px;color:var(--cyan);background:var(--panel-soft);font-size:15px}
.device-row .device-actions{flex-wrap:wrap;justify-content:flex-end}

@media(max-width:1100px){
  .health-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .overview-feature-grid,.vision-page-grid{grid-template-columns:1fr}
  .alerts-feature{min-height:auto}
  .energy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:740px){
  .page-actions{width:100%;align-items:stretch}.site-select{flex:1}.page-actions .primary{width:auto;flex:0 0 auto}
  .health-strip{grid-template-columns:1fr 1fr}.health-strip article:last-child{grid-column:1/-1}
  .energy-grid,.events-grid{grid-template-columns:1fr}
  .energy-flow{grid-template-columns:1fr}.flow-link{transform:rotate(90deg);justify-self:center}
  .vision-page-preview .camera-preview,.vision-page-preview .camera-preview img{min-height:280px}
  .side nav{grid-template-columns:repeat(6,minmax(0,1fr))}
  .nav b{font-size:6.5px}
}
@media(max-width:500px){
  .health-strip{grid-template-columns:1fr}
  .health-strip article:last-child{grid-column:auto}
  .page-actions{display:grid;grid-template-columns:1fr auto}
  .site-select{min-width:0}
  .account-chip{display:none!important}
  .install-btn{display:none!important}
  .website-link{display:none}
}


/* v0.3.8 pairing-code device connection */
.pairing-panel{
  overflow:hidden;
}
.pairing-code-input{
  min-height:62px!important;
  text-align:center;
  font-size:clamp(24px,4vw,36px)!important;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--text)!important;
  border-color:var(--line-strong)!important;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--cyan) 5%,transparent),color-mix(in srgb,var(--teal) 4%,transparent)),
    var(--input)!important;
}
.pairing-code-input::placeholder{
  color:var(--muted-2);
  opacity:.58;
}
.pairing-help{
  margin-top:16px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel-soft);
}
.pairing-help b{
  display:block;
  color:var(--text-soft);
  font-size:11px;
}
.pairing-help p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
}
.pairing-success{
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--green) 28%,transparent);
  border-radius:11px;
  background:color-mix(in srgb,var(--green) 7%,transparent);
  color:var(--green);
  font-size:10px;
  font-weight:750;
}
.paired-device-row .copy small{
  font-variant-numeric:tabular-nums;
}
#pairDeviceBtn:disabled,
.small:disabled{
  opacity:.6;
  cursor:wait;
}
@media(max-width:520px){
  .pairing-code-input{
    font-size:25px!important;
    letter-spacing:.12em;
  }
}


/* v0.3.9 required-authentication application gate */
.auth-gate{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:20px;
  overflow:auto;
  background:
    radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--cyan) 13%,transparent),transparent 34%),
    radial-gradient(circle at 82% 78%,color-mix(in srgb,var(--teal) 11%,transparent),transparent 38%),
    color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.auth-gate[hidden]{
  display:none!important;
}

.auth-gate-card{
  width:min(560px,100%);
  padding:clamp(28px,5vw,48px);
  border:1px solid var(--line-strong);
  border-radius:28px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel-soft) 91%,transparent));
  box-shadow:
    0 28px 80px rgba(0,0,0,.3),
    inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent);
}

.auth-gate-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:42px;
}

.auth-gate-brand .logo{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:18px;
}

.auth-gate-brand>span:last-child{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.auth-gate-brand b{
  color:var(--text);
  font-size:17px;
  letter-spacing:-.02em;
}

.auth-gate-brand small{
  margin-top:5px;
  color:var(--cyan);
  font-size:9px;
  font-weight:900;
  letter-spacing:.2em;
}

.auth-gate-copy .eyebrow{
  margin-bottom:12px;
}

.auth-gate-copy h1{
  max-width:470px;
  margin:0;
  font-size:clamp(32px,6vw,52px);
  line-height:.98;
  letter-spacing:-.045em;
}

.auth-gate-copy p{
  max-width:470px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}

.auth-gate-status{
  margin-top:30px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-soft);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.auth-gate-button{
  width:100%;
  min-height:52px;
  margin-top:14px;
  font-size:13px;
}

.auth-gate-website{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:20px;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  text-decoration:none;
}

.auth-gate-website:hover,
.auth-gate-website:focus-visible{
  color:var(--cyan);
}

body.auth-pending > .top,
body.auth-pending > .shell,
body.auth-required > .top,
body.auth-required > .shell{
  visibility:hidden!important;
  pointer-events:none!important;
  user-select:none!important;
}

body.authenticated > .top,
body.authenticated > .shell{
  visibility:visible;
  pointer-events:auto;
  user-select:auto;
}

@media(max-width:640px){
  .auth-gate{
    padding:12px;
  }
  .auth-gate-card{
    padding:28px 22px;
    border-radius:22px;
  }
  .auth-gate-brand{
    margin-bottom:34px;
  }
}

@media(prefers-reduced-motion:reduce){
  .auth-gate,
  .auth-gate-card{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   ballastIQ ONE v0.4.0
   Tahoe-inspired Liquid Glass navigation
   ========================================================= */

/* Let the content/background remain visible around the floating menu. */
.side{
  background:transparent!important;
  border-right:0!important;
  padding:18px 12px 18px 14px;
  overflow:visible;
}

/* Desktop floating glass rail. */
.side nav{
  position:relative;
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid color-mix(in srgb,#ffffff 18%,var(--line));
  border-radius:30px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,#ffffff 12%,transparent),
      color-mix(in srgb,var(--panel) 64%,transparent) 34%,
      color-mix(in srgb,var(--panel-soft) 54%,transparent)
    );
  box-shadow:
    0 22px 55px rgba(0,0,0,.16),
    0 7px 20px rgba(0,0,0,.08),
    inset 0 1px 0 color-mix(in srgb,#ffffff 38%,transparent),
    inset 1px 0 0 color-mix(in srgb,#ffffff 11%,transparent),
    inset 0 -1px 0 color-mix(in srgb,#000000 12%,transparent);
  backdrop-filter:blur(34px) saturate(185%);
  -webkit-backdrop-filter:blur(34px) saturate(185%);
  isolation:isolate;
}

/* Specular light/refraction layer. */
.side nav::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  pointer-events:none;
  border-radius:28px;
  background:
    radial-gradient(circle at 18% 4%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(
      115deg,
      rgba(255,255,255,.10),
      transparent 28%,
      transparent 68%,
      color-mix(in srgb,var(--cyan) 7%,transparent)
    );
  opacity:.85;
}

/* Delicate colored edge glow, still neutral enough to read as glass. */
.side nav::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-2;
  pointer-events:none;
  border-radius:31px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,#ffffff 20%,transparent),
      transparent 38%,
      color-mix(in srgb,var(--cyan) 12%,transparent) 72%,
      color-mix(in srgb,var(--teal) 10%,transparent)
    );
  filter:blur(7px);
  opacity:.55;
}

/* Navigation buttons become individual glass capsules. */
.nav{
  position:relative;
  min-height:48px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:20px;
  color:var(--muted);
  background:transparent;
  overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .22s ease!important;
}

.nav::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(120deg,rgba(255,255,255,.15),transparent 34%,transparent 68%,rgba(255,255,255,.05));
  opacity:0;
  transition:opacity .22s ease;
}

.nav span,
.nav b{
  position:relative;
  z-index:1;
}

.nav span{
  color:color-mix(in srgb,var(--cyan) 82%,var(--text));
  text-shadow:0 1px 12px color-mix(in srgb,var(--cyan) 22%,transparent);
}

.nav:hover{
  color:var(--text);
  border-color:color-mix(in srgb,#ffffff 12%,var(--line));
  background:color-mix(in srgb,#ffffff 7%,var(--panel-soft));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 7px 20px rgba(0,0,0,.08);
  transform:translateY(-1px) scale(1.012);
}

.nav:hover::before{
  opacity:1;
}

/* Active item = raised liquid-glass selection lens. */
.nav.active{
  color:var(--text);
  border-color:color-mix(in srgb,#ffffff 24%,var(--line-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,#ffffff 15%,transparent),
      color-mix(in srgb,var(--cyan) 12%,var(--panel-soft)) 48%,
      color-mix(in srgb,var(--teal) 8%,var(--panel-soft))
    );
  box-shadow:
    0 10px 25px rgba(0,0,0,.13),
    0 4px 14px color-mix(in srgb,var(--cyan) 8%,transparent),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.10);
  transform:none;
}

.nav.active::before{
  opacity:1;
  background:
    radial-gradient(circle at 20% 2%,rgba(255,255,255,.28),transparent 37%),
    linear-gradient(120deg,rgba(255,255,255,.12),transparent 42%);
}

/* Remove the old hard cyan left marker. */
.nav.active{
  box-shadow:
    0 10px 25px rgba(0,0,0,.13),
    0 4px 14px color-mix(in srgb,var(--cyan) 8%,transparent),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.10)!important;
}

/* Give the top bar the same glass language without turning it into a heavy slab. */
.top{
  margin:10px 12px 0;
  min-height:64px;
  border:1px solid color-mix(in srgb,#ffffff 15%,var(--line));
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,#ffffff 9%,transparent),
      color-mix(in srgb,var(--topbar) 72%,transparent)
    )!important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.10),
    inset 0 1px 0 color-mix(in srgb,#ffffff 28%,transparent);
  backdrop-filter:blur(34px) saturate(180%);
  -webkit-backdrop-filter:blur(34px) saturate(180%);
}

.shell{
  min-height:calc(100vh - 84px);
}

.side{
  top:84px;
  height:calc(100vh - 84px);
}

/* Glass treatment for compact top-bar controls. */
.website-link,
.theme-toggle,
.ghost,
.cloud,
.account-chip{
  border-color:color-mix(in srgb,#ffffff 13%,var(--line));
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,#ffffff 9%,transparent),
      color-mix(in srgb,var(--panel-soft) 68%,transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#ffffff 16%,transparent),
    0 5px 14px rgba(0,0,0,.045);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
}

/* Tablet rail remains compact but floating. */
@media(max-width:980px) and (min-width:741px){
  .side{
    padding-left:10px;
    padding-right:10px;
  }
  .side nav{
    padding:8px;
    border-radius:27px;
  }
  .nav{
    padding:0;
    border-radius:18px;
  }
}

/* Mobile = a Tahoe-style floating glass dock. */
@media(max-width:740px){
  .top{
    top:8px;
    margin:8px 8px 0;
    min-height:58px;
    padding:7px 8px;
    border-radius:22px;
  }

  .shell{
    padding-bottom:94px;
  }

  .side{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    top:auto;
    z-index:40;
    width:auto;
    height:auto;
    padding:0;
    border:0!important;
    background:transparent!important;
  }

  .side nav{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:4px;
    padding:7px;
    border-radius:27px;
    background:
      linear-gradient(
        145deg,
        color-mix(in srgb,#ffffff 12%,transparent),
        color-mix(in srgb,var(--topbar) 70%,transparent)
      );
    box-shadow:
      0 18px 45px rgba(0,0,0,.20),
      inset 0 1px 0 color-mix(in srgb,#ffffff 32%,transparent),
      inset 0 -1px 0 rgba(0,0,0,.10);
    backdrop-filter:blur(34px) saturate(190%);
    -webkit-backdrop-filter:blur(34px) saturate(190%);
  }

  .side nav::before{
    border-radius:25px;
  }

  .side nav::after{
    border-radius:28px;
  }

  .nav{
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    min-height:54px;
    padding:4px 2px;
    border-radius:19px;
  }

  .nav span{
    width:auto;
    height:19px;
    font-size:16px;
  }

  .nav b{
    display:block;
    max-width:100%;
    font-size:6.5px;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .nav:hover{
    transform:none;
  }
}

@media(max-width:430px){
  .side{
    left:7px;
    right:7px;
    bottom:7px;
  }

  .side nav{
    padding:6px 5px;
    gap:2px;
    border-radius:25px;
  }

  .nav{
    min-height:52px;
    border-radius:17px;
  }

  .nav span{
    font-size:15px;
  }

  .nav b{
    font-size:6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .nav{
    transition:none!important;
  }
}


/* =========================================================
   ballastIQ ONE v0.5.0
   Website-aligned connected-operations console
   ========================================================= */

:root{
  --bq-navy-950:#03101a;
  --bq-navy-900:#061724;
  --bq-navy-850:#082033;
  --bq-navy-800:#0b2b43;
  --bq-steel:#406b84;
  --bq-blue:#31b9e8;
  --bq-cyan:#3bd7ff;
  --bq-teal:#5e92ad;
  --bq-white:#f8fcff;
  --bq-display:"Arial Black","Aptos Black","Segoe UI Black",system-ui,sans-serif;
  --bq-body:Aptos,"Segoe UI",Inter,system-ui,-apple-system,sans-serif;

  --bg:#061724;
  --bg-deep:#03101a;
  --panel:rgba(7,29,46,.74);
  --panel-strong:rgba(8,32,51,.94);
  --panel-soft:rgba(222,245,255,.055);
  --line:rgba(155,213,237,.13);
  --line-strong:rgba(59,215,255,.33);
  --text:#f8fcff;
  --text-soft:#dceef7;
  --muted:#91adbc;
  --muted-2:#66889d;
  --cyan:var(--bq-cyan);
  --teal:var(--bq-teal);
  --green:#65a9ce;
  --amber:#ffd777;
  --red:#ff7f92;
  --shadow:0 28px 80px rgba(0,0,0,.28);
  --shadow-soft:0 18px 42px rgba(0,0,0,.18);
  --topbar:rgba(3,16,26,.70);
  --sidebar:rgba(3,16,26,.56);
  --input:rgba(237,249,255,.06);
  --hover:rgba(237,249,255,.07);
  --page-glow-1:rgba(32,188,233,.17);
  --page-glow-2:rgba(48,102,145,.16);
  --gridline:rgba(110,184,215,.03);
  --font:var(--bq-body);
}

html[data-theme="light"]{
  --bg:#edf5f8;
  --bg-deep:#e2edf2;
  --panel:rgba(255,255,255,.79);
  --panel-strong:rgba(255,255,255,.96);
  --panel-soft:rgba(9,53,78,.045);
  --line:rgba(17,73,100,.12);
  --line-strong:rgba(0,145,194,.28);
  --text:#0a2637;
  --text-soft:#173e54;
  --muted:#58798c;
  --muted-2:#7893a3;
  --cyan:#008ebd;
  --teal:#3f7896;
  --green:#2f759b;
  --amber:#9a6800;
  --red:#bd4055;
  --shadow:0 26px 62px rgba(38,75,96,.14);
  --shadow-soft:0 16px 36px rgba(38,75,96,.10);
  --topbar:rgba(245,250,252,.76);
  --sidebar:rgba(244,249,251,.64);
  --input:rgba(8,49,72,.045);
  --hover:rgba(8,49,72,.055);
  --page-glow-1:rgba(31,175,218,.12);
  --page-glow-2:rgba(34,109,170,.09);
  --gridline:rgba(45,126,161,.035);
}

html,body{
  background:
    linear-gradient(180deg,var(--bg-deep) 0,var(--bg) 34%,var(--bg) 100%);
  font-family:var(--bq-body);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 6%,rgba(63,205,245,.12),transparent 30rem),
    radial-gradient(circle at 88% 16%,rgba(66,120,190,.12),transparent 38rem);
}

.bg{
  opacity:.78;
  background-size:auto,auto,54px 54px,54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.32));
}

h1,h2,h3,.brand-word,.auth-gate-copy h1{
  font-family:var(--bq-display);
}

h1,h2,h3{
  text-wrap:balance;
}

/* ---------------- Brand ---------------- */

.brand{
  gap:14px;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.brand-word{
  color:var(--text);
  font-size:20px;
  line-height:1;
  letter-spacing:-.055em;
  text-shadow:0 7px 22px rgba(0,0,0,.18);
}

.brand-word>span{
  color:var(--cyan);
}

.brand-product{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border:1px solid color-mix(in srgb,var(--cyan) 32%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--cyan) 8%,transparent);
  color:var(--text-soft);
  font-size:8px;
  font-weight:950;
  letter-spacing:.22em;
}

.brand-divider{
  width:1px;
  height:27px;
  background:var(--line);
}

.brand-descriptor{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  letter-spacing:.04em;
}

/* ---------------- Top application bar ---------------- */

.top{
  top:10px;
  width:calc(100% - 20px);
  margin:10px 10px 0;
  min-height:68px;
  padding:10px 16px;
  border:1px solid rgba(184,227,244,.14);
  border-radius:23px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.085),rgba(5,23,37,.68) 38%,rgba(4,18,30,.78))!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
}

html[data-theme="light"] .top{
  background:
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(245,251,253,.75))!important;
}

.website-link,.theme-toggle,.ghost,.cloud,.account-chip{
  min-height:38px;
  border-radius:12px;
  border-color:rgba(185,226,243,.13);
  background:rgba(255,255,255,.045);
}

.account-chip{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  color:var(--text-soft);
  font-size:9px;
  font-weight:800;
}

/* ---------------- Application shell / glass rail ---------------- */

.shell{
  grid-template-columns:238px minmax(0,1fr);
  min-height:calc(100vh - 88px);
}

.side{
  top:88px;
  height:calc(100vh - 88px);
  padding:16px 10px 18px 14px;
}

.side-inner{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 122px);
  padding:12px;
  border:1px solid rgba(170,219,239,.13);
  border-radius:26px;
  background:
    linear-gradient(155deg,rgba(255,255,255,.07),rgba(5,23,37,.60) 30%,rgba(5,21,34,.72));
  box-shadow:
    0 24px 60px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter:blur(30px) saturate(155%);
  -webkit-backdrop-filter:blur(30px) saturate(155%);
}

html[data-theme="light"] .side-inner{
  background:linear-gradient(155deg,rgba(255,255,255,.90),rgba(244,250,252,.72));
}

.side-kicker{
  padding:8px 9px 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}

.side-kicker small,
.side-footer small{
  display:block;
  color:var(--cyan);
  font-size:7px;
  font-weight:950;
  letter-spacing:.18em;
}

.side-kicker span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
}

.side nav{
  display:grid;
  gap:6px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.side nav::before,
.side nav::after{
  display:none;
}

.nav{
  min-height:49px;
  padding:0 12px;
  gap:11px;
  border-radius:16px;
  font-family:var(--bq-body);
}

.nav span{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(173,221,239,.10);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  font-size:14px;
}

.nav b{
  font-size:11px;
  letter-spacing:.005em;
}

.nav.active{
  border-color:rgba(75,213,249,.26)!important;
  background:
    linear-gradient(110deg,rgba(49,190,230,.16),rgba(82,145,178,.07) 70%,rgba(255,255,255,.035))!important;
  box-shadow:
    0 9px 26px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
}

.nav.active span{
  border-color:rgba(59,215,255,.28);
  background:linear-gradient(145deg,rgba(59,215,255,.16),rgba(94,146,173,.08));
  color:#dff9ff;
}

html[data-theme="light"] .nav.active span{
  color:#063449;
}

.side-footer{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding:13px 9px 6px;
  border-top:1px solid var(--line);
}

.side-footer-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 16px color-mix(in srgb,var(--teal) 70%,transparent);
}

.side-footer strong{
  display:block;
  margin-top:3px;
  color:var(--text-soft);
  font-size:8px;
  font-weight:800;
}

/* ---------------- Main content ---------------- */

.main{
  padding:26px clamp(14px,2.7vw,38px) 60px;
}

.view{
  max-width:1540px;
}

.page-head{
  margin-bottom:22px;
  align-items:flex-end;
}

.page-head h1{
  margin:8px 0 7px;
  max-width:900px;
  font-size:clamp(42px,5.2vw,78px);
  line-height:.91;
  letter-spacing:-.065em;
  text-shadow:0 7px 24px rgba(0,0,0,.18);
}

.page-head p{
  max-width:760px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.section-hero{
  position:relative;
  overflow:hidden;
  min-height:220px;
  padding:34px 36px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 85% 20%,rgba(59,215,255,.11),transparent 22rem),
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(7,30,48,.75));
  box-shadow:var(--shadow-soft);
}

.section-hero::after{
  content:"";
  position:absolute;
  inset:auto -8% -70% 38%;
  height:260px;
  border-radius:50%;
  background:rgba(46,185,226,.10);
  filter:blur(60px);
  pointer-events:none;
}

.eyebrow{
  color:var(--cyan);
  font-size:9px;
  font-weight:950;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.primary{
  min-height:46px;
  padding:0 18px;
  border-radius:14px;
  color:#042333;
  background:linear-gradient(135deg,#42d9fa,#63acd2);
  box-shadow:
    0 12px 30px rgba(38,198,223,.18),
    inset 0 1px 0 rgba(255,255,255,.40);
}

.text-action{
  border:0;
  padding:5px 0;
  background:transparent;
  color:var(--cyan);
  font:800 9px/1 var(--bq-body);
  cursor:pointer;
}

.text-action:hover{
  color:var(--teal);
}

/* ---------------- Cinematic overview hero ---------------- */

.overview-hero{
  position:relative;
  min-height:390px;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid rgba(164,216,238,.15);
  border-radius:32px;
  background:#061725;
  box-shadow:
    0 34px 90px rgba(0,0,0,.29),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.overview-hero-media{
  position:absolute;
  inset:0;
  background:
    url("https://www.ballastiq.com/connected-operations-cta-desktop.webp") center/cover no-repeat;
  opacity:.56;
  transform:scale(1.015);
}

.overview-hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,13,22,.97) 0%,rgba(3,16,27,.88) 38%,rgba(3,16,27,.40) 74%,rgba(3,16,27,.68) 100%),
    linear-gradient(0deg,rgba(3,15,25,.80),transparent 62%);
}

.overview-hero-content{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
  min-height:390px;
  padding:clamp(28px,4vw,54px);
}

.overview-hero-copy{
  max-width:800px;
}

.overview-hero h1{
  margin:10px 0 15px;
  max-width:760px;
  color:#fff;
  font-family:var(--bq-display);
  font-size:clamp(48px,6.5vw,98px);
  line-height:.86;
  letter-spacing:-.072em;
  text-shadow:
    0 4px 0 rgba(1,15,25,.45),
    0 18px 44px rgba(0,0,0,.36);
}

.overview-hero-copy>p{
  max-width:650px;
  margin:0;
  color:rgba(236,248,253,.80);
  font-size:14px;
  line-height:1.7;
}

.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:23px;
}

.hero-proof span{
  padding:8px 10px;
  border:1px solid rgba(194,229,242,.15);
  border-radius:999px;
  background:rgba(5,21,34,.40);
  color:rgba(235,248,253,.82);
  font-size:8px;
  font-weight:800;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.overview-hero-actions{
  width:min(315px,100%);
  display:grid;
  gap:10px;
}

.hero-state{
  padding:18px;
  border:1px solid rgba(195,230,243,.18);
  border-radius:20px;
  background:rgba(5,21,34,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}

.hero-state small{
  display:block;
  color:var(--cyan);
  font-size:7px;
  font-weight:950;
  letter-spacing:.18em;
}

.hero-state strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font:900 19px/1.15 var(--bq-body);
}

.hero-state span{
  display:block;
  margin-top:6px;
  color:rgba(224,242,249,.65);
  font-size:9px;
  line-height:1.45;
}

/* ---------------- Health/status ---------------- */

.health-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:0 0 14px;
}

.health-strip article{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:17px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(6,28,45,.64));
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

html[data-theme="light"] .health-strip article{
  background:rgba(255,255,255,.76);
}

.health-icon{
  flex:0 0 31px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid rgba(59,215,255,.17);
  border-radius:11px;
  background:rgba(59,215,255,.065);
  color:var(--cyan);
}

.health-strip small{
  display:block;
  color:var(--muted-2);
  font-size:7px;
  font-weight:950;
  letter-spacing:.15em;
}

.health-strip strong{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--text-soft);
  font-size:10px;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stats{
  gap:10px;
  margin-bottom:14px;
}

.stats article{
  min-height:126px;
  padding:18px 20px;
  border-radius:19px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(7,29,46,.70));
}

html[data-theme="light"] .stats article{
  background:rgba(255,255,255,.78);
}

.stats strong{
  margin:9px 0 4px;
  font-family:var(--bq-display);
  font-size:42px;
  text-shadow:0 8px 25px rgba(0,0,0,.14);
}

/* ---------------- Cards ---------------- */

.panel{
  border-color:rgba(156,211,233,.13);
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(7,29,46,.73) 30%,rgba(5,24,39,.82));
  box-shadow:
    0 24px 68px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}

html[data-theme="light"] .panel{
  background:
    linear-gradient(145deg,rgba(255,255,255,.90),rgba(247,251,253,.76));
}

.panel::before{
  background:linear-gradient(90deg,transparent,rgba(59,215,255,.20),rgba(94,146,173,.12),transparent);
}

.panel-head small{
  color:var(--cyan);
  letter-spacing:.17em;
}

.panel-head h2{
  margin-top:5px;
  font-family:var(--bq-display);
  font-size:22px;
  line-height:1;
  letter-spacing:-.045em;
}

/* ---------------- Main operating stage ---------------- */

.operations-stage{
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(300px,.85fr);
  gap:14px;
  margin-bottom:14px;
}

.operations-side{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:14px;
}

.vision-feature{
  min-height:540px;
  display:flex;
  flex-direction:column;
}

.camera-preview{
  position:relative;
  flex:1;
  min-height:380px;
  overflow:hidden;
  border-radius:19px;
  border:1px solid rgba(180,222,239,.12);
  background:
    radial-gradient(circle at 50% 48%,rgba(52,171,210,.12),transparent 32%),
    linear-gradient(145deg,#061522,#04101a);
}

.camera-preview::after{
  content:"LIVE / MEDIA";
  position:absolute;
  top:12px;
  left:12px;
  padding:6px 8px;
  border:1px solid rgba(209,239,250,.13);
  border-radius:999px;
  background:rgba(2,13,22,.55);
  color:rgba(230,247,252,.72);
  font:850 7px/1 var(--bq-body);
  letter-spacing:.14em;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.camera-preview img{
  width:100%;
  height:100%;
  min-height:380px;
  object-fit:cover;
}

.camera-placeholder{
  min-height:380px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:30px;
  text-align:center;
  color:var(--muted);
}

.camera-placeholder>span{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:1px solid rgba(59,215,255,.18);
  border-radius:50%;
  background:rgba(59,215,255,.06);
  color:var(--cyan);
  font-size:25px;
  box-shadow:0 0 46px rgba(39,188,230,.10);
}

.camera-placeholder strong{
  color:var(--text-soft);
  font-size:13px;
}

.camera-placeholder small{
  max-width:360px;
  line-height:1.6;
}

.vision-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:13px;
}

.vision-meta{
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
}

.selected-system-card{
  overflow:hidden;
}

.system-status-label{
  text-transform:capitalize;
}

.selected-system-graphic{
  display:grid;
  grid-template-columns:1fr 34px 1fr 34px 1fr;
  align-items:center;
  gap:4px;
  margin:8px 0 17px;
  padding:16px 12px;
  border:1px solid var(--line);
  border-radius:17px;
  background:
    radial-gradient(circle at 50% 30%,rgba(58,208,243,.08),transparent 65%),
    rgba(255,255,255,.025);
}

.selected-system-graphic i{
  height:1px;
  background:linear-gradient(90deg,rgba(59,215,255,.22),rgba(94,146,173,.55),rgba(59,215,255,.22));
  box-shadow:0 0 9px rgba(59,215,255,.14);
}

.orb{
  min-height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(161,216,237,.14);
  border-radius:15px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font:900 7px/1 var(--bq-body);
  letter-spacing:.12em;
}

.orb-edge{
  border-color:rgba(59,215,255,.28);
  color:var(--cyan);
  background:linear-gradient(145deg,rgba(59,215,255,.11),rgba(94,146,173,.05));
  box-shadow:0 10px 28px rgba(39,179,220,.08);
}

.selected-system-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.selected-system-meta>div{
  padding:11px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel-soft);
}

.selected-system-meta small{
  display:block;
  color:var(--muted-2);
  font-size:6.5px;
  font-weight:950;
  letter-spacing:.13em;
}

.selected-system-meta strong{
  display:block;
  margin-top:4px;
  color:var(--text-soft);
  font-size:9px;
  line-height:1.4;
}

.selected-system-card>p{
  margin:14px 2px 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}

.alerts-feature{
  min-height:250px;
}

.overview-ai-panel{
  margin-bottom:14px;
}

.overview-event-list{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.overview-event-list .row{
  min-width:0;
  display:flex;
  align-items:flex-start;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel-soft);
}

.overview-event-list .row-main{
  min-width:0;
}

.overview-event-list .pill{
  display:none;
}

.overview-event-list .copy strong,
.overview-event-list .copy span,
.overview-event-list .copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------------- Architecture ---------------- */

.topology-panel{
  margin-bottom:14px;
}

.bq-platform-path{
  grid-template-columns:
    minmax(150px,1fr) minmax(35px,.25fr)
    minmax(150px,1fr) minmax(35px,.25fr)
    minmax(150px,1fr) minmax(35px,.25fr)
    minmax(150px,1fr);
}

.path{
  padding:14px;
  border-radius:18px;
}

.node{
  min-height:102px;
  padding:17px;
  border-radius:16px;
}

.node small{
  color:var(--cyan);
  font-size:7px;
  font-weight:950;
  letter-spacing:.13em;
}

.node b{
  display:block;
  margin-top:7px;
  font-family:var(--bq-display);
  font-size:17px;
  letter-spacing:-.04em;
}

.node span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:8px;
}

.media-node{
  border-color:rgba(94,146,173,.22);
  background:
    linear-gradient(145deg,rgba(94,146,173,.08),rgba(255,255,255,.025));
}

/* ---------------- Lower overview ---------------- */

.overview-lower-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.overview-lower-grid .wide{
  grid-column:1/-1;
}

.activity-panel{
  min-height:250px;
}

.quick-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.quick-actions button{
  min-width:0;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),rgba(6,27,44,.72));
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
}

html[data-theme="light"] .quick-actions button{
  background:rgba(255,255,255,.76);
}

.quick-actions button>span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(59,215,255,.18);
  border-radius:13px;
  background:rgba(59,215,255,.06);
  color:var(--cyan);
  font-size:18px;
}

.quick-actions small{
  display:block;
  color:var(--muted-2);
  font-size:6.5px;
  font-weight:950;
  letter-spacing:.14em;
}

.quick-actions strong{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--text-soft);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.quick-actions button>b{
  color:var(--cyan);
  font-size:14px;
}

.quick-actions button:hover{
  border-color:var(--line-strong);
  transform:translateY(-1px);
}

/* ---------------- Lists / operational rows ---------------- */

.list{
  gap:8px;
}

.row{
  min-height:66px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.row:hover{
  border-color:rgba(59,215,255,.20);
  background:rgba(59,215,255,.035);
}

.copy strong{
  font-size:10px;
}

.copy span,
.copy small{
  font-size:8px;
}

.pill{
  border-radius:999px;
}

/* ---------------- Devices ---------------- */

.device-grid{
  gap:14px;
}

.pairing-panel{
  position:relative;
  overflow:hidden;
}

.pairing-panel::after{
  content:"";
  position:absolute;
  right:-100px;
  bottom:-120px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:rgba(59,215,255,.08);
  filter:blur(35px);
  pointer-events:none;
}

.device-form{
  position:relative;
  z-index:1;
}

.pairing-code-input{
  min-height:72px!important;
  border-radius:18px!important;
  font-family:var(--bq-display)!important;
  font-size:clamp(25px,3vw,40px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.pairing-help,
.control-note{
  border-radius:17px;
}

/* ---------------- Energy ---------------- */

.energy-grid{
  gap:10px;
}

.energy-card{
  min-height:174px;
  border-radius:22px;
  background:
    radial-gradient(circle at 85% 14%,rgba(59,215,255,.09),transparent 12rem),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(6,27,44,.78));
  box-shadow:var(--shadow-soft);
}

.energy-card strong{
  font-family:var(--bq-display);
  letter-spacing:-.03em;
}

.energy-flow-panel{
  margin-top:14px;
}

.energy-flow{
  border-radius:19px;
  background:
    radial-gradient(circle at 50% 40%,rgba(59,215,255,.075),transparent 32%),
    var(--panel-soft);
}

.flow-node{
  border-radius:17px;
}

/* ---------------- Vision / events ---------------- */

.vision-page-grid,
.events-grid{
  gap:14px;
}

.vision-page-preview .camera-preview{
  min-height:500px;
}

.vision-page-preview .camera-preview img{
  min-height:500px;
}

.events-grid{
  align-items:start;
}

/* ---------------- Authentication cinematic stage ---------------- */

.auth-gate{
  padding:0;
  place-items:stretch;
  background:#03101a;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.auth-gate-art{
  position:absolute;
  inset:0;
  background:
    url("https://www.ballastiq.com/connected-operations-edge-desktop.webp") center/cover no-repeat;
  opacity:.58;
}

.auth-gate::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,12,20,.96) 0%,rgba(3,15,25,.90) 40%,rgba(3,15,25,.46) 76%,rgba(3,15,25,.68)),
    linear-gradient(0deg,rgba(2,12,20,.78),transparent 58%);
}

.auth-gate-shell{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:min(1440px,100%);
  min-height:100dvh;
  margin:0 auto;
  padding:clamp(18px,5vw,76px);
}

.auth-gate-card{
  width:min(610px,100%);
  padding:clamp(28px,4.5vw,52px);
  border:1px solid rgba(191,229,243,.18);
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(5,22,36,.67) 30%,rgba(3,16,27,.76));
  box-shadow:
    0 34px 100px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(32px) saturate(145%);
  -webkit-backdrop-filter:blur(32px) saturate(145%);
}

.auth-brand{
  margin-bottom:54px;
}

.auth-brand .brand-word{
  color:#fff;
  font-size:25px;
}

.auth-gate-copy h1{
  max-width:520px;
  margin:10px 0 16px;
  color:#fff;
  font-size:clamp(46px,7vw,82px);
  line-height:.88;
  letter-spacing:-.07em;
  text-shadow:0 16px 45px rgba(0,0,0,.36);
}

.auth-gate-copy p{
  max-width:500px;
  margin:0;
  color:rgba(230,246,252,.76);
  font-size:13px;
  line-height:1.7;
}

.auth-proof{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:25px 0 0;
}

.auth-proof span{
  padding:7px 9px;
  border:1px solid rgba(190,229,243,.13);
  border-radius:999px;
  background:rgba(4,18,30,.34);
  color:rgba(235,248,253,.73);
  font-size:8px;
  font-weight:800;
}

.auth-gate-status{
  margin-top:28px;
  border-color:rgba(190,229,243,.13);
  background:rgba(4,18,30,.48);
  color:rgba(224,242,249,.65);
}

.auth-gate-button{
  min-height:54px;
  margin-top:10px;
  border-radius:16px;
  font-size:11px;
}

.auth-gate-website{
  justify-content:flex-start;
  margin-top:18px;
  color:rgba(226,244,250,.64);
}

/* ---------------- Responsive ---------------- */

@media(max-width:1180px){
  .shell{
    grid-template-columns:86px minmax(0,1fr);
  }

  .side{
    padding-left:9px;
  }

  .side-inner{
    padding:9px;
  }

  .side-kicker,
  .side-footer{
    display:none;
  }

  .nav{
    justify-content:center;
    padding:0;
  }

  .nav b{
    display:none;
  }

  .overview-event-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:980px){
  .overview-hero-content{
    align-items:flex-end;
  }

  .operations-stage{
    grid-template-columns:1fr;
  }

  .operations-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
  }

  .bq-platform-path{
    grid-template-columns:1fr;
  }

  .bq-platform-path .line{
    width:1px;
    height:28px;
    justify-self:center;
  }

  .bq-platform-path .line i{
    width:1px;
    height:100%;
    background:linear-gradient(var(--cyan),var(--teal));
  }

  .health-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:740px){
  .top{
    top:8px;
    width:calc(100% - 16px);
    margin:8px 8px 0;
    min-height:58px;
    padding:7px 9px;
  }

  .brand-divider,
  .brand-descriptor,
  .website-link,
  .cloud{
    display:none;
  }

  .brand-word{
    font-size:16px;
  }

  .brand-product{
    min-height:19px;
    padding:0 6px;
    font-size:6px;
  }

  .account-chip{
    max-width:105px;
  }

  .shell{
    display:block;
    min-height:calc(100vh - 74px);
    padding-bottom:92px;
  }

  .main{
    padding:18px 10px 34px;
  }

  .side{
    left:8px;
    right:8px;
    bottom:8px;
    top:auto;
    width:auto;
    height:auto;
    padding:0;
  }

  .side-inner{
    display:block;
    min-height:auto;
    padding:6px;
    border-radius:24px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.10),rgba(4,19,31,.78));
    box-shadow:
      0 18px 50px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.17);
  }

  html[data-theme="light"] .side-inner{
    background:rgba(248,252,253,.88);
  }

  .side nav{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:2px;
  }

  .nav{
    min-height:53px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    border-radius:17px;
  }

  .nav span{
    width:24px;
    height:24px;
    border:0;
    background:transparent;
    font-size:14px;
  }

  .nav b{
    display:block;
    max-width:100%;
    overflow:hidden;
    color:inherit;
    font-size:6px;
    text-overflow:ellipsis;
  }

  .overview-hero{
    min-height:500px;
    border-radius:25px;
  }

  .overview-hero-media{
    background-image:url("https://www.ballastiq.com/connected-operations-cta-mobile.webp");
  }

  .overview-hero-shade{
    background:
      linear-gradient(0deg,rgba(2,13,22,.97) 0%,rgba(3,16,27,.82) 62%,rgba(3,16,27,.42) 100%);
  }

  .overview-hero-content{
    min-height:500px;
    padding:24px 21px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-end;
    gap:20px;
  }

  .overview-hero h1{
    font-size:clamp(48px,15vw,72px);
  }

  .overview-hero-actions{
    width:100%;
  }

  .health-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .health-strip article:last-child{
    grid-column:1/-1;
  }

  .stats,
  .overview-lower-grid,
  .operations-side,
  .device-grid,
  .grid,
  .vision-page-grid,
  .events-grid{
    grid-template-columns:1fr;
  }

  .overview-event-list{
    grid-template-columns:1fr;
  }

  .overview-lower-grid .wide,
  .wide{
    grid-column:auto;
  }

  .vision-feature{
    min-height:auto;
  }

  .camera-preview,
  .camera-placeholder{
    min-height:300px;
  }

  .camera-preview img{
    min-height:300px;
  }

  .quick-actions{
    grid-template-columns:1fr 1fr;
  }

  .section-hero{
    min-height:190px;
    padding:26px 22px;
    border-radius:24px;
  }

  .page-head h1{
    font-size:clamp(40px,13vw,62px);
  }

  .auth-gate-art{
    background-image:url("https://www.ballastiq.com/connected-operations-edge-mobile.webp");
  }

  .auth-gate-shell{
    align-items:flex-end;
    padding:12px;
  }

  .auth-gate-card{
    padding:28px 22px;
    border-radius:25px;
  }

  .auth-brand{
    margin-bottom:34px;
  }

  .auth-gate-copy h1{
    font-size:clamp(46px,14vw,66px);
  }
}

@media(max-width:460px){
  .theme-toggle b{
    display:none;
  }

  .theme-toggle{
    width:36px;
    justify-content:center;
    padding:0;
  }

  .account-chip{
    max-width:88px;
    font-size:7px;
  }

  .health-strip{
    grid-template-columns:1fr 1fr;
  }

  .quick-actions{
    grid-template-columns:1fr;
  }

  .selected-system-meta{
    grid-template-columns:1fr;
  }

  .overview-hero-copy>p{
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .quick-actions button{
    transition:none!important;
  }
}

/* End v0.5.0 */


/* =========================================================
   ballastIQ ONE v0.5.1 visual repair
   Approved blue logo/icon + technology imagery + no neon green
   ========================================================= */

:root{
  --bq-blue-strong:#2f7fae;
  --bq-blue:#4d9bc7;
  --bq-cyan:#6cb8de;
  --bq-teal:#5e92ad;
  --green:#65a9ce;
  --cyan:#6cb8de;
  --teal:#5e92ad;
  --line-strong:rgba(108,184,222,.30);
}

html[data-theme="light"]{
  --cyan:#2f7fae;
  --teal:#527f98;
  --green:#3f84aa;
  --line-strong:rgba(47,127,174,.26);
}

/* Actual ballastIQ brand artwork */
.brand-lockup-logo,
.auth-brand-logo{
  gap:10px;
}

.ballastiq-logo{
  display:block;
  width:auto;
  max-width:176px;
  height:34px;
  object-fit:contain;
  object-position:left center;
}

.auth-logo{
  max-width:245px;
  height:48px;
}

.brand-product{
  border-color:rgba(108,184,222,.25)!important;
  background:rgba(108,184,222,.075)!important;
  color:var(--text-soft)!important;
}

/* Avoid residual green status glow. */
.side-footer-dot{
  background:var(--cyan)!important;
  box-shadow:0 0 14px rgba(108,184,222,.35)!important;
}

.primary{
  color:#f8fcff!important;
  background:#347fa8!important;
  box-shadow:
    0 12px 30px rgba(36,103,143,.18),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.primary:hover{
  background:#2d7399!important;
}

.nav.active{
  border-color:rgba(108,184,222,.24)!important;
  background:rgba(66,129,165,.16)!important;
}

.nav.active span{
  border-color:rgba(108,184,222,.25)!important;
  background:rgba(77,155,199,.11)!important;
  color:#dceef7!important;
}

html[data-theme="light"] .nav.active span{
  color:#153f57!important;
}

.selected-system-graphic i,
.bq-platform-path .line i{
  background:var(--cyan)!important;
  box-shadow:0 0 8px rgba(108,184,222,.14)!important;
}

.orb-edge{
  border-color:rgba(108,184,222,.25)!important;
  color:var(--cyan)!important;
  background:rgba(77,155,199,.09)!important;
  box-shadow:0 10px 28px rgba(47,127,174,.07)!important;
}

.media-node{
  border-color:rgba(94,146,173,.22)!important;
  background:rgba(94,146,173,.055)!important;
}

.quick-actions button>span,
.camera-placeholder>span{
  border-color:rgba(108,184,222,.19)!important;
  background:rgba(77,155,199,.065)!important;
  color:var(--cyan)!important;
}

/* Tech-image treatment: preserve the photograph instead of burying it
   under sci-fi color effects. */
.auth-gate-art{
  background-image:url("https://www.ballastiq.com/connected-operations-edge-desktop.webp")!important;
  background-position:center!important;
  opacity:.74!important;
}

.auth-gate::after{
  background:rgba(2,13,22,.64)!important;
}

.auth-gate-card{
  background:rgba(4,22,35,.72)!important;
}

.overview-hero-media{
  background-image:url("https://www.ballastiq.com/connected-operations-cta-desktop.webp")!important;
  opacity:.70!important;
}

.overview-hero-shade{
  background:rgba(2,14,23,.58)!important;
}

@media(max-width:740px){
  .auth-gate-art{
    background-image:url("https://www.ballastiq.com/connected-operations-edge-mobile.webp")!important;
  }

  .overview-hero-media{
    background-image:url("https://www.ballastiq.com/connected-operations-cta-mobile.webp")!important;
  }

  .ballastiq-logo{
    max-width:132px;
    height:28px;
  }

  .auth-logo{
    max-width:205px;
    height:42px;
  }
}


/* =========================================================
   ballastIQ ONE v0.5.2 reliable brand lockup
   Uses confirmed live icon + native wordmark
   ========================================================= */

.ballastiq-mark{
  display:block;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.ballastiq-wordmark{
  display:inline-flex;
  align-items:baseline;
  color:var(--text);
  font-family:var(--bq-display);
  font-size:20px;
  line-height:1;
  letter-spacing:-.055em;
  text-shadow:0 7px 22px rgba(0,0,0,.16);
  white-space:nowrap;
}

.ballastiq-wordmark>span{
  color:var(--cyan);
}

.auth-mark{
  width:50px;
  height:50px;
  border-radius:14px;
}

.auth-wordmark{
  color:#fff;
  font-size:27px;
}

.auth-wordmark>span{
  color:#8dc7e3;
}

@media(max-width:740px){
  .ballastiq-mark{
    width:28px;
    height:28px;
    border-radius:8px;
  }

  .ballastiq-wordmark{
    font-size:16px;
  }

  .auth-mark{
    width:43px;
    height:43px;
    border-radius:12px;
  }

  .auth-wordmark{
    font-size:23px;
  }
}

/* =========================================================
   ballastIQ ONE v0.6.0 — mobile-first reliability pass
   Clean phone layout, no remote brand-image dependency,
   safe-area aware dock, and no authenticated-content flash.
   ========================================================= */

/* The lockup is native UI text so a missing website image can never break the app chrome. */
.ballastiq-mark{
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  border:1px solid rgba(108,184,222,.28)!important;
  border-radius:11px!important;
  background:rgba(77,155,199,.10)!important;
  color:var(--cyan)!important;
  font-family:var(--bq-display)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:-.08em!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(0,0,0,.12)!important;
}
.auth-mark{
  width:48px!important;
  height:48px!important;
  flex-basis:48px!important;
  border-radius:15px!important;
  font-size:17px!important;
}

/* During auth resolution the secure gate owns the viewport completely. */
body.auth-pending > .top,
body.auth-pending > .shell,
body.auth-required > .top,
body.auth-required > .shell{
  display:none!important;
}
body.authenticated > .top,
body.authenticated > .shell{
  display:flex;
}
body.authenticated > .shell{
  display:grid;
}
.auth-gate{
  min-height:100dvh;
}

@media(max-width:740px){
  html,body{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:hidden!important;
  }

  body.authenticated > .shell{
    display:block!important;
  }

  .top{
    position:sticky!important;
    top:calc(6px + env(safe-area-inset-top))!important;
    width:calc(100% - 16px)!important;
    min-width:0!important;
    min-height:56px!important;
    margin:8px 8px 0!important;
    padding:7px 9px!important;
    gap:8px!important;
    border-radius:18px!important;
  }

  .brand{
    flex:1 1 auto!important;
    min-width:0!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  .brand-lockup{
    min-width:0!important;
    gap:6px!important;
  }
  .ballastiq-mark{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    border-radius:9px!important;
    font-size:11px!important;
  }
  .ballastiq-wordmark{
    font-size:16px!important;
    letter-spacing:-.045em!important;
  }
  .brand-product{
    min-height:18px!important;
    padding:0 6px!important;
    font-size:6px!important;
  }
  .brand-divider,
  .brand-descriptor,
  .website-link,
  .install-btn,
  .account-chip{
    display:none!important;
  }

  .top-actions{
    flex:0 0 auto!important;
    gap:5px!important;
  }
  .cloud{
    display:inline-flex!important;
    min-height:34px!important;
    max-width:86px!important;
    padding:0 8px!important;
    overflow:hidden!important;
    font-size:8px!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .cloud i{
    flex:0 0 6px!important;
    width:6px!important;
    height:6px!important;
  }
  .theme-toggle{
    width:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    padding:0!important;
    justify-content:center!important;
  }
  .theme-toggle b{display:none!important}
  .ghost{
    min-height:34px!important;
    padding:0 9px!important;
    font-size:8px!important;
  }
  #signOutBtn{
    max-width:66px!important;
  }

  .shell{
    width:100%!important;
    min-width:0!important;
    min-height:calc(100dvh - 72px)!important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
  }
  .main{
    width:100%!important;
    min-width:0!important;
    padding:14px 10px 30px!important;
    overflow:hidden!important;
  }
  .view,
  .panel,
  .overview-hero,
  .page-head,
  .device-grid,
  .operations-stage,
  .operations-side,
  .stats,
  .health-strip,
  .overview-lower-grid,
  .vision-page-grid,
  .events-grid{
    min-width:0!important;
    max-width:100%!important;
  }

  .side{
    position:fixed!important;
    z-index:70!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .side-inner{
    min-height:0!important;
    padding:5px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .side-kicker,
  .side-footer{
    display:none!important;
  }
  .side nav{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:2px!important;
    width:100%!important;
    padding:0!important;
  }
  .nav{
    min-width:0!important;
    min-height:52px!important;
    padding:4px 1px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    border-radius:16px!important;
  }
  .nav span{
    width:24px!important;
    height:24px!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    background:transparent!important;
    font-size:14px!important;
  }
  .nav b{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    font-size:6.5px!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  .overview-hero{
    min-height:380px!important;
    border-radius:24px!important;
  }
  .overview-hero-content{
    min-height:380px!important;
    padding:24px 20px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    align-items:stretch!important;
    gap:18px!important;
  }
  .overview-hero-copy,
  .overview-hero-actions{
    width:100%!important;
    min-width:0!important;
  }
  .overview-hero h1{
    max-width:100%!important;
    margin:8px 0 10px!important;
    font-size:clamp(42px,12.5vw,58px)!important;
    line-height:.93!important;
    overflow-wrap:anywhere!important;
  }
  .overview-hero-copy>p{
    max-width:34rem!important;
    font-size:13px!important;
    line-height:1.5!important;
  }
  .hero-proof{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }
  .hero-proof span{
    min-height:26px!important;
    padding:0 9px!important;
    font-size:7px!important;
  }
  .hero-state{
    width:100%!important;
    min-width:0!important;
  }
  .overview-hero-actions .primary{
    width:100%!important;
  }

  .notice{
    margin:12px 0!important;
    font-size:11px!important;
    line-height:1.45!important;
  }
  .health-strip{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .health-strip article{
    min-width:0!important;
    padding:11px!important;
  }
  .health-strip article:last-child{
    grid-column:1/-1!important;
  }
  .stats,
  .overview-lower-grid,
  .operations-stage,
  .operations-side,
  .device-grid,
  .grid,
  .vision-page-grid,
  .events-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .panel{
    border-radius:20px!important;
    padding:16px!important;
  }
  .panel-head{
    gap:10px!important;
    align-items:flex-start!important;
  }
  .panel-head>span{
    max-width:42%!important;
    text-align:right!important;
    overflow-wrap:anywhere!important;
  }
  .panel h2,
  .panel-head h2{
    font-size:24px!important;
    line-height:1!important;
  }
  .camera-preview,
  .camera-placeholder,
  .camera-preview img{
    min-height:230px!important;
  }

  .page-head{
    margin:4px 2px 16px!important;
  }
  .page-head.section-hero{
    min-height:0!important;
    padding:22px 18px!important;
    border-radius:20px!important;
  }
  .page-head h1{
    max-width:100%!important;
    margin:7px 0 8px!important;
    font-size:clamp(38px,11vw,48px)!important;
    line-height:.95!important;
    overflow-wrap:anywhere!important;
  }
  .page-head p{
    max-width:100%!important;
    font-size:13px!important;
    line-height:1.5!important;
  }

  .pairing-panel{
    padding:18px!important;
  }
  .device-form label,
  .pairing-code-input,
  .form-actions,
  .form-actions .primary{
    width:100%!important;
    max-width:100%!important;
  }
  .pairing-code-input{
    min-width:0!important;
    height:56px!important;
    padding:0 15px!important;
    font-size:22px!important;
    letter-spacing:.10em!important;
  }
  .pairing-help{
    margin-top:16px!important;
    padding:14px!important;
  }
  .control-note{
    margin-bottom:10px!important;
  }

  .row{
    min-width:0!important;
    gap:10px!important;
  }
  .row-main,
  .row-main .copy{
    min-width:0!important;
  }
  .row-main .copy strong,
  .row-main .copy span,
  .row-main .copy small{
    overflow-wrap:anywhere!important;
  }

  .quick-actions{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .auth-gate{
    position:fixed!important;
    inset:0!important;
    min-height:100dvh!important;
    padding:0!important;
    overflow:auto!important;
  }
  .auth-gate-shell{
    min-height:100dvh!important;
    width:100%!important;
    padding:calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))!important;
    display:flex!important;
    align-items:center!important;
  }
  .auth-gate-card{
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    padding:24px 20px!important;
    border-radius:24px!important;
  }
  .auth-brand{
    margin-bottom:26px!important;
    gap:8px!important;
  }
  .auth-mark{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
    border-radius:12px!important;
    font-size:14px!important;
  }
  .auth-wordmark{
    font-size:22px!important;
  }
  .auth-gate-copy h1{
    max-width:100%!important;
    margin:10px 0 12px!important;
    font-size:clamp(40px,12vw,52px)!important;
    line-height:.94!important;
    overflow-wrap:anywhere!important;
  }
  .auth-gate-copy p{
    font-size:14px!important;
    line-height:1.55!important;
  }
  .auth-proof{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .auth-proof span{
    min-width:0!important;
    text-align:center!important;
  }
  .auth-gate-button{
    width:100%!important;
  }
}

@media(max-width:390px){
  .cloud{display:none!important}
  .top{padding-left:8px!important;padding-right:8px!important}
  .ballastiq-wordmark{font-size:15px!important}
  .brand-product{font-size:5.5px!important}
  .nav b{font-size:6px!important}
  .overview-hero h1{font-size:42px!important}
  .page-head h1{font-size:38px!important}
}