.onyxbb-profileawards--empty{
  padding: 16px 18px 18px;
}

.onyxbb-profileawards__emptystate{
  margin-top: 10px;
  padding: 26px 14px 24px;
  border-radius: 14px;
  border: 1px dashed var(--border-color);
  background: radial-gradient(circle at 0 0, rgba(255,255,255,.03), transparent 55%),
              var(--highlight-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.onyxbb-profileawards__emptystate-icon{
  font-size: 32px;
  color: #787d86; 
  opacity: .7;
}

.onyxbb-profileawards__emptystate-text{
  margin: 0;
  font-size: 14px;
  color: #787d86;
  opacity: .8;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(120,125,134,.8);
}
.onyxbb-awards {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 24px var(--shadow-color);
    padding: 18px 18px 8px
}

.onyxbb-awards__header {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.onyxbb-awards__titlewrap {
    display: flex;
    align-items: center;
    gap: 10px
}

.onyxbb-awards__titleicon {
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(127,86,217,.45));
    font-size: 18px
}

.onyxbb-awards__title {
    margin: 0;
    color: var(--text-bright,#fff);
    font-size: 18px;
    letter-spacing: .02em;
    font-weight: 800
}

.onyxbb-awards__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center
}

.onyxbb-awards__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--highlight-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 10px;
    min-width: 220px
}

.onyxbb-awards__search i {
    color: var(--text-light)
}

.onyxbb-awards__searchinput {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    width: 220px
}

.onyxbb-awards__searchinput::placeholder {
    color: var(--text-muted)
}

.onyxbb-awards__filters {
    display: flex;
    gap: 6px;
    background: var(--highlight-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px
}

.onyxbb-awards__tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    transition: background .12s ease, box-shadow .12s ease, color .12s ease
}

.onyxbb-awards__tab i {
    opacity: .9
}

.onyxbb-awards__tab:hover {
    background: rgba(255,255,255,.03)
}

.onyxbb-awards__tab.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(154,127,224,.25)
}

.onyxbb-awards__cathead {
    margin: 8px 2px 8px;
    color: var(--text-light);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px
}

.onyxbb-awards__grid {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3,minmax(260px,1fr));
    gap: 12px
}

@media (max-width: 780px) {
    .onyxbb-awards__grid {
        grid-template-columns:1fr
    }
}
.badge_3  { background: linear-gradient(135deg, #f1c40f, rgba(255,255,255,.08)) !important; } /* Master Donator */
.badge_22 { background: linear-gradient(135deg, #2ecc71, rgba(255,255,255,.08)) !important; } /* Lucky */
.badge_15 { background: linear-gradient(135deg, #6c8cff, rgba(255,255,255,.08)) !important; } /* Trusted */
.badge_17 { background: linear-gradient(135deg, #e056fd, rgba(255,255,255,.08)) !important; } /* Designer */
.badge_19 { background: linear-gradient(135deg, #e67e22, rgba(255,255,255,.08)) !important; } /* Insane */
.badge_21 { background: linear-gradient(135deg, #00b894, rgba(255,255,255,.08)) !important; } /* Mega Spam Fighter */
.badge_20 { background: linear-gradient(135deg, #95a5a6, rgba(255,255,255,.08)) !important; } /* Cracker */
.badge_23 { background: linear-gradient(135deg, #f39c12, rgba(255,255,255,.08)) !important; } /* Mindster */
.badge_16 { background: linear-gradient(135deg, #e74c3c, rgba(255,255,255,.08)) !important; } /* Spam Fighter */
.badge_18 { background: linear-gradient(135deg, #00c3ff, rgba(255,255,255,.08)) !important; } /* 2FA */
/* Card */
.onyxbb-awards__card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    background: var(--highlight-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25) inset;
    transition: transform .12s ease, border-color .12s ease
}

.onyxbb-awards__card:hover {
    transform: translateY(-1px);
    border-color: var(--accent)
}

.onyxbb-awards__badge {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--badge-color), rgba(255, 255, 255, .08));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .04), 0 6px 16px rgba(0, 0, 0, .35);
}

.onyxbb-awards__badge i {
    font-size: 15px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.2)
}

.onyxbb-awards__content {
    min-width: 0
}

.onyxbb-awards__name {
    margin: 0 0 4px;
    color: var(--text-bright,#fff);
    font-size: 16px;
    line-height: 1.2
}

.onyxbb-awards__desc {
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 14px
}

.onyxbb-awards__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.onyxbb-awards__metaitem {
    color: var(--text-muted);
    font-size: 12px;
    display: inline-flex;
    gap: 6px;
    align-items: center
}

/* Rarity tags */
.onyxbb-awards__tag {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.03)
}

.onyxbb-awards__tag--common {
    color: var(--text-main)
}

.onyxbb-awards__tag--rare {
    color: var(--accent-soft);
    border-color: rgba(154,127,224,.5);
    box-shadow: 0 0 10px rgba(154,127,224,.25) inset
}

.onyxbb-awards__tag--epic {
    color: var(--accent);
    border-color: rgba(127,86,217,.6);
    box-shadow: 0 0 10px rgba(127,86,217,.25) inset
}

.onyxbb-awards__tag--legendary {
    color: var(--legend);
    border-color: rgba(0,255,136,.5);
    box-shadow: 0 0 12px rgba(0,255,136,.25) inset
}

.badge_52 { background:linear-gradient(135deg,#00c853,rgba(255,255,255,.08)); } /* Bug Reporter */
.badge_53 { background:linear-gradient(135deg,#7c4dff,rgba(255,255,255,.08)); } /* Reverser */
.badge_54 { background:linear-gradient(135deg,#ff7043,rgba(255,255,255,.08)); } /* Gambler */
.badge_55 { background:linear-gradient(135deg,#26a69a,rgba(255,255,255,.08)); } /* Crypto */
.badge_56 { background:linear-gradient(135deg,#8e44ad,rgba(255,255,255,.08)); } /* Insane Developer */
.badge_57 { background:linear-gradient(135deg,#00bcd4,rgba(255,255,255,.08)); } /* Corona */
.badge_58 { background:linear-gradient(135deg,#d4af37,rgba(255,255,255,.08)); } /* Money King */

.badge_59, .badge_60, .badge_62, .badge_63 { background:linear-gradient(135deg,#ff9800,rgba(255,255,255,.08)); } /* Halloween Treat (years) */
.badge_64, .badge_65, .badge_66, .badge_67, .badge_68 { background:linear-gradient(135deg,#9e9e9e,rgba(255,255,255,.08)); } /* Halloween Trick (years) */

.badge_69, .badge_70, .badge_71, .badge_72 { background:linear-gradient(135deg,#4db6ac,rgba(255,255,255,.08)); } /* Merry Christmas (years) */
.badge_73 { background:linear-gradient(135deg,#7e57c2,rgba(255,255,255,.08)); } /* Happy Ramadan */
.badge_74 { background:linear-gradient(135deg,#e57373,rgba(255,255,255,.08)); } /* Easter (2025) */
.badge_75 { background:linear-gradient(135deg,#42a5f5,rgba(255,255,255,.08)); } /* Sellby Launch */

/* from your earlier sets (standard/requirements) — keep if needed */
.badge_15{ background:linear-gradient(135deg,#6c8cff,rgba(255,255,255,.08)); } /* Trusted */
.badge_16{ background:linear-gradient(135deg,#e74c3c,rgba(255,255,255,.08)); } /* Spam Fighter */
.badge_17{ background:linear-gradient(135deg,#e056fd,rgba(255,255,255,.08)); } /* Designer */
.badge_18{ background:linear-gradient(135deg,#00c3ff,rgba(255,255,255,.08)); } /* 2FA */
.badge_19{ background:linear-gradient(135deg,#e67e22,rgba(255,255,255,.08)); } /* Insane */
.badge_21{ background:linear-gradient(135deg,#00b894,rgba(255,255,255,.08)); } /* Mega Spam Fighter */
.badge_25{ background:linear-gradient(135deg,#26a69a,rgba(255,255,255,.08)); } /* Soul */
.badge_26{ background:linear-gradient(135deg,#fbc02d,rgba(255,255,255,.08)); } /* Honor */
.badge_27{ background:linear-gradient(135deg,#7e57c2,rgba(255,255,255,.08)); } /* Stellar */
.badge_28{ background:linear-gradient(135deg,#42a5f5,rgba(255,255,255,.08)); } /* Cool */
.badge_29{ background:linear-gradient(135deg,#ff7043,rgba(255,255,255,.08)); } /* Radiant */
.badge_30{ background:linear-gradient(135deg,#90a4ae,rgba(255,255,255,.08)); } /* Peak */
.badge_31{ background:linear-gradient(135deg,#80cbc4,rgba(255,255,255,.08)); } /* New Poster */
.badge_32{ background:linear-gradient(135deg,#ab47bc,rgba(255,255,255,.08)); } /* Junior Poster */
.badge_33{ background:linear-gradient(135deg,#26a69a,rgba(255,255,255,.08)); } /* Senior Poster */
.badge_34{ background:linear-gradient(135deg,#4fc3f7,rgba(255,255,255,.08)); } /* HQ Poster */
.badge_35{ background:linear-gradient(135deg,#a1887f,rgba(255,255,255,.08)); } /* UHQ Poster */
.badge_36{ background:linear-gradient(135deg,#5c6bc0,rgba(255,255,255,.08)); } /* Nirvana */
.badge_37{ background:linear-gradient(135deg,#ef6c00,rgba(255,255,255,.08)); } /* Noble */
.badge_38{ background:linear-gradient(135deg,#9e9d24,rgba(255,255,255,.08)); } /* Regal */
.badge_39{ background:linear-gradient(135deg,#f57c00,rgba(255,255,255,.08)); } /* Magic */
.badge_40{ background:linear-gradient(135deg,#8d6e63,rgba(255,255,255,.08)); } /* Exalted */
.badge_41{ background:linear-gradient(135deg,#26a69a,rgba(255,255,255,.08)); } /* Pioneer */
.badge_42{ background:linear-gradient(135deg,#90a4ae,rgba(255,255,255,.08)); } /* Moon */
.badge_43{ background:linear-gradient(135deg,#d4af37,rgba(255,255,255,.08)); } /* Monarch */
.badge_44{ background:linear-gradient(135deg,#9c27b0,rgba(255,255,255,.08)); } /* Majestic */
.badge_45{ background:linear-gradient(135deg,#3949ab,rgba(255,255,255,.08)); } /* Infinity */
.badge_46{ background:linear-gradient(135deg,#6d4c41,rgba(255,255,255,.08)); } /* Trophy */
.badge_47{ background:linear-gradient(135deg,#455a64,rgba(255,255,255,.08)); } /* Aurora */
/* Upgrades */
.badge_48{ background: linear-gradient(135deg, #fff200, rgba(255,255,255,.08)); } /* GOLD */
.badge_49{ background: linear-gradient(135deg, #b6bfd1, rgba(255,255,255,.08)); } /* PLATINUM */
.badge_50{ background: linear-gradient(135deg, #00f0ff, rgba(255,255,255,.08)); } /* DIAMOND */
.badge_51{ background: linear-gradient(135deg, #ff2d8f, rgba(255,255,255,.08)); } /* Helping Hand */


.badge_24{ background: linear-gradient(135deg, #f7931a, rgba(255,255,255,.08)); } 

.onyxbb-awards__searchclear{
  border: 0;
  background: var(--button-bg);
  color: var(--button-text);
  width: calc(var(--search-h) - 18px);
  height: calc(var(--search-h) - 18px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  opacity: 0;
  transform: scale(.85);
}
.onyxbb-awards__searchclear:hover{ background: var(--button-hover-bg); }
.onyxbb-awards__searchclear:not([hidden]){ opacity: 1; transform: scale(1); }

/* counter pill */
.onyxbb-awards__searchcount{
  display: inline-grid;
  place-items: center;
  height: calc(var(--search-h) - 18px);
  min-width: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright);
  background: linear-gradient(135deg, var(--accent), rgba(255,255,255,.06));
  border: 1px solid var(--border-color);
  transform-origin: right center;
  animation: countPop .18s ease;
}
@keyframes countPop{
  from { transform: scale(.9); opacity: .5; }
  to   { transform: scale(1);  opacity: 1;  }
}

/* screenreader helper */
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ===== card show/hide animation ===== */
.onyxbb-awards__card{
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
.onyxbb-awards__card.is-hiding{ opacity: 0; transform: translateY(4px) scale(.98); }
.onyxbb-awards__card.is-showing{
  animation: fadeInUp .22s ease forwards;
}
@keyframes fadeInUp{
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)  scale(1);  }
}

/* when lists are switched by tabs, hide instantly */
.onyxbb-awards__grid[hidden],
.onyxbb-awards__grid.is-hidden { display: none; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .onyxbb-awards__card,
  .onyxbb-awards__searchclear,
  .onyxbb-awards__searchcount{
    transition: none !important;
    animation: none !important;
  }
}

.onyxbb-profileawards__badge{
    width: 35px;
    height: 35px;
    border-radius: 10px;
   
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .04), 0 6px 16px rgba(0, 0, 0, .35);
}
.onyxbb-profileawards{
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 6px 18px var(--shadow-color);
  padding: 14px 16px;
}

.onyxbb-profileawards__header{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.onyxbb-profileawards__icon{
  color: var(--accent); font-size:16px; filter: drop-shadow(0 0 6px rgba(127,86,217,.45));
}
.onyxbb-profileawards__title{
  margin:0; font-size:15px; color: var(--text-bright,#fff);
  text-transform: uppercase; font-weight:700; letter-spacing:.04em;
}

/* Grid of badges */
.onyxbb-profileawards__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap:10px;
}



.onyxbb-profileawards__badge i{
  font-size:18px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
}


.onyxbb-profileawards__badge:focus-visible,
.onyxbb-profileawards__badge:hover{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(127,86,217,.35), 0 10px 22px rgba(0,0,0,.35);
}

.onyxbb-profileawards__badge::after{
  content: attr(data-title);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--highlight-bg);
  color: var(--text-bright,#fff);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px; white-space: nowrap;
  box-shadow: 0 8px 18px var(--shadow-color);
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 3;
}
.onyxbb-profileawards__badge::before{
  content: "";
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--border-color);
  opacity: 0; transition: opacity .12s ease, transform .12s ease;
  z-index: 3;
}
.onyxbb-profileawards__badge:hover::after,
.onyxbb-profileawards__badge:hover::before,
.onyxbb-profileawards__badge:focus-visible::after,
.onyxbb-profileawards__badge:focus-visible::before{
  opacity: 1; transform: translateX(-50%) translateY(0);
}