.rep-ava {
  position: relative;
  width: 56px;
  height: 56px;
}
.rep-ava img {
  display: block;
  border-radius: 8px;
  object-fit: cover;
}
.ava-main {
  width: 56px;
  height: 56px;
}
.ava-mini {
  position: absolute;
  bottom: -4px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--card-bg,#1e1e2d);
  background: #fff;
}<style>

.score-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.score-top .left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  font-weight: 600;
  color: var(--text-bright,#fff);
}

.total {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-bright,#fff);
}

.meter {
  width: 100%;
  height: 8px;
  background: var(--border-color,#333);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}

.meter .fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent,#7f56d9), var(--accent-hover,#5e42c4));
  border-radius: 6px;
  transition: width 1.5s ease-out;
}

.rep-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  line-height: 1;
}

.rep-badge svg {
  width: 14px;
  height: 14px;
}

.rep-badge.positive {
  background: rgba(46, 204, 113,.15);
  color: #2ecc71;
}
.rep-badge.neutral {
  background: rgba(241, 196, 15,.15);
  color: #f1c40f;
}
.rep-badge.negative {
  background: rgba(231, 76, 60,.15);
  color: #e74c3c;
}



</style>
<style>.onyx-stats__iconwrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid
;
    place-items: center;
    background: var(--highlight-bg);
    border: 1px solid var(--border-color);
    color: var(--accent-soft);
}.rep-not-found {
  text-align: center;
  padding: 20px;
  color: var(--text-light, #aaa);
  font-size: 0.95rem;
  font-style: italic;
}

.rep-val,
.trow_reputation_positive {
    color: var(--pos);
    background: rgb(9 214 109 / 29%);
}


.trow_reputation_neutral {
    color: #ddd;
    background: rgba(200,200,200,.07);
}


.trow_reputation_negative {
    color: var(--neg);
    background: rgba(255,77,79,.12);
}

.chip.trow_reputation_positive {
    color: var(--pos);
    background: rgba(9,214,109,.12);
}


.chip.trow_reputation_neutral {
    color: #ddd;
    background: rgba(200,200,200,.07);
}


.chip.trow_reputation_negative {
    color: var(--neg);
    background: rgba(255,77,79,.12);
}

.rep-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.postbit_buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
 background: var(--button-hover, #3d3d3d);
  color: var(--text-light, #bbb);
  font-size: 14px;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}


.postbit_buttons a span {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Add icons via CSS content */
.postbit_report::before {
  content: "\f024"; 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.postbit_qdelete::before {
  content: "\f1f8"; 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}



.postbit_report:hover {
  color: #fbbc04; 
}

.postbit_qdelete:hover {
  color: #e53935;
}


.wrap-rep {margin:20px 30px;padding:0 16px;display:grid;grid-template-columns:420px 1fr;gap:18px}
  @media (max-width: 980px){ .wrap-rep {grid-template-columns:1fr} }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 20px var(--shadow-color);
    background: var(--card-bg);
    /* background: linear-gradient(0deg, var(--secondary-bg), var(--card-bg)); */
    border-radius: 16px;
    overflow: hidden;
}
  .card .head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text-bright)}
  .card .body{padding:16px}

  /* profile info left */
  .p-user{display:flex;gap:12px;align-items:center}
  .p-ava{width:64px;height:64px;border-radius:50%;overflow:hidden;border:1px solid var(--border)}

  .p-name{display:flex;flex-direction:column;gap:4px}
  .p-name h2{margin:0;font-size:1.25rem;color:var(--text-bright)}
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:#fff;background:#3ecf8e}
  .badge i{opacity:.95}

.score-block {
    margin-top: 14px;
    background: var(--highlight-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    /* background: var(--secondary-bg); */
} .score-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .score-top .total{font-weight:800;font-size:1.15rem}
  .meter{height:8px;background:#2a2a2a;border:1px solid var(--border);border-radius:999px;overflow:hidden}
 
  .breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .chip{display:flex;align-items:center;gap:6px;justify-content:center;padding:6px 8px;border-radius:10px;border:1px solid var(--border);font-weight:700}
  .chip.pos{color:var(--pos); background:rgba(9,214,109,.12)}
  .chip.neu{color:#ddd; background:rgba(200,200,200,.07)}
  .chip.neg{color:var(--neg); background:rgba(255,77,79,.12)}

  .p-rep-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.rep-stat {
    background: var(--highlight-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    /* background: var(--secondary-bg); */
}  .rep-stat i{color:var(--accent)}
  .rep-stat .k{font-size:.8rem;color:var(--text-light)}
  .rep-stat .v{font-weight:800;color:var(--text-bright)}

  .p-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#2a2a2a;color:#fff}
  .btn.primary{background:var(--accent);border-color:transparent;font-weight:800}
  .btn:hover{filter:brightness(1.06)}

  /* right comments */
  .tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
  .filters{display:flex;gap:8px;flex-wrap:wrap}
  .pill{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--highlight-bg);cursor:pointer;font-size:.9rem}
  .pill.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(127,86,217,.25)}
  .sort{margin-left:auto;display:flex;gap:8px;align-items:center}
  .sort select{background:#232323;color:#ddd;border:1px solid var(--border);border-radius:10px;padding:8px 10px}
  .search{position:relative}
  .search input{background:#232323;color:#ddd;border:1px solid var(--border);border-radius:10px;padding:8px 32px 8px 12px}
  .search i{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted)}

  .rep-list{display:grid;gap:12px}
.rep-card {
    background: var(--highlight-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: start;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    /* background: var(--secondary-bg); */
}
 
  .rep-header{display:flex;align-items:center;justify-content:space-between}
  .rep-header h4{margin:0;font-size:1rem;color:var(--text-bright);font-weight:700}
  .rep-header .time{font-size:.8rem;color:var(--text-muted)}
  .rep-text{margin-top:6px;font-size:.95rem;color:var(--text-main)}
  .rep-val{min-width:70px;align-self:center;text-align:center;font-weight:900;padding:8px 12px;border-radius:12px;border:1px solid var(--border)}
  .rep-val.pos{color:var(--pos);background:rgba(9,214,109,.12)}
  .rep-val.neu{color:#ddd;background:rgba(200,200,200,.07)}
  .rep-val.neg{color:var(--neg);background:rgba(255,77,79,.12)}
  .rep-actions{margin-top:8px;display:flex;gap:10px}
  .rep-actions .mini{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:#2a2a2a;color:#ddd;font-size:.85rem}
  .rep-actions .mini:hover{filter:brightness(1.05)}

  .empty{border:1px dashed var(--border);border-radius:12px;padding:18px;text-align:center;color:var(--text-light)}

  @media (max-width:760px){
    .tools{flex-direction:column;align-items:flex-start}
    .sort{margin-left:0}
    .rep-card{grid-template-columns:48px 1fr}
    .rep-val{grid-column:1 / -1;margin-top:4px}
  }