/* ---------- THE SKY / STAGE ---------- */
  .panel-cloud-sky{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-bottom) 100%);
    isolation: isolate;
  }

  /* soft sun glow, purely decorative */
  .panel-sun-glow{
    position: absolute;
    top: 8%;
    left: 72%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,250,220,0.9) 0%, rgba(255,250,220,0) 70%);
    filter: blur(2px);
    pointer-events: none;
  }

  /* ---------- CLOUD LAYERS (parallax via different speed/size/opacity) ---------- */
  .panel-cloud-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 220%;
    height: 100%;
    display: flex;
    align-items: center;
    will-change: transform;
  }

  .panel-cloud-layer.back{
    animation: panel-cloud-drift 90s linear infinite;
    opacity: 0.55;
    filter: blur(1px) brightness(1.05);
  }
  .panel-cloud-layer.mid{
    animation: panel-cloud-drift 55s linear infinite;
    opacity: 0.8;
  }
  .panel-cloud-layer.front{
    animation: panel-cloud-drift 32s linear infinite;
    opacity: 1;
  }

  @keyframes panel-cloud-drift{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ---------- A SINGLE CLOUD ---------- */
  .panel-cloud{
    position: relative;
    flex-shrink: 0;
    background: var(--cloud-color);
    border-radius: 100px;
    box-shadow: 0 20px 40px -10px var(--cloud-shadow);
  }

  /* puffs are pseudo-blobs layered on the base rectangle to build a cloud silhouette */
  .panel-cloud::before,
  .panel-cloud::after{
    content: "";
    position: absolute;
    background: var(--cloud-color);
    border-radius: 50%;
  }

  /* --- cloud size variants --- */
  .panel-cloud.sm{ width: 90px;  height: 34px;  margin: 0 60px; }
  .panel-cloud.sm::before{ width: 50px; height: 50px; top: -22px; left: 10px; }
  .panel-cloud.sm::after { width: 40px; height: 40px; top: -16px; left: 45px; }

  .panel-cloud.md{ width: 140px; height: 46px; margin: 0 90px; }
  .panel-cloud.md::before{ width: 70px; height: 70px; top: -32px; left: 15px; }
  .panel-cloud.md::after { width: 56px; height: 56px; top: -22px; left: 65px; }

  .panel-cloud.lg{ width: 210px; height: 60px; margin: 0 130px; }
  .panel-cloud.lg::before{ width: 100px; height: 100px; top: -46px; left: 20px; }
  .panel-cloud.lg::after { width: 80px;  height: 80px;  top: -30px; left: 100px; }

  /* extra puff via nested span for larger clouds, keeps silhouette soft */
  .panel-cloud i{
    position: absolute;
    display: block;
    background: var(--cloud-color);
    border-radius: 50%;
    font-style: normal;
  }
  .panel-cloud.lg i{ width: 60px; height: 60px; top: -20px; left: 60px; }
  .panel-cloud.md i{ width: 44px; height: 44px; top: -14px; left: 40px; }

  /* ---------- gentle vertical panel-cloud-bob so it doesn't feel static ---------- */
  .panel-cloud-layer.back  .panel-cloud{ animation: panel-cloud-bob 7s ease-in-out infinite; }
  .panel-cloud-layer.mid   .panel-cloud{ animation: panel-cloud-bob 6s ease-in-out infinite; }
  .panel-cloud-layer.front .panel-cloud{ animation: panel-cloud-bob 5s ease-in-out infinite; }
  .panel-cloud-layer .panel-cloud:nth-child(2n){ animation-delay: -2s; }
  .panel-cloud-layer .panel-cloud:nth-child(3n){ animation-delay: -4s; }

  @keyframes panel-cloud-bob{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  /* ---------- respect reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    .panel-cloud-layer,
    .panel-cloud-layer .panel-cloud{
      animation: none !important;
    }
  }


body{position:relative;isolation:isolate;background:#f3f8ff}
.panel-cloud-sky{position:absolute;inset:0;width:100%;height:100%;min-height:100%;z-index:-1;pointer-events:none;--sky-top:#e4f1fc;--sky-bottom:#f8fbff;--cloud-color:#fff;--cloud-shadow:rgba(120,165,205,.12)}
.panel-cloud-layer.back{align-items:flex-start;padding-top:24%;opacity:.6}
.panel-cloud-layer.mid{align-items:center;opacity:.7}
.panel-cloud-layer.front{align-items:flex-end;padding-bottom:10%;opacity:.8}
.panel-sun-glow{background:radial-gradient(circle,rgba(255,255,255,.8),transparent 70%)}
.panel,.network-scene{background:transparent}
.panel-head,.metering-body,.governance-body{position:relative;z-index:1}
.panel-cloud-sky .panel-cloud{box-shadow:0 12px 24px -12px var(--cloud-shadow)}
/* High contrast labels remain readable over every cloud position. */
:root{--text-main:#102a43;--text-dim:#344b63;--cyan:#075caf;--amber:#17664f;}
.node-label,.node.core .node-label,.gov-title,.stat-label{color:#102a43;font-weight:700;}
.node-sub,.gov-sub,.panel-title,.balance-label,.gauge-sub,.status-strip,.badge{color:#344b63;}
.node-sub{font-size:11px;line-height:1.4;}
.gov-sub,.gauge-sub,.balance-label,.stat-pct,.status-strip{font-size:12px;line-height:1.4;}
.stat-pct,.gauge-center,.status-strip span{color:#075caf;}
.node-label,.node-sub,.gov-title,.gov-sub,.gauge-sub,.balance-label{
 text-shadow:0 1px 2px rgba(255,255,255,.95);
}