.stage{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(37,145,186,.08),transparent 38%),
    var(--canvas);
}

.topnav{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:10px 28px;
  background:rgba(3,9,20,.92);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:50;
  flex-shrink:0;
}

.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-logo{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(81,215,255,.16),rgba(7,19,33,.9));
  color:#dff8ff;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.04em;
}
.brand-text{font-size:15px;line-height:1.15;letter-spacing:-.01em}
.brand-text b{display:block;font-weight:700;color:var(--text)}
.brand-text small{
  display:block;
  margin-top:4px;
  color:#66889c;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:.13em;
}

.nav-meta{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.nav-meta-item{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid var(--line-soft);
  border-radius:99px;
  color:var(--text-2);
  background:rgba(8,24,38,.58);
  font-size:11px;
  white-space:nowrap;
}
.nav-meta-item b{
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.nav-meta-item .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ok);
  flex-shrink:0;
  box-shadow:0 0 10px rgba(79,224,162,.52);
}
.nav-meta-item.warn .dot{background:var(--danger);box-shadow:0 0 10px rgba(255,104,120,.48)}
.nav-meta-item.idle .dot{background:var(--off)}

.nav-actions{display:flex;align-items:center;gap:8px;min-width:max-content}

.main{
  flex:1;
  min-height:0;
  overflow:auto;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(18,105,141,.11),transparent 48%),
    linear-gradient(180deg,rgba(10,34,52,.32),transparent 210px),
    var(--canvas);
}
.hero-center{
  width:min(1500px,100%);
  height:100%;
  min-height:100%;
  margin:0 auto;
  padding:18px 28px 24px;
}

.statusbar{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:7px 28px calc(7px + env(safe-area-inset-bottom));
  background:rgba(3,9,20,.94);
  border-top:1px solid var(--line);
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9.5px;
  flex-shrink:0;
}
.statusbar>div{display:flex;align-items:center;gap:16px;min-width:max-content}
.statusbar-right{margin-left:auto}
.stat-item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.stat-item span{color:#506b7d;font-size:8.5px}
.stat-item b{color:var(--text-2);font-weight:650;font-variant-numeric:tabular-nums}
.stat-item .up{color:var(--ok);text-shadow:0 0 12px rgba(79,224,162,.34)}
.stat-dot{width:6px;height:6px;border-radius:50%;background:var(--off)}
.stat-dot.green{background:var(--ok);box-shadow:0 0 10px rgba(79,224,162,.5)}
.system-signature{color:#5c788a;font-size:8.5px;letter-spacing:.08em}
.system-signature b{color:#7893a4;font-weight:650}

@media (max-width:1080px){
  .topnav{gap:16px;padding-inline:20px}
  .nav-freshness{display:none}
  .hero-center{padding:16px 20px 22px}
  .statusbar{padding-inline:20px;overflow-x:auto}
}

@media (max-width:760px){
  .topnav{min-height:auto;display:grid;grid-template-columns:1fr auto;padding:10px 14px}
  .nav-meta{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto}
  .nav-clock{display:none}
  .nav-actions{gap:6px}
  .hero-center{padding:12px 0 18px}
  .statusbar{padding:8px 14px}
  .statusbar>div:first-child{display:none}
  .statusbar-right{margin-left:0}
}

@media (max-width:480px){
  .brand-text small{display:none}
  .brand-logo{width:32px;height:32px}
  .nav-btn{padding-inline:9px}
  #last-update{display:none}
}