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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #e8e8ff;
  min-height: 100vh;
}
a {
    text-decoration: none;
}

.app-container {
  max-width: 480px;
  margin: 0 auto;
  background: #e8e8ff;
  min-height: 100vh;
  position: relative;
  padding-bottom: 90px;
}


.earned-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.earned-label {
  font-size: 13px;
  color: #666;
}

.earned-value {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.coin-badge {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.withdraw-btn {
  background: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.withdraw-btn1 {
  background: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%);
  color: white;
  border: none;
  padding: 18px 15px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  justify-content: center;
}

/* Main Blast Section - Bold Flat Bento Style */
.blast-card {
position: relative;
    background: #e7f0ff;
    margin: 12px;
    padding: 24px 18px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #1a1a1a;
    box-shadow: 1px 1px 0px #1a1a1a;
}

.ai-blast-label1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.ai-logo1 {
  filter: none;
}

/* Action Grid — the two wallet cards */
.action-grid1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.action-card2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #ffd166;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  padding: 16px 8px;
  text-decoration: none;
  box-shadow: 3px 3px 0px #1a1a1a;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.action-card2:nth-child(2) {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
}

.action-card2:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px 0px #1a1a1a;
}

.action-icon1 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
}

.action-label1 {
  font-size: 23px;
  font-weight: 900;
  color: #1a1a1a;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.ai-blast-label {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.blast-power-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.blast-amount {
  font-size: 42px;
  font-weight: bold;
  color: #1a1a1a;
  margin: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.ai-icon {
  width: 28px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffd166;
  font-size: 14px;
  font-weight: bold;
}

.daily-earn-text {
  font-size: 14px;
  color: #555;
  margin: 8px 0;
}

.daily-earn-text .amount {
  color: #1a7a4c;
  font-weight: 700;
}

/* Percentage pill — flat sticker badge */
.percentage-pill {
      display: inline-flex;
    align-items: center;
    gap: 13px;
    background: #a3e635;
    color: #000;
    padding: 9px 12px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 16.5px;
    margin-top: 6px;
    border: 1.5px solid #1a1a1a;
}

/* Settlement row — User ID display */
.settlement-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #1a1a1a !important;
  font-size: 13px;
  margin-top: 16px;
  padding: 9px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #1a1a1a;
  font-weight: 600 !important;
}

.settlement-row .copy-btn {
  /* color: #e85d75; */
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.settlement-row .copy-btn:hover {
  opacity: 0.65;
}

/* Action Buttons */
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.action-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.action-grid1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.action-card {
  background: white;
  border: none;
  padding: 18px 10px;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.action-card1 {
  background: white;
  border: none;
  padding: 18px 10px;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
  color: #0179ba;
}
.action-card2 {
  background: #8b9aa8de;
  border: none;
  padding: 18px 10px;
  border-radius: 15px;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
  color: #000;
  margin-top: 10px;
  font-weight: bold;
}

.action-card:active {
  transform: scale(0.95);
}

.action-card.primary {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  color: white;
}

.action-icon {
  font-size: 28px;
  margin-bottom: 6px;
  display: block;
}
.action-icon1 {
  font-size: 18px;
  margin-bottom: 6px;
  display: block;
}

.action-label {
  font-size: 11px;
  font-weight: 500;
  color: #333;
}
.action-label1 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.action-card.primary .action-label {
  color: white;
}

/* Action Buttons */
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 14px;
}
.action-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.action-grid1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.action-card {
position: relative;
    background: #e7f0ff;
    border: 1px solid #1a1a1a;
    padding: 16px 8px;
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    box-shadow: 1px 1px 0px #1a1a1a;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.action-card1 {
      background: white;
    border: none;
    padding: 18px 10px;
    border-radius: 15px;
    cursor: pointer;
    text-align: center;
    box-shadow: 1px 1px 0px rgb(0 0 0);
    transition: transform 0.2s;
    border: 1px solid #000000;
    color: #0179ba;
}

.action-card2 {
  background: #8b9aa8de;
  border: none;
  padding: 18px 10px;
  border-radius: 15px;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
  color: #000;
  margin-top: 10px;
  font-weight: bold;
}

.action-card:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px #1a1a1a;
}

.action-card.primary {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  border-color: #1a1a1a;
  color: #fff !important;
}

.action-icon {
  font-size: 24px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}

.action-card.primary .action-icon {
  color: #fff;
}

.action-icon1 {
  font-size: 18px;
  margin-bottom: 6px;
  display: block;
}

.action-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #1a1a1a;
}

.action-label1 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.action-card.primary .action-label {
  color: #fff;
}

#refreshBtn .action-icon i.bi-arrow-repeat {
  display: inline-block;
  transition: transform 0.4s ease;
}

#refreshBtn:active .action-icon i.bi-arrow-repeat {
  transform: rotate(180deg);
}

/* Video Banner */
.video-banner {
  position: relative;
  width: 100%;
  height: 200px; /* adjust height */
  overflow: hidden;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
}

.banner-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  /* height: 50%; */
  object-fit: cover;
  transform: translate(-50%, -50%);
  /* z-index: 1; */
  border-radius: 15px;
  padding: 15px;
}

.video-content {
  position: relative;
  /* z-index: 2; */
  text-align: center;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4); /* overlay for readability */
}

.video-title {
  font-size: 36px;
  font-weight: bold;
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.video-subtitle {
  font-size: 18px;
  margin-top: 5px;
}

/* Christmas Banner */
.christmas-banner {
  background: white;
  margin: 0 12px 12px;
  padding: 15px;
  border-radius: 15px;
  text-align: center;
}

.christmas-text {
  font-size: 16px;
  font-weight: bold;
  color: #dc2626;
  margin-bottom: 8px;
}

.return-text {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 15px;
  font-weight: 600;
}

/* BP Table */
.bp-table {
  background: white;
  margin: 0 12px 12px;
  border-radius: 15px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 14px 12px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  align-items: center;
}

.table-row:last-child {
  border-bottom: none;
}

.fire-emoji {
  color: #f97316;
  margin-left: 3px;
}

.strikethrough {
  text-decoration: line-through;
  color: #ef4444;
  font-size: 12px;
}

.return-percentage {
  color: #10b981;
  font-weight: 600;
}

/* Income Cards */
.income-grid {
     display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px 12px 12px;
    background: #000;
    border-radius: 15px;
    margin: 0 12px 12px;
    border-radius: 15px;
    text-align: center;
}

.income-card {
  position: relative;
  background: #ffffff;
  padding: 18px 10px;
  border-radius: 16px;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.2s ease;
}

.income-card:active {
  transform: scale(0.96);
}

.income-card.green {
  border-color: #34d399;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf9 100%);
}

.income-card.orange {
  border-color: #fb923c;
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
}

.income-card.blue {
  border-color: #60a5fa;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.income-card.purple {
  border-color: #c084fc;
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
}

.income-label {
  font-size: 11px;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #9ca3af;
}

.income-amount {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.income-card.green .income-amount {
  color: #10b981;
}

.income-card.orange .income-amount {
  color: #f97316;
}

.income-card.blue .income-amount {
  color: #3b82f6;
}

.income-card.purple .income-amount {
  color: #a855f7;
}

.dashboard-container {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/* Tab Navigation */
.tab-nav {
  display: flex;
  border-bottom: 2px solid #e5e5e7;
}

.tab-btn {
  flex: 1;
  padding: 16px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.tab-btn.active {
  color: #0179ba;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #0179ba;
}

.tab-content {
  padding: 20px;
}

/* Blast Power Styles */
.blast-status-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border: 1px solid #e5e5e7;
  border-radius: 12px;
  background: #fafafa;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.day-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #e5e5e7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-active {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.status-date {
  font-size: 13px;
  color: #999;
}

.status-right {
  text-align: right;
}

.status-profit {
  font-size: 24px;
  font-weight: 600;
  color: #00c853;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profit-icon {
  background: linear-gradient(135deg, #0179ba 0%, #9c27b0 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Trading Status Section */
/* Trading Status Styles */
.trading-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.trade-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.trade-item.hidden {
  display: none;
}

.trade-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trade-pair {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.trade-type {
  font-size: 13px;
  color: #999;
}

.trade-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profit-label {
  font-size: 13px;
  color: #999;
}

.profit-value {
  font-size: 20px;
  font-weight: 700;
  color: #00c853;
}

.view-more-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #e5e5e7;
  border-radius: 12px;
  background: white;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

.view-more-btn:hover {
  background: #f5f5f7;
  border-color: #0179ba;
  color: #0179ba;
}

.view-more-btn.hide {
  display: none;
}
/* Bottom Navigation */

.nav-icon-img {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-logo {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #24baff00 0%, #ec489900 100%),
    url(../images/favicon.png);
  background-size: cover, 20px 20px;
  background-position: center, center;
  background-repeat: no-repeat;
  border-radius: 6px;
}

.content-page {
  display: none;
}

.content-page.active {
  display: block;
}

/* Referral Section */
.referral-container {
  padding: 12px;
}

.page-title {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

.referral-card {
  background: white;
  padding: 20px;
  border-radius: 15px;
  /* margin-bottom: 12px; */
  margin: 12px;
}

.referral-title {
  color: #24baff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.referral-desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

.referral-link-box {
  background: #f9fafb;
  padding: 12px;
  border-radius: 10px;
  margin: 10px 0;
  word-break: break-all;
  font-size: 12px;
  color: #24baff;
}

.copy-button {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 25px;
  width: 100%;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background: #faf5ff;
  border-radius: 10px;
  margin-bottom: 10px;
}

.stats-label {
  font-size: 14px;
  color: #4b5563;
}

.stats-value {
  font-size: 14px;
  font-weight: bold;
  color: #24baff;
}

/* Task Section */
.task-header {
  text-align: center;
  padding: 20px 12px 10px;
}

.task-title {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
}

.task-subtitle {
  font-size: 13px;
  color: #24baff;
}

.task-container {
  padding: 0 12px 12px;
}

.task-item {
  background: white;
  padding: 18px;
  border-radius: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.task-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.task-icon-box.yellow {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.task-icon-box.purple {
  background: linear-gradient(135deg, #24baff 0%, #9333ea 100%);
}

.task-icon-box.pink {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.task-icon-box.orange {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

.task-info-text {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  margin-bottom: 4px;
}

.task-reward {
  font-size: 13px;
  color: #24baff;
  font-weight: 600;
}

.task-status {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.task-status.done {
  background: #10b981;
  color: white;
}

.task-status.pending {
  background: #fee2e2;
  color: #ef4444;
}

/* Intro Section */
.intro-container {
  padding: 20px;
}

.intro-card {
  background: white;
  padding: 30px 25px;
  border-radius: 20px;
  text-align: left;
  margin-bottom: 20px;
}

.intro-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.intro-title {
  color: #24baff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.intro-desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

/* Withdraw Section */
.withdraw-container {
  padding: 12px;
}

/* .content-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
} */

.page-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 20px;
  margin-top: 10px;
}

.withdraw-container {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Balance */
.balance-card {
  text-align: center;
  margin-bottom: 16px;
}

.balance-label {
  color: #666;
  font-size: 14px;
}

.balance-amount {
  font-size: 28px;
  font-weight: 700;
  margin-top: 6px;
}

/* Exchange Button */
.exchange-button {
  width: 100%;
  padding: 14px;
  border-radius: 30px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #6b21a8;
  background: linear-gradient(90deg, #f3e8ff, #e9d5ff);
  margin-bottom: 18px;
  cursor: pointer;
}

/* Limits */
.limit-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.limit-box {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #f9fafb;
}

.limit-label {
  font-size: 12px;
  color: #6b7280;
}

.limit-value {
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

/* Form */
.form-group {
  position: relative;
  margin-bottom: 16px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

.all-amount {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 13px;
  color: #6366f1;
  cursor: pointer;
}

.form-input {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  outline: none;
  font-size: 14px;
}

.form-input::placeholder {
  color: #9ca3af;
}

/* Wait Button */
.wait-button {
  width: 100%;
  padding: 14px;
  border-radius: 30px;
  border: none;
  background: linear-gradient(90deg, #e9d5ff, #fbcfe8);
  color: white;
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
}

/* Note */
.note-text {
  margin-top: 12px;
  font-size: 12px;
  color: red;
}
.note-text strong {
  font-weight: 600;
}
/* Overlay */
.bp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 99;
}

/* Modal */
.bp-modal {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 20px;
  transition: 0.4s ease;
  z-index: 100;
  max-width: 420px;
  margin: auto;
  right: 0;
}

/* Active */
.bp-overlay.active {
  opacity: 1;
  visibility: visible;
}

.bp-modal.active {
  bottom: 0;
}

/* Header */
.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bp-header h3 {
  font-size: 16px;
}

.close-btn {
  font-size: 22px;
  cursor: pointer;
}

/* Input */
.bp-input {
  margin-top: 16px;
  position: relative;
}

.bp-input input {
  width: 100%;
  padding: 14px 14px 14px 50px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

.ai-icon1 {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Total */
.bp-total {
  margin: 12px 0;
  font-size: 14px;
}

/* Estimate */
.estimate-title {
  margin-top: 12px;
  font-weight: 500;
}

.estimate-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.estimate-box {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}

.est-label {
  font-size: 12px;
  color: #6b7280;
}

.est-value {
  font-size: 15px;
  font-weight: 600;
}

/* Button */
.continue-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border-radius: 30px;
  border: none;
  background: linear-gradient(90deg, #96c9ff, #3ab5ff);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.refreshing {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.level-table-card {
  margin-top: 16px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
/* Modal - Warm Minimal Sheet */
.bp-modal {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  background: #fffdf9;
  border-radius: 28px 28px 0 0;
  padding: 20px 20px 28px;
  transition: bottom 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 100;
  max-width: 420px;
  margin: auto;
  right: 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1);
}

.bp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 10, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
}

.bp-overlay.active {
  opacity: 1;
  visibility: visible;
}

.bp-modal.active {
  bottom: 0;
}

/* Header */
.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed #eadfd0;
  margin-bottom: 4px;
}

.bp-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #3d2f1f;
}

.close-btn {
  font-size: 18px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fdf1e0;
  color: #0972b4;
  transition: background 0.2s ease;
}

.close-btn:hover {
  background: #fce4c4;
}

/* Input */
.bp-input {
  margin-top: 16px;
  position: relative;
}

.bp-input input {
  width: 100%;
  padding: 14px 14px 14px 50px;
  border-radius: 14px;
  border: 1.5px solid #b0d4f7;
  background: #f2f7ff;
  font-size: 15px;
  color: #1f2c3d;
  transition: border-color 0.2s ease;
}

.bp-input input:focus {
  outline: none;
  border-color: #d97706;
}

.bp-input select {
  width: 100%;
  outline: none;
  background: #f2f7ff;
  color: #1f353d;
  font-size: 15px;
  appearance: none;
  padding: 14px 14px 14px 50px;
  border-radius: 14px;
  border: 1.5px solid #b0d4f7;
  transition: border-color 0.2s ease;
}

.bp-input select:focus {
  outline: none;
  border-color: #d97706;
}

.ai-icon1 {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #068cd9;
  border-radius: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Total */
.bp-total {
  margin: 16px 0 4px;
  font-size: 13.5px;
  color: #607f8a;
  background: #f2f7ff;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #f2e6d3;
}

.bp-total strong {
  color: #1f313d;
  font-size: 16px;
}

/* Estimate */
.estimate-title {
  margin-top: 14px;
  font-weight: 600;
  font-size: 13px;
  color: #607f8a;
}

.estimate-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.estimate-box {
  flex: 1;
  border: 1px solid #f2e6d3;
  background: #f2f7ff;
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}

.est-label {
  font-size: 11px;
  color: #84a5b3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.est-value {
  font-size: 16px;
  font-weight: 800;
  color: #1f353d;
  margin-top: 4px;
}

/* Button */
.continue-btn {
  width: 100%;
  margin-top: 18px;
  padding: 15px;
  border-radius: 30px;
  border: none;
  /* background: #d97706; */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  /* box-shadow: 0 10px 22px rgba(217, 119, 6, 0.3); */
  transition: transform 0.15s ease, background 0.2s ease;
}

.continue-btn:hover {
  background: #097bb4;
}

.continue-btn:active {
  transform: scale(0.97);
}

.refreshing {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.level-table-card {
  margin-top: 16px;
  background: #fffdf9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

/* Payment screen */
.pay-title {
  color: #3d2f1f;
}

.qr-box canvas {
  border-radius: 16px;
  padding: 10px;
  background: #fff;
  border: 1px solid #f2e6d3;
}

#paymentStatusText {
  background: #f2f7ff !important;
  border-color: #f2e6d3 !important;
  color: #8a7460 !important;
}

.spin-animation {
  animation: spin 1.2s linear infinite;
}
/* Header */
.level-table-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  background: #f3f4f6;
}

/* Row */
.level-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  align-items: center;
}

.level-table-row:last-child {
  border-bottom: none;
}

/* Level Column */
.level-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-lock {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d1d5db;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.level-number {
  font-weight: 600;
}

/* Reward Color */
.reward {
  color: #24baff;
  font-weight: 600;
}
.history-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px solid #f0f1f5;
  margin-bottom: 8px;
}

.history-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1f2b;
}

.history-total {
  font-size: 13px;
  font-weight: 600;
  color: #0179ba;
  background: #e8f7ff;
  padding: 5px 12px;
  border-radius: 20px;
}

.history-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  padding-left: 22px;
  border: 1px solid #eef0f3;
  border-radius: 16px;
  background: #ffffff;
  gap: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.history-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #d1d5db;
  transition: background 0.2s ease;
}

.history-item:has(.history-status.completed)::before {
  background: linear-gradient(180deg, #34d399, #10b981);
}

.history-item:has(.history-status.active)::before {
  background: linear-gradient(180deg, #5cccff, #008bd2);
}

.history-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 139, 210, 0.1);
  border-color: #e5e7eb;
}

.history-item.hidden {
  display: none;
}

.history-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-date {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1f2b;
}

.history-status {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.history-status.completed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.history-status.active {
  background: rgba(92, 204, 255, 0.15);
  color: #008bd2;
}

.history-middle {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px dashed #eef0f3;
  border-bottom: 1px dashed #eef0f3;
}

.history-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #9ca3af;
}

.history-value {
  font-size: 16px;
  font-weight: 800;
  color: #1a1f2b;
  font-variant-numeric: tabular-nums;
}

.history-value.positive {
  color: #059669;
}

.history-value.positive::before {
  content: "+";
}

.history-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-duration {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 500;
}

.history-trades {
  font-size: 12px;
  font-weight: 700;
  color: #0179ba;
  background: #eaf8ff;
  padding: 5px 12px;
  border-radius: 8px;
}

.view-more-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 1.5px solid #5cccff;
  border-radius: 14px;
  background: white;
  font-size: 14.5px;
  font-weight: 700;
  color: #008bd2;
  cursor: pointer;
  transition: all 0.25s ease;
}

.view-more-btn:hover {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0, 139, 210, 0.3);
}

.view-more-btn:active {
  transform: scale(0.97);
}

.view-more-btn.hide {
  display: none;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}
.withdraw-history {
  margin-top: 20px;
}

.history-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1f2b;
  margin-bottom: 14px;
}

/* Card */
.withdraw-item {
  position: relative;
  display: flex;
  gap: 14px;
  background: #ffffff;
  padding: 16px;
  padding-left: 18px;
  border-radius: 18px;
  margin-bottom: 12px;
  border: 1px solid #f0f1f5;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.withdraw-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #5cccff, #008bd2);
}

.withdraw-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 139, 210, 0.1);
}

/* Amount */
.withdraw-amount {
  font-size: 21px;
  font-weight: 800;
  min-width: 80px;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.withdraw-amount.green {
  color: #059669;
}

.withdraw-amount.green::before {
  content: "-";
}

/* Info */
.withdraw-info {
  flex: 1;
  font-size: 13px;
  max-width: 100%;
  overflow: hidden;
}

.withdraw-text {
  font-size: 14px;
  font-weight: 600;
  color: #1a1f2b;
  margin-bottom: 6px;
}

.withdraw-hash {
  font-size: 12px;
  color: #9ca3af;
  word-break: break-all;
}

.withdraw-hash a {
  color: #008bd2;
  text-decoration: none;
  font-weight: 600;
}

.withdraw-hash a:hover {
  text-decoration: underline;
}

/* Meta */
.withdraw-meta {
  text-align: right;
  font-size: 11.5px;
  color: #9ca3af;
  font-weight: 500;
  white-space: nowrap;
}

.view-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  background: #e8f7ff;
  color: #008bd2;
  font-weight: 700;
  font-size: 11.5px;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 20px;
  transition: background 0.2s ease;
}

.view-link:hover {
  background: linear-gradient(135deg, #5cccff 0%, #008bd2 100%);
  color: white;
}

.hidden {
  display: none;
}

.text-ellipsis {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.withdraw-item {
  transition: all 0.3s ease;
}
/* Each team card */
.team-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 14px 16px 14px 18px;
  margin: 8px 15px;
  border-radius: 14px;
  border: 1px solid #f0f1f5;
  font-family: system-ui, sans-serif;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #5cccff, #008bd2);
}

.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 139, 210, 0.1);
  border-color: #e5e7eb;
}

/* Left section with name & ID */
.team-left {
  display: flex;
  flex-direction: column;
}

.team-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1f2b;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-id {
  font-size: 11.5px;
  color: #9ca3af;
  font-weight: 500;
  margin-top: 3px;
}

/* Right section with amount & status */
.team-right {
  text-align: right;
}

.team-amount {
  font-size: 15.5px;
  font-weight: 800;
  color: #008bd2;
  font-variant-numeric: tabular-nums;
}

.team-status {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #059669;
  margin-top: 4px;
}

.team-status::before {
  content: "●";
  margin-right: 4px;
  font-size: 8px;
}

/* Finished text */
.van-list__finished-text {
  text-align: center;
  padding: 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: #9ca3af;
  position: relative;
}

.van-list__finished-text::before,
.van-list__finished-text::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #e5e7eb;
  vertical-align: middle;
  margin: 0 10px;
}
/* Scrollable area */
.scroll-area {
  margin-bottom: 20px;
  height: 89vh;
  overflow-y: auto;
}
.income-card {
  font-size: clamp(1rem, 2.5vw, 2rem); /* adjusts font size based on screen */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-icons {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  justify-content: center;
}

.icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Brand colors */
.whatsapp {
  background: #25d366;
}
.facebook {
  background: #1877f2;
}
.twitter {
  background: #000;
}
.instagram {
  background: radial-gradient(circle at 30% 30%, #f58529, #dd2a7b, #8134af);
}
.profile-container {
  padding: 16px;
}

.profile-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  max-width: 420px;
  margin: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.profile-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.profile-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.profile-field label {
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}

.profile-field input,
.profile-field select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  /* width: 100%; */
  box-sizing: border-box;
}

.profile-field input:focus,
.profile-field select:focus {
  outline: none;
  border-color: #4caf50;
}

.mobile-row {
  display: flex;
  gap: 8px;
}

.mobile-code {
  width: 80px;
  background: #f5f5f5;
  text-align: center;
}

.mobile-number {
  flex: 1;
}

.profile-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #4caf50;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

.profile-btn:hover {
  background: #43a047;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-value {
  max-width: 100%; /* keep within parent width */
  word-wrap: break-word; /* break long words */
  overflow-wrap: break-word;
}

.text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* show max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Optional: scroll for very long messages */
.history-value.scrollable {
  max-height: 150px;
  overflow-y: auto;
  padding-right: 5px;
}
.ai-blast-label1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  justify-content: center;
}

.ai-logo1 {
  width: 134px;
  height: 79px;
  object-fit: contain;
}
.user-id-box {
  background: #1f2937; /* dark card */
  border-radius: 10px;
  padding: 14px;
  max-width: 350px;
  color: #fff;
  font-family: Arial, sans-serif;
}

.user-id-label {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.user-id-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111827;
  border-radius: 8px;
  padding: 10px 12px;
}

.user-id-content span {
  font-weight: 600;
  font-size: 15px;
  word-break: break-all;
}

.copy-btn {
  background: #22c55e;
  border: none;
  color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}

.copy-btn:hover {
  background: #16a34a;
}
/* PAGE BACKGROUND */
/* .content-page {
  background: #f2f4f8;
  min-height: 100vh;
  padding: 20px;
  font-family: Arial, sans-serif;
} */

/* CARD */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  max-width: 420px;
  margin: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* CARD HEADER */
.card-header {
  padding: 15px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.card-header h5 {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
}

/* ADD ADDRESS BUTTON */
.card-header .btn {
  border-radius: 6px;
  font-size: 14px;
  padding: 6px 14px;
}

/* CARD BODY */
.card-body {
  padding: 20px;
}

/* MODAL BACKDROP FIX */
.modal {
  border-radius: 14px;
  padding: 18px;
}

/* MODAL CONTENT */
.modal-content {
  /*border-radius: 10px;*/
  border: none;
  /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);*/
}

/* MODAL HEADER */
.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h5 {
  font-size: 16px;
  font-weight: 600;
}

.modal-header .close {
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

/* MODAL BODY */
.modal-body {
  padding: 20px;
}

/* FORM GROUP */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

/* INPUTS & SELECT */
.form-control {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.form-control:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* MODAL FOOTER */
.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* SAVE BUTTON */
.modal-footer .btn-success {
  background: #22c55e;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
}

/* CANCEL BUTTON */
.modal-footer .btn-danger {
  background: #ef4444;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
}
/*.modal-dialog {*/
/*  background: #fff;*/
/*  background: #fff;*/
/*  border-radius: 14px;*/
/*   padding: 18px; */
/*  max-width: 420px;*/
/*  margin: auto;*/
/*  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);*/
/*}*/

/* RESPONSIVE */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 15px;
  }
}
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#f5f5f8;
    padding:10px 15px;
    border-bottom:1px solid #22222233;
    width:100%;
    position:sticky;
    top:0;
    z-index:99;
    border-radius: 10px 0 22px 22px;
}

.earned-section{
    display:flex;
    align-items:center;
    gap:8px;
}

.earned-label{
    color:#666;
    font-size:16px;
    font-weight:600;
}

.coin-badge{
    width:24px;
    height:24px;
    background:#45b39d;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:15px;
}

.earned-value{
    color:#0aa37a;
    font-size:28px;
    font-weight:700;
    line-height:1;
}

.withdraw-btn{
    background:#f9a825;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:6px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:.3s;
}

.withdraw-btn:hover{
    background:#f39c12;
}

.support-section{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    color:#666;
}

.telegram-icon{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#2AABEE;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:16px;
}

@media(max-width:576px){

    .header{
        padding:8px 10px;
    }

    .earned-label{
        font-size:14px;
    }

    .earned-value{
        font-size:20px;
    }

    .withdraw-btn{
        padding:8px 12px;
        font-size:14px;
    }

    .support-section span{
        display:none;
    }
}

.tp-card{
   background: #ffffffb3;
    border-radius: 10px;
    padding: 18px;
    margin: 27px;
    text-align: center;
    box-shadow: 0 0px 3px rgb(134 134 134 / 29%);
}

.tp-title{
    font-size:32px;
    font-weight:700;
    color:#111;
}

.tp-refresh{
    color:#3bc0ff;
    font-size:20px;
}

.tp-balance{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:10px 0;
}

.tp-icon{
    width:58px;
    height:58px;
}

.tp-amount{
    font-size:48px;
    font-weight:800;
    color:#000;
    line-height:1;
}

.tp-income-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:10px;
    font-size:17px;
}

.earn-amount{
    color:#222;
    font-weight:700;
}

.earn-percent{
    color:#49bf00;
    font-weight:700;
}

.history-link{
    color: #cf5eff;
    cursor: pointer;
    font-weight: 600;
    padding: 10px;
    border: 1px Solid #321d3c54;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 1px 1px #ffbdff;
}

.tp-settlement{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:18px;
    background:#ece8ff;
    padding:8px 15px;
    border-radius:18px;
    font-size:15px;
    color:#4b3f72;
    font-weight:600;
}

.tp-action{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:10px;
}

.buy-tp-btn,
.refer-btn{
    width:48%;
    height:56px;
    border:none;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:19px;
    font-weight:700;
    cursor:pointer;
}

.buy-tp-btn{
    background:#8bd700;
    color:#fff;
}

.buy-tp-btn img{
    width:26px;
    height:26px;
}

.refer-btn{
    background:#ddd8ff;
    color:#333;
}

.refer-circle{
    width:34px;
    height:34px;
    background:#ff3d62;
    color:#fff;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:11px;
    line-height:1;
}

.refer-circle small{
    font-size:7px;
    margin-top:1px;
}

@media(max-width:480px){

.tp-title{
    font-size:18px;
}

.tp-amount{
    font-size:24px;
}

.tp-income-row{
    font-size:14px;
}

.buy-tp-btn,
.refer-btn{
    height:42px;
    font-size:11px;
}

.buy-tp-btn img{
    width:22px;
}

.refer-circle{
    width:28px;
    height:28px;
    font-size:9px;
}

.tp-settlement{
    font-size:13px;
    padding:7px 12px;
}

}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin-animation {
  animation: spin 0.8s linear infinite;
}
.roi-card{

    position:relative;
    background:#fff;
    border-radius:28px;
    padding:18px 12px 20px;
    margin:15px 12px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.roi-title{

    text-align:center;
    color:#4d4bc8;
    font-size:18px;
    font-weight:700;
    margin-bottom:18px;

}

.roi-table{

    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;

}

.roi-table th{

    color:#888;
    font-size:16px;
    font-weight:600;
    padding-bottom:6px;

}

.roi-table th:first-child{

    text-align:left;
    padding-left:25px;

}

.roi-table th:last-child{

    text-align:right;
    padding-right:25px;

}

.roi-table td{

    background:#f5f5f5;
    padding:8px 25px;
    font-size:17px;
    color:#7d63e7;
    font-weight:600;

}

.roi-table td:first-child{

    border-radius:10px 0 0 10px;

}

.roi-table td:last-child{

    border-radius:0 10px 10px 0;
    text-align:right;

}

.green{

    /* color:#7cc300 !important; */
    font-weight:700;

}

.fire{

    font-size:18px;

}

.hot-ribbon{

   position: absolute;
    top: 17px;
    right: -33px;
    width: 120px;
    text-align: center;
    background: #ff6700;
    color: #fff;
    transform: rotate(45deg);
    padding: 5px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);

}

@media(max-width:480px){

.roi-card{

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

}

.roi-title{

    font-size:16px;

}

.roi-table th{

    font-size:14px;

}

.roi-table td{

    font-size:15px;
    padding:7px 18px;

}

.hot-ribbon{

    width:100px;
    right:-32px;
    font-size:11px;

}

}
.promo-banner{
    width:100%;
    background:#313c23;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px;
    min-height:64px;
    overflow:hidden;
}

.promo-left img{
    width:72px;
    display:block;
}

.promo-center{
    flex:1;
    margin-left:10px;
    color:#fff;
    font-size:20px;
    font-weight:700;
    letter-spacing:.3px;
}

.promo-center span{
    color:#39d070;
    font-weight:800;
}

.promo-btn{
    border:none;
    outline:none;
    cursor:pointer;
    padding:8px 20px;
    border-radius:20px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;

    background:linear-gradient(to bottom,#4aa7ff,#236fd8);

    box-shadow:
    inset 0 2px 2px rgba(255,255,255,.35),
    0 3px 0 rgba(0,0,0,.18);

    transition:.25s;
}

.promo-btn:hover{
    transform:translateY(-1px);
}

.promo-btn:active{
    transform:translateY(1px);
}

@media(max-width:480px){

.promo-banner{
    padding:8px 10px;
    min-height:58px;
}

.promo-left img{
    width:58px;
}

.promo-center{
    font-size:15px;
    margin-left:8px;
}

.promo-btn{
    padding:6px 15px;
    font-size:10px;
}

}
/*==========================
    TRADING DASHBOARD
==========================*/

.trading-dashboard{
    background:#fff;
    margin:15px 12px;
    border-radius:10px;
    padding: 10px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/*==========================
        TABS
==========================*/

.trade-tabs{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #ececec;
}

.trade-tab{
    width:50%;
    background:none;
    border:none;
    padding:18px 10px;
    font-size:16px;
    font-weight:600;
    color:#555;
    cursor:pointer;
    position:relative;
    transition:.3s;
}

.trade-tab.active{
    color:#7b68ee;
}

.trade-tab.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:2px;
    background:#7b68ee;
}

/*==========================
      CONTENT
==========================*/

.trade-content{
    display:none;
}

.trade-content.active{
    display:block;
}

/*==========================
      TRADING ITEM
==========================*/

.trade-item{
    padding:18px;
    border-bottom:1px solid #ececec;
}

.trade-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.pair{
    font-size:15px;
    font-weight:700;
    color:#333;
    margin-bottom:12px;
}

.badge{
    display: inline-block;
    background: #f4e5ff7d;
    color: #888;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    margin-left: 6px;
    border: 1px solid #c881ff5c;
}

.leverage{
    min-width:36px;
    text-align:center;
}

.price-row{
    display:flex;
    gap:28px;
}

.price-row small{
    display:block;
    color:#888;
    font-size:11px;
    margin-bottom:3px;
}

.price-row strong{
    font-size:15px;
    color:#333;
}

.trade-right{
    text-align:right;
}

.trade-right small{
    color:#777;
    font-size:11px;
    line-height:18px;
}

.profit{
    color:#2ebf61;
    font-size:18px;
    font-weight:700;
    margin-top:15px;
}

/*==========================
      VIEW MORE
==========================*/

.view-more-btn{
    display:block;
    margin:25px auto;
    width:170px;
    height:50px;
    border:1px solid #ccc;
    border-radius:30px;
    background:#fff;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.view-more-btn:hover{
    background:#7b68ee;
    color:#fff;
    border-color:#7b68ee;
}

/*==========================
      POWER TAB
==========================*/

.power-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 22px;
}

.circle{
    width:62px;
    height:62px;
    border-radius:50%;
    background:#f5f5f5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:inset 0 0 0 6px #fafafa;
}

.circle strong{
    font-size:22px;
    color:#444;
    line-height:18px;
}

.circle span{
    font-size:11px;
    color:#888;
}

.power-details{
    flex:1;
    margin-left:18px;
}

.power-details h3{
    margin:0;
    font-size:20px;
    font-weight:500;
    color:#333;
}

.power-details span{
    color:#888;
    font-size:14px;
}

.power-value{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:22px;
    color:#73c600;
    font-weight:700;
}

.power-value img{
    width:22px;
}

/*==========================
      MOBILE
==========================*/

@media(max-width:480px){

.trade-tab{
    font-size:14px;
    padding:15px 5px;
}

.trade-item{
    padding:15px;
}

.pair{
    font-size:13px;
}

.price-row{
    gap:18px;
}

.price-row strong{
    font-size:13px;
}

.trade-right small{
    font-size:10px;
}

.profit{
    font-size:15px;
}

.view-more-btn{
    width:50%;
    height:42px;
    font-size:15px;
}

.circle{
    width:52px;
    height:52px;
}

.circle strong{
    font-size:18px;
}

.power-details h3{
    font-size:16px;
}

.power-details span{
    font-size:12px;
}

.power-value{
    font-size:24px;
}

.power-value img{
    width:18px;
}

}
.circle-progress {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.circle-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: rgba(139, 92, 246, 0.15);
  stroke-width: 8;
}

.circle-fill {
  fill: none;
  stroke: #5cccff;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 282.6;
  stroke-dashoffset: 282.6;
  transition: stroke-dashoffset 0.6s ease;
}

.circle-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.circle-text strong {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.circle-text span {
  font-size: 11px;
  color: #9ca3af;
}

.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:10px;
    width:100%;
    margin:auto;

    height:78px;
    background:#fff;

    border-radius:40px;

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

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

    overflow:hidden;

    z-index:99;
    max-width: 480px;
}

.nav-item{

    flex:1;

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

    cursor:pointer;

    position:relative;

}

.nav-item:not(:last-child){

    border-right:1px solid #ececec;

}

.nav-icon{

    width:25px;
    height:25px;

    border-radius:50%;

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

    margin-bottom:8px;

}

.home-icon img{

    width:22px;
    height:22px;

}

.friend-icon{

    background:#39a9e8;
    color:#fff;
    font-size:16px;

}

.intro-icon{

    background:#6dbc21;
    color:#fff;
    font-size:17px;

}

.nav-item span{

    font-size:14px;
    font-weight:600;
    color: #7b0088;

}

.nav-item.active span{

    color: #7b0088;

}

@media(max-width:480px){

.bottom-nav{

    width:96%;
    height:72px;
    bottom:8px;

}

.nav-icon{

    width:28px;
    height:28px;
    margin-bottom:6px;

}

.nav-item span{

    font-size:12px;

}

.friend-icon,
.intro-icon{

    font-size:15px;

}

.home-icon img{

    width:20px;

}

}

.weekend-page-header {
  padding: 16px 20px;
}
.weekend-back {
  font-size: 22px;
  color: #d1d5db;
  cursor: pointer;
}

.weekend-hero {
  text-align: center;
  padding: 0 20px 20px;
}
.weekend-hero-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  margin-bottom: 10px;
}
.weekend-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}
.weekend-title .up-arrow {
  color: #4cd964;
}

.weekend-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 30px;
  padding: 6px 16px 6px 6px;
}
.ribbon-tag {
  background: linear-gradient(135deg, #ff3b6b, #ff1a4d);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 20px;
  text-align: center;
}
.ribbon-text {
  font-size: 13px;
  color: #d1d5db;
  font-weight: 600;
}

.weekend-body {
  padding: 10px 20px 40px;
}

.weekend-input-group {
  margin-bottom: 18px;
}
.weekend-input-group label {
  display: block;
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 8px;
}

.weekend-input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 30px;
  padding: 14px 20px;
}
.weekend-dollar {
  color: #9ca3af;
  font-weight: 600;
}
.weekend-input-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.weekend-refresh-icon {
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.weekend-receive-box {
  background: #262626;
  border-radius: 30px;
  padding: 14px 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.weekend-invest-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(90deg, #2f8dff, #1a73e8);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}

.weekend-rules {
  margin-top: 30px;
}
.weekend-rules h3 {
  font-size: 15px;
  color: #fff;
  margin: 20px 0 10px;
}
.weekend-rules ol {
  padding-left: 18px;
  margin: 0;
}
.weekend-rules li {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.7;
  margin-bottom: 8px;
}
.weekend-rules li strong {
  color: #d1d5db;
}

.tp-amount-input {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.tp-input-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.tp-amount-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #1f2937;
}

.tp-total-line {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 20px;
}
.tp-total-line strong {
  color: #1f2937;
  font-size: 17px;
}

.tp-estimate-label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}

.tp-estimate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.tp-estimate-box {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
}
.tp-estimate-label-sm {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
}
.tp-estimate-box strong {
  font-size: 16px;
  color: #1f2937;
}

.tp-continue-btn {
  background: linear-gradient(135deg, #8bc34a, #7cb342);
  border: none;
  border-radius: 30px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  width: 100%;
}

  .buytp-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:1050;
  }
  .buytp-overlay.active { opacity:1; visibility:visible; }

  .buytp-modal {
    position:fixed; left:50%; bottom:0; transform:translate(-50%, 100%);
    width:100%; max-width:460px; max-height:92vh; overflow-y:auto;
    background:#fff; border-radius:22px 22px 0 0;
    box-shadow:0 -10px 40px rgba(0,0,0,.35);
    transition:transform .3s cubic-bezier(.32,.72,.35,1); z-index:1051;
  }
  .buytp-modal.active { transform:translate(-50%, 0); }

  .buytp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 22px; background:#F5F3FF; border-bottom:1px solid #ECE9FB;
    position:sticky; top:0; border-radius:22px 22px 0 0;
  }
  .buytp-header-title { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:800; color:#1f1f2e; }
  .buytp-header-title img { width:26px; height:26px; border-radius:6px; }
  .buytp-close { font-size:22px; line-height:1; color:#6b7280; cursor:pointer; background:none; border:none; padding:4px; }

  .buytp-body { padding:20px 22px 26px; }

  .buytp-back {
    display:inline-flex; align-items:center; gap:6px; color:#7C5CFC; font-weight:700;
    font-size:14px; cursor:pointer; margin-bottom:16px; background:none; border:none; padding:0;
  }

  .buytp-choose-text { font-size:14.5px; color:#374151; margin:0 0 14px; }

  .buytp-info-box {
    background:#EEF1FF; border:1px solid #E3E7FC; color:#3C4A8C;
    font-size:13.5px; line-height:1.55; border-radius:14px; padding:14px 16px; margin-bottom:16px;
  }

  .buytp-wallet-row {
    display:flex; align-items:center; justify-content:space-between;
    background:#F2EEFF; border-radius:14px; padding:16px 18px; margin-bottom:10px;
  }
  .buytp-wallet-row .label { color:#7C5CFC; font-weight:700; font-size:14.5px; }
  .buytp-wallet-row .value { color:#1f1f2e; font-weight:800; font-size:15px; }

  .buytp-deposit-history { text-align:right; margin-bottom:16px; }
  .buytp-deposit-history a { color:#7C5CFC; font-size:13.5px; text-decoration:underline; cursor:pointer; }

  .buytp-option-card {
    border-radius:10px; padding:18px; margin-bottom:14px;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
  }
  .buytp-option-card.deposit { background:#F5F3FF; border:2px solid #E4DBFF; }
  .buytp-option-card.deposit:hover { background:#F5F3FF; border:2px solid #926ffb; }
  .buytp-option-card.invest { background:#EAFBF3; border:2px solid #CDF3E2; }
  .buytp-option-card.invest:hover { background:#EAFBF3; border:2px solid #00d12d; }

  .buytp-option-text h4 { margin:0 0 6px; font-size:15.5px; font-weight:800; color:#1f1f2e; }
  .buytp-option-text p { margin:0 0 8px; font-size:13px; color:#6b7280; line-height:1.4; }
  .buytp-option-text .note { font-size:12.5px; font-weight:700; }
  .buytp-option-text .note.purple { color:#7C5CFC; }
  .buytp-option-text .note.green { color:#059669; }

  .buytp-option-btn {
    flex-shrink:0; border:none; border-radius:26px; padding:10px 14px; font-size:13.5px; font-weight:800;
    color:#fff; cursor:pointer; white-space:nowrap;
  }
  .buytp-option-btn.deposit-btn { background:linear-gradient(135deg,#8B6CFF,#6C3CF0); }
  .buytp-option-btn.invest-btn { background:linear-gradient(135deg,#10B981,#059669); }

  .buytp-cancel-btn {
    width:100%; padding:14px; border-radius:14px; border:1.5px solid #C9BBFF;
    background:#fff; color:#1f1f2e; font-weight:700; font-size:14.5px; cursor:pointer; margin-top:4px;
  }

  .buytp-field-label { font-size:13.5px; font-weight:700; color:#374151; margin-bottom:8px; display:block; }
  .buytp-amount-input {
    width:100%; padding:14px 16px; border:1.5px solid #DCD3FF; border-radius:14px;
    font-size:15px; color:#1f1f2e; margin-bottom:8px; outline:none;
  }
  .buytp-amount-input:focus { border-color:#7C5CFC; }
  .buytp-hint { font-size:12.5px; color:#6b7280; margin:0 0 16px; }

  .buytp-quick-label { font-size:13px; color:#6b7280; margin-bottom:10px; display:block; }
  .buytp-quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:22px; }
  .buytp-quick-btn {
    padding:11px 4px; border-radius:12px; border:1.5px solid #ECE9FB; background:#FAF9FF;
    font-size:13.5px; font-weight:700; color:#1f1f2e; cursor:pointer;
  }
  .buytp-quick-btn.active, .buytp-quick-btn:hover { border-color:#7C5CFC; background:#F2EEFF; }

  .buytp-primary-btn {
    width:100%; padding:15px; border:none; border-radius:14px; font-size:15px; font-weight:800;
    color:#fff; cursor:pointer; margin-bottom:10px; transition:opacity .2s;
  }
  .buytp-primary-btn.disabled { opacity:.55; cursor:not-allowed; }
  .buytp-primary-btn.deposit-primary { background:linear-gradient(135deg,#8B6CFF,#6C3CF0); }
  .buytp-primary-btn.invest-primary { background:linear-gradient(135deg,#10B981,#059669); }

  .buytp-secondary-btn {
    width:100%; padding:14px; border-radius:14px; border:1.5px solid #ECE9FB;
    background:#FAF9FF; color:#1f1f2e; font-weight:700; font-size:14.5px; cursor:pointer; margin-bottom:10px;
  }
  .buytp-ghost-btn {
    width:100%; padding:14px; border-radius:14px; border:1.5px solid #C9BBFF;
    background:#fff; color:#1f1f2e; font-weight:700; font-size:14.5px; cursor:pointer;
  }

  .buytp-step { display:none; }
  .buytp-step.active { display:block; }

  /* =========================================================
   WITHDRAW PAGE v2 — add to assets/css/styles.css
   Scoped with "wd2-" prefix so nothing else on the site is affected.
   ========================================================= */

#page-withdraw.wd2-page {
  background: #f6ecfb;
  min-height: 100%;
  padding: 24px 16px 40px;
  text-align: center;
}

/* Available balance pill */
.wd2-balance-pill {
  display: inline-block;
  margin: 0 auto 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #ece0fb;
  color: #6d28d9;
  font-weight: 700;
  font-size: 14px;
}

.wd2-balance-amount {
  font-size: 44px;
  font-weight: 800;
  color: #1f1233;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.wd2-sub-text {
  font-size: 13px;
  color: #8b83a1;
  margin-bottom: 2px;
}

/* Exchange to TP button */
.wd2-exchange-btn {
  width: 100%;
  max-width: 420px;
  margin: 22px auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #5cccff 0%, #2f9bff 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(47, 155, 255, 0.35);
  cursor: pointer;
}

.wd2-exchange-btn i {
  font-size: 18px;
}

.wd2-exchange-min {
  font-weight: 500;
  opacity: 0.9;
  font-size: 14px;
}

/* Form card */
.wd2-card {
  max-width: 420px;
  margin: 0 auto 20px;
  background: #fff;
  border-radius: 22px;
  padding: 22px 20px 26px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(31, 18, 51, 0.06);
}

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

.wd2-label {
  font-size: 15px;
  font-weight: 700;
  color: #1f1233;
}

.wd2-all-amount {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
  cursor: pointer;
}

.wd2-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e6e2ee;
  border-radius: 14px;
  padding: 16px 16px;
  font-size: 15px;
  outline: none;
  background: #fff;
  color: #1f1233;
}

.wd2-input::placeholder {
  color: #b3aec3;
  font-weight: 600;
  text-align: center;
}

.wd2-input-amount {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 22px;
}

.wd2-input-addr {
  margin-bottom: 4px;
}

.wd2-input-addr:focus {
  border-color: #3b82f6;
}

.wd2-addr-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1f1233;
  margin-bottom: 6px;
}

.wd2-addr-desc {
  font-size: 12.5px;
  color: #8b83a1;
  margin: 0 0 12px;
  line-height: 1.5;
}

.wd2-info-box {
  background: #eaf3ff;
  color: #2f6fd6;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.wd2-continue-btn {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: #6fd658;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: not-allowed;
  transition: background 0.2s ease;
}

/* Toggle this class via JS once amount + address are valid */
.wd2-continue-btn.wd2-active {
  background: linear-gradient(135deg, #5cccff 0%, #2f9bff 100%);
  cursor: pointer;
}

/* Withdrawal History card */
.wd2-history-card {
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  padding: 22px 20px 26px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(31, 18, 51, 0.06);
}

.wd2-history-title {
  font-size: 20px;
  font-weight: 800;
  color: #1f1233;
  margin: 0 0 16px;
}

.wd2-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.wd2-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
}

.wd2-stat-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.wd2-stat-value {
  font-size: 20px;
  font-weight: 800;
}

.wd2-stat-total {
  background: #f1eefa;
}
.wd2-stat-total .wd2-stat-label { color: #8b7fc7; }
.wd2-stat-total .wd2-stat-value { color: #1f1233; }

.wd2-stat-completed {
  background: #e7f9ef;
}
.wd2-stat-completed .wd2-stat-label { color: #1f9d55; }
.wd2-stat-completed .wd2-stat-value { color: #16793f; }

.wd2-stat-progress {
  background: #fff6df;
}
.wd2-stat-progress .wd2-stat-label { color: #c58a1a; }
.wd2-stat-progress .wd2-stat-value { color: #8a5c0e; }

/* Empty state */
.wd2-empty-state {
  position: relative;
  margin-top: 6px;
  padding: 24px 16px;
  border: 1.5px dashed #e6e2ee;
  border-radius: 16px;
  text-align: center;
}

.wd2-empty-state::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: #b39ddb;
}

.wd2-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f1233;
  margin-bottom: 4px;
}

.wd2-empty-sub {
  font-size: 12.5px;
  color: #a39cb3;
}
/* =========================================================
   WITHDRAWAL HISTORY — extra field styling
   (order ID, tx hash, inline icons)
   Append to assets/css/styles.css after withdraw-history.css
   ========================================================= */

.wd2-hist-address,
.wd2-hist-order,
.wd2-hist-date,
.wd2-hist-hash-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #8b83a1;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd2-hist-address i,
.wd2-hist-order i,
.wd2-hist-date i,
.wd2-hist-hash-row i {
  font-size: 12px;
  color: #b3aec3;
  flex: 0 0 auto;
}

.wd2-hist-hash-link {
  color: #2f9bff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wd2-hist-hash-link:hover {
  text-decoration: underline;
}

.wd2-hist-hash-pending {
  color: #b9860f;
  font-weight: 600;
}

/* Tighten spacing a bit on very small screens */
@media (max-width: 380px) {
  .wd2-hist-address,
  .wd2-hist-order,
  .wd2-hist-date,
  .wd2-hist-hash-row {
    font-size: 11px;
  }
}

/* =========================================================
   WITHDRAWAL HISTORY v2 — ATTRACTIVE + FULLY RESPONSIVE
   Add this to assets/css/styles.css (after withdraw-page.css)
   Scoped with "wd2-" prefix, does not touch anything else.
   ========================================================= */

/* ---------- Card wrapper ---------- */
.wd2-history-card {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  padding: 22px 18px 24px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(31, 18, 51, 0.06);
  box-sizing: border-box;
}

.wd2-history-title {
  font-size: 19px;
  font-weight: 800;
  color: #1f1233;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wd2-history-title::before {
  content: "\f1da"; /* bootstrap-icons clock-history glyph fallback, harmless if unsupported */
  font-family: "bootstrap-icons";
  font-size: 16px;
  color: #8b5cf6;
}

/* ---------- Stat cards ---------- */
.wd2-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.wd2-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.15s ease;
}

.wd2-stat:active {
  transform: scale(0.97);
}

.wd2-stat-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.85;
}

.wd2-stat-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

.wd2-stat-total {
  background: linear-gradient(135deg, #ede7fb, #f4effc);
}
.wd2-stat-total .wd2-stat-label { color: #7c5cd6; }
.wd2-stat-total .wd2-stat-value { color: #4c3894; }

.wd2-stat-completed {
  background: linear-gradient(135deg, #e2f9ec, #eefdf4);
}
.wd2-stat-completed .wd2-stat-label { color: #1f9d55; }
.wd2-stat-completed .wd2-stat-value { color: #147a41; }

.wd2-stat-progress {
  background: linear-gradient(135deg, #fff3d6, #fff9e9);
}
.wd2-stat-progress .wd2-stat-label { color: #b9860f; }
.wd2-stat-progress .wd2-stat-value { color: #8a5c0e; }

/* ---------- History list ---------- */
#withdrawHistoryContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wd2-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #fbfaff;
  border: 1px solid #f0edf8;
  transition: background 0.15s ease, transform 0.15s ease;
}

.wd2-history-item:hover {
  background: #f5f2ff;
  transform: translateY(-1px);
}

.wd2-hist-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, #5cccff, #2f9bff);
  color: #fff;
}

.wd2-hist-main {
  flex: 1 1 auto;
  min-width: 0; /* allow text truncation */
}

.wd2-hist-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wd2-hist-amount {
  font-size: 15.5px;
  font-weight: 800;
  color: #1f1233;
  white-space: nowrap;
}

.wd2-hist-status {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.wd2-hist-status.completed { background: #e2f9ec; color: #16793f; }
.wd2-hist-status.pending    { background: #fff3d6; color: #a5730d; }
.wd2-hist-status.processing { background: #e6f0ff; color: #2457c9; }
.wd2-hist-status.rejected   { background: #fde7e7; color: #c92a2a; }

.wd2-hist-address {
  font-size: 12.5px;
  color: #8b83a1;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.wd2-hist-date {
  font-size: 11.5px;
  color: #b3aec3;
  margin-top: 2px;
}

/* ---------- Empty state ---------- */
.wd2-empty-state {
  position: relative;
  margin-top: 4px;
  padding: 28px 16px;
  border: 1.5px dashed #e6e2ee;
  border-radius: 16px;
  text-align: center;
}

.wd2-empty-state::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: #b39ddb;
}

.wd2-empty-icon {
  font-size: 28px;
  color: #c9c2dd;
  margin-bottom: 8px;
}

.wd2-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f1233;
  margin-bottom: 4px;
}

.wd2-empty-sub {
  font-size: 12.5px;
  color: #a39cb3;
}

/* ---------- View more button ---------- */
.wd2-history-card .view-more-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 1.5px solid #e6e2ee;
  border-radius: 14px;
  background: #fff;
  color: #6d28d9;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.wd2-history-card .view-more-btn:hover {
  background: #f5f2ff;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Small phones */
@media (max-width: 380px) {
  .wd2-history-card {
    padding: 18px 14px 20px;
    border-radius: 18px;
  }

  .wd2-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .wd2-stat {
    padding: 10px 8px;
    border-radius: 12px;
  }

  .wd2-stat-label {
    font-size: 9px;
  }

  .wd2-stat-value {
    font-size: 15px;
  }

  .wd2-hist-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .wd2-hist-amount {
    font-size: 14px;
  }

  .wd2-hist-status {
    font-size: 9.5px;
    padding: 3px 8px;
  }
}

/* Tablets */
@media (min-width: 600px) {
  .wd2-history-card {
    max-width: 560px;
    padding: 26px 26px 28px;
  }

  .wd2-stat-value {
    font-size: 20px;
  }

  .wd2-history-item {
    padding: 16px 18px;
  }
}

/* Desktop / wide screens */
@media (min-width: 900px) {
  .wd2-history-card {
    max-width: 640px;
  }

  .wd2-stats-grid {
    gap: 14px;
  }

  .wd2-stat {
    padding: 18px 16px;
  }

  .wd2-stat-value {
    font-size: 22px;
  }

  .wd2-history-item:hover {
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.08);
  }
}
/* =========================================================
   EXCHANGE TO TP MODAL — add to assets/css/styles.css
   Scoped with "extp-" prefix, follows the same pattern as
   your existing .buytp-overlay / .buytp-modal.
   ========================================================= */

.extp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 30, 0.45);
  z-index: 1200;
}

.extp-overlay.active {
  display: block;
}

.extp-modal {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 26px 26px 0 0;
  z-index: 1201;
  box-shadow: 0 -12px 40px rgba(31, 18, 51, 0.18);
  box-sizing: border-box;
}

.extp-modal.active {
  display: block;
  animation: extpSlideUp 0.25s ease;
}

@keyframes extpSlideUp {
  from { transform: translateX(-50%) translateY(30px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* Desktop: center it like a normal dialog instead of a bottom sheet */
@media (min-width: 640px) {
  .extp-modal {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 26px;
    max-height: 85vh;
  }
  .extp-modal.active {
    animation: extpFadeIn 0.2s ease;
  }
  @keyframes extpFadeIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
}

.extp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 16px;
}

.extp-title {
  font-size: 21px;
  font-weight: 800;
  color: #1f1233;
}

.extp-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #f1eefa;
  color: #6b6480;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.extp-close:hover {
  background: #e6e2ee;
}

.extp-divider {
  height: 1px;
  background: #f0edf8;
  margin: 0;
}

.extp-body {
  padding: 20px 22px 6px;
}

.extp-balance-box {
  background: linear-gradient(135deg, #f5eefc, #eef2fd);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.extp-balance-label {
  font-size: 13px;
  color: #8b83a1;
  margin-bottom: 6px;
}

.extp-balance-value {
  font-size: 26px;
  font-weight: 800;
  color: #1f1233;
}

.extp-info-box {
  background: #eaf3ff;
  color: #3b6fc9;
  font-size: 13px;
  line-height: 1.55;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 22px;
}

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

.extp-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #1f1233;
}

.extp-all-amount {
  font-size: 13.5px;
  font-weight: 700;
  color: #a8a2b8;
  cursor: pointer;
}

.extp-all-amount:hover {
  color: #6d28d9;
}

.extp-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #e6e2ee;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.extp-input-wrap:focus-within {
  border-color: #3b82f6;
}

.extp-dollar {
  font-size: 16px;
  font-weight: 700;
  color: #b3aec3;
}

.extp-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 700;
  color: #1f1233;
  background: transparent;
}

.extp-input::placeholder {
  color: #b3aec3;
  font-weight: 600;
}

.extp-footer {
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px));
}

.extp-confirm-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: #e4e1ec;
  color: #a39cb3;
  font-size: 15.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: not-allowed;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.extp-confirm-btn.active {
  background: linear-gradient(135deg, #5cccff, #2f9bff);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(47, 155, 255, 0.3);
}

/* =========================================================
   BOTTOM NAV v2 — add to assets/css/styles.css
   Scoped with "bn2-" prefix; reuses your existing
   .bottom-nav / .nav-item positioning, just restyles contents.
   ========================================================= */

.bottom-nav.bn2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  background: #fff;
  border-radius: 40px;
  padding: 14px 10px 10px;
  box-shadow: 0 -8px 24px rgba(31, 18, 51, 0.06);
  border: 1px solid #c797f17a;
}

.bn2-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
}

.bn2-item span {
  font-size: 11.5px;
  font-weight: 600;
  color: #8b83a1;
  white-space: nowrap;
}

.bn2-item.active span {
  color: #6d28d9;
  font-weight: 800;
  
}

.bn2-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: transform 0.15s ease;
}

.bn2-item:active .bn2-icon {
  transform: scale(0.92);
}

.bn2-icon-purple {
  background: #ede7fb;
  padding:12px;
  color: #7c5cd6;

}

.bn2-icon-blue {
  background: #e5f0ff;
  color: #3b82f6;
}

.bn2-icon-green {
  background: #e2f9ec;
  color: #1f9d55;
}

/* Inactive default for the "orange" slot (only truly orange when active) */
.bn2-icon-orange {
  background: #fff3d6;
  color: #d9930c;
}

.bn2-item.active .bn2-icon-orange {
  background: linear-gradient(135deg, #ffb703, #fb8c00);
  color: #fff;
  box-shadow: 0 8px 18px rgba(251, 140, 0, 0.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 360px) {
  .bn2-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  .bn2-item span {
    font-size: 10.5px;
  }
}

@media (min-width: 600px) {
  .bottom-nav.bn2 {
    max-width: 480px;
    margin: 0 auto;
  }
  .bn2-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/* =========================================================
   RANKS PAGE — add to assets/css/styles.css
   Scoped with "rk-" prefix.
   ========================================================= */

.rk-page {
  background: #f6f4fc;
  min-height: 100%;
  padding: 16px 14px 40px;
  box-sizing: border-box;
}

/* ---------- Hero ---------- */
.rk-hero {
  max-width: 480px;
  margin: 0 auto 16px;
  padding: 24px 20px 22px;
  border-radius: 22px;
  background: linear-gradient(136deg, #30007e 0%, #7252a2 55%, #230056 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(76, 29, 149, 0.28);
}

.rk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.14);
  color: #fcd34d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.rk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fcd34d;
}

.rk-hero-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
}

.rk-hero-sub {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
}

.rk-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rk-hero-stat {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 14px 16px;
}

.rk-hero-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}

.rk-hero-stat-value {
  font-size: 20px;
  font-weight: 800;
}

.rk-hero-stat-note {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
}

/* ---------- Generic card ---------- */
.rk-card {
  max-width: 480px;
  margin: 0 auto 16px;
  background: #fff;
  border-radius: 20px;
  padding: 20px 18px 22px;
  box-shadow: 0 8px 22px rgba(31, 18, 51, 0.05);
  box-sizing: border-box;
}

/* ---------- Next rank ---------- */
.rk-next-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.rk-next-title {
  font-size: 17px;
  font-weight: 800;
  color: #1f1233;
  margin-bottom: 4px;
}

.rk-next-sub {
  font-size: 12.5px;
  color: #8b83a1;
}

.rk-green {
  color: #16a34a;
}

.rk-ready-pill {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.rk-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #ece9f4;
  overflow: hidden;
  margin-bottom: 4px;
}

.rk-progress-main {
  margin-bottom: 18px;
}

.rk-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
  transition: width 0.4s ease;
}

.rk-gate-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #a39cb3;
  margin-bottom: 12px;
}

.rk-gate-row {
  margin-bottom: 14px;
}

.rk-gate-row:last-child {
  margin-bottom: 0;
}

.rk-gate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: #1f1233;
  margin-bottom: 6px;
}

.rk-gate-top span:last-child {
  font-weight: 600;
  color: #8b83a1;
}

/* ---------- Section pill ---------- */
.rk-section-pill {
  display: inline-block;
  background: #ede9fb;
  color: #4c1d95;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 9px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.rk-section-pill-purple {
  background: linear-gradient(135deg, #ede9fb, #e6f0ff);
}

/* ---------- Lifetime grid ---------- */
.rk-lifetime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rk-lifetime-box {
  background: #f7f6fb;
  border-radius: 14px;
  padding: 14px 16px;
}

.rk-lifetime-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #8b83a1;
  margin-bottom: 6px;
}

.rk-lifetime-value {
  font-size: 19px;
  font-weight: 800;
  color: #16a34a;
}

.rk-lifetime-note {
  font-size: 11px;
  color: #a39cb3;
  margin-top: 2px;
}

.rk-lifetime-status {
  font-size: 15px;
  font-weight: 800;
  color: #16a34a;
  margin-top: 2px;
}

/* ---------- Reward tier cards ---------- */
#rkTiersContainer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rk-tier-card {
  border: 1px solid #f0edf8;
  border-radius: 16px;
  padding: 16px;
}

.rk-tier-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rk-tier-name {
  font-size: 15.5px;
  font-weight: 800;
  color: #1f1233;
}

.rk-tier-reward {
  font-size: 12.5px;
  color: #8b83a1;
  margin-top: 2px;
}

.rk-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.rk-badge-locked {
  background: #f1eefa;
  color: #8b83a1;
}

.rk-badge-unlocked {
  background: #e2f9ec;
  color: #16793f;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rk-tier-bar-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #ece9f4;
  overflow: hidden;
  margin-bottom: 10px;
}

.rk-tier-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
}

.rk-needs-box {
  background: #fff8e6;
  border: 1px solid #ffe3a3;
  color: #92660c;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 12px;
  padding: 10px 14px;
}

.rk-needs-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

/* ---------- Recent rewards ---------- */
#rkRecentContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rk-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fbfaff;
  border: 1px solid #f0edf8;
}

.rk-recent-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.rk-recent-main {
  flex: 1 1 auto;
  min-width: 0;
}

.rk-recent-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f1233;
}

.rk-recent-date {
  font-size: 11.5px;
  color: #a39cb3;
  margin-top: 2px;
}

.rk-recent-amount {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: #16a34a;
}

.rk-empty-text {
  font-size: 13px;
  color: #a39cb3;
  padding: 6px 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 380px) {
  .rk-hero-title { font-size: 21px; }
  .rk-hero-stat-value { font-size: 17px; }
  .rk-card { padding: 16px 14px 18px; }
}

@media (min-width: 640px) {
  .rk-hero, .rk-card {
    max-width: 560px;
  }
}
.intro-page{
    padding:0;
    background:#eeeaff;
    min-height:100%;
  }
  .intro-wrap{
    max-width:480px;
    margin:0 auto;
    padding:24px 18px 60px;
    font-family:'Segoe UI',Roboto,Arial,sans-serif;
  }

  /* Brand */
  .intro-eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    color:#6b46e0;
    margin-bottom:4px;
  }
  .intro-brand-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:2px;
  }
  .intro-brand-icon{
    width:34px;
    height:34px;
    object-fit:contain;
  }
  .intro-brand-name{
    font-size:24px;
    font-weight:800;
    color:#1f2333;
  }
  .intro-brand-tag{
    font-size:13px;
    color:#6b7280;
    margin:0 0 22px 44px;
  }

  /* Profile card */
  .intro-card{
    background:#fff;
    border-radius:18px;
    padding:22px;
    margin-bottom:22px;
    box-shadow:0 6px 24px rgba(76,47,176,0.06);
    border:1px solid #e6e1fb;
  }
  .intro-card h3{
    margin:0 0 14px;
    font-size:17px;
    font-weight:700;
  }
  .intro-profile-row{
    font-size:14px;
    color:#6b7280;
    margin-bottom:6px;
  }
  .intro-profile-row b{
    color:#1f2333;
  }

  /* Section text */
  .intro-section-label{
      font-size: 18px;
    font-weight: 400;
    color: #767676;
    margin-bottom: 6px;
  }
  .intro-section-text{
    font-size:14px;
    line-height:1.7;
    color:#2b2d31;
  }
  .intro-section-title{
    font-size:20px;
    font-weight:800;
    margin:30px 0 12px;
    color:#1f2333;
  }

  /* Feature cards */
  .intro-feature-card{
    /* background:#fff; */
    border-radius:16px;
    padding:18px 20px;
    margin-bottom:14px;
    /* border-left:4px solid #6b46e0; */
    /* box-shadow:0 2px 10px rgba(0,0,0,0.03); */
  }
  .intro-feature-card.danger{
    border-left-color:#dc2626;
  }
  .intro-feature-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .intro-feature-head span{
    font-size:20px;
  }
  .intro-feature-head h4{
    margin:0;
    font-size:15.5px;
    font-weight:700;
  }
  .intro-feature-desc{
    font-size:13px;
    color:#6b7280;
    line-height:1.6;
    margin:0 0 10px;
  }
  .intro-feature-desc.no-margin{
    margin:0;
  }
  .intro-feature-list{
    display:grid;
    gap:10px;
    font-size:13px;
    color:#374151;
  }
  .intro-feature-list i{
    color:#5cb867;
  }

  /* Community */
  .intro-community-card{
    border-radius:16px;
    padding:18px 0px;
    margin-bottom:14px;
    text-align:left;
  }
  .intro-community-row{
    font-size:13.5px;
    margin-bottom:6px;
  }
  .intro-community-row:last-child{
    margin-bottom:0;
  }
  .intro-community-row a{
    color:#6b46e0;
    font-weight:600;
    text-decoration:none;
  }

  /* Vision */
  .intro-vision-card{
    margin-top:22px;
    padding:26px;
    border-radius:18px;
    background:linear-gradient(135deg,#f3e8ff,#e0f2fe);
    border:1px solid #e9d5ff;
    text-align:center;
  }
  .intro-vision-card h2{
    margin:0 0 10px;
    font-size:19px;
    color:#4c2fb0;
  }
  .intro-vision-card p{
    font-size:13.5px;
    line-height:1.6;
    color:#4b5563;
    margin:0;
  }

  /* Contact number field */
  .intro-field-label{
    font-size:13px;
    font-weight:600;
    color:#1f2333;
    margin:16px 0 6px;
  }
  .intro-field-input{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #d8ceff;
    font-size:14px;
    color:#1f2333;
    outline:none;
    box-sizing:border-box;
  }
  .intro-field-input:focus{
    border-color:#6b46e0;
  }
  .intro-field-input::placeholder{
    color:#9ca3af;
  }
  .intro-field-hint{
    font-size:12px;
    color:#6b7280;
    margin-top:6px;
    line-height:1.5;
  }
  .intro-field-hint b{
    color:#6b46e0;
    font-weight:600;
  }
  .intro-save-btn{
    margin-top:16px;
    width:100%;
    padding:13px;
    border:none;
    border-radius:12px;
    background:#6b46e0;
    color:#fff;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
  }
  .intro-save-btn:hover{
    background:#4c2fb0;
  }
  .intro-save-btn:disabled{
    opacity:0.6;
    cursor:not-allowed;
  }
  .intro-certificate-card{
    border-radius:16px;
    padding:18px 20px;
    margin-bottom:14px;
  }

  .intro-certificate-card img{
    max-width:100%;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    padding: 5px;
    border: 5px solid #6e4d46;
  }

  .intro-certificate-card h4{
    font-size:15.5px;
    font-weight:700;
    margin:0 0 10px;
    text-align:center;
  }

  .ih-page{background:#eef0fb;min-height:100%;padding:20px 0 30px;}
  .ih-wrap{max-width:900px;margin:0 auto;padding:0 16px;font-family:'Segoe UI',Roboto,Arial,sans-serif;}

  .ih-header{text-align:center;margin-bottom:22px;}
  .ih-title{font-size:32px;font-weight:800;color:#1a1a2e;margin:0 0 6px;}
  .ih-subtitle{font-size:15px;color:#6b7280;margin:0 0 6px;}
  .ih-brand{font-size:13px;font-weight:600;color:#7c3aed;}

  .ih-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
  .ih-stat-card{border-radius:16px;padding:20px;text-align:center;}
  .ih-stat-green{background:linear-gradient(135deg,#e6f9ee,#d6f2e3);border:1px solid #c3ecd6;}
  .ih-stat-blue{background:linear-gradient(135deg,#e5f2ff,#dceefe);border:1px solid #c6e3fb;}
  .ih-stat-label{font-size:14px;color:#4b5563;margin-bottom:6px;}
  .ih-stat-value{font-size:22px;font-weight:800;color:#111827;}

  .ih-filter-card{background:#fff;border-radius:16px;padding:16px;margin-bottom:20px;
    box-shadow:0 2px 12px rgba(0,0,0,0.04);border:1px solid #edeaf9;}
  .ih-filter-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;}
  .ih-filter-scroll::-webkit-scrollbar{display:none;}
  .ih-filter-btn{
    flex-shrink:0;padding:9px 16px;border-radius:10px;border:none;
    background:#f1f2f6;color:#374151;font-size:13.5px;font-weight:600;
    cursor:pointer;white-space:nowrap;
  }
  .ih-filter-btn.active{background:#3b6df0;color:#fff;}

  .ih-transactions-card{background:#fff;border-radius:16px;padding:20px;
    box-shadow:0 2px 12px rgba(0,0,0,0.04);border:1px solid #edeaf9;}
  .ih-transactions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
  .ih-transactions-title{font-size:19px;font-weight:800;color:#111827;}
  .ih-sort-btn{
    padding:8px 14px;border-radius:10px;border:1px solid #e5e7eb;
    background:#fff;color:#374151;font-size:13.5px;font-weight:600;cursor:pointer;
    display:flex;align-items:center;gap:6px;
  }
  .ih-sort-btn:hover{background:#f9fafb;}

  .ih-empty-state{text-align:center;color:#6b7280;font-size:14.5px;padding:40px 0;}

  /* Transaction row (used by JS-rendered items) */
  .ih-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 4px;border-bottom:1px solid #f1f2f6;
  }
  .ih-item:last-child{border-bottom:none;}
  .ih-item-left{display:flex;flex-direction:column;gap:3px;}
  .ih-item-type{font-size:14px;font-weight:700;color:#111827;}
  .ih-item-date{font-size:12.5px;color:#9ca3af;}
  .ih-item-right{text-align:right;}
  .ih-item-amount{font-size:14.5px;font-weight:700;}
  .ih-item-amount.positive{color:#16a34a;}
  .ih-item-amount.negative{color:#dc2626;}
  .ih-item-status{font-size:12px;color:#16a34a;margin-top:2px;}
   /* ---------- Friends Page Theme (matches reference screenshots) ---------- */
  #page-friends.fr2-page {
    padding: 16px 14px 90px;
    font-family: 'Inter', 'DM Sans', -apple-system, sans-serif;
  }
 
  #page-friends .fr2-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 14px rgba(20, 10, 60, 0.06);
  }
 
  /* Hero header card */
  #page-friends .fr2-hero {
    position: relative;
    background: linear-gradient(135deg, #7b2ff7 0%, #6420c9 100%);
    border-radius: 22px;
    padding: 22px 20px;
    color: #fff;
    margin-bottom: 16px;
    overflow: hidden;
  }
 
  #page-friends .fr2-hero-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.18);
    padding: 8px 14px 8px 18px;
    border-radius: 0 22px 0 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.3;
  }
 
  #page-friends .fr2-hero-title {
    font-size: 24px;
    font-weight: 800;
    margin: 4px 0 6px;
  }
 
  #page-friends .fr2-hero-sub {
    font-size: 13.5px;
    opacity: 0.92;
    margin: 0 0 4px;
  }
 
  #page-friends .fr2-hero-brand {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 14px;
  }
 
  #page-friends .fr2-hero-block {
    font-size: 13.5px;
    line-height: 1.55;
    margin-top: 14px;
  }
 
  #page-friends .fr2-hero-block b {
    font-weight: 800;
  }
 
  /* Stat pills row */
  #page-friends .fr2-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
 
  #page-friends .fr2-stat {
    border-radius: 18px;
    padding: 16px 10px;
    text-align: center;
    color: #fff;
  }
 
  #page-friends .fr2-stat i {
    font-size: 20px;
    margin-bottom: 6px;
    display: block;
  }
 
  #page-friends .fr2-stat .fr2-stat-val {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
  }
 
  #page-friends .fr2-stat .fr2-stat-label {
    font-size: 11.5px;
    opacity: 0.95;
    margin-top: 2px;
  }
 
  #page-friends .fr2-stat.blue { background: linear-gradient(135deg, #2e9bff, #1b6fe0); }
  #page-friends .fr2-stat.green { background: linear-gradient(135deg, #22c55e, #16a34a); }
  #page-friends .fr2-stat.pink { background: linear-gradient(135deg, #d63bd6, #8b2fc9); }
 
  /* Section titles inside white cards */
  #page-friends .fr2-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #1e1b2e;
    margin-bottom: 14px;
  }
 
  #page-friends .fr2-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
 
  #page-friends .fr2-box {
    background: #f5f6fb;
    border-radius: 14px;
    padding: 12px 14px;
  }
 
  #page-friends .fr2-box.full { grid-column: 1 / -1; }
 
  #page-friends .fr2-box-label {
    font-size: 11.5px;
    color: #7a7a8c;
    margin-bottom: 4px;
  }
 
  #page-friends .fr2-box-value {
    font-size: 20px;
    font-weight: 800;
    color: #1e1b2e;
  }
 
  #page-friends .fr2-milestone {
    font-size: 12.5px;
    color: #6b6b7d;
    margin-top: 8px;
    line-height: 1.5;
  }
 
  /* Invite link gradient card */
  #page-friends .fr2-invite-card {
    background: linear-gradient(135deg, #c026d3 0%, #7b2ff7 100%);
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    margin-bottom: 16px;
  }
 
  #page-friends .fr2-invite-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 12px;
  }
 
  #page-friends .fr2-invite-box {
    border: 1.5px dashed rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
 
  #page-friends .fr2-invite-box i.spark { font-size: 20px; }
 
  #page-friends .fr2-invite-text { flex: 1; min-width: 0; }
 
  #page-friends .fr2-invite-headline {
    font-weight: 800;
    font-size: 13.5px;
    line-height: 1.4;
  }
 
  #page-friends .fr2-invite-link {
    font-size: 11.5px;
    opacity: 0.9;
    word-break: break-all;
    margin-top: 4px;
  }
 
  #page-friends .fr2-copy-btn {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    flex-shrink: 0;
  }
 
  /* Team overview */
  #page-friends .fr2-overview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 13.5px;
    color: #33334a;
  }
 
  #page-friends .fr2-overview-row + .fr2-overview-row {
    border-top: 1px solid #eee;
  }
 
  #page-friends .fr2-overview-row b { font-size: 15px; }
  #page-friends .fr2-overview-row.green b { color: #16a34a; }
 
  #page-friends .fr2-pill {
    background: #f0e9ff;
    color: #7b2ff7;
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: 800;
    font-size: 13px;
  }
 
  /* Team volume gradient card */
  #page-friends .fr2-volume-card {
    background: linear-gradient(120deg, #d63bd6 0%, #7b2ff7 60%, #5b21c9 100%);
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    margin-bottom: 16px;
  }
 
  #page-friends .fr2-volume-title {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 14px;
  }
 
  #page-friends .fr2-volume-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
  }
 
  #page-friends .fr2-volume-grid .val {
    font-size: 19px;
    font-weight: 800;
  }
 
  #page-friends .fr2-volume-grid .lbl {
    font-size: 11px;
    opacity: 0.9;
    margin-top: 2px;
  }
 
  /* Team Level Income table */
  #page-friends .fr2-table-head-row {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1.1fr 1fr;
    background: #f3ecff;
    border-radius: 12px;
    padding: 10px 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #6b21c9;
    text-align: center;
    margin-bottom: 6px;
  }
 
  #page-friends .fr2-level-row {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1.1fr 1fr;
    align-items: center;
    text-align: center;
    padding: 14px 8px;
    font-size: 13.5px;
    color: #2b2b3d;
    cursor: pointer;
  }
 
  #page-friends .fr2-level-row:active { background: #faf8ff; }
 
  #page-friends .fr2-level-row + .fr2-level-row { border-top: 1px solid #f1f1f5; }
 
  #page-friends .fr2-level-row .lvl-num { font-weight: 700; }
 
  #page-friends .fr2-level-row .lvl-cell-icon {
    font-size: 12px;
    color: #b7b7c4;
    margin-right: 3px;
  }
 
  #page-friends .fr2-level-row .reward { color: #16a34a; font-weight: 700; }
 
  #page-friends .fr2-pill-15 {
    background: #f0e9ff;
    color: #7b2ff7;
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: 800;
    font-size: 12px;
  }
 
  #page-friends .fr2-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
 
  #page-friends .fr2-card-title-row .fr2-card-title { margin-bottom: 0; }

   .dh-wrap {
    background: #f4f0ff;
    margin: -1px;
    padding: 26px 18px 60px;
    font-family: 'Inter', 'DM Sans', -apple-system, sans-serif;
  }
 
  .dh-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #1e1b2e;
    margin-bottom: 8px;
  }
 
  .dh-sub {
    text-align: center;
    font-size: 13px;
    color: #7a7a8c;
    line-height: 1.5;
    max-width: 340px;
    margin: 0 auto 6px;
  }
 
  .dh-brand {
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #7b2ff7;
    margin-bottom: 18px;
  }
 
  .dh-card {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 2px 14px rgba(20, 10, 60, 0.06);
  }
 
  .dh-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 800;
    color: #1e1b2e;
    margin-bottom: 6px;
  }
 
  .dh-close-btn {
    border: 1.5px solid #7b2ff7;
    color: #7b2ff7;
    background: #fff;
    border-radius: 10px;
    padding: 5px 12px;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
  }
 
  .dh-empty {
    text-align: center;
    padding: 40px 10px 20px;
  }
 
  .dh-empty-title {
    font-weight: 700;
    font-size: 14.5px;
    color: #2b2b3d;
    margin-bottom: 6px;
  }
 
  .dh-empty-sub {
    font-size: 12.5px;
    color: #9494a3;
    line-height: 1.5;
    max-width: 300px;
    margin: 0 auto;
  }
 
  .dh-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 2px;
  }
 
  .dh-row + .dh-row { border-top: 1px solid #f1f1f5; }
 
  .dh-amount { font-weight: 800; font-size: 15px; color: #1e1b2e; }
  .dh-date { font-size: 11.5px; color: #9494a3; margin-top: 2px; }
 
  .dh-status {
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
  }
 
  .dh-status.done { background: #e7f9ee; color: #16a34a; }
  .dh-status.confirm { background: #fff6e0; color: #b8860b; }
  .dh-status.pending { background: #f1f1f5; color: #8a8a97; }
  .trade-live-label {
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
  }
 
  .trade-live-label i {
    font-size: 10px;
    animation: liveBlink 1.4s infinite;
  }
 
  @keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }