.lao-eco-page {
  margin-bottom: 2rem;
}

.lao-eco-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(124, 131, 255, .28);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(124, 131, 255, .16), rgba(32, 34, 56, .62));
}

.lao-eco-hero h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}

.lao-eco-hero p {
  margin: .35rem 0 0;
  color: var(--bs-secondary-color, #a8abd2);
}

.lao-eco-eyebrow {
  margin-bottom: .35rem;
  color: #8f96ff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.lao-eco-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.lao-eco-stat,
.lao-eco-card,
.lao-economy-side-card {
  border: 1px solid rgba(124, 131, 255, .22);
  border-radius: .9rem;
}

.lao-eco-stat {
  padding: 1rem;
  background: rgba(124, 131, 255, .08);
}

.lao-eco-stat span {
  display: block;
  color: var(--bs-secondary-color, #a8abd2);
  font-size: .85rem;
}

.lao-eco-stat b {
  display: block;
  margin-top: .25rem;
  font-size: 1.35rem;
}

.lao-eco-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.lao-eco-package {
  position: relative;
  cursor: pointer;
}

.lao-eco-package input {
  position: absolute;
  opacity: 0;
}

.lao-eco-package span {
  display: block;
  min-height: 5.25rem;
  padding: 1rem;
  border: 1px solid rgba(124, 131, 255, .24);
  border-radius: .85rem;
  background: rgba(124, 131, 255, .07);
}

.lao-eco-package input:checked + span {
  border-color: #7c83ff;
  box-shadow: 0 0 0 .2rem rgba(124, 131, 255, .14);
}

.lao-eco-package b,
.lao-eco-package small {
  display: block;
}

.lao-eco-package small {
  margin-top: .35rem;
  color: var(--bs-secondary-color, #a8abd2);
}

.lao-eco-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.lao-eco-tabs a {
  padding: .5rem .85rem;
  border-radius: 999px;
  background: rgba(124, 131, 255, .1);
  color: inherit;
}

.lao-eco-tabs a.active {
  background: #696cff;
  color: #fff;
}

.lao-eco-rank-item {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.lao-eco-rank-no {
  width: 2rem;
  color: #8f96ff;
  font-weight: 700;
  text-align: center;
}

.lao-eco-rank-item img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.lao-eco-rank-name {
  flex: 1 1 auto;
  min-width: 0;
}

.lao-eco-rank-name b,
.lao-eco-rank-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lao-eco-rank-name small {
  color: var(--bs-secondary-color, #a8abd2);
}

.lao-eco-rank-score {
  color: #8f96ff;
  font-weight: 700;
  white-space: nowrap;
}

.lao-title-badge {
  display: inline-flex;
  align-items: center;
  max-width: 9rem;
  margin-left: .35rem;
  padding: .18rem .48rem;
  border: 1px solid rgba(124, 131, 255, .34);
  border-radius: 999px;
  background: rgba(124, 131, 255, .14);
  color: var(--lao-title-color, #7c83ff);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.lao-svip-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  margin-left: .35rem;
  padding: .2rem .52rem .18rem;
  border: 1px solid rgba(255, 221, 103, .82);
  border-radius: .42rem;
  background:
    linear-gradient(135deg, #ff2f68 0%, #ff7a1a 36%, #ffd75f 62%, #ff3b6b 100%);
  color: #fff8dc;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(123, 26, 0, .45), 0 0 7px rgba(255, 255, 255, .52);
  box-shadow: 0 0 .55rem rgba(255, 71, 105, .42), inset 0 1px 0 rgba(255, 255, 255, .45);
  overflow: hidden;
  vertical-align: middle;
  animation: lao-svip-pulse 1.8s ease-in-out infinite;
}

.lao-svip-badge::before {
  content: "";
  position: absolute;
  inset: -30% auto -30% -65%;
  width: 46%;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82), transparent);
  animation: lao-svip-shine 2.2s linear infinite;
}

.lao-svip-badge::after {
  content: "";
  position: absolute;
  top: .14rem;
  right: .18rem;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: #fff7b0;
  box-shadow: -.68rem .12rem 0 -.06rem rgba(255, 255, 255, .72), -.35rem .48rem 0 -.08rem rgba(255, 255, 255, .58);
  animation: lao-svip-spark 1.15s ease-in-out infinite alternate;
}

.lao-svip-apply-card {
  background: linear-gradient(135deg, rgba(255, 55, 104, .08), rgba(255, 215, 95, .08));
}

@keyframes lao-svip-shine {
  0% { left: -70%; }
  55%, 100% { left: 125%; }
}

@keyframes lao-svip-pulse {
  0%, 100% { filter: saturate(1); transform: translateY(0); }
  50% { filter: saturate(1.22) brightness(1.05); transform: translateY(-1px); }
}

@keyframes lao-svip-spark {
  from { opacity: .35; transform: scale(.78); }
  to { opacity: 1; transform: scale(1.08); }
}

.lao-eco-title-preview {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border-radius: .9rem;
  background: rgba(124, 131, 255, .08);
}

.lao-economy-side-card {
  padding: .75rem;
  background: rgba(124, 131, 255, .08);
}

.lao-economy-side-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  text-align: center;
}

.lao-economy-side-grid a {
  display: block;
  padding: .5rem .25rem;
  border-radius: .65rem;
  color: inherit;
  text-decoration: none;
}

.lao-economy-side-grid a:hover {
  background: rgba(124, 131, 255, .12);
}

.lao-economy-side-grid b,
.lao-economy-side-grid span {
  display: block;
}

.lao-economy-side-grid span {
  margin-top: .15rem;
  color: var(--bs-secondary-color, #a8abd2);
  font-size: .75rem;
}

@media (max-width: 767.98px) {
  .lao-eco-hero {
    display: block;
  }

  .lao-eco-hero .btn,
  .lao-eco-sign-form {
    width: 100%;
    margin-top: 1rem;
  }

  .lao-eco-stats,
  .lao-eco-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stately pink-purple theme tuning */
.lao-eco-hero {
  border-color: rgba(232, 138, 162, .30);
  background: linear-gradient(135deg, rgba(232, 138, 162, .18), rgba(124, 131, 255, .08), rgba(255, 247, 250, .52));
}

.lao-eco-eyebrow,
.lao-eco-rank-no,
.lao-eco-rank-score {
  color: #e88aa2;
}

.lao-eco-stat,
.lao-eco-card,
.lao-economy-side-card {
  border-color: rgba(232, 138, 162, .22);
}

.lao-eco-stat,
.lao-economy-side-card,
.lao-eco-package span {
  background: rgba(232, 138, 162, .08);
}

.lao-eco-package span {
  border-color: rgba(232, 138, 162, .22);
}

.lao-eco-package input:checked + span {
  border-color: #e88aa2;
  box-shadow: 0 0 0 .2rem rgba(232, 138, 162, .14);
}

.lao-eco-tabs a {
  border: 1px solid rgba(232, 138, 162, .18);
  background: rgba(232, 138, 162, .09);
}

.lao-eco-tabs a.active {
  background: linear-gradient(135deg, #e88aa2, #b77bff);
  color: #fff;
  box-shadow: 0 .45rem 1.2rem rgba(232, 138, 162, .24);
}

.lao-eco-rank-list .list-group-item:nth-child(1) .lao-eco-rank-no {
  color: #f5b642;
}

.lao-eco-rank-list .list-group-item:nth-child(2) .lao-eco-rank-no {
  color: #b9bfd6;
}

.lao-eco-rank-list .list-group-item:nth-child(3) .lao-eco-rank-no {
  color: #d99058;
}

.lao-eco-rank-item:hover {
  background: rgba(232, 138, 162, .07);
}

.lao-svip-badge {
  border-color: rgba(255, 214, 134, .9);
  background: linear-gradient(135deg, #e88aa2 0%, #ff5b86 34%, #ffd166 68%, #b77bff 100%);
  box-shadow: 0 0 .55rem rgba(232, 138, 162, .42), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.lao-svip-apply-card {
  background: linear-gradient(135deg, rgba(232, 138, 162, .10), rgba(183, 123, 255, .08));
}

/* Compact forum badges inspired by capsule-style community labels */
.lao-level-badge,
.lao-role-badge,
.lao-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.45rem;
  margin-left: .35rem;
  padding: 0 .62rem;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
}

.lao-level-badge {
  min-width: 3.1rem;
  background: rgba(118, 122, 132, .88);
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.lao-role-badge {
  gap: .32rem;
  min-width: 4.25rem;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.04);
  font-size: .82rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.lao-role-badge > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  color: #fff;
  font-size: .62rem;
  font-weight: 900;
  box-shadow: 0 0 .45rem rgba(255,255,255,.18);
}

.lao-role-developer {
  color: #48a6ff;
  background: rgba(72,166,255,.10);
}

.lao-role-developer > span {
  background: linear-gradient(135deg, #1398ff, #43d6ff);
}

.lao-role-blogger {
  color: #ff6d76;
  background: rgba(255,109,118,.10);
}

.lao-role-blogger > span {
  background: radial-gradient(circle at 35% 35%, #ffd36a 0 18%, #ef3d58 19% 62%, #1f1f2c 63% 100%);
}

.lao-role-moderator {
  color: #9d7cff;
  background: rgba(157,124,255,.10);
}

.lao-role-moderator > span {
  background: linear-gradient(135deg, #7c5cff, #d78cff);
  font-size: .56rem;
}

.lao-title-badge {
  border: 1px solid rgba(232, 138, 162, .34);
  background: rgba(232, 138, 162, .10);
  color: var(--lao-title-color, #e88aa2);
  font-size: .78rem;
  font-weight: 800;
}