:root {
  --primary-color: #ff6b6b;
  --secondary-color: #e7e7e7;
  --bg-color: #0a0a0a;
  --card-bg: #1a191c;
  --border-color: #333333;
  --text-color: #e0e0e0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

.wrapper {
  max-width: 1300px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
  padding: 0 20px;
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 275px;
  flex-shrink: 0;
}

.sidebar {
  padding: 20px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  width: 100%;
  background-image: url('/assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sidebar .logo img {
  display: block;
  margin: 0 auto;
  max-width: 70%;
  height: auto;
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
  padding: 5px 0px 15px 0px;
}

.sidebar .logo img:hover {
  transform: scale(1.04);
}


.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 15px;
  transition: background-color 0.2s;
  cursor: pointer;
  color: var(--secondary-color);
  margin-bottom: 5px;
  font-weight: 500;
}

.menu-item:hover {
  background-color: #262629;
}

.menu-item.active {
  font-weight: 600;
  color: var(--text-color);
  background-color: #2a2a2a;
}

.menu-item:nth-child(1) i {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  content: "\f201"; /* fa-chart-line */
}

.menu-item i {
  font-size: 16px;
  width: 35px;
  text-align: center;
}

.menu-item span {
  font-size: 14px;
  margin-left: 5px;
}

.sidebar-banner {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: 6px;
}

.sidebar-banner img {
  width: 100%;
  border-radius: 10px;
}

.content {
  flex: 4.5;
  padding: 20px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  
  /* ÃÂ¤ÃÂ¾ÃÂ½ÃÂ¾ÃÂ²ÃÂ¾ÃÂµ ÃÂ¸ÃÂ·ÃÂ¾ÃÂ±Ã‘â‚¬ÃÂ°ÃÂ¶ÃÂµÃÂ½ÃÂ¸ÃÂµ */
}

.stats {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.stat-item {
  flex: 1;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  transition: transform 0.2s;
  color: #fff;
}

.stat-item:hover {
  transform: translateY(-3px);
}

.stat-day {
  background: radial-gradient(50% 80% at 50% 0%, rgb(113 113 113 / 56%) 0%, #242424 100%), radial-gradient(20% 35% at 50% 0%, rgb(137 137 137 / 70%) 0%, #242424 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
  background-color: #262629;
  background-image: url(/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.stat-day:hover {
  background: radial-gradient(50% 80% at 50% 0%, rgb(113 113 113 / 56%) 0%, #242424 100%), radial-gradient(20% 35% at 50% 0%, rgb(137 137 137 / 70%) 0%, #242424 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
}

.stat-week {
  background: radial-gradient(50% 80% at 50% 0%, rgb(76 175 80 / 56%) 0%, #242424 100%), radial-gradient(20% 35% at 50% 0%, rgb(76 175 80 / 70%) 0%, #242424 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
  background-color: #262629;
  background-image: url(/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.stat-week:hover {
  background: radial-gradient(50% 80% at 50% 0%, rgb(76 175 80 / 56%) 0%, #262629 100%), radial-gradient(20% 35% at 50% 0%, rgb(76 175 80 / 70%) 0%, #262629 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
}

.stat-month {
  background: radial-gradient(50% 80% at 50% 0%, rgb(255 196 0 / 38%) 0%, #262629 100%), radial-gradient(20% 35% at 50% 0%, rgb(255 196 0 / 44%) 0%, #262629 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
  background-color: #262629;
  background-image: url(/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.stat-month:hover {
  background: radial-gradient(50% 80% at 50% 0%, rgb(255 196 0 / 38%) 0%, #262629 100%), radial-gradient(20% 35% at 50% 0%, rgb(255 196 0 / 44%) 0%, #262629 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
}

.stat-year {
  background: radial-gradient(50% 80% at 50% 0%, rgb(255 56 90 / 46%) 0%, #242424 100%), radial-gradient(20% 35% at 50% 0%, rgb(255 56 90 / 42%) 0%, #242424 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
  background-color: #262629;
  background-image: url(/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.stat-year:hover {
  background: radial-gradient(50% 80% at 50% 0%, rgb(255 56 90 / 46%) 0%, #262629 100%), radial-gradient(20% 35% at 50% 0%, rgb(255 56 90 / 42%) 0%, #262629 100%);
  animation: pulseGlow 2s infinite ease-in-out;
  border: 1px solid var(--border-color);
}

.stats .stat-year h4  {
  color: #ff385a;
}
.stats .stat-month h4  {
  color: #ffc400;
}
.stats .stat-week h4  {
  color: #4caf50;
}
.stat-item h4 {
  font-size: 12px;
  margin-bottom: 5px;
  font-weight: 600;
  color: #bbbbbb;
}

.stat-item p {
  font-size: 18px;
  font-weight: 700;
}

.deposits h3 {
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
  font-weight: 600;
}

.deposits-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.deposit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #262629;
  border-radius: 15px;
  transition: background-color 0.4s;
  border: 1px solid #333333ba;
}

.deposit-item:hover {
  background-color: #2b2a2d;
}

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

.deposit-info span {
  font-size: 14px;
  color: var(--secondary-color);
  font-weight: 500;
}

.deposit-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.status-paid {
  color: #4caf50;
}
.status-paid.status-badge {
  background-color: rgba(76, 175, 80, 0.2);
}

.status-pending {
  color: #ffc400;
}
.status-pending.status-badge {
  background-color: #ffc40030;
}
.status-pending.status-badge.time {
  background: none;
  padding: 0px;
}

.status-overdue {
  color: #ff385a;
}
.status-overdue.status-badge {
  background-color: #ff385a33;
}

.deposit-amount {
  font-size: 16px;
  font-weight: 600;
}

.status-button {
  background-color: #524722;
  color: #ffc400;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 3px 8px;
}

.status-button:hover {
  background-color: #ffc400;
  color: #000000;
}

.right-panel {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.sidebar h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-color);
}

.sidebar.balance {
  background: radial-gradient(50% 80% at 50% 100%, rgb(180 241 142 / 20%) 0%, rgb(30 30 30) 100%), 
              radial-gradient(20% 35% at 50% 100%, rgb(180 241 142 / 29%) 0%, rgb(98 203 57 / 16%) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  background: radial-gradient(120% 120% at 50% 100%, #1e1e1e 40%, #63e 70%, #fff 100%);
}

.sidebar.balance .balance-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.sidebar.balance .balance-amount {
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 15px;
}

.withdraw-button {
  display: inline-block;
  padding: 10px 20px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #505050;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.withdraw-button:hover {
  background: #ffffffd9;
}

.sidebar.support {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.sidebar.support h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-color);
}

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

.support-links a {
  font-size: 13px;
  color: #63616a;
  transition: color 0.2s;
}

.support-links a:hover {
  color: #88868f;
}

.sidebar.language select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--card-bg);
  color: var(--text-color);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23bbbbbb"><polygon points="0,0 12,0 6,6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  color: #cdcad3;
  cursor: pointer;
  background: #262629;
  font-size: 14px;
  transition: background-color 0.2s;
}
.action-button:hover {
  background: #3f3e43;
}

.action-button-2 {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.action-button i {
  margin-right: 5px;
}

.action-button-2 i {
  margin-right: 5px;
}

.server-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.server-item {
  background: #262629;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 15px;
}

.server-item h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

.server-actions {
  display: flex;
  gap: 10px;
}

.server-actions .action-button {
  flex: 1;
  justify-content: center;
  padding: 10px;
}

.action-buttons .action-button {
  /* background: #262629; */
}

lord-icon {
  margin: 0px 5px;
}

.deposit-date i {
  color: #7b7780;
  padding-right: 5px;
}

.deposit-user i {
  color: #7b7780;
  padding-right: 5px;
}

.deposit-steamid i {
  color: #7b7780;
  padding-right: 5px;
}

.deposit-info .deposit-date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.time-pay {
  color: #6e6e6e;
}

.status-paid.status-badge.time {
    background: none;
    padding: 0px;
}

.loading {
  background: #262629;
  border: 1px solid #333333ba;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading:hover {
  background: #2b2a2d;
}


/* ÐœÐ¾Ð´Ð°Ð»ÑŒÐ½Ð¾Ðµ Ð¾ÐºÐ½Ð¾ */

/* ÐžÐ²ÐµÑ€Ð»ÐµÐ¹ */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* ÐžÐºÐ½Ð¾ */
#modal-overlay .modal {
  background: #1a191c;
  width: 400px;
  max-width: 90%;
  position: relative;
  text-align: center;
  padding: 30px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background-image: url(/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background: radial-gradient(50% 80% at 50% 0%, rgb(70 56 255 / 27%) 0%, #1a191c 100%), radial-gradient(20% 35% at 50% 0%, rgb(255 56 217 / 26%) 0%, #1a191c 100%);
  top: -15%;
}

/* ÐšÐ°Ñ€Ñ‚Ð¸Ð½ÐºÐ° ÑÐ²ÐµÑ€Ñ…Ñƒ */
.modal-image {
  width: 130px;
  margin-top: -10px;
  display: inline-block;
  transform-origin: top center;
  animation: swing 7s ease-in-out infinite;
}

    @keyframes swing {
      0%   { transform: rotate(0deg); }
      25%  { transform: rotate(5deg); }
      75%  { transform: rotate(-5deg); }
      100% { transform: rotate(0deg); }
    }


/* ÐšÐ½Ð¾Ð¿ÐºÐ° Ð·Ð°ÐºÑ€Ñ‹Ñ‚Ð¸Ñ */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: transparent;
  font-size: 30px;
  cursor: pointer;
  color: #7b7780;
}

.close-btn:hover {
  color: #9b96a1;
}

/* ÐžÐ±Ñ‰Ð¸Ð¹ ÑÑ‚Ð¸Ð»ÑŒ ÐºÐ½Ð¾Ð¿Ð¾Ðº Ð² Ð¼Ð¾Ð´Ð°Ð»ÐºÐµ */
.modal-btn {
  display: inline-flex;
  gap: 8px;
  margin: 10px auto;
  align-items: center;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
  /* width: 250px; */
}

/* Ð¡ÐºÐ°Ñ‡Ð°Ñ‚ÑŒ */
.plugin-btn {
  color: #cdcad3;
  background: #262629;
  border: 1px solid var(--border-color);
}

.plugin-btn:hover {
  color: #e7e5ec;
  background: #2e2d31;
}

/* ÐŸÑ€Ð¾Ð²ÐµÑ€Ð¸Ñ‚ÑŒ */
.check-btn {
  background-color: #eeeeee;
  color: #000000;
}

.check-btn:hover {
  opacity: 0.9;
}


.modal-text {
  font-size: 14px;
  margin-top: 10px;
}

/* ÐœÐ¾Ð´Ð°Ð»ÑŒÐ½Ð¾Ðµ Ð¾ÐºÐ½Ð¾ */




/* ÐŸÐ¾Ð´Ð¿Ð¸ÑÐºÐ¸ */

  .container { display:flex; flex-direction:column; align-items:center; width:100%; max-width:1000px; }
  /* Toggle Period */
  .period-switch {position:relative;display:flex;background: #262629;border-radius:50px;overflow:hidden;width:300px;border: 1px solid var(--border-color);}
  .period-switch input { display:none; }
  .period-switch label {flex:1;padding: 12px 0 14px 0;text-align:center;cursor:pointer;font-size:14px;color:#777;z-index:1;transition:color .3s;}
  .period-switch::before {content:'';position:absolute;top:4px;bottom:4px;left:var(--ind-left);width:calc(50% - 8px);background: #3f3e43;border-radius:50px;transition: left .6s;}
  #period-year:checked ~ .period-switch label[for="period-year"], #period-month:checked ~ .period-switch label[for="period-month"] { color:#fff; }
  .discount-tag {font-size:12px;margin-left:8px;background: #ff385a;padding: 2px 5px;border-radius: 50px;color: #ffffff;}
  /* Cards Grid */
  .cards {display:grid;grid-template-columns:repeat(auto-fit, minmax(280px,1fr));gap: 15px;width:100%;margin-top: 15px;}
  .card {display:flex;flex-direction:column;border-radius:16px;padding:24px;transition:transform .3s,box-shadow .3s;cursor:pointer;border: 1px solid var(--border-color);}
  .card:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgb(0 0 0 / 36%); }
  .card.selected {outline: 3px solid #262629;outline-offset:-3px;}
  .card.start {background: #262629;}
  .card.pro {background: #262629;}
  .card.free .old { display:none; }
  .card h3 {font-size: 24px;font-weight:700;margin-bottom:16px;}
  .card .price { display:flex; align-items:flex-end; gap:8px; margin-bottom:16px; }
  .card .price .old {text-decoration: line-through solid #ff4d4f 2px;font-size: 18px;}
  .card .price .new {font-size: 24px;font-weight:700;}
  .card .price .period {font-size:1rem;color:rgba(255,255,255,0.7);margin-left: -5px;}
  .card .features { list-style:none; display:flex; flex-direction:column; gap:8px; flex-grow:1; margin-bottom:16px; }
  .card .features li { display:flex; align-items:center; font-size:14px; }
  .card .features li::before { content:'âœ“'; margin-right:8px; color:rgba(255,255,255,0.6); font-size:12px; }
  .card button {margin-top:auto;width:100%;transition:background .3s;display: inline-block;padding: 12px 20px;background: #ffffff;color: #000000;border: 1px solid #505050;border-radius: 15px;font-size: 14px;cursor: pointer;font-weight: 500;}
  .card.free button {background: #262629;color:#777;border:1px solid #333;}
  .card.start button:hover, .card.pro button:hover { opacity:0.9; }
  /* ÐŸÐ¾Ð´Ð¿Ð¸ÑÐºÐ¸ */





  /* ÐŸÐ¾Ð´Ð¿Ð¸ÑÐºÐ¸ ÑÐ°Ð¹Ñ‚Ð±Ð°Ñ€*/
    .subskribe {
    background: #1a191c;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 20px;
  }

  /* ==== HEADER ==== */
  .card__header {
    display: flex;
    align-items: center;
  }
  .card__title {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
  }
  .card__upgrade {
    align-items: center;
    margin-left: 15px;
    font-size: 14px;
    color: #c2c2c2;
    cursor: pointer;
  }

  .card__upgrade:hover {
    color: #d9d9d9;
}
  .card__upgrade svg {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    fill: currentColor;
  }

  /* ==== LABEL ==== */
  .card__label {
    margin-top: 8px;
    font-size: 14px;
    color: #c2c2c2;
    line-height: 1;
  }

  /* ==== BUTTON ==== */
  .card__btn {
    align-items: center;
    width: 100%;
    transition: background .3s;
    display: inline-block;
    padding: 12px 20px;
    background: #262629;
    color: #e7e7e7;
    border-radius: 15px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    margin-top: 20px;
    border: 1px solid var(--border-color);
  }

  .card__btn:hover {
    background: #2f2f32;
  }
  .card__btn svg {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    fill: currentColor;
  }

  .fa-star {
    font-size: 12px;
  }

  .card__progress {
    margin-top: 16px;
    width: 100%;
    height: 7px;
    background: #262629;
    border-radius: 4px;
    overflow: hidden;
}

.card__progress-fill {
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, #ffffff, #6234ff);
    border-radius: 5px;
}
  /* ÐŸÐ¾Ð´Ð¿Ð¸ÑÐºÐ¸ ÑÐ°Ð¹Ñ‚Ð±Ð°Ñ€*/


  /*referral*/
      .refsys-container {
      max-width: 800px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .refsys-block {
      /* background: #262629; */
      border-radius: 15px;
      /* padding: 20px; */
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      /* border: 1px solid #333333; */
    }
  .refsys-blocks {
      background: #262629;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #333333;
  }
    .refsys-block__title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      margin-bottom: 16px;
      font-weight: 600;
    }
    /* Ð ÐµÑ„ÐµÑ€Ð°Ð»ÑŒÐ½Ð°Ñ ÑÑÑ‹Ð»ÐºÐ° */
    .refsys-link-row {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .refsys-link-row__input {
      flex: 1;
      padding: 11px 15px;
      font-size: 0.95rem;
      background: #262629;
      border-radius: 15px;
      color: #737373;
      border: 1px solid #333333;
    }
    .refsys-link-row__button {
      align-items: center;
      gap: 6px;
      margin-top: auto;
      transition: background .3s;
      display: inline-block;
      padding: 12px 20px;
      color: #000000;
      border: 1px solid #505050;
      border-radius: 15px;
      font-size: 14px;
      cursor: pointer;
      font-weight: 500;
    }
    .refsys-link-row__button:hover {background: #ffffffd9;}
    .refsys-description {
      margin-top: 12px;
      color: #e4e4e4;
      font-size: 0.9rem;
    }
    /* Ð¡Ñ‚Ð°Ñ‚Ð¸ÑÑ‚Ð¸ÐºÐ° */
    .refsys-stats-grid {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .refsys-stat-box {
      flex: 1 1 30%;
      background: #262629;
      border-radius: 15px;
      padding: 16px;
      text-align: center;
      border: 1px solid #333333;
    }
    .refsys-stat-box i {font-size: 1.3rem;color: #888;}
    .refsys-stat-box__value {margin: 8px 0 4px;font-size: 16px;font-weight: 600;color: #ffffff;}
    .refsys-stat-box__label {font-size: 0.85rem;color: #9a9a9a;}
    /* Ð¢Ð°Ð±Ð»Ð¸Ñ†Ð° */
    .refsys-table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      border-collapse: separate;
      border-spacing: 0;
      border: 4px solid #262629;
    }
    .refsys-table thead {background: #262629;}

    .refsys-table th,
    .refsys-table td {
      padding: 12px;
      text-align: left;
      border-top: 2px solid #262629;
      font-size: 14px;
    }
    .refsys-table th {font-weight: 600;color: #ffffff;}
    .refsys-table tbody tr:hover { background: #fafafa; }
    .refsys-accent { color: #4caf50; font-weight: 600; }
    /* ÐŸÐ°Ð³Ð¸Ð½Ð°Ñ†Ð¸Ñ */
    .refsys-pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
    }
    .refsys-page-btn {
      padding: 8px 12px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 0.9rem;
      color: #ffffff;
      background: #262629;
      border: 1px solid #333333;
    }
    .refsys-page-btn:hover { background: #f0f0f0; color: #000000 }
    .refsys-page-btn.active {
      background: #ffffff;
      border-color: #ffffff;
      color: #000;
      font-weight: 600;
    }
    /* ÐšÐ°Ðº ÑÑ‚Ð¾ Ñ€Ð°Ð±Ð¾Ñ‚Ð°ÐµÑ‚ */
    .refsys-how p {margin: 0 0 8px;font-size: 0.9rem;color: #a7a7a7;}
    .refsys-how h3 { margin: 8px 0; font-size: 1rem; }
    .refsys-how ul { margin: 4px 0 0 20px; color: #444; }
    /* ÐÐ´Ð°Ð¿Ñ‚Ð¸Ð² */
    @media (max-width: 600px) {
      .refsys-stats-grid { flex-direction: column; }
      .refsys-link-row { flex-direction: column; }
    }
    .refsys-table tbody tr:hover {background: #262629;}
  /*referral*/

  