:root {
  --background: #050505;
  --panel: #0d1014;
  --panel-soft: #11151a;

  --border:
    rgba(255, 255, 255, 0.09);

  --text: #ffffff;
  --muted: #969ba5;

  --red: #e5101c;
  --red-bright: #ff2632;

  --green: #35d879;

  --max-width: 1500px;
}


* {
  box-sizing: border-box;
}


html {
  background: var(--background);
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    radial-gradient(
      circle at 75% 10%,
      rgba(180, 0, 15, 0.13),
      transparent 30%
    ),
    #050505;

  color: var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button,
input {
  font: inherit;
}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


a {
  color: inherit;
  text-decoration: none;
}


.network-nav {
  min-height: 78px;

  padding:
    0 max(
      24px,
      calc(
        (100vw - var(--max-width)) / 2
      )
    );

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(5, 5, 5, 0.92);

  backdrop-filter:
    blur(18px);

  position: sticky;
  top: 0;

  z-index: 100;
}


.network-brand {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.7px;
}


.network-brand::before {
  content: "◎";

  margin-right: 9px;

  color: var(--red-bright);
}


.network-nav-links {
  display: flex;
  align-items: center;

  gap: 28px;
}


.network-nav-links a {
  color: #c5c7cb;

  font-size: 14px;
  font-weight: 650;
}


.network-nav-links a:hover {
  color: white;
}


#app {
  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  margin: 0 auto;
}


.network-footer {
  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  margin:
    70px auto 0;

  padding:
    28px 0 40px;

  display: flex;
  justify-content: space-between;
  gap: 20px;

  border-top:
    1px solid var(--border);

  color: var(--muted);

  font-size: 13px;
}


.network-footer strong {
  color: white;
}


.loading-state,
.error-state {
  min-height: 500px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--muted);
}


@media (
  max-width: 700px
) {

  .network-nav {
    min-height: 66px;

    padding:
      0 18px;
  }


  .network-brand {
    font-size: 15px;
  }


  .network-nav-links {
    gap: 16px;
  }


  .network-nav-links a:nth-child(1) {
    display: none;
  }


  #app {
    width:
      calc(100% - 28px);
  }


  .network-footer {
    width:
      calc(100% - 28px);

    flex-direction: column;
  }

}