.bsx-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.bsx-card{
  min-height:290px !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  padding:16px !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg, rgba(20,20,20,0.98) 0%, rgba(8,8,8,0.98) 100%) !important;
  border:1px solid rgba(212,175,55,0.16) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.bsx-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(212,175,55,0.28) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.42),
    0 0 0 1px rgba(212,175,55,0.06) inset !important;
}

.bsx-card-top{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  gap:12px !important;
}

.bsx-logo{
  width:68px !important;
  height:68px !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.24),
    0 0 0 1px rgba(212,175,55,0.10) !important;
}

.bsx-logo img{
  padding:10px !important;
}

.bsx-name{
  font-size:16px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  color:#fff !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.bsx-desc{
  min-height:40px !important;
  max-height:40px !important;
  overflow:hidden !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,0.58) !important;
}

.bsx-tags{
  min-height:58px !important;
  align-content:flex-start !important;
  justify-content:center !important;
  gap:6px !important;
}

.bsx-tag{
  background:rgba(212,175,55,0.08) !important;
  border:1px solid rgba(212,175,55,0.14) !important;
  color:#e7c85c !important;
  font-size:11px !important;
  padding:6px 9px !important;
  border-radius:999px !important;
}

.bsx-actions{
  margin-top:14px !important;
}

.bsx-btn-detail{
  height:44px !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg, rgba(27,27,27,1) 0%, rgba(16,16,16,1) 100%) !important;
  border:1px solid rgba(212,175,55,0.24) !important;
  color:#f0d06a !important;
  font-weight:700 !important;
  letter-spacing:0.2px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 18px rgba(0,0,0,0.25) !important;
}

.bsx-btn-detail:hover{
  border-color:rgba(212,175,55,0.38) !important;
  background:
    linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(18,18,18,1) 100%) !important;
}

.bsx-modal{
  border-radius:26px 26px 20px 20px !important;
  border:1px solid rgba(212,175,55,0.20) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.bsx-modal-head{
  padding:20px 20px 12px !important;
}

.bsx-modal-title{
  color:#f3d36a !important;
  font-size:21px !important;
  font-weight:800 !important;
}

.bsx-detail-box{
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(18,18,18,1) 0%, rgba(12,12,12,1) 100%) !important;
  border:1px solid rgba(212,175,55,0.10) !important;
}

.bsx-btn-go{
  height:46px !important;
  border-radius:14px !important;
  font-weight:800 !important;
  box-shadow:0 10px 20px rgba(0,0,0,0.28) !important;
}

@media (max-width: 480px){
  .bsx-list{
    gap:10px !important;
  }

  .bsx-card{
    min-height:270px !important;
    padding:14px !important;
  }

  .bsx-logo{
    width:60px !important;
    height:60px !important;
  }

  .bsx-name{
    font-size:14px !important;
    min-height:38px !important;
  }

  .bsx-desc{
    min-height:36px !important;
    max-height:36px !important;
    font-size:11px !important;
  }

  .bsx-tags{
    min-height:52px !important;
  }
}

.bsx-card{
  position:relative !important;
  overflow:hidden !important;
}

.bsx-card::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:14px !important;
  right:14px !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(212,175,55,0.65) 50%, rgba(212,175,55,0) 100%) !important;
  opacity:.9 !important;
}

.bsx-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:radial-gradient(circle at top, rgba(212,175,55,0.06), transparent 38%) !important;
  pointer-events:none !important;
}

.bsx-meta{
  position:relative !important;
}

.bsx-featured{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  margin-top:6px !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.4px !important;
  color:#f3d36a !important;
  background:rgba(212,175,55,0.10) !important;
  border:1px solid rgba(212,175,55,0.20) !important;
  box-shadow:0 4px 10px rgba(0,0,0,0.18) !important;
}

.bsx-btn-detail{
  position:relative !important;
  overflow:hidden !important;
}

.bsx-btn-detail::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:-120% !important;
  width:70% !important;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,0.14), transparent) !important;
  transition:left .45s ease !important;
}

.bsx-btn-detail:hover::after{
  left:140% !important;
}

.bsx-modal-head{
  background:linear-gradient(180deg, rgba(212,175,55,0.05), rgba(212,175,55,0.00)) !important;
}


.bsx-modal{
  background:
    linear-gradient(180deg, rgba(14,14,14,0.98) 0%, rgba(8,8,8,0.99) 100%) !important;
}

.bsx-modal-body .bsx-card-top{
  padding:4px 0 8px !important;
  gap:14px !important;
}

.bsx-modal-body .bsx-logo{
  width:82px !important;
  height:82px !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.30),
    0 0 0 1px rgba(212,175,55,0.10) !important;
}

.bsx-modal-body .bsx-logo img{
  padding:12px !important;
}

.bsx-modal-body .bsx-name{
  font-size:22px !important;
  min-height:auto !important;
  color:#fff !important;
}

.bsx-modal-body .bsx-desc{
  min-height:auto !important;
  max-height:none !important;
  font-size:13px !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,0.65) !important;
  display:block !important;
  overflow:visible !important;
}

.bsx-detail-grid{
  gap:12px !important;
}

.bsx-detail-box{
  position:relative !important;
  overflow:hidden !important;
  padding:15px 16px !important;
}

.bsx-detail-box::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:12px !important;
  right:12px !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(212,175,55,0.40) 50%, rgba(212,175,55,0) 100%) !important;
}

.bsx-detail-label{
  font-size:11px !important;
  letter-spacing:.4px !important;
  text-transform:uppercase !important;
  color:rgba(212,175,55,0.65) !important;
}

.bsx-detail-value{
  font-size:14px !important;
  line-height:1.6 !important;
  color:#f5f5f5 !important;
}

.bsx-modal-actions{
  margin-top:4px !important;
}

.bsx-modal-actions .bsx-btn-detail{
  background:linear-gradient(180deg, rgba(22,22,22,1) 0%, rgba(12,12,12,1) 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.08) !important;
}

.bsx-modal-actions .bsx-btn-go{
  background:linear-gradient(135deg, #d4af37 0%, #f3d36a 45%, #b8960c 100%) !important;
  color:#000 !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  box-shadow:
    0 12px 22px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

@media (max-width: 480px){
  .bsx-modal-body .bsx-logo{
    width:74px !important;
    height:74px !important;
  }

  .bsx-modal-body .bsx-name{
    font-size:19px !important;
  }
}