* {
  box-sizing: border-box;
}

/* ME PAGE */
.wallet-card-me {
  width: 100%;
  /* background: linear-gradient(180deg, #3b2a18, #24160b); */
  background: #292626;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
}

/* Assets */
.me-total-assets {
  text-align: center;
  margin-bottom: 20px;
  margin: 20px 0px;
}

.me-total-assets p {
  font-size: 16px;
  opacity: 0.7;
  font-weight: 700;
}

.me-total-assets h2 {
  font-size: 28px;
  margin-top: 6px;
  color: #f5d29b;
  color: #f4f0eb;
  text-shadow: rgb(133, 100, 71) -1px -1px 0px, rgb(133, 100, 71) 0px -1px 0px, rgb(133, 100, 71) 1px -1px 0px, rgb(133, 100, 71) 1px 0px 0px, rgb(133, 100, 71) 1px 1px 0px, rgb(133, 100, 71) 0px 1px 0px, rgb(133, 100, 71) -1px 1px 0px, rgb(133, 100, 71) -1px 0px 0px;
  filter: drop-shadow(rgb(133, 100, 71) 0px 1px 0px);
  font-weight: 700;
}

.me-total-assets h2,
.me-total-assets p {
  margin: 3px 0;
}

/* User row */
.user-row {
  background: #292626;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.user-left img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #f0c27b;
}

.user-left span {
  font-size: 16px;
  font-weight: 700;
}

.user-left i {
  font-size: 14px;
  opacity: 0.7;
}

.vip {
  background: #f0b23c;
  color: #3b2308;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}

/* Menu */
.wallet-card-me .menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet-card-me .menu-item {
  background: #F4BD2A;
  border-radius: 16px;
  /* padding: 14px; */
  cursor: pointer;
  transition: background 0.3s;
}

.wallet-card-me .menu-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.wallet-card-me .menu-item:hover {
  background: #F4BD2A;
}

.wallet-card-me .menu-item i {
  width: 36px;
  height: 36px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0c27b;
}

.wallet-card-me .menu-item span {
  font-size: 15px;
  color: #000;
}

/* Teams Page */
.teams-invite {
  background: url(/assets/invite-bg.png) no-repeat center center/cover;
  background-size: 100% 100%;
  border-radius: 24px;
  margin: 20px auto;
}

.teams-invite .invite-card {
  width: 100%;
  padding: 20px;
}

/* Invitation row */
.teams-invite .row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.teams-invite .label {
  font-size: 14px;
  opacity: .9;
}

.teams-invite .code {
  font-weight: 600;
  letter-spacing: 1px;
}

/* Copy button */
.teams-invite .copy-btn {
  margin-left: auto;
  background: #f4a63a;
  border: none;
  color: #000;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: .3s;
}

.teams-invite .copy-btn:hover {
  background: #ffbb55;
}

/* Subtitle */
.teams-invite .subtitle {
  font-size: 14px;
  opacity: .85;
  margin-bottom: 10px;
}

/* Link box */
.teams-invite .link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 18px;
}

.teams-invite .link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Share title */
.teams-invite .share-title {
  font-size: 14px;
  opacity: .85;
  margin-bottom: 10px;
}

/* Social icons */
.teams-invite .social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.teams-invite .social-icons a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: .3s;
}

.teams-invite .social-icons a:hover {
  background: #f4a63a;
  color: #000;
}

.teams-wrapper .date-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 14px;
}

.teams-wrapper .date-select i {
  color: #ffb347;
}

/* Card */
.teams-wrapper .summary-card {
  background: url("data:image/svg+xml,%3csvg%20width='343'%20height='164'%20viewBox='0%200%20343%20164'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M342.614%20-96.017L338.815%20-95.8017L315.225%20-94.4562L312.756%20-81.7971L307.757%20-95.2204L304.824%20-94.693L285.29%20-91.1945L279.056%20-90.075L264.882%20-76.7809L241.489%20-68.6214L219.065%20-86.1567L172.64%20-101.593L165.72%20-101.668L161.596%20-101.722L142.096%20-101.938L139.095%20-87.1578L129.868%20-85.5432L126.627%20-73.1101L91.1179%20-75.0155L86.9333%20-98.1915L74.9969%20-97.7932L46.9395%20-96.8459L44.024%20-85.963L42.189%20-96.6844L4.7677%20-91.3883L0.3773%20-90.7639L0%20-90.215V-14.9926V325.93H343V-14.9926V-96.0386L342.614%20-96.017Z'%20fill='%23B38F6B'/%3e%3cpath%20d='M343%20-91.9565V330.012H0V-86.1329L0.3773%20-86.6819L4.7677%20-87.3063L42.189%20-92.6024L44.024%20-81.8809L46.9395%20-92.7638L74.9969%20-93.7111L86.9333%20-94.1094L91.1179%20-70.9334L126.627%20-69.0281L129.86%20-81.4611L139.095%20-83.0758L142.096%20-97.8555L161.596%20-97.6402L165.72%20-97.5864L172.64%20-97.511L219.057%20-82.0747L241.48%20-64.5285L264.882%20-72.6881L279.056%20-85.993L285.29%20-87.1125L304.824%20-90.6109L307.757%20-91.1384L312.756%20-77.7151L315.225%20-90.3741L338.815%20-91.7197L342.614%20-91.935L343%20-91.9565Z'%20fill='%23402E26'/%3e%3cpath%20d='M343%20-91.9565V-10.9105L315.371%20-0.0814438L256.581%20-31.5246L234.74%202.6312L149.917%2031.6523L114.665%202.6312L61.3712%20-15.4747L0%2048.3373V-86.1329L0.3773%20-86.6819L4.7677%20-87.3062L42.189%20-92.6024L44.024%20-81.8809L46.9395%20-92.7638L74.9969%20-93.7111L86.9333%20-94.1094L91.1179%20-70.9334L126.627%20-69.0281L129.86%20-81.4611L139.095%20-83.0758L142.096%20-97.8555L161.596%20-97.6402L165.72%20-97.5864L172.64%20-97.511L219.057%20-82.0747L241.48%20-64.5285L264.882%20-72.688L279.056%20-85.993L285.29%20-87.1125L304.824%20-90.6109L307.757%20-91.1384L312.756%20-77.7151L315.225%20-90.3741L338.815%20-91.7197L342.614%20-91.935L343%20-91.9565Z'%20fill='%2347342B'/%3e%3cpath%20d='M0%20184.108L65.9846%20194.927L122.442%20143.472L211.991%20150.878L285.29%20101.318L343%20148.241V330.01H0V184.108Z'%20fill='%233B2923'/%3e%3cpath%20d='M257.593%20157.314L231.594%20187.498L236.473%20232.784L282.615%20251.138L311.213%20215.658L280.017%20189.952L291.061%20167.11L257.593%20157.314Z'%20fill='%2333231E'/%3e%3cpath%20d='M295.94%20167.919L291.387%20185.056L314.136%20204.228L327.779%20183.829L329.734%20162.225L295.94%20167.919Z'%20fill='%2333231E'/%3e%3cpath%20d='M134.781%20109.941L194.18%20127.283L229.689%2092.5997L232.202%2056.431L194.18%2053.0078L139.275%2079.3701L134.781%20109.941Z'%20fill='%23382721'/%3e%3cpath%20d='M114.287%2075.052L151.554%2061.4564L139.274%2042.963L95.2246%2023.1133L74.2158%2049.088L114.287%2075.052Z'%20fill='%23382721'/%3e%3cpath%20d='M112.881%2083.2094L127.724%2076.4062L134.781%2081.5732L128.153%20103.059L117.537%20100.067L112.881%2083.2094Z'%20fill='%23382721'/%3e%3cpath%20d='M343%2012.1016L307.8%2036.171L304.087%2054.5245L318.356%2076.4087L342.734%2079.4013L343%2012.1016Z'%20fill='%23382721'/%3e%3cpath%20d='M0%2012.1031L24.0529%20-15.4756L22.3121%20-37.6612L31.1101%20-56.6498L15.555%20-74.8203L0%20-71.1173V12.1031Z'%20fill='%233D2C24'/%3e%3cpath%20d='M0%20172.817L17.1328%20146.713L14.183%20113.267L15.555%2089.7362L0%2082.2656V172.817Z'%20fill='%23382721'/%3e%3c/svg%3e") no-repeat center center/cover;
  background-size: 100%;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  margin-bottom: 20px;
}

.teams-wrapper .summary-card .headings,
.teams-wrapper .summary-card .values {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.teams-wrapper .summary-card .headings span:not(:last-child),
.teams-wrapper .summary-card .values span:not(:last-child) {
  width: calc(50% / 2);
  text-align: center;
}

.teams-wrapper .summary-card .headings span:last-child,
.teams-wrapper .summary-card .values span:last-child {
  width: 50%;
  text-align: center;
}

/* Items */
.teams-wrapper .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.teams-wrapper .item span {
  color: #fff;
  font-size: 13px;
}

.teams-wrapper .item strong {
  font-size: 24px;
  font-weight: 600;
  color: #ffb347;
}

/* Button */
.teams-wrapper .btn-wrap {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

.teams-wrapper .btn {
  background: linear-gradient(180deg, #ffb347, #f39c12);
  border: none;
  border-radius: 12px;
  padding: 10px 24px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  display: none;
}

.teams-wrapper .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 179, 71, 0.4);
}

/* VIP PAGE */
.vip-container {
  margin-top: 20px;
}

.vip-container .card {
  background: #292626;
  border-radius: 18px;
  padding: 20px;
  color: #f5d7a1;
  margin-bottom: 16px;
}

.vip-container .top-card .toprow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.vip-container .badge {
  background: #e39b34;
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.vip-container .recharge-btn {
  width: 100%;
  padding: 14px;
  background: #e39b34;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  margin-top: 10px;
}

/* Toggle */
.vip-container .toggle {
  display: flex;
  background: #2a1a0f;
  border-radius: 30px;
  padding: 6px;
  margin-bottom: 16px;
}

.vip-container .toggle-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #b99b6b;
  padding: 10px;
  border-radius: 20px;
  cursor: pointer;
}

.vip-container .toggle-btn.active {
  background: #3e2814;
  color: #f5d7a1;
  box-shadow: inset 0 0 0 2px #e39b34;
}

/* Bottom Card */
.vip-container .bottom-card h3 {
  margin-bottom: 14px;
  color: #f5d7a1;
}

.vip-container .bottom-card p {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 14px;
}

.vip-container .green {
  color: #4cff4c;
}

/* Content switch */
.vip-container .content {
  display: none;
}

.vip-container .content.active {
  display: block;
}

table {
  --bs-table-bg: transparent !important;
  border-color: transparent !important;
}

.teams-wrapper:last-child .summary-card {
  background-size: 100% 100%;
  padding: 0px;
}

.table-directsl {
  width: 100%;
  text-align: center;
  margin-top: 13px;
}

.teams-wrapper .summary-card .headings span,
.teams-wrapper .summary-card .values span {
  font-size: 14px;
  color: #fff2e0;
}

.table-directsl thead th,
.table-directsl tbody td {
  width: calc(50% / 3 - 5px);
  text-align: center;
  font-size: 17px;
}

.table-directsl thead th {
  color: #ffb347;
}

.table-directsl tbody td,
.table-directsl tbody th {
  color: #fff2e0;
}

.teams-wrapper .summary-card .values span strong {
    font-size: 15px;
}