.brxe-code {
  width: 100%;
  display: flex;
  justify-content: center;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.mc-wrapper {
  border-radius: 14px;
  padding: 12px;
  width: 100%;
  max-width: 1000px;
}

.mc-cards {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 200px;
}

.mc-card {
  flex: 1;
  border-radius: 12px;
  padding: 14px 12px 12px;
  position: relative;
  overflow: hidden;
  min-height: 130px;
  background: linear-gradient(155deg, #d8dde4 0%, #d8dde4 100%);
  transition:
    transform 0.3s ease,
    background 0.4s ease;
}

.mc-card.active {
  background: linear-gradient(155deg, #6ddc48 0%, #43b02a 45%, #2d8a1a 100%);
  transform: translateY(-4px);
}

.mc-card-level {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a9aaa;
  margin-bottom: 5px;
}

.mc-card.active .mc-card-level {
  color: rgba(255, 255, 255, 0.8);
}

.mc-card-name {
  font-size: 21px;
  font-weight: 700;
  color: #092033;
  line-height: 1.35;
}

.mc-card.active .mc-card-name {
  color: #fff;
}

.mc-card-bg-num {
  position: absolute;
  bottom: 35px;
  right: 10px;
  font-size: 94px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.07);
}

.mc-card.active .mc-card-bg-num {
  color: rgba(255, 255, 255, 0.13);
}

.mc-card-dot {
  position: absolute;
  bottom: 12px;
  left: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}

.mc-card.active .mc-card-dot {
  background: #fff;
}

/* MOBILE */
@media (max-width: 640px) {
  .mc-card {
    display: none;
    width: 100%;
  }

  .mc-card.active {
    display: block;
  }
}