/* =========================================
   BATTLE MVP — UNIFIED SIDEBAR SYSTEM
   ========================================= */

/* BOTH SIDEBARS */
.bmSidebar,
.rsWrap{
  display:flex;
  flex-direction:column;
  gap:16px;

  position:sticky;
  top:90px;
}

/* =========================================
   CARD
   ========================================= */

.sbCard{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));

  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;

  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* GLOW */
.sbCard::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(400px 120px at 0% 0%, rgba(36,223,146,.08), transparent 60%);
  pointer-events:none;
}

/* TITLE */
.sbTitle{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b7c92;
  margin-bottom:10px;
}

/* =========================================
   MENU
   ========================================= */

.sbMenu{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sbItem{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px;
  border-radius:14px;

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);

  text-decoration:none;
  color:#fff;

  transition:.2s;
  backdrop-filter:blur(8px);
}

.sbItem:hover{
  background:rgba(255,255,255,.06);
  transform:translateX(4px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

/* ACTIVE */
.sbItem.is-active{
  background:
    linear-gradient(180deg, rgba(36,223,146,.2), rgba(36,223,146,.08));

  border:1px solid rgba(36,223,146,.35);

  box-shadow:
    0 0 0 1px rgba(36,223,146,.2),
    0 10px 30px rgba(36,223,146,.15);
}

/* ICON */
.sbIcon{
  width:36px;
  height:36px;
  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,.05);
  font-size:12px;
  font-weight:900;
}

.sbItem.is-active .sbIcon{
  background:rgba(36,223,146,.2);
  box-shadow:0 0 12px rgba(36,223,146,.5);
}

/* TEXT */
.sbText{
  display:flex;
  flex-direction:column;
}

.sbName{
  font-size:13px;
  font-weight:800;
}

.sbDesc{
  font-size:11px;
  color:#7c8aa0;
}

/* =========================================
   STATUS
   ========================================= */

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

.sbDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#24df92;
  box-shadow:0 0 10px #24df92;
}

.sbStatusMain{
  font-weight:800;
  font-size:13px;
}

.sbStatusSub{
  font-size:11px;
  color:#7c8aa0;
}

/* =========================================
   BUTTONS
   ========================================= */

.sbActions{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sbBtn{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  font-size:12px;
  font-weight:800;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);

  text-decoration:none;
  color:#fff;

  transition:.2s;
}

.sbBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
}

.sbBtn--green{
  background:
    linear-gradient(180deg, rgba(36,223,146,.35), rgba(36,223,146,.15));

  border:1px solid rgba(36,223,146,.3);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 6px 20px rgba(36,223,146,.25);
}

/* =========================================
   USERS
   ========================================= */

.sbList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sbUser{
  display:flex;
  gap:10px;
  align-items:center;

  padding:8px;
  border-radius:10px;

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.04);

  transition:.2s;
}

.sbUser:hover{
  background:rgba(255,255,255,.06);
}

.sbAvatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(45deg,#24df92,#5d63ff);
}

.sbUserName{
  font-size:13px;
  font-weight:700;
}

.sbUserMeta{
  font-size:11px;
  color:#7c8aa0;
}
/* =========================================
   BATTLE MVP — SIDEBAR SYSTEM FINAL PRO
   ========================================= */

/* BOTH SIDEBARS */
.bmSidebar,
.rsWrap{
  display:flex;
  flex-direction:column;
  gap:18px;

  position:sticky;
  top:90px;

  width:100%;
}

/* =========================================
   CARD
   ========================================= */

.sbCard{
  position:relative;
  overflow:hidden;

  padding:16px;

  border-radius:18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* GLOW EFFECT */
.sbCard::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    radial-gradient(500px 120px at 0% 0%, rgba(36,223,146,.08), transparent 60%);

  pointer-events:none;
}

/* =========================================
   TITLE
   ========================================= */

.sbTitle{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7c8aa0;

  margin-bottom:12px;
}

/* =========================================
   MENU
   ========================================= */

.sbMenu{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sbItem{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px;
  border-radius:14px;

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);

  text-decoration:none;
  color:#fff;

  transition:.25s;
  backdrop-filter:blur(10px);
}

.sbItem:hover{
  background:rgba(255,255,255,.07);
  transform:translateX(5px);

  box-shadow:
    0 8px 25px rgba(0,0,0,.4);
}

/* ACTIVE ITEM */
.sbItem.is-active{
  background:
    linear-gradient(180deg, rgba(36,223,146,.25), rgba(36,223,146,.08));

  border:1px solid rgba(36,223,146,.4);

  box-shadow:
    0 0 0 1px rgba(36,223,146,.25),
    0 10px 35px rgba(36,223,146,.2);
}

/* =========================================
   ICON
   ========================================= */

.sbIcon{
  width:38px;
  height:38px;

  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,.05);

  font-size:12px;
  font-weight:900;
}

.sbItem.is-active .sbIcon{
  background:rgba(36,223,146,.25);
  box-shadow:0 0 14px rgba(36,223,146,.6);
}

/* =========================================
   TEXT
   ========================================= */

.sbText{
  display:flex;
  flex-direction:column;
}

.sbName{
  font-size:13px;
  font-weight:800;
}

.sbDesc{
  font-size:11px;
  color:#7c8aa0;
}

/* =========================================
   STATUS
   ========================================= */

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

.sbDot{
  width:10px;
  height:10px;
  border-radius:50%;

  background:#24df92;

  box-shadow:0 0 12px #24df92;
}

.sbStatusMain{
  font-weight:800;
  font-size:13px;
}

.sbStatusSub{
  font-size:11px;
  color:#7c8aa0;
}

/* =========================================
   BUTTONS
   ========================================= */

.sbActions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sbBtn{
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  font-size:12px;
  font-weight:800;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);

  text-decoration:none;
  color:#fff;

  transition:.2s;
}

.sbBtn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
}

/* GREEN PREMIUM */
.sbBtn--green{
  background:
    linear-gradient(180deg, rgba(36,223,146,.4), rgba(36,223,146,.15));

  border:1px solid rgba(36,223,146,.4);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 8px 25px rgba(36,223,146,.35);
}

/* =========================================
   LIST USERS
   ========================================= */

.sbList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sbUser{
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px;
  border-radius:12px;

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);

  transition:.2s;
}

.sbUser:hover{
  background:rgba(255,255,255,.07);
}

.sbAvatar{
  width:34px;
  height:34px;
  border-radius:50%;

  background:linear-gradient(45deg,#24df92,#5d63ff);
}

.sbUserName{
  font-size:13px;
  font-weight:700;
}

.sbUserMeta{
  font-size:11px;
  color:#7c8aa0;
}

/* =========================================
   BADGES
   ========================================= */

.sbBadge{
  margin-left:auto;

  padding:4px 8px;
  border-radius:999px;

  font-size:10px;
  font-weight:800;
}

.sbBadge--online{
  background:rgba(36,223,146,.15);
  color:#6cffb3;
}

.sbBadge--live{
  background:rgba(255,70,70,.15);
  color:#ff6a6a;
}