@charset "UTF-8";
.layout {
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #9195a3;
  overflow: hidden;
}
.layout .layout-content {
  width: 100%;
  max-width: 500px;
  position: relative;
  background: linear-gradient(180deg, #0a0e27, #0f1429);
  min-height: 100vh;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.topbar {
  width: 100%;
  background: linear-gradient(180deg, #1a1f3a, #0f1429);
  padding: 10px 10px 0;
  position: sticky;
  top: 0;
  z-index: 1001;
  box-shadow: 0 2px 10px #0000004d;
  height: 49.06px;
}
.topbar .topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}
.topbar .topbar-content.topbar-content-centered {
  justify-content: space-between;
  position: relative;
}
.topbar .topbar-content.topbar-content-centered .back-btn {
  flex-shrink: 0;
}
.topbar .topbar-content.topbar-content-centered .page-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  justify-content: center;
}
.topbar .topbar-content.topbar-content-centered .wingo-logo {
  height: 35px;
  width: 80px;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0, 236, 190, 0.3));
  align-items: center;
}
.topbar .topbar-content.topbar-content-centered .k3-logo {
  height: 25px;
  width: 100%;
  margin-right: 8px;
  justify-content: center;
}
.topbar .topbar-content.topbar-content-centered .topbar-title-container {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.topbar .topbar-content.topbar-content-centered .page-title {
  margin-left: 10px;
}
.topbar .topbar-content.topbar-content-centered .back-btn-placeholder {
  width: 32px;
  flex-shrink: 0;
}
.topbar .back-btn {
  background: transparent;
  border: none;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
  border-radius: 8px;
}
.topbar .back-btn:hover {
  background: #ffffff1a;
}
.topbar .back-btn:active {
  transform: scale(0.95);
}
.topbar .back-btn svg {
  width: 20px;
  height: 20px;
}
.topbar .logo {
  display: flex;
  align-items: baseline;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
}
.topbar .logo .logo-image {
  height: 35px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 236, 190, 0.3));
}
.topbar .logo .logo-text {
  color: #00d9ff;
  letter-spacing: -0.5px;
}
.topbar .logo .logo-domain {
  color: #fff;
  font-size: 18px;
}
.topbar .topbar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.topbar .cloud-btn {
  background: transparent;
  border: none;
  color: #00d9ff;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.topbar .cloud-btn:hover {
  background: #00d9ff1a;
}
.topbar .cloud-btn svg {
  width: 20px;
  height: 20px;
}
.topbar .language-btn {
  background: #ffffff0d;
  border: none;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.topbar .language-btn:hover {
  background: #ffffff1a;
}
.topbar .language-btn svg {
  width: 20px;
  height: 16px;
  border-radius: 2px;
}
.balance-display {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border-radius: 8px;
  white-space: nowrap;
}
.balance-display {
  transition: background 0.2s ease;
}
.balance-display:hover {
  background: #ffffff26;
}
.topbar_login_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.985rem;
  font-weight: 600;
  color: var(--color-dark-text);
  padding: 2px 8px;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
}
.topbar_login_btn:hover {
  cursor: pointer;
}
.sound-toggle-btn {
  background: transparent;
  border: none;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
  border-radius: 8px;
}
.sound-toggle-btn:hover {
  background: #ffffff1a;
}
.sound-toggle-btn:active {
  transform: scale(0.95);
}
.sound-toggle-btn .volume-icon {
  width: 20px;
  height: 20px;
}
._overlay_rsqcg_2 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: _fadeIn_rsqcg_1 0.3s ease-out forwards;
  touch-action: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
._sheet_rsqcg_28 {
  width: min(500px, 100% - 0px);
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  transform: translateY(0);
  animation: _slideUp_rsqcg_1 0.25s ease-out;
  overflow: hidden;
}
._langList_rsqcg_49 {
  padding: 0 16px 20px;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
._langItem_rsqcg_56 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  margin-bottom: 8px;
  background: var(--bg-wallet);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-white);
}
._langLabel_rsqcg_73 {
  flex: 1;
}
._checkmark_rsqcg_77 {
  color: #1976d2;
  font-weight: 700;
  margin-left: 8px;
}
@keyframes _fadeIn_rsqcg_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_rsqcg_1 {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
._langList_rsqcg_49 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(var(--sheet-max-height, 420px) - 60px);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  box-sizing: border-box;
  scroll-padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  min-height: 100px;
  width: 100%;
  list-style: none;
  margin: 0;
}
._langItem_rsqcg_56 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-wallet);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  font-size: 16px;
  color: var(--color-white);
}
._langLabel_rsqcg_73 {
  flex: 1;
  font-size: 16px;
  color: var(--color-white);
  font-weight: 400;
}
._check_rsqcg_77 {
  color: #3b82f6;
  font-weight: 700;
  margin-left: 12px;
  width: 20px;
  text-align: center;
  font-size: 18px;
}
._header_rsqcg_157 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-medium);
  position: relative;
}
._header_rsqcg_157:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #00000014;
}
._title_rsqcg_176 {
  font-weight: 600;
  font-size: 18px;
  color: var(--color-white);
  margin: 0;
  flex: 1;
  text-align: center;
}
._close_rsqcg_185 {
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-white);
  padding: 8px;
  margin: -8px -8px -8px auto;
  border-radius: 50%;
  transition: background 0.2s;
}
._close_rsqcg_185:active {
  background: #0000000d;
}
._content_rsqcg_202 {
  padding: 12px 0 20px;
  overflow-y: auto;
  max-height: 540px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
  scroll-padding-bottom: 20px;
  scroll-behavior: smooth;
  background: var(--bg-dark);
}
._content_rsqcg_202::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
._content_rsqcg_202::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
._content_rsqcg_202::-webkit-scrollbar-thumb {
  background-color: #0000001a;
  border-radius: 4px;
  transition: background-color 0.2s;
}
._content_rsqcg_202:hover::-webkit-scrollbar-thumb {
  background-color: #0003;
}
@media (hover: none) {
  ._content_rsqcg_202::-webkit-scrollbar {
    width: 3px;
  }
  ._content_rsqcg_202::-webkit-scrollbar-thumb {
    background-color: #0000001a;
  }
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-dark);
  border-top: 1px solid var(--bg-light);
  padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  box-shadow: 0 -2px 10px #00000080;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.bottom-nav .nav-content {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
}
.bottom-nav .nav-item {
  background: transparent;
  border: none;
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  transition: all 0.3s ease;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  flex: 1;
  max-width: 80px;
}
.bottom-nav .nav-item:hover {
  color: var(--color-secondary);
}
.bottom-nav .nav-item.active {
  color: var(--color-primary);
}
.bottom-nav .nav-item.active .nav-label {
  font-weight: 600;
  color: var(--color-primary);
}
.bottom-nav .nav-item.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 32px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
}
.bottom-nav .nav-item.nav-item-home .nav-icon-wrapper {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-nav .nav-item.nav-item-home .nav-icon {
  width: 28px;
  height: 28px;
  color: var(--color-white);
}
.bottom-nav .nav-item.nav-item-home .nav-label {
  margin-top: -4px;
}
.bottom-nav .nav-item.nav-item-home:after {
  display: none;
}
.bottom-nav .nav-item .nav-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  width: 32px;
  height: 32px;
}
.bottom-nav .nav-item .nav-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
  stroke: currentColor;
}
.bottom-nav .nav-item .nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .bottom-nav {
    max-width: 100%;
  }
  .bottom-nav .nav-content {
    padding: 0 4px;
  }
  .bottom-nav .nav-item {
    padding: 6px 8px;
    max-width: 70px;
  }
  .bottom-nav .nav-item.nav-item-home .nav-icon-wrapper {
    width: 48px;
    height: 48px;
  }
  .bottom-nav .nav-item.nav-item-home .nav-icon {
    width: 26px;
    height: 26px;
  }
  .bottom-nav .nav-item .nav-label {
    font-size: 10px;
  }
}
@media (max-width: 380px) {
  .bottom-nav .nav-item {
    padding: 6px;
    max-width: 60px;
    gap: 2px;
  }
  .bottom-nav .nav-item.nav-item-home .nav-icon-wrapper {
    width: 44px;
    height: 44px;
  }
  .bottom-nav .nav-item.nav-item-home .nav-icon {
    width: 24px;
    height: 24px;
  }
  .bottom-nav .nav-item .nav-icon-wrapper {
    width: 28px;
    height: 28px;
  }
  .bottom-nav .nav-item .nav-icon {
    width: 20px;
    height: 20px;
  }
  .bottom-nav .nav-item .nav-label {
    font-size: 9px;
  }
}
@keyframes bounceIn {
  0% {
    transform: scale(0.8) translateY(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) translateY(-2px);
  }
  to {
    transform: scale(1) translateY(-2px);
    opacity: 1;
  }
}
.nav-item.active .nav-icon-wrapper {
  animation: bounceIn 0.4s ease-out;
}
.nav-icon {
  width: 24px;
  height: 24px;
}
.nav-icons {
  width: 70px;
  height: 75px;
  position: absolute;
  top: -17px;
}
.nav-label-home {
  position: absolute;
  top: 43px;
  font-size: 11.7332px;
  font-weight: 500;
  color: var(--color-primary);
}
.nav-icon-active {
  width: 60px;
  height: 50px;
}
.active-position {
  position: absolute;
  top: 24px;
  color: var(--color-primary);
}
.home {
  width: 100%;
  max-width: 500px;
  padding: 0 20px 16px;
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  margin: 0 auto;
}
.home .feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.10667rem;
  margin-bottom: 16px;
}
.home .feature-cards .feature-card {
  width: 100%;
  height: 52.27px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.home .feature-cards .feature-card img {
  width: 100%;
  height: 52.27px;
  object-fit: contain;
}
.home .feature-cards .feature-card:hover {
  transform: translateY(1px);
  cursor: pointer;
}
.home .feature-cards .feature-card.wheel {
  background: linear-gradient(135deg, #00d4ff, #09f);
}
.home .feature-cards .feature-card.vip {
  background: linear-gradient(135deg, var(--color-gold) 0%, #ffaa00 100%);
}
.home .feature-cards .feature-card .feature-content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.home .feature-cards .feature-card .feature-content .feature-icon {
  font-size: 32px;
}
.home .feature-cards .feature-card .feature-content .feature-text h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.home .feature-cards .feature-card .feature-content .feature-text p {
  font-size: 12px;
  color: #fffffff2;
}
.home .feature-cards .feature-card .feature-decoration {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
  opacity: 0.3;
}
.home .promo-banner {
  position: relative;
  overflow: hidden;
}
.home .promo-banner:before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 200px;
  height: max-content;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.15) 0%,
    transparent 70%
  );
  border-radius: 50%;
}
.home .promo-banner .banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
.home .promo-banner .banner-content .banner-text {
  flex: 1;
}
.home .promo-banner .banner-content .banner-text h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 8px;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.home .promo-banner .banner-content .banner-text .bonus-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 12px;
}
.home .promo-banner .banner-content .banner-text .bonus-text .highlight {
  color: var(--color-gold);
  font-size: 28px;
  font-style: italic;
}
.home .promo-banner .banner-content .banner-text .validity-badge {
  background: #fff3;
  color: var(--color-white);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.home .promo-banner .banner-content .banner-image {
  position: relative;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .promo-banner .banner-content .banner-image .diya {
  font-size: 60px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));
}
.home .promo-banner .banner-content .banner-image .money-icon {
  position: absolute;
  font-size: 24px;
}
.home .promo-banner .banner-content .banner-image .money-icon.money-1 {
  top: -5px;
  right: 5px;
  animation: float 2s ease-in-out infinite;
}
.home .promo-banner .banner-content .banner-image .money-icon.money-2 {
  bottom: 5px;
  left: -5px;
  animation: float 2.5s ease-in-out infinite 0.3s;
}
.home .promo-banner .banner-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.home .promo-banner .banner-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff4d;
  transition: all 0.3s;
}
.home .promo-banner .banner-dots .dot.active {
  width: 20px;
  border-radius: 3px;
  background: #ffffffe6;
}
@keyframes float {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.home .welcome-banner {
  background: var(--gradient-banner);
  padding: 0.2rem 10.6668px 0.4rem;
  margin: 0 0 21.3332px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  border: 0.01333rem solid var(--bg-banner-border);
}
.home .welcome-banner .welcome-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
.home .welcome-banner .welcome-content .welcome-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.home .welcome-banner .welcome-content .welcome-text {
  font-size: 12px;
  color: var(--color-white) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: wrap;
}
.home .welcome-banner .detail-btn {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  color: var(--color-dark-text);
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 8px #00d9ff4d;
}
.home .welcome-banner .detail-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px #00d9ff66;
}
.home .wallet-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26.6668px;
}
.home .wallet-section .wallet-header {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 3.2px;
  color: var(--color-secondary);
  font-size: 10.6668px;
}
.home .wallet-section .wallet-header .wallet-icon {
  width: 10px;
  height: 10px;
  font-size: 10.6668px;
  border-radius: 50%;
}
.home .wallet-section .wallet-balance {
  display: flex;
  align-items: center;
  gap: 4px;
}
.home .wallet-section .wallet-balance .currency {
  font-size: 17.0668px;
  font-weight: 600;
}
.home .wallet-section .wallet-balance .amount {
  font-size: 17.0668px;
  font-weight: 700;
  flex: 1;
}
.home .wallet-section .wallet-balance .refresh-btn {
  background: transparent;
  padding: 4px;
}
.home .wallet-section .wallet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.home .wallet-section .wallet-actions button {
  width: 72.53px;
  height: 42.66px;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12.8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px #0003;
}
.home .wallet-section .wallet-actions button .btn-icon {
  font-size: 16px;
}
.home .wallet-section .wallet-actions .withdraw-btn {
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='136'%20height='80'%20viewBox='0%200%20136%2080'%20fill='none'%3e%3cg%20clip-path='url(%23clip0_2043_6244)'%3e%3crect%20width='136'%20height='80'%20rx='12'%20fill='url(%23paint0_linear_2043_6244)'/%3e%3ccircle%20opacity='0.3'%20cx='137'%20cy='120'%20r='72'%20fill='url(%23paint1_linear_2043_6244)'/%3e%3ccircle%20opacity='0.3'%20cx='-1'%20cy='120'%20r='72'%20fill='url(%23paint2_linear_2043_6244)'/%3e%3ccircle%20opacity='0.3'%20cx='68'%20cy='139'%20r='72'%20fill='url(%23paint3_linear_2043_6244)'/%3e%3cpath%20opacity='0.2'%20d='M3.99992%20124L68%2059.9998L132%20124'%20stroke='white'%20stroke-width='20'/%3e%3cpath%20opacity='0.1'%20d='M-9.50008%2093.4999L68%2015.9998L145.5%2093.4999'%20stroke='white'%20stroke-width='20'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2043_6244'%20x1='68'%20y1='0'%20x2='68'%20y2='80'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFBF66'/%3e%3cstop%20offset='1'%20stop-color='%23FB8F55'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_2043_6244'%20x1='106'%20y1='56.5'%20x2='117.5'%20y2='79.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FF6919'/%3e%3cstop%20offset='1'%20stop-color='%23FDA45D'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_2043_6244'%20x1='32.5'%20y1='56'%20x2='17'%20y2='74.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FF6919'/%3e%3cstop%20offset='1'%20stop-color='%23FDA45D'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_2043_6244'%20x1='68'%20y1='67'%20x2='68'%20y2='90'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FF6919'/%3e%3cstop%20offset='1'%20stop-color='%23FDA45D'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_2043_6244'%3e%3crect%20width='136'%20height='80'%20rx='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
  color: var(--color-white);
  background-repeat: no-repeat;
  background-size: cover;
}
.home .wallet-section .wallet-actions .deposit-btn {
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='136'%20height='80'%20viewBox='0%200%20136%2080'%20fill='none'%3e%3cg%20clip-path='url(%23clip0_2043_6253)'%3e%3crect%20width='136'%20height='80'%20rx='12'%20fill='url(%23paint0_linear_2043_6253)'/%3e%3ccircle%20opacity='0.3'%20cx='137'%20cy='120'%20r='72'%20fill='url(%23paint1_linear_2043_6253)'/%3e%3ccircle%20opacity='0.3'%20cx='-1'%20cy='120'%20r='72'%20fill='url(%23paint2_linear_2043_6253)'/%3e%3ccircle%20opacity='0.3'%20cx='68'%20cy='139'%20r='72'%20fill='url(%23paint3_linear_2043_6253)'/%3e%3cpath%20opacity='0.1'%20d='M145.5%20-13.4999L68%2064.0002L-9.50009%20-13.4999'%20stroke='white'%20stroke-width='20'/%3e%3cpath%20opacity='0.2'%20d='M145.5%20-57.4999L68%2020.0002L-9.50009%20-57.4999'%20stroke='white'%20stroke-width='20'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2043_6253'%20x1='68'%20y1='0'%20x2='68'%20y2='80'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FF6670'/%3e%3cstop%20offset='1'%20stop-color='%23FF3E3B'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_2043_6253'%20x1='105'%20y1='57'%20x2='121.5'%20y2='88'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23E91228'/%3e%3cstop%20offset='1'%20stop-color='%23FF5357'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_2043_6253'%20x1='32.5'%20y1='56.5'%20x2='18.5'%20y2='78'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23E91228'/%3e%3cstop%20offset='1'%20stop-color='%23FF5357'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_2043_6253'%20x1='68'%20y1='67'%20x2='68'%20y2='95.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23E91228'/%3e%3cstop%20offset='1'%20stop-color='%23FF5357'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_2043_6253'%3e%3crect%20width='136'%20height='80'%20rx='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
  color: var(--color-white);
  background-repeat: no-repeat;
  background-size: cover;
}
.home .game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 20px;
}
.home .game-grid .game-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.home .game-grid .game-item .game-icon {
  width: 98.06px;
  height: 86.06px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-image: url(data:image/webp;base64,UklGRrgNAABXRUJQVlA4WAoAAAAQAAAAlwAAeQAAQUxQSNAJAAAB8FZr27a3zbYJgiAIgiEIQiAYghlEDGoGDoOUgSEYgiCIwTJ/bNu+n8pH/3ZExAQ8/f/YL99+/Hr37//x68+317/T8+/v/pd+/Pjtb/L603WhUGj0SNLSXUqHRDpEROb717/B83+sKSprbYSoi9taUkLUYWbmM9+//FWv7y5LLtsaewhRJCSXZS1yTKFGUfD7X/O7y0iFkBlLcllS1qBGhQiRNChBnPx6+Qv+AyHIWgRRSmUtWXORTpJzKufITPb3l0/7DzQQKWhkBpmRtFznMrNSZI9QJDPF+8sn/U6okRnJMcp9ZnqoEMmDWRdyIPH+/ClfnSsilb2cS9TFTNKWPYckqpaZmSSIn5/x8k41ZtaUhiLkOhKFrBGFoGEQQkKDXH77hB+uMwshZO0qx6CTkTUzS9QSCrkNHy8PvZJOM0kkQVRmiNApa5lRbWQ/IGunMn889MttDUTaIYzsbUHWUCFBKjOFKDNSCKV4feCVpJD7IvdRmxCiiNwnRB5OZI3I/PHAD/elLbIWGnNTUSgiVWgUdKiEDvdJjY/nuw+SWo4hxxIKbSGXSUEhEUSC5Fh3guDb1W8ebuxRZkWERl0EhUQS5DIskcvIMfz36jsqGokkLWtmMhfZg1DQ8rnVokNQo4iPq5/kwQhCck6VWYREkaxBoyREqiCItMzM8HLzASkVYmmV2ZCZNXKszBwjChEyU0uRRiiKrxfPjmHMRDKypggtlkaSUo2soUeEZOY267eLL0tyDknOISXKudFCCZFZyJ6ZlE9MqvF28UpKoXEfmSnIMTPIzBqp7JUZhNESIef4cfHVnkOdshYJspZqzKCRCJnlMlFmZuSmcvdtBJVZSCdkTaOtkMscU+giayMzsxyDeLv4TghK9jJqUaQkM2yhtpCZNdlTSGWmFJJSfLv4wxqp0NCKJjGkQjJDUuV2yWyRNSGIKDPi68XPzUDOITknxswaFSFSkbWl0SlFztlT8Hrxi1BRtDQia6MUMmuTzw5CMksotFRaRPhy8YGci1rWUTmIIqlcVy2NhEKZSaXIJ8fzhetSEio5lxkk6TESJLlNMquU29BI8HR+2VrImtlI1pZyTkgSyVpmlGRthUOUY9b3i1cUIi2FULlcIgqZmSlb9giZlexN56Ig+Xnxm5k8Xjk2aJRj41ikI2WGpNAB6eT+vxffFkSnENoiJKG2GVWuc0yUiBSt0Ahtie8Xb2hVUQeENlRBaamQnBtaigRZQxIich3eLv4wc1mOkT3Zs5aEzCKlU2Z3pAq5rkV8vfippSWzJTpEaohUzpE9CB32EZqUy7IXvF6hrJGHy3GUyJoolARJpFqS6xAtQZTo7h1BjWoUiiBqqRghOQ/a1kJISSp7JXsWjZcLhGQgnxxt5bYiRpQq1yWSIEUqtFw+nZ9dtiVaolNQhr0F+ewWJCSloRzTEh8XXxBSMlLITKhEZSaNIseOtKXpsmhS9lzm18WrPWxKQpI9lb1IygxlDUJyG0IpMzOqQ/y8+LpFIbKmiEpBbbcJSUXSSCmKJGtBFEkJHX5cvB1CoxrlGEIUlRBymxDJPswqEQSRELl8u/hOQjIjx3KdtDo3OhBLGmuqPJrIfopvF39ihAhB4zZCEtqCRJmZWSMkpxolKOT6t4ufgqSkpexREFQqJSKicmzQkFmOEZXcJ4TXi/ftwRwr2ROyhpKQWUopCvnUlNCSkvPLxcepSqdGUUJB1aIDWXMOKms3oewtoYqW59OzNdlzzrHIGiSyJkVCKkm0iKhtNs5F1nw8nV9G9oJqBC1mhyp7yDmVNYI2ndIpDUuD94vXm8xEp0ejFDXORYgoFcpeZc+srCGXPy9+owOFlK46hGC4DgkFQSghLCFSlMu0/Pfi26BT9hIyQ46ZoaXcFxFlTY5tJbdx+H7xhqxFW2TWWGtbO5QZOlgr120z5bKosr5d/EEjIfsIQZS1DufRTUiEtiRrG6JIomh8vfhJ1rKmQc455lgo95mZyQyR6pTsmZGE14tfck72JMdGV+UcnYRQSidUORwTDWP/cvFBHahROOThtpbMEpXIzAghGbOlJIScny+sIQkiUZIONbLXRUJmSMjMmj1EJcsxjafzy4ggZM2n5uEsORYqI6TlNlJySsl8v3gdZFlR6CJCZtJoVGbIOais3ZFjZjj9fIyGPTJDglSUY1JmZkIqDVqUKGRtICif8PWEUJA159xGyWXOyTGC7AlBp8ie8OPi7RQip2RG0tYij0dbGoVoqcZtZQ3Z3y6+aztuGo9XyN4SIiRkBrkMS1tQuUx8u/jTsason+GyrFlzDMqMIiQEUaTMGjF+u/h5IopCLkOEOp0ja8iarcg5M3uQ2RK8XrwfkjXX2ZvWItpQZB2VRBIhiU7Za1C2lwufncanRtZQ7rNmzTnzlESQUNvT+XlptLXMdBNdleyhA7KmdNrHnplI9nxcfFkuo5ZuGoRikWNEQgV5MD0SUapkLX5dvKKRCHk0SWY5hk57ZqJCKLNFITPJMfvPi6/2HKNRh3371MyyJshQaAhZC5Wii+LHxbfDZSn4hKKlEVIq58yslaxZG/eZmfH94o1OjWO0hARJSGZQZktCc0BJUIrSCCEo89vFH65bCoKQz4y07NmTskeQmYQge7mMr3dpi3IsUlAqERrJbFuDIKJCaUjj3LS24PXiDacZLfchaxAO1GmPHCuEzCVEpHL95eIbWZN1VHrgE+tglgiiDo5JjiFSQqPwfPEVGrMUJUuj0WOzLWvIukTIzLmxZiHEx9PlC3LMmpkHUxFCEYIiexSKJAiNhg6oQeHnzdMHOmjZE13cFlmj/E2DxlpK0FB8v/rTbUTJnnQKQWY590hbpNNnJ5L1t6tvo21GCUHQiFAQIiEiocyCHNvSIaJQjh9P188fQiNr9uQcS84ZouyZiQqhzKy1zCTH8OPu6Q9zeTQ5R4ukcRlR1gTZQ7JnrTGji9cHXkdoREiEHltrhDRyznUla4PGfWb49fToHy5D9sgMCkJLLgtqW5sQGkEpSiGEBK8PvXxcHIs8nstEauw5ltwGmckMshfBj6fHv9EWcixSI4q2rJmN6CCIKCgJKZelcnx/+YSnn66j5T5kDXogD0aOyZ65hIio5evTZz6/E8k60kPHZbaRNRGERh7MmhBB5tvT5768O4bIDIVG22dG1pD1FFpyzrnD96fPfnnfco4IskbRklILiuylqJwbOtHh+P3p819+LTpRIsck/+AECaGUxtvTX/o2MiN7CjnW36/tPkGZ769Pf/GXd2uUEOQU+ce2JYLI/P789Nd/fR/Inof/IWW2KEjmz9env+dvf3yM/5nvb89Pf+PXtz9/ffwPeP/149vL0+cDVlA4IMIDAAAwHwCdASqYAHoAPjEYiUQiIaERqgVwIAMEsoN3mt/vwxc97qJ7+j5Z7nDwj0dKGev6eb5gH6Z7gDzTf7d/sP4x2AH64dad6AH8U/m3pp/sV8FH7Y/tP7L7lXO1wWf8dtzsrFs9FUD4+lTmlwPQS91cLSdAglcph+T+cx+r2sSImv/+F/xGr83CPLMJNgQ4BqzhenPlxYc0kROzOVJH8J63/3P8yO/r4/9CyodT7wNAlnq6vbImwzy8QLYhRCWDJBCCAqVyQnGwKnUHi/iYeirqZGNemdB85OMRGByFsgH9kRnHl7u3+WKnR1AORG3I1wnyAitTB79MqKcdHAjfeF+Y32AA/v7uqgAAAqPNMMkCYP/j/tDnMHCfa/6c4OBNn5o/rOQAfMrqf14DS4v1Gn6IH3FD1z/9noCOqJHR6qW+q8GTvZk89pQfAxAKPOhbtCDvi5v2Zd+3SqSnczqbb/UXn/8On1XGU59NxFKlj4DjgMLiLDjkin/Mvk1Xy9/7ee4iYclP7JVOyK4OJ5/qdyh8b8UlZOtPCHB/E+xN9cYHD++XX+GZG6ojUx5Aku8qVk0m/Uh9s/K9RVurv62dJ0XYRUvAy+sYYw6M+rzVBcpoBq8Oc3LutwWGKQmzsPG4eY1ijl2e5Pp1jwJA8+AVFRvrMXaTS++WYeKRUJxr49/iHjtNTsp/zoqJQbw7Hh7IaPgg+6MS74yyzGNRlc0UCq4GudUS38m7sXQ2PmuXEuIup3Z7rHfC4XnGnvOKQaLL9vxdPnQp+oOUnGbkeEn3SAI0dzBQ0YpAimlVAZXqiND+mB9uqEYx8VxlwjyRULUhFYzAadEUwAech7YYlMHL4g+mXaPdR6eR1mcm4kwTPsIRp7/IH/Py6dvxHWqgq8/O1r+X62ej7AL04Ca0qPVnEr/gepo3hedikHpBpaqV4eHoILydTD+PZQa+Z5kJKeb2cYyVJXln6Pqu2Dl17pMrp2vPCV9Nw0XrQeayPun+Q074GgwtjUHvRFMzBr/0lP//7y0TjhNfZUPvavfvVtmH2Ke+zctsV38ne/Uy9+v/nVLdljJT7PW4eYnrAfHNNyv9+xkIXH7788Aoy1z/Csd4/odKI7b1cKXmyOZnPh3tQrmWtuQYOTyjfSJ+ofMw2jv3LFd0KT+CZTCw4YEXMA9QCMgzv9DSCSw6XNXfC62v1QPy9+zGLOn+G5YTadESLKhJ1PaP5DP7wlxKfGtrAZ1NyLx+/LKLIbkY/47/UuagXA45sv0RK3gKoaDuM9nlBlLIAAAAAA==);
  background-repeat: no-repeat;
  background-size: cover;
}
.home .game-grid .game-item .game-icon .icon-content {
  font-size: 32px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.home .game-grid .game-item .game-icon .icon-content .game_img {
  width: 92.06px;
  height: 73.06px;
  position: absolute;
  top: -33px;
  right: -48px;
}
.home .game-grid .game-item .game-label {
  font-size: 13px;
  font-weight: 500;
  color: #ffffffe6;
  text-align: center;
}
.home .section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 14px 14px 0;
}
.home .section-header .section-icon {
  display: flex;
  align-items: center;
  font-size: 20px;
}
.home .section-header .section-title-lottery {
  font-size: 14.933px;
  font-weight: 700;
}
.home .lottery-games {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 12px;
}
.home .lottery-games .lottery-card {
  width: 100%;
  height: 106.66px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px #0000004d;
  border-radius: 10px;
}
.home .lottery-games .lottery-card img {
  width: 100%;
  height: 106.66px;
}
.home .lottery-games .lottery-card .lottery-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 2;
}
.home .lottery-games .lottery-card .lottery-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.home .lottery-games .lottery-card .lottery-content .lottery-number {
  background: #ffffff40;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  align-self: flex-start;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px #0003;
}
.home .lottery-games .lottery-card .lottery-content .lottery-number .number {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-white);
}
.home .lottery-games .lottery-card .lottery-content .lottery-icon {
  font-size: 48px;
  align-self: flex-end;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.home .lottery-games .lottery-card .lottery-content .decorative-elements {
  position: absolute;
  bottom: 15px;
  right: 15px;
}
.home .lottery-games .lottery-card .lottery-content .decorative-elements .ball {
  font-size: 12px;
  margin-left: 4px;
}
.home .lottery-game-full {
  height: 100px;
  border-radius: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px #0000004d;
}
.home .lottery-game-full:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px #0006;
}
.home .lottery-game-full.k3-game .game-full-content {
  background: linear-gradient(90deg, #f97316, #ea580c, #10b981);
}
.home .lottery-game-full.number-5d-game .game-full-content {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.home .lottery-game-full .game-full-content {
  height: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.home .lottery-game-full .game-full-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.home .lottery-game-full .game-full-content .game-full-icon {
  font-size: 40px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.home .lottery-game-full .add-desktop-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0a0e27f2;
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px #00000080;
}
.home .lottery-game-full .add-desktop-btn:hover {
  transform: translate(-50%, -50%) scale(1.05);
  background: #0a0e27;
}
.wallet-sub-section {
  display: flex;
  flex-direction: column;
  align-items: space-between;
  justify-content: end;
}
@media (min-width: 398px) and (max-width: 425px) {
  .lottery-games .lottery-card img {
    width: 165px !important;
    height: 105.5px !important;
  }
}
@media (max-width: 400px) {
  .game-icon {
    width: 85.06px !important;
    height: 70.06px !important;
  }
  .game-icon .icon-content {
    font-size: 30px !important;
  }
  .game-icon .icon-content .game_img {
    width: 79.06px !important;
    height: 63.06px !important;
    top: -30px !important;
    right: -36px !important;
  }
  .lottery-games {
    gap: 10px !important;
  }
  .lottery-games .lottery-card {
    width: 100% !important;
    height: 86.66px !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px #0000004d;
  }
  .lottery-games .lottery-card img {
    width: 100% !important;
    height: 86.66px !important;
  }
  .lottery-games .lottery-card .lottery-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 2;
  }
  .lottery-games .lottery-card .lottery-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  .lottery-games .lottery-card .lottery-content .lottery-number {
    background: #ffffff40;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    align-self: flex-start;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 8px #0003;
  }
  .lottery-games .lottery-card .lottery-content .lottery-number .number {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
  }
  .lottery-games .lottery-card .lottery-content .lottery-icon {
    font-size: 48px;
    align-self: flex-end;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }
  .lottery-games .lottery-card .lottery-content .decorative-elements {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
  .lottery-games .lottery-card .lottery-content .decorative-elements .ball {
    font-size: 12px;
    margin-left: 4px;
  }
}
@media (max-width: 450px) {
  .game-grid .game-icon {
    width: 87px !important;
    height: 72px !important;
  }
  .game-grid .game-icon .icon-content {
    font-size: 30px !important;
  }
  .game-grid .game-icon .icon-content .game_img {
    width: 81.06px !important;
    height: 65.06px !important;
  }
  .game-grid .game-label {
    font-size: 12px !important;
  }
}
@media (max-width: 400px) {
  .game-grid .game-icon {
    width: 75.06px !important;
    height: 60.06px !important;
  }
  .game-grid .game-icon .icon-content {
    font-size: 28px !important;
  }
  .game-grid .game-icon .icon-content .game_img {
    width: 69.06px !important;
    height: 53.06px !important;
  }
  .game-grid .game-label {
    font-size: 11px !important;
  }
}
.winning-header {
  padding: 0.875rem 0rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 500;
}
.winning-information {
  background: var(
    --bg_HomeModule_Padding,
    linear-gradient(180deg, #001c54 0%, #000c33 100%)
  );
  border: 0.01333rem solid var(--bg_HomeModule_Stroke, #224ba2);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.winning-information .winners-container {
  padding: 0rem 1rem 1rem;
  display: flex;
  flex-direction: column;
}
.winning-information .no-winners {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  padding: 2rem 1rem;
}
.winner-card {
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-bottom: 1px solid #022c68;
}
.winner-card:last-child {
  border-bottom: 0;
}
.winner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #00ecbe1a;
  border-color: #00ecbe33;
}
.winner-card:nth-child(1) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.1s;
  opacity: 0;
}
.winner-card:nth-child(2) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}
.winner-card:nth-child(3) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}
.winner-card:nth-child(4) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}
.winner-card:nth-child(5) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
}
.winner-card .winner-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
}
.winner-card .game-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-dark);
}
.winner-card .game-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.winner-card .gameIconWrap {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.winner-card .gameIconWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.winner-card .winner-details {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}
.winner-card .winner-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.winner-card .user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--color-primary);
  background: var(--bg-dark);
}
.winner-card .user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.winner-card .winner-username {
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.winner-card .winning-amount-label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.winner-card .winning-amount-label .amount-value {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.875rem;
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate(-20px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@media (max-width: 768px) {
  .winning-information .winning-header {
    padding: 0.75rem 0.875rem;
    font-size: 0.9rem;
  }
  .winning-information .winners-container {
    padding: 0.875rem;
  }
  .winner-card {
    padding: 0.625rem;
  }
  .winner-card .winner-left {
    gap: 0.75rem;
  }
  .winner-card .game-thumbnail {
    width: 45px;
    height: 45px;
  }
  .winner-card .user-avatar {
    width: 22px;
    height: 22px;
  }
  .winner-card .winner-username {
    font-size: 0.85rem;
  }
  .winner-card .winning-amount-label {
    font-size: 0.75rem;
  }
  .winner-card .winning-amount-label .amount-value {
    font-size: 0.8rem;
  }
}
.todays-earnings-section {
  margin-bottom: 24px;
}
.topThree {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.1rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  padding: 0 0.5rem;
}
@media (max-width: 250px) {
  .topThree {
    gap: 0.3rem;
    margin-bottom: 1rem;
    padding: 0 0.3rem;
  }
}
.playerDetails {
  position: absolute;
  bottom: -8px;
  text-align: center;
}
.podiumItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 130px;
  animation: slideUp 0.8s ease-out;
  position: relative;
  min-width: 0;
}
@media (max-width: 250px) {
  .podiumItem {
    max-width: 90px;
  }
}
.podiumItem.first {
  animation-delay: 0.2s;
  margin-bottom: 0;
}
@media (max-width: 250px) {
  .podiumItem.first {
    margin-top: -1rem;
  }
}
.podiumItem.first .laurelFrame {
  width: 135px;
  height: 227px;
}
@media (max-width: 250px) {
  .podiumItem.first .laurelFrame {
    width: 70px;
    height: 70px;
  }
}
.podiumItem.first .avatar {
  width: 80px;
  height: 80px;
}
@media (max-width: 250px) {
  .podiumItem.first .avatar {
    width: 50px;
    height: 50px;
  }
}
.podiumItem.first .rankNumber {
  background: linear-gradient(135deg, gold, orange);
  color: #270a3f;
  font-size: 1.1rem;
  font-weight: 800;
  border: 2px solid #d4af37;
}
@media (max-width: 250px) {
  .podiumItem.first .rankNumber {
    font-size: 0.8rem;
    border-width: 1px;
  }
}
.podiumItem.first .playerName {
  font-weight: 700;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 250px) {
  .podiumItem.first .playerName {
    font-size: 0.75rem;
  }
}
.podiumItem.first .score {
  font-weight: 700;
  background: linear-gradient(189.45deg, #fdf89d 18.42%, #997f3f00 198.14%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3%;
  line-height: 100%;
  font-size: 0.75rem;
  white-space: nowrap;
}
@media (max-width: 250px) {
  .podiumItem.first .score {
    font-size: 0.65rem;
  }
}
.podiumItem.second {
  animation-delay: 0.1s;
}
.podiumItem.second .laurelFrame {
  width: 130px;
  height: 190px;
}
@media (max-width: 250px) {
  .podiumItem.second .laurelFrame {
    width: 60px;
    height: 60px;
  }
}
.podiumItem.second .avatar {
  width: 70px;
  height: 70px;
}
@media (max-width: 250px) {
  .podiumItem.second .avatar {
    width: 45px;
    height: 45px;
  }
}
.podiumItem.second .rankNumber {
  background: linear-gradient(135deg, silver, #e8e8e8);
  color: #333;
  font-weight: 700;
  border: 2px solid #a8a8a8;
}
@media (max-width: 250px) {
  .podiumItem.second .rankNumber {
    font-size: 0.75rem;
    border-width: 1px;
  }
}
.podiumItem.second .playerName {
  font-weight: 600;
  color: #fff;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 250px) {
  .podiumItem.second .playerName {
    font-size: 0.7rem;
  }
}
.podiumItem.second .score {
  font-weight: 700;
  background: linear-gradient(180.8deg, #fcfcfc 40.8%, #4f608e00 119.04%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3%;
  line-height: 100%;
  font-size: 0.75rem;
  white-space: nowrap;
}
@media (max-width: 250px) {
  .podiumItem.second .score {
    font-size: 0.65rem;
  }
}
.podiumItem.third {
  animation-delay: 0.3s;
}
.podiumItem.third .laurelFrame {
  width: 130px;
  height: 194px;
}
@media (max-width: 250px) {
  .podiumItem.third .laurelFrame {
    width: 60px;
    height: 60px;
  }
}
.podiumItem.third .avatar {
  width: 70px;
  height: 70px;
}
@media (max-width: 250px) {
  .podiumItem.third .avatar {
    width: 45px;
    height: 45px;
  }
}
.podiumItem.third .rankNumber {
  background: linear-gradient(135deg, #cd7f32, #e6a057);
  color: #1a1a1a;
  font-weight: 700;
  border: 2px solid #a86632;
}
@media (max-width: 250px) {
  .podiumItem.third .rankNumber {
    font-size: 0.75rem;
    border-width: 1px;
  }
}
.podiumItem.third .playerName {
  font-weight: 600;
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
  max-width: 100%;
  margin-left: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 250px) {
  .podiumItem.third .playerName {
    font-size: 0.7rem;
  }
}
.podiumItem.third .score {
  font-weight: 700;
  background: linear-gradient(169.29deg, #d97635 23.19%, #94563e00 151.08%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3%;
  line-height: 100%;
  font-size: 0.75rem;
  white-space: nowrap;
}
@media (max-width: 250px) {
  .podiumItem.third .score {
    font-size: 0.65rem;
  }
}
.laurelFrame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.laurelFrame .frameImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.laurelFrame .avatarContainer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}
.avatar:hover {
  transform: scale(1.05);
}
.rankNumber {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  box-shadow: 0 2px 8px #00000026;
}
.earnings-information {
  background: linear-gradient(180deg, #09194f, #09194f36);
  border: 0.01333rem solid var(--bg_HomeModule_Stroke, #224ba2);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.earnings-information .earnings-container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.earnings-information .no-earners {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  padding: 2rem 1rem;
}
.earner-card {
  border-radius: 10px;
  padding: 0 0.75rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  border-bottom: 1px solid #022c68;
}
.earner-card:last-child {
  border-bottom: 0;
}
.earner-card:hover {
  transform: translateY(-2px);
  background: #00ecbe0d;
}
.earner-card:nth-child(1) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.1s;
  opacity: 0;
}
.earner-card:nth-child(2) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}
.earner-card:nth-child(3) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}
.earner-card:nth-child(4) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}
.earner-card:nth-child(5) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
}
.earner-card:nth-child(6) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}
.earner-card:nth-child(7) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.7s;
  opacity: 0;
}
.earner-card:nth-child(8) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.8s;
  opacity: 0;
}
.earner-card:nth-child(9) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 0.9s;
  opacity: 0;
}
.earner-card:nth-child(10) {
  animation: slideIn 0.4s ease forwards;
  animation-delay: 1s;
  opacity: 0;
}
.earner-card .ranking-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  color: var(--color-white);
}
.earner-card .earner-details {
  display: flex;
  justify-content: space-between;
  gap: 0.375rem;
  flex: 1;
}
.earner-card .earner-header-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.earner-card .earner-avatar {
  width: auto;
  height: 45px;
}
.earner-card .earner-username {
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.earner-card .earning-amount-label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.earner-card .earning-amount-label .amount-value {
  color: #00ecbe;
  font-weight: 700;
  font-size: 0.95rem;
}
@keyframes pulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@media (max-width: 768px) {
  .earnings-information .earnings-container {
    padding: 0.875rem;
  }
  .earner-card {
    padding: 0.625rem;
    gap: 0.75rem;
  }
  .earner-card .ranking-badge {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  .earner-card .earner-username {
    font-size: 0.85rem;
  }
  .earner-card .earning-amount-label {
    font-size: 0.75rem;
  }
  .earner-card .earning-amount-label .amount-value {
    font-size: 0.85rem;
  }
}
.popup-overlay {
  position: fixed;
  inset: 0;
  background-color: #000000bf;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  padding: 20px;
  height: 100vh;
  max-width: 500px;
  margin: 0 auto;
}
.popup-fullscreen-container {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.popup-banner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 95%;
  max-width: 500px;
  background: transparent;
  border-radius: 12px;
  overflow: visible;
  height: 100vh;
}
.popup-close-btn {
  position: absolute;
  top: -40px;
  right: 5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: #000;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}
.popup-close-btn:hover {
  background: #ffffffe6;
}
.popup-close-btn:active {
  transform: scale(0.95);
}
.popup-banner {
  position: relative;
}
.popup-banner-image {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 10px 40px #0000004d;
  animation: scaleUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scaleUp {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.8;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 480px) {
  .popup-overlay {
    padding: 15px;
  }
  .popup-banner-container {
    max-width: 350px;
  }
  .popup-close-btn {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}
.spinning {
  animation: spin 1s linear infinite;
}
@media (max-width: 465px) {
  .topThree {
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0 0.3rem;
  }
  .podiumItem.first .laurelFrame {
    width: 110px;
    height: 185px;
  }
  .podiumItem.first .avatar {
    width: 65px;
    height: 65px;
  }
  .podiumItem.first .rankNumber {
    font-size: 0.95rem;
  }
  .podiumItem.first .playerName {
    font-size: 0.65rem;
  }
  .podiumItem.first .score {
    font-size: 0.7rem;
  }
  .podiumItem.second .laurelFrame,
  .podiumItem.third .laurelFrame {
    width: 105px;
    height: 155px;
  }
  .podiumItem.second .avatar,
  .podiumItem.third .avatar {
    width: 58px;
    height: 58px;
  }
  .podiumItem.second .rankNumber,
  .podiumItem.third .rankNumber {
    font-size: 0.8rem;
  }
  .podiumItem.second .playerName,
  .podiumItem.third .playerName {
    font-size: 0.65rem;
  }
  .podiumItem.second .score,
  .podiumItem.third .score {
    font-size: 0.68rem;
  }
  .earner-card {
    padding: 0 0.6rem 0.6rem;
    gap: 1rem;
  }
  .earner-card .ranking-badge {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }
  .earner-card .earner-avatar {
    height: 40px;
  }
  .earner-card .earner-username {
    font-size: 0.8rem;
  }
  .earner-card .earning-amount-label {
    font-size: 0.7rem;
  }
  .earner-card .earning-amount-label .amount-value {
    font-size: 0.8rem;
  }
}
@media (max-width: 400px) {
  .topThree {
    gap: 0.4rem;
    margin-bottom: 0.8rem;
  }
  .podiumItem.first .laurelFrame {
    width: 95px;
    height: 160px;
  }
  .podiumItem.first .avatar {
    width: 55px;
    height: 55px;
  }
  .podiumItem.first .rankNumber {
    font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
  }
  .podiumItem.first .playerName {
    font-size: 0.6rem;
  }
  .podiumItem.first .score {
    font-size: 0.65rem;
  }
  .podiumItem.second .laurelFrame,
  .podiumItem.third .laurelFrame {
    width: 90px;
    height: 135px;
  }
  .podiumItem.second .avatar,
  .podiumItem.third .avatar {
    width: 50px;
    height: 50px;
  }
  .podiumItem.second .rankNumber,
  .podiumItem.third .rankNumber {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
  }
  .podiumItem.second .playerName,
  .podiumItem.third .playerName {
    font-size: 0.55rem;
    margin-left: 0.3rem;
  }
  .podiumItem.second .score,
  .podiumItem.third .score {
    font-size: 0.62rem;
  }
  .earner-card {
    padding: 0 0.5rem 0.5rem;
    gap: 0.8rem;
  }
  .earner-card .ranking-badge {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
  .earner-card .earner-header-row {
    gap: 1rem;
  }
  .earner-card .earner-avatar {
    height: 36px;
  }
  .earner-card .earner-username {
    font-size: 0.75rem;
  }
  .earner-card .earning-amount-label {
    font-size: 0.68rem;
  }
  .earner-card .earning-amount-label .amount-value {
    font-size: 0.75rem;
  }
}
@media (max-width: 360px) {
  .topThree {
    gap: 0.3rem;
    margin-bottom: 0.7rem;
  }
  .podiumItem {
    max-width: 100px;
  }
  .podiumItem.first .laurelFrame {
    width: 85px;
    height: 145px;
  }
  .podiumItem.first .avatar {
    width: 50px;
    height: 50px;
  }
  .podiumItem.first .rankNumber {
    font-size: 0.8rem;
    padding: 0.18rem 0.55rem;
  }
  .podiumItem.first .playerName {
    font-size: 0.65rem;
  }
  .podiumItem.first .score {
    font-size: 0.6rem;
  }
  .podiumItem.second .laurelFrame,
  .podiumItem.third .laurelFrame {
    width: 80px;
    height: 120px;
  }
  .podiumItem.second .avatar,
  .podiumItem.third .avatar {
    width: 45px;
    height: 45px;
  }
  .podiumItem.second .rankNumber,
  .podiumItem.third .rankNumber {
    font-size: 0.7rem;
    padding: 0.18rem 0.45rem;
  }
  .podiumItem.second .playerName,
  .podiumItem.third .playerName {
    font-size: 0.58rem;
    margin-left: 0.25rem;
  }
  .podiumItem.second .score,
  .podiumItem.third .score {
    font-size: 0.58rem;
  }
  .earner-card {
    padding: 0 0.45rem 0.45rem;
    gap: 0.7rem;
  }
  .earner-card .ranking-badge {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
  }
  .earner-card .earner-header-row {
    gap: 0.8rem;
  }
  .earner-card .earner-avatar {
    height: 32px;
  }
  .earner-card .earner-username {
    font-size: 0.7rem;
  }
  .earner-card .earning-amount-label {
    font-size: 0.65rem;
  }
  .earner-card .earning-amount-label .amount-value {
    font-size: 0.7rem;
  }
}
@media (max-width: 320px) {
  .topThree {
    gap: 0.25rem;
    margin-bottom: 0.6rem;
    padding: 0 0.2rem;
  }
  .podiumItem {
    max-width: 85px;
  }
  .podiumItem.first .laurelFrame {
    width: 75px;
    height: 130px;
  }
  .podiumItem.first .avatar {
    width: 45px;
    height: 45px;
  }
  .podiumItem.first .rankNumber {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
  }
  .podiumItem.first .playerName {
    font-size: 0.59rem;
  }
  .podiumItem.first .score {
    font-size: 0.58rem;
  }
  .podiumItem.second .laurelFrame,
  .podiumItem.third .laurelFrame {
    width: 70px;
    height: 110px;
  }
  .podiumItem.second .avatar,
  .podiumItem.third .avatar {
    width: 40px;
    height: 40px;
  }
  .podiumItem.second .rankNumber,
  .podiumItem.third .rankNumber {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
  }
  .podiumItem.second .playerName,
  .podiumItem.third .playerName {
    font-size: 0.52rem;
    margin-left: 0.2rem;
  }
  .podiumItem.second .score,
  .podiumItem.third .score {
    font-size: 0.55rem;
  }
  .earner-card {
    padding: 0 0.4rem 0.4rem;
    gap: 0.6rem;
  }
  .earner-card .ranking-badge {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }
  .earner-card .earner-header-row {
    gap: 0.7rem;
  }
  .earner-card .earner-avatar {
    height: 28px;
  }
  .earner-card .earner-username {
    font-size: 0.65rem;
  }
  .earner-card .earning-amount-label {
    font-size: 0.6rem;
  }
  .earner-card .earning-amount-label .amount-value {
    font-size: 0.65rem;
  }
}
@media (max-width: 280px) {
  .topThree {
    gap: 0.2rem;
    margin-bottom: 0.5rem;
    padding: 0 0.15rem;
  }
  .podiumItem {
    max-width: 75px;
  }
  .podiumItem.first .laurelFrame {
    width: 68px;
    height: 115px;
  }
  .podiumItem.first .avatar {
    width: 40px;
    height: 40px;
  }
  .podiumItem.first .rankNumber {
    font-size: 0.7rem;
    padding: 0.12rem 0.45rem;
  }
  .podiumItem.first .playerName {
    font-size: 0.58rem;
  }
  .podiumItem.first .score {
    font-size: 0.55rem;
  }
  .podiumItem.second .laurelFrame,
  .podiumItem.third .laurelFrame {
    width: 63px;
    height: 100px;
  }
  .podiumItem.second .avatar,
  .podiumItem.third .avatar {
    width: 38px;
    height: 38px;
  }
  .podiumItem.second .rankNumber,
  .podiumItem.third .rankNumber {
    font-size: 0.6rem;
    padding: 0.12rem 0.35rem;
  }
  .podiumItem.second .playerName,
  .podiumItem.third .playerName {
    font-size: 0.55rem;
    margin-left: 0.15rem;
  }
  .podiumItem.second .score,
  .podiumItem.third .score {
    font-size: 0.52rem;
  }
  .earner-card {
    padding: 0 0.35rem 0.35rem;
    gap: 0.5rem;
  }
  .earner-card .ranking-badge {
    width: 18px;
    height: 18px;
    font-size: 0.55rem;
  }
  .earner-card .earner-header-row {
    gap: 0.6rem;
  }
  .earner-card .earner-avatar {
    height: 26px;
  }
  .earner-card .earner-username {
    font-size: 0.6rem;
  }
  .earner-card .earning-amount-label {
    font-size: 0.58rem;
  }
  .earner-card .earning-amount-label .amount-value {
    font-size: 0.62rem;
  }
}
@media (max-width: 260px) {
  .topThree {
    gap: 0.15rem;
    margin-bottom: 0.4rem;
    padding: 0 0.1rem;
  }
  .podiumItem {
    max-width: 70px;
  }
  .podiumItem.first .laurelFrame {
    width: 62px;
    height: 105px;
  }
  .podiumItem.first .avatar {
    width: 38px;
    height: 38px;
  }
  .podiumItem.first .rankNumber {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-width: 1px;
  }
  .podiumItem.first .playerName {
    font-size: 0.55rem;
  }
  .podiumItem.first .score {
    font-size: 0.52rem;
  }
  .podiumItem.second .laurelFrame,
  .podiumItem.third .laurelFrame {
    width: 58px;
    height: 92px;
  }
  .podiumItem.second .avatar,
  .podiumItem.third .avatar {
    width: 35px;
    height: 35px;
  }
  .podiumItem.second .rankNumber,
  .podiumItem.third .rankNumber {
    font-size: 0.58rem;
    padding: 0.1rem 0.32rem;
    border-width: 1px;
  }
  .podiumItem.second .playerName,
  .podiumItem.third .playerName {
    font-size: 0.52rem;
    margin-left: 0.1rem;
  }
  .podiumItem.second .score,
  .podiumItem.third .score {
    font-size: 0.5rem;
  }
  .earnings-container {
    padding: 0.75rem;
    gap: 0.4rem;
  }
  .earner-card {
    padding: 0 0.3rem 0.3rem;
    gap: 0.45rem;
  }
  .earner-card .ranking-badge {
    width: 16px;
    height: 16px;
    font-size: 0.52rem;
  }
  .earner-card .earner-header-row {
    gap: 0.5rem;
  }
  .earner-card .earner-avatar {
    height: 24px;
  }
  .earner-card .earner-username {
    font-size: 0.58rem;
  }
  .earner-card .earning-amount-label {
    font-size: 0.55rem;
  }
  .earner-card .earning-amount-label .amount-value {
    font-size: 0.6rem;
  }
}
._carouselContainer_lf36g_2 {
  width: 100%;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
._embla_lf36g_10 {
  overflow: hidden;
  border-radius: 0.5rem;
}
._emblaContainer_lf36g_15 {
  display: flex;
  backface-visibility: hidden;
  touch-action: pan-y;
}
._emblaSlide_lf36g_21 {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}
._bannerImg_lf36g_28 {
  width: 100%;
  height: 162px;
  object-fit: fill;
  object-position: center;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: block;
}
._bannerImg_lf36g_28:hover {
  transform: scale(1.02);
}
@media (max-width: 600px) {
  ._bannerImg_lf36g_28 {
    height: 150px;
  }
}
@media (max-width: 400px) {
  ._bannerImg_lf36g_28 {
    height: 120px;
  }
}
._loading_lf36g_53 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 162px;
  color: #666;
  font-size: 0.9rem;
  background: #667eea0d;
  border-radius: 0.5rem;
  animation: _pulse_lf36g_1 2s ease-in-out infinite;
}
@media (max-width: 600px) {
  ._loading_lf36g_53 {
    height: 150px;
  }
}
@media (max-width: 400px) {
  ._loading_lf36g_53 {
    height: 120px;
  }
}
._errorMessage_lf36g_76 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 162px;
  color: #e74c3c;
  font-size: 0.9rem;
  background: #e74c3c0d;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}
@media (max-width: 600px) {
  ._errorMessage_lf36g_76 {
    height: 150px;
  }
}
@media (max-width: 400px) {
  ._errorMessage_lf36g_76 {
    height: 120px;
  }
}
@keyframes _pulse_lf36g_1 {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.6;
  }
}
._wallet_cont_wsbbg_1 {
  width: 100%;
  height: max-content;
  border-radius: 0.65rem;
  background: linear-gradient(180deg, var(--bg-wallet), var(--bg-wallet));
  padding: 14.9332px 20.8px 16px 14.4px;
}
._accountPage_wsbbg_9 {
  width: 100%;
  max-width: 500px;
  padding: 0;
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
  margin: 0 auto;
  background: var(--bg-dark);
  min-height: 100vh;
  overflow-y: auto;
}
._account_subAcc_wsbbg_20 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: max-content;
  padding: 0 16px 16px;
  position: relative;
  margin-top: -80px;
  z-index: 1;
}
._profileSection_wsbbg_32 {
  background: var(--bg-medium);
  padding: 35px 16px 60px;
  position: relative;
  border-radius: 1rem;
  height: auto;
  min-height: 224px;
}
._profileHeader_wsbbg_41 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}
._profileAvatar_wsbbg_48 {
  width: 74.66px;
  height: 74.66px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
._profileAvatar_wsbbg_48 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._profileInfo_wsbbg_62 {
  flex: 1;
}
._profileTop_wsbbg_66 {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.2rem;
}
._profileName_wsbbg_73 {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.3px;
  margin: 0;
}
._badgeIcon_wsbbg_81 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #4caf50;
  color: #fff;
  padding: 0.1rem 0.5rem;
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 600;
}
._profileId_wsbbg_93 {
  width: max-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  background: var(--bg-badge);
  border-radius: 0.8rem;
  padding: 0.05rem 0.5rem;
}
._uidLabel_wsbbg_105 {
  color: var(--color-white);
  border-radius: 4px;
  font-size: 11.73px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
._uidNumber_wsbbg_113 {
  font-size: 11.73px;
  color: var(--color-white);
  font-weight: 500;
}
._copyBtn_wsbbg_119 {
  background: transparent;
  border: none;
  color: #ffffffb3;
  font-size: 14px;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
._copyBtn_wsbbg_119:hover {
  color: var(--color-white);
}
._copyBtn_wsbbg_119 svg {
  width: 14px;
  height: 14px;
}
._lastLogin_wsbbg_139 {
  font-size: 11.772px;
  color: var(--color-white);
  margin: 0;
}
._balanceSection_wsbbg_145 {
  padding: 0 0 10.6668px;
  position: relative;
}
._balanceSection_wsbbg_145:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 0.01333rem;
  border-bottom: 0.01333rem solid var(--bg-light);
  color: #e6e8e8;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
._balanceLabel_wsbbg_164 {
  font-size: 14.9332px;
  color: var(--color-secondary);
}
._balanceAmount_wsbbg_169 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
._currency_wsbbg_176 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
}
._amount_wsbbg_182 {
  font-size: 19.2px;
  font-weight: 600;
  color: var(--color-tertiary);
  letter-spacing: -0.5px;
}
._refreshBtn_wsbbg_189 {
  background: transparent;
  border: none;
  color: #fff9;
  font-size: 12px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
._refreshBtn_wsbbg_189 svg {
  width: 16px;
  height: 16px;
  transition: transform 0.6s ease-in-out;
}
._refreshBtn_wsbbg_189:hover {
  color: #fffc;
}
._refreshBtn_wsbbg_189._rotating_wsbbg_209 svg {
  animation: _rotate_wsbbg_1 0.6s ease-in-out;
}
@keyframes _rotate_wsbbg_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._quickActions_wsbbg_221 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: space-between;
  padding-top: 16px;
}
._actionButton_wsbbg_229 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.332px;
  cursor: pointer;
  background: transparent;
}
._actionIcon_wsbbg_238 {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.2s;
  color: var(--color-white);
}
._actionLabel_wsbbg_249 {
  font-size: 14.9332px;
  color: var(--color-white);
  font-weight: 500;
}
._menuGrid_wsbbg_255 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
._menuItem_wsbbg_261 {
  background: var(--bg-medium);
  border-radius: 0.333rem;
  padding: 9.6px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
._menuIcon_wsbbg_270 {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--color-white);
}
._menuIcon_wsbbg_270._blue_wsbbg_281 {
  background: linear-gradient(135deg, #3b82f659, #2563eb40);
}
._menuIcon_wsbbg_270._green_wsbbg_284 {
  background: linear-gradient(135deg, #10b98159, #05966940);
}
._menuIcon_wsbbg_270._red_wsbbg_287 {
  background: linear-gradient(135deg, #ef444459, #dc262640);
}
._menuIcon_wsbbg_270._orange_wsbbg_290 {
  background: linear-gradient(135deg, #f9731659, #ea580c40);
}
._menuIcon_wsbbg_270 svg {
  width: 24px;
  height: 24px;
}
._menuText_wsbbg_298 {
  flex: 1;
  text-align: left;
  padding: 5.333px;
}
._menuText_wsbbg_298 h4 {
  font-size: 14.9332px;
  font-weight: 600;
  color: var(--color-tertiary);
}
._menuText_wsbbg_298 p {
  font-size: 12.8px;
  color: var(--color-secondary);
}
._menuList_wsbbg_313 {
  padding: 0 10.6668px 5.3332px;
  background: var(--bg-medium);
  border-radius: 16px;
}
._menuListItem_wsbbg_319 {
  padding: 13.3332px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  position: relative;
}
._menuListItem_wsbbg_319:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 0.01333rem;
  border-bottom: 0.01333rem solid var(--bg-light);
  color: #e6e8e8;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
._menuListItem_wsbbg_319:last-child:after {
  display: none;
}
._menuListIcon_wsbbg_347 {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--color-white);
}
._menuListIcon_wsbbg_347._green_wsbbg_284 {
  background: linear-gradient(135deg, #10b98159, #05966940);
}
._menuListIcon_wsbbg_347._cyan_wsbbg_361 {
  background: linear-gradient(135deg, #06b6d459, #0891b240);
}
._menuListIcon_wsbbg_347 svg {
  width: 24px;
  height: 24px;
}
._menuListLabel_wsbbg_369 {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-white);
  text-align: left;
}
._menuListRight_wsbbg_377 {
  display: flex;
  align-items: center;
  gap: 10px;
}
._notificationBadge_wsbbg_383 {
  background: var(--color-error);
  color: var(--color-white);
  padding: 3px 11px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
}
._languageValue_wsbbg_394 {
  font-size: 14px;
  color: #fff9;
  font-weight: 500;
}
._arrow_wsbbg_400 {
  font-size: 26px;
  color: #ffffff4d;
  font-weight: 300;
  line-height: 1;
}
._serviceCenter_wsbbg_407 {
  padding: 21.3332px 12.8px;
  background: var(--bg-medium);
  margin-bottom: 20px;
  border-radius: 16px;
}
._sectionTitle_wsbbg_414 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 26.4668px;
  padding-left: 2px;
}
._serviceGrid_wsbbg_422 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
._serviceItem_wsbbg_428 {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
._serviceIcon_wsbbg_438 {
  color: var(--color-white);
}
._serviceIcon_wsbbg_438 svg {
  width: 28px;
  height: 28px;
}
._serviceLabel_wsbbg_446 {
  font-size: 13px;
  color: #ffffffe6;
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
}
._logoutBtn_wsbbg_454 {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  border-radius: 32px;
  padding: 8px 6px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
._logoutBtn_wsbbg_454 svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-primary);
  stroke-width: 2.5;
}
._logoutText_wsbbg_474 {
  font-size: 16px;
  font-weight: 500;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
  color: var(--color-primary);
}
@media (max-width: 500px) {
  ._accountPage_wsbbg_9 ._serviceCenter_wsbbg_407 ._serviceGrid_wsbbg_422 {
    gap: 12px;
  }
  ._accountPage_wsbbg_9
    ._serviceCenter_wsbbg_407
    ._serviceGrid_wsbbg_422
    ._serviceItem_wsbbg_428
    ._serviceLabel_wsbbg_446 {
    font-size: 12px;
  }
}
._modalOverlay_qbs8w_1 {
  position: fixed;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  inset: 0;
  background: #0009;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: _fadeIn_qbs8w_1 0.2s ease-out;
}
._modalContainer_qbs8w_19 {
  background: var(--bg-wallet);
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 40px #0000004d;
  animation: _slideUp_qbs8w_1 0.3s ease-out;
  overflow: hidden;
}
._modalHeader_qbs8w_29 {
  padding: 1.5rem 1.5rem 1rem;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
._modalIcon_qbs8w_35 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  animation: _bounce_qbs8w_1 0.5s ease-out;
}
._modalTitle_qbs8w_41 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}
._modalBody_qbs8w_48 {
  padding: 1.5rem;
  text-align: center;
}
._modalMessage_qbs8w_53 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.5;
}
._modalActions_qbs8w_61 {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--bg-dark);
}
._cancelBtn_qbs8w_68,
._confirmBtn_qbs8w_69 {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}
._cancelBtn_qbs8w_68:active,
._confirmBtn_qbs8w_69:active {
  transform: scale(0.98);
}
._cancelBtn_qbs8w_68 {
  background: #f5f5f5;
  color: #666;
}
._cancelBtn_qbs8w_68:hover {
  background: #e5e5e5;
}
._confirmBtn_qbs8w_69 {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 4px 12px #ef44444d;
}
._confirmBtn_qbs8w_69:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 16px #ef444466;
}
@keyframes _fadeIn_qbs8w_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_qbs8w_1 {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes _bounce_qbs8w_1 {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@media (max-width: 480px) {
  ._modalContainer_qbs8w_19 {
    max-width: calc(100% - 2rem);
  }
  ._modalTitle_qbs8w_41 {
    font-size: 1.25rem;
  }
  ._modalMessage_qbs8w_53 {
    font-size: 0.9rem;
  }
  ._modalActions_qbs8w_61 {
    flex-direction: column;
  }
  ._cancelBtn_qbs8w_68,
  ._confirmBtn_qbs8w_69 {
    width: 100%;
  }
}
._deposit_1g8w8_1 {
  max-width: 500px;
  margin: 0 auto;
  background: var(--bg-page);
  min-height: 100vh;
  color: var(--color-white);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  position: relative;
  padding-bottom: 80px;
}
._content_1g8w8_12 {
  padding: 0 12.8px 12.8px;
  margin-bottom: 30px;
}
._header_1g8w8_17 {
  position: sticky;
  top: 0;
  background: var(--bg-page);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
._backButton_1g8w8_29 {
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._title_1g8w8_40 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  text-align: center;
}
._historyButton_1g8w8_48 {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  white-space: nowrap;
}
._balanceCard_1g8w8_58 {
  height: 10.9375rem;
  background-image: url(/_build/assets/dwcardbg-YovjylWf.webp);
  border-radius: 10px;
  padding: 12.8px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  color: var(--bg-page);
  background-repeat: no-repeat;
  background-size: cover;
}
._balanceLabel_1g8w8_71 {
  font-size: 13.868px;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
._bal_cont_1g8w8_80 {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
._balanceRefresh_1g8w8_87 {
  margin-left: 9.6px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
._balanceRefresh_1g8w8_87 img {
  width: 23.45px;
  height: 14.92px;
}
._balanceAmount_1g8w8_98 {
  width: max-content;
  font-size: 25.6px;
  font-family: sans-serif inter;
  font-weight: 700;
  margin: 0 0 0 10.6668px;
}
._cardChip_1g8w8_106 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 24px;
}
._cardDots_1g8w8_113 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 18px;
  letter-spacing: 8px;
  font-weight: 700;
}
._channelGrid_1g8w8_122 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 10.6668px;
}
._channelCard_1g8w8_129 {
  width: 100%;
  height: 96px;
  background: var(--bg-medium);
  border-radius: 6px;
  padding: 8px 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  flex-wrap: wrap;
}
._channelCard_1g8w8_129._active_1g8w8_144 {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  color: #000 !important;
}
._bonus_bg_1g8w8_149 {
  position: absolute;
  top: 0;
  right: 0;
}
._bonus_bg_1g8w8_149 ._bPercentage_1g8w8_154 {
  position: absolute;
  top: 21.5px;
  right: 9px;
  font-size: 10.6668px;
  font-weight: 500;
  color: var(--color-white);
}
._discountBadge_1g8w8_163 {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-discount);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f366;
}
._channelIcon_1g8w8_176 {
  font-size: 28px;
  line-height: 1;
}
._channelLabels_1g8w8_181 {
  color: var(--color-secondary);
  font-size: 12.8px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}
._channelLabels_1g8w8_181._active_1g8w8_144 {
  color: #000;
}
._section_1g8w8_192 {
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--bg-medium);
  padding: 13.3332px 10.6668px;
}
._sectionHeader_1g8w8_199 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
._sectionIcon_1g8w8_206 {
  font-size: 20px;
}
._sectionTitle_1g8w8_210 {
  font-size: 19.2px;
  font-weight: 600;
  font-family: sans-serif;
}
._channels_list_1g8w8_216 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
._channelOption_1g8w8_223 {
  padding: 10.66px 13.866px;
  border-radius: 8px;
  background: var(--bg-wallet);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: none;
  outline: none;
  transition: background 0.2s ease, color 0.2s ease;
}
._actives_1g8w8_238 {
  color: var(--bg-dark);
}
._active_1g8w8_144 {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  color: var(--bg-dark);
}
._active_1g8w8_144 ._channelLabel_1g8w8_181,
._active_1g8w8_144 ._channelBalance_1g8w8_246 {
  color: var(--bg-dark);
}
._channelLabel_1g8w8_181 {
  font-size: 14.9332px;
  margin-bottom: 4px;
  color: var(--color-secondary);
  font-family: inter, sans-serif;
}
._channelBalance_1g8w8_246 {
  font-size: 14.9332px;
  color: var(--color-secondary);
  font-family: inter, sans-serif;
}
._channelInfo_1g8w8_263 {
  background: var(--bg-medium);
  border-radius: 12px;
  display: inline-block;
  width: 100%;
}
._channelOption_1g8w8_223 {
  font-size: 12px;
  color: var(--color-secondary);
}
._channelName_1g8w8_275 {
  font-size: 14px;
  font-weight: 600;
  color: #0fc;
  margin-bottom: 4px;
}
._amountGrid_1g8w8_282 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18.668px;
}
._deposit_amount_container_1g8w8_289 {
  background: var(--bg-medium);
  padding: 16px 11.7332px 17.0668px 10.6668px;
  border-radius: 12px;
}
._amountButton_1g8w8_295 {
  background: #ffffff0d;
  border: 1px solid var(--bg-light);
  border-radius: 8px;
  padding: 6.4px 0;
  color: #0fc;
  font-size: 17.668px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
._amountButton_1g8w8_295._active_1g8w8_144 {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  border-color: #0fc;
  color: var(--bg-dark);
}
._amountButton_1g8w8_295._disabled_1g8w8_312 {
  opacity: 0.5;
  cursor: not-allowed;
}
._amountButton_1g8w8_295 ._rupee_symbol_1g8w8_316 {
  position: absolute;
  left: 8px;
  font-size: 17.0668px;
  color: var(--color-text-light);
  font-weight: 400;
}
._amountButton_1g8w8_295 ._rupee_symbol_1g8w8_316._active_1g8w8_144 {
  color: var(--color-white);
}
._bonusBadge_1g8w8_327 {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 6px #ff6b3566;
  z-index: 1;
  white-space: nowrap;
}
._customAmount_1g8w8_342 {
  background: #ffffff0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
._currencySymbol_1g8w8_352 {
  color: #0fc;
  font-size: 18px;
  font-weight: 600;
}
._amountInput_1g8w8_358 {
  flex: 1;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 14px;
  outline: none;
}
._amountInput_1g8w8_358::placeholder {
  color: #ffffff4d;
}
._clearButton_1g8w8_370 {
  background: none;
  border: none;
  color: #fff6;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
._clearButton_1g8w8_370:hover {
  color: #fff9;
}
._clearButton_1g8w8_370 svg {
  width: 20px;
  height: 20px;
}
._instructions_1g8w8_388 {
  background: #ffffff08;
  border: 0.1px solid var(--bg-light);
  border-radius: 12px;
  padding: 16px;
}
._instructionItem_1g8w8_395 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
._instructionItem_1g8w8_395:last-child {
  margin-bottom: 0;
}
._bullet_1g8w8_405 {
  content: "";
  width: 5px;
  height: 5px;
  background: #0fc;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 6px;
  transform: rotate(45deg);
}
._instructionText_1g8w8_416 {
  font-size: 13px;
  line-height: 1.5;
  color: #fffc;
}
._emptyState_1g8w8_422 {
  border-radius: 12px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
._emptyIcon_1g8w8_431 {
  font-size: 64px;
  opacity: 0.3;
  margin-bottom: 12px;
  filter: grayscale(1);
}
._emptyText_1g8w8_438 {
  font-size: 14px;
  color: #fff6;
}
._footer_1g8w8_443 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: 500px;
  margin: 0 auto;
  background: var(--bg-page);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._rechargeMethod_1g8w8_460 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #fff9;
}
._methodName_1g8w8_468 {
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
}
._depositButton_1g8w8_474 {
  background: var(--gradient-button);
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  color: var(--bg-page);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px #00ffcc4d;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
._depositButton_1g8w8_474:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #0fc6;
}
._depositButton_1g8w8_474:active {
  transform: translateY(0);
}
._depositButton_1g8w8_474:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
._depositBonus_1g8w8_503 {
  color: green;
  font-weight: 600;
  font-size: 16px;
}
._login_container_nsyjq_1 {
  min-height: calc(100vh - 49.05px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #05012b;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
._loginBox_nsyjq_10 {
  width: 100%;
  max-width: 500px;
}
._login_header_nsyjq_15 {
  height: 106.66px;
  background: #011341;
  padding: 10.6668px 21.3332px 0;
}
._title_nsyjq_21 {
  color: #fff;
  font-size: 17.0668px;
  font-weight: 700;
  line-height: 2;
}
._subtitle_nsyjq_28,
._forgotText_nsyjq_33 {
  color: #fff;
  font-size: 11.7332px;
}
._tabContainer_nsyjq_38 {
  display: flex;
  gap: 0;
  padding: 0 21.3332px;
  margin-bottom: 29.8px;
}
._tab_nsyjq_38 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7.4668px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid #022c68;
  color: #92a8e3;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}
._tab_nsyjq_38._active_nsyjq_62 {
  color: #00ecbe;
  border-bottom-color: #00ecbe;
}
._tab_nsyjq_38:hover {
  color: #fffc;
}
._tabIcon_nsyjq_70 {
  width: 27px;
  height: 27px;
}
._inputGroup_nsyjq_75 {
  padding: 0 21.3332px;
  margin-bottom: 32px;
}
._inputLabel_nsyjq_80 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #00ecbe;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12.8px;
}
._labelIcon_nsyjq_90 {
  width: 25.59px;
  height: 25.59px;
  color: #00ecbe;
}
._ph_num_nsyjq_96,
._psw_name_nsyjq_96,
._mail_name_nsyjq_96 {
  font-size: 16px;
  color: #e3efff;
}
._phoneInput_nsyjq_101 {
  display: flex;
  gap: 8px;
}
._countryCode_nsyjq_106 {
  background: #011341;
  border-radius: 0.875rem;
  color: #92a8e3;
  padding: 14px 12px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  outline: none;
  width: 99.19px;
  max-width: 100%;
}
._countryCode_nsyjq_106:focus {
  border-color: #00ecbe;
}
._countryCode_nsyjq_106 option {
  background: #002366;
  color: #fff;
}
._input_nsyjq_75 {
  width: 100%;
  flex: 1;
  background: #011341;
  border-radius: 0.875rem;
  color: #fff;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  border: none;
  height: 46.92px;
}
._input_nsyjq_75:focus {
  border: 0.1px solid #042062;
}
._input_nsyjq_75::placeholder {
  color: #ffffff4d;
}
._passwordInput_nsyjq_145 {
  position: relative;
  display: flex;
  align-items: center;
}
._passwordInput_nsyjq_145 input {
  flex: 1;
  padding-right: 48px;
}
._eyeButton_nsyjq_155 {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #000;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}
._eyeButton_nsyjq_155:hover {
  color: #00ecbe;
}
._eyeButton_nsyjq_155 svg {
  width: 20px;
  height: 20px;
}
._checkboxLabel_nsyjq_176 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30.4px;
  cursor: pointer;
  padding: 0 21.3332px;
}
._checkbox_nsyjq_176 {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #00ecbe;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}
._checkbox_nsyjq_176:checked {
  background: #00ecbe;
}
._checkbox_nsyjq_176:checked:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #001845;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
._checkboxText_nsyjq_211 {
  color: #92a8e3;
  font-size: 12px;
}
._loginbtn_cont_nsyjq_216 {
  padding: 0 21.3332px;
  margin: 0 20px;
}
._loginButton_nsyjq_221 {
  width: 100%;
  background: linear-gradient(180deg, #7afec3, #02afb6);
  border: none;
  border-radius: 25px;
  color: #001845;
  font-size: 19.2px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
  margin-bottom: 16px;
}
._loginButton_nsyjq_221:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #00ffcc4d;
}
._loginButton_nsyjq_221:active {
  transform: translateY(0);
}
._loginButton_nsyjq_221._disabled_nsyjq_241 {
  background: #ffffff26;
  color: #ffffff80;
  cursor: not-allowed;
}
._loginButton_nsyjq_221._disabled_nsyjq_241:hover {
  transform: none;
  box-shadow: none;
}
._registerButton_nsyjq_251 {
  width: 100%;
  background: transparent;
  border: 0.1px solid #00ecbe;
  border-radius: 25px;
  color: #00ecbe;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 32px;
}
._registerButton_nsyjq_251:hover {
  background: #00ffcc1a;
}
._footer_nsyjq_268 {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}
._footerButton_nsyjq_274 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #00ecbe;
  cursor: pointer;
  transition: color 0.3s;
  padding: 8px;
}
._footerButton_nsyjq_274:hover {
  color: #0ff;
}
._footerButton_nsyjq_274 span {
  font-size: 12px;
  font-weight: 500;
}
._footerIcon_nsyjq_294 {
  width: 32px;
  height: 32px;
}
.game-status-bar {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.current-game {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.current-game span:first-child {
  font-size: 0.7rem;
  opacity: 0.9;
}
.game-id {
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.timer-section {
  text-align: center;
}
.timer-label {
  font-size: 0.7rem;
  opacity: 0.9;
  margin-bottom: 0.4rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.timer-display {
  display: flex;
  gap: 2px;
  justify-content: center;
}
.result-display {
  padding: 1rem;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.result-numbers {
  display: flex;
  gap: 1rem;
  z-index: 1;
}
.number-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 12px #0003;
  animation: float 3s ease-in-out infinite;
}
.number-circle:nth-child(1) {
  animation-delay: 0s;
}
.number-circle:nth-child(2) {
  animation-delay: 0.5s;
}
.number-circle:nth-child(3) {
  animation-delay: 1s;
}
.betting-closed-banner {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  padding: 1.2rem;
  text-align: center;
  animation: pulse-banner 2s infinite;
  box-shadow: 0 8px 25px #ef444466;
  border-top: 3px solid #fbbf24;
  border-bottom: 3px solid #fbbf24;
}
.banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.banner-icon {
  font-size: 1.4rem;
  animation: bounce-icon 1s infinite alternate;
}
.betting-main {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bottom-payment-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  max-width: 500px;
  width: 100%;
  background: linear-gradient(135deg, #fff, #f8f9fa);
  border-top: 3px solid var(--loading-border-color);
  box-shadow: 0 -8px 25px #00000026;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(10px);
  &:hover {
    box-shadow: 0 -12px 35px #8b5cf640;
  }
}
.payment-bar-content {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  gap: 1rem;
}
.payment-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}
.payment-icon {
  background: var(--button-gradient);
  border-radius: 12px;
  padding: 0.8rem;
  font-size: 1.3rem;
  box-shadow: 0 4px 15px #7629b34d;
  color: #fff;
}
.payment-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.payment-amount {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--header);
  line-height: 1.2;
}
.payment-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.pay-now-btn-bottom {
  background: var(--bets-congrats);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  box-shadow: 0 4px 15px #0596694d;
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #047857, #065f46);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #05966966;
  }
  &:disabled {
    background: #d1d5db;
    cursor: not-allowed;
  }
}
.modal-overlay,
.bottom-sheet-overlay {
  position: fixed;
  inset: 0 0 80px;
  background: #00000080;
  width: 500px;
  max-width: 100vw;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.3s ease-out;
}
.bottom-sheet {
  background: #fff;
  width: 500px;
  max-width: 100vw;
  max-height: 80vh;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
  box-shadow: var(--box-shadow);
}
.bottom-sheet-handles {
  width: 40px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 12px auto 0;
}
.handle-bars {
  height: 2px;
}
.basket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
  }
}
.clear-basket-btn {
  background: var(--loss-message);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
  &:hover {
    background: #dc2626;
  }
}
.basket-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px 20px 30px;
  max-height: 400px;
  overflow-y: auto;
  background: #f5f5f5;
}
.basket-item {
  width: 120px;
  position: relative;
  background: #e8e8e8;
  border-radius: 12px;
  padding: 4px;
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  &:hover {
    background: #ddd;
    border-color: #999;
  }
}
.remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #888;
  border: none;
  color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.2s;
  z-index: 1;
  &:hover {
    background: #666;
  }
}
.bet-type-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.quantity-badge {
  display: flex;
  align-items: center;
  background: var(--header);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
}
.basket-footer {
  background: #f9fafb;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  display: none;
}
.basket-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.total-label {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}
.bet-count {
  font-size: 12px;
  color: var(--text-secondary);
}
.place-bets-btn {
  background: var(--bets-congrats);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  &:hover:not(:disabled) {
    background: #059669;
  }
  &:disabled {
    background: #d1d5db;
    cursor: not-allowed;
  }
}
@media (max-width: 640px) {
  .basket-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .basket-header {
    padding: 10px 16px;
  }
  .basket-footer {
    padding: 12px 16px;
  }
}
.modal-content {
  background: #fff;
  width: 100%;
  max-height: 70vh;
  border-radius: 16px 16px 0 0;
  padding: 1.5rem;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
  h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
    color: #333;
    background: var(--button-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.history-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f8f9fa, #f3f4f6);
  border-radius: 12px;
  align-items: center;
  border: 1px solid var(--border-color);
}
.game-id {
  font-weight: 600;
  color: var(--header);
  font-size: 0.9rem;
}
.result-number {
  font-family: Courier New, monospace;
  font-weight: 700;
  font-size: 1.1rem;
  color: #333;
  text-align: center;
  background: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 2px solid var(--border-color);
}
.draw-time {
  font-size: 0.8rem;
  color: #666;
  text-align: right;
}
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #e9ecef;
}
.order-item.pending {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, #fefbf3, #fef3c7);
}
.order-item.won {
  border-left-color: #10b981;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.order-item.lost {
  border-left-color: #ef4444;
  background: linear-gradient(135deg, #fef2f2, #fecaca);
}
.bet-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bet-details {
  font-weight: 600;
  color: #333;
  font-family: Courier New, monospace;
}
.bet-amount {
  font-size: 0.8rem;
  color: #6b7280;
}
.status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.order-item.pending .status {
  background: #fef3c7;
  color: #d97706;
}
.order-item.won .status {
  background: #d1fae5;
  color: #065f46;
}
.order-item.lost .status {
  background: #fecaca;
  color: #dc2626;
}
.winners-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 25px 50px #0000004d;
  z-index: 2000;
  animation: celebrate 0.8s ease-out;
  max-width: 90%;
  text-align: center;
  border: 3px solid #fbbf24;
}
.winners-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.winners-content h4 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: bounce 1s infinite alternate;
}
.winner-item {
  background: #fff3;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px #0000001a;
}
.connection-status {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #000c;
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  z-index: 1000;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.connection-status.connected {
  background: #10b981e6;
}
.connection-status.disconnected {
  background: #ef4444e6;
  animation: pulse-status 2s infinite;
}
.connection-status.error {
  background: #f59e0be6;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
@keyframes shimmer {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(100%);
  }
}
@keyframes pulse-dot {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes pulse-upcoming {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
@keyframes pulse-soon {
  0%,
  to {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.9;
  }
}
@keyframes bounce-status {
  0%,
  to {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}
@keyframes pulse-open {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes pulse-closed {
  0%,
  to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}
@keyframes float {
  0%,
  to {
    transform: translateY(0) rotate(0);
  }
  33% {
    transform: translateY(-8px) rotate(1deg);
  }
  66% {
    transform: translateY(-4px) rotate(-1deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse-warning {
  0%,
  to {
    transform: scale(1);
    box-shadow: 0 8px 25px #f59e0b80;
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 12px 35px #f59e0bb3;
  }
}
@keyframes pulse-danger {
  0%,
  to {
    transform: scale(1);
    box-shadow: 0 8px 25px #ef444480;
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 12px 35px #ef4444cc;
  }
}
@keyframes pulse-banner {
  0%,
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.02) rotate(0.5deg);
  }
}
@keyframes bounce-icon {
  0% {
    transform: translateY(0) rotate(-8deg) scale(1);
  }
  to {
    transform: translateY(-15px) rotate(8deg) scale(1.1);
  }
}
@keyframes sweep {
  0% {
    left: -100%;
  }
  to {
    left: 100%;
  }
}
@keyframes pulse-live {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}
@keyframes celebrate {
  0% {
    transform: translate(-50%, -50%) scale(0.8) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}
@keyframes pulse-status {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@media (max-width: 520px) {
  .app {
    max-width: 100vw;
  }
  .bottom-sheet-overlay {
    bottom: 75px !important;
  }
  .games-grid {
    grid-template-columns: 1fr;
  }
  .game-card {
    padding: 1rem;
  }
  .game-icon-large {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }
  .draw-tabs-scroll {
    gap: 0.5rem;
  }
  .draw-tab-enhanced {
    min-width: 75px;
    padding: 0.8rem 1rem;
  }
  .tab-time {
    font-size: 0.9rem;
  }
  .tab-countdown {
    font-size: 0.7rem;
  }
  .timer-display-enhanced {
    gap: 4px;
  }
  .result-numbers-enhanced {
    gap: 1.2rem;
  }
  .number-circle-enhanced {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  .game-header-enhanced {
    padding: 1rem;
  }
  .back-btn-enhanced {
    padding: 0.6rem;
  }
  .game-title-header {
    font-size: 1.1rem;
  }
  .banner-content-enhanced {
    gap: 1rem;
  }
  .banner-icon-enhanced {
    font-size: 2rem;
  }
  .banner-title {
    font-size: 1.2rem;
  }
  .position-circle {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  .position-circle.small {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
  }
  .bet-input {
    width: 36px;
    height: 28px;
    font-size: 0.8rem;
  }
  .bet-input.small {
    width: 32px;
    height: 24px;
    font-size: 0.7rem;
  }
  .qty-btn {
    width: 22px;
    height: 22px;
    font-size: 0.9rem;
  }
  .qty-display {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    min-width: 26px;
  }
  .add-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
  }
  .payment-bar-content {
    padding: 0.8rem 1rem;
  }
  .payment-amount {
    font-size: 1.3rem;
  }
  .payment-icon {
    padding: 0.6rem;
    font-size: 1.1rem;
  }
  .pay-now-btn-bottom {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}
@media (max-width: 360px) {
  .draw-tab-enhanced {
    min-width: 65px;
    padding: 0.6rem 0.8rem;
  }
  .tab-time {
    font-size: 0.8rem;
  }
  .tab-countdown {
    font-size: 0.65rem;
  }
  .result-numbers-enhanced {
    gap: 1rem;
  }
  .number-circle-enhanced {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
  .banner-title {
    font-size: 1.1rem;
  }
  .banner-subtitle {
    font-size: 0.9rem;
  }
  .position-circle {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
  .position-circle.small {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }
  .bet-input {
    width: 32px;
    height: 24px;
    font-size: 0.7rem;
  }
  .bet-input.small {
    width: 28px;
    height: 20px;
    font-size: 0.65rem;
  }
  .qty-btn {
    width: 20px;
    height: 20px;
    font-size: 0.8rem;
  }
  .qty-display {
    padding: 0.25rem 0.4rem;
    font-size: 0.7rem;
    min-width: 22px;
  }
  .add-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.65rem;
  }
  .section-header {
    padding: 0.6rem 0.8rem;
  }
  .section-title {
    font-size: 0.9rem;
  }
  .section-prize,
  .section-price {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
  }
  .game-details-card,
  .timer-card {
    padding: 1rem;
  }
  .game-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
  }
  .game-id-display {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  .betting-status {
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
  }
  .timer-label-enhanced {
    font-size: 0.75rem;
  }
}
@media print {
  .app {
    max-width: none;
    box-shadow: none;
  }
  .game-header-enhanced,
  .bottom-tabs,
  .bottom-payment-bar,
  .betting-main {
    display: none;
  }
}
@media (prefers-contrast: high) {
  .draw-tab-enhanced,
  .bet-input {
    border-width: 3px;
  }
  .number-circle-enhanced {
    border: 3px solid white;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .draw-tab-enhanced,
  .number-circle-enhanced {
    transform: none !important;
  }
}
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
  line-height: 1.3;
  font-size: 14px;
}
.app {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  position: relative;
}
.game-header-enhanced {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 4px 20px #00000026;
  position: relative;
  overflow: hidden;
}
.game-header-enhanced:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  animation: shimmer 3s infinite;
  pointer-events: none;
}
.back-btn-enhanced {
  background: #ffffff26;
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 0.7rem;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-btn-enhanced:hover {
  background: #ffffff40;
  border-color: #fff6;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px #0003;
}
.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.game-title-header {
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}
.connection-status-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #0003;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
}
.connection-status-header.connected {
  background: #10b9814d;
  color: #d1fae5;
}
.connection-status-header.disconnected {
  background: #ef44444d;
  color: #fecaca;
}
.status-dot-header {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s infinite;
}
.balance-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: #ffffff26;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}
.balance-label {
  font-size: 0.7rem;
  opacity: 0.9;
}
.wallet-icon-header {
  font-size: 1.2rem;
}
.draw-tabs-container {
  max-width: 500px;
}
.draw-tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
  padding: 0 1rem;
}
.betting-closed-banner-enhanced {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  padding: 2rem;
  margin: 1.2rem;
  border-radius: 20px;
  animation: pulse-banner 2.5s infinite;
  box-shadow: 0 12px 40px #ef444480;
  border: 4px solid #fbbf24;
  position: relative;
  overflow: hidden;
}
.betting-closed-banner-enhanced:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: sweep 3s ease-in-out infinite;
}
.banner-content-enhanced {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.banner-icon-enhanced {
  font-size: 2.5rem;
  animation: bounce-icon 1.5s infinite alternate;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}
.banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
}
.banner-title {
  font-size: 1.4rem;
  font-weight: 800;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.025em;
}
.banner-subtitle {
  font-size: 1rem;
  opacity: 0.9;
  font-weight: 600;
}
.lobby-page {
  padding-bottom: 2rem;
}
.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
.lobby-header h1 {
  font-size: 1.3rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.balance {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  background: #ffffff1a;
  padding: 0.3rem 0.6rem;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}
.wallet-icon {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
}
.games-section {
  padding: 1rem;
}
.games-section h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.game-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #e9ecef;
  box-shadow: 0 4px 20px #00000014;
}
.game-card:hover:not(.disabled) {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px #667eea26;
  border-color: #667eea;
}
.game-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f8fafc;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.game-icon-large {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 16px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 15px #667eea4d;
}
.game-status {
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.game-status.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  animation: pulse-live 3s infinite;
}
.game-status:not(.active) {
  background: #fecaca;
  color: #dc2626;
}
.card-body {
  margin-bottom: 1rem;
}
.game-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.3rem;
}
.game-subtitle {
  font-size: 0.8rem;
  color: #667eea;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.game-frequency {
  font-size: 0.8rem;
  color: #6b7280;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.payout-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.payout-item span {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 600;
  background: #0596691a;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}
.betting-cutoff {
  margin-top: 0.8rem;
  padding: 0.4rem 0.8rem;
  background: #64748b1a;
  border-radius: 10px;
  font-size: 0.75rem;
  color: #64748b;
  text-align: center;
  border: 1px solid rgba(100, 116, 139, 0.2);
}
.back-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #fff;
  border-radius: 8px;
  transition: background 0.3s ease;
}
.back-btn:hover {
  background: #ffffff1a;
}
@media (max-width: 499px) {
  .draw-tabs-container {
    max-width: 100vw;
  }
  .draw-tabs-header {
    padding: 0.8rem 1rem 0;
  }
  .draw-tabs-header h3 {
    font-size: 1.1rem;
  }
  .total-draws {
    font-size: 0.75rem;
    padding: 0.5rem 0.7rem;
  }
  .draw-tabs-scroll {
    gap: 0.6rem;
    padding: 1rem;
  }
  .draw-tab-enhanced {
    min-width: 80px;
    padding: 0.8rem 1rem;
    gap: 0.2rem;
  }
  .draw-tab-enhanced.quick3d-variant {
    min-width: 85px;
  }
  .tab-time {
    font-size: 0.9rem;
  }
  .tab-interval {
    font-size: 1rem;
  }
  .tab-countdown,
  .tab-payout {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    min-width: 40px;
  }
}
@media (max-width: 420px) {
  .draw-tabs-scroll {
    gap: 0.5rem;
    padding: 0.8rem;
  }
  .draw-tab-enhanced {
    min-width: 75px;
    padding: 0.7rem 0.8rem;
  }
  .draw-tab-enhanced.quick3d-variant {
    min-width: 80px;
  }
  .tab-time {
    font-size: 0.85rem;
  }
  .tab-interval {
    font-size: 0.95rem;
  }
  .tab-countdown,
  .tab-payout {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    min-width: 35px;
  }
  .tab-status {
    font-size: 0.55rem;
    padding: 0.25rem 0.4rem;
  }
}
@media (max-width: 360px) {
  .draw-tabs-scroll {
    gap: 0.4rem;
  }
  .draw-tab-enhanced {
    min-width: 70px;
    padding: 0.6rem 0.7rem;
  }
  .draw-tab-enhanced.quick3d-variant {
    min-width: 75px;
  }
  .tab-time {
    font-size: 0.8rem;
  }
  .tab-interval {
    font-size: 0.9rem;
  }
  .tab-countdown,
  .tab-payout {
    font-size: 0.55rem;
    padding: 0.1rem 0.25rem;
    min-width: 30px;
  }
}
@media (max-width: 320px) {
  .draw-tabs-scroll {
    gap: 0.3rem;
    padding: 0.4rem 0.5rem 0.6rem;
  }
  .draw-tab-enhanced {
    min-width: 65px;
    padding: 0.5rem 0.6rem;
  }
  .draw-tab-enhanced.quick3d-variant {
    min-width: 70px;
  }
  .tab-time {
    font-size: 0.75rem;
  }
  .tab-interval {
    font-size: 0.85rem;
  }
  .tab-countdown,
  .tab-payout {
    font-size: 0.5rem;
    padding: 0.1rem 0.2rem;
    min-width: 28px;
  }
  .tab-status {
    font-size: 0.5rem;
    padding: 0.2rem 0.3rem;
  }
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 500px;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
._drawTabsContainer_14m8f_1 {
  max-width: 500px;
  width: 100%;
}
._drawTabsHeader_14m8f_6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
  padding: 0 1rem;
}
._drawTabsHeader_14m8f_6 h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  background: var(--button-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.025em;
}
._totalDraws_14m8f_24 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: #64748b1a;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-weight: 600;
  border: 1px solid rgba(100, 116, 139, 0.2);
}
._drawTabCenter_14m8f_34 {
  display: flex;
  justify-content: center;
}
._drawTabsScroll_14m8f_39 {
  display: flex;
  gap: 0.8rem;
  overflow-x: scroll;
  padding: 0.5rem 0 0.5rem 0rem;
  scroll-behavior: smooth;
  margin: 0 16px;
}
._drawTabsScroll_14m8f_39::-webkit-scrollbar {
  display: none;
}
._drawTabEnhanced_14m8f_52 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 12px 8px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 90px;
  width: auto;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 15px #00000014;
  backdrop-filter: blur(10px);
  text-align: center;
}
._drawTabEnhanced_14m8f_52:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
._drawTabEnhanced_14m8f_52._active_14m8f_86 {
  background: var(--card-gradient-2);
  color: #fff;
}
._drawTabEnhanced_14m8f_52._upcoming_14m8f_90 {
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #065f46;
  animation: _pulseUpcoming_14m8f_1 3s ease-in-out infinite;
}
._drawTabEnhanced_14m8f_52._upcoming_14m8f_90._active_14m8f_86 {
  background: var(--bets-congrats);
  color: #fff;
  border-color: #10b981;
  box-shadow: 0 12px 35px #10b98166;
}
._drawTabEnhanced_14m8f_52._soon_14m8f_102 {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fefbf3, #fef3c7);
  color: #92400e;
  animation: _pulseSoon_14m8f_1 2s ease-in-out infinite;
}
._drawTabEnhanced_14m8f_52._soon_14m8f_102._active_14m8f_86 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-color: #f59e0b;
  box-shadow: 0 12px 35px #f59e0b66;
}
._drawTabEnhanced_14m8f_52._past_14m8f_114 {
  opacity: 0.6;
  border-color: #9ca3af;
  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
  color: var(--text-secondary);
}
._tabTime_14m8f_120,
._tabInterval_14m8f_121 {
  font-size: 14px;
  font-weight: 800;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  letter-spacing: -0.025em;
}
._tabCountdown_14m8f_128 {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.85;
  background: #0000001a;
  border-radius: 8px;
  min-width: 45px;
  text-align: center;
}
._drawTabEnhanced_14m8f_52._active_14m8f_86 ._tabCountdown_14m8f_128 {
  background: #fff3;
}
._tabStatus_14m8f_142 {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #10b981;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 15px #10b98166;
  animation: _bounceStatus_14m8f_1 2s ease-in-out infinite;
}
._tabStatus_14m8f_142._next_14m8f_157 {
  background: var(--bets-congrats);
}
@keyframes _pulseUpcoming_14m8f_1 {
  0%,
  to {
    box-shadow: 0 4px 15px #10b98133;
  }
  50% {
    box-shadow: 0 6px 25px #10b98166;
  }
}
@keyframes _pulseSoon_14m8f_1 {
  0%,
  to {
    box-shadow: 0 4px 15px #f59e0b33;
  }
  50% {
    box-shadow: 0 6px 25px #f59e0b66;
  }
}
@keyframes _bounceStatus_14m8f_1 {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.bet-section {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.section-headers {
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quick-guess-header {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}
.section-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.section-title {
  background: var(--button-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 0.85rem;
}
.section-prize {
  background: var(--bets-congrats);
  color: #fff;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 1px 4px #0596694d;
}
.section-price {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: #6b72801a;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
}
.quick-guess-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.quick-guess-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-1px);
}
.quick-guess-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}
.single-digit-bets,
.double-digit-bets {
  padding: 0.4rem 0.8rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.triple-digit-bet {
  padding: 0.4rem 0.8rem 0.8rem;
}
.bet-row-enhanced {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 50px;
}
.triple-bet-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
}
.triple-bet-inputs {
  width: 100%;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  align-items: center;
}
.triple-right-container {
  width: 100%;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: center;
}
.spacer {
  flex: 1;
  min-width: 0.5rem;
}
.position-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px #0003;
}
.position-circle.red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.position-circle.orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
}
.position-circle.blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.position-pair,
.position-trio {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.triple-position-trio {
  display: flex;
  justify-content: space-around;
  gap: 0.4rem;
}
.bet-input {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  background: #fff;
  color: #1a202c !important;
  transition: all 0.3s ease;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: inset 0 1px 2px #0000001a;
  flex-shrink: 0;
}
.bet-input:focus {
  outline: none;
  border-color: var(--loading-border-color);
  box-shadow: 0 0 0 2px #8b5cf61a;
}
.bet-input:disabled {
  background: #f8fafc;
  color: #64748b !important;
  cursor: not-allowed;
}
.bet-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}
.double-inputs,
.triple-inputs {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.triple-inputs {
  justify-content: flex-end;
}
.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 4px #0000000d;
  flex-shrink: 0;
  min-width: fit-content;
}
.qty-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-secondary);
  box-shadow: 0 1px 2px #0000001a;
  transition: all 0.2s ease;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.qty-btn:hover:not(:disabled) {
  background: var(--button-gradient);
  color: #fff;
  transform: scale(1.05);
}
.qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.qty-input {
  background: var(--card-gradient-2);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 1px 4px #7629b34d;
  flex-shrink: 0;
  border: none;
  outline: none;
  width: auto;
  max-width: 50px;
}
.qty-input:focus {
  outline: 2px solid rgba(139, 92, 246, 0.3);
  outline-offset: 1px;
}
.qty-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-input[type="number"] {
  -moz-appearance: textfield;
}
.add-btn {
  background: var(--button-gradient);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 4px #0596694d;
  flex-shrink: 0;
  min-width: 55px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-btn:hover:not(:disabled) {
  background: var(--button-gradient);
  transform: translateY(-1px);
}
.add-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  color: #9ca3af;
}
.triple-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  .bet-row-enhanced {
    gap: 0.3rem;
    min-height: 40px;
  }
  .position-circle {
    width: 28px;
    height: 28px;
    font-size: 0.6rem;
  }
  .bet-input {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  .qty-btn {
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
  }
  .qty-input {
    padding: 0.15rem 0.3rem;
    font-size: 0.65rem;
    min-width: 18px;
    max-width: 40px;
  }
  .add-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.65rem;
    min-width: 45px;
    height: 28px;
  }
  .section-title {
    font-size: 0.8rem;
  }
  .section-price {
    font-size: 0.7rem;
  }
  .section-prize {
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
  }
  .quantity-controls {
    gap: 0.2rem;
    padding: 0.1rem 0.2rem;
  }
  .spacer {
    min-width: 0.2rem;
  }
  .triple-bet-container,
  .triple-bet-inputs,
  .triple-right-container {
    gap: 0.4rem;
  }
  .position-pair,
  .position-trio,
  .double-inputs,
  .triple-inputs {
    gap: 0.2rem;
  }
}
@media (max-width: 300px) {
  .bet-section {
    border-radius: 8px;
  }
  .section-header {
    padding: 0.5rem;
  }
  .single-digit-bets,
  .double-digit-bets,
  .triple-digit-bet {
    padding: 0.3rem 0.6rem 0.6rem;
  }
  .bet-row-enhanced {
    gap: 0.25rem;
    min-height: 35px;
  }
  .position-circle {
    width: 18px;
    height: 18px;
    font-size: 0.55rem;
  }
  .bet-input {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    border-radius: 4px;
  }
  .qty-btn {
    width: 16px;
    height: 16px;
    font-size: 0.7rem;
  }
  .qty-input {
    padding: 0.1rem 0.25rem;
    font-size: 0.6rem;
    min-width: 16px;
    max-width: 35px;
  }
  .add-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.6rem;
    min-width: 40px;
    height: 26px;
    border-radius: 6px;
  }
  .spacer {
    min-width: 0.1rem;
  }
}
.bottom-tabs {
  display: flex;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 10px #0000001a;
  z-index: 1000;
}
.bottom-tab {
  flex: 1;
  padding: 16px 20px;
  border: none;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
}
.bottom-tab:hover {
  color: #333;
  background: #f8f8f8;
}
.bottom-tab.active {
  color: #4caf50;
  font-weight: 600;
  background: #fff;
  border-top: 3px solid #4caf50;
}
.tab-content-area {
  background: #fff;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 10px #0000001a;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.result-history-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}
.result-history-list {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  margin-bottom: 4rem;
}
.result-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}
.result-history-item:last-child {
  border-bottom: none;
}
.result-item-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.game-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.game-time {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 400;
}
.result-item-right {
  display: flex;
  align-items: center;
}
.result-circles {
  display: flex;
  gap: 8px;
}
.result-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.result-circle.red {
  background-color: var(--result-red);
}
.result-circle.orange {
  background-color: var(--result-orange);
}
.result-circle.blue {
  background-color: var(--result-blue);
}
.my-orders-content {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.my-orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
}
.order-item:hover {
  box-shadow: 0 2px 8px #0000001a;
}
.order-item.won {
  border-left: 4px solid #4caf50;
  background: #f8fff8;
}
.order-item.lost {
  border-left: 4px solid #f44336;
  background: #fff8f8;
}
.order-item.pending {
  border-left: 4px solid #ff9800;
  background: #fffaf0;
}
.bet-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bet-details {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.bet-amount {
  font-size: 14px;
  color: #666;
}
.status {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  min-width: 60px;
  text-align: center;
}
.order-item.won .status {
  background: #4caf50;
  color: #fff;
}
.order-item.lost .status {
  background: #f44336;
  color: #fff;
}
.order-item.pending .status {
  background: #ff9800;
  color: #fff;
}
.game-page {
  max-width: 500px;
  width: 100%;
  padding-bottom: 60px;
  background: #f9f7f7;
}
@media (max-width: 768px) {
  .tab-content-area {
    max-height: 40vh;
    bottom: 56px;
  }
  .bottom-tab {
    padding: 12px 16px;
    font-size: 14px;
  }
  .result-history-list,
  .my-orders-content {
    padding: 12px 16px;
  }
  .result-circle {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .game-page {
    padding-bottom: 56px;
  }
}
.combined-game-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-gradient-2);
  margin: 0rem 1rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
  position: relative;
}
.left-container {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.game-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.game-header-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.game-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.game-badge {
  background: #fff;
  color: var(--header);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  box-shadow: 0 2px 8px #7629b34d;
}
.game-id {
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.result-numbers {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
}
.number-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 3px 10px #0003;
}
.number-circle.red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.number-circle.orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
}
.number-circle.blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.how-to-play {
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.how-to-play:hover {
  cursor: pointer;
}
.vertical-divider {
  width: 1px;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 80%,
    transparent 100%
  );
  margin: 0 1rem;
}
.timer-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.timer-header-text {
  font-size: 0.75rem;
  color: #fffc;
  font-weight: 600;
  text-align: right;
}
.timer-display {
  display: flex;
  gap: 2px;
  align-items: center;
}
.timer-digits {
  background: #fff;
  color: var(--header);
  padding: 0.2rem 0rem;
  border-radius: 6px;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px #0003;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.colon {
  background: transparent;
  color: #fff;
  padding: 0.4rem 0rem;
  box-shadow: none;
  border: none;
  font-size: 1rem;
  font-weight: 900;
  animation: blink-colon 1s ease-in-out infinite;
}
.timer-digits.warning {
  background: var(--warning-gradient);
  color: #fff;
  animation: pulse-warning 1.5s infinite;
}
.timer-digits.danger {
  background: var(--loss-message);
  color: #fff;
  animation: pulse-danger 0.8s infinite;
}
.next-game-id {
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fffc;
  text-align: right;
}
@keyframes blink-colon {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  to {
    opacity: 0.3;
  }
}
@keyframes pulse-warning {
  0%,
  to {
    transform: scale(1);
    box-shadow: 0 2px 8px #f59e0b4d;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 15px #f59e0b80;
  }
}
@keyframes pulse-danger {
  0%,
  to {
    transform: scale(1);
    box-shadow: 0 2px 8px #d70a034d;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 15px #d70a0380;
  }
}
@media (max-width: 768px) {
  .combined-game-status {
    gap: 1rem;
    padding: 1rem;
  }
  .vertical-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(5, 150, 105, 0.3) 20%,
      rgba(5, 150, 105, 0.5) 50%,
      rgba(5, 150, 105, 0.3) 80%,
      transparent 100%
    );
    margin: 0.5rem 0;
  }
  .timer-header-text,
  .next-game-id {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .game-badge {
    width: 100px !important;
  }
  .combined-game-status,
  .game-header-section {
    gap: 0.5rem !important;
  }
}
.rules-modal-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.rules-modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--box-shadow);
}
.rules-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.rules-modal-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}
.rules-modal-close-btn {
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  transition: background 0.2s;
}
.rules-modal-close-btn:hover {
  background: var(--border-color);
}
.rules-modal-body {
  color: #374151;
  line-height: 1.6;
}
.rules-modal-body p {
  margin-bottom: 16px;
  font-size: 16px;
}
.game-info-card {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.game-info-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.game-info-card h3 .game-icon {
  font-size: 20px;
}
.game-info-card p {
  margin: 0;
  opacity: 0.95;
}
.example-card {
  background: #f8fafc;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  border-left: 4px solid var(--loading-border-color);
}
.example-card h4 {
  color: var(--loading-border-color);
  margin: 0 0 8px;
  font-weight: 700;
}
.example-card p {
  margin: 0;
  font-family: monospace;
  font-size: 14px;
}
.game-type-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.game-type-card h4 {
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.game-type-card h4 .number-badge {
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.game-type-card p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-secondary);
}
.game-type-card.single-digit h4 {
  color: #059669;
}
.game-type-card.single-digit h4 .number-badge {
  background: #059669;
}
.game-type-card.two-digit h4 {
  color: #0284c7;
}
.game-type-card.two-digit h4 .number-badge {
  background: #0284c7;
}
.game-type-card.three-digit h4 {
  color: var(--header);
}
.game-type-card.three-digit h4 .number-badge {
  background: var(--header);
}
.bet-info-row {
  display: flex;
  gap: 16px;
}
.bet-ticket-price {
  background: #fee2e2;
  color: #dc2626;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.bet-win-amount {
  background: #dcfce7;
  color: #16a34a;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.triple-ticket-container {
  background: #fef3c7;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.triple-prizes-container {
  background: #f0fdf4;
  padding: 12px;
  border-radius: 8px;
}
.triple-prizes-container h5 {
  color: #16a34a;
  font-weight: 700;
  margin: 0 0 8px;
}
.triple-prizes-container .prize-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
}
.triple-prizes-container .prize-row .prize-amount {
  font-weight: 700;
  color: #16a34a;
}
.quick-game-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 16px;
  border-radius: 12px;
  margin-top: 16px;
}
.quick-game-info h4 {
  color: #1d4ed8;
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-game-info ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: #374151;
}
.quick-game-info ul li {
  margin-bottom: 4px;
}
.rules-modal-footer {
  margin-top: 24px;
  text-align: center;
}
.rules-got-it-btn {
  background: var(--button-gradient);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.rules-got-it-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #7629b34d;
}
@media (max-width: 640px) {
  .rules-modal-content {
    padding: 20px;
    max-height: 85vh;
  }
  .rules-modal-header {
    margin-bottom: 16px;
  }
  .rules-modal-header h2 {
    font-size: 20px;
  }
  .rules-modal-close-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  .game-info-card {
    padding: 12px;
  }
  .game-info-card h3 {
    font-size: 16px;
  }
  .game-info-card h3 .game-icon {
    font-size: 18px;
  }
  .game-type-card {
    padding: 12px;
  }
  .game-type-card h4 {
    font-size: 14px;
  }
  .game-type-card p {
    font-size: 13px;
  }
  .bet-info-row {
    gap: 12px;
  }
  .bet-ticket-price,
  .bet-win-amount {
    font-size: 11px;
    padding: 3px 6px;
  }
  .rules-got-it-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}
.winners-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-width: 90vw;
  height: 100vh;
  z-index: 10000;
  background: #000c;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
}
.winners-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.confetti-container .confetti {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 3s linear infinite;
}
@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}
.winners-modal {
  position: relative;
  background: #ffffff1a;
  backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 40px 30px;
  box-shadow: 0 25px 50px #00000080;
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%;
  border: 2px solid rgba(255, 215, 0, 0.3);
}
.winners-modal.show {
  transform: scale(1);
  opacity: 1;
}
.close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  background: #ff4757;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px #ff475766;
}
.close-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px #ff475799;
}
.modal-content {
  color: #fff;
  text-align: center;
}
.header {
  margin-bottom: 30px;
}
.header .trophy {
  font-size: 3rem;
  margin-bottom: 15px;
  display: block;
  animation: trophy-bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}
.header .title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(45deg, gold, orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  animation: title-glow 2s ease-in-out infinite alternate;
}
@keyframes trophy-bounce {
  0%,
  to {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(10deg);
  }
}
@keyframes title-glow {
  0% {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
  }
  to {
    filter: drop-shadow(0 0 20px gold);
  }
}
.prize-display {
  background: #ffffff1a;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px;
  margin: 20px 0;
  border: 1px solid rgba(255, 215, 0, 0.3);
  position: relative;
  overflow: hidden;
}
.prize-display:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 215, 0, 0.1),
    transparent
  );
  animation: prize-shine 3s linear infinite;
}
.prize-display .prize-label {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 10px;
  font-weight: 600;
}
.prize-display .prize-amount {
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(45deg, gold, orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: amount-pulse 1.5s ease-in-out infinite alternate;
  line-height: 1;
  position: relative;
  z-index: 1;
}
@keyframes prize-shine {
  0% {
    transform: translate(-100%) translateY(-100%) rotate(45deg);
  }
  to {
    transform: translate(100%) translateY(100%) rotate(45deg);
  }
}
@keyframes amount-pulse {
  0% {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
.winners-count {
  background: #ffd70033;
  color: gold;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 20px 0;
  border: 1px solid rgba(255, 215, 0, 0.4);
  animation: count-glow 2s ease-in-out infinite alternate;
}
@keyframes count-glow {
  0% {
    box-shadow: 0 0 15px #ffd7004d;
  }
  to {
    box-shadow: 0 0 25px #ffd70099;
  }
}
.congrats {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 25px;
  color: gold;
  animation: congrats-bounce 1s ease-in-out infinite alternate;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}
@keyframes congrats-bounce {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}
@media (max-width: 640px) {
  .winners-overlay {
    width: 95vw;
    max-width: 95vw;
    padding: 15px;
  }
  .winners-modal {
    padding: 30px 25px;
  }
  .header .trophy {
    font-size: 2.5rem;
  }
  .header .title {
    font-size: 2rem;
  }
  .prize-display .prize-amount {
    font-size: 2.2rem;
  }
}
@media (max-width: 480px) {
  .winners-overlay {
    width: 90vw;
    max-width: 90vw;
    padding: 10px;
  }
  .winners-modal {
    padding: 25px 20px;
  }
  .header .trophy {
    font-size: 2rem;
  }
  .header .title {
    font-size: 1.8rem;
  }
  .prize-display {
    padding: 20px;
  }
  .prize-display .prize-amount {
    font-size: 2rem;
  }
}
@media (max-height: 600px) {
  .winners-overlay {
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
  }
  .winners-modal {
    padding: 20px;
  }
  .header {
    margin-bottom: 20px;
  }
}
.orders-list {
  max-width: 100%;
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 10px 10px 40px;
}
.orders-list .bet-result-container {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px #0000001a;
}
.orders-list .draw-results-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}
.orders-list .draw-results-header .draw-info {
  font-size: 14px;
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.orders-list .draw-results-header .result-circles {
  display: flex;
  gap: 6px;
  padding-bottom: 12px;
}
.orders-list .draw-results-header .result-circles .result-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.orders-list .draw-results-header .result-circles .result-circle.result-0 {
  background-color: #e53e3e;
}
.orders-list .draw-results-header .result-circles .result-circle.result-1 {
  background-color: #ff8c00;
}
.orders-list .draw-results-header .result-circles .result-circle.result-2 {
  background-color: #3182ce;
}
.orders-list .draw-results-header .result-circles .result-circle.result-3 {
  background-color: #e53e3e;
}
.orders-list .draw-results-header .result-circles .result-circle.result-4 {
  background-color: #ff8c00;
}
.orders-list .draw-results-header .result-circles .result-circle.result-5 {
  background-color: #3182ce;
}
.orders-list .draw-results-header .draw-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.orders-list .draw-results-header .draw-status .win-status {
  font-weight: 500;
}
.orders-list .golden-jackpot-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orders-list .golden-jackpot-section .jackpot-info .jackpot-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.orders-list .golden-jackpot-section .jackpot-info .jackpot-draw-time {
  font-size: 12px;
  color: var(--text-secondary);
}
.orders-list .golden-jackpot-section .jackpot-payment {
  text-align: right;
}
.orders-list .golden-jackpot-section .jackpot-payment .payment-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.orders-list .golden-jackpot-section .jackpot-payment .payment-amount {
  font-weight: 700;
  font-size: 16px;
}
.orders-list .sorry-message {
  text-align: center;
  color: red;
  font-weight: 700;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color);
}
.orders-list .my-bets-section {
  padding: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.orders-list .my-bets-section .my-bets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.orders-list .my-bets-section .my-bets-header .my-bets-title {
  font-weight: 700;
}
.orders-list .my-bets-section .my-bets-header .betting-time {
  font-size: 12px;
  color: var(--text-secondary);
}
.orders-list .my-bets-section .bets-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 700;
}
.orders-list .my-bets-section .bets-table-header .payment-header {
  text-align: center;
}
.orders-list .my-bets-section .bets-table-header .result-header {
  text-align: right;
}
.orders-list .my-bets-section .bet-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px 0 0;
  align-items: center;
  height: 46px;
}
.orders-list .my-bets-section .bet-row .bet-combination {
  display: flex;
  gap: 4px;
}
.orders-list .my-bets-section .bet-row .bet-combination .combination-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.orders-list
  .my-bets-section
  .bet-row
  .bet-combination
  .combination-circle.inactive {
  background-color: #e5e5e5;
  color: #999;
}
.orders-list
  .my-bets-section
  .bet-row
  .bet-combination
  .combination-circle.active-0 {
  background-color: #e53e3e;
  color: #fff;
}
.orders-list
  .my-bets-section
  .bet-row
  .bet-combination
  .combination-circle.active-1 {
  background-color: #ff8c00;
  color: #fff;
}
.orders-list
  .my-bets-section
  .bet-row
  .bet-combination
  .combination-circle.active-2 {
  background-color: #3182ce;
  color: #fff;
}
.orders-list .my-bets-section .bet-row .bet-payment {
  text-align: center;
  font-weight: 700;
}
.orders-list .my-bets-section .bet-row .bet-payment span {
  font-size: 10px;
  color: var(--text-secondary);
}
.orders-list .my-bets-section .bet-row .bet-result {
  text-align: right;
}
.orders-list .my-bets-section .bet-row .bet-result .results-status {
  font-size: 12px;
  color: var(--text-secondary);
}
.orders-list .my-bets-section .bet-row .bet-result .result-amount {
  font-weight: 700;
  font-size: 16px;
}
.orders-list .no-bets {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  background-color: #fff;
  border-radius: 8px;
}
.orders-list .no-bets .no-bets-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.orders-list .no-bets h3 {
  margin: 0 0 8px;
  color: #333;
}
.orders-list .no-bets p {
  margin: 0;
  font-size: 14px;
}
.orders-list .loading-state {
  text-align: center;
  padding: 40px 20px;
  background-color: #fff;
  border-radius: 8px;
}
.orders-list .loading-state .loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 4px solid var(--border-color);
  border-top-color: var(--loading-border-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.orders-list .loading-state p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.draw-results-container {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 16px 0;
}
.draw-header {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-align: center;
}
.draw-datetime {
  font-weight: 500;
  margin-right: 8px;
}
.draw-title {
  color: #333;
}
.result-circles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.result-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.result-circle.letter.letter-0 {
  background-color: #dc3545;
}
.result-circle.letter.letter-1 {
  background-color: #fd7e14;
}
.result-circle.letter.letter-2 {
  background-color: #007bff;
}
.result-circle.number.number-0 {
  background-color: #dc3545;
}
.result-circle.number.number-1 {
  background-color: #fd7e14;
}
.result-circle.number.number-2 {
  background-color: #007bff;
}
.equals-sign {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 4px;
}
@media (max-width: 480px) {
  .result-circles {
    gap: 6px;
  }
  .result-circle {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .equals-sign {
    font-size: 16px;
  }
}
.my-bets-digipagination {
  margin-top: 5px;
  padding: 10px;
  background: var(bg-medium);
}
.win-message {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  padding: 16px;
  text-align: center;
  position: relative;
}
.win-message:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #2e7d32;
  border-top: 20px solid transparent;
}
.win-message:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-right: 20px solid #2e7d32;
  border-top: 20px solid transparent;
}
.win-message .win-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.win-message .total-prize {
  font-size: 18px;
  font-weight: 700;
}
.pagination-container {
  position: relative;
  width: 100%;
}
.pagination-total {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  margin-right: 16px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 768px) {
  .pagination-total {
    margin-right: 12px;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .pagination-total {
    margin-right: 0;
    margin-bottom: 8px;
    width: 100%;
    justify-content: center;
  }
}
.pagination-default .pagination-info {
  display: none;
}
.pagination-default .pagination-wrapper {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .pagination-default .pagination-wrapper {
    gap: 6px;
  }
}
@media (max-width: 640px) {
  .pagination-default .pagination-wrapper {
    gap: 4px;
  }
}
@media (max-width: 480px) {
  .pagination-default .pagination-wrapper {
    gap: 3px;
    padding: 0 8px;
  }
}
@media (max-width: 360px) {
  .pagination-default .pagination-wrapper {
    gap: 2px;
    padding: 0 4px;
  }
}
.pagination-compact .pagination-wrapper,
.pagination-minimal .pagination-wrapper {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pagination-wrapper::-webkit-scrollbar {
  display: none;
}
@media (max-width: 768px) {
  .pagination-wrapper {
    gap: 6px;
  }
}
@media (max-width: 640px) {
  .pagination-wrapper {
    gap: 4px;
  }
}
@media (max-width: 480px) {
  .pagination-wrapper {
    gap: 3px;
    padding: 0 8px;
  }
}
@media (max-width: 360px) {
  .pagination-wrapper {
    gap: 2px;
    padding: 0 4px;
  }
}
.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  background: var(--bg-dark);
  color: var(--color-white);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.2s ease;
  user-select: none;
  padding: 0;
  flex-shrink: 0;
}
.pagination-btn.disabled {
  background: var(--bg-dark);
  color: var(--color-white);
  cursor: not-allowed;
}
.pagination-btn.page-btn.active {
  background: var(--bg-dark);
  color: var(--color-white);
}
.pagination-btn.nav-btn {
  background: var(--color-primary);
}
.pagination-btn.nav-btn .btn-text {
  display: none;
}
.pagination-btn.nav-btn .nav-icon {
  width: 30px;
  height: 30px;
  color: var(--bg-dark);
}
@media (max-width: 768px) {
  .pagination-btn.nav-btn .nav-icon {
    width: 26px;
    height: 26px;
  }
}
@media (max-width: 480px) {
  .pagination-btn.nav-btn .nav-icon {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 360px) {
  .pagination-btn.nav-btn .nav-icon {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 320px) {
  .pagination-btn.nav-btn .nav-icon {
    width: 20px;
    height: 20px;
  }
}
.pagination-btn.jump-btn {
  display: none;
}
.page-numbers {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .page-numbers {
    gap: 6px;
  }
}
@media (max-width: 640px) {
  .page-numbers {
    gap: 4px;
  }
}
@media (max-width: 480px) {
  .page-numbers {
    gap: 3px;
  }
}
@media (max-width: 360px) {
  .page-numbers {
    gap: 2px;
  }
}
.page-dots {
  padding: 0 6px;
  color: #999;
  font-weight: 400;
  font-size: 14px;
  user-select: none;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .page-dots {
    font-size: 13px;
    padding: 0 4px;
  }
}
@media (max-width: 640px) {
  .page-dots {
    font-size: 13px;
    padding: 0 3px;
  }
}
@media (max-width: 480px) {
  .page-dots {
    font-size: 12px;
    padding: 0 2px;
  }
}
@media (max-width: 360px) {
  .page-dots {
    font-size: 11px;
    padding: 0 1px;
  }
}
@media (max-width: 320px) {
  .page-dots {
    font-size: 10px;
    padding: 0;
  }
}
.quick-jump {
  display: none;
}
.pagination-loading {
  pointer-events: none;
  opacity: 0.7;
}
.pagination-loading-overlay {
  position: absolute;
  inset: 0;
  background: #fffc;
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--loading-border-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@media (max-width: 480px) {
  .loading-spinner {
    width: 14px;
    height: 14px;
    border-width: 1px;
  }
}
.pagination-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.pagination-container.pagination-sm .pagination-btn {
  min-height: 32px;
  min-width: 32px;
  font-size: 12px;
}
@media (max-width: 480px) {
  .pagination-container.pagination-sm .pagination-btn {
    min-height: 28px;
    min-width: 28px;
    font-size: 11px;
  }
}
.pagination-container.pagination-md .pagination-btn {
  min-height: 40px;
  min-width: 40px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .pagination-container.pagination-md .pagination-btn {
    min-height: 36px;
    min-width: 36px;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .pagination-container.pagination-md .pagination-btn {
    min-height: 32px;
    min-width: 32px;
    font-size: 12px;
  }
}
.pagination-container.pagination-lg .pagination-btn {
  min-height: 48px;
  min-width: 48px;
  font-size: 16px;
}
@media (max-width: 640px) {
  .pagination-container.pagination-lg .pagination-btn {
    min-height: 42px;
    min-width: 42px;
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .pagination-container.pagination-lg .pagination-btn {
    min-height: 36px;
    min-width: 36px;
    font-size: 13px;
  }
}
@media (max-width: 320px) {
  .pagination-container {
    font-size: 0;
  }
  .pagination-wrapper {
    gap: 4px;
    padding: 0 2px;
  }
  .page-numbers {
    gap: 1px;
  }
  .pagination-btn {
    min-height: 24px !important;
    min-width: 24px !important;
    font-size: 9px !important;
    border-radius: 2px !important;
  }
  .page-dots {
    font-size: 9px !important;
    padding: 0 !important;
  }
}
.bet-status-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.bet-status-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.bet-status-modal {
  background: #000c;
  border-radius: 12px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  width: 60%;
  max-width: 220px;
}
.bet-status-overlay.visible .bet-status-modal {
  transform: scale(1);
}
.status-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.status-icon.success-icon {
  background: #4caf50;
}
.status-icon.error-icon {
  background: #f44336;
}
.status-text {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 0;
}
.status-message {
  color: #fffc;
  font-size: 20px;
  text-align: center;
  margin-top: 4px;
  max-width: 200px;
  text-transform: uppercase;
}
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  line-height: 1.5;
  color: #2f3542;
  background: #f1f2f6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wingo-app {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-dark);
  position: relative;
}
.wingo-game-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  position: relative;
}
.wingo-game-page .connection-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  gap: 1.5rem;
  color: #fff;
  padding: 1.5rem;
}
.wingo-game-page .connection-status .connection-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: pulse 2s infinite;
}
.wingo-game-page .connection-status .back-button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #2f3542;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.wingo-game-page .connection-status .back-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s;
}
.wingo-game-page .connection-status .back-button:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #ced4da;
  transform: translateY(-1px);
}
.wingo-game-page .connection-status .back-button:hover:not(:disabled):before {
  left: 100%;
}
.wingo-game-page .connection-status .back-button:active:not(:disabled) {
  transform: translateY(0);
}
.wingo-game-page .connection-status .back-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}
.wingo-game-page .wingo-game-status {
  background: #fff;
  margin: 1rem;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 24px #00000026;
  position: relative;
  overflow: hidden;
}
.wingo-game-page .wingo-game-status:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}
.wingo-game-page .wingo-game-status .wingo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.wingo-game-page .wingo-game-status .wingo-header .wingo-back-button {
  background: none;
  border: none;
  color: #667eea;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wingo-game-page .wingo-game-status .wingo-header .wingo-back-button:hover {
  background-color: #667eea1a;
  transform: translate(-2px);
}
.wingo-game-page .wingo-game-status .wingo-header .wingo-game-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #2f3542;
  margin: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wingo-game-page .wingo-game-status .wingo-header .wingo-period {
  font-size: 0.9rem;
  color: #6c757d;
  background: #f8f9fa;
  padding: 0.25rem 1rem;
  border-radius: 20px;
  border: 1px solid #e9ecef;
  font-weight: 500;
}
.wingo-game-page .wingo-game-status .wingo-timer-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.wingo-game-page .wingo-game-status .wingo-timer-section .wingo-timer {
  text-align: center;
  flex: 1;
}
.wingo-game-page
  .wingo-game-status
  .wingo-timer-section
  .wingo-timer
  .wingo-timer-label {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.wingo-game-page
  .wingo-game-status
  .wingo-timer-section
  .wingo-timer
  .wingo-timer-value {
  font-size: 2.5rem;
  font-weight: 900;
  color: #667eea;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: pulse 2s infinite;
}
.wingo-game-page .wingo-game-status .wingo-timer-section .wingo-betting-status {
  padding: 1rem 2rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 4px #0000001a;
}
.wingo-game-page
  .wingo-game-status
  .wingo-timer-section
  .wingo-betting-status.open {
  background: linear-gradient(135deg, #2ed5731a, #2ed5730d);
  color: #2ed573;
  border: 2px solid rgba(46, 213, 115, 0.3);
}
.wingo-game-page
  .wingo-game-status
  .wingo-timer-section
  .wingo-betting-status.open:before {
  content: "🟢";
}
.wingo-game-page
  .wingo-game-status
  .wingo-timer-section
  .wingo-betting-status.closed {
  background: linear-gradient(135deg, #ff47571a, #ff47570d);
  color: #ff4757;
  border: 2px solid rgba(255, 71, 87, 0.3);
}
.wingo-game-page
  .wingo-game-status
  .wingo-timer-section
  .wingo-betting-status.closed:before {
  content: "🔒";
}
.wingo-game-page .wingo-game-status .wingo-last-result {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 1px solid #e9ecef;
}
.wingo-game-page
  .wingo-game-status
  .wingo-last-result
  .wingo-last-result-label {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.wingo-game-page
  .wingo-game-status
  .wingo-last-result
  .wingo-last-result-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.wingo-game-page
  .wingo-game-status
  .wingo-last-result
  .wingo-last-result-content
  .wingo-result-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 16px #0000001a;
  position: relative;
}
.wingo-game-page
  .wingo-game-status
  .wingo-last-result
  .wingo-last-result-content
  .wingo-result-number:after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
}
.wingo-game-page
  .wingo-game-status
  .wingo-last-result
  .wingo-last-result-content
  .wingo-result-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wingo-game-page
  .wingo-game-status
  .wingo-last-result
  .wingo-last-result-content
  .wingo-result-details
  .wingo-result-color,
.wingo-game-page
  .wingo-game-status
  .wingo-last-result
  .wingo-last-result-content
  .wingo-result-details
  .wingo-result-size {
  padding: 0.5rem 1rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;
  box-shadow: 0 2px 4px #0000001a;
}
.wingo-game-page .wingo-betting-main {
  padding: 1rem;
  padding-bottom: 140px;
  min-height: calc(100vh - 200px);
}
.wingo-game-page .wingo-betting-section {
  background: #fff;
  margin-bottom: 2rem;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 6px 16px #0000001a;
  position: relative;
  overflow: hidden;
  border: 1px solid #e9ecef;
  animation: slideUp 0.6s ease;
}
.wingo-game-page .wingo-betting-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}
.wingo-game-page .wingo-betting-section .wingo-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #2f3542;
  margin: 0 0 2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}
.wingo-game-page .wingo-betting-section .wingo-section-title:after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translate(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
}
.wingo-game-page .wingo-color-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .wingo-game-page .wingo-color-options {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wingo-game-page .wingo-color-bet-card {
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.wingo-game-page .wingo-color-bet-card:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.wingo-game-page .wingo-color-bet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px #0003;
}
.wingo-game-page .wingo-color-bet-card:hover:before {
  opacity: 0.03;
}
.wingo-game-page .wingo-color-bet-card.green {
  background: linear-gradient(135deg, #2ed57314, #2ed57308);
  border-color: #2ed57333;
}
.wingo-game-page .wingo-color-bet-card.green:before {
  background: #2ed573;
}
.wingo-game-page .wingo-color-bet-card.green .wingo-color-indicator {
  background: #2ed573;
  box-shadow: 0 4px 16px #2ed57366;
}
.wingo-game-page .wingo-color-bet-card.green .wingo-add-basket-button {
  background: linear-gradient(135deg, #2ed573, #23ad5c);
}
.wingo-game-page .wingo-color-bet-card.red {
  background: linear-gradient(135deg, #ff475714, #ff475708);
  border-color: #ff475733;
}
.wingo-game-page .wingo-color-bet-card.red:before {
  background: #ff4757;
}
.wingo-game-page .wingo-color-bet-card.red .wingo-color-indicator {
  background: #ff4757;
  box-shadow: 0 4px 16px #ff475766;
}
.wingo-game-page .wingo-color-bet-card.red .wingo-add-basket-button {
  background: linear-gradient(135deg, #ff4757, #ff1428);
}
.wingo-game-page .wingo-color-bet-card.violet {
  background: linear-gradient(135deg, #a55eea14, #a55eea08);
  border-color: #a55eea33;
}
.wingo-game-page .wingo-color-bet-card.violet:before {
  background: linear-gradient(#8800db, #8800db);
}
.wingo-game-page .wingo-color-bet-card.violet .wingo-color-indicator {
  background: linear-gradient(#8800db, #8800db);
  box-shadow: 0 4px 16px #a55eea66;
}
.wingo-game-page .wingo-color-bet-card.violet .wingo-add-basket-button {
  background: linear-gradient(135deg, #a55eea, #8c31e4);
}
.wingo-game-page .wingo-color-bet-card .wingo-color-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.wingo-game-page
  .wingo-color-bet-card
  .wingo-color-header
  .wingo-color-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
}
.wingo-game-page
  .wingo-color-bet-card
  .wingo-color-header
  .wingo-color-indicator:after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
}
.wingo-game-page .wingo-color-bet-card .wingo-color-header .wingo-color-name {
  font-weight: 700;
  color: #2f3542;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wingo-game-page .wingo-color-bet-card .wingo-color-header .wingo-color-payout {
  font-size: 0.8rem;
  color: #6c757d;
  background: #f8f9fa;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  font-weight: 600;
}
.wingo-game-page .wingo-color-bet-card .wingo-bet-amount-display {
  font-size: 1.8rem;
  font-weight: 900;
  color: #2f3542;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, #00000008, #0000000f);
  border-radius: 8px;
  border: 1px solid #e9ecef;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
}
.wingo-game-page .wingo-color-bet-card .wingo-bet-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .wingo-game-page .wingo-color-bet-card .wingo-bet-buttons {
    grid-template-columns: repeat(4, 1fr);
  }
}
.wingo-game-page .wingo-color-bet-card .wingo-bet-buttons .wingo-bet-button {
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #2f3542;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.wingo-game-page
  .wingo-color-bet-card
  .wingo-bet-buttons
  .wingo-bet-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s;
}
.wingo-game-page
  .wingo-color-bet-card
  .wingo-bet-buttons
  .wingo-bet-button:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #ced4da;
  transform: translateY(-1px);
}
.wingo-game-page
  .wingo-color-bet-card
  .wingo-bet-buttons
  .wingo-bet-button:hover:not(:disabled):before {
  left: 100%;
}
.wingo-game-page
  .wingo-color-bet-card
  .wingo-bet-buttons
  .wingo-bet-button:active:not(:disabled) {
  transform: translateY(0);
}
.wingo-game-page
  .wingo-color-bet-card
  .wingo-bet-buttons
  .wingo-bet-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}
.wingo-game-page .wingo-add-basket-button {
  width: 100%;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 16px #0000001a;
  position: relative;
  overflow: hidden;
}
.wingo-game-page .wingo-add-basket-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s;
}
.wingo-game-page .wingo-add-basket-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #00000026;
}
.wingo-game-page .wingo-add-basket-button:hover:not(:disabled):before {
  left: 100%;
}
.wingo-game-page .wingo-add-basket-button:active:not(:disabled) {
  transform: translateY(0);
}
.wingo-game-page .wingo-add-basket-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
  transform: none !important;
}
.wingo-bottom-bar {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 -8px 32px #0000001f;
  display: flex;
  gap: 1rem;
  z-index: 100;
  border-top: 1px solid #e9ecef;
}
.wingo-bottom-bar .wingo-basket-button {
  flex: 1;
  padding: 1.5rem;
  border: 2px solid #667eea;
  border-radius: 12px;
  background: #fff;
  color: #667eea;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}
.wingo-bottom-bar .wingo-basket-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(102, 126, 234, 0.1),
    transparent
  );
  transition: left 0.6s;
}
.wingo-bottom-bar .wingo-basket-button:hover:not(:disabled) {
  background: #667eea0d;
  transform: translateY(-2px);
}
.wingo-bottom-bar .wingo-basket-button:hover:not(:disabled):before {
  left: 100%;
}
.wingo-bottom-bar .wingo-basket-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.wingo-bottom-bar .wingo-basket-button .wingo-basket-icon {
  font-size: 1.4rem;
}
.wingo-bottom-bar .wingo-basket-button .wingo-basket-count {
  font-weight: 900;
  background: #667eea;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  font-size: 0.8rem;
  min-width: 24px;
  text-align: center;
}
.wingo-bottom-bar .wingo-basket-button .wingo-basket-total {
  font-weight: 900;
  color: #2ed573;
  font-size: 1.1rem;
}
.wingo-bottom-bar .wingo-bet-all-button {
  flex: 1.5;
  padding: 1.5rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #2ed573, #23ad5c);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 16px #0000001a;
  position: relative;
  overflow: hidden;
}
.wingo-bottom-bar .wingo-bet-all-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s;
}
.wingo-bottom-bar .wingo-bet-all-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px #00000026;
}
.wingo-bottom-bar .wingo-bet-all-button:hover:not(:disabled):before {
  left: 100%;
}
.wingo-bottom-bar .wingo-bet-all-button:active:not(:disabled) {
  transform: translateY(-1px);
}
.wingo-bottom-bar .wingo-bet-all-button:disabled {
  background: #ced4da;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}
.wingo-bottom-tabs {
  max-width: 500px;
  margin: 0 auto;
  background: var(--bg-wallet);
  display: flex;
  z-index: 101;
}
.wingo-bottom-tabs .wingo-bottom-tab {
  flex: 1;
  padding: 1.5rem;
  border: none;
  background: transparent;
  color: #6c757d;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wingo-bottom-tabs .wingo-bottom-tab.active {
  color: #667eea;
  background: #667eea0d;
}
.wingo-bottom-tabs .wingo-bottom-tab.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px 3px 0 0;
  animation: slideIn 0.3s ease;
}
.wingo-bottom-tabs .wingo-bottom-tab:hover:not(.active) {
  background: #667eea08;
  color: #667eea;
}
.wingo-tab-content {
  position: fixed;
  bottom: 120px;
  left: 0;
  right: 0;
  max-height: 60vh;
  background: #fff;
  border-top: 1px solid #e9ecef;
  overflow-y: auto;
  z-index: 99;
  box-shadow: 0 -4px 20px #00000014;
  animation: slideUp 0.4s ease;
}
.wingo-tab-content::-webkit-scrollbar {
  width: 6px;
}
.wingo-tab-content::-webkit-scrollbar-track {
  background: #f8f9fa;
}
.wingo-tab-content::-webkit-scrollbar-thumb {
  background: #ced4da;
  border-radius: 3px;
}
.wingo-tab-content::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}
.wingo-result-history .wingo-result-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  font-weight: 700;
  color: #2f3542;
  border-bottom: 2px solid #dee2e6;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.wingo-result-history .wingo-result-list {
  max-height: 50vh;
  overflow-y: auto;
}
.wingo-result-history .wingo-result-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid #f8f9fa;
  align-items: center;
  transition: background-color 0.15s ease;
}
.wingo-result-history .wingo-result-item:hover {
  background: #667eea08;
}
.wingo-result-history .wingo-result-item:last-child {
  border-bottom: none;
}
.wingo-result-history .wingo-result-item .wingo-result-period {
  font-weight: 700;
  color: #2f3542;
  font-size: 0.9rem;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
}
.wingo-result-history .wingo-result-item .wingo-result-number {
  display: flex;
  justify-content: center;
}
.wingo-result-history
  .wingo-result-item
  .wingo-result-number
  .wingo-number-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px #0000001a;
}
.wingo-result-history .wingo-result-item .wingo-result-color {
  display: flex;
  justify-content: center;
}
.wingo-result-history
  .wingo-result-item
  .wingo-result-color
  .wingo-color-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 2px 4px #0000001a;
  position: relative;
}
.wingo-result-history
  .wingo-result-item
  .wingo-result-color
  .wingo-color-indicator:after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
}
.wingo-result-history .wingo-result-item .wingo-result-size {
  display: flex;
  justify-content: center;
}
.wingo-result-history .wingo-result-item .wingo-result-size .wingo-size-tag {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px #0000001a;
}
.color-red-violet {
  background: linear-gradient(45deg, #ff4757 50%, #a55eea 50%) !important;
}
.wingo-modal-overlay {
  position: fixed;
  inset: 0;
  background: #0009;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}
.wingo-modal-content {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px #0003;
  animation: modalSlideIn 0.4s ease;
}
.wingo-modal-header {
  padding: 2rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #f8f9fa, #fff);
}
.wingo-modal-header h2 {
  margin: 0;
  color: #2f3542;
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wingo-modal-header .wingo-modal-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0.5rem;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.wingo-modal-header .wingo-modal-close:hover {
  background: #e9ecef;
  color: #2f3542;
  transform: rotate(90deg);
}
.wingo-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.wingo-modal-body::-webkit-scrollbar {
  width: 6px;
}
.wingo-modal-body::-webkit-scrollbar-track {
  background: #f8f9fa;
}
.wingo-modal-body::-webkit-scrollbar-thumb {
  background: #ced4da;
  border-radius: 3px;
}
.wingo-modal-body::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}
.wingo-empty-basket {
  padding: 3rem 2rem;
  text-align: center;
  color: #6c757d;
}
.wingo-empty-basket .wingo-empty-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}
.wingo-empty-basket p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
}
.wingo-empty-basket .wingo-empty-subtitle {
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #adb5bd;
  margin-top: 1rem !important;
}
.wingo-basket-items {
  padding: 1rem 0;
}
.wingo-basket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f8f9fa;
  transition: all 0.15s ease;
}
.wingo-basket-item:hover {
  background: #667eea08;
}
.wingo-basket-item:last-child {
  border-bottom: none;
}
.wingo-basket-item-info {
  flex: 1;
}
.wingo-basket-bet-type {
  font-weight: 700;
  color: #2f3542;
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
  text-transform: capitalize;
}
.wingo-basket-bet-details {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.95rem;
}
.wingo-basket-bet-details .wingo-basket-amount {
  color: #2ed573;
  font-weight: 700;
  font-size: 1.1rem;
}
.wingo-basket-bet-details .wingo-basket-payout {
  color: #6c757d;
  background: #f8f9fa;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid #e9ecef;
}
.wingo-basket-remove {
  background: #ff4757;
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px #0000001a;
}
.wingo-basket-remove:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 16px #0000001a;
}
.wingo-basket-summary {
  padding: 2rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-top: 2px solid #dee2e6;
}
.wingo-basket-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2f3542;
  margin-bottom: 0.5rem;
}
.wingo-basket-total .wingo-total-amount {
  color: #2ed573;
  font-size: 1.4rem;
  font-weight: 900;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
}
.wingo-basket-items-count {
  font-size: 0.95rem;
  color: #6c757d;
  text-align: center;
  font-weight: 500;
}
.wingo-modal-footer {
  padding: 2rem;
  border-top: 2px solid #e9ecef;
  display: flex;
  gap: 1rem;
  background: #fff;
}
.wingo-clear-basket-btn {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 2px solid #ff4757;
  border-radius: 12px;
  background: #fff;
  color: #ff4757;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wingo-clear-basket-btn:hover {
  background: #ff4757;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px #0000001a;
}
.wingo-place-bets-btn {
  flex: 2;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #2ed573, #23ad5c);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 16px #0000001a;
}
.wingo-place-bets-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #00000026;
}
.wingo-place-bets-btn:disabled {
  background: #ced4da;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.wingo-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%) translateY(-100px);
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 12px 32px #0003;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  z-index: 1100;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  max-width: 500px;
  min-width: 300px;
}
.wingo-toast.visible {
  opacity: 1;
  transform: translate(-50%) translateY(0);
  pointer-events: all;
}
.wingo-toast.success {
  border-left: 4px solid #2ed573;
}
.wingo-toast.success .wingo-toast-icon {
  color: #2ed573;
  background: #2ed5731a;
}
.wingo-toast.error {
  border-left: 4px solid #ff4757;
}
.wingo-toast.error .wingo-toast-icon {
  color: #ff4757;
  background: #ff47571a;
}
.wingo-toast .wingo-toast-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wingo-toast .wingo-toast-message {
  font-weight: 600;
  color: #2f3542;
  font-size: 1rem;
  line-height: 1.4;
}
.wingo-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #6c757d;
  font-size: 1.1rem;
  font-weight: 600;
}
.wingo-loading:after {
  content: "";
  width: 24px;
  height: 24px;
  border: 3px solid #dee2e6;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 1rem;
}
@media (max-width: 768px) {
  .wingo-betting-main {
    padding: 0.5rem;
    padding-bottom: 140px;
  }
  .wingo-betting-section {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .wingo-game-status {
    margin: 0.5rem;
    padding: 1.5rem;
  }
  .wingo-game-status .wingo-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .wingo-game-status .wingo-header .wingo-back-button {
    align-self: flex-start;
  }
  .wingo-game-status .wingo-header .wingo-game-title {
    font-size: 1.5rem;
  }
  .wingo-game-status .wingo-timer-section {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  .wingo-game-status .wingo-timer-section .wingo-timer-value {
    font-size: 2rem;
  }
  .wingo-game-status .wingo-last-result-content {
    flex-direction: column;
    gap: 1.5rem;
  }
  .wingo-color-options,
  .wingo-size-options {
    grid-template-columns: 1fr;
  }
  .wingo-number-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wingo-result-header,
  .wingo-result-item {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    font-size: 0.8rem;
    padding: 1rem;
  }
  .wingo-modal-content {
    margin: 0;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .wingo-modal-overlay {
    padding: 0;
  }
  .wingo-modal-footer {
    flex-direction: column;
  }
  .wingo-modal-footer .wingo-clear-basket-btn,
  .wingo-modal-footer .wingo-place-bets-btn {
    flex: none;
  }
  .wingo-bottom-bar {
    padding: 0.5rem;
  }
  .wingo-bottom-bar .wingo-basket-button,
  .wingo-bottom-bar .wingo-bet-all-button {
    padding: 1rem;
    font-size: 0.9rem;
  }
  .wingo-toast {
    left: 1rem;
    right: 1rem;
    transform: translateY(-100px);
    max-width: none;
    min-width: auto;
  }
  .wingo-toast.visible {
    transform: translateY(0);
  }
}
@media (max-width: 480px) {
  .wingo-section-title {
    font-size: 1.2rem;
  }
  .wingo-color-bet-card,
  .wingo-size-bet-card {
    padding: 1.5rem;
  }
  .wingo-bet-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .wingo-number-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .wingo-number-bet-card {
    padding: 1rem;
  }
  .wingo-bottom-tabs .wingo-bottom-tab {
    padding: 1rem;
    font-size: 0.8rem;
  }
}
@media (max-width: 418px) {
  .wingo-bottom-tabs .wingo-bottom-tab {
    padding: 14px;
    font-size: 0.85rem;
  }
}
@media (max-width: 390px) {
  .wingo-bottom-tabs .wingo-bottom-tab {
    padding: 12px;
    font-size: 0.8rem;
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    left: -100%;
    right: 100%;
  }
  to {
    left: 20%;
    right: 20%;
  }
}
@keyframes modalSlideIn {
  0% {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  to {
    background-position: calc(200px + 100%) 0;
  }
}
.wingo-text-center {
  text-align: center;
}
.wingo-text-left {
  text-align: left;
}
.wingo-text-right {
  text-align: right;
}
.wingo-font-mono {
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
}
.wingo-font-bold {
  font-weight: 700;
}
.wingo-font-black {
  font-weight: 900;
}
.wingo-uppercase {
  text-transform: uppercase;
}
.wingo-lowercase {
  text-transform: lowercase;
}
.wingo-capitalize {
  text-transform: capitalize;
}
.wingo-no-select {
  user-select: none;
}
.wingo-pointer {
  cursor: pointer;
}
.wingo-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
@media print {
  .wingo-app {
    background: var(--bg-dark) !important;
  }
  .wingo-bottom-bar,
  .wingo-bottom-tabs,
  .wingo-modal-overlay {
    display: none !important;
  }
  .wingo-betting-section {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}
@media (prefers-contrast: high) {
  .wingo-app {
    background: var(--bg-dark);
  }
  .wingo-game-status,
  .wingo-betting-section,
  .wingo-modal-content,
  .wingo-color-bet-card,
  .wingo-size-bet-card,
  .wingo-number-bet-card,
  .wingo-bet-button,
  .wingo-add-basket-button,
  .wingo-basket-button,
  .wingo-bet-all-button {
    border: 2px solid black !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .wingo-timer-value {
    animation: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  .wingo-app {
    background: var(--bg-dark);
  }
  .wingo-game-status,
  .wingo-betting-section,
  .wingo-modal-content,
  .wingo-bottom-bar,
  .wingo-bottom-tabs,
  .wingo-tab-content {
    background: var(--bg-wallet);
    color: var(--color-white);
    border-color: #444460;
  }
  .wingo-section-title,
  .wingo-game-title,
  .wingo-basket-bet-type {
    color: #fff;
  }
  .wingo-bet-amount-display,
  .wingo-number-bet-card,
  .wingo-color-bet-card,
  .wingo-size-bet-card {
    background: #3a3a52;
    border-color: #555570;
  }
  .wingo-bet-button {
    background: #444460;
    color: #e6e6e6;
    border-color: #666680;
  }
  .wingo-bet-button:hover:not(:disabled) {
    background: #555570;
  }
  .wingo-result-item:hover {
    background: #667eea1a;
  }
  .wingo-toast {
    background: #2d2d44;
    color: #e6e6e6;
  }
}
.wingo-back-button:focus,
.wingo-bet-button:focus,
.wingo-add-basket-button:focus,
.wingo-basket-button:focus,
.wingo-bet-all-button:focus,
.wingo-bottom-tab:focus,
.wingo-modal-close:focus,
.wingo-clear-basket-btn:focus,
.wingo-place-bets-btn:focus,
.wingo-basket-remove:focus {
  outline: 3px solid #3742fa;
  outline-offset: 2px;
}
:root {
  --wingo-primary: #667eea;
  --wingo-secondary: #764ba2;
  --wingo-success: #2ed573;
  --wingo-danger: #ff4757;
  --wingo-warning: #ffa502;
  --wingo-info: #3742fa;
  --wingo-red: #ff4757;
  --wingo-green: #2ed573;
  --wingo-violet: #a55eea;
  --wingo-dark: #2f3542;
  --wingo-light: #f1f2f6;
  --wingo-white: #ffffff;
  --wingo-border-radius: 8px;
  --wingo-border-radius-md: 12px;
  --wingo-border-radius-lg: 16px;
  --wingo-spacing-sm: 0.5rem;
  --wingo-spacing-md: 1rem;
  --wingo-spacing-lg: 1.5rem;
  --wingo-spacing-xl: 2rem;
  --wingo-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --wingo-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.1);
  --wingo-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --wingo-transition: 0.3s ease;
  --wingo-transition-fast: 0.15s ease;
}
.wingo-winners-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #2ed573, #1a8345);
  color: #fff;
  padding: 2rem 3rem;
  border-radius: 16px;
  box-shadow: 0 12px 32px #0003;
  z-index: 1100;
  text-align: center;
  min-width: 300px;
  animation: winnersPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wingo-winners-toast .wingo-winners-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: bounce 2s infinite;
}
.wingo-winners-toast .wingo-winners-title {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wingo-winners-toast .wingo-winners-amount {
  font-size: 2rem;
  font-weight: 900;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.wingo-winners-toast .wingo-winners-details {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
}
.wingo-rules-modal .wingo-rules-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 2rem;
}
.wingo-rules-modal .wingo-rules-content h3 {
  color: #667eea;
  font-weight: 700;
  margin-bottom: 1rem;
  border-bottom: 2px solid #667eea;
  padding-bottom: 0.5rem;
}
.wingo-rules-modal .wingo-rules-content .wingo-rule-section {
  margin-bottom: 2rem;
}
.wingo-rules-modal .wingo-rules-content .wingo-rule-section .wingo-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.wingo-rules-modal
  .wingo-rules-content
  .wingo-rule-section
  .wingo-rule-item
  .wingo-rule-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #667eea;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.wingo-rules-modal
  .wingo-rules-content
  .wingo-rule-section
  .wingo-rule-item
  .wingo-rule-text {
  flex: 1;
}
.wingo-rules-modal
  .wingo-rules-content
  .wingo-rule-section
  .wingo-rule-item
  .wingo-rule-text
  .wingo-rule-title {
  font-weight: 600;
  color: #2f3542;
  margin-bottom: 0.25rem;
}
.wingo-rules-modal
  .wingo-rules-content
  .wingo-rule-section
  .wingo-rule-item
  .wingo-rule-text
  .wingo-rule-description {
  color: #6c757d;
  line-height: 1.5;
}
.wingo-rules-modal .wingo-rules-content .wingo-payout-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}
.wingo-rules-modal .wingo-rules-content .wingo-payout-table th {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 1rem;
  font-weight: 700;
  text-align: left;
}
.wingo-rules-modal .wingo-rules-content .wingo-payout-table td {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
}
.wingo-rules-modal .wingo-rules-content .wingo-payout-table td:first-child {
  font-weight: 600;
}
.wingo-rules-modal .wingo-rules-content .wingo-payout-table tr:last-child td {
  border-bottom: none;
}
.wingo-rules-modal .wingo-rules-content .wingo-payout-table tr:nth-child(2n) {
  background: #f8f9fa80;
}
.wingo-orders-list {
  padding: 1.5rem;
  max-height: 50vh;
  overflow-y: auto;
}
.wingo-orders-list .wingo-orders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}
.wingo-orders-list .wingo-orders-header .wingo-orders-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2f3542;
}
.wingo-orders-list .wingo-orders-header .wingo-orders-count {
  background: #667eea;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.wingo-orders-list .wingo-order-item {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}
.wingo-orders-list .wingo-order-item:hover {
  border-color: #667eea;
  box-shadow: 0 6px 16px #0000001a;
}
.wingo-orders-list .wingo-order-item .wingo-order-header {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wingo-orders-list .wingo-order-item .wingo-order-header .wingo-order-period {
  font-weight: 700;
  color: #2f3542;
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
}
.wingo-orders-list .wingo-order-item .wingo-order-header .wingo-order-status {
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-header
  .wingo-order-status.won {
  background: #2ed573;
  color: #fff;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-header
  .wingo-order-status.lost {
  background: #ff4757;
  color: #fff;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-header
  .wingo-order-status.pending {
  background: #ffa502;
  color: #fff;
}
.wingo-orders-list .wingo-order-item .wingo-order-body {
  padding: 1.5rem;
}
.wingo-orders-list .wingo-order-item .wingo-order-body .wingo-bet-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-bet-details
  .wingo-bet-detail-item {
  text-align: center;
  padding: 0.5rem;
  background: #667eea0d;
  border-radius: 8px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-bet-details
  .wingo-bet-detail-item
  .wingo-bet-label {
  font-size: 0.8rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-bet-details
  .wingo-bet-detail-item
  .wingo-bet-value {
  font-weight: 700;
  color: #2f3542;
}
.wingo-orders-list .wingo-order-item .wingo-order-body .wingo-order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-order-summary
  .wingo-bet-amount {
  font-weight: 600;
  color: #2f3542;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-order-summary
  .wingo-pnl {
  font-weight: 700;
  font-size: 1.1rem;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-order-summary
  .wingo-pnl.positive {
  color: #2ed573;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-order-summary
  .wingo-pnl.negative {
  color: #ff4757;
}
.wingo-orders-list
  .wingo-order-item
  .wingo-order-body
  .wingo-order-summary
  .wingo-pnl.neutral {
  color: #6c757d;
}
.wingo-orders-list .wingo-no-orders {
  text-align: center;
  padding: 3rem;
  color: #adb5bd;
}
.wingo-orders-list .wingo-no-orders .wingo-no-orders-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}
.wingo-orders-list .wingo-no-orders .wingo-no-orders-text {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.wingo-orders-list .wingo-no-orders .wingo-no-orders-subtitle {
  color: #ced4da;
}
.wingo-orders-list .wingo-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}
.wingo-orders-list .wingo-pagination .wingo-page-button {
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #2f3542;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 40px;
  text-align: center;
  font-weight: 600;
}
.wingo-orders-list .wingo-pagination .wingo-page-button:hover:not(:disabled) {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}
.wingo-orders-list .wingo-pagination .wingo-page-button.active {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}
.wingo-orders-list .wingo-pagination .wingo-page-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wingo-orders-list .wingo-pagination .wingo-page-info {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0 1rem;
}
.wingo-draw-tabs {
  display: flex;
  background: #fff;
  border-radius: 16px;
  padding: 0.25rem;
  margin: 1rem;
  box-shadow: 0 2px 4px #0000001a;
  overflow-x: auto;
}
.wingo-draw-tabs .wingo-draw-tab {
  flex: 1;
  padding: 1rem;
  border: none;
  background: transparent;
  color: #6c757d;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-weight: 600;
  min-width: 80px;
}
.wingo-draw-tabs .wingo-draw-tab.active {
  background: #667eea;
  color: #fff;
  box-shadow: 0 2px 4px #0000001a;
}
.wingo-draw-tabs .wingo-draw-tab:hover:not(.active) {
  background: #667eea1a;
  color: #667eea;
}
.wingo-lobby {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wingo-lobby .wingo-lobby-content {
  background: #fff;
  border-radius: 16px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 12px 32px #0003;
  max-width: 500px;
  width: 100%;
}
.wingo-lobby .wingo-lobby-content .wingo-lobby-icon {
  font-size: 5rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wingo-lobby .wingo-lobby-content .wingo-lobby-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #2f3542;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wingo-lobby .wingo-lobby-content .wingo-lobby-subtitle {
  color: #6c757d;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  line-height: 1.5;
}
.wingo-lobby .wingo-lobby-content .wingo-play-button {
  padding: 1.5rem 3rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #2ed573, #23ad5c);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 24px #00000026;
}
.wingo-lobby .wingo-lobby-content .wingo-play-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px #0003;
}
.wingo-lobby .wingo-lobby-content .wingo-play-button:active {
  transform: translateY(-1px);
}
.wingo-lobby .wingo-lobby-content .wingo-game-features {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}
.wingo-lobby .wingo-lobby-content .wingo-game-features .wingo-feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}
.wingo-lobby
  .wingo-lobby-content
  .wingo-game-features
  .wingo-feature
  .wingo-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea1a, #764ba21a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.wingo-lobby
  .wingo-lobby-content
  .wingo-game-features
  .wingo-feature
  .wingo-feature-text {
  flex: 1;
  color: #495057;
  font-weight: 500;
}
.wingo-connection-indicator {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wingo-connection-indicator.connected {
  background: #2ed5731a;
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}
.wingo-connection-indicator.connected:before {
  content: "🟢";
}
.wingo-connection-indicator.connecting {
  background: #ffa5021a;
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.3);
}
.wingo-connection-indicator.connecting:before {
  content: "🟡";
  animation: pulse 2s infinite;
}
.wingo-connection-indicator.disconnected {
  background: #ff47571a;
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}
.wingo-connection-indicator.disconnected:before {
  content: "🔴";
}
.wingo-connection-indicator.error {
  background: #ff47571a;
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}
.wingo-connection-indicator.error:before {
  content: "⚠️";
}
@keyframes winnersPop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  to {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 5px #667eea80;
  }
  50% {
    box-shadow: 0 0 20px #667eeacc;
  }
  to {
    box-shadow: 0 0 5px #667eea80;
  }
}
@keyframes slideInLeft {
  0% {
    transform: translate(-100%);
    opacity: 0;
  }
  to {
    transform: translate(0);
    opacity: 1;
  }
}
@keyframes slideInRight {
  0% {
    transform: translate(100%);
    opacity: 0;
  }
  to {
    transform: translate(0);
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes scaleIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.wingo-glow {
  animation: glow 2s ease-in-out infinite alternate;
}
.wingo-gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wingo-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wingo-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #00000026;
}
.wingo-ripple {
  position: relative;
  overflow: hidden;
}
.wingo-ripple:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #ffffff4d;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.wingo-ripple:active:before {
  width: 300px;
  height: 300px;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}
.wingo-float {
  animation: float 3s ease-in-out infinite;
}
@media (max-width: 360px) {
  .wingo-game-status {
    padding: 1rem;
  }
  .wingo-game-status .wingo-timer-value {
    font-size: 1.8rem;
  }
  .wingo-betting-section {
    padding: 1rem;
  }
  .wingo-betting-section .wingo-section-title {
    font-size: 1rem;
  }
  .wingo-color-bet-card,
  .wingo-size-bet-card {
    padding: 1rem;
  }
  .wingo-modal-content {
    margin: 0;
    height: 100vh;
    border-radius: 0;
  }
}
@media (min-width: 1440px) {
  .wingo-betting-main {
    max-width: 1200px;
    margin: 0 auto;
  }
  .wingo-color-options {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .wingo-number-grid {
    grid-template-columns: repeat(10, 1fr);
  }
  .wingo-size-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
.wingo-app {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-dark);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  padding: 16px;
}
.wingo-page-app {
  min-height: 100vh;
  background: var(--bg-dark);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
.wingo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px #0000001a;
}
.wingo-header .wingo-title {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
}
.wingo-header .wingo-balance {
  text-align: right;
}
.wingo-header .wingo-balance .balance-label {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 2px;
}
.wingo-header .wingo-balance .balance-amount {
  font-size: 16px;
  font-weight: 700;
  color: #10b981;
}
.wingo-time-tabs {
  display: flex;
  background: var(--bg-wallet);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 0.05333rem 0.10667rem #c5c5da40;
}
.wingo-time-tabs .time-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-size: 12.8px;
  font-weight: 500;
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.wingo-time-tabs .time-tab.active {
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)),
    linear-gradient(90deg, #7afec3, #02afb6);
  font-weight: 400;
  color: var(--bg-dark);
}
.wingo-time-tabs .time-tab:not(.active):hover {
  background: #f3f4f6;
}
.wingo-game-status-card {
  background: linear-gradient(#a323f9, #3700ae);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wingo-game-status-card .status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.wingo-game-status-card .status-header .how-to-play-btn {
  background: #fff3;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wingo-game-status-card .status-header .how-to-play-btn .play-icon {
  font-size: 10px;
}
.wingo-game-status-card .status-header .time-remaining {
  font-size: 12px;
  opacity: 0.9;
}
.wingo-game-status-card .game-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.wingo-game-status-card .game-info .game-title {
  font-size: 24px;
  font-weight: 700;
}
.wingo-game-status-card .game-info .timer-display {
  display: flex;
  align-items: center;
  gap: 4px;
}
.wingo-game-status-card .game-info .timer-display .timer-digit {
  background: #fff;
  color: #374151;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  font-family: monospace;
}
.wingo-game-status-card .game-info .timer-display .timer-separator {
  font-size: 24px;
  font-weight: 700;
  margin: 0 4px;
}
.wingo-game-status-card .period-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wingo-game-status-card .period-info .period-id {
  font-size: 14px;
  opacity: 0.9;
}
.wingo-game-status-card .period-info .last-results {
  display: flex;
  gap: 4px;
}
.wingo-game-status-card .period-info .last-results .result-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.color-number-container {
  background: var(--bg-medium);
  padding: 7.4668px 10.6668px;
  margin-bottom: 12.8px;
  border-radius: 16px;
}
.wingo-color-betting {
  display: flex;
  gap: 8px;
}
.wingo-color-betting .color-bet-button {
  height: 42.45px;
  flex: 1;
  border: none;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  color: #fff;
  font-size: 14.9332px;
  font-weight: 600;
  cursor: pointer;
}
.wingo-color-betting .color-bet-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.wingo-color-betting .color-bet-button.green {
  background: linear-gradient(#27d44e, #048d02);
}
.wingo-color-betting .color-bet-button.violet {
  background: linear-gradient(#a323f9, #3700ae);
  border-radius: 8px !important;
}
.wingo-color-betting .color-bet-button.red {
  background: linear-gradient(#f50727, #b20016);
}
.wingo-color-betting .color-bet-button .color-label {
  font-size: 14.9332px;
  font-weight: 400;
}
.wingo-color-betting .color-bet-button .color-payout {
  font-size: 13px;
  opacity: 0.9;
  font-weight: 400;
}
.wingo-number-section {
  background: var(--bg-dark);
  border-radius: 16px;
  margin: 13.868px 0;
  box-shadow: 0 2px 10px #0000001a;
  padding: 6.9332px 10.668px;
}
.wingo-number-section .number-section-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
}
.wingo-number-section .wingo-number-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.wingo-number-section .wingo-number-grid .wingo-number-btn {
  width: 53px;
  height: 53px;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}
.wingo-number-section .wingo-number-grid .wingo-number-btn .wingo-number-img {
  width: 53px;
  height: 53px;
}
.wingo-number-section .wingo-number-grid .wingo-number-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.wingo-number-section .wingo-number-grid .wingo-number-btn.color-red {
  background: linear-gradient(#d80000, #d80000);
}
.wingo-number-section .wingo-number-grid .wingo-number-btn.color-green {
  background: linear-gradient(#00b912, #00b912);
}
.wingo-number-section .wingo-number-grid .wingo-number-btn.color-violet {
  background: linear-gradient(#8800db, #8800db);
}
.wingo-number-section .wingo-number-grid .wingo-number-btn.color-red-violet {
  background: linear-gradient(45deg, #d80000 0% 50%, #8800db 50% 100%);
}
.wingo-number-section .wingo-number-grid .wingo-number-btn.color-green-violet {
  background: linear-gradient(
    45deg,
    #00b912 0% 50%,
    #8800db 50% 100%
  ) !important;
}
.drawing-overlay {
  position: fixed;
  inset: 0;
  background: #000c;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawing-overlay .drawing-content .drawing-numbers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 32px;
  opacity: 0.3;
}
.drawing-overlay .drawing-content .drawing-numbers .drawing-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.drawing-overlay .drawing-content .drawing-result {
  text-align: center;
}
.drawing-overlay .drawing-content .drawing-result .big-result-number {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  margin: 0 auto 16px;
  box-shadow: 0 8px 32px #0000004d;
}
.drawing-overlay .drawing-content .drawing-result .drawing-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.betting-closed-banner {
  background: #ef4444;
  color: #fff;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-weight: 600;
  animation: pulse 2s infinite;
}
.wingo-bottom-tabs {
  display: flex;
  background: var(--bg-wallet);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -4px 20px #0000001a;
  color: var(--color-white);
}
.wingo-bottom-tabs .bottom-tab {
  flex: 1;
  padding: 16px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s;
}
.wingo-bottom-tabs .bottom-tab.active {
  background: linear-gradient(
      180deg,
      var(--gradient-start),
      var(--gradient-end)
    ),
    linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
  color: #fff;
}
.results-section {
  background: var(--bg-medium);
  padding: 10px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.results-section .result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  gap: 12px;
}
.results-section .result-item:last-child {
  border-bottom: none;
}
.results-section .result-item .result-info {
  flex: 0 0 auto;
  min-width: 80px;
}
.results-section .result-item .result-info .result-round {
  font-size: 12.8px;
  font-weight: 500;
  color: var(--color-white);
}
.results-section .result-item .result-info .result-color {
  font-size: 12.8px;
  color: var(--color-white);
  text-transform: capitalize;
}
.results-section .result-item .result-number-circle {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.results-section .result-item .result-number-circle.green {
  background: linear-gradient(#00b912, #00b912);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-color: transparent;
}
.results-section .result-item .result-number-circle.red {
  background: linear-gradient(#d80000, #d80000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-color: transparent;
}
.results-section .result-item .result-number-circle.green-violet {
  background: linear-gradient(45deg, #2ed573 50%, #a55eea 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-color: transparent;
}
.results-section .result-item .result-number-circle.red-violet {
  background: linear-gradient(45deg, #ff4757 50%, #a55eea 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-color: transparent;
}
.results-section .result-item .bigsmall {
  flex: 0 0 auto;
  min-width: 50px;
  font-size: 12.8px;
  text-align: center;
}
.results-section .result-item .result-time {
  flex: 0 0 auto;
  min-width: 60px;
  font-size: 12px;
  color: #9ca3af;
  text-align: right;
}
.my-bets-section {
  background: var(--bg-medium);
  padding: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.my-bets-section .no-bets {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 16px;
}
.my-bets-section .bet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
.my-bets-section .bet-item:last-child {
  border-bottom: none;
}
.my-bets-section .bet-item .bet-details .bet-type {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}
.my-bets-section .bet-item .bet-details .bet-amount {
  font-size: 12px;
  color: #6b7280;
}
.my-bets-section .bet-item .bet-status {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.my-bets-section .bet-item .bet-status.won {
  background: #dcfce7;
  color: #16a34a;
}
.my-bets-section .bet-item .bet-status.lost {
  background: #fee2e2;
  color: #dc2626;
}
.my-bets-section .bet-item .bet-status.pending {
  background: #fef3c7;
  color: #d97706;
}
.bottom-sheet-overlay {
  position: fixed;
  inset: 0 0 88px;
  background: #00000080;
  z-index: 900;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}
.bottom-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 -4px 20px #00000026;
}
.bottom-sheet.open {
  transform: translateY(0);
}
.bottom-sheet .bottom-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
  cursor: grab;
}
.bottom-sheet .bottom-sheet-handle:active {
  cursor: grabbing;
}
.bottom-sheet .bottom-sheet-handle .handle-bar {
  width: 40px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  transition: background-color 0.2s;
}
.bottom-sheet .bottom-sheet-handle .handle-bar:hover {
  background: #9ca3af;
}
.bottom-sheet .bottom-sheet-content {
  overflow-y: auto;
  max-height: calc(85vh - 32px);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-sheet .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}
.bottom-sheet .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}
.bottom-sheet .modal-header .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #9ca3af;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}
.bottom-sheet .modal-header .close-btn:hover {
  background: #f3f4f6;
}
.bottom-sheet .bet-type-header {
  padding: 16px 20px 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}
.bottom-sheet .bet-selection {
  margin: 16px 20px;
  padding: 20px;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 12px #00000026;
}
.bottom-sheet .bet-selection.green {
  background: linear-gradient(135deg, #10b981, #059669);
}
.bottom-sheet .bet-selection.red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.bottom-sheet .bet-selection.violet {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.bottom-sheet .bet-selection.color-red {
  background: linear-gradient(#d80000, #d80000);
}
.bottom-sheet .bet-selection.color-green {
  background: linear-gradient(#00b912, #00b912);
}
.bottom-sheet .bet-selection.color-violet {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.bottom-sheet .bet-selection.color-red-violet {
  background: linear-gradient(45deg, #d80000 0% 50%, #8800db 50% 100%);
}
.bottom-sheet .bet-selection.color-green-violet {
  background: linear-gradient(
    45deg,
    #00b912 0% 50%,
    #8800db 50% 100%
  ) !important;
}
.bottom-sheet .bet-selection .bet-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bottom-sheet .bet-selection .bet-payout {
  font-size: 16px;
  opacity: 0.9;
  font-weight: 500;
}
.bottom-sheet .bet-selection .win-rate {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #ffffff40;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.bottom-sheet .bet-amount-section {
  padding: 0 20px 20px;
}
.bottom-sheet .bet-amount-section .section-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
}
.bottom-sheet .bet-amount-section .amount-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.bottom-sheet .bet-amount-section .amount-input:focus {
  outline: none;
  border-color: #8b5cf6;
}
.bottom-sheet .bet-amount-section .amount-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bottom-sheet .bet-amount-section .amount-buttons .amount-btn {
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.bottom-sheet .bet-amount-section .amount-buttons .amount-btn.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
  transform: scale(0.95);
}
.bottom-sheet
  .bet-amount-section
  .amount-buttons
  .amount-btn:hover:not(.active) {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.bottom-sheet .bet-amount-section .amount-buttons .amount-btn:active {
  transform: scale(0.95);
}
.bottom-sheet .multiplier-section {
  padding: 0 20px 20px;
}
.bottom-sheet .multiplier-section .section-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
}
.bottom-sheet .multiplier-section .multiplier-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.bottom-sheet .multiplier-section .multiplier-input-group button {
  width: 44px;
  height: 44px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.bottom-sheet .multiplier-section .multiplier-input-group button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.bottom-sheet .multiplier-section .multiplier-input-group button:active {
  transform: scale(0.95);
}
.bottom-sheet .multiplier-section .multiplier-input-group input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  transition: border-color 0.2s;
}
.bottom-sheet .multiplier-section .multiplier-input-group input:focus {
  outline: none;
  border-color: #8b5cf6;
}
.bottom-sheet .multiplier-section .multiplier-input-group span {
  font-size: 18px;
  color: #6b7280;
  font-weight: 600;
}
.bottom-sheet .multiplier-section .multiplier-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bottom-sheet .multiplier-section .multiplier-buttons .multiplier-btn {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.bottom-sheet .multiplier-section .multiplier-buttons .multiplier-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border-color: transparent;
  transform: scale(0.95);
}
.bottom-sheet
  .multiplier-section
  .multiplier-buttons
  .multiplier-btn:hover:not(.active) {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.bottom-sheet .multiplier-section .multiplier-buttons .multiplier-btn:active {
  transform: scale(0.95);
}
.bottom-sheet .bet-summary {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  margin: 0 20px 24px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}
.bottom-sheet .bet-summary .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}
.bottom-sheet .bet-summary .total-amount {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 12px;
}
.bottom-sheet .bet-summary .potential-win {
  font-size: 16px;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 500;
}
.bottom-sheet .bet-summary .profit-info {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
}
.bottom-sheet .bet-summary .profit-info .profit-amount {
  color: #10b981;
  font-weight: 700;
}
.bottom-sheet .modal-actions {
  display: flex;
  gap: 16px;
  padding: 0 20px 20px;
}
.bottom-sheet .modal-actions .cancel-btn {
  flex: 1;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.bottom-sheet .modal-actions .cancel-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.bottom-sheet .modal-actions .cancel-btn:active {
  transform: scale(0.98);
}
.bottom-sheet .modal-actions .place-bet-btn {
  flex: 2;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px #3b82f64d;
}
.bottom-sheet .modal-actions .place-bet-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px #3b82f666;
}
.bottom-sheet .modal-actions .place-bet-btn:active {
  transform: translateY(0) scale(0.98);
}
@media (max-width: 480px) {
  .bottom-sheet {
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
  }
  .bottom-sheet .modal-header {
    padding: 12px 16px;
  }
  .bottom-sheet .modal-header h3 {
    font-size: 18px;
  }
  .bottom-sheet .bet-type-header {
    padding: 12px 16px 0;
  }
  .bottom-sheet .bet-selection {
    margin: 12px 16px;
    padding: 16px;
  }
  .bottom-sheet .bet-selection .bet-title {
    font-size: 18px;
  }
  .bottom-sheet .bet-selection .bet-payout {
    font-size: 14px;
  }
  .bottom-sheet .bet-amount-section,
  .bottom-sheet .multiplier-section {
    padding: 0 16px 16px;
  }
  .bottom-sheet .bet-amount-section .section-title,
  .bottom-sheet .multiplier-section .section-title {
    font-size: 14px;
  }
  .bottom-sheet .bet-amount-section .amount-input,
  .bottom-sheet .multiplier-section .amount-input {
    padding: 14px 16px;
    font-size: 16px;
  }
  .bottom-sheet .bet-amount-section .amount-buttons,
  .bottom-sheet .multiplier-section .amount-buttons {
    gap: 8px;
  }
  .bottom-sheet .bet-amount-section .amount-buttons .amount-btn,
  .bottom-sheet .multiplier-section .amount-buttons .amount-btn {
    padding: 12px 8px;
    font-size: 13px;
  }
  .bottom-sheet .multiplier-section .multiplier-input-group {
    gap: 8px;
  }
  .bottom-sheet .multiplier-section .multiplier-input-group button {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .bottom-sheet .multiplier-section .multiplier-input-group input {
    font-size: 16px;
  }
  .bottom-sheet .multiplier-section .multiplier-buttons {
    gap: 8px;
  }
  .bottom-sheet .multiplier-section .multiplier-buttons .multiplier-btn {
    padding: 10px 8px;
    font-size: 13px;
  }
  .bottom-sheet .bet-summary {
    margin: 0 16px 20px;
    padding: 16px;
  }
  .bottom-sheet .bet-summary .total-amount {
    font-size: 24px;
  }
  .bottom-sheet .modal-actions {
    padding: 0 16px 16px;
    gap: 12px;
  }
  .bottom-sheet .modal-actions .cancel-btn,
  .bottom-sheet .modal-actions .place-bet-btn {
    padding: 14px;
    font-size: 15px;
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-sheet .bottom-sheet-content {
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  }
}
@media (max-width: 480px) {
  .wingo-app {
    padding: 12px;
  }
  .wingo-number-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .timer-display .timer-digit {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
@media (max-width: 400px) {
  .wingo-app {
    padding: 12px;
  }
  .wingo-number-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .timer-display .timer-digit {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .wingo-number-btn,
  .wingo-number-btn .wingo-number-img {
    width: 50px !important;
    height: 50px !important;
  }
}
@media (max-width: 360px) {
  .wingo-number-grid {
    gap: 10px !important;
  }
  .wingo-number-btn,
  .wingo-number-btn .wingo-number-img {
    width: 48px !important;
    height: 48px !important;
  }
}
@media (max-width: 359px) {
  .wingo-number-grid {
    gap: 10px !important;
  }
  .wingo-number-btn,
  .wingo-number-btn .wingo-number-img {
    width: 44px !important;
    height: 44px !important;
  }
}
@keyframes modalSlideUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes pulse {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.color-red {
  background: linear-gradient(#d80000, #d80000) !important;
}
.color-green {
  background: linear-gradient(#00b912, #00b912) !important;
}
.color-violet {
  background: linear-gradient(#8800db, #8800db) !important;
}
.color-red-violet {
  background: linear-gradient(
    45deg,
    #d80000 0% 50%,
    #8800db 50% 100%
  ) !important;
}
.color-green-violet {
  background: linear-gradient(
    45deg,
    #00b912 0% 50%,
    #8800db 50% 100%
  ) !important;
}
.my-bets-pagination {
  margin-top: 5px;
  padding: 10px;
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 500px;
  height: 100%;
  background: var(--bg-dark) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
@media (max-width: 768px) {
  .loading-container {
    margin: 1rem;
    padding: 2rem 1.5rem;
  }
  .loading-container h2 {
    font-size: 1.25rem;
  }
  .loading-container p {
    font-size: 0.9rem;
  }
  .spinner {
    width: 50px;
    height: 50px;
    border-width: 3px;
  }
}
.wingo-app {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}
.wingo-game-page {
  min-height: 100vh;
  background: var(--card-gradient);
  position: relative;
}
.back-button,
.wingo-back-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--gradient-button);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--box-shadow);
}
.back-button:hover:not(:disabled),
.wingo-back-button:hover:not(:disabled) {
  opacity: 0.95;
  transform: translateY(-1px);
}
.back-button:active:not(:disabled),
.wingo-back-button:active:not(:disabled) {
  transform: translateY(0);
}
.back-button:disabled,
.wingo-back-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wingo-game-status,
.wingo-betting-section,
.wingo-modal-content,
.wingo-bottom-bar,
.wingo-bottom-tabs,
.wingo-tab-content {
  border-color: var(--bg-wallet);
}
.wingo-section-title,
.wingo-game-title,
.wingo-basket-bet-type {
  color: var(--header);
}
.wingo-timer-label,
.wingo-period,
.wingo-result-period,
.wingo-basket-payout {
  color: var(--text-secondary);
}
.wingo-game-status,
.wingo-betting-section,
.wingo-modal-content {
  box-shadow: var(--box-shadow);
}
.wingo-bottom-tab.active,
.time-tab.active {
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)),
    linear-gradient(90deg, #7afec3, #02afb6);
}
.wingo-bottom-tab.active:after,
.time-tab.active:after {
  background: var(--gradient-button);
}
.wingo-time-tabs .time-tab.active {
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)),
    linear-gradient(90deg, #7afec3, #02afb6);
}
.wingo-time-tabs .time-tab:not(.active):hover {
  background: var(--bets-header-active-tab);
}
.wingo-toast.success,
.wingo-winners-toast {
  background: var(--bets-congrats);
}
.wingo-toast.error,
.betting-closed-banner {
  background: var(--loss-message);
}
.wingo-modal-header {
  background: linear-gradient(135deg, var(--bets-header-active-tab), white);
}
.wingo-modal-header h2 {
  color: var(--header);
}
.wingo-modal-header .wingo-modal-close:hover {
  background: var(--bets-header-active-tab);
  color: var(--header);
}
.wingo-bet-button {
  border-color: var(--border-color);
}
.wingo-bet-button:hover:not(:disabled) {
  background: var(--bets-header-active-tab);
  border-color: var(--tab-highlight);
}
.wingo-basket-button {
  border-color: var(--header);
  color: var(--header);
}
.wingo-basket-button:hover:not(:disabled) {
  background: var(--bets-header-active-tab);
}
.wingo-basket-button .wingo-basket-count {
  background: var(--header);
}
.wingo-bet-all-button,
.wingo-place-bets-btn,
.place-bet-btn {
  background: var(--gradient-button);
  box-shadow: var(--box-shadow);
}
.wingo-bet-all-button:hover:not(:disabled),
.wingo-place-bets-btn:hover:not(:disabled),
.place-bet-btn:hover:not(:disabled) {
  opacity: 0.95;
}
.wingo-result-item:hover,
.result-item:hover {
  background: var(--bets-header-active-tab);
}
.wingo-loading:after {
  border-color: var(--border-color);
  border-top-color: var(--header);
}
.wingo-back-button:focus,
.wingo-bet-button:focus,
.wingo-add-basket-button:focus,
.wingo-basket-button:focus,
.wingo-bet-all-button:focus,
.wingo-bottom-tab:focus,
.wingo-modal-close:focus,
.wingo-clear-basket-btn:focus,
.wingo-place-bets-btn:focus,
.wingo-basket-remove:focus {
  outline: 3px solid var(--header);
  outline-offset: 2px;
}
.wingo-draw-tabs .wingo-draw-tab.active {
  background: var(--header);
  box-shadow: var(--box-shadow);
}
.wingo-draw-tabs .wingo-draw-tab:hover:not(.active) {
  background: var(--bets-header-active-tab);
  color: var(--tab-highlight);
}
.wingo-page-button {
  border-color: var(--border-color);
}
.wingo-page-button:hover:not(:disabled) {
  background: var(--header);
  border-color: var(--header);
}
.wingo-page-button.active {
  background: var(--header);
  border-color: var(--header);
}
.wingo-connection-indicator.connected {
  border-color: #22c55e4d;
}
.wingo-connection-indicator.connecting {
  border-color: #ffa5024d;
}
.wingo-connection-indicator.disconnected,
.wingo-connection-indicator.error {
  border-color: var(--loss-message);
}
.wingo-game-status-card {
  background: var(--card-gradient-2);
}
.loading-screen {
  background: var(--bg-dark);
}
.bottom-sheet .modal-actions .place-bet-btn {
  background: var(--gradient-button);
  box-shadow: 0 4px 12px #7629b34d;
}
.bottom-sheet .modal-actions .place-bet-btn:hover {
  background: var(--gradient-button);
  opacity: 0.95;
}
.multiplier-btn.active,
.amount-btn.active {
  background: var(--gradient-button);
  border-color: transparent;
}
.bet-summary {
  background: linear-gradient(135deg, var(--bets-header-active-tab), #f1f5f9);
  border-color: var(--border-color);
}
.color-red,
.wingo-color-bet-card.red,
.wingo-number-btn.color-red,
.bet-selection.red,
.bet-selection.color-red {
  background: linear-gradient(#d80000, #d80000) !important;
}
.color-green,
.wingo-color-bet-card.green,
.wingo-number-btn.color-green,
.bet-selection.green,
.bet-selection.color-green {
  background: linear-gradient(#00b912, #00b912) !important;
}
.color-violet,
.wingo-color-bet-card.violet,
.wingo-number-btn.color-violet,
.bet-selection.violet,
.bet-selection.color-violet {
  background: linear-gradient(#8800db, #8800db) !important;
}
.color-red-violet,
.wingo-number-btn.color-red-violet,
.bet-selection.color-red-violet {
  background: linear-gradient(
    45deg,
    #d80000 0% 50%,
    #8800db 50% 100%
  ) !important;
}
.color-green-violet,
.wingo-number-btn.color-green-violet,
.bet-selection.color-green-violet {
  background: linear-gradient(
    45deg,
    #00b912 0% 50%,
    #8800db 50% 100%
  ) !important;
}
.wingo-size-betting {
  width: 100%;
  height: 38.39px;
  border-radius: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.wingo-size-betting:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0006;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.wingo-size-betting.betting-closing {
  pointer-events: none;
}
.wingo-size-betting.betting-closing:before {
  opacity: 1;
}
.wingo-size-betting.betting-closing .big_betting,
.wingo-size-betting.betting-closing .small_betting {
  opacity: 0.6;
}
.big_betting {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: #dd9138;
  font-size: 17.0668px;
}
.small_betting {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: #5088d3;
  font-size: 17.0668px;
}
.results-header-wingo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 12px 16px;
  background: var(--bg-dark);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
}
.results-header-wingo .header-period {
  text-align: left;
}
.results-header-wingo .header-number,
.results-header-wingo .header-bigsmall,
.results-header-wingo .header-color {
  text-align: center;
}
.results-section .result-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.results-section .result-item .result-info {
  flex: none;
  min-width: auto;
  text-align: left;
}
.results-section .result-item .result-info .result-round {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-white);
}
.results-section .result-item .result-number-circle {
  width: 32px;
  font-size: 19px;
  height: 32px;
  margin: 0 auto;
}
.results-section .result-item .bigsmall {
  font-size: 16px;
  text-align: center;
  color: var(--color-white);
}
.results-section .result-item .color-indicator {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.results-section .result-item .color-indicator .color-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.results-section .result-item .color-indicator .color-dot.red {
  background: linear-gradient(135deg, #f44, #c00);
}
.results-section .result-item .color-indicator .color-dot.green {
  background: linear-gradient(135deg, #0c4, #080);
}
.results-section .result-item .color-indicator .color-dot.violet {
  background: linear-gradient(135deg, #84f, #60c);
}
.results-section .result-item .color-indicator.color-red {
  background: linear-gradient(135deg, #f44, #c00);
}
.results-section .result-item .color-indicator.color-green {
  background: linear-gradient(135deg, #0c4, #080);
}
.results-section .result-item .color-indicator.color-violet {
  background: linear-gradient(135deg, #84f, #60c);
}
.chart-section {
  background: var(--bg-dark);
  min-height: 400px;
}
.chart-pagination {
  padding: 16px;
  background: var(--bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 430px) {
  .results-header-wingo {
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
    padding: 10px 12px;
    font-size: 12px;
  }
  .results-section .result-item {
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
    padding: 10px 12px;
  }
  .results-section .result-item .result-info .result-round {
    font-size: 14px;
  }
  .results-section .result-item .result-number-circle {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }
  .results-section .result-item .bigsmall {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .results-header-wingo {
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
    padding: 10px 12px;
    font-size: 13px;
  }
  .results-section .result-item {
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
    padding: 10px 12px;
  }
  .results-section .result-item .result-info .result-round {
    font-size: 15px;
  }
  .results-section .result-item .result-number-circle {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .results-section .result-item .bigsmall {
    font-size: 15px;
  }
}
._container_m9svg_1 {
  position: fixed;
  inset: 0;
  background: linear-gradient(225deg, #f6cf65 7.74%, #a135ff);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: _fadeIn_m9svg_1 0.3s ease-in;
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
}
._svg_m9svg_17 {
  z-index: 1;
}
._walletSection_1aiyh_1 {
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #001c54;
  position: relative;
  overflow: hidden;
  background-image: url(/_build/assets/backgroudbal-DoT31CI-.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
._walletSection_1aiyh_1 ._walletBalanceContainer_1aiyh_14 {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._balanceDisplay_1aiyh_19 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 12px;
  margin-bottom: 8px;
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._balanceDisplay_1aiyh_19
  ._balanceAmount_1aiyh_27 {
  gap: 10px;
  font-size: 32px;
  margin-left: 2.5rem;
  font-weight: 700;
  color: var(--color-white);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._refreshBtn_1aiyh_37 {
  background: #ffffff26;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._refreshBtn_1aiyh_37
  svg {
  color: var(--color-white);
  opacity: 0.9;
  transition: transform 0.3s ease;
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._refreshBtn_1aiyh_37:hover {
  background: #ffffff40;
  border-color: #ffffff4d;
  transform: scale(1.05);
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._refreshBtn_1aiyh_37:hover
  svg {
  opacity: 1;
  transform: rotate(180deg);
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._refreshBtn_1aiyh_37:active {
  transform: scale(0.95);
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._refreshBtn_1aiyh_37:active
  svg {
  transform: rotate(360deg);
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._balanceLabelRow_1aiyh_71 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._balanceLabelRow_1aiyh_71
  ._walletIcon_1aiyh_77 {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._balanceLabelRow_1aiyh_71
  ._walletIcon_1aiyh_77
  svg {
  width: 25px;
  height: 25px;
  color: #10b981;
  filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}
._walletSection_1aiyh_1
  ._walletBalanceContainer_1aiyh_14
  ._balanceLabelRow_1aiyh_71
  ._balanceLabel_1aiyh_71 {
  font-size: 14px;
  color: #fffc;
  font-weight: 500;
  letter-spacing: 0.3px;
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 button {
  flex: 1;
  padding: 14px 24px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px #00000026;
  position: relative;
  overflow: hidden;
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 button:hover:before {
  left: 100%;
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 button:active {
  transform: scale(0.97);
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 ._withdrawBtn_1aiyh_131 {
  background: linear-gradient(#d80000, #d80000) !important;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 ._withdrawBtn_1aiyh_131:hover {
  background: linear-gradient(135deg, #ff5252, #e63946);
  box-shadow: 0 6px 20px #ff6b6b66;
  transform: translateY(-2px);
}
._walletSection_1aiyh_1
  ._walletActions_1aiyh_96
  ._withdrawBtn_1aiyh_131:active {
  transform: translateY(0) scale(0.97);
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 ._depositBtn_1aiyh_144 {
  background: linear-gradient(#00b912, #00b912) !important;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 ._depositBtn_1aiyh_144:hover {
  background: linear-gradient(135deg, #40c057, #2f9e44);
  box-shadow: 0 6px 20px #51cf6666;
  transform: translateY(-2px);
}
._walletSection_1aiyh_1 ._walletActions_1aiyh_96 ._depositBtn_1aiyh_144:active {
  transform: translateY(0) scale(0.97);
}
@media (max-width: 480px) {
  ._walletSection_1aiyh_1 {
    padding: 20px 16px;
    border-radius: 16px;
  }
  ._walletSection_1aiyh_1 ._walletBalanceContainer_1aiyh_14 {
    margin-bottom: 16px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._balanceDisplay_1aiyh_19
    ._balanceAmount_1aiyh_27 {
    font-size: 28px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._refreshBtn_1aiyh_37 {
    width: 28px;
    height: 28px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._refreshBtn_1aiyh_37
    svg {
    width: 14px;
    height: 14px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._balanceLabelRow_1aiyh_71
    ._walletIcon_1aiyh_77
    svg {
    width: 14px;
    height: 14px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._balanceLabelRow_1aiyh_71
    ._balanceLabel_1aiyh_71 {
    font-size: 13px;
  }
  ._walletSection_1aiyh_1 ._walletActions_1aiyh_96 {
    gap: 10px;
  }
  ._walletSection_1aiyh_1 ._walletActions_1aiyh_96 button {
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 25px;
  }
}
@media (max-width: 360px) {
  ._walletSection_1aiyh_1 {
    padding: 18px 14px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._balanceDisplay_1aiyh_19
    ._balanceAmount_1aiyh_27 {
    font-size: 24px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._balanceDisplay_1aiyh_19
    ._refreshBtn_1aiyh_37 {
    width: 26px;
    height: 26px;
  }
  ._walletSection_1aiyh_1
    ._walletBalanceContainer_1aiyh_14
    ._balanceDisplay_1aiyh_19
    ._refreshBtn_1aiyh_37
    svg {
    width: 12px;
    height: 12px;
  }
  ._walletSection_1aiyh_1 ._walletActions_1aiyh_96 {
    gap: 8px;
  }
  ._walletSection_1aiyh_1 ._walletActions_1aiyh_96 button {
    padding: 11px 18px;
    font-size: 14px;
  }
}
@keyframes _rotate_1aiyh_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._rotating_1aiyh_224 svg {
  animation: _rotate_1aiyh_1 0.6s ease-in-out;
}
.color-wingo-game-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(/_build/assets/timecardbg-CYdoKhba.webp);
  background-repeat: no-repeat;
  background-size: 100% 100% !important;
  margin: 0rem 0 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 12px;
  position: relative;
}
.htp_svg_cont {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.htp_svg_cont svg {
  width: 19.19px;
  height: 19.19px;
}
.wingo-left-container {
  flex-basis: 50%;
  display: flex;
  justify-content: space-between;
}
.wingo-game-info-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.wingo-game-header-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.wingo-game-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.25rem;
  padding-right: 0.6rem;
}
.wingo-game-badge {
  display: flex;
  align-items: center;
  width: max-content;
  color: var(--bg-dark);
  font-size: 11.7332px;
  height: 26.66px;
}
.wingo-game-id {
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.wingo-result-numbers {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
}
.wingo-number-circle {
  width: 26.66px;
  height: 26.66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 3px 10px #0003;
}
.wingo-number-circle.red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.wingo-number-circle.orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
}
.wingo-number-circle.blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.wingo-number-circle.green {
  background: linear-gradient(135deg, #10b981, #059669);
}
.wingo-number-circle.violet {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.wingo-number-circle.red-violet {
  background: linear-gradient(45deg, #ff4757 50%, #a55eea 50%);
}
.wingo-number-circle.green-violet {
  background: linear-gradient(45deg, #10b981 50%, #a55eea 50%);
}
.wingo-number-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wingo-number-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 50%;
}
.wingo-how-to-play {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  color: var(--bg-dark);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--bg-dark);
  width: 100%;
  border-radius: 20px;
  padding: 0.1rem 0;
}
.wingo-vertical-divider {
  width: 1px;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 80%,
    transparent 100%
  );
  margin: 0 1rem;
}
.wingo-timer-section {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.wingo-timer-header-text {
  font-size: 12.8px;
  color: var(--bg-dark);
  font-weight: 700;
  text-align: right;
}
.wingo-timer-display {
  display: flex;
  gap: 4.8px;
  align-items: center;
}
.wingo-timer-digit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21.33px;
  height: 32px;
  background: var(--bg-dark);
  color: var(--color-tertiary);
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
  font-size: 19.2px;
}
.wingo-timer-digit:first-child {
  -webkit-clip-path: polygon(0 30%, 30% 0, 100% 0, 100% 100%, 0% 100%);
}
.wingo-timer-digit:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.wingo-timer-digit.warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  animation: wingo-pulse-warning 1.5s infinite;
}
.wingo-timer-colon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17.33px;
  height: 32px;
  background: var(--bg-dark);
  color: var(--color-tertiary);
  color: #fff;
  padding: 0.4rem 0rem;
  box-shadow: none;
  border: none;
  font-size: 19.332px;
  font-weight: 900;
}
.wingo-next-game-id {
  font-family: SF Mono, Monaco, Inconsolata, Roboto Mono, monospace;
  font-size: 14.9332px;
  font-weight: 700;
  color: var(--bg-dark);
  text-align: right;
}
@keyframes wingo-blink-colon {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  to {
    opacity: 0.3;
  }
}
@keyframes wingo-pulse-warning {
  0%,
  to {
    transform: scale(1);
    box-shadow: 0 2px 8px #f59e0b4d;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 15px #f59e0b80;
  }
}
@keyframes wingo-pulse-danger {
  0%,
  to {
    transform: scale(1);
    box-shadow: 0 2px 8px #d70a034d;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 15px #d70a0380;
  }
}
@media (max-width: 768px) {
  .wingo-vertical-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 20%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.3) 80%,
      transparent 100%
    );
    margin: 0rem;
  }
  .wingo-timer-header-text,
  .wingo-next-game-id {
    text-align: center;
  }
  .wingo-how-to-play {
    font-size: 0.75rem;
  }
}
@media (max-width: 500px) {
  .wingo-timer-section {
    gap: 0.2rem !important;
  }
  .color-wingo-game-status {
    height: 106px !important;
    margin: 0 !important;
    padding: 0.5rem 0.775rem !important;
  }
  .wingo-timer-colon {
    width: 15px !important;
    height: 30px !important;
  }
  .wingo-timer-digit {
    width: 19.38px !important;
    height: 30px !important;
    font-size: 18px !important;
  }
  .wingo-timer-header-text {
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  .wingo-next-game-id {
    font-size: 13.9px !important;
    font-weight: 600 !important;
  }
  .htp_svg_cont,
  .wingo-game-badge {
    font-size: 10.99px !important;
  }
  .wingo-number-circle {
    width: 25px !important;
    height: 25px !important;
  }
}
._chartContainer_o74o6_1 {
  background: var(--bg-dark);
  color: var(--color-white);
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
._periodsSection_o74o6_11 {
  position: relative;
  background: var(--bg-dark);
  min-height: 100%;
  margin-top: 1rem;
}
._connectionLines_o74o6_18 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
._periodRow_o74o6_28 {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  padding: 10px 8px;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 52px;
  box-sizing: border-box;
  z-index: 2;
}
._periodRow_o74o6_28:last-child {
  border-bottom: none;
}
._periodId_o74o6_44 {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._numberGrid_o74o6_53 {
  display: grid;
  grid-template-columns: repeat(10, 24px);
  gap: 3px;
  justify-content: start;
  max-width: 100%;
  overflow: hidden;
}
._gridCircle_o74o6_62 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #ffffff0d;
  color: #fff9;
}
._gridCircle_o74o6_62._red_o74o6_75 {
  background: linear-gradient(135deg, #f44, #c00);
  color: #fff;
  border: none;
}
._gridCircle_o74o6_62._green_o74o6_80 {
  background: linear-gradient(135deg, #0c4, #080);
  color: #fff;
  border: none;
}
._gridCircle_o74o6_62._violet_o74o6_85 {
  background: linear-gradient(135deg, #84f, #60c);
  color: #fff;
  border: none;
}
._gridCircle_o74o6_62._red-violet_o74o6_90 {
  background: linear-gradient(45deg, #ff4757 50%, #a55eea 50%);
  color: #fff;
  border: none;
}
._gridCircle_o74o6_62._green-violet_o74o6_95 {
  background: linear-gradient(45deg, #2ed573 50%, #a55eea 50%);
  color: #fff;
  border: none;
}
._sizeIndicator_o74o6_101 {
  display: flex;
  justify-content: center;
  align-items: center;
}
._sizeDot_o74o6_107 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
._sizeDot_o74o6_107._big_o74o6_118 {
  background: #dd9138;
}
._sizeDot_o74o6_107._small_o74o6_121 {
  background: #5088d3;
}
@media (max-width: 480px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 130px 1fr 38px;
    padding: 8px 6px;
    gap: 4px;
    height: 48px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 22px);
    gap: 2px;
  }
  ._gridCircle_o74o6_62 {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  ._sizeDot_o74o6_107 {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
}
@media (max-width: 500px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 130px 1fr 34px;
    padding: 9px 6px;
    gap: 5px;
    height: 50px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 24px);
    gap: 3px;
  }
  ._gridCircle_o74o6_62 {
    width: 23px;
    height: 23px;
    font-size: 10.5px;
  }
  ._sizeDot_o74o6_107 {
    width: 25px;
    height: 25px;
    font-size: 10.5px;
  }
  ._periodId_o74o6_44 {
    font-size: 16px;
  }
}
@media (max-width: 477px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 120px 1fr 34px;
    padding: 8px 5px;
    gap: 5px;
    height: 48px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 23px);
    gap: 4px;
  }
  ._gridCircle_o74o6_62 {
    width: 23px;
    height: 23px;
    font-size: 11px;
  }
  ._sizeDot_o74o6_107 {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  ._periodId_o74o6_44 {
    font-size: 15px;
  }
}
@media (max-width: 460px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 115px 1fr 34px;
    padding: 8px 5px;
    gap: 5px;
    height: 48px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 22px);
    gap: 3px;
  }
  ._gridCircle_o74o6_62 {
    width: 23px;
    height: 23px;
    font-size: 10.8px;
  }
  ._sizeDot_o74o6_107 {
    width: 23.5px;
    height: 23.5px;
    font-size: 10.8px;
  }
  ._periodId_o74o6_44 {
    font-size: 14.5px;
  }
}
@media (max-width: 440px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 110px 1fr 34px;
    padding: 7px 5px;
    gap: 5px;
    height: 47px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 21px);
    gap: 3px;
  }
  ._gridCircle_o74o6_62 {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
  }
  ._sizeDot_o74o6_107 {
    width: 23px;
    height: 23px;
    font-size: 10.5px;
  }
  ._periodId_o74o6_44 {
    font-size: 14px;
  }
}
@media (max-width: 428px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 105px 1fr 34px;
    padding: 7px 5px;
    gap: 5px;
    height: 47px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 21px);
    gap: 2.5px;
  }
  ._gridCircle_o74o6_62 {
    width: 21.5px;
    height: 21.5px;
    font-size: 10.5px;
  }
  ._sizeDot_o74o6_107 {
    width: 23px;
    height: 23px;
    font-size: 10.5px;
  }
  ._periodId_o74o6_44 {
    font-size: 13.5px;
  }
}
@media (max-width: 415px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 100px 1fr 35px;
    padding: 6px 4px;
    gap: 4px;
    height: 46px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 20.5px);
    gap: 2px;
  }
  ._gridCircle_o74o6_62 {
    width: 20.5px;
    height: 20.5px;
    font-size: 10.2px;
  }
  ._sizeDot_o74o6_107 {
    width: 22.5px;
    height: 22.5px;
    font-size: 10.2px;
  }
  ._periodId_o74o6_44 {
    font-size: 13px;
  }
}
@media (max-width: 395px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 100px 1fr 35px;
    padding: 6px 4px;
    gap: 4px;
    height: 46px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 21px);
    gap: 2px;
  }
  ._gridCircle_o74o6_62 {
    width: 20.5px;
    height: 20.5px;
    font-size: 10px;
  }
  ._sizeDot_o74o6_107 {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  ._periodId_o74o6_44 {
    font-size: 13px;
  }
}
@media (max-width: 400px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 100px 1fr 36px;
    height: 46px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 18px);
    gap: 3px;
  }
  ._gridCircle_o74o6_62 {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  ._sizeDot_o74o6_107 {
    width: 24px;
    height: 24px;
  }
  ._periodId_o74o6_44 {
    font-size: 13px;
  }
}
@media (max-width: 385px) {
  ._periodRow_o74o6_28 {
    grid-template-columns: 95px 1fr 36px;
    height: 46px;
  }
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 18px);
    gap: 3px;
  }
  ._gridCircle_o74o6_62 {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  ._sizeDot_o74o6_107 {
    width: 22px;
    height: 22px;
  }
  ._periodId_o74o6_44 {
    font-size: 13px;
  }
}
@media (max-width: 375px) {
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 17px);
    gap: 1px;
  }
  ._gridCircle_o74o6_62 {
    width: 19px;
    height: 19px;
    font-size: 9px;
  }
  ._sizeDot_o74o6_107 {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  ._periodRow_o74o6_28 {
    padding: 6px 4px;
    gap: 3px;
    height: 44px;
  }
}
@media (max-width: 365px) {
  ._numberGrid_o74o6_53 {
    grid-template-columns: repeat(10, 18px);
    gap: 1px;
  }
  ._gridCircle_o74o6_62 {
    width: 18px;
    height: 18px;
    font-size: 8.5px;
  }
  ._sizeDot_o74o6_107 {
    width: 21px;
    height: 21px;
    font-size: 9.5px;
  }
  ._periodRow_o74o6_28 {
    padding: 5.5px 4px;
    gap: 3px;
    height: 42px;
  }
}
.bet-result-card {
  background: var(--bg-wallet);
  border-radius: 12px;
  margin: 12px 0;
  box-shadow: 0 2px 8px #0000001a;
  overflow: hidden;
  border: 1px solid #374151;
  cursor: pointer;
  transition: all 0.3s ease;
}
.bet-result-card.collapsed .bet-card-collapse {
  display: flex;
}
.bet-result-card.collapsed .bet-card-expanded {
  display: none;
}
.bet-result-card.expanded .bet-card-collapse {
  display: flex;
}
.bet-result-card.expanded .bet-card-expanded {
  display: block;
}
.bet-result-card .bet-card-collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.bet-result-card .bet-card-collapse .collapsed-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bet-result-card .bet-card-collapse .collapsed-left .bet-indicators-container {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 120px;
}
.bet-result-card .bet-card-collapse .collapsed-left .color-indicator-small,
.bet-result-card .bet-card-collapse .collapsed-left .number-indicator-small,
.bet-result-card .bet-card-collapse .collapsed-left .size-indicator-small {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.bet-result-card .bet-card-collapse .collapsed-left .color-indicator-small.red {
  background: linear-gradient(135deg, #f44, #c00);
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .color-indicator-small.green {
  background: linear-gradient(135deg, #0c4, #080);
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .color-indicator-small.violet {
  background: linear-gradient(135deg, #84f, #60c);
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .color-indicator-small
  .color-text-small {
  font-size: 10px;
  font-weight: 900;
}
.bet-result-card .bet-card-collapse .collapsed-left .number-indicator-small {
  border-radius: 8px;
  font-size: 18px;
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .number-indicator-small.red {
  background: linear-gradient(135deg, #f44, #c00);
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .number-indicator-small.green {
  background: linear-gradient(135deg, #0c4, #080);
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .number-indicator-small.violet {
  background: linear-gradient(135deg, #84f, #60c);
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .number-indicator-small.green-violet {
  background: linear-gradient(45deg, #2ed573 50%, #a55eea 50%);
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .number-indicator-small.red-violet {
  background: linear-gradient(45deg, #f44 50%, #a55eea 50%);
}
.bet-result-card .bet-card-collapse .collapsed-left .size-indicator-small {
  background: #5088d3;
  border-radius: 8px;
}
.bet-result-card
  .bet-card-collapse
  .collapsed-left
  .size-indicator-small
  .size-text-small {
  font-size: 12px;
  font-weight: 700;
}
.bet-result-card .bet-card-collapse .collapsed-center {
  flex: 1;
  min-width: 0;
}
.bet-result-card .bet-card-collapse .collapsed-center .period-id-small {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
}
.bet-result-card .bet-card-collapse .collapsed-center .date-time-small {
  font-size: 13px;
  color: #fff9;
}
.bet-result-card .bet-card-collapse .collapsed-right {
  text-align: right;
  flex-shrink: 0;
}
.bet-result-card .bet-card-collapse .collapsed-right .status-badge {
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  display: inline-block;
  font-weight: 600;
}
.bet-result-card .bet-card-collapse .collapsed-right .status-badge.won {
  background: #4caf50;
  color: #fff;
}
.bet-result-card .bet-card-collapse .collapsed-right .status-badge.loss {
  background: #f44;
  color: #fff;
}
.bet-result-card .bet-card-collapse .collapsed-right .status-badge.unsettled,
.bet-result-card .bet-card-collapse .collapsed-right .status-badge.pending {
  background: #ff9800;
  color: #fff;
}
.bet-result-card .bet-card-collapse .collapsed-right .amount-display {
  font-size: 18px;
  font-weight: 700;
}
.bet-result-card .bet-card-collapse .collapsed-right .amount-display.win {
  color: #4caf50;
}
.bet-result-card .bet-card-collapse .collapsed-right .amount-display.loss {
  color: #f44;
}
.bet-result-card .bet-card-expanded {
  border-top: 1px solid #374151;
  background: var(--bg-dark);
}
.bet-result-card .bet-card-expanded .expanded-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  border-bottom: 1px solid #374151;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .period-info-expanded
  .period-id-expanded {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .period-info-expanded
  .date-time-expanded {
  font-size: 14px;
  color: #fff9;
}
.bet-result-card .bet-card-expanded .expanded-header .status-info-expanded {
  text-align: right;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded {
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  display: inline-block;
  font-weight: 600;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded.won {
  background: #4caf50;
  color: #fff;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded.loss {
  background: #f44;
  color: #fff;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded.unsettled,
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded.pending {
  background: #ff9800;
  color: #fff;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .amount-display-expanded {
  font-size: 20px;
  font-weight: 700;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .amount-display-expanded.win {
  color: #4caf50;
}
.bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .amount-display-expanded.loss {
  color: #f44;
}
.bet-result-card .bet-card-expanded .expanded-details-section {
  padding: 0;
}
.bet-result-card .bet-card-expanded .expanded-details-section .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item:last-child {
  border-bottom: none;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item.highlight {
  background: #ffffff05;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .detail-label {
  font-size: 16px;
  color: #ffffffb3;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .detail-value {
  font-size: 16px;
  color: var(--color-white);
  font-weight: 500;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .detail-value.amount-highlight {
  color: #ff6b35;
  font-weight: 700;
  font-size: 17px;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .result-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .result-display
  .result-number-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .result-display
  .result-number-badge.red {
  background: linear-gradient(135deg, #f44, #c00);
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .result-display
  .result-number-badge.green {
  background: linear-gradient(135deg, #0c4, #080);
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .result-display
  .result-number-badge.violet {
  background: linear-gradient(135deg, #84f, #60c);
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .result-display
  .result-size {
  font-size: 15px;
  color: var(--color-white);
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .status-text-won {
  color: #4caf50;
  font-weight: 600;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .status-text-loss {
  color: #f44;
  font-weight: 600;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .status-text-unsettled,
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .status-text-pending {
  color: #ff9800;
  font-weight: 600;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .win-amount {
  color: #4caf50;
  font-weight: 700;
  font-size: 17px;
}
.bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .loss-amount {
  color: #f44;
  font-weight: 700;
  font-size: 17px;
}
@media (max-width: 768px) {
  .bet-result-card {
    margin: 8px 0;
  }
  .bet-result-card .bet-card-collapse {
    padding: 10px 12px;
    gap: 10px;
  }
  .bet-result-card
    .bet-card-collapse
    .collapsed-left
    .bet-indicators-container {
    max-width: 100px;
    gap: 4px;
  }
  .bet-result-card .bet-card-collapse .collapsed-left .color-indicator-small,
  .bet-result-card .bet-card-collapse .collapsed-left .number-indicator-small,
  .bet-result-card .bet-card-collapse .collapsed-left .size-indicator-small {
    width: 40px;
    height: 40px;
  }
  .bet-result-card .bet-card-collapse .collapsed-left .number-indicator-small {
    font-size: 14px;
  }
  .bet-result-card .bet-card-collapse .collapsed-center .period-id-small {
    font-size: 13px;
  }
  .bet-result-card .bet-card-collapse .collapsed-center .date-time-small {
    font-size: 10px;
  }
  .bet-result-card .bet-card-collapse .collapsed-right .status-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
  .bet-result-card .bet-card-collapse .collapsed-right .amount-display {
    font-size: 14px;
  }
  .bet-result-card .bet-card-expanded .expanded-header {
    padding: 12px;
  }
  .bet-result-card
    .bet-card-expanded
    .expanded-header
    .period-info-expanded
    .period-id-expanded {
    font-size: 14px;
  }
  .bet-result-card
    .bet-card-expanded
    .expanded-header
    .status-info-expanded
    .amount-display-expanded {
    font-size: 16px;
  }
  .bet-result-card .bet-card-expanded .expanded-details-section .detail-item {
    padding: 12px;
  }
  .bet-result-card
    .bet-card-expanded
    .expanded-details-section
    .detail-item
    .detail-label,
  .bet-result-card
    .bet-card-expanded
    .expanded-details-section
    .detail-item
    .detail-value {
    font-size: 13px;
  }
}
.loading-bets {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-white);
  font-size: 14px;
}
.no-bets {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}
._betting-modal-overlay_kvf92_1 {
  position: fixed;
  max-width: 500px;
  inset: 0;
  background: #00000080;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  animation: _fadeInModal_kvf92_1 0.3s ease forwards;
  margin: 0 auto;
}
._betting-modal_kvf92_1 {
  background: var(--bg-medium);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  box-shadow: var(--box-shadow);
  transform: translateY(100%);
  animation: _slideUpModal_kvf92_1 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
  position: relative;
  overflow: hidden;
}
._betting-modal_kvf92_1::-webkit-scrollbar {
  display: none;
}
._modal-header_kvf92_33 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
._modal-title_kvf92_42 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}
._close-button_kvf92_50 {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--color-white);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s ease;
}
._close-button_kvf92_50:hover {
  background: var(--bets-header-active-tab);
  color: var(--color-white);
}
._close-button_kvf92_50:active {
  transform: scale(0.95);
}
._bet-color-header_kvf92_75 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  background: var(--bg-wallet);
  border-radius: 12px;
  margin: 20px;
}
._color-circle_kvf92_85 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}
._amount-selection_kvf92_100 {
  padding: 0 20px 16px;
}
._amount-grid_kvf92_104 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
._amount-button_kvf92_110 {
  padding: 12px 8px;
  border-radius: 8px;
  background: #001c54;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: none;
}
._amount-button_kvf92_110:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
}
._amount-button_kvf92_110:hover:not(._active_kvf92_132):before {
  left: 100%;
}
._amount-button_kvf92_110._active_kvf92_132 {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  color: var(--bg-dark);
  border-color: var(--header);
  transform: scale(0.98);
}
._amount-button_kvf92_110:active {
  transform: scale(0.95);
}
._multipliers-section_kvf92_145 {
  padding: 0 20px 16px;
}
._multiplier-label_kvf92_149 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
  text-align: center;
}
._multiplier-controls_kvf92_157 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
._multiplier-btn_kvf92_164 {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
._multiplier-btn_kvf92_164:active {
  transform: scale(0.95);
  background: #e0e0e0;
}
._multiplier-display_kvf92_184 {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--color-white);
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
._multiplier-display_kvf92_184:focus,
._multiplier-display_kvf92_184:active,
._multiplier-display_kvf92_184:focus-visible {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px #8b5cf633;
}
._multiplier-grid_kvf92_205 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
._multiplier-option_kvf92_211 {
  padding: 8px 16px;
  border-radius: 20px;
  background: #001c54;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  border: none;
}
._multiplier-option_kvf92_211._active_kvf92_132 {
  background: var(--gradient-button);
  border-color: var(--header);
  color: var(--bg-dark);
  transform: scale(0.98);
}
._agreement-section_kvf92_230 {
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
._checkbox_kvf92_238 {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
._checkbox_kvf92_238 input[type="checkbox"] {
  position: absolute;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}
._agreement-text_kvf92_252 {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
._agreement-link_kvf92_258 {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
}
._agreement-link_kvf92_258:hover {
  text-decoration: underline;
}
._total-price-section_kvf92_267 {
  padding: 0 20px 24px;
}
._total-price-button_kvf92_271 {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(
      180deg,
      var(--gradient-start),
      var(--gradient-end)
    ),
    linear-gradient(180deg, #7afec3, #02afb6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: hidden;
}
._total-price-button_kvf92_271:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s;
}
._total-price-button_kvf92_271:hover:not(:disabled) {
  transform: translateY(-2px);
  opacity: 0.95;
}
._total-price-button_kvf92_271:hover:not(:disabled):before {
  left: 100%;
}
._total-price-button_kvf92_271:active:not(:disabled) {
  transform: translateY(0);
  transform: scale(0.98);
}
._total-price-button_kvf92_271:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
@keyframes _fadeInModal_kvf92_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUpModal_kvf92_1 {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@media (max-width: 480px) {
  ._bet-color-header_kvf92_75 {
    padding: 25px 0;
  }
  ._color-circle_kvf92_85 {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }
  ._amount-grid_kvf92_104 {
    gap: 8px;
  }
  ._amount-button_kvf92_110 {
    padding: 10px 4px;
    font-size: 14px;
  }
  ._multiplier-grid_kvf92_205 {
    gap: 6px;
  }
  ._multiplier-option_kvf92_211 {
    padding: 6px 12px;
    font-size: 12px;
  }
}
@media (max-width: 400px) {
  ._color-circle_kvf92_85 {
    width: 70px;
    height: 70px;
    font-size: 16px;
  }
  ._amount-button_kvf92_110 {
    padding: 12px 4px;
    font-size: 12px;
  }
  ._multiplier-option_kvf92_211 {
    padding: 8px;
    font-size: 11px;
  }
  ._multiplier-controls_kvf92_157 {
    gap: 12px;
  }
  ._multiplier-btn_kvf92_164 {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
._modalOverlay_ix8vt_1 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000b3 !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
  z-index: 10000;
  animation: _fadeInOverlay_ix8vt_1 0.4s ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 10px;
  box-sizing: border-box;
}
._confettiContainer_ix8vt_18 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  display: flex;
  justify-content: center;
}
._confetti_ix8vt_18 {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  animation: _confettiFall_ix8vt_1 linear infinite;
  opacity: 0.9;
}
._confetti_ix8vt_18._confetti0_ix8vt_38 {
  background: gold;
  transform: rotate(45deg);
  width: clamp(10px, 2.5vw, 12px);
  height: clamp(10px, 2.5vw, 12px);
}
._confetti_ix8vt_18._confetti1_ix8vt_44 {
  background: #ff69b4;
  border-radius: 50%;
  width: clamp(7px, 2vw, 8px);
  height: clamp(7px, 2vw, 8px);
}
._confetti_ix8vt_18._confetti2_ix8vt_50 {
  background: #00ff7f;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: clamp(9px, 2.2vw, 10px);
  height: clamp(9px, 2.2vw, 10px);
}
._confetti_ix8vt_18._confetti3_ix8vt_56 {
  background: #1e90ff;
  transform: rotate(45deg);
  width: clamp(12px, 3vw, 14px);
  height: clamp(12px, 3vw, 14px);
}
._confetti_ix8vt_18._confetti4_ix8vt_62 {
  background: #ff4500;
  border-radius: 50%;
  width: clamp(8px, 2vw, 9px);
  height: clamp(8px, 2vw, 9px);
}
._confetti_ix8vt_18._confetti5_ix8vt_68 {
  background: gold;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: clamp(10px, 2.3vw, 11px);
  height: clamp(10px, 2.3vw, 11px);
}
._congratulationsModal_ix8vt_75 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 80%;
  max-width: 360px;
  min-height: 450px;
  height: auto;
  background-image: url(/_build/assets/winningbackground-DV-qIlml.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 60px 24px 80px;
  text-align: center;
  z-index: 10001;
  box-sizing: border-box;
  margin: auto;
}
._winnerBadge_ix8vt_96 {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
  height: clamp(60px, 15vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
._congratsTitle_ix8vt_108 {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 15px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.3);
  animation: _titleGlow_ix8vt_1 2.5s ease-in-out infinite;
  letter-spacing: 0.5px;
  position: relative;
  top: 1.5rem;
}
._lotteryResults_ix8vt_120 {
  margin-top: 15px;
  width: 90%;
  position: relative;
  top: 1.5rem;
}
._resultsHeader_ix8vt_127 {
  display: flex;
  width: 100%;
  align-items: center;
  background: transparent !important;
  border: none;
  padding: 0;
  gap: 0.5rem !important;
  flex-wrap: wrap;
}
._resultsLabel_ix8vt_138 {
  color: #fffffff2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._resultsValues_ix8vt_144 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
._resultRed_ix8vt_151,
._resultGreen_ix8vt_152,
._resultViolet_ix8vt_153,
._resultBig_ix8vt_154,
._resultSmall_ix8vt_155 {
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: clamp(10px, 2.5vw, 13px);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
._resultRed_ix8vt_151 {
  background: #dc3545 !important;
  box-shadow: 0 2px 8px #dc354566;
}
._resultGreen_ix8vt_152 {
  background: #28a745 !important;
  box-shadow: 0 2px 8px #28a74566;
}
._resultViolet_ix8vt_153 {
  background: #8b5cf6 !important;
  box-shadow: 0 2px 8px #8b5cf666;
}
._resultBig_ix8vt_154,
._resultSmall_ix8vt_155 {
  border-radius: 20px;
}
._resultNumber_ix8vt_185 {
  color: #fff;
  width: clamp(28px, 7vw, 36px);
  height: clamp(28px, 7vw, 36px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(12px, 3.5vw, 16px);
  border: none;
  padding: 0;
}
._bonusSection_ix8vt_199 {
  position: relative;
  width: 100%;
}
._bonusCard_ix8vt_204 {
  position: relative;
  top: 1.5rem;
  padding-top: 20px;
}
._bonusAmount_ix8vt_210 {
  font-size: clamp(24px, 6.5vw, 32px);
  font-weight: 800;
  color: #dc3545;
  margin: 10px 0 5px;
  text-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
  letter-spacing: 1px;
}
._bonusDetails_ix8vt_219 {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #666;
  line-height: 1.6;
}
._periodLine_ix8vt_225 {
  margin-bottom: 2px;
  font-weight: 800;
  color: #555;
  font-size: clamp(11px, 2.8vw, 14px);
}
._periodNumber_ix8vt_232 {
  font-family: Courier New, monospace;
  color: #888;
  letter-spacing: 0.5px;
  font-size: clamp(10px, 2.5vw, 11px);
  font-weight: 600;
}
._multipleWins_ix8vt_240 {
  margin: 0 0 16px;
}
._winsCount_ix8vt_244 {
  display: inline-block;
  background: #ffffff26;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: clamp(11px, 2.5vw, 13px);
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
._autoClose_ix8vt_256 {
  position: absolute;
  bottom: 20px;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fffffff2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._checkmarkCircle_ix8vt_269 {
  width: clamp(24px, 6vw, 30px);
  height: clamp(24px, 6vw, 30px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}
._tickIcon_ix8vt_279 {
  width: clamp(12px, 3vw, 15px);
  height: clamp(12px, 3vw, 15px);
}
._autoCloseText_ix8vt_284 {
  animation: _textFade_ix8vt_1 1.5s ease-in-out infinite;
  white-space: nowrap;
}
._closeBtns_ix8vt_289 {
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translate(-50%);
  width: clamp(30px, 7.5vw, 36px);
  height: clamp(30px, 7.5vw, 36px);
  background: #0000004d;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 100;
}
._closeBtns_ix8vt_289:hover {
  background: #00000080;
  transform: translate(-50%) scale(1.1);
}
._closeBtns_ix8vt_289:active {
  transform: translate(-50%) scale(0.95);
}
._closeBtns_ix8vt_289 svg {
  width: clamp(14px, 3.5vw, 18px);
  height: clamp(14px, 3.5vw, 18px);
}
@keyframes _fadeInOverlay_ix8vt_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _confettiFall_ix8vt_1 {
  0% {
    transform: translateY(-20px) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}
@keyframes _titleGlow_ix8vt_1 {
  0%,
  to {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 35px rgba(255, 255, 255, 0.5);
  }
}
@keyframes _textFade_ix8vt_1 {
  0%,
  to {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 480px) {
  ._modalOverlay_ix8vt_1 {
    padding: 15px 8px;
  }
}
@media (max-width: 400px) {
  ._congratsTitle_ix8vt_108 {
    font-size: 24px;
  }
  ._modalOverlay_ix8vt_1 {
    padding: 12px 6px;
  }
  ._congratulationsModal_ix8vt_75 {
    width: 95%;
    max-width: 320px;
    min-height: 430px;
    padding: 55px 20px 75px;
  }
  ._winnerBadge_ix8vt_96 {
    height: 65px;
    top: -28px;
  }
  ._lotteryResults_ix8vt_120 {
    margin-top: 12px;
  }
  ._resultsHeader_ix8vt_127 {
    gap: 0.4rem !important;
  }
  ._resultsValues_ix8vt_144 {
    gap: 6px;
  }
  ._bonusSection_ix8vt_199 {
    margin: 8px 0 12px;
  }
  ._bonusCard_ix8vt_204 {
    top: 2rem;
  }
  ._autoClose_ix8vt_256 {
    bottom: 18px;
    gap: 6px;
  }
  ._closeBtns_ix8vt_289 {
    bottom: -42px;
  }
}
@media (max-width: 360px) {
  ._congratsTitle_ix8vt_108 {
    font-size: 22px;
  }
  ._modalOverlay_ix8vt_1 {
    padding: 10px 5px;
  }
  ._congratulationsModal_ix8vt_75 {
    width: 96%;
    max-width: 280px;
    min-height: 400px;
    padding: 50px 18px 70px;
  }
  ._winnerBadge_ix8vt_96 {
    height: 55px;
    top: -23px;
  }
  ._lotteryResults_ix8vt_120 {
    margin-top: 10px;
  }
  ._resultsHeader_ix8vt_127 {
    gap: 0.3rem !important;
  }
  ._resultsValues_ix8vt_144 {
    gap: 5px;
  }
  ._bonusSection_ix8vt_199 {
    margin: 6px 0 10px;
  }
  ._bonusCard_ix8vt_204 {
    top: 2rem;
  }
  ._autoClose_ix8vt_256 {
    bottom: 16px;
    gap: 5px;
  }
  ._closeBtns_ix8vt_289 {
    bottom: -38px;
  }
}
@media (max-width: 320px) {
  ._congratsTitle_ix8vt_108 {
    font-size: 20px;
  }
  ._modalOverlay_ix8vt_1 {
    padding: 8px 4px;
  }
  ._congratulationsModal_ix8vt_75 {
    width: 98%;
    max-width: 260px;
    min-height: 370px;
    padding: 45px 15px 65px;
  }
  ._winnerBadge_ix8vt_96 {
    height: 48px;
    top: -20px;
  }
  ._lotteryResults_ix8vt_120 {
    margin-top: 8px;
  }
  ._resultsHeader_ix8vt_127 {
    gap: 0.25rem !important;
  }
  ._resultsValues_ix8vt_144 {
    gap: 4px;
  }
  ._resultRed_ix8vt_151,
  ._resultGreen_ix8vt_152,
  ._resultViolet_ix8vt_153,
  ._resultBig_ix8vt_154,
  ._resultSmall_ix8vt_155 {
    padding: 3px 8px;
  }
  ._bonusSection_ix8vt_199 {
    margin: 5px 0 8px;
  }
  ._bonusCard_ix8vt_204 {
    top: 1.5rem;
  }
  ._autoClose_ix8vt_256 {
    bottom: 14px;
    gap: 4px;
  }
  ._closeBtns_ix8vt_289 {
    bottom: -35px;
  }
}
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(168deg, #20003a 26.74%, #08000d 96.17%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-in;
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
  opacity: 0.85;
}
.countdown-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff9;
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}
.particle.particle-1 {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
}
.particle.particle-2 {
  top: 30%;
  left: 80%;
  animation-delay: 0.5s;
}
.particle.particle-3 {
  top: 60%;
  left: 15%;
  animation-delay: 1s;
}
.particle.particle-4 {
  top: 80%;
  left: 70%;
  animation-delay: 1.5s;
}
.particle.particle-5 {
  top: 40%;
  left: 50%;
  animation-delay: 2s;
}
.particle.particle-6 {
  top: 70%;
  left: 40%;
  animation-delay: 2.5s;
}
.countdown-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  animation: slideUp 0.5s ease-out;
}
.countdown-ring {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.countdown-circle-bg {
  fill: none;
  stroke: #ffffff1a;
  stroke-width: 8;
}
.countdown-circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px currentColor);
  transition: stroke 0.3s ease, stroke-dashoffset 1s linear;
}
.countdown-number-wrapper {
  position: relative;
  z-index: 1;
}
.countdown-number {
  font-size: 6rem;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor,
    0 0 60px currentColor, 0 0 80px currentColor;
}
.countdown-number.pulse {
  animation: pulseScale 1s ease-in-out infinite;
}
.countdown-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.countdown-text {
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  animation: blink 0.5s ease-in-out infinite;
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}
.countdown-subtext {
  font-size: 1.2rem;
  font-weight: 500;
  color: #ffffffb3;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.countdown-bars {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.countdown-bar {
  width: 60px;
  height: 8px;
  background: #fff3;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.countdown-bar.active {
  box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  animation: barPulse 1s ease-in-out infinite;
}
@keyframes slideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes pulseScale {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@keyframes blink {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes float {
  0%,
  to {
    transform: translateY(0) translate(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-30px) translate(10px);
    opacity: 0.8;
  }
}
@keyframes barPulse {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@media (max-width: 768px) {
  .countdown-ring {
    width: 220px;
    height: 220px;
  }
  .countdown-number {
    font-size: 5rem;
  }
  .countdown-text {
    font-size: 1.5rem;
  }
  .countdown-subtext {
    font-size: 1rem;
  }
  .countdown-bar {
    width: 50px;
    height: 6px;
  }
}
@media (max-width: 480px) {
  .countdown-ring {
    width: 180px;
    height: 180px;
  }
  .countdown-number {
    font-size: 3rem;
  }
  .countdown-text {
    font-size: 1.2rem;
  }
  .countdown-subtext {
    font-size: 0.9rem;
  }
  .countdown-bar {
    width: 40px;
    height: 5px;
    gap: 0.5rem;
  }
  .countdown-content {
    gap: 2rem;
  }
}
._modalOverlay_1d56s_1 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000b3 !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
  z-index: 10000;
  animation: _fadeInOverlay_1d56s_1 0.4s ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 10px;
  box-sizing: border-box;
}
._losingModal_1d56s_18 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 80%;
  max-width: 360px;
  min-height: 450px;
  height: auto;
  background-image: url(/_build/assets/losingbanner-OvZ4rPU2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 60px 24px 80px;
  text-align: center;
  z-index: 10001;
  box-sizing: border-box;
  margin: auto;
}
._losingTitle_1d56s_39 {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  position: relative;
  top: 1.5rem;
  color: #668ab2;
  margin: 0 0 15px;
  letter-spacing: 0.5px;
}
._lotteryResults_1d56s_49 {
  top: 1.5rem;
  position: relative;
  width: 90%;
}
._resultsHeader_1d56s_55 {
  display: flex;
  width: 100%;
  align-items: center;
  background: transparent !important;
  border: none;
  padding: 0;
  gap: 0.5rem !important;
  flex-wrap: wrap;
}
._resultsLabel_1d56s_66 {
  color: #8598b2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._resultsValues_1d56s_72 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
._result-red_1d56s_79,
._result-green_1d56s_80,
._result-violet_1d56s_81,
._result-big_1d56s_82,
._result-small_1d56s_83 {
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: clamp(10px, 2.5vw, 13px);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
._result-red_1d56s_79 {
  background: #dc3545 !important;
  box-shadow: 0 2px 8px #dc354566;
}
._result-green_1d56s_80 {
  background: #28a745 !important;
  box-shadow: 0 2px 8px #28a74566;
}
._result-violet_1d56s_81 {
  background: #8b5cf6 !important;
  box-shadow: 0 2px 8px #8b5cf666;
}
._result-big_1d56s_82,
._result-small_1d56s_83 {
  border-radius: 20px;
}
._resultNumber_1d56s_113 {
  color: #fff;
  width: clamp(28px, 7vw, 36px);
  height: clamp(28px, 7vw, 36px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(12px, 3.5vw, 16px);
  border: none;
  padding: 0;
}
._bonusSection_1d56s_127 {
  position: relative;
  width: 100%;
}
._bonusCard_1d56s_132 {
  position: relative;
  top: 2.5rem;
}
._bonusAmount_1d56s_137 {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 800;
  color: #6590c2;
  margin: 10px 0 5px;
}
._bonusDetails_1d56s_144 {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #666;
  line-height: 1.6;
}
._periodLine_1d56s_150 {
  margin-bottom: 2px;
  font-weight: 800;
  color: #9a9fb4;
  font-size: clamp(11px, 2.8vw, 14px);
}
._periodNumber_1d56s_157 {
  font-family: Courier New, monospace;
  color: #9a9fb4;
  letter-spacing: 0.5px;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 600;
}
._autoClose_1d56s_165 {
  position: absolute;
  bottom: 20px;
  left: 35%;
  transform: translate(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fffffff2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._checkmarkCircle_1d56s_179 {
  width: clamp(24px, 6vw, 30px);
  height: clamp(24px, 6vw, 30px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}
._tickIcon_1d56s_189 {
  width: clamp(12px, 3vw, 15px);
  height: clamp(12px, 3vw, 15px);
}
._autoCloseText_1d56s_194 {
  animation: _textFade_1d56s_1 1.5s ease-in-out infinite;
  white-space: nowrap;
}
._closeBtns_1d56s_199 {
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translate(-50%);
  width: clamp(30px, 7.5vw, 36px);
  height: clamp(30px, 7.5vw, 36px);
  background: #0000004d;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 100;
}
._closeBtns_1d56s_199:hover {
  background: #00000080;
  transform: translate(-50%) scale(1.1);
}
._closeBtns_1d56s_199:active {
  transform: translate(-50%) scale(0.95);
}
._closeBtns_1d56s_199 svg {
  width: clamp(14px, 3.5vw, 18px);
  height: clamp(14px, 3.5vw, 18px);
}
@keyframes _fadeInOverlay_1d56s_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _textFade_1d56s_1 {
  0%,
  to {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 480px) {
  ._modalOverlay_1d56s_1 {
    padding: 15px 8px;
  }
}
@media (max-width: 400px) {
  ._modalOverlay_1d56s_1 {
    padding: 12px 6px;
  }
  ._losingModal_1d56s_18 {
    width: 95%;
    max-width: 320px;
    min-height: 430px;
    padding: 55px 20px 75px;
  }
  ._lotteryResults_1d56s_49 {
    margin-top: 12px;
  }
  ._resultsHeader_1d56s_55 {
    gap: 0.4rem !important;
  }
  ._resultsValues_1d56s_72 {
    gap: 6px;
  }
  ._bonusSection_1d56s_127 {
    margin: 8px 0 12px;
  }
  ._bonusCard_1d56s_132 {
    top: 1.8rem;
    padding-top: 12px;
  }
  ._autoClose_1d56s_165 {
    bottom: 18px;
    gap: 6px;
  }
  ._closeBtns_1d56s_199 {
    bottom: -42px;
  }
}
@media (max-width: 360px) {
  ._modalOverlay_1d56s_1 {
    padding: 10px 5px;
  }
  ._losingModal_1d56s_18 {
    width: 96%;
    max-width: 280px;
    min-height: 400px;
    padding: 50px 18px 70px;
  }
  ._lotteryResults_1d56s_49 {
    margin-top: 10px;
  }
  ._resultsHeader_1d56s_55 {
    gap: 0.3rem !important;
  }
  ._resultsValues_1d56s_72 {
    gap: 5px;
  }
  ._bonusSection_1d56s_127 {
    margin: 6px 0 10px;
  }
  ._bonusCard_1d56s_132 {
    top: 1.6rem;
    padding-top: 10px;
  }
  ._autoClose_1d56s_165 {
    bottom: 16px;
    gap: 5px;
  }
  ._closeBtns_1d56s_199 {
    bottom: -38px;
  }
}
@media (max-width: 320px) {
  ._modalOverlay_1d56s_1 {
    padding: 8px 4px;
  }
  ._losingModal_1d56s_18 {
    width: 98%;
    max-width: 260px;
    min-height: 370px;
    padding: 45px 15px 65px;
  }
  ._lotteryResults_1d56s_49 {
    margin-top: 8px;
  }
  ._resultsHeader_1d56s_55 {
    gap: 0.25rem !important;
  }
  ._resultsValues_1d56s_72 {
    gap: 4px;
  }
  ._result-red_1d56s_79,
  ._result-green_1d56s_80,
  ._result-violet_1d56s_81,
  ._result-big_1d56s_82,
  ._result-small_1d56s_83 {
    padding: 3px 8px;
  }
  ._bonusSection_1d56s_127 {
    margin: 5px 0 8px;
  }
  ._bonusCard_1d56s_132 {
    top: 1.4rem;
    padding-top: 8px;
  }
  ._autoClose_1d56s_165 {
    bottom: 14px;
    gap: 4px;
  }
  ._closeBtns_1d56s_199 {
    bottom: -35px;
  }
}
._modalOverlayWingo_54nng_1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: _fadeIn_54nng_1 0.3s ease;
}
._howToPlayModal_54nng_16 {
  background: var(--bg-dark);
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px #0003;
  animation: _modalSlideUp_54nng_1 0.3s ease;
  border: 1px solid var(--bg-light);
}
._modalHeader_54nng_30 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--bg-light);
  background: var(--bg-dark);
  flex-shrink: 0;
  position: relative;
}
._modalTitle_54nng_41 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
}
._modalIcon_54nng_50 {
  font-size: 20px;
}
._closeBtn_54nng_54 {
  position: absolute;
  right: 10px;
  top: 14px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
}
._closeBtn_54nng_54:hover {
  background: var(--bg-light);
  color: var(--color-white);
}
._closeBtn_54nng_54:active {
  transform: scale(0.95);
}
._modalBody_54nng_80 {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}
._modalBody_54nng_80::-webkit-scrollbar {
  width: 6px;
}
._modalBody_54nng_80::-webkit-scrollbar-track {
  background: var(--bg-medium);
  border-radius: 3px;
}
._modalBody_54nng_80::-webkit-scrollbar-thumb {
  background: var(--bg-light);
  border-radius: 3px;
}
._modalBody_54nng_80::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}
._modalFooter_54nng_101 {
  padding: 20px;
  border-top: 1px solid var(--bg-light);
  background: var(--bg-dark);
  flex-shrink: 0;
}
._howToSection_54nng_108 {
  margin-bottom: 24px;
}
._howToSection_54nng_108:last-child {
  margin-bottom: 0;
}
._howToSection_54nng_108 p {
  margin: 0;
  color: var(--color-white);
  line-height: 1.5;
  font-size: 14px;
}
._sectionHeader_54nng_121 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 !important;
}
._sectionHeader_54nng_121 h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.2;
}
._sectionIcon_54nng_137 {
  font-size: 18px;
  flex-shrink: 0;
}
._colorRules_54nng_142 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._colorRule_54nng_142 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}
._colorRule_54nng_142:hover {
  background: var(--bg-light);
}
._colorIndicator_54nng_160 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
._colorIndicator_54nng_160._green_54nng_167 {
  background: var(--norm_green-color);
}
._colorIndicator_54nng_160._red_54nng_170 {
  background: var(--norm_red-color);
}
._colorIndicator_54nng_160._violet_54nng_173 {
  background: #8b5cf6;
}
._colorText_54nng_177 {
  font-size: 14px;
  color: var(--color-white);
  flex: 1;
}
._bigSmallRules_54nng_183 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._bigSmallRule_54nng_183 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-light);
  transition: background-color 0.2s;
}
._bigSmallRule_54nng_183:hover {
  background: var(--bg-option);
}
._bigSmallLabel_54nng_202 {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 600;
}
._bigSmallText_54nng_208 {
  font-size: 13px;
  color: var(--color-white);
}
._bettingInfo_54nng_213 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
._bettingInfo_54nng_213 p {
  margin: 0;
  font-size: 14px;
  color: var(--color-white);
}
._serviceCharges_54nng_224 {
  background: var(--bg-badge);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--norm_secondary-color);
}
._serviceNotice_54nng_231 {
  background: var(--norm_secondary-color);
  color: var(--color-white);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  text-align: center;
}
._serviceDetails_54nng_242 {
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.5;
}
._serviceExample_54nng_248 {
  background: #dd91384d;
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}
._goodLuckBtn_54nng_257 {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: var(--gradient-button);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
  box-shadow: 0 4px 12px #00ecbe4d;
}
._goodLuckBtn_54nng_257:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}
._goodLuckBtn_54nng_257:active {
  transform: translateY(0);
}
@keyframes _fadeIn_54nng_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _modalSlideUp_54nng_1 {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 480px) {
  ._modalOverlay_54nng_1 {
    padding: 0;
    align-items: flex-end;
  }
  ._howToPlayModal_54nng_16 {
    max-width: 85%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
  }
  ._modalHeader_54nng_30 {
    padding: 16px 20px;
  }
  ._modalBody_54nng_80 {
    padding: 8px !important;
  }
  ._modalFooter_54nng_101 {
    padding: 16px 20px;
  }
  ._sectionHeader_54nng_121 h3 {
    font-size: 15px;
  }
  ._howToSection_54nng_108 p,
  ._colorText_54nng_177,
  ._bettingInfo_54nng_213 p,
  ._bigSmallLabel_54nng_202 {
    font-size: 13px;
  }
  ._bigSmallText_54nng_208 {
    font-size: 12px;
  }
  ._goodLuckBtn_54nng_257 {
    padding: 12px 16px;
    font-size: 15px;
  }
}
.dice-app {
  max-width: 500px;
  width: 100%;
  min-height: 100vh;
  background: var(--bg-dark);
  margin: 0 auto;
  padding: 16px 16px 80px;
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 400px;
  height: 100%;
  background: var(--bg-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.loading-container {
  text-align: center;
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 20px;
}
.loading-container h2 {
  margin: 1rem 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}
.loading-container p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.8;
  color: #ffffffe6;
}
.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}
.loading-container h2,
.loading-container p {
  animation: pulse 2s ease-in-out infinite alternate;
}
@keyframes pulse {
  0% {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}
.time-tabs-bar {
  display: flex;
  background: var(--bg-time);
  margin-bottom: 16px;
  border-radius: 16px;
  box-shadow: 0 0.05333rem 0.10667rem #c5c5da40;
}
.time-tabs-bar .time-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.time-tabs-bar .time-tab .game-label,
.time-tabs-bar .time-tab .time-label {
  color: var(--color-secondary);
  font-size: 12.8px;
}
.time-tabs-bar .time-tab.active {
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)),
    linear-gradient(90deg, #7afec3, #02afb6);
}
.time-tabs-bar .time-tab:not(.active):hover {
  background: var(--bets-header-active-tab);
  border-color: var(--tab-highlight);
}
.time-tabs-bar .time-tab .trophy-icons {
  font-size: 28px;
  margin-bottom: 4px;
}
.activelabel {
  color: var(--bg-dark) !important;
  font-size: 12.8px !important;
}
@media (max-width: 480px) {
  .time-tabs-bar .time-tab {
    padding: 10px 6px;
  }
  .time-tabs-bar .time-tab .trophy-icons {
    font-size: 24px;
  }
}
.dicegame-header {
  width: 100%;
  background: var(--bg-medium);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: relative;
  padding: 17.0668px 11.73323px 5.73332px;
}
.dicegame-header .header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.dicegame-header .header-top .header-left {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.dicegame-header .header-top .header-left .period-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-secondary);
}
.dicegame-header .header-top .header-left .how-to-play-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 16px;
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  font-size: 11.7332px;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dicegame-header .header-top .header-left .how-to-play-btn svg {
  width: 14px;
  height: 14px;
  color: #4fc3f7;
}
.dicegame-header .header-top .header-right .time-remaining-label {
  font-size: 12.8px;
  font-weight: 500;
  color: var(--color-secondary);
  text-align: right;
}
.dicegame-header .header-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dicegame-header .header-bottom .period-number {
  font-size: 19.2px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
}
.dicegame-header .header-bottom .timer-display {
  display: flex;
  align-items: center;
  gap: 4.8px;
}
.dicegame-header .header-bottom .timer-display .timer-digit {
  width: 21.33px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19.2px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  background: var(--bg-time);
}
.dicegame-header .header-bottom .timer-display .timer-colon {
  padding: 0 2px;
  font-size: 19.2px;
  font-weight: 600;
  color: var(--color-primary);
}
.dicegame-header .dice-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.dicegame-header .dice-container .dice-display {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  padding: 12px;
  background: transparent;
  border: 6px solid #00e676;
  border-radius: 16px;
  box-shadow: 0 4px 16px #00e6764d;
  position: relative;
}
.dicegame-header .dice-container .dice-display:before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 40px;
  background: #00e676;
  border-radius: 6px 0 0 6px;
  box-shadow: -2px 0 8px #00e67666;
}
.dicegame-header .dice-container .dice-display:after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 40px;
  background: #00e676;
  border-radius: 0 6px 6px 0;
  box-shadow: 2px 0 8px #00e67666;
}
.dicegame-header .dice-container .dice-display .dice-wrapper {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  background: #727272;
  border-radius: 8px;
  padding: 0;
}
.dicegame-header .dice-container .dice-display .dice-wrapper.rolling .dice {
  animation: rollDice3D 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.dicegame-header .dice-container .dice-display .dice-wrapper .dice {
  width: 50px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(345deg);
}
.dicegame-header .dice-container .dice-display .dice-wrapper .dice .dice-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
  transform: rotateX(-25deg) rotateY(35deg);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: linear-gradient(145deg, #e53935, #c62828);
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 3px 6px #fff3, inset 0 -3px 6px #0000004d;
  backface-visibility: visible;
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face:before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face.front {
  transform: rotateY(0) translateZ(25px);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face.back {
  transform: rotateY(180deg) translateZ(25px);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face.right {
  transform: rotateY(90deg) translateZ(25px);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face.left {
  transform: rotateY(-90deg) translateZ(25px);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face.top {
  transform: rotateX(90deg) translateZ(25px);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face.bottom {
  transform: rotateX(-90deg) translateZ(25px);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot {
  position: absolute;
  width: 7px;
  height: 7px;
  background: linear-gradient(145deg, gold, #ffed4e, #ffc107);
  border-radius: 50%;
  box-shadow: 0 2px 4px #0009, inset 0 1px 2px #fffc;
  border: 1px solid rgba(139, 69, 19, 0.3);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot.top-left {
  top: 10px;
  left: 10px;
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot.top-right {
  top: 10px;
  right: 10px;
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot.middle-left {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot.middle-right {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot.bottom-left {
  bottom: 10px;
  left: 10px;
}
.dicegame-header
  .dice-container
  .dice-display
  .dice-wrapper
  .dice
  .dice-cube
  .dice-face
  .dice-dots
  .dot.bottom-right {
  bottom: 10px;
  right: 10px;
}
@keyframes rollDice3D {
  0% {
    transform: rotateX(-25deg) rotateY(35deg);
  }
  20% {
    transform: rotateX(335deg) rotateY(215deg) rotate(90deg);
  }
  40% {
    transform: rotateX(695deg) rotateY(395deg) rotate(180deg);
  }
  60% {
    transform: rotateX(1055deg) rotateY(575deg) rotate(270deg);
  }
  80% {
    transform: rotateX(1415deg) rotateY(755deg) rotate(360deg);
  }
  to {
    transform: rotateX(-25deg) rotateY(35deg);
  }
}
@keyframes pulse {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@media (max-width: 768px) {
  .dicegame-header .header-top {
    margin-bottom: 10px;
  }
  .dicegame-header .header-top .header-left {
    gap: 10px;
  }
  .dicegame-header .header-top .header-left .period-label {
    font-size: 12px;
  }
  .dicegame-header .header-top .header-left .how-to-play-btn svg {
    width: 12px;
    height: 12px;
  }
  .dicegame-header .header-bottom {
    margin-bottom: 16px;
  }
  .dicegame-header .dice-container .dice-display {
    gap: 6px;
    padding: 10px;
    border-width: 4px;
  }
}
@media (max-width: 480px) {
  .dicegame-header .header-top .header-left {
    gap: 8px;
  }
  .dicegame-header .header-top .header-left .period-label {
    font-size: 11px;
  }
  .dicegame-header .header-top .header-left .how-to-play-btn svg {
    width: 11px;
    height: 11px;
  }
  .dicegame-header .header-bottom {
    margin-bottom: 14px;
  }
  .dicegame-header .dice-container .dice-display {
    gap: 5px;
    padding: 8px;
    border-width: 3px;
  }
}
@media (max-width: 350px) {
  .period-number {
    font-size: 13.824px !important;
  }
}
.modal-overlay-rules {
  position: fixed;
  inset: 0;
  background-color: #000000b3;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  max-width: 400px !important;
  margin: 0 auto;
}
.modal-content {
  background: var(--bg-dark);
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px #0000004d;
  border: 1px solid var(--bg-light);
}
.modal-content::-webkit-scrollbar {
  width: 6px;
}
.modal-content::-webkit-scrollbar-track {
  background: var(--bg-medium);
  border-radius: 3px;
}
.modal-content::-webkit-scrollbar-thumb {
  background: var(--bg-light);
  border-radius: 3px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.modal-close:hover {
  color: var(--color-white);
  background: var(--bg-light);
  border-radius: 50%;
}
.modal-close:active {
  transform: scale(0.95);
}
.rules-modal-title {
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--bg-light);
}
.modal-body {
  padding: 20px 0 24px;
}
.modal-body section {
  margin-bottom: 20px;
}
.modal-body section:last-child {
  margin-bottom: 0;
}
.modal-body section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 8px;
  text-align: left;
}
.modal-body section p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-white);
  margin: 0 0 8px;
  text-align: left;
}
.modal-body section p:last-child {
  margin-bottom: 0;
}
.modal-body section strong {
  font-weight: 600;
  color: var(--color-white);
}
.modal-body section strong.text-green {
  color: var(--norm_green-color);
}
.modal-body .disclaimer {
  background: var(--bg-light);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--norm_secondary-color);
}
.modal-body .disclaimer h3 {
  color: var(--norm_secondary-color);
  font-size: 14px;
  margin-bottom: 8px;
}
.modal-body .disclaimer p {
  font-size: 12px;
  color: var(--color-white);
}
.odds-table {
  margin-top: 12px;
  border: 1px solid var(--bg-light);
  border-radius: 8px;
  overflow: hidden;
}
.odds-table .odds-row {
  display: grid;
  grid-template-columns: 1fr 2fr 0.8fr;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bg-light);
}
.odds-table .odds-row:last-child {
  border-bottom: none;
}
.odds-table .odds-row.odds-header {
  background: var(--bg-medium);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-primary);
}
.odds-table .odds-row div {
  font-size: 12px;
  color: var(--color-white);
  display: flex;
  align-items: center;
}
.odds-table .odds-row div:first-child {
  font-weight: 500;
  color: var(--color-white);
}
.odds-table .odds-row div:last-child {
  color: var(--color-primary);
  font-weight: 600;
}
@media (max-width: 500px) {
  .modal-content {
    padding: 10px !important;
  }
  .rules-modal-title {
    font-size: 20px;
    padding: 16px 20px 12px;
  }
  .modal-body {
    padding: 10px !important;
  }
  .modal-body section {
    margin-bottom: 16px !important;
  }
  .modal-body section h3 {
    font-size: 13px;
  }
  .modal-body section p {
    font-size: 12px;
  }
  .modal-body .disclaimer h3 {
    font-size: 13px;
  }
  .modal-body .disclaimer p {
    font-size: 11px;
  }
  .odds-table .odds-row {
    padding: 6px 10px;
    gap: 8px;
  }
  .odds-table .odds-row.odds-header,
  .odds-table .odds-row div {
    font-size: 11px;
  }
}
.betting-tabs {
  display: flex;
  background: var(--bg-medium);
  padding: 10px 11.7332px 0;
  gap: 3px;
}
.betting-tabs .betting-tab {
  flex: 1;
  padding: 12px;
  background: var(--bg-time);
  border: none;
  font-size: 11.7332px;
  font-weight: 400;
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.betting-tabs .betting-tab:active {
  transform: scale(0.98);
}
.betting-tabs .betting-tab.active {
  background: var(--color-primary);
  color: var(--bg-dark);
  box-shadow: 0 2px 8px #7629b34d;
}
@media (max-width: 480px) {
  .betting-tabs .betting-tab {
    padding: 8px !important;
    font-size: 14px;
  }
}
.total-betting-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 12px;
  background: var(--bg-medium);
  gap: 6px;
  margin-bottom: 12.8px;
}
.total-betting-grid .specialbet {
  color: var(--color-white);
  padding: 8px !important;
  border-radius: 4px;
}
.total-betting-grid .bet-card-total-dice {
  background: var(--bg-medium);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: none;
  position: relative;
  margin-top: 8px;
}
.total-betting-grid .bet-card-total-dice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.total-betting-grid .bet-card-total-dice .specialContiner {
  width: max-content !important;
  height: max-content !important;
  border-radius: 8px;
}
.total-betting-grid .bet-card-total-dice .ball-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.total-betting-grid .bet-card-total-dice .ball-container .ball-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.total-betting-grid .bet-card-total-dice .ball-container .bet-label {
  position: relative;
  z-index: 2;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.total-betting-grid .bet-card-total-dice .ball-container .bet-label.special {
  font-size: 13px;
  text-transform: capitalize;
  font-weight: 900;
  color: var(--color-white);
}
.total-betting-grid .bet-card-total-dice .bet-multiplier {
  font-size: 11.7332px;
  font-weight: 400;
  color: var(--color-secondary);
}
.total-betting-grid .bet-card-total-dice.blue {
  background: linear-gradient(135deg, #4a9eff, #3182ce);
}
.total-betting-grid .bet-card-total-dice.blue .bet-multiplier {
  color: #fff;
}
.total-betting-grid .bet-card-total-dice.orange {
  background: linear-gradient(135deg, #ff9f43, #ee7d2b);
}
.total-betting-grid .bet-card-total-dice.orange .bet-multiplier {
  color: #fff;
}
.total-betting-grid
  .bet-card-total-dice.green.bet-card-total-dice:has(.special) {
  background: linear-gradient(135deg, #26de81, #20bf6b);
}
.total-betting-grid
  .bet-card-total-dice.green.bet-card-total-dice:has(.special)
  .bet-multiplier {
  color: #fff;
}
.total-betting-grid .bet-card-total-dice.red.bet-card-total-dice:has(.special) {
  background: linear-gradient(135deg, #fc5c65, #eb3b5a);
}
.total-betting-grid
  .bet-card-total-dice.red.bet-card-total-dice:has(.special)
  .bet-multiplier {
  color: #fff;
}
@media (max-width: 480px) {
  .total-betting-grid {
    padding: 10px;
  }
  .total-betting-grid .bet-card-total-dice .ball-container {
    width: 40px;
    height: 40px;
  }
  .total-betting-grid .bet-card-total-dice .ball-container .bet-label {
    font-size: 16px;
  }
  .total-betting-grid .bet-card-total-dice .ball-container .bet-label.special {
    font-size: 11px;
  }
}
.triple-betting-container {
  padding: 16px 12px;
  background: var(--bg-medium);
}
.triple-betting-container .betting-description {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-wallet);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--color-white);
}
.triple-betting-container .betting-description .info-icon {
  width: 20px;
  height: 20px;
  background: #ff9800;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.triple-betting-container .triple-betting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.triple-betting-container .triple-bet-card,
.triple-betting-container .any-triple-card {
  background: var(--bg-wallet);
  border-radius: 12px;
  padding: 8px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.2s;
}
.triple-betting-container .triple-bet-card:active:not(:disabled),
.triple-betting-container .any-triple-card:active:not(:disabled) {
  transform: scale(0.95);
}
.triple-betting-container .triple-bet-card:disabled,
.triple-betting-container .any-triple-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.triple-betting-container .triple-bet-card:not(:disabled):hover,
.triple-betting-container .any-triple-card:not(:disabled):hover {
  border-color: var(--header);
  box-shadow: 0 4px 12px #7629b34d;
}
.triple-betting-container .triple-bet-card .dice-group,
.triple-betting-container .any-triple-card .dice-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 80px;
  margin: 4px auto;
}
.triple-betting-container .triple-bet-card .dice-group .dice-top,
.triple-betting-container .any-triple-card .dice-group .dice-top {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
}
.triple-betting-container .triple-bet-card .dice-group .dice-bottom,
.triple-betting-container .any-triple-card .dice-group .dice-bottom {
  flex: 0 0 auto;
}
.triple-betting-container .triple-bet-card .mini-dice,
.triple-betting-container .any-triple-card .mini-dice {
  width: 32px;
  height: 32px;
  background: var(--bg-dice);
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.triple-betting-container .triple-bet-card .mini-dice.question,
.triple-betting-container .any-triple-card .mini-dice.question {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--bg-dice);
}
.triple-betting-container .triple-bet-card .mini-dice .dot,
.triple-betting-container .any-triple-card .mini-dice .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--color-white);
  border-radius: 50%;
}
.triple-betting-container .triple-bet-card .mini-dice .dot.center,
.triple-betting-container .any-triple-card .mini-dice .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.triple-betting-container .triple-bet-card .mini-dice .dot.top-left,
.triple-betting-container .any-triple-card .mini-dice .dot.top-left {
  top: 6px;
  left: 6px;
}
.triple-betting-container .triple-bet-card .mini-dice .dot.top-right,
.triple-betting-container .any-triple-card .mini-dice .dot.top-right {
  top: 6px;
  right: 6px;
}
.triple-betting-container .triple-bet-card .mini-dice .dot.middle-left,
.triple-betting-container .any-triple-card .mini-dice .dot.middle-left {
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}
.triple-betting-container .triple-bet-card .mini-dice .dot.middle-right,
.triple-betting-container .any-triple-card .mini-dice .dot.middle-right {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
.triple-betting-container .triple-bet-card .mini-dice .dot.bottom-left,
.triple-betting-container .any-triple-card .mini-dice .dot.bottom-left {
  bottom: 6px;
  left: 6px;
}
.triple-betting-container .triple-bet-card .mini-dice .dot.bottom-right,
.triple-betting-container .any-triple-card .mini-dice .dot.bottom-right {
  bottom: 6px;
  right: 6px;
}
.triple-betting-container .triple-bet-card .bet-multiplier,
.triple-betting-container .any-triple-card .bet-multiplier {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-secondary);
}
.triple-betting-container .triple-question {
  display: flex;
  flex-direction: row !important;
  gap: 4px !important;
}
.triple-betting-container .any-triple-card {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.triple-betting-container .any-triple-card .dice-group-triangle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
@media (max-width: 480px) {
  .triple-betting-container {
    padding: 12px 10px;
  }
  .triple-betting-container .triple-betting-grid {
    gap: 8px;
    margin-bottom: 12px;
  }
  .triple-betting-container .triple-bet-card,
  .triple-betting-container .any-triple-card {
    padding: 12px 10px;
  }
  .triple-betting-container .triple-bet-card .dice-group,
  .triple-betting-container .any-triple-card .dice-group {
    gap: 3px;
    max-width: 70px;
  }
  .triple-betting-container .triple-bet-card .mini-dice,
  .triple-betting-container .any-triple-card .mini-dice {
    width: 28px;
    height: 28px;
  }
  .triple-betting-container .triple-bet-card .mini-dice.question,
  .triple-betting-container .any-triple-card .mini-dice.question {
    font-size: 16px;
  }
  .triple-betting-container .triple-bet-card .mini-dice .dot,
  .triple-betting-container .any-triple-card .mini-dice .dot {
    width: 4px !important;
    height: 4px !important;
  }
  .triple-betting-container .triple-bet-card .mini-dice .dot.top-left,
  .triple-betting-container .any-triple-card .mini-dice .dot.top-left {
    top: 5px;
    left: 5px;
  }
  .triple-betting-container .triple-bet-card .mini-dice .dot.top-right,
  .triple-betting-container .any-triple-card .mini-dice .dot.top-right {
    top: 5px;
    right: 5px;
  }
  .triple-betting-container .triple-bet-card .mini-dice .dot.middle-left,
  .triple-betting-container .any-triple-card .mini-dice .dot.middle-left {
    left: 5px;
  }
  .triple-betting-container .triple-bet-card .mini-dice .dot.middle-right,
  .triple-betting-container .any-triple-card .mini-dice .dot.middle-right {
    right: 5px;
  }
  .triple-betting-container .triple-bet-card .mini-dice .dot.bottom-left,
  .triple-betting-container .any-triple-card .mini-dice .dot.bottom-left {
    bottom: 5px;
    left: 5px;
  }
  .triple-betting-container .triple-bet-card .mini-dice .dot.bottom-right,
  .triple-betting-container .any-triple-card .mini-dice .dot.bottom-right {
    bottom: 5px;
    right: 5px;
  }
  .triple-betting-container .triple-bet-card .bet-multiplier,
  .triple-betting-container .any-triple-card .bet-multiplier {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
  }
}
.double-betting-container {
  padding: 16px 12px;
  background: var(--bg-medium);
}
.double-betting-container .betting-description {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-wallet);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--color-white);
}
.double-betting-container .betting-description .info-icon {
  width: 20px;
  height: 20px;
  background: #ff9800;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.double-betting-container .double-betting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.double-betting-container .double-bet-card {
  background: var(--bg-wallet);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.double-betting-container .double-bet-card:active:not(:disabled) {
  transform: scale(0.95);
}
.double-betting-container .double-bet-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.double-betting-container .double-bet-card:not(:disabled):hover {
  border-color: var(--header);
  box-shadow: 0 4px 12px #7629b34d;
}
.double-betting-container .double-bet-card .dice-group {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.double-betting-container .double-bet-card .mini-dice {
  width: 32px;
  height: 32px;
  background: var(--bg-dice);
  border-radius: 6px;
  position: relative;
}
.double-betting-container .double-bet-card .mini-dice .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--color-white);
  border-radius: 50%;
}
.double-betting-container .double-bet-card .mini-dice .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.double-betting-container .double-bet-card .mini-dice .dot.top-left {
  top: 6px;
  left: 6px;
}
.double-betting-container .double-bet-card .mini-dice .dot.top-right {
  top: 6px;
  right: 6px;
}
.double-betting-container .double-bet-card .mini-dice .dot.middle-left {
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}
.double-betting-container .double-bet-card .mini-dice .dot.middle-right {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
.double-betting-container .double-bet-card .mini-dice .dot.bottom-left {
  bottom: 6px;
  left: 6px;
}
.double-betting-container .double-bet-card .mini-dice .dot.bottom-right {
  bottom: 6px;
  right: 6px;
}
.double-betting-container .double-bet-card .bet-multiplier {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-secondary);
}
@media (max-width: 480px) {
  .double-betting-container {
    padding: 12px 10px;
  }
  .double-betting-container .double-betting-grid {
    gap: 8px;
  }
  .double-betting-container .double-bet-card {
    padding: 12px 10px;
  }
  .double-betting-container .double-bet-card .mini-dice {
    width: 28px;
    height: 28px;
  }
  .double-betting-container .double-bet-card .mini-dice .dot {
    width: 4px !important;
    height: 4px !important;
  }
  .double-betting-container .double-bet-card .mini-dice .dot.top-left {
    top: 5px;
    left: 5px;
  }
  .double-betting-container .double-bet-card .mini-dice .dot.top-right {
    top: 5px;
    right: 5px;
  }
  .double-betting-container .double-bet-card .mini-dice .dot.middle-left {
    left: 5px;
  }
  .double-betting-container .double-bet-card .mini-dice .dot.middle-right {
    right: 5px;
  }
  .double-betting-container .double-bet-card .mini-dice .dot.bottom-left {
    bottom: 5px;
    left: 5px;
  }
  .double-betting-container .double-bet-card .mini-dice .dot.bottom-right {
    bottom: 5px;
    right: 5px;
  }
  .double-betting-container .double-bet-card .bet-multiplier {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-secondary);
  }
}
.single-betting-container {
  padding: 16px 12px;
  background: var(--bg-medium);
}
.single-betting-container .betting-description {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-wallet);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--color-white);
}
.single-betting-container .betting-description .info-icon {
  width: 20px;
  height: 20px;
  background: #ff9800;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.single-betting-container .single-betting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.single-betting-container .single-bet-card {
  background: var(--bg-wallet);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
}
.single-betting-container .single-bet-card:active:not(:disabled) {
  transform: scale(0.95);
}
.single-betting-container .single-bet-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.single-betting-container .single-bet-card:not(:disabled):hover {
  border-color: var(--header);
  box-shadow: 0 4px 12px #7629b34d;
}
.single-betting-container .single-bet-card .large-dice {
  width: 42px;
  height: 42px;
  background: var(--bg-dice);
  border-radius: 8px;
  position: relative;
}
.single-betting-container .single-bet-card .large-dice .dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-white);
  border-radius: 50%;
}
.single-betting-container .single-bet-card .large-dice .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.single-betting-container .single-bet-card .large-dice .dot.top-left {
  top: 8px;
  left: 8px;
}
.single-betting-container .single-bet-card .large-dice .dot.top-right {
  top: 8px;
  right: 8px;
}
.single-betting-container .single-bet-card .large-dice .dot.middle-left {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.single-betting-container .single-bet-card .large-dice .dot.middle-right {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.single-betting-container .single-bet-card .large-dice .dot.bottom-left {
  bottom: 8px;
  left: 8px;
}
.single-betting-container .single-bet-card .large-dice .dot.bottom-right {
  bottom: 8px;
  right: 8px;
}
.single-betting-container .single-bet-card .bet-multiplier {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-secondary);
}
@media (max-width: 480px) {
  .single-betting-container {
    padding: 12px 10px;
  }
  .single-betting-container .single-betting-grid {
    gap: 8px;
  }
  .single-betting-container .single-bet-card {
    padding: 12px 10px;
  }
  .single-betting-container .single-bet-card .large-dice {
    width: 36px;
    height: 36px;
  }
  .single-betting-container .single-bet-card .large-dice .dot {
    width: 4px !important;
    height: 4px !important;
  }
  .single-betting-container .single-bet-card .large-dice .dot.top-left {
    top: 7px;
    left: 7px;
  }
  .single-betting-container .single-bet-card .large-dice .dot.top-right {
    top: 7px;
    right: 7px;
  }
  .single-betting-container .single-bet-card .large-dice .dot.middle-left {
    left: 7px;
  }
  .single-betting-container .single-bet-card .large-dice .dot.middle-right {
    right: 7px;
  }
  .single-betting-container .single-bet-card .large-dice .dot.bottom-left {
    bottom: 7px;
    left: 7px;
  }
  .single-betting-container .single-bet-card .large-dice .dot.bottom-right {
    bottom: 7px;
    right: 7px;
  }
  .single-betting-container .single-bet-card .bet-multiplier {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-secondary);
  }
}
.bottom-navigate {
  display: flex;
  background: var(--bg-wallet);
  box-shadow: var(--box-shadow);
  z-index: 100;
  border-radius: 16px 16px 0 0;
}
.bottom-navigate .nav-tab {
  flex: 1;
  padding: 14px 12px;
  background: transparent;
  border: none;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.bottom-navigate .nav-tab.active {
  background: linear-gradient(
      180deg,
      var(--gradient-start),
      var(--gradient-end)
    ),
    linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
  color: var(--color-white);
}
@media (max-width: 480px) {
  .bottom-navigate .nav-tab {
    padding: 12px 8px;
    font-size: 12px;
  }
}
.result-history {
  background: #fff;
  padding: 0;
  overflow-x: auto;
}
.result-history .history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.result-history .history-table thead {
  background: var(--bg-dark) !important;
  position: sticky;
  top: 0;
  z-index: 10;
}
.result-history .history-table thead th {
  padding: 12px 8px;
  text-align: center;
  font-weight: 600;
  color: var(--color-white);
  font-size: 12px;
  text-transform: uppercase;
}
.result-history .history-table tbody {
  background: var(--bg-medium);
}
.result-history .history-table tbody tr:last-child {
  border-bottom: none;
}
.result-history .history-table tbody td {
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
}
.result-history .history-table tbody .issue-cell {
  font-size: 12.8px;
  color: var(--color-white);
  font-weight: 500;
}
.result-history .history-table tbody .result-cell .dice-group {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.result-history .history-table tbody .result-cell .history-dice {
  width: 28px;
  height: 28px;
  background: linear-gradient(145deg, #e53935, #c62828);
  border-radius: 5px;
  position: relative;
  display: inline-flex;
}
.result-history .history-table tbody .result-cell .history-dice .dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-white);
  border-radius: 50%;
}
.result-history .history-table tbody .result-cell .history-dice .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.result-history .history-table tbody .result-cell .history-dice .dot.top-left {
  top: 5px;
  left: 5px;
}
.result-history .history-table tbody .result-cell .history-dice .dot.top-right {
  top: 5px;
  right: 5px;
}
.result-history
  .history-table
  tbody
  .result-cell
  .history-dice
  .dot.middle-left {
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
.result-history
  .history-table
  tbody
  .result-cell
  .history-dice
  .dot.middle-right {
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.result-history
  .history-table
  tbody
  .result-cell
  .history-dice
  .dot.bottom-left {
  bottom: 5px;
  left: 5px;
}
.result-history
  .history-table
  tbody
  .result-cell
  .history-dice
  .dot.bottom-right {
  bottom: 5px;
  right: 5px;
}
.result-history .history-table tbody .sum-cell {
  font-weight: 500;
  color: var(--color-white);
  font-size: 12.8px;
}
.result-history .history-table tbody .value-cell .badges,
.result-history .history-table tbody .number-cell .badges {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}
.result-history .history-table tbody .value-cell .badge,
.result-history .history-table tbody .value-cell .badge-alt,
.result-history .history-table tbody .number-cell .badge,
.result-history .history-table tbody .number-cell .badge-alt {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 8px;
  border-radius: 50%;
  font-size: 12.8px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.result-history .history-table tbody .value-cell .badge-alt,
.result-history .history-table tbody .number-cell .badge-alt {
  color: var(--color-white);
}
@media (max-width: 480px) {
  .result-history .history-table {
    font-size: 11px;
  }
  .result-history .history-table thead th {
    padding: 10px 4px;
    font-size: 10px;
  }
  .result-history .history-table tbody td {
    padding: 10px 4px;
  }
  .result-history .history-table .result-cell .history-dice {
    width: 24px;
    height: 24px;
  }
  .result-history .history-table .result-cell .history-dice .dot {
    width: 3px;
    height: 3px;
  }
  .result-history .history-table .result-cell .history-dice .dot.top-left {
    top: 4px;
    left: 4px;
  }
  .result-history .history-table .result-cell .history-dice .dot.top-right {
    top: 4px;
    right: 4px;
  }
  .result-history .history-table .result-cell .history-dice .dot.middle-left {
    left: 4px;
  }
  .result-history .history-table .result-cell .history-dice .dot.middle-right {
    right: 4px;
  }
  .result-history .history-table .result-cell .history-dice .dot.bottom-left {
    bottom: 4px;
    left: 4px;
  }
  .result-history .history-table .result-cell .history-dice .dot.bottom-right {
    bottom: 4px;
    right: 4px;
  }
  .result-history .history-table .sum-cell {
    font-size: 12px;
  }
  .result-history .history-table .value-cell .badge,
  .result-history .history-table .value-cell .badge-alt,
  .result-history .history-table .number-cell .badge,
  .result-history .history-table .number-cell .badge-alt {
    padding: 2px 6px;
    font-size: 9px;
  }
}
.neutral-dash {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}
.my-bets {
  background: var(--bg-medium);
  padding: 16px 16px 0;
  min-height: 300px;
}
.my-bets .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
}
.my-bets .empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.my-bets .empty-state .empty-text {
  font-size: 15px;
  font-weight: 500;
}
.my-bets .bets-list {
  display: flex;
  flex-direction: column;
}
.my-bets .bets-list .bet-result-card {
  background: var(--bg-wallet);
  border-radius: 12px;
  margin: 4px 0;
  box-shadow: 0 2px 8px #0000001a;
  overflow: hidden;
  border: 1px solid #374151;
  cursor: pointer;
  transition: all 0.3s ease;
}
.my-bets .bets-list .bet-result-card.collapsed .bet-card-collapsed {
  display: flex;
}
.my-bets .bets-list .bet-result-card.collapsed .bet-card-expanded {
  display: none;
}
.my-bets .bets-list .bet-result-card.expanded .bet-card-collapsed {
  display: flex;
}
.my-bets .bets-list .bet-result-card.expanded .bet-card-expanded {
  display: block;
}
.my-bets .bets-list .bet-result-card .bet-card-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.my-bets .bets-list .bet-result-card .bet-card-collapsed .collapsed-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  flex-shrink: 0;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 100%;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display {
  width: 40px;
  height: 40px;
  background: var(--bg-dice);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 4px #0000001a;
  flex-shrink: 0;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-white);
  border-radius: 50%;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot.top-left {
  top: 8px;
  left: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot.top-right {
  top: 8px;
  right: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot.middle-left {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot.middle-right {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot.bottom-left {
  bottom: 8px;
  left: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display
  .dot.bottom-right {
  bottom: 8px;
  right: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display.question
  .question-mark {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-display.question
  .dot {
  display: none;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-group {
  display: flex;
  gap: 4px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .dice-group
  .dice-display {
  width: 30px;
  height: 30px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .circular-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: capitalize;
  flex-shrink: 0;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .circular-badge.even-circular {
  background: #3498db;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .circular-badge.odd-circular {
  background: #ff4757;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .sum-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bets-congrats);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .sum-ball-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .sum-ball-container
  .sum-ball-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .sum-ball-container
  .sum-ball-label {
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  text-align: center;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .badge.small-badge {
  background: #3498db;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .badge.big-badge {
  background: #ff4757;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .badge.odd-badge {
  background: #fff;
  color: #ff4757;
  border: 2px solid #ff4757;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-left
  .bet-indicators-container
  .badge.even-badge {
  background: #fff;
  color: #3498db;
  border: 2px solid #3498db;
}
.my-bets .bets-list .bet-result-card .bet-card-collapsed .collapsed-center {
  flex: 1;
  min-width: 0;
  width: calc(100% - 240px);
  text-align: center;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-center
  .period-id-small {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-center
  .date-time-small {
  font-size: 11px;
  color: #fff9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-bets .bets-list .bet-result-card .bet-card-collapsed .collapsed-right {
  width: 70px;
  flex-shrink: 0;
  text-align: right;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-right
  .status-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  display: inline-block;
  font-weight: 600;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-right
  .status-badge.won {
  background: #4caf50;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-right
  .status-badge.loss {
  background: #f44;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-right
  .status-badge.unsettled {
  background: #ff9800;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-right
  .amount-display {
  font-size: 16px;
  font-weight: 700;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-right
  .amount-display.win {
  color: #4caf50;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-collapsed
  .collapsed-right
  .amount-display.loss {
  color: #f44;
}
.my-bets .bets-list .bet-result-card .bet-card-expanded {
  border-top: 1px solid #374151;
  background: var(--bg-dark);
}
.my-bets .bets-list .bet-result-card .bet-card-expanded .expanded-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  border-bottom: 1px solid #374151;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .period-info-expanded
  .period-id-expanded {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .period-info-expanded
  .date-time-expanded {
  font-size: 12px;
  color: #fff9;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded {
  text-align: right;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  display: inline-block;
  font-weight: 600;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded.won {
  background: #4caf50;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded.loss {
  background: #f44;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .status-badge-expanded.unsettled {
  background: #ff9800;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .amount-display-expanded {
  font-size: 18px;
  font-weight: 700;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .amount-display-expanded.win {
  color: #4caf50;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-header
  .status-info-expanded
  .amount-display-expanded.loss {
  color: #f44;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-wallet);
  border-bottom: 1px solid #374151;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .result-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.5px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container {
  display: flex;
  gap: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display {
  width: 30px;
  height: 30px;
  background: linear-gradient(145deg, #e53935, #c62828);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 4px #0000001a;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-white);
  border-radius: 50%;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot.top-left {
  top: 8px;
  left: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot.top-right {
  top: 8px;
  right: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot.middle-left {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot.middle-right {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot.bottom-left {
  bottom: 8px;
  left: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .dice-container
  .dice-display
  .dot.bottom-right {
  bottom: 8px;
  right: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .total-point {
  width: 36px;
  height: 36px;
  background: #ff4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #ff47574d;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .total-point
  .point-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .draw-badges {
  display: flex;
  gap: 8px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .draw-badges
  .badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 8px 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .draw-badges
  .badge.small-badge {
  background: #3498db;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .draw-badges
  .badge.odd-badge {
  background: #fff;
  color: #ff4757;
  border: 2px solid #ff4757;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .draw-badges
  .badge.big-badge {
  background: #ff4757;
  color: #fff;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .draw-badges
  .badge.even-badge {
  background: #fff;
  color: #3498db;
  border: 2px solid #3498db;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .result-section-expanded
  .result-group
  .draw-badges
  .neutral-dash {
  color: #fff9;
  font-size: 1.2rem;
  font-weight: 500;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section {
  padding: 0;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item:last-child {
  border-bottom: none;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item.highlight {
  background: #ffffff05;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .detail-label {
  font-size: 14px;
  color: #ffffffb3;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .detail-value {
  font-size: 14px;
  color: var(--color-white);
  font-weight: 500;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .detail-value.amount-highlight {
  color: #ff6b35;
  font-weight: 700;
  font-size: 15px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .status-text-won {
  color: #4caf50;
  font-weight: 600;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .status-text-loss {
  color: #f44;
  font-weight: 600;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .status-text-unsettled {
  color: #ff9800;
  font-weight: 600;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .win-amount {
  color: #4caf50;
  font-weight: 700;
  font-size: 15px;
}
.my-bets
  .bets-list
  .bet-result-card
  .bet-card-expanded
  .expanded-details-section
  .detail-item
  .loss-amount {
  color: #f44;
  font-weight: 700;
  font-size: 15px;
}
@media (max-width: 420px) {
  .my-bets .bets-list .bet-result-card {
    margin: 4px 0;
  }
  .my-bets .bets-list .bet-result-card .bet-card-collapsed {
    padding: 10px 12px;
    gap: 8px;
  }
  .my-bets .bets-list .bet-result-card .bet-card-collapsed .collapsed-left {
    width: 100px;
    flex-shrink: 0;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-left
    .bet-indicators-container {
    max-width: 100%;
    gap: 4px;
    justify-content: flex-start;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-left
    .bet-indicators-container
    .dice-display {
    width: 36px;
    height: 36px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-left
    .bet-indicators-container
    .dice-group
    .dice-display {
    width: 29px;
    height: 29px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-left
    .bet-indicators-container
    .circular-badge,
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-left
    .bet-indicators-container
    .sum-circle,
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-left
    .bet-indicators-container
    .badge {
    width: 36px;
    height: 36px;
    font-size: 9px;
  }
  .my-bets .bets-list .bet-result-card .bet-card-collapsed .collapsed-center {
    width: calc(100% - 180px);
    text-align: center;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-center
    .period-id-small {
    font-size: 13px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-center
    .date-time-small {
    font-size: 10px;
  }
  .my-bets .bets-list .bet-result-card .bet-card-collapsed .collapsed-right {
    width: 60px;
    flex-shrink: 0;
    text-align: right;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-right
    .status-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-collapsed
    .collapsed-right
    .amount-display {
    font-size: 14px;
  }
  .my-bets .bets-list .bet-result-card .bet-card-expanded .expanded-header {
    padding: 12px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-expanded
    .expanded-header
    .period-info-expanded
    .period-id-expanded {
    font-size: 14px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-expanded
    .expanded-header
    .status-info-expanded
    .amount-display-expanded {
    font-size: 16px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-expanded
    .result-section-expanded {
    padding: 12px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-expanded
    .expanded-details-section
    .detail-item {
    padding: 12px;
  }
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-expanded
    .expanded-details-section
    .detail-item
    .detail-label,
  .my-bets
    .bets-list
    .bet-result-card
    .bet-card-expanded
    .expanded-details-section
    .detail-item
    .detail-value {
    font-size: 13px;
  }
}
@media print {
  .my-bets {
    background: #fff;
  }
  .my-bets .bet-result-card {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}
.bet-modal-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}
.bet-modal {
  background: var(--bg-medium);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}
.bet-modal::-webkit-scrollbar {
  display: none;
}
.bet-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.bet-modal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
}
.bet-modal .modal-header .dice-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--color-white);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  border-radius: 50%;
}
.bet-modal .modal-content {
  background: var(--bg-medium);
  padding: 20px;
}
.bet-modal .modal-content::-webkit-scrollbar {
  display: none;
}
.bet-modal .modal-content .bet-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  background: var(--bg-wallet);
  border-radius: 12px;
  margin-bottom: 20px;
}
.bet-modal .modal-content .bet-display .bet-number {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
}
.bet-modal .modal-content .bet-display .dice-group {
  display: flex;
  gap: 8px;
}
.bet-modal .modal-content .bet-display .dice-group.triangle {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 120px;
}
.bet-modal .modal-content .bet-display .dice-group.triangle .dice-top {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
}
.bet-modal .modal-content .bet-display .dice-group.triangle .dice-bottom {
  flex: 0 0 auto;
}
.bet-modal .modal-content .bet-display .modal-large-dice {
  width: 64px;
  height: 64px;
  background: var(--bg-dice);
  border-radius: 10px;
  position: relative;
  box-shadow: var(--box-shadow);
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-white);
  border-radius: 50%;
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot.top-left {
  top: 10px;
  left: 10px;
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot.top-right {
  top: 10px;
  right: 10px;
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot.middle-left {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot.middle-right {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot.bottom-left {
  bottom: 10px;
  left: 10px;
}
.bet-modal .modal-content .bet-display .modal-large-dice .dot.bottom-right {
  bottom: 10px;
  right: 10px;
}
.bet-modal .modal-content .bet-display .modal-mini-dice {
  width: 48px;
  height: 48px;
  background: var(--bg-dice);
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 6px #0000001a;
}
.bet-modal .modal-content .bet-display .modal-mini-dice.question {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--bg-dice);
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-white);
  border-radius: 50%;
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot.top-left {
  top: 8px;
  left: 8px;
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot.top-right {
  top: 8px;
  right: 8px;
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot.middle-left {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot.middle-right {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot.bottom-left {
  bottom: 8px;
  left: 8px;
}
.bet-modal .modal-content .bet-display .modal-mini-dice .dot.bottom-right {
  bottom: 8px;
  right: 8px;
}
.bet-modal .modal-content .amount-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.bet-modal .modal-content .amount-selector .amount-btn {
  padding: 12px;
  background: #001c54;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s;
}
.bet-modal .modal-content .amount-selector .amount-btn.active {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  border-color: var(--header);
  color: var(--bg-dark);
}
.bet-modal .modal-content .amount-selector .amount-btn:not(.active):hover {
  border-color: var(--header);
}
.bet-modal .modal-content .multiplier-section {
  margin-bottom: 16px;
}
.bet-modal .modal-content .multiplier-section label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}
.bet-modal .modal-content .multiplier-section .multiplier-control {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bet-modal
  .modal-content
  .multiplier-section
  .multiplier-control
  .multiplier-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
.bet-modal
  .modal-content
  .multiplier-section
  .multiplier-control
  .multiplier-btn:active {
  transform: scale(0.95);
  background: #e0e0e0;
}
.bet-modal .modal-content .multiplier-section .multiplier-control input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--color-white);
  background: var(--bg-dark);
}
.bet-modal .modal-content .multiplier-section .multiplier-control input:focus {
  outline: none;
  border-color: var(--header);
}
.bet-modal .modal-content .multiplier-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bet-modal .modal-content .multiplier-presets .preset-btn {
  padding: 8px 16px;
  background: #001c54;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s;
}
.bet-modal .modal-content .multiplier-presets .preset-btn.active {
  background: var(--gradient-button);
  border-color: var(--header);
  color: var(--bg-dark);
}
.bet-modal .modal-content .agreement {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}
.bet-modal .modal-content .agreement input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.bet-modal .modal-content .agreement a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
}
.bet-modal .modal-content .agreement a:hover {
  text-decoration: underline;
}
.bet-modal .modal-content .place-bet-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(
      180deg,
      var(--gradient-start),
      var(--gradient-end)
    ),
    linear-gradient(180deg, #7afec3, #02afb6);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--box-shadow);
}
.bet-modal .modal-content .place-bet-btn:active {
  transform: scale(0.98);
}
@media (max-width: 480px) {
  .bet-modal .modal-content {
    padding: 16px;
  }
  .bet-modal .modal-content .bet-display {
    padding: 25px 0;
  }
  .bet-modal .modal-content .bet-display .bet-number {
    font-size: 40px;
  }
  .bet-modal .modal-content .bet-display .dice-group.triangle {
    gap: 8px;
    max-width: 110px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice {
    width: 56px;
    height: 56px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice .dot {
    width: 9px;
    height: 9px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.top-left,
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.top-right {
    top: 9px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.middle-left {
    left: 9px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.middle-right {
    right: 9px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.bottom-left,
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.bottom-right {
    bottom: 9px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.top-left,
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.bottom-left {
    left: 9px;
  }
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.top-right,
  .bet-modal .modal-content .bet-display .modal-large-dice .dot.bottom-right {
    right: 9px;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice {
    width: 42px !important;
    height: 42px !important;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot {
    width: 7px !important;
    height: 7px !important;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.top-left,
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.top-right {
    top: 7px;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.middle-left {
    left: 7px;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.middle-right {
    right: 7px;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.bottom-left,
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.bottom-right {
    bottom: 7px;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.top-left,
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.bottom-left {
    left: 7px;
  }
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.top-right,
  .bet-modal .modal-content .bet-display .modal-mini-dice .dot.bottom-right {
    right: 7px;
  }
  .bet-modal .modal-content .amount-selector {
    gap: 8px;
  }
  .bet-modal .modal-content .amount-selector .amount-btn {
    padding: 10px;
    font-size: 14px;
  }
  .bet-modal .modal-content .multiplier-presets {
    gap: 6px;
  }
  .bet-modal .modal-content .multiplier-presets .preset-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}
.place-bet-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._modalOverlay_1sdvm_1 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000b3 !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
  z-index: 10000;
  animation: _fadeInOverlay_1sdvm_1 0.4s ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 10px;
  box-sizing: border-box;
}
._losingModal_1sdvm_18 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 80%;
  max-width: 360px;
  min-height: 450px;
  height: auto;
  background-image: url(/_build/assets/losingbanner-OvZ4rPU2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 60px 24px 80px;
  text-align: center;
  z-index: 10001;
  box-sizing: border-box;
  margin: auto;
}
._losingTitle_1sdvm_39 {
  font-size: 28px;
  font-weight: 700;
  color: #668ab2;
  margin: 0 0 15px;
  letter-spacing: 0.5px;
  position: relative;
  top: 1.5rem;
}
._lotteryResults_1sdvm_49 {
  margin-top: 15px;
  width: 90%;
  position: relative;
  top: 1.5rem;
}
._resultsHeader_1sdvm_56 {
  display: flex;
  width: 100%;
  align-items: center;
  background: transparent !important;
  border: none;
  padding: 0;
  gap: 0.5rem !important;
  flex-wrap: wrap;
}
._resultsLabel_1sdvm_67 {
  color: #8598b2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._resultsValues_1sdvm_73 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
._diceMini_1sdvm_80 {
  background: var(--bg-dice, rgba(255, 255, 255, 0.2));
  border-radius: 8px;
  padding: clamp(4px, 1.5vw, 6px);
  box-shadow: 0 2px 8px #0000004d;
  transition: transform 0.2s ease;
}
._diceMini_1sdvm_80:hover {
  transform: scale(1.05);
}
._diceFaceMini_1sdvm_91 {
  width: clamp(28px, 7vw, 32px);
  height: clamp(28px, 7vw, 32px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px;
}
._diceDot_1sdvm_102 {
  width: clamp(5px, 1.5vw, 6px);
  height: clamp(5px, 1.5vw, 6px);
  background: var(--color-white, #fff);
  border-radius: 50%;
  position: absolute;
}
._diceDot_1sdvm_102._center_1sdvm_109 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
._diceDot_1sdvm_102._topLeft_1sdvm_114 {
  top: 4px;
  left: 4px;
}
._diceDot_1sdvm_102._topRight_1sdvm_118 {
  top: 4px;
  right: 4px;
}
._diceDot_1sdvm_102._middleLeft_1sdvm_122 {
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}
._diceDot_1sdvm_102._middleRight_1sdvm_127 {
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}
._diceDot_1sdvm_102._bottomLeft_1sdvm_132 {
  bottom: 4px;
  left: 4px;
}
._diceDot_1sdvm_102._bottomRight_1sdvm_136 {
  bottom: 4px;
  right: 4px;
}
._resultNumber_1sdvm_141 {
  background: #ffffff4d;
  color: #fff;
  width: clamp(32px, 8vw, 36px);
  height: clamp(32px, 8vw, 36px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(14px, 3.5vw, 16px);
  border: none;
}
._resultNumber_1sdvm_141._resultBig_1sdvm_154 {
  background: #28a745;
  box-shadow: 0 2px 8px #28a74566;
}
._resultNumber_1sdvm_141._resultSmall_1sdvm_158 {
  background: #dc3545;
  box-shadow: 0 2px 8px #dc354566;
}
._resultBig_1sdvm_154,
._resultSmall_1sdvm_158,
._resultTriple_1sdvm_165 {
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: clamp(11px, 2.5vw, 13px);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
._resultBig_1sdvm_154 {
  background: #28a745 !important;
  box-shadow: 0 2px 8px #28a74566;
}
._resultSmall_1sdvm_158 {
  background: #dc3545 !important;
  box-shadow: 0 2px 8px #dc354566;
}
._resultTriple_1sdvm_165 {
  background: #8b5cf6 !important;
  box-shadow: 0 2px 8px #8b5cf666;
}
._bonusSection_1sdvm_190 {
  position: relative;
  width: 100%;
}
._bonusCards_1sdvm_195 {
  position: relative;
  top: 2.5rem;
}
._bonusAmount_1sdvm_200 {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 800;
  color: #6590c2;
  margin: 10px 0 5px;
}
._bonusDetails_1sdvm_207 {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #666;
  line-height: 1.6;
}
._periodLine_1sdvm_213 {
  margin-bottom: 2px;
  font-weight: 800;
  color: #a3acc9;
  font-size: clamp(11px, 2.8vw, 14px);
}
._periodNumber_1sdvm_220 {
  font-family: Courier New, monospace;
  color: #a3acc9;
  letter-spacing: 0.5px;
  font-size: clamp(10px, 2.5vw, 11px);
  font-weight: 600;
}
._multipleWins_1sdvm_228 {
  margin: 0 0 16px;
}
._winsCount_1sdvm_232 {
  display: inline-block;
  background: #ffffff26;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: clamp(11px, 2.5vw, 13px);
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
._autoClose_1sdvm_244 {
  position: absolute;
  bottom: 20px;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fffffff2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._checkmarkCircle_1sdvm_257 {
  width: clamp(24px, 6vw, 30px);
  height: clamp(24px, 6vw, 30px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}
._tickIcon_1sdvm_267 {
  width: clamp(12px, 3vw, 15px);
  height: clamp(12px, 3vw, 15px);
}
._autoCloseText_1sdvm_272 {
  animation: _textFade_1sdvm_1 1.5s ease-in-out infinite;
  white-space: nowrap;
}
._closeBtns_1sdvm_277 {
  position: absolute;
  bottom: -37px;
  left: 50%;
  transform: translate(-50%);
  width: clamp(30px, 7.5vw, 36px);
  height: clamp(30px, 7.5vw, 36px);
  background: #0000004d;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 100;
}
._closeBtns_1sdvm_277:hover {
  background: #00000080;
  transform: translate(-50%) scale(1.1);
}
._closeBtns_1sdvm_277:active {
  transform: translate(-50%) scale(0.95);
}
._closeBtns_1sdvm_277 svg {
  width: clamp(14px, 3.5vw, 18px);
  height: clamp(14px, 3.5vw, 18px);
}
@keyframes _fadeInOverlay_1sdvm_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _textFade_1sdvm_1 {
  0%,
  to {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 480px) {
  ._modalOverlay_1sdvm_1 {
    padding: 15px 8px;
  }
}
@media (max-width: 400px) {
  ._losingTitle_1sdvm_39 {
    font-size: 24px;
  }
  ._modalOverlay_1sdvm_1 {
    padding: 12px 6px;
  }
  ._losingModal_1sdvm_18 {
    width: 95%;
    max-width: 320px;
    min-height: 430px;
    padding: 55px 20px 75px;
  }
  ._lotteryResults_1sdvm_49 {
    margin-top: 12px;
  }
  ._resultsHeader_1sdvm_56 {
    gap: 0.4rem !important;
  }
  ._resultsValues_1sdvm_73 {
    gap: 6px;
  }
  ._diceMini_1sdvm_80 {
    padding: 5px;
  }
  ._bonusSection_1sdvm_190 {
    margin: 8px 0 12px;
  }
  ._bonusCards_1sdvm_195 {
    top: 2.5rem;
  }
  ._autoClose_1sdvm_244 {
    bottom: 18px;
    gap: 6px;
  }
  ._closeBtns_1sdvm_277 {
    bottom: -35px;
  }
}
@media (max-width: 360px) {
  ._losingTitle_1sdvm_39 {
    font-size: 22px;
  }
  ._modalOverlay_1sdvm_1 {
    padding: 10px 5px;
  }
  ._losingModal_1sdvm_18 {
    width: 96%;
    max-width: 280px;
    min-height: 400px;
    padding: 50px 18px 70px;
  }
  ._lotteryResults_1sdvm_49 {
    margin-top: 10px;
  }
  ._resultsHeader_1sdvm_56 {
    gap: 0.3rem !important;
  }
  ._resultsValues_1sdvm_73 {
    gap: 5px;
  }
  ._diceMini_1sdvm_80 {
    padding: 4px;
  }
  ._diceFaceMini_1sdvm_91 {
    width: 26px;
    height: 26px;
  }
  ._bonusSection_1sdvm_190 {
    margin: 6px 0 10px;
  }
  ._bonusCards_1sdvm_195 {
    top: 2.6rem;
  }
  ._autoClose_1sdvm_244 {
    bottom: 16px;
    gap: 5px;
  }
  ._closeBtns_1sdvm_277 {
    bottom: -34px;
  }
}
@media (max-width: 320px) {
  ._losingTitle_1sdvm_39 {
    font-size: 20px;
  }
  ._modalOverlay_1sdvm_1 {
    padding: 8px 4px;
  }
  ._losingModal_1sdvm_18 {
    width: 98%;
    max-width: 260px;
    min-height: 370px;
    padding: 45px 15px 65px;
  }
  ._lotteryResults_1sdvm_49 {
    margin-top: 8px;
  }
  ._resultsHeader_1sdvm_56 {
    gap: 0.25rem !important;
  }
  ._resultsValues_1sdvm_73 {
    gap: 4px;
  }
  ._diceMini_1sdvm_80 {
    padding: 3px;
  }
  ._diceFaceMini_1sdvm_91 {
    width: 24px;
    height: 24px;
  }
  ._diceDot_1sdvm_102 {
    width: 4px;
    height: 4px;
  }
  ._diceDot_1sdvm_102._topLeft_1sdvm_114 {
    top: 3px;
    left: 3px;
  }
  ._diceDot_1sdvm_102._topRight_1sdvm_118 {
    top: 3px;
    right: 3px;
  }
  ._diceDot_1sdvm_102._middleLeft_1sdvm_122 {
    left: 3px;
  }
  ._diceDot_1sdvm_102._middleRight_1sdvm_127 {
    right: 3px;
  }
  ._diceDot_1sdvm_102._bottomLeft_1sdvm_132 {
    bottom: 3px;
    left: 3px;
  }
  ._diceDot_1sdvm_102._bottomRight_1sdvm_136 {
    bottom: 3px;
    right: 3px;
  }
  ._resultBig_1sdvm_154,
  ._resultSmall_1sdvm_158,
  ._resultTriple_1sdvm_165 {
    padding: 3px 8px;
  }
  ._bonusSection_1sdvm_190 {
    margin: 5px 0 8px;
  }
  ._bonusCards_1sdvm_195 {
    top: 2rem;
  }
  ._autoClose_1sdvm_244 {
    bottom: 14px;
    gap: 4px;
  }
  ._closeBtns_1sdvm_277 {
    bottom: -32px;
  }
}
._modalOverlay_sqd3w_1 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000b3 !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
  z-index: 10000;
  animation: _fadeInOverlay_sqd3w_1 0.4s ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 10px;
  box-sizing: border-box;
}
._confettiContainer_sqd3w_18 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  display: flex;
  justify-content: center;
}
._confetti_sqd3w_18 {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  animation: _confettiFall_sqd3w_1 linear infinite;
  opacity: 0.9;
}
._confetti_sqd3w_18._confetti0_sqd3w_38 {
  background: gold;
  transform: rotate(45deg);
  width: clamp(10px, 2.5vw, 12px);
  height: clamp(10px, 2.5vw, 12px);
}
._confetti_sqd3w_18._confetti1_sqd3w_44 {
  background: #ff69b4;
  border-radius: 50%;
  width: clamp(7px, 2vw, 8px);
  height: clamp(7px, 2vw, 8px);
}
._confetti_sqd3w_18._confetti2_sqd3w_50 {
  background: #00ff7f;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: clamp(9px, 2.2vw, 10px);
  height: clamp(9px, 2.2vw, 10px);
}
._confetti_sqd3w_18._confetti3_sqd3w_56 {
  background: #1e90ff;
  transform: rotate(45deg);
  width: clamp(12px, 3vw, 14px);
  height: clamp(12px, 3vw, 14px);
}
._confetti_sqd3w_18._confetti4_sqd3w_62 {
  background: #ff4500;
  border-radius: 50%;
  width: clamp(8px, 2vw, 9px);
  height: clamp(8px, 2vw, 9px);
}
._confetti_sqd3w_18._confetti5_sqd3w_68 {
  background: gold;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: clamp(10px, 2.3vw, 11px);
  height: clamp(10px, 2.3vw, 11px);
}
._winningModal_sqd3w_75 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 80%;
  max-width: 360px;
  min-height: 450px;
  height: auto;
  background-image: url(/_build/assets/winningbackground-DV-qIlml.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 60px 24px 80px;
  text-align: center;
  z-index: 10001;
  box-sizing: border-box;
  margin: auto;
}
._congratsTitle_sqd3w_96 {
  font-size: clamp(22px, 5.5vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 15px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.3);
  animation: _titleGlow_sqd3w_1 2.5s ease-in-out infinite;
  letter-spacing: 0.5px;
  position: relative;
  top: 1.5rem;
}
._lotteryResults_sqd3w_108 {
  margin-top: 15px;
  width: 90%;
  position: relative;
  top: 1.5rem;
}
._resultsHeader_sqd3w_115 {
  display: flex;
  width: 100%;
  align-items: center;
  background: transparent !important;
  border: none;
  padding: 0;
  gap: 0.5rem !important;
  flex-wrap: wrap;
}
._resultsLabel_sqd3w_126 {
  color: #fffffff2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._resultsValues_sqd3w_132 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
._diceMini_sqd3w_139 {
  background: var(--bg-dice, rgba(255, 255, 255, 0.2));
  border-radius: 8px;
  padding: clamp(4px, 1.5vw, 6px);
  box-shadow: 0 2px 8px #0000004d;
  transition: transform 0.2s ease;
}
._diceMini_sqd3w_139:hover {
  transform: scale(1.05);
}
._diceFaceMini_sqd3w_150 {
  width: clamp(28px, 7vw, 32px);
  height: clamp(28px, 7vw, 32px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px;
}
._diceDot_sqd3w_161 {
  width: clamp(5px, 1.5vw, 6px);
  height: clamp(5px, 1.5vw, 6px);
  background: var(--color-white, #fff);
  border-radius: 50%;
  position: absolute;
}
._diceDot_sqd3w_161._center_sqd3w_168 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
._diceDot_sqd3w_161._topLeft_sqd3w_173 {
  top: 4px;
  left: 4px;
}
._diceDot_sqd3w_161._topRight_sqd3w_177 {
  top: 4px;
  right: 4px;
}
._diceDot_sqd3w_161._middleLeft_sqd3w_181 {
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}
._diceDot_sqd3w_161._middleRight_sqd3w_186 {
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}
._diceDot_sqd3w_161._bottomLeft_sqd3w_191 {
  bottom: 4px;
  left: 4px;
}
._diceDot_sqd3w_161._bottomRight_sqd3w_195 {
  bottom: 4px;
  right: 4px;
}
._resultNumber_sqd3w_200 {
  color: #fff;
  width: clamp(32px, 8vw, 36px);
  height: clamp(32px, 8vw, 36px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(14px, 3.5vw, 16px);
  border: none;
}
._resultNumber_sqd3w_200._resultBig_sqd3w_212 {
  background: #dc3545;
  box-shadow: 0 2px 8px #28a74566;
}
._resultNumber_sqd3w_200._resultSmall_sqd3w_216 {
  background: #dc3545;
  box-shadow: 0 2px 8px #dc354566;
}
._resultBig_sqd3w_212,
._resultSmall_sqd3w_216,
._resultTriple_sqd3w_223 {
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: clamp(11px, 2.5vw, 13px);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
._resultBig_sqd3w_212 {
  background: #28a745 !important;
  box-shadow: 0 2px 8px #28a74566;
}
._resultSmall_sqd3w_216 {
  background: #dc3545 !important;
  box-shadow: 0 2px 8px #dc354566;
}
._resultTriple_sqd3w_223 {
  background: #8b5cf6 !important;
  box-shadow: 0 2px 8px #8b5cf666;
}
._bonusSection_sqd3w_248 {
  position: relative;
  width: 100%;
}
._bonusCards_sqd3w_253 {
  position: relative;
  top: 1.5rem;
}
._bonusAmount_sqd3w_258 {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  color: #dc3545;
  margin: 10px 0 5px;
  text-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
  letter-spacing: 1px;
}
._bonusDetails_sqd3w_267 {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #666;
  line-height: 1.6;
}
._periodLine_sqd3w_273 {
  margin-bottom: 2px;
  font-weight: 800;
  color: #555;
  font-size: clamp(11px, 2.8vw, 14px);
}
._periodNumber_sqd3w_280 {
  font-family: Courier New, monospace;
  color: #888;
  letter-spacing: 0.5px;
  font-size: clamp(10px, 2.5vw, 11px);
  font-weight: 600;
}
._multipleWins_sqd3w_288 {
  margin: 0 0 16px;
}
._winsCount_sqd3w_292 {
  display: inline-block;
  background: #ffffff26;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: clamp(11px, 2.5vw, 13px);
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
._autoClose_sqd3w_304 {
  position: absolute;
  bottom: 20px;
  left: 30%;
  transform: translate(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fffffff2;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 500;
}
._checkmarkCircle_sqd3w_318 {
  width: clamp(24px, 6vw, 30px);
  height: clamp(24px, 6vw, 30px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}
._tickIcon_sqd3w_328 {
  width: clamp(12px, 3vw, 15px);
  height: clamp(12px, 3vw, 15px);
}
._autoCloseText_sqd3w_333 {
  animation: _textFade_sqd3w_1 1.5s ease-in-out infinite;
  white-space: nowrap;
}
._closeBtns_sqd3w_338 {
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translate(-50%);
  width: clamp(30px, 7.5vw, 36px);
  height: clamp(30px, 7.5vw, 36px);
  background: #0000004d;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 100;
}
._closeBtns_sqd3w_338:hover {
  background: #00000080;
  transform: translate(-50%) scale(1.1);
}
._closeBtns_sqd3w_338:active {
  transform: translate(-50%) scale(0.95);
}
._closeBtns_sqd3w_338 svg {
  width: clamp(14px, 3.5vw, 18px);
  height: clamp(14px, 3.5vw, 18px);
}
@keyframes _fadeInOverlay_sqd3w_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _confettiFall_sqd3w_1 {
  0% {
    transform: translateY(-20px) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}
@keyframes _titleGlow_sqd3w_1 {
  0%,
  to {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 35px rgba(255, 255, 255, 0.5);
  }
}
@keyframes _textFade_sqd3w_1 {
  0%,
  to {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 480px) {
  ._modalOverlay_sqd3w_1 {
    padding: 15px 8px;
  }
}
@media (max-width: 400px) {
  ._congratsTitle_sqd3w_96 {
    font-size: 24px;
  }
  ._modalOverlay_sqd3w_1 {
    padding: 12px 6px;
  }
  ._winningModal_sqd3w_75 {
    width: 95%;
    max-width: 320px;
    min-height: 430px;
    padding: 55px 20px 75px;
  }
  ._lotteryResults_sqd3w_108 {
    margin-top: 12px;
  }
  ._resultsHeader_sqd3w_115 {
    gap: 0.4rem !important;
  }
  ._resultsValues_sqd3w_132 {
    gap: 6px;
  }
  ._diceMini_sqd3w_139 {
    padding: 5px;
  }
  ._bonusSection_sqd3w_248 {
    margin: 8px 0 12px;
  }
  ._bonusCards_sqd3w_253 {
    top: 2rem;
  }
  ._autoClose_sqd3w_304 {
    bottom: 18px;
    gap: 6px;
  }
  ._closeBtns_sqd3w_338 {
    bottom: -42px;
  }
}
@media (max-width: 360px) {
  ._congratsTitle_sqd3w_96 {
    font-size: 22px;
  }
  ._modalOverlay_sqd3w_1 {
    padding: 10px 5px;
  }
  ._winningModal_sqd3w_75 {
    width: 96%;
    max-width: 280px;
    min-height: 400px;
    padding: 50px 18px 70px;
  }
  ._lotteryResults_sqd3w_108 {
    margin-top: 10px;
  }
  ._resultsHeader_sqd3w_115 {
    gap: 0.3rem !important;
  }
  ._resultsValues_sqd3w_132 {
    gap: 5px;
  }
  ._diceMini_sqd3w_139 {
    padding: 4px;
  }
  ._diceFaceMini_sqd3w_150 {
    width: 26px;
    height: 26px;
  }
  ._bonusSection_sqd3w_248 {
    margin: 6px 0 10px;
  }
  ._bonusCards_sqd3w_253 {
    top: 2rem;
  }
  ._autoClose_sqd3w_304 {
    bottom: 16px;
    gap: 5px;
  }
  ._closeBtns_sqd3w_338 {
    bottom: -38px;
  }
}
@media (max-width: 320px) {
  ._congratsTitle_sqd3w_96 {
    font-size: 20px;
  }
  ._modalOverlay_sqd3w_1 {
    padding: 8px 4px;
  }
  ._winningModal_sqd3w_75 {
    width: 98%;
    max-width: 260px;
    min-height: 370px;
    padding: 45px 15px 65px;
  }
  ._lotteryResults_sqd3w_108 {
    margin-top: 8px;
  }
  ._resultsHeader_sqd3w_115 {
    gap: 0.25rem !important;
  }
  ._resultsValues_sqd3w_132 {
    gap: 4px;
  }
  ._diceMini_sqd3w_139 {
    padding: 3px;
  }
  ._diceFaceMini_sqd3w_150 {
    width: 24px;
    height: 24px;
  }
  ._diceDot_sqd3w_161 {
    width: 4px;
    height: 4px;
  }
  ._diceDot_sqd3w_161._topLeft_sqd3w_173 {
    top: 3px;
    left: 3px;
  }
  ._diceDot_sqd3w_161._topRight_sqd3w_177 {
    top: 3px;
    right: 3px;
  }
  ._diceDot_sqd3w_161._middleLeft_sqd3w_181 {
    left: 3px;
  }
  ._diceDot_sqd3w_161._middleRight_sqd3w_186 {
    right: 3px;
  }
  ._diceDot_sqd3w_161._bottomLeft_sqd3w_191 {
    bottom: 3px;
    left: 3px;
  }
  ._diceDot_sqd3w_161._bottomRight_sqd3w_195 {
    bottom: 3px;
    right: 3px;
  }
  ._resultBig_sqd3w_212,
  ._resultSmall_sqd3w_216,
  ._resultTriple_sqd3w_223 {
    padding: 3px 8px;
  }
  ._bonusSection_sqd3w_248 {
    margin: 5px 0 8px;
  }
  ._bonusCards_sqd3w_253 {
    top: 1.5rem;
  }
  ._autoClose_sqd3w_304 {
    bottom: 14px;
    gap: 4px;
  }
  ._closeBtns_sqd3w_338 {
    bottom: -35px;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bg-dark: #05012b;
  --bg-medium: #011341;
  --bg-light: #022c68;
  --bg-option: #002366;
  --bg-wallet: #001c54;
  --bg-badge: #dd9138;
  --bg-page: #0a0a2e;
  --bg-banner: #000c33;
  --bg-banner-border: #224ba2;
  --bg-time: #001c54;
  --norm_green-color: #17b15e;
  --norm_secondary-color: #dd9138;
  --norm_red-color: #d23838;
  --button_dis_color: #3d4863;
  --sheet_nva_color: #2c5eca;
  --color-primary: #00ecbe;
  --color-white: #ffffff;
  --color-secondary: #92a8e3;
  --color-tertiary: #e3efff;
  --color-accent: #001845;
  --color-error: #ef4444;
  --color-text-muted: #8b9cb6;
  --color-text-light: #6f80a4;
  --color-discount: #ff3366;
  --color-gold: #ffd700;
  --color-dark-text: #0a0e27;
  --gradient-start: #7afec3;
  --gradient-end: #02afb6;
  --gradient-button: linear-gradient(135deg, #00ffcc 0%, #00d4aa 100%);
  --gradient-banner: linear-gradient(180deg, #001c54 0%, #000c33 100%);
  --bg_HomeModule_Stroke: #224ba2;
  --card-gradient: linear-gradient(
    135deg,
    #b24ec8 0%,
    #7b2cbf 50%,
    #4a0e4e 100%
  );
  --header: #7629b3;
  --bets-congrats: linear-gradient(135deg, #22c55e, #16a34a);
  --bets-header-active-tab: rgba(107, 34, 155, 0.1);
  --tab-highlight: #6b229b;
  --loss-message: #d70a03;
  --button-color: linear-gradient(135deg, #9154c2 0%, #7629b3 100%);
  --backgroud-loss-message: rgb(215, 10, 3);
  --card-gradient-2: linear-gradient(135deg, #9154c2 0%, #7629b3 100%);
  --start-card-gradient: #b24ec8;
  --button-gradient: linear-gradient(135deg, #7629b3, #b946ff);
  --box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --loading-border-color: #8b5cf6;
  --result-red: #f44336;
  --result-orange: #ff9800;
  --result-blue: #2196f3;
  --result-red-gradient: linear-gradient(135deg, #ef4444, #dc2626);
  --result-orange-gradient: linear-gradient(135deg, #f97316, #ea580c);
  --result-blue-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
  --timer-bg: #1f2937;
  --timer-warning: linear-gradient(135deg, #f59e0b, #d97706);
  --timer-danger: linear-gradient(135deg, #ef4444, #dc2626);
  --bg-dice: linear-gradient(145deg, #e53935 0%, #c62828 100%);
}
html {
  overflow-y: scroll;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  background-color: #9195a3;
  color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 100dvh;
  overflow-x: hidden;
}
#app {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #0a0e27, #1a1f3a);
}
button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
}
a {
  text-decoration: none;
  color: inherit;
}
::-webkit-scrollbar {
  display: none;
}
.support-container {
  position: fixed;
  bottom: 90px;
  right: calc(50% - 230px);
  cursor: pointer;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.support-img {
  width: 30px;
  height: 30px;
}
.support-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #ffffff14;
  box-shadow: 0 10px 25px #00000040;
  cursor: pointer;
}
.support-item.telegram-item {
  background: #ffffff14;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px #0003;
}
.telegram-icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 4px rgba(0, 132, 248, 0.6));
}
.telegram-label {
  font-size: 0.9rem;
  font-weight: 600;
}
.telegram-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #fff3;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.support-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 0;
}
@media (max-width: 500px) {
  .support-container {
    right: 3%;
  }
}
._txnUi_17jr5_1 {
  min-height: 100vh;
  background: var(--bg-dark);
  color: var(--color-white);
  max-width: 500px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
._txnUi__headerContainer_17jr5_9 {
  background: var(--bg-dark);
  padding-bottom: 0;
}
._txnUi__header_17jr5_9 {
  padding: 16px 20px;
}
._txnUi__wallet_17jr5_16 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._txnUi__walletLabel_17jr5_21 {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 400;
}
._txnUi__walletAmount_17jr5_26 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.5px;
}
._txnUi__tabs_17jr5_32 {
  background: var(--bg-dark);
  padding: 12px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
._txnUi__tabs_17jr5_32::-webkit-scrollbar {
  display: none;
}
._txnUi__tabsWrapper_17jr5_41 {
  display: flex;
  gap: 8px;
  padding: 0 20px;
  min-width: min-content;
}
._txnUi__tabBtn_17jr5_47 {
  padding: 8px 16px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._txnUi__tabBtn--active_17jr5_58 {
  background: var(--color-primary);
  color: var(--bg-dark);
}
._txnUi__tabBtn--inactive_17jr5_62 {
  background: var(--bg-medium);
  color: var(--color-secondary);
}
._txnUi__tabBtn--inactive_17jr5_62:hover {
  background: var(--bg-light);
}
._txnUi__dateSelector_17jr5_69 {
  background: var(--bg-dark);
  padding: 0 20px 16px;
}
._txnUi__dateSelectorContent_17jr5_73 {
  display: flex;
  align-items: center;
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 12px 16px;
  gap: 12px;
}
._txnUi__dateSelectorIcon_17jr5_81 {
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
._txnUi__dateSelectorBtn_17jr5_88 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
._txnUi__dateSelectorBtn_17jr5_88 span {
  color: var(--color-white);
}
._txnUi__dateSelectorDropdown_17jr5_104 {
  color: var(--color-secondary);
  display: flex;
  align-items: center;
}
._txnUi__list_17jr5_109 {
  height: max-content;
  padding: 16px 20px 24px;
}
._txnUi__cardsWrapper_17jr5_113 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._txnUi__card_17jr5_113 {
  background: var(--bg-medium);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
._txnUi__cardContent_17jr5_124 {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
._txnUi__cardInfo_17jr5_132 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._txnUi__cardDate_17jr5_138 {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 400;
}
._txnUi__cardId_17jr5_143 {
  font-size: 12px;
  color: var(--color-text-light);
}
._txnUi__cardAmount_17jr5_147 {
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
._txnUi__cardAmount--credit_17jr5_152 {
  color: var(--color-primary);
}
._txnUi__cardAmount--debit_17jr5_155 {
  color: var(--result-red);
}
._txnUi__cardDetails_17jr5_158 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._txnUi__detailRow_17jr5_164 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
._txnUi__detailKey_17jr5_170 {
  color: var(--color-text-muted);
  font-weight: 400;
  text-transform: capitalize;
}
._txnUi__detailValue_17jr5_175 {
  color: var(--color-white);
  font-weight: 500;
  text-align: right;
}
._txnUi__detailValue--credit_17jr5_180 {
  color: var(--color-primary);
}
._txnUi__detailValue--debit_17jr5_183 {
  color: var(--result-red);
}
._txnUi__noData_17jr5_186 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
._txnUi__noDataIcon_17jr5_194 {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
._txnUi__noDataTitle_17jr5_199 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}
._txnUi__noDataSubtitle_17jr5_205 {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
._loading_17jr5_211 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--color-secondary);
}
._pagination_17jr5_219 {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
._pagination_17jr5_219 button {
  background: var(--bg-medium);
  color: var(--color-white);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
._pagination_17jr5_219 button:hover:not(:disabled) {
  background: var(--bg-light);
}
._pagination_17jr5_219 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._pagination_17jr5_219 button._active_17jr5_244 {
  background: var(--tab-highlight);
  color: var(--color-white);
}
.modern-calendar-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .modern-calendar-overlay {
    align-items: flex-end;
  }
}
.modern-calendar-modal {
  width: 100%;
  max-width: 420px;
  max-height: 420px;
  background: var(--bg-medium);
  border-radius: 20px;
  box-shadow: 0 20px 60px #00000026;
  animation: slideIn 0.3s ease-out;
  overflow: hidden;
  margin: 20px;
}
@media (max-width: 768px) {
  .modern-calendar-modal {
    width: 100%;
    max-width: none;
    max-height: 500px;
    border-radius: 24px 24px 0 0;
    margin: 0;
    animation: slideUp 0.3s ease-out;
  }
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bg-dark);
  position: relative;
}
@media (max-width: 768px) {
  .calendar-header {
    padding: 20px 24px 16px;
  }
}
.calendar-header .calendar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0;
}
@media (max-width: 768px) {
  .calendar-header .calendar-title {
    font-size: 20px;
  }
}
.calendar-header .close-button {
  background: var(--bg-medium);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .calendar-header .close-button {
    width: 40px;
    height: 40px;
  }
}
.calendar-header .close-button:hover {
  background: #e2e8f0;
  color: #475569;
  transform: scale(1.05);
}
.calendar-header .close-button:active {
  transform: scale(0.95);
}
.calendar-header .header-spacer {
  width: 36px;
  height: 36px;
  color: var(--color-white);
}
@media (max-width: 768px) {
  .calendar-header .header-spacer {
    width: 40px;
    height: 40px;
  }
}
.modern-calendar-content {
  padding: 0 20px 20px;
  overflow-y: auto;
}
@media (max-width: 768px) {
  .modern-calendar-content {
    padding: 0 24px 24px;
  }
}
.modern-calendar-content .calendar-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
}
@media (max-width: 768px) {
  .modern-calendar-content .calendar-navigation {
    padding: 16px 0;
  }
}
.modern-calendar-content .calendar-navigation .nav-button {
  background: var(--bg-light);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .modern-calendar-content .calendar-navigation .nav-button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}
.modern-calendar-content .calendar-navigation .nav-button:active {
  transform: scale(0.95);
}
.modern-calendar-content .calendar-navigation .nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.modern-calendar-content .calendar-navigation .date-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modern-calendar-content .calendar-navigation .date-display .month-year-button {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  color: var(--bg-dark);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px #6366f14d;
}
@media (max-width: 768px) {
  .modern-calendar-content
    .calendar-navigation
    .date-display
    .month-year-button {
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    box-shadow: 0 4px 12px #6366f14d;
  }
}
.modern-calendar-content
  .calendar-navigation
  .date-display
  .month-year-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px #6366f166;
}
.modern-calendar-content
  .calendar-navigation
  .date-display
  .month-year-button:active {
  transform: translateY(0);
}
.modern-calendar-content .weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  text-align: center;
}
@media (max-width: 768px) {
  .modern-calendar-content .weekdays {
    font-size: 13px;
    gap: 6px;
    margin: 10px 0;
  }
}
.modern-calendar-content .weekdays div {
  padding: 4px;
}
.modern-calendar-content .days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
@media (max-width: 768px) {
  .modern-calendar-content .days-grid {
    gap: 6px;
  }
}
.modern-calendar-content .day-button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-wallet);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .modern-calendar-content .day-button {
    width: 40px;
    height: 40px;
    font-size: 15px;
    border-radius: 10px;
  }
}
.modern-calendar-content .day-button.filler {
  color: var(--color-white);
  background: var(--bg-wallet);
}
.modern-calendar-content .day-button.disabled {
  color: var(--color-white);
  background: var(--color-light);
  cursor: not-allowed;
}
.modern-calendar-content .day-button.today {
  border-color: var(--tab-highlight, #6366f1);
  font-weight: 600;
}
.modern-calendar-content .day-button.start,
.modern-calendar-content .day-button.end {
  background: var(--color-primary);
  font-weight: 600;
  color: var(--bg-dark);
}
.modern-calendar-content .day-button.in-range {
  background: var(--color-secondary);
  color: var(--bg-dark);
}
.modern-calendar-content .day-button.start.in-range,
.modern-calendar-content .day-button.end.in-range {
  background: var(--color-primary);
  color: var(--bg-dark);
}
.modern-calendar-content .months-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 768px) {
  .modern-calendar-content .months-grid {
    gap: 14px;
  }
}
.modern-calendar-content .months-grid .month-item {
  padding: 14px 8px;
  border-radius: 10px;
  background: var(--bg-wallet);
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
@media (max-width: 768px) {
  .modern-calendar-content .months-grid .month-item {
    padding: 16px 12px;
    border-radius: 12px;
    font-size: 15px;
  }
}
.modern-calendar-content .months-grid .month-item:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--bg-dark);
}
.modern-calendar-content .months-grid .month-item.selected {
  background: var(--color-primary);
  color: var(--bg-dark);
  font-weight: 600;
}
.modern-calendar-content .months-grid .month-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modern-calendar-content .months-grid .month-item.disabled:hover {
  transform: none;
}
.modern-calendar-content .years-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 768px) {
  .modern-calendar-content .years-grid {
    gap: 14px;
    margin-bottom: 24px;
    max-height: 180px;
  }
}
.modern-calendar-content .years-grid::-webkit-scrollbar {
  width: 4px;
}
.modern-calendar-content .years-grid::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 2px;
}
.modern-calendar-content .years-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}
.modern-calendar-content .years-grid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.modern-calendar-content .years-grid .year-item {
  padding: 14px 8px;
  border-radius: 10px;
  background: var(--bg-wallet);
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
@media (max-width: 768px) {
  .modern-calendar-content .years-grid .year-item {
    padding: 16px 12px;
    border-radius: 12px;
    font-size: 15px;
  }
}
.modern-calendar-content .years-grid .year-item:hover {
  background: var(--color-primary);
  color: var(--bg-dark);
}
.modern-calendar-content .years-grid .year-item.selected {
  background: var(--color-primary);
  color: var(--bg-dark);
  font-weight: 600;
  box-shadow: 0 3px 10px #6366f14d;
}
.modern-calendar-content .years-grid .year-item.selected:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px #6366f166;
}
.modern-calendar-content .year-range-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-wallet);
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
@media (max-width: 768px) {
  .modern-calendar-content .year-range-button {
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 15px;
  }
}
.modern-calendar-content .year-range-button svg {
  width: 20px;
  height: 20px;
}
.modern-calendar-content .calendar-actions {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}
@media (max-width: 768px) {
  .modern-calendar-content .calendar-actions {
    gap: 14px;
    padding-top: 20px;
  }
}
.modern-calendar-content .calendar-actions .cancel-button {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .modern-calendar-content .calendar-actions .cancel-button {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
  }
}
.modern-calendar-content .calendar-actions .cancel-button:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
.modern-calendar-content .calendar-actions .cancel-button:active {
  transform: scale(0.98);
}
.modern-calendar-content .calendar-actions .confirm-button {
  flex: 2;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px #10b9814d;
}
@media (max-width: 768px) {
  .modern-calendar-content .calendar-actions .confirm-button {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    box-shadow: 0 4px 12px #10b9814d;
  }
}
.modern-calendar-content
  .calendar-actions
  .confirm-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px #10b98166;
}
.modern-calendar-content .calendar-actions .confirm-button:active {
  transform: translateY(0);
}
.modern-calendar-content .calendar-actions .confirm-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.modern-calendar-content .calendar-actions .button-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 480px) {
  .modern-calendar-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
  .modern-calendar-content {
    padding: 0 20px 20px;
  }
}
@media (max-width: 768px) {
  .close-button {
    min-width: 44px;
    min-height: 44px;
  }
  .month-item,
  .year-item,
  .day-button {
    min-height: 44px;
  }
}
.pagination-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding-bottom: 30px;
}
.pagination-container.small .pagination-btn {
  min-width: 28px;
  height: 28px;
  font-size: 12px;
}
.pagination-container.small .pagination-info {
  font-size: 12px;
}
.pagination-container.medium .pagination-btn {
  min-width: 36px;
  height: 36px;
  font-size: 14px;
}
.pagination-container.medium .pagination-info {
  font-size: 14px;
}
.pagination-container.large .pagination-btn {
  min-width: 44px;
  height: 44px;
  font-size: 16px;
}
.pagination-container.large .pagination-info {
  font-size: 16px;
}
.pagination-info {
  color: var(--text-secondary, #666);
  font-weight: 500;
  text-align: center;
}
.pagination-text {
  color: inherit;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination-btn {
  background: var(--bg-wallet);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  user-select: none;
}
.pagination-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-disabled, #f9f9f9);
  color: var(--text-disabled, #999);
}
.pagination-btn.disabled svg {
  opacity: 0.5;
}
.pagination-btn.pagination-btn-page.active {
  background: var(--color-primary);
  color: var(--bg-dark);
  border-color: var(--button-color);
  box-shadow: 0 2px 8px #007bff4d;
}
.pagination-btn.pagination-btn-nav {
  background: var(--bg-wallet);
  color: var(--color-white);
}
.pagination-btn.pagination-btn-nav svg {
  color: var(--color-white);
  transition: transform 0.2s ease;
}
.pagination-ellipsis {
  color: var(--text-secondary, #666);
  font-weight: 500;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  user-select: none;
}
@media (max-width: 640px) {
  .pagination-container {
    gap: 8px;
  }
  .pagination-container .pagination-controls,
  .pagination-container .pagination-pages {
    gap: 2px;
  }
  .pagination-container.medium .pagination-btn,
  .pagination-container.large .pagination-btn {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .pagination-container .pagination-info {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .pagination-container .pagination-btn {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .pagination-container .pagination-info {
    font-size: 11px;
  }
}
@media (prefers-contrast: high) {
  .pagination-btn {
    border-width: 2px;
  }
  .pagination-btn.active {
    border-width: 3px;
  }
  .pagination-btn:focus-visible {
    outline-width: 3px;
  }
}
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-secondary);
  padding: 24px;
  text-align: center;
}
.loading-state .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--loading-border-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}
.loading-state p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 24px;
  text-align: center;
}
.no-data .no-data-container {
  text-align: center;
}
.no-data .no-data-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.no-data .no-data-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .loading-state,
  .no-data {
    min-height: 150px;
    padding: 16px;
  }
  .loading-state .spinner,
  .no-data .spinner {
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
  }
  .loading-state .no-data-icon,
  .no-data .no-data-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }
}
@media (max-width: 480px) {
  .loading-state,
  .no-data {
    min-height: 120px;
    padding: 12px;
  }
  .loading-state .spinner,
  .no-data .spinner {
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
  }
  .loading-state .no-data-icon,
  .no-data .no-data-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }
}
.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-page);
  min-height: calc(100vh - 85px);
  overflow-y: visible;
}
.lottery-result-container {
  background: var(--bg-dark);
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}
.header-tabs {
  display: flex;
  background: var(--bg-medium);
  border-bottom: 1px solid var(--bg-light);
  padding: 0;
}
.tab-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  color: var(--color-secondary);
}
.tab-btn.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
}
.games-tabs {
  display: flex;
  background: var(--bg-medium);
  padding: 8px 16px;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--bg-light);
}
.games-tabs::-webkit-scrollbar {
  display: none;
}
.game-tab-btn {
  padding: 6px 12px;
  border: 1px solid var(--bg-light);
  background: var(--bg-option);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  color: var(--color-secondary);
}
.game-tab-btn.active {
  background: var(--gradient-button);
  color: var(--bg-dark);
  border-color: var(--color-primary);
}
.color-result-section {
  background: var(--bg-dark);
}
.result-my-bets {
  display: flex;
  padding: 20px 16px;
  gap: 40px;
  border-bottom: 1px solid var(--bg-light);
}
.result-section,
.my-bets-section {
  text-align: center;
}
.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--color-tertiary);
}
.bet-circles {
  display: flex;
  gap: 8px;
}
.results-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
}
.results-circle.red {
  background: #dc3545;
}
.results-circle.violet {
  background: #9c27b0;
}
.results-circle.green {
  background: #4caf50;
}
.betting-time {
  padding: 16px;
  border-bottom: 1px solid var(--bg-light);
}
.time-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.time-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-tertiary);
}
.period-id {
  font-size: 14px;
  color: var(--color-secondary);
}
.betting-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--color-secondary);
}
.time-value {
  font-weight: 500;
  color: var(--color-tertiary);
}
.more-btn {
  background: none;
  border: none;
  color: var(--color-secondary);
  cursor: pointer;
  font-size: 13px;
}
.color-results-table {
  background: var(--bg-dark);
}
.table-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 12px 16px;
  background: var(--bg-medium);
  border-bottom: 1px solid var(--bg-light);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
  gap: 0.5rem;
}
.table-body {
  max-height: max-content;
}
.table-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-light);
  align-items: center;
  gap: 0.5rem;
}
.period-cell {
  font-size: 13px;
  color: var(--color-secondary);
}
.number-circles {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.number-circle-result {
  width: 22px;
  height: 22px;
  border: 1px solid var(--bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: var(--bg-option);
  color: var(--color-secondary);
}
.number-circle-result.active {
  color: var(--color-white);
  border: 1px solid transparent;
}
.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--bg-light);
}
.filter-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--color-tertiary);
}
.filter-btn {
  background: var(--bg-option);
  border: 1px solid var(--bg-light);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-secondary);
}
.time-filters {
  display: flex;
  background: var(--bg-medium);
  padding: 16px;
  gap: 16px;
}
.time-filter-btn {
  flex: 1;
  padding: 12px;
  border: none;
  background: var(--bg-option);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  color: var(--color-secondary);
}
.time-filter-btn.active {
  background: var(--gradient-button);
  color: var(--bg-dark);
}
.time-filter-btn.active:after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
}
.time-unit {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.8;
}
.draw-date {
  padding: 12px 16px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--bg-light);
  font-size: 14px;
  color: var(--color-secondary);
}
.date-value {
  font-weight: 600;
  margin-left: 8px;
  color: var(--color-tertiary);
}
.results-section {
  background: var(--bg-dark);
  padding-bottom: 1rem;
}
.results-header {
  padding: 12px 16px;
  background: var(--bg-medium);
  border-bottom: 1px solid var(--bg-light);
}
.header-row {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
}
.header-row-dice {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
}
.header-results {
  display: flex;
  justify-content: space-around;
}
.result-label {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
}
.result-label.a {
  background: #f44336;
}
.result-label.b {
  background: #ff9800;
}
.result-label.c {
  background: #2196f3;
}
.results-list {
  max-height: max-content;
  overflow-y: auto;
}
.result-row {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-light);
  font-size: 14px;
}
.result-row:hover {
  background: var(--bg-medium);
}
.dice-result-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-light);
  font-size: 14px;
}
.dice-result-row:hover {
  background: var(--bg-medium);
}
.dice-issue {
  font-size: 13px;
  color: var(--color-secondary);
}
.dice-display {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.dice-faces {
  width: 28px;
  height: 28px;
  background: var(--bg-dice);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 4px;
}
.dice-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dice-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}
.dice-dot.active {
  background: var(--color-white);
}
.dice-sum {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-tertiary);
}
.dice-value {
  text-align: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.dice-value.Big {
  background: #00ecbe33;
  color: var(--color-primary);
}
.dice-value.Small {
  background: #f363;
  color: var(--color-discount);
}
.dice-number {
  text-align: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.dice-number.Even {
  background: #00ecbe33;
  color: var(--color-primary);
}
.dice-number.Odd {
  background: #f363;
  color: var(--color-discount);
}
@media (max-width: 500px) {
  .dice-result-row {
    grid-template-columns: 1.5fr 2fr 0.8fr 0.8fr 0.8fr;
    padding: 10px 8px;
    font-size: 12px;
  }
  .dice-faces {
    width: 28px;
    height: 28px;
    padding: 3px;
  }
  .dice-dot {
    width: 4px;
    height: 4px;
  }
  .dice-display {
    gap: 4px;
  }
  .dice-sum {
    font-size: 14px;
  }
  .dice-value,
  .dice-number {
    font-size: 10px;
    padding: 3px 6px;
  }
}
@media (max-width: 400px) {
  .dice-faces {
    width: 24px;
    height: 24px;
    padding: 2px;
  }
  .dice-dot {
    width: 3px;
    height: 3px;
  }
  .dice-display {
    gap: 3px;
  }
}
.result-issue,
.result-name {
  font-size: 13px;
  color: var(--color-secondary);
}
.result-time {
  font-size: 13px;
  color: var(--color-tertiary);
}
.result-numbers {
  display: flex;
  justify-content: space-around;
}
.result-numbers .results-circle {
  width: 28px;
  height: 28px;
  font-size: 14px;
}
.loadings,
.error {
  text-align: center;
  padding: 40px;
  color: var(--color-secondary);
}
.error {
  color: var(--color-error);
}
.modal-overlay {
  position: fixed;
  inset: 0 0 85px;
  background: #05012be6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.filter-modal {
  background: var(--bg-medium);
  width: 100%;
  max-width: 500px;
  border-radius: 12px 12px 0 0;
  height: max-content;
  padding: 0;
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-light);
}
.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-tertiary);
}
.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-secondary);
}
.lottery-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px;
}
.lottery-type-btn {
  padding: 8px 16px;
  border: 1px solid var(--bg-light);
  background: var(--bg-option);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--color-secondary);
}
.lottery-type-btn.active {
  background: var(--gradient-button);
  color: var(--bg-dark);
  border-color: var(--color-primary);
}
.modal-footer {
  padding: 20px;
  border-top: 1px solid var(--bg-light);
}
.apply-btn {
  width: 100%;
  padding: 12px;
  background: var(--gradient-button);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
@media (max-width: 500px) {
  .modal-overlay {
    bottom: 72px !important;
  }
  .lottery-result-container {
    max-width: 100%;
    padding-bottom: 40px;
    min-height: calc(100vh - 160px);
  }
  .header-row,
  .result-row {
    grid-template-columns: 0.75fr 1fr 100px !important;
    font-size: 12px;
  }
  .result-row,
  .results-header {
    padding: 10px !important;
  }
  .results-circle {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .games-tabs {
    padding: 8px;
  }
  .game-tab-btn {
    font-size: 12px;
  }
  .table-header,
  .table-row {
    grid-template-columns: 1fr 2.5fr;
  }
}
@media (max-width: 450px) {
  .time-filter-btn {
    display: flex;
    flex-direction: column;
    padding: 8px !important;
  }
  .result-label,
  .results-circle {
    width: 24px !important;
    height: 24px !important;
  }
  .result-issue,
  .result-time,
  .result-name,
  .period-cell {
    font-size: 0.75rem !important;
  }
}
@media (max-width: 400px) {
  .table-row,
  .table-header {
    padding: 10px !important;
  }
  .number-circle-result {
    width: 20px !important;
    height: 20px !important;
  }
}
@media (max-width: 370px) {
  .result-row {
    grid-template-columns: 0.7fr 1fr 100px !important;
    padding: 10px 8px !important;
    font-size: 0.7rem !important;
  }
  .results-header {
    padding: 10px 8px !important;
  }
}
.no-data-betdetails {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(250px, 50vw, 300px);
  color: var(--color-secondary);
  padding: clamp(16px, 4vw, 24px);
  height: calc(100vh - 255px);
}
.no-data-betdetails .no-data-box-betdetail {
  text-align: center;
}
.no-data-betdetails .no-data-box-betdetail .illustration-betdetail {
  font-size: clamp(40px, 8vw, 48px);
  margin-bottom: clamp(10px, 2.5vw, 12px);
  opacity: 0.5;
}
.no-data-betdetails .no-data-box-betdetail p {
  font-size: clamp(14px, 3.5vw, 16px);
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 500;
}
.container {
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(180deg, #0a0e27, #1a1f3a);
  min-height: 100vh;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  overflow-x: hidden;
}
.root-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 12px 12px;
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.root-tab-btn {
  flex: 1;
  padding: 12px 0;
  background: var(--bg-medium);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
.root-tab-btn:hover {
  background: var(--bg-time);
  transform: translateY(-2px);
}
.root-tab-btn.active {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--bg-dark);
  font-weight: 700;
  box-shadow: 0 4px 15px #00f5a04d;
}
.categoryNav {
  display: flex;
  gap: 10px;
  padding: 16px 12px 12px;
  overflow-x: auto;
  background: #0a0e27;
  scroll-behavior: smooth;
}
.categoryNav::-webkit-scrollbar {
  height: 4px;
}
.categoryNav::-webkit-scrollbar-track {
  background: #ffffff0d;
}
.categoryNav::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 2px;
}
.categoryBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 101px;
  height: 54px;
  background: var(--bg-medium);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 0;
  flex-shrink: 0;
  color: var(--color-secondary);
}
.categoryBtn.active {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  box-shadow: 0 4px 20px #00f5a066;
  color: var(--bg-dark);
}
.categoryIcon {
  width: max-content;
  height: max-content;
}
.categoryName {
  font-size: 12.8px;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
}
.subCategoryNav {
  display: flex;
  gap: 12px;
  padding: 16px 12px;
  overflow-x: auto;
  background: #0f1329;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  scroll-behavior: smooth;
}
.subCategoryNav::-webkit-scrollbar {
  height: 4px;
}
.subCategoryNav::-webkit-scrollbar-track {
  background: #ffffff0d;
}
.subCategoryNav::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 2px;
}
.subCategoryBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 65px;
  height: 54px;
  background: #1e2442;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}
.subCategoryBtn:hover {
  background: #252b4a;
  transform: scale(1.05);
}
.subCategoryBtn.active {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
}
.subCategoryBtn.active .subCategoryText {
  color: #0a0e27;
  font-weight: 500;
}
.subCategoryText {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.5px;
}
.content {
  padding: 0 12px 20px;
}
.sectionHeader {
  padding: 16px 0 12px;
}
.title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}
.providerTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 0;
}
.providerIcon {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
.providerName {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.5px;
}
.gamesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.gameCard {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
.gameCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px #0006;
}
.gameCard:hover .gameImage {
  transform: scale(1.05);
}
.jiliBadge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, gold, #ffed4e);
  color: #8a4a1a;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px #ffd70066;
}
.gameImage {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
  padding: 12px 8px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.gameTitle {
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  width: 100%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.gameName {
  font-size: 11px;
  font-weight: 600;
  color: #b8bfd8;
  text-align: center;
  padding: 8px 4px 0;
  line-height: 1.3;
}
.allGamesBtn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.allGamesBtn button {
  background: linear-gradient(135deg, #00f5a0, #00d9f5);
  color: #0a0e27;
  border: none;
  padding: 12px 48px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px #00f5a04d;
}
.allGamesBtn button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #00f5a066;
}
.allGamesBtn button:active {
  transform: translateY(0);
}
.lottery_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lottery_container .lottery_card {
  height: 90.66px;
  display: flex;
  justify-content: space-between;
  background: var(--bg-time);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.lottery_container .lottery_card:hover {
  cursor: pointer;
}
.lottery_container .lottery_card .lottery_img img {
  width: 153.81px;
  height: 90.66px;
}
.lottery_container .lotteryCard_leftCont {
  padding: 12px;
}
.lottery_container .lotteryCard_leftCont .lottery_name {
  font-size: 18.668px;
  font-weight: 700;
  color: var(--color-tertiary);
}
.lottery_container .lotteryCard_leftCont .lottery_text {
  font-size: 11.7332px;
  color: var(--color-secondary);
}
.casino-leaderboard-section {
  padding: 16px 12px;
  background: var(--bg-dark);
  min-height: 400px;
}
.leaderboard-title-section {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.leaderboard-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  text-align: center;
  letter-spacing: 0.5px;
}
.leaderboard-header {
  display: grid;
  grid-template-columns: 50px 1fr 80px 90px;
  gap: 8px;
  padding: 12px 8px;
  background: var(--bg-medium);
  border-radius: 8px 8px 0 0;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.leaderboard-header .header-rank {
  text-align: center;
}
.leaderboard-header .header-game {
  text-align: left;
  padding-left: 8px;
}
.leaderboard-header .header-user {
  text-align: center;
}
.leaderboard-header .header-bounty {
  text-align: right;
  padding-right: 8px;
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 50px 1fr 80px 90px;
  gap: 8px;
  padding: 12px 8px;
  background: var(--bg-medium);
  border-radius: 8px;
  align-items: center;
  transition: all 0.3s ease;
}
.leaderboard-row:hover {
  background: var(--bg-time);
  transform: translate(4px);
}
.rank-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--bg-time);
  color: var(--color-secondary);
  margin: 0 auto;
}
.rank-badge.rank-1 {
  background: linear-gradient(135deg, gold, #ffed4e);
  color: #8a4a1a;
  box-shadow: 0 4px 12px #ffd70066;
  font-size: 16px;
}
.rank-badge.rank-2 {
  background: linear-gradient(135deg, silver, #e8e8e8);
  color: #4a4a4a;
  box-shadow: 0 4px 12px #c0c0c066;
}
.rank-badge.rank-3 {
  background: linear-gradient(135deg, #cd7f32, #e6a15c);
  color: #3d2817;
  box-shadow: 0 4px 12px #cd7f3266;
}
.game-info {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.game-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-id {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bounty-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: right;
  padding-right: 8px;
}
.loadings {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  font-size: 16px;
  color: var(--color-secondary);
}
.error {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  font-size: 14px;
  color: #f44336;
  text-align: center;
}
.no-data-betdetails {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
}
.no-data-box-betdetail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.illustration-betdetail {
  font-size: 48px;
  opacity: 0.6;
}
.no-data-betdetails p {
  font-size: 14px;
  color: var(--color-secondary);
  margin: 0;
}
@media (max-width: 380px) {
  .leaderboard-header,
  .leaderboard-row {
    grid-template-columns: 45px 1fr 75px 85px;
    gap: 6px;
    padding: 10px 6px;
  }
  .rank-badge {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .rank-badge.rank-1 {
    font-size: 14px;
  }
  .game-icon-wrapper {
    width: 36px;
    height: 36px;
  }
  .game-name {
    font-size: 12px;
  }
  .user-id {
    font-size: 11px;
  }
  .bounty-amount {
    font-size: 12px;
  }
}
.dh-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  overflow: hidden;
}
.dh-header-section {
  width: 100%;
  max-width: 500px;
  position: fixed;
  background-color: var(--bg-page);
  z-index: 500;
  top: 49.05px;
}
.dh-header {
  background-color: var(--bg-dark);
  padding: 16px;
  box-shadow: 0 1px 2px #0000004d;
}
.dh-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dh-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-tertiary);
  margin: 0;
}
.dh-header-back {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  color: var(--color-secondary);
}
.dh-header-back:hover {
  background-color: var(--bg-medium);
}
.dh-wallet {
  text-align: center;
  background: var(--bg-medium);
  padding: 1rem;
  border-radius: 16px;
  box-shadow: 0 2px 4px #0000004d;
  border: 1px solid var(--bg-light);
}
.dh-wallet-label {
  font-size: 14px;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.dh-wallet-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}
.dh-date-selector {
  background-color: var(--bg-dark);
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-light);
  border-top: 1px solid var(--bg-light);
  max-width: 500px;
  width: 100%;
}
.dh-date-selector-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dh-date-selector-icon {
  color: var(--color-primary);
  width: 20px;
  height: 20px;
  font-size: 16px;
}
.dh-date-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.dh-date-selector-btn:hover {
  background-color: var(--bg-medium);
}
.dh-date-selector-btn:hover .dh-date-selector-dropdown {
  transform: translateY(1px);
}
.dh-date-selector-dropdown {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  font-size: 12px;
  color: var(--color-secondary);
}
.dh-list {
  flex: 1;
  overflow-y: auto;
  padding: 190px 16px 32px;
  -webkit-overflow-scrolling: touch;
  background-color: var(--bg-page);
}
.dh-error-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ef44441a;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  margin-bottom: 20px;
}
.dh-error-icon {
  font-size: 1.25rem;
  color: var(--color-error);
}
.dh-error-text {
  color: var(--color-error);
  font-weight: 500;
}
.dh-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
}
.dh-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bg-light);
  border-left-color: var(--color-primary);
  border-radius: 50%;
  animation: dh-spin 1s linear infinite;
}
.dh-loading-text {
  color: var(--color-secondary);
  font-weight: 500;
}
.dh-no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}
.dh-no-data-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}
.dh-no-data-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-tertiary);
  margin-bottom: 8px;
}
.dh-no-data-subtitle {
  font-size: 0.95rem;
  color: var(--color-secondary);
  max-width: 300px;
  line-height: 1.4;
}
.dh-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dh-card {
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px #0000004d;
  border: 1px solid var(--bg-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.dh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px #0006;
}
.dh-card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-light);
}
.dh-card-info {
  flex: 1;
}
.dh-card-date {
  font-size: 12px;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.dh-card-id {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.dh-reference-number {
  font-size: 11px;
  color: var(--color-text-muted);
}
.dh-card-amount-section {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.dh-card-amount {
  font-size: 16px;
  font-weight: 600;
}
.dh-card-amount--credit {
  color: var(--color-primary);
}
.dh-status-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  border: none;
}
.dh-status-badge--pending {
  background: #ffc10733;
  color: #ffc107;
}
.dh-status-badge--success {
  background: #00ecbe33;
  color: var(--color-primary);
}
.dh-status-badge--error {
  background: #ef444433;
  color: var(--color-error);
}
.dh-status-badge--cancelled {
  background: #8b9cb633;
  color: var(--color-text-muted);
}
.dh-status-badge--default {
  background: var(--bg-option);
  color: var(--color-secondary);
}
.dh-card-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dh-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.dh-detail-row:not(:last-child) {
  border-bottom: none;
}
.dh-detail-key {
  font-size: 13px;
  color: var(--color-secondary);
  font-weight: 500;
  flex: 0 0 auto;
  min-width: 120px;
}
.dh-detail-value {
  font-size: 13px;
  color: var(--color-tertiary);
  font-weight: 600;
  text-align: right;
  flex: 1;
  word-break: break-word;
}
.dh-detail-value--pending {
  color: #ffc107;
}
.dh-detail-value--success {
  color: var(--color-primary);
}
.dh-detail-value--error {
  color: var(--color-error);
}
.dh-detail-value--cancelled {
  color: var(--color-text-muted);
}
@keyframes dh-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .dh-header .dh-header-title {
    font-size: 1.3rem;
  }
  .dh-wallet .dh-wallet-amount {
    font-size: 1.75rem;
  }
  .dh-card {
    padding: 16px;
  }
  .dh-card-content {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }
  .dh-card-amount-section {
    align-items: flex-start;
    text-align: left;
  }
}
@media (max-width: 500px) {
  .dh-header {
    padding: 16px 12px;
  }
  .dh-list {
    padding-top: 200px;
    padding-bottom: 80px;
  }
  .dh-detail-key {
    min-width: 100px;
    font-size: 12px;
  }
  .dh-detail-value {
    font-size: 12px;
  }
}
.wh-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  overflow: hidden;
}
.wh-header-section {
  width: 100%;
  max-width: 500px;
  position: fixed;
  background-color: var(--bg-page);
  z-index: 500;
  top: 49.05px;
}
.wh-header {
  background-color: var(--bg-dark);
  padding: 16px;
  box-shadow: 0 1px 2px #0000004d;
}
.wh-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-tertiary);
  margin: 0;
}
.wh-header-back {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  color: var(--color-secondary);
}
.wh-header-back:hover {
  background-color: var(--bg-medium);
}
.wh-wallet {
  text-align: center;
  background: var(--bg-medium);
  padding: 1rem;
  border-radius: 16px;
  box-shadow: 0 2px 4px #0000004d;
  border: 1px solid var(--bg-light);
}
.wh-wallet-label {
  font-size: 14px;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.wh-wallet-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-error);
}
.wh-date-selector {
  background-color: var(--bg-dark);
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-light);
  border-top: 1px solid var(--bg-light);
  max-width: 500px;
  width: 100%;
}
.wh-date-selector-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wh-date-selector-icon {
  color: var(--color-primary);
  width: 20px;
  height: 20px;
  font-size: 16px;
}
.wh-date-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.wh-date-selector-btn:hover {
  background-color: var(--bg-medium);
}
.wh-date-selector-btn:hover .wh-date-selector-dropdown {
  transform: translateY(1px);
}
.wh-date-selector-dropdown {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  font-size: 12px;
  color: var(--color-secondary);
}
.wh-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 175px 16px 80px;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  background-color: var(--bg-page);
}
.wh-error-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ef44441a;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  margin-bottom: 20px;
}
.wh-error-icon {
  font-size: 1.25rem;
  color: var(--color-error);
}
.wh-error-text {
  color: var(--color-error);
  font-weight: 500;
}
.wh-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
}
.wh-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bg-light);
  border-left-color: var(--color-error);
  border-radius: 50%;
  animation: wh-spin 1s linear infinite;
}
.wh-loading-text {
  color: var(--color-secondary);
  font-weight: 500;
}
.wh-no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}
.wh-no-data-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}
.wh-no-data-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-tertiary);
  margin-bottom: 8px;
}
.wh-no-data-subtitle {
  font-size: 0.95rem;
  color: var(--color-secondary);
  max-width: 300px;
  line-height: 1.4;
}
.wh-cards-wrapper {
  display: flex;
  flex-direction: column;
}
.wh-card {
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px #0000004d;
  border: 1px solid var(--bg-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.wh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px #0006;
}
.wh-card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-light);
}
.wh-card-info {
  flex: 1;
}
.wh-card-date {
  font-size: 12px;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.wh-card-id {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.wh-reference-number {
  font-size: 11px;
  color: var(--color-text-muted);
}
.wh-card-amount-section {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.wh-card-amount {
  font-size: 16px;
  font-weight: 600;
}
.wh-card-amount--debit {
  color: var(--color-error);
}
.wh-status-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  border: none;
}
.wh-status-badge--pending {
  background: #ffc10733;
  color: #ffc107;
}
.wh-status-badge--success {
  background: #00ecbe33;
  color: var(--color-primary);
}
.wh-status-badge--error {
  background: #ef444433;
  color: var(--color-error);
}
.wh-status-badge--cancelled {
  background: #8b9cb633;
  color: var(--color-text-muted);
}
.wh-status-badge--default {
  background: var(--bg-option);
  color: var(--color-secondary);
}
.wh-card-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wh-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.wh-detail-row:not(:last-child) {
  border-bottom: none;
}
.wh-detail-key {
  font-size: 13px;
  color: var(--color-secondary);
  font-weight: 500;
  flex: 0 0 auto;
  min-width: 120px;
}
.wh-detail-value {
  font-size: 13px;
  color: var(--color-tertiary);
  font-weight: 600;
  text-align: right;
  flex: 1;
  word-break: break-word;
}
.wh-detail-value--pending {
  color: #ffc107;
}
.wh-detail-value--success {
  color: var(--color-primary);
}
.wh-detail-value--error {
  color: var(--color-error);
}
.wh-detail-value--cancelled {
  color: var(--color-text-muted);
}
@keyframes wh-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .wh-header .wh-header-title {
    font-size: 1.3rem;
  }
  .wh-wallet .wh-wallet-amount {
    font-size: 1.75rem;
  }
  .wh-card {
    padding: 16px;
  }
  .wh-card-amount-section {
    align-items: flex-end;
    text-align: left;
  }
}
@media (max-width: 500px) {
  .wh-header {
    padding: 16px 12px;
  }
  .wh-list {
    padding-top: 235px;
    padding-bottom: 80px;
  }
  .wh-detail-key {
    min-width: 100px;
    font-size: 12px;
  }
  .wh-detail-value {
    font-size: 12px;
  }
}
@media (max-width: 350px) {
  .wh-card-content {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }
}
.keen-slider:not([data-keen-slider-disabled]) {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  align-content: flex-start;
  display: flex;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -khtml-user-select: none;
  width: 100%;
}
.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
  flex-direction: row-reverse;
}
.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
  flex-wrap: wrap;
}
.vip-carousel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position: relative;
  background-color: var(--bg-page);
}
.vip-carousel .vip-carousel__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-muted) var(--bg-light);
  touch-action: pan-y;
  will-change: scroll-position;
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}
.vip-carousel .vip-carousel__content::-webkit-scrollbar {
  width: 6px;
}
.vip-carousel .vip-carousel__content::-webkit-scrollbar-track {
  background: var(--bg-light);
  border-radius: 3px;
}
.vip-carousel .vip-carousel__content::-webkit-scrollbar-thumb {
  background-color: var(--color-text-muted);
  border-radius: 3px;
}
.vip-carousel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--color-secondary);
  font-size: 1rem;
}
.vip-carousel__back-btn {
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-tertiary);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-carousel__back-btn:hover {
  background-color: var(--bg-medium);
}
.vip-carousel__back-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.vip-carousel__title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-tertiary);
  letter-spacing: -0.025em;
}
.vip-carousel__header-right {
  display: flex;
  align-items: center;
}
.vip-carousel__level-indicator {
  background: var(--gradient-button);
  color: var(--color-white);
  padding: 0.375rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px #00ecbe33;
}
.vip-carousel__cards-wrapper {
  padding: 1rem;
  overflow: hidden;
}
.vip-carousel__cards-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
}
.vip-carousel__keen-slider .keen-slider__slide {
  min-height: auto;
}
.vip-carousel__card {
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  user-select: none;
  min-width: 100%;
}
.vip-carousel__card.gradient-gray {
  background: linear-gradient(
    135deg,
    var(--bg-medium) 0%,
    var(--bg-light) 100%
  );
  box-shadow: 0 4px 12px #0000004d;
}
.vip-carousel__card.gradient-blue {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  box-shadow: 0 4px 12px #3b82f64d;
}
.vip-carousel__card.gradient-green {
  background: linear-gradient(135deg, #064e3b, #10b981);
  box-shadow: 0 4px 12px #10b9814d;
}
.vip-carousel__card.gradient-orange {
  background: linear-gradient(135deg, #7c2d12, #f97316);
  box-shadow: 0 4px 12px #f973164d;
}
.vip-carousel__card.gradient-purple {
  background: linear-gradient(135deg, #4c1d95, #a855f7);
  box-shadow: 0 4px 12px #a855f74d;
}
.vip-carousel__card.gradient-pink {
  background: linear-gradient(135deg, #831843, #ec4899);
  box-shadow: 0 4px 12px #ec48994d;
}
.vip-carousel__card.gradient-indigo {
  background: linear-gradient(135deg, #312e81, #6366f1);
  box-shadow: 0 4px 12px #6366f14d;
}
.vip-carousel__card.gradient-cyan {
  background: linear-gradient(135deg, #164e63, #06b6d4);
  box-shadow: 0 4px 12px #06b6d44d;
}
.vip-carousel__card.gradient-teal {
  background: linear-gradient(135deg, #134e4a, #14b8a6);
  box-shadow: 0 4px 12px #14b8a64d;
}
.vip-carousel__card.gradient-emerald {
  background: linear-gradient(135deg, #064e3b, #10b981);
  box-shadow: 0 4px 12px #10b9814d;
}
.vip-carousel__card.gradient-yellow {
  background: linear-gradient(135deg, #713f12, #eab308);
  box-shadow: 0 4px 12px #eab3084d;
}
.vip-carousel__card.gradient-red {
  background: linear-gradient(135deg, #7f1d1d, #ef4444);
  box-shadow: 0 4px 12px #ef44444d;
}
.vip-carousel__card.gradient-violet {
  background: linear-gradient(135deg, #4c1d95, #8b5cf6);
  box-shadow: 0 4px 12px #8b5cf64d;
}
.vip-carousel__card.gradient-gold {
  background: linear-gradient(135deg, #78350f, #fbbf24);
  box-shadow: 0 4px 12px #fbbf244d;
}
.vip-carousel__card.gradient-platinum {
  background: linear-gradient(135deg, #1e293b, #64748b);
  box-shadow: 0 4px 12px #64748b4d;
}
.vip-carousel__card.gradient-diamond {
  background: linear-gradient(135deg, #0f172a 0%, var(--gradient-start) 100%);
  box-shadow: 0 4px 12px #7afec34d;
}
.vip-carousel__recharge-btn {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 2;
}
.vip-carousel__recharge {
  background: var(--gradient-button);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px #00ecbe4d;
}
.vip-carousel__recharge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #00ecbe66;
}
.vip-carousel__recharge:active {
  transform: translateY(0);
}
.vip-carousel__level-info {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}
.vip-carousel__level-badge {
  width: 4.5rem;
  height: 4.5rem;
  background: #ffffff26;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px #0003;
}
.vip-carousel__badge-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.vip-carousel__badge-number {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin-top: 0.125rem;
}
.vip-carousel__progress-text {
  margin-bottom: 0.75rem;
}
.vip-carousel__progress-text span {
  color: #ffffffe6;
  font-size: 1rem;
  font-weight: 500;
}
.vip-carousel__progress-container {
  width: 100%;
  background: #0000004d;
  border-radius: 1rem;
  height: 0.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 1px 3px #0000004d;
}
.vip-carousel__progress-bar {
  background: var(--gradient-button);
  height: 0.5rem;
  border-radius: 1rem;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px #00ecbe66;
  position: relative;
}
.vip-carousel__progress-bar:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 1rem;
}
.vip-carousel__status-text {
  color: #ffffffd9;
  font-size: 0.875rem;
  line-height: 1.4;
}
.vip-carousel__chain-pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5rem;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 0.5rem,
    rgba(255, 255, 255, 0.05) 0.5rem,
    rgba(255, 255, 255, 0.05) 1rem
  );
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.vip-carousel__navigation {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}
.vip-carousel__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: var(--bg-medium);
  border: 1px solid var(--bg-light);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  box-shadow: 0 2px 8px #0000004d;
}
.vip-carousel__nav-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.vip-carousel__nav-btn:hover {
  background: var(--bg-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px #00ecbe33;
}
.vip-carousel__nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}
.vip-carousel__nav-btn--prev {
  left: -0.5rem;
}
.vip-carousel__nav-btn--next {
  right: -0.5rem;
}
.vip-carousel__indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0 1rem;
}
.vip-carousel__indicator {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: #00ecbe4d;
  cursor: pointer;
  transition: all 0.3s ease;
}
.vip-carousel__indicator--active,
.vip-carousel__indicator:hover {
  background: var(--color-primary);
  transform: scale(1.2);
}
.vip-carousel__benefits {
  padding: 0 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vip-carousel__benefit-card {
  background-color: var(--bg-medium);
  border-radius: 0.75rem;
  padding: 1rem;
  border-left: 3px solid var(--bg-light);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px #0003;
}
.vip-carousel__benefit-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #0000004d;
  border-left-color: var(--color-primary);
}
.vip-carousel__benefit-title {
  font-size: 0.8rem;
  color: var(--color-secondary);
  margin: 0 0 0.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.vip-carousel__benefit-description {
  margin-bottom: 0.75rem;
}
.vip-carousel__benefit-description span {
  font-size: 0.875rem;
  color: var(--color-tertiary);
  line-height: 1.5;
}
.vip-carousel__reward-items {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.vip-carousel__reward-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vip-carousel__reward-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px #0003;
  transition: transform 0.2s ease;
}
.vip-carousel__reward-icon:hover {
  transform: scale(1.05);
}
.vip-carousel__reward-icon span {
  font-size: 1rem;
}
.vip-carousel__reward-icon--coins {
  background: linear-gradient(
    135deg,
    var(--color-gold) 0%,
    var(--bg-badge) 100%
  );
}
.vip-carousel__reward-icon--envelopes {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.vip-carousel__reward-icon--badges {
  background: linear-gradient(135deg, #10b981, #059669);
}
.vip-carousel__reward-value {
  font-weight: 600;
  color: var(--color-tertiary);
  font-size: 0.875rem;
}
.vip-carousel__benefit-text {
  font-size: 0.875rem;
  color: var(--color-tertiary);
  margin: 0;
  line-height: 1.5;
}
.vip-carousel .highlight {
  color: var(--color-primary);
  font-weight: 600;
}
@media (max-width: 400px) {
  .vip-carousel__header {
    padding: 1rem;
  }
  .vip-carousel__cards-wrapper {
    padding: 0.75rem;
  }
  .vip-carousel__card {
    padding: 1.25rem;
  }
  .vip-carousel__level-badge {
    width: 4rem;
    height: 4rem;
  }
  .vip-carousel__reward-items {
    gap: 1rem;
  }
  .vip-carousel__reward-icon {
    width: 2rem;
    height: 2rem;
  }
  .vip-carousel__reward-icon span {
    font-size: 0.875rem;
  }
  .vip-carousel__benefit-card {
    padding: 0.875rem;
  }
  .vip-carousel__nav-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  .vip-carousel__nav-btn svg {
    width: 1rem;
    height: 1rem;
  }
  .vip-carousel__nav-btn--prev {
    left: -0.25rem;
  }
  .vip-carousel__nav-btn--next {
    right: -0.25rem;
  }
  .vip-carousel__indicators {
    gap: 0.375rem;
    margin-top: 0.75rem;
  }
  .vip-carousel__indicator {
    width: 0.375rem;
    height: 0.375rem;
  }
}
@media (max-width: 380px) {
  .vip-carousel__reward-items {
    gap: 0.75rem;
  }
  .vip-carousel__reward-item {
    gap: 0.375rem;
  }
  .vip-carousel__reward-value {
    font-size: 0.8125rem;
  }
}
.vip-carousel__nav-btn:disabled,
.vip-carousel__indicator:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate(20px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes float {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
.vip-carousel__level-badge {
  animation: float 3s ease-in-out infinite;
}
.vip-carousel__benefit-card {
  animation: slideIn 0.5s ease-out;
}
.vip-carousel__keen-slider--loading .keen-slider__slide {
  display: none;
}
.keen-slider {
  display: flex !important;
}
._walletContainer_f835b_1 {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--bg-page);
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}
._walletContent_f835b_12 {
  flex: 1;
  padding-bottom: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
._balanceHeader_f835b_19 {
  background: var(--bg-medium);
  padding-top: 10.332px;
  text-align: center;
  padding-bottom: 12.8px;
}
._walletIcon_f835b_26 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #00ecbe1a;
  border-radius: 50%;
  color: var(--color-primary);
}
._walletIcon_f835b_26 svg {
  width: 32px;
  height: 32px;
}
._wallet_icons_f835b_41 {
  width: 52.27px;
  height: 52.27px;
}
._totalBalance_f835b_46 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.5px;
}
._balanceLabel_f835b_53 {
  font-size: 14px;
  color: var(--color-white);
}
._balanceStats_f835b_58 {
  display: flex;
  justify-content: space-around;
  gap: 16px;
  padding-top: 5px;
}
._statItem_f835b_65 {
  flex: 1;
  text-align: center;
}
._statValue_f835b_70 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-tertiary);
  margin-bottom: 4px;
}
._statLabel_f835b_77 {
  font-size: 12px;
  color: var(--color-white);
  line-height: 1.3;
}
._walletDistribution_f835b_83 {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  gap: 16px;
  margin: 12.8px 16px 12px;
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 25.0668px 7.4668px 10.6668px;
}
._walletCards_f835b_94 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
._walletCard_f835b_94 {
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._walletCircle_f835b_108 {
  position: relative;
  width: 100px;
  height: 100px;
}
._circleProgress_f835b_114 {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
._circleBackground_f835b_120 {
  fill: none;
  stroke: var(--bg-light);
  stroke-width: 8;
}
._circleBar_f835b_126 {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}
._circleBarSecondary_f835b_134 {
  fill: none;
  stroke: var(--color-text-light);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}
._percentageText_f835b_142 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-tertiary);
}
._walletAmount_f835b_152 {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-tertiary);
}
._walletLabel_f835b_158 {
  font-size: 13px;
  color: var(--color-tertiary);
}
._transferButton_f835b_163 {
  width: 100%;
  padding: 8px 6px;
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--color-dark-text);
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
._transferButton_f835b_163:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #00ecbe66;
}
._transferButton_f835b_163:active {
  transform: translateY(0);
}
._quickActions_f835b_183 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
._actionButton_f835b_190 {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
._actionButton_f835b_190:hover {
  transform: translateY(-2px);
}
._actionButton_f835b_190:active {
  transform: translateY(0);
}
._actionIcon_f835b_208 {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px #0003;
  transition: all 0.3s ease;
}
._actionIcon_f835b_208 svg {
  width: 24px;
  height: 24px;
}
._actionButton_f835b_190:hover ._actionIcon_f835b_208 {
  transform: scale(1.05);
  box-shadow: 0 6px 16px #0000004d;
}
._actionLabel_f835b_227 {
  font-size: 11px;
  color: var(--color-secondary);
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
}
._gameBalances_f835b_235 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 16px;
}
._gameCard_f835b_242 {
  background: var(--bg-dark);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px #0000004d;
  border: 1px solid var(--bg-light);
  transition: all 0.3s ease;
}
._gameCard_f835b_242:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0006;
}
._gameCardActive_f835b_256 {
  background: var(--gradient-button);
  border-color: var(--color-primary);
}
._gameCardActive_f835b_256 ._gameAmount_f835b_260,
._gameCardActive_f835b_256 ._gameLabel_f835b_261 {
  color: var(--color-dark-text);
}
._gameAmount_f835b_260 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-tertiary);
  margin-bottom: 8px;
}
._gameLabel_f835b_261 {
  font-size: 13px;
  color: var(--color-secondary);
  font-weight: 500;
}
@media (max-width: 400px) {
  ._walletContent_f835b_12 {
    padding: 12px 12px 100px;
  }
  ._balanceHeader_f835b_19 {
    padding: 20px 16px;
  }
  ._totalBalance_f835b_46 {
    font-size: 28px;
  }
  ._walletCircle_f835b_108 {
    width: 90px;
    height: 90px;
  }
  ._percentageText_f835b_142 {
    font-size: 20px;
  }
  ._walletAmount_f835b_152 {
    font-size: 16px;
  }
  ._actionIcon_f835b_208 {
    width: 48px;
    height: 48px;
  }
  ._actionLabel_f835b_227 {
    font-size: 10px;
  }
  ._gameAmount_f835b_260 {
    font-size: 18px;
  }
}
@media (max-width: 360px) {
  ._quickActions_f835b_183 {
    gap: 8px;
  }
  ._actionIcon_f835b_208 {
    width: 44px;
    height: 44px;
  }
  ._actionIcon_f835b_208 svg {
    width: 20px;
    height: 20px;
  }
  ._actionLabel_f835b_227 {
    font-size: 9px;
  }
  ._walletCircle_f835b_108 {
    width: 80px;
    height: 80px;
  }
  ._percentageText_f835b_142 {
    font-size: 18px;
  }
}
@keyframes _shimmer_f835b_1 {
  0% {
    background-position: -400px 0;
  }
  to {
    background-position: 400px 0;
  }
}
._loading_f835b_341 {
  background: linear-gradient(
    90deg,
    var(--bg-medium) 0%,
    var(--bg-light) 50%,
    var(--bg-medium) 100%
  );
  background-size: 400px 100%;
  animation: _shimmer_f835b_1 1.5s infinite;
}
._withdrawApp_18yq5_1 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-page);
  width: 100%;
  position: relative;
  bottom: 0;
}
._withdrawApp_18yq5_1 ._withdrawHeader_18yq5_10 {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  max-width: 500px;
  z-index: 100;
  border-bottom: 1px solid rgba(var(--color-primary), 0.1);
  background: var(--color-white);
}
._withdrawApp_18yq5_1 ._withdrawContainer_18yq5_21 {
  width: 100%;
  max-width: 500px;
  min-height: 100vh;
  background: var(--bg-page);
  position: relative;
  margin: 0 auto;
  flex: 1;
}
._withdrawApp_18yq5_1 ._withdrawContainer_18yq5_21 ._withdrawContent_18yq5_30 {
  padding: 0 16px 120px;
  background: var(--bg-page);
  min-height: calc(100vh - 100px);
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36 {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 8px 32px var(gradient-end);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 0.5rem;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._balanceSection_18yq5_50 {
  margin-right: 0.2rem;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._balanceSection_18yq5_50
  ._balanceLabel_18yq5_53 {
  display: block;
  color: rgba(var(--color-white), 0.85);
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._balanceSection_18yq5_50
  ._balanceAmount_18yq5_60 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._balanceSection_18yq5_50
  ._balanceAmount_18yq5_60
  ._currency_18yq5_65 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._balanceSection_18yq5_50
  ._balanceAmount_18yq5_60
  ._amount_18yq5_70 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._recordsSection_18yq5_76 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._recordsSection_18yq5_76
  ._recordsBtn_18yq5_82 {
  background: rgba(var(--color-white), 0.15);
  border: 1px solid rgba(var(--color-white), 0.2);
  color: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 500;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._balanceCard_18yq5_36
  ._balanceInfo_18yq5_43
  ._recordsSection_18yq5_76
  ._recordsBtn_18yq5_82:hover {
  background: rgba(var(--color-white), 0.25);
  transform: translateY(-1px);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100 {
  background: var(--bg-medium);
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 4px 16px #00000014;
  border: 1px solid rgba(var(--color-primary), 0.1);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._amountCardTitle_18yq5_107 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 10px;
  text-align: left;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._amountGrid_18yq5_114 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._amountGrid_18yq5_114
  ._withdraw_amountBtn_18yq5_120 {
  position: relative;
  background: var(--bg-wallet);
  border: 2px solid var(--bg-medium);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._amountGrid_18yq5_114
  ._withdraw_amountBtn_18yq5_120:hover {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  color: var(--bg-dark) !important;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._amountGrid_18yq5_114
  ._withdraw_amountBtn_18yq5_120
  ._amountValue_18yq5_138 {
  font-size: 16px;
  font-weight: 600;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._withdrawalInfo_18yq5_142 {
  background: var(--bg-page);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(var(--color-primary), 0.1);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._withdrawalInfo_18yq5_142
  ._withdrawalInfoTitle_18yq5_148 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark-text);
  margin: 0 0 16px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._withdrawalInfo_18yq5_142
  ._withdrawalInfoRow_18yq5_154 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._withdrawalInfo_18yq5_142
  ._withdrawalInfoRow_18yq5_154
  ._infoLabel_18yq5_160 {
  font-size: 14px;
  color: var(--color-text-muted);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._withdrawalInfo_18yq5_142
  ._withdrawalInfoRow_18yq5_154
  ._infoValue_18yq5_164 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._withdrawalInfo_18yq5_142
  ._withdrawalNote_18yq5_169 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-medium);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._amountCards_18yq5_100
  ._withdrawalInfo_18yq5_142
  ._withdrawalNote_18yq5_169
  p {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180 {
  background: var(--bg-medium);
  border-radius: 20px;
  padding: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px #00000014;
  border: 1px solid rgba(var(--color-primary), 0.1);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsHeader_18yq5_188 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsHeader_18yq5_188
  ._bankAccountsTitle_18yq5_193 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsHeader_18yq5_188
  ._addBankBtn_18yq5_199 {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--color-white);
  border: none;
  border-radius: 12px;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px var(gradient-end);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsHeader_18yq5_188
  ._addBankBtn_18yq5_199:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(gradient-end);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 0;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226 {
  background: var(--bg-page);
  border: 2px solid var(--bg-medium);
  border-radius: 16px;
  padding: 12px;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226:hover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary), 0.03);
  transform: translateY(-1px);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226._selected_18yq5_244 {
  border-color: var(--color-primary);
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  box-shadow: 0 4px 12px var(gradient-end);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountSelector_18yq5_249 {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258 {
  width: 100%;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258
  ._accountHeader_18yq5_261 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258
  ._accountHeader_18yq5_261
  ._accountName_18yq5_267 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258
  ._accountHeader_18yq5_261
  ._accountBadges_18yq5_272 {
  display: flex;
  gap: 8px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258
  ._accountHeader_18yq5_261
  ._accountBadges_18yq5_272
  ._defaultBadge_18yq5_276 {
  background: var(--bg-badge);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258
  ._accountDetails_18yq5_284 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258
  ._accountDetails_18yq5_284
  ._accountNumber_18yq5_289 {
  font-size: 14px;
  color: var(--color-white);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._accountInfo_18yq5_258
  ._accountDetails_18yq5_284
  ._bankName_18yq5_293 {
  font-size: 14px;
  color: var(--color-white);
  font-weight: 500;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._editBankBtn_18yq5_298 {
  background: var(--bg-medium);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._editBankBtn_18yq5_298:hover {
  background: var(--bg-light);
  transform: scale(1.05);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._bankAccountsCard_18yq5_180
  ._bankAccountsList_18yq5_218
  ._bankAccountItem_18yq5_226
  ._editBankBtn_18yq5_298
  svg {
  width: 18px;
  height: 18px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawContent_18yq5_30
  ._warningMessage_18yq5_320 {
  background: var(--bg-badge);
  color: var(--color-dark-text);
  border: 1px solid var(--bg-badge);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
}
._withdrawApp_18yq5_1 ._withdrawContainer_18yq5_21 ._withdrawAction_18yq5_330 {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  max-width: 500px;
  background: var(--bg-dark);
  padding: 20px 16px;
  border-top: 1px solid rgba(var(--color-primary), 0.15);
  box-shadow: 0 -4px 20px var(gradient-end);
  z-index: 99;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawAction_18yq5_330
  ._withdrawBtn_18yq5_343 {
  width: 100%;
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--color-white);
  border: none;
  border-radius: 16px;
  padding: 18px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px var(gradient-end);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawAction_18yq5_330
  ._withdrawBtn_18yq5_343:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(gradient-end);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawAction_18yq5_330
  ._withdrawBtn_18yq5_343:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 16px var(gradient-end);
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawAction_18yq5_330
  ._withdrawBtn_18yq5_343
  ._buttonContent_18yq5_366 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawAction_18yq5_330
  ._withdrawBtn_18yq5_343
  ._buttonContent_18yq5_366
  ._buttonMainText_18yq5_372 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
._withdrawApp_18yq5_1
  ._withdrawContainer_18yq5_21
  ._withdrawAction_18yq5_330
  ._withdrawBtn_18yq5_343
  ._buttonContent_18yq5_366
  ._buttonMainText_18yq5_372
  ._buttonText_18yq5_377 {
  font-size: 18px;
  font-weight: 600;
}
@media (min-width: 481px) {
  ._withdrawApp_18yq5_1 ._withdrawContainer_18yq5_21 {
    margin: 0 auto;
  }
}
@media (max-width: 400px) {
  ._withdrawApp_18yq5_1
    ._withdrawContainer_18yq5_21
    ._withdrawContent_18yq5_30
    ._amountCards_18yq5_100
    ._amountGrid_18yq5_114 {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  ._withdrawApp_18yq5_1
    ._withdrawContainer_18yq5_21
    ._withdrawContent_18yq5_30
    ._amountCards_18yq5_100
    ._amountGrid_18yq5_114
    ._withdraw_amountBtn_18yq5_120 {
    padding: 12px 8px;
    min-height: 45px;
  }
  ._withdrawApp_18yq5_1
    ._withdrawContainer_18yq5_21
    ._withdrawContent_18yq5_30
    ._amountCards_18yq5_100
    ._amountGrid_18yq5_114
    ._withdraw_amountBtn_18yq5_120
    ._amountValue_18yq5_138 {
    font-size: 14px;
  }
  ._amount_18yq5_70 {
    font-size: 24px !important;
  }
  ._recordsBtn_18yq5_82 {
    font-size: 12px !important;
    padding: 6px !important;
  }
}
._successPopupOverlay_18yq5_407 {
  position: fixed;
  inset: 0;
  background: #0009;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: _fadeIn_18yq5_1 0.3s ease-out;
}
._successPopup_18yq5_407 {
  background: var(--color-white);
  border-radius: 20px;
  padding: 32px 24px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 40px #0003;
  animation: _slideUp_18yq5_1 0.3s ease-out;
  position: relative;
}
._successIcon_18yq5_435 {
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._successIcon_18yq5_435 svg {
  animation: _scaleIn_18yq5_1 0.5s ease-out 0.2s both;
}
._successTitle_18yq5_445 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark-text);
  margin: 0 0 16px;
  line-height: 1.2;
}
._successMessage_18yq5_453 {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
._successMessage_18yq5_453 strong {
  color: var(--color-gold);
  font-weight: 600;
}
._successSubmessage_18yq5_464 {
  font-size: 14px;
  color: var(--color-text-light);
  margin: 0 0 32px;
  line-height: 1.4;
}
._successBtn_18yq5_471 {
  background: var(--bg-badge);
  color: var(--color-white);
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
}
._successBtn_18yq5_471:hover {
  background: var(--bg-badge);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--bg-badge), 0.3);
}
._successBtn_18yq5_471:active {
  transform: translateY(0);
}
@keyframes _fadeIn_18yq5_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_18yq5_1 {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes _scaleIn_18yq5_1 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 400px) {
  ._successPopup_18yq5_407 {
    padding: 28px 20px;
    border-radius: 16px;
    margin: 0 16px;
  }
  ._successTitle_18yq5_445 {
    font-size: 22px;
  }
  ._successMessage_18yq5_453 {
    font-size: 15px;
  }
}
._addBankPopupOverlay_18yq5_533 {
  position: fixed;
  inset: 0;
  background: #00000080;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: _fadeInOverlay_18yq5_1 0.3s ease-out;
  z-index: 1001;
  max-width: 500px;
  margin: 0 auto;
}
._addBankPopup_18yq5_533 {
  background: var(--bg-dark);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -4px 20px #00000026;
  animation: _slideUpFromBottom_18yq5_1 0.3s ease-out;
}
._addBankPopupHeader_18yq5_561 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--bg-medium);
  position: fixed;
  top: 0;
  background: var(--bg-dark);
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
._addBankPopupHeader_18yq5_561 ._popupTitle_18yq5_574 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
}
._addBankPopupHeader_18yq5_561 ._closeBtn_18yq5_580 {
  background: var(--bg-medium);
  border: none;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
._addBankPopupHeader_18yq5_561 ._closeBtn_18yq5_580:hover {
  background: var(--bg-light);
  color: #fff;
}
._addBankPopupContent_18yq5_598 {
  padding: 80px 24px 24px;
  overflow-y: scroll;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
._addBankPopupContent_18yq5_598 ._accountTypeSelection_18yq5_603 {
  margin-bottom: 24px;
}
._addBankPopupContent_18yq5_598
  ._accountTypeSelection_18yq5_603
  ._selectionTitle_18yq5_606 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 16px;
  text-align: center;
}
._addBankPopupContent_18yq5_598
  ._accountTypeSelection_18yq5_603
  ._selectionButtons_18yq5_613 {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
._addBankPopupContent_18yq5_598
  ._accountTypeSelection_18yq5_603
  ._selectionButtons_18yq5_613
  ._selectionBtn_18yq5_618 {
  flex: 1;
  background: var(--bg-page);
  border: 2px solid var(--bg-medium);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
._addBankPopupContent_18yq5_598
  ._accountTypeSelection_18yq5_603
  ._selectionButtons_18yq5_613
  ._selectionBtn_18yq5_618:hover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary), 0.05);
}
._addBankPopupContent_18yq5_598
  ._accountTypeSelection_18yq5_603
  ._selectionButtons_18yq5_613
  ._selectionBtn_18yq5_618._active_18yq5_638 {
  border-color: var(--color-primary);
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--color-white);
  box-shadow: 0 4px 12px var(gradient-end);
}
._addBankPopupContent_18yq5_598
  ._accountTypeSelection_18yq5_603
  ._selectionButtons_18yq5_613
  ._selectionBtn_18yq5_618._active_18yq5_638
  svg {
  color: var(--color-white);
}
._addBankPopupContent_18yq5_598
  ._accountTypeSelection_18yq5_603
  ._selectionButtons_18yq5_613
  ._selectionBtn_18yq5_618
  svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653:last-of-type {
  margin-bottom: 24px;
}
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 ._formLabel_18yq5_662 {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 8px;
}
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 input,
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 select {
  padding: 14px 16px;
  border: 2px solid var(--bg-medium);
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.2s ease;
  background: var(--bg-page);
  color: var(--color-white);
}
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 input:focus,
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--bg-page);
  box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1);
}
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 input::placeholder,
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 select::placeholder {
  color: var(--color-text-muted);
}
._addBankPopupContent_18yq5_598
  ._formRow_18yq5_653
  input._disabledInput_18yq5_689,
._addBankPopupContent_18yq5_598
  ._formRow_18yq5_653
  select._disabledInput_18yq5_689 {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-medium);
}
._addBankPopupContent_18yq5_598
  ._formRow_18yq5_653
  ._defaultCheckbox_18yq5_695 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--color-white);
  cursor: pointer;
  padding: 4px 0;
}
._addBankPopupContent_18yq5_598
  ._formRow_18yq5_653
  ._defaultCheckbox_18yq5_695
  input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
._addBankPopupContent_18yq5_598 ._formRow_18yq5_653 ._errorText_18yq5_711 {
  color: var(--color-error);
  font-size: 14px;
  font-weight: 500;
}
._addBankPopupContent_18yq5_598 ._errorMessage_18yq5_716 {
  color: var(--color-error);
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-light);
  border: 1px solid var(--color-error);
  border-radius: 8px;
  text-align: center;
}
._addBankPopupContent_18yq5_598 ._formActions_18yq5_727 {
  display: flex;
  gap: 12px;
  position: sticky;
  bottom: 0;
  background: var(--bg-dark);
  padding-bottom: 12px;
  padding-top: 16px;
  margin-top: 12px;
}
._addBankPopupContent_18yq5_598 ._formActions_18yq5_727 ._cancelBtn_18yq5_738 {
  flex: 1;
  background: var(--bg-page);
  color: var(--color-text-muted);
  border: 2px solid var(--bg-medium);
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._addBankPopupContent_18yq5_598 ._formActions_18yq5_727 ._saveBtn_18yq5_750 {
  flex: 2;
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--color-white);
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._addBankPopupContent_18yq5_598
  ._formActions_18yq5_727
  ._saveBtn_18yq5_750:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
@keyframes _fadeInOverlay_18yq5_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUpFromBottom_18yq5_1 {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 400px) {
  ._addBankPopup_18yq5_533 {
    border-radius: 16px 16px 0 0;
  }
  ._addBankPopup_18yq5_533 ._addBankPopupHeader_18yq5_561 {
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
  }
  ._addBankPopup_18yq5_533 ._addBankPopupContent_18yq5_598 {
    padding: 20px !important;
  }
  ._addBankPopup_18yq5_533
    ._addBankPopupContent_18yq5_598
    ._formRow_18yq5_653
    input,
  ._addBankPopup_18yq5_533
    ._addBankPopupContent_18yq5_598
    ._formRow_18yq5_653
    select {
    padding: 12px 14px;
    font-size: 16px;
  }
  ._addBankPopup_18yq5_533
    ._addBankPopupContent_18yq5_598
    ._formActions_18yq5_727
    ._cancelBtn_18yq5_738,
  ._addBankPopup_18yq5_533
    ._addBankPopupContent_18yq5_598
    ._formActions_18yq5_727
    ._saveBtn_18yq5_750 {
    padding: 14px;
    font-size: 16px;
  }
}
._withdrawApp_18yq5_1 {
  overscroll-behavior: contain;
}
._selected_18yq5_244 {
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  ) !important;
  color: var(--bg-dark) !important;
}
._errorMessage_18yq5_716 {
  color: var(--color-error);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  margin-bottom: 0.5rem;
  text-align: center;
}
._amountInputSection_18yq5_827 {
  margin-bottom: 24px;
}
._amountInputSection_18yq5_827 ._formRow_18yq5_653 {
  margin-bottom: 12px;
}
._amountInputSection_18yq5_827 ._formRow_18yq5_653 input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--bg-medium);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  background: var(--bg-page);
  color: var(--color-white);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
._amountInputSection_18yq5_827 ._formRow_18yq5_653 input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1);
}
._amountInputSection_18yq5_827 ._formRow_18yq5_653 input::placeholder {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 15px;
}
._amountInputSection_18yq5_827
  ._formRow_18yq5_653
  input::-webkit-outer-spin-button,
._amountInputSection_18yq5_827
  ._formRow_18yq5_653
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
._amountInputSection_18yq5_827 ._formRow_18yq5_653 input {
  -moz-appearance: textfield;
}
._amountInputSection_18yq5_827 ._errorMessage_18yq5_716 {
  color: var(--color-error);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  background: var(--bg-light);
  border: 1px solid var(--color-error);
  border-radius: 8px;
  text-align: center;
  margin-bottom: 8px;
}
._settingsCenter_l4pcu_1 {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: var(--bg-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
._profileContainer_l4pcu_13 {
  background: var(--bg-medium);
  height: 160px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
}
._contentContainer_l4pcu_21 {
  width: 100%;
  position: absolute;
  top: 58px;
}
._profileSection_l4pcu_27 {
  width: 93%;
  margin: 0 auto;
  background-color: var(--bg-time);
  border-radius: 12px;
  padding: 24px 24px 16px;
}
._profileHeader_l4pcu_35 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
._avatarContainer_l4pcu_42 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bg-light);
}
._avatar_l4pcu_42 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._changeAvatar_l4pcu_56 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--color-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
._changeAvatar_l4pcu_56:hover {
  background-color: var(--bg-light);
  color: var(--color-white);
}
._changeAvatar_l4pcu_56 svg {
  width: 16px;
  height: 16px;
}
._profileInfo_l4pcu_78 {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
._profileInfo_l4pcu_78 :last-child {
  border-bottom: none;
}
._infoRow_l4pcu_87 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--bg-light);
}
._label_l4pcu_95 {
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 400;
}
._valueButton_l4pcu_101 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
._valueButton_l4pcu_101:hover {
  background-color: var(--bg-light);
}
._valueButton_l4pcu_101 svg {
  width: 16px;
  height: 16px;
  color: var(--color-secondary);
}
._uidContainer_l4pcu_124 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._uidValue_l4pcu_130 {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
}
._copyButton_l4pcu_136 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
._copyButton_l4pcu_136:hover {
  background-color: var(--bg-light);
}
._copyButton_l4pcu_136 svg {
  width: 18px;
  height: 18px;
}
._securitySection_l4pcu_156 {
  border-radius: 12px;
  padding: 24px 16px;
}
._sectionTitle_l4pcu_161 {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 3px solid var(--color-primary);
}
._securityOptions_l4pcu_170 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._securityOption_l4pcu_170 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-medium);
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
._securityOption_l4pcu_170:hover {
  background-color: var(--bg-option);
  transform: translate(2px);
}
._securityOption_l4pcu_170:active {
  transform: scale(0.98);
}
._optionLeft_l4pcu_196 {
  display: flex;
  align-items: center;
  gap: 16px;
}
._iconWrapper_l4pcu_202 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}
._iconWrapper_l4pcu_202 svg {
  width: 24px;
  height: 24px;
}
._optionLabel_l4pcu_216 {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
}
._optionRight_l4pcu_222 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._optionRight_l4pcu_222 svg {
  width: 18px;
  height: 18px;
  color: var(--color-secondary);
}
._editText_l4pcu_233 {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}
._bindText_l4pcu_239 {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 400;
}
._versionText_l4pcu_245 {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 480px) {
  ._settingsCenter_l4pcu_1 {
    padding: 16px;
  }
  ._profileSection_l4pcu_27,
  ._securitySection_l4pcu_156 {
    padding: 20px;
  }
  ._changeAvatar_l4pcu_56 {
    font-size: 13px;
  }
  ._avatarContainer_l4pcu_42 {
    width: 70px;
    height: 70px;
  }
}
._editPopupOverlay_l4pcu_268 {
  position: fixed;
  inset: 0;
  background: #000000b3;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: _fadeIn_l4pcu_1 0.2s ease-in-out;
  max-width: 500px;
  margin: 0 auto;
}
._editPopup_l4pcu_268 {
  background: var(--bg-wallet);
  border-radius: 16px;
  padding: 24px;
  max-width: 90%;
  width: 360px;
  box-shadow: 0 8px 32px #0000004d;
  animation: _slideUp_l4pcu_1 0.3s ease-out;
}
._editPopup_l4pcu_268 h3 {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
}
._editPopup_l4pcu_268 input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  color: #333;
  outline: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  margin-bottom: 20px;
}
._editPopup_l4pcu_268 input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
._editPopup_l4pcu_268 input::placeholder {
  color: #999;
}
._popupActions_l4pcu_321 {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
._cancelButton_l4pcu_327,
._saveButton_l4pcu_328 {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
}
._cancelButton_l4pcu_327:active,
._saveButton_l4pcu_328:active {
  transform: scale(0.98);
}
._cancelButton_l4pcu_327 {
  background: #f5f5f5;
  color: #666;
}
._cancelButton_l4pcu_327:hover {
  background: #e8e8e8;
}
._saveButton_l4pcu_328 {
  background: var(--color-primary);
  color: #fff;
}
._saveButton_l4pcu_328:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}
._saveButton_l4pcu_328:disabled:hover {
  background: #ccc;
}
._saveButton_l4pcu_328:disabled:active {
  transform: none;
}
._messagePopupOverlay_l4pcu_368 {
  position: fixed;
  inset: 0;
  background: #000000b3;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  backdrop-filter: blur(4px);
  animation: _fadeIn_l4pcu_1 0.2s ease-in-out;
}
._messagePopup_l4pcu_368 {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 90%;
  width: 320px;
  box-shadow: 0 8px 32px #0000004d;
  animation: _slideUp_l4pcu_1 0.3s ease-out;
}
._messagePopup_l4pcu_368 h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  text-align: center;
}
._messagePopup_l4pcu_368 p {
  margin: 0 0 20px;
  color: #666;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
._messagePopup_l4pcu_368 ._popupActions_l4pcu_321 {
  display: flex;
  justify-content: center;
}
._okButton_l4pcu_411 {
  padding: 10px 32px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
._okButton_l4pcu_411:active {
  transform: scale(0.98);
}
@keyframes _fadeIn_l4pcu_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_l4pcu_1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 480px) {
  ._editPopup_l4pcu_268 {
    width: 90%;
    padding: 20px;
  }
  ._editPopup_l4pcu_268 h3 {
    font-size: 18px;
  }
  ._editPopup_l4pcu_268 input {
    padding: 10px 14px;
    font-size: 14px;
  }
  ._cancelButton_l4pcu_327,
  ._saveButton_l4pcu_328 {
    padding: 10px 20px;
    font-size: 14px;
  }
  ._messagePopup_l4pcu_368 {
    width: 90%;
    padding: 20px;
  }
  ._messagePopup_l4pcu_368 h3 {
    font-size: 18px;
  }
  ._messagePopup_l4pcu_368 p {
    font-size: 14px;
  }
  ._okButton_l4pcu_411 {
    padding: 10px 28px;
    font-size: 14px;
  }
}
._avatarSelectionContainer_h3yki_1 {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e, #16213e);
  padding-bottom: 80px;
}
._content_h3yki_7 {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
._currentAvatar_h3yki_13 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: #ffffff0d;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}
._avatarPreview_h3yki_24 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-primary);
  box-shadow: 0 8px 24px #0000004d;
  margin-bottom: 12px;
}
._avatarPreview_h3yki_24 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._previewLabel_h3yki_39 {
  color: #ffffffb3;
  font-size: 14px;
  margin: 0;
}
._avatarGrid_h3yki_45 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
._avatarItem_h3yki_52 {
  background: #ffffff0d;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
._avatarItem_h3yki_52:hover {
  background: #ffffff14;
  transform: translateY(-2px);
}
._avatarItem_h3yki_52._selected_h3yki_64 {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
._avatarWrapper_h3yki_70 {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
}
._avatarWrapper_h3yki_70 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._selectedCheck_h3yki_83 {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
}
._selectedCheck_h3yki_83 svg {
  width: 24px;
  height: 24px;
}
._actions_h3yki_100 {
  display: flex;
  gap: 12px;
  position: sticky;
  bottom: 20px;
}
._cancelButton_h3yki_107,
._saveButton_h3yki_108 {
  flex: 1;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
._cancelButton_h3yki_107:disabled,
._saveButton_h3yki_108:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._cancelButton_h3yki_107 {
  background: #ffffff1a;
  color: #fff;
}
._cancelButton_h3yki_107:hover:not(:disabled) {
  background: #ffffff26;
}
._saveButton_h3yki_108 {
  background: var(--color-primary);
  color: #fff;
}
._saveButton_h3yki_108:hover:not(:disabled) {
  background: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}
._messagePopupOverlay_h3yki_141 {
  position: fixed;
  inset: 0;
  background: #000000b3;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
._messagePopup_h3yki_141 {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 90%;
  width: 320px;
  box-shadow: 0 8px 32px #0000004d;
}
._messagePopup_h3yki_141 h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: #333;
}
._messagePopup_h3yki_141 p {
  margin: 0 0 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
._popupActions_h3yki_175 {
  display: flex;
  justify-content: flex-end;
}
._okButton_h3yki_180 {
  padding: 10px 24px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media (max-width: 480px) {
  ._avatarGrid_h3yki_45 {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  ._avatarPreview_h3yki_24 {
    width: 100px;
    height: 100px;
  }
}
._passwordContainer_w8kky_1 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-page);
}
._passwordForm_w8kky_8 {
  flex: 1;
  padding: 1.5rem 1rem 5rem;
  overflow-y: auto;
}
._formCard_w8kky_15 {
  max-width: 500px;
  margin: 0 auto;
  background-color: var(--bg-medium);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px #0000004d;
}
._formTitle_w8kky_24 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1.5rem;
  text-align: center;
}
._alert_w8kky_32 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  padding: 0.5rem;
  margin-bottom: 10px;
}
._alert_w8kky_32 svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
._alert_w8kky_32 span {
  flex: 1;
}
._alertError_w8kky_50 {
  color: var(--color-error);
}
._alertSuccess_w8kky_54 {
  background-color: #00ecbe1a;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
._formGroup_w8kky_60 {
  margin-bottom: 1.5rem;
}
._formGroup_w8kky_60 label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-tertiary);
  margin-bottom: 0.5rem;
}
._formGroup_w8kky_60 input[type="text"],
._formGroup_w8kky_60 input[type="password"] {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: var(--bg-dark);
  border: 1px solid var(--bg-light);
  border-radius: 8px;
  color: var(--color-white);
  font-size: 1rem;
  transition: all 0.2s ease;
}
._formGroup_w8kky_60 input[type="text"]::placeholder,
._formGroup_w8kky_60 input[type="password"]::placeholder {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
._formGroup_w8kky_60 input[type="text"]:focus,
._formGroup_w8kky_60 input[type="password"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px #00ecbe1a;
}
._formGroup_w8kky_60 input[type="text"]:disabled,
._formGroup_w8kky_60 input[type="password"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._passwordInputContainer_w8kky_98 {
  position: relative;
  display: flex;
  align-items: center;
}
._passwordInputContainer_w8kky_98 input {
  padding-right: 3rem;
}
._passwordToggle_w8kky_107 {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
._passwordToggle_w8kky_107:hover {
  color: var(--color-primary);
}
._passwordToggle_w8kky_107:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._passwordToggle_w8kky_107 svg {
  width: 20px;
  height: 20px;
}
._passwordStrength_w8kky_132 {
  margin-top: 0.5rem;
  height: 4px;
  background-color: var(--bg-dark);
  border-radius: 2px;
  overflow: hidden;
}
._passwordStrengthBar_w8kky_140 {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}
._passwordStrengthBar_w8kky_140[data-strength="weak"] {
  width: 33%;
  background-color: var(--color-error);
}
._passwordStrengthBar_w8kky_140[data-strength="medium"] {
  width: 66%;
  background-color: #fbbf24;
}
._passwordStrengthBar_w8kky_140[data-strength="strong"] {
  width: 100%;
  background-color: var(--color-primary);
}
._passwordHint_w8kky_158 {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-light);
}
._otpGroup_w8kky_164 {
  margin-bottom: 1.5rem;
}
._otpGroup_w8kky_164 input {
  text-align: center;
  letter-spacing: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}
._otpTimer_w8kky_174 {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}
._resendOtp_w8kky_181 {
  margin-top: 0.75rem;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: block;
  width: 100%;
  text-align: center;
}
._resendOtp_w8kky_181:hover:not(:disabled) {
  opacity: 0.8;
}
._resendOtp_w8kky_181:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._btn_w8kky_202 {
  padding: 0.875rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
._btn_w8kky_202:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._btnPrimary_w8kky_217 {
  background: var(--gradient-button);
  color: var(--color-accent);
  margin-bottom: 1rem;
}
._btnPrimary_w8kky_217:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #00ecbe4d;
}
._btnPrimary_w8kky_217:active:not(:disabled) {
  transform: translateY(0);
}
._btnSecondary_w8kky_230 {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid var(--bg-light);
}
._btnSecondary_w8kky_230:hover:not(:disabled) {
  background-color: var(--bg-light);
}
._formActions_w8kky_239 {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (max-width: 640px) {
  ._passwordForm_w8kky_8 {
    padding: 1rem 0.75rem;
  }
  ._formCard_w8kky_15 {
    padding: 1.5rem;
  }
  ._formTitle_w8kky_24 {
    font-size: 1.5rem;
  }
}
._container_1is1r_1 {
  max-width: 500px;
  margin: 0 auto;
  background: var(--bg-dark);
  min-height: 100vh;
  padding: 20px 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
._bonusHeader_1is1r_10 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
._bonusItem_1is1r_20 {
  flex: 1;
  text-align: center;
}
._bonusItem_1is1r_20:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
._bonusLabel_1is1r_28 {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-bottom: 8px;
}
._bonusAmount_1is1r_34 {
  color: var(--color-white);
  font-size: 22px;
  font-weight: 600;
}
._detailsButton_1is1r_40 {
  width: 100%;
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
._detailsButton_1is1r_40:hover {
  background: #00ecbe1a;
}
._iconGrid_1is1r_57 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 24px;
}
._iconItem_1is1r_64 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10.668px;
}
._iconBox_1is1r_72 {
  width: max-content;
  height: max-content;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
._iconEmoji_1is1r_83 {
  font-size: 28px;
}
._iconLabel_1is1r_87 {
  color: var(--color-secondary);
  font-size: 12px;
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
}
._giftSection_1is1r_95 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 32px;
}
._cardSection_1is1r_103 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
._card_1is1r_103 {
  background: var(--bg-medium);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}
._card_1is1r_103:hover {
  transform: translateY(-2px);
}
._cardImage_1is1r_121 {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #ff6b8a, #ff8e6e);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
._cardImage_1is1r_121:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 30% 50%,
    rgba(255, 255, 255, 0.2),
    transparent 50%
  );
}
._cardImageAlt_1is1r_139 {
  background: linear-gradient(135deg, #ffd89b, #ffb86c);
}
._giftBox_1is1r_143 {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f55, #f99);
  border-radius: 8px;
  position: relative;
  transform: rotate(-15deg);
  box-shadow: 0 8px 16px #0000004d;
}
._giftBox_1is1r_143:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 12px;
  background: #fd8;
  border-radius: 2px;
}
._giftBox_1is1r_143:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 80%;
  height: 12px;
  background: #fd8;
  border-radius: 2px;
}
._notepadIcon_1is1r_175 {
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 8px 16px #0003;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #ff6b8a;
}
._notepadIcon_1is1r_175:after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  background: #fd4;
  border-radius: 50%;
}
._cardContent_1is1r_200 {
  padding: 12px;
}
._cardTitle_1is1r_204 {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}
._cardDescription_1is1r_211 {
  color: var(--color-text-light);
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
}
._bannerSection_1is1r_218 {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-medium);
}
._banner_1is1r_218 {
  background: linear-gradient(135deg, #06c, #003d7a);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}
._banner_1is1r_218:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
  opacity: 0.3;
}
._bannerContent_1is1r_245 {
  flex: 1;
  position: relative;
  z-index: 1;
}
._bannerLogo_1is1r_251 {
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.9;
}
._bannerTitle_1is1r_259 {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}
._bannerOffer_1is1r_267 {
  color: #fd0;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
._bannerValidity_1is1r_275 {
  color: var(--color-white);
  font-size: 10px;
  background: #fff3;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
}
._bannerImage_1is1r_284 {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
._diyaIcon_1is1r_293 {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #fd4, #f94, #f64);
  border-radius: 50% 50% 45% 45%;
  position: relative;
  box-shadow: 0 0 20px #fb49;
}
._diyaIcon_1is1r_293:before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
  width: 20px;
  height: 30px;
  background: linear-gradient(180deg, #ffdd44 0%, transparent 100%);
  border-radius: 50% 50% 0 0;
  animation: _flicker_1is1r_1 2s ease-in-out infinite;
}
@keyframes _flicker_1is1r_1 {
  0%,
  to {
    opacity: 1;
    transform: translate(-50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%) scale(1.1);
  }
}
._bannerFooter_1is1r_324 {
  background: var(--bg-medium);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 20px;
  text-align: center;
}
._chickenBanner_1is1r_333 {
  background: linear-gradient(135deg, #003d7a, #001a44);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}
._chickenBanner_1is1r_333:hover {
  transform: translateY(-2px);
}
._chickenBanner_1is1r_333:after {
  content: "Help";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: #fff3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-white);
}
._chickenBannerContent_1is1r_361 {
  position: relative;
  z-index: 1;
}
._chickenLogo_1is1r_366 {
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.9;
}
._chickenTitle_1is1r_374 {
  color: #fd0;
  font-size: 28px;
  font-weight: 900;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
}
._referralWrapper_1voj6_1 {
  min-height: 100vh;
  background: #000814;
  color: var(--color-white);
}
._referralContent_1voj6_7 {
  padding-bottom: calc(130px + env(safe-area-inset-bottom));
}
._banner_1voj6_11 {
  background-image: url(/_build/assets/invitation_bonus-D47EdAar.webp),
    linear-gradient(94deg, #f99937 2.72%, #ff6922 43.54%, #ff8039 98.54%);
  padding: 42px 16px 24px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-repeat: no-repeat;
  background-size: cover;
}
._bannerText_1voj6_22 {
  flex: 1;
  padding-right: 12px;
}
._bannerText_1voj6_22 ._title_1voj6_26 {
  font-size: 19.2px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 6px;
  line-height: 1.3;
}
._bannerText_1voj6_22 ._subtitle_1voj6_33 {
  font-size: 12.8px;
  font-weight: 500;
  color: var(--color-white);
  opacity: 0.95;
  margin-bottom: 3px;
  line-height: 1.4;
}
._bannerText_1voj6_22 ._activityLabel_1voj6_41 {
  font-size: 10.5px;
  color: var(--color-white);
  opacity: 0.85;
  margin-top: 10px;
  margin-bottom: 3px;
}
._bannerText_1voj6_22 ._date_1voj6_48 {
  font-size: 13px;
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: 0.3px;
}
._giftBox_1voj6_55 {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  position: relative;
}
._giftBox_1voj6_55 ._giftImage_1voj6_61 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
._navButtons_1voj6_67 {
  display: flex;
  justify-content: space-around;
  width: 90%;
  margin: 0 auto;
  background: var(--bg-time);
  padding: 12.08px 0;
  border-radius: 12px;
  position: relative;
  top: -12px;
}
._navButton_1voj6_67 {
  border: none;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  background: transparent;
}
._navButton_1voj6_67 ._iconBox_1voj6_90 {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._navButton_1voj6_67 ._iconBox_1voj6_90 ._invite_img_1voj6_97 {
  width: 45px;
  height: 45px;
}
._navButton_1voj6_67 span {
  font-size: 12.5px;
  color: #8da3c7;
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
}
._cancelButton_1voj6_109 {
  width: 24px;
  height: 24px;
}
._bonusCards_1voj6_114 {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._bonusCard_1voj6_114 {
  background: var(--bg-medium);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px #00000080;
}
._bonusHeader_1voj6_128 {
  height: 42.66px;
  background: var(--bg-medium);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border-bottom: 1px solid var(--bg-light);
}
._bonus_cont_1voj6_139 {
  display: flex;
  gap: 4px;
}
._bonusTag_1voj6_144 {
  width: 150px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--norm_green-color);
  border-top-left-radius: 10px;
  border-bottom-right-radius: 20px;
  padding: 0 1rem;
}
._bonusTag_1voj6_144 ._bonusNumber_1voj6_156 {
  width: 18px;
  height: 18px;
  background: var(--color-white);
  color: #00b896;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
._bonusTag_1voj6_144 ._bonusText_1voj6_168 {
  color: var(--color-white);
  font-size: 12px;
  font-weight: 400;
}
._closeBtn_1voj6_174 {
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.9;
}
._closeBtn_1voj6_174:hover {
  opacity: 1;
}
._amount_1voj6_190 {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
  padding-right: 10.668px;
  color: var(--norm_secondary-color);
  font-size: 13.8668px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
._detailsSection_1voj6_202 {
  width: 100%;
  padding: 14px 12px;
  background: #030f2999;
}
._detailRow_1voj6_208 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  background: var(--bg-wallet);
  margin-bottom: 0.2rem;
  border-radius: 0.2rem;
}
._detailRow_1voj6_208 ._label_1voj6_217 {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  font-size: 12.8px;
  font-weight: 600px;
  color: var(--color-tertiary);
}
._detailRow_1voj6_208 ._value_1voj6_225 {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  font-size: 12.8px;
  color: var(--color-tertiary);
  font-weight: 600;
}
._detailRow_1voj6_208 ._valueRed_1voj6_233 {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  font-size: 14.9332px;
  color: var(--norm_red-color);
  font-weight: 500;
}
._dottedDivider_1voj6_242 {
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%
  );
  background-size: 8px 1px;
  background-repeat: repeat-x;
  margin: 0 16px;
  position: relative;
}
._dottedDivider_1voj6_242:before {
  content: "";
  display: block;
  border-radius: 50%;
  background: var(--bg-dark);
  position: absolute;
  width: 23px;
  height: 23px;
  top: -10.42px;
  left: -26px;
}
._dottedDivider_1voj6_242:after {
  content: "";
  display: block;
  border-radius: 50%;
  background: var(--bg-dark);
  position: absolute;
  width: 23px;
  height: 23px;
  top: -10.42px;
  right: -26px;
}
._progressWrapper_1voj6_273 {
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #0a1e4666;
}
._progressItem_1voj6_281 {
  text-align: center;
  flex: 1;
}
._progressItem_1voj6_281 ._progressValue_1voj6_285 {
  font-size: 17.066px;
  font-weight: 500;
  color: var(--norm_secondary-color);
  margin-bottom: 6px;
}
._progressItem_1voj6_281 ._progressive_red_1voj6_291 {
  font-size: 17.066px;
  font-weight: 500;
  color: var(--norm_red-color);
}
._progressItem_1voj6_281 ._progressLabel_1voj6_296 {
  font-size: 12px;
  color: var(--color-secondary);
}
._verticalLine_1voj6_301 {
  width: 1px;
  height: 38px;
  background: #ffffff1f;
  margin: 0 16px;
}
._actionButton_1voj6_308 {
  margin: 14px 16px 16px;
  padding: 10px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  width: calc(100% - 32px);
  transition: transform 0.2s;
  background: var(--button_dis_color);
  color: #94a3b8;
  cursor: not-allowed;
}
._actionButton_1voj6_308:not(._completed_1voj6_322):not(:disabled) {
  background: var(--button_dis_color);
  color: #94a3b8;
  color: var(--color-white);
  cursor: pointer;
}
._actionButton_1voj6_308:not(._completed_1voj6_322):not(:disabled):active {
  transform: scale(0.98);
}
._actionButton_1voj6_308._completed_1voj6_322 {
  background: linear-gradient(135deg, #475569, #334155);
  color: #94a3b8;
}
@media (max-width: 380px) {
  ._banner_1voj6_11 {
    padding: 18px 14px 20px;
  }
  ._navButtons_1voj6_67 {
    padding: 14px 14px 18px;
    gap: 10px;
  }
  ._bonusCards_1voj6_114 {
    padding: 0 14px;
  }
}
._invitationCode_cont_1voj6_348 {
  flex-basis: 50%;
}
._codeDisplay_1voj6_352 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  font-weight: 600;
  color: #0091ff;
}
._inviteCode_label_1voj6_361 {
  text-align: center;
  color: #8da3c7;
}
._inviteCopy_cont_1voj6_366 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
._copyButton_1voj6_373 {
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--color-white);
  background: var(--norm_green-color);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
}
._refreshButton_1voj6_383 {
  display: flex;
  align-items: center;
  background: transparent;
}
._wrapper_gmf0m_1 {
  max-width: 500px;
  margin: 0 auto;
  background: var(--bg-dark);
  min-height: 100vh;
  color: var(--color-secondary);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
._content_gmf0m_10 {
  padding: 8px 16px 16px;
}
._header_gmf0m_15 {
  background: var(--bg-medium);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}
._header_gmf0m_15 p {
  margin: 0;
}
._header_gmf0m_15 p:last-child {
  margin-top: 8px;
  color: var(--color-secondary);
}
._tableContainer_gmf0m_31 {
  background: var(--bg-medium);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px #0000004d;
}
._tableHeader_gmf0m_39 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--sheet_nva_color);
  padding: 14px 0;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: var(--color-white);
}
._tableBody_gmf0m_50 ._row_gmf0m_50 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 16px 0;
  text-align: center;
  font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
._tableBody_gmf0m_50 ._row_gmf0m_50:last-child {
  border-bottom: none;
}
._tableBody_gmf0m_50 ._cell_gmf0m_61 {
  color: var(--color-secondary) !important;
  font-size: 14.9332px;
}
._cell_gmf0m_61 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 17.06px;
  font-weight: 500;
}
._rules_gmf0m_75 {
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 8px 16px 16px;
}
._rulesTitle_gmf0m_82 {
  background: var(--bg-banner);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  border-radius: 30px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px #0003;
}
._rulesList_gmf0m_94 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
._ruleItem_gmf0m_100 {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-secondary);
}
._ruleItem_gmf0m_100 p {
  margin: 0;
  flex: 1;
}
._dot_gmf0m_112 {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  transform: rotate(45deg);
  margin-top: 6px;
}
._agencyCenter_2rnr3_1 {
  background: var(--bg-dark);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Inter, sans-serif;
}
._agencyContent_2rnr3_10 {
  padding: 16px;
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}
._mainAgencyCard_2rnr3_16 {
  background: var(--bg-wallet);
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px #00000014;
}
._sectionTitle_2rnr3_24 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
._sectionTitle_2rnr3_24:before {
  content: "";
  width: 3px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 2px;
}
._statsContainer_2rnr3_41 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
._performanceSection_2rnr3_47 ._sectionTitle_2rnr3_24,
._financialSection_2rnr3_47 ._sectionTitle_2rnr3_24 {
  margin-bottom: 14px;
}
._performanceGrid_2rnr3_51 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
._performanceItem_2rnr3_57 {
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
._perfIcon_2rnr3_68 {
  font-size: 28px;
  color: var(--color-primary);
  margin-bottom: 4px;
}
._perfInfo_2rnr3_74 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
._perfNumber_2rnr3_81 {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-white);
  line-height: 1.2;
}
._perfLabel_2rnr3_88 {
  font-size: 11px;
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: 500;
}
._financialGrid_2rnr3_95 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
._financialItem_2rnr3_101 {
  background: var(--bg-medium);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
._finIcon_2rnr3_110 {
  font-size: 24px;
  color: var(--color-primary);
  margin-top: 2px;
}
._finInfo_2rnr3_116 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
._finLabel_2rnr3_123 {
  font-size: 12px;
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: 500;
}
._finValue_2rnr3_130 {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-white);
  line-height: 1.2;
}
._finChange_2rnr3_137 {
  font-size: 11px;
  color: var(--color-primary);
  margin-top: 2px;
  font-weight: 500;
}
._invitationSection_2rnr3_145 {
  background: var(--bg-wallet);
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px #00000014;
}
._invitationHeader_2rnr3_153 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
._invitationHeader_2rnr3_153 h3 {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
}
._headerBar_2rnr3_168 {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: #ef4444;
}
._resetLinkBtn_2rnr3_175 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #a855f7;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  transition: all 0.2s ease;
}
._resetLinkBtn_2rnr3_175 svg {
  font-size: 14px;
}
._resetLinkBtn_2rnr3_175:hover {
  opacity: 0.8;
}
._invitationCodeContainer_2rnr3_196 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px dashed #f59e0b;
  border-radius: 12px;
  padding: 16px 14px;
  margin-bottom: 12px;
  position: relative;
}
._invitationCodeCard_2rnr3_208 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
._invitationCode_2rnr3_196 {
  font-size: 24px;
  font-weight: 700;
  color: #92400e;
  letter-spacing: 2px;
}
._codeLabel_2rnr3_222 {
  font-size: 11px;
  color: #92400e;
  font-weight: 500;
}
._copyBtn_2rnr3_228 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  background: #fbbf24;
  border: none;
  color: #78350f;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px #fbbf244d;
}
._copyBtn_2rnr3_228:hover {
  background: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px #fbbf2466;
}
._copyBtn_2rnr3_228:active {
  transform: translateY(0);
}
._copyBtn_2rnr3_228._copied_2rnr3_253 {
  background: #10b981;
  color: #fff;
}
._invitationLinkBtn_2rnr3_258 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  border: none;
  color: var(--color-white);
  border-radius: 24px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._invitationLinkBtn_2rnr3_258:active {
  transform: translateY(0);
}
._invitationLinkBtn_2rnr3_258._copied_2rnr3_253 {
  background: #10b981;
}
._copySuccessMessage_2rnr3_283 {
  color: #10b981;
  font-size: 11px;
  margin-top: 4px;
  text-align: left;
  font-weight: 500;
}
._menuSection_2rnr3_292 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._menuItem_2rnr3_298 {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px #00000014;
}
._menuItemLeft_2rnr3_310 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._menuIcon_2rnr3_316 {
  font-size: 20px;
  color: #f59e0b;
}
._menuTitle_2rnr3_321 {
  font-size: 14px;
  color: var(--color-white);
  font-weight: 500;
}
._menuArrow_2rnr3_327 {
  font-size: 18px;
  color: #9ca3af;
}
._retryButton_2rnr3_333 {
  background: var(--gradient-button);
  color: var(--color-dark-text);
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  font-size: 14px;
}
._retryButton_2rnr3_333:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  ._performanceGrid_2rnr3_51 {
    grid-template-columns: repeat(3, 1fr);
  }
  ._financialGrid_2rnr3_95 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 360px) {
  ._performanceGrid_2rnr3_51 {
    gap: 8px;
  }
  ._performanceItem_2rnr3_57 {
    padding: 12px 8px;
  }
  ._perfIcon_2rnr3_68 {
    font-size: 24px;
  }
  ._perfNumber_2rnr3_81 {
    font-size: 18px;
  }
  ._perfLabel_2rnr3_88 {
    font-size: 10px;
  }
}
._teamReportWrapper_thri2_1 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  color: var(--color-tertiary);
  overflow-x: hidden;
}
._teamReportContent_thri2_11 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
._teamReportSum_thri2_18 {
  background: var(--color-white);
  box-shadow: 0 2px 8px #00000014;
}
._dateFilterContainer_thri2_23 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
  background: var(--bg-medium);
  position: relative;
  overflow: visible;
}
._dateFilterContainer_thri2_23::-webkit-scrollbar {
  display: none !important;
}
._dateFiltersWrapper_thri2_37 {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
._dateFiltersWrapper_thri2_37:before,
._dateFiltersWrapper_thri2_37:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
._dateFiltersWrapper_thri2_37:before {
  left: 0;
  background: linear-gradient(to right, #fff9, #fff0);
}
._dateFiltersWrapper_thri2_37:after {
  right: 0;
  background: linear-gradient(to left, #fff9, #fff0);
}
._dateFiltersWrapper_thri2_37[data-scroll="start"]:after,
._dateFiltersWrapper_thri2_37[data-scroll="middle"]:before,
._dateFiltersWrapper_thri2_37[data-scroll="middle"]:after,
._dateFiltersWrapper_thri2_37[data-scroll="end"]:before {
  opacity: 1;
}
._teamReportDateFilters_thri2_66 {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}
._teamReportDateFilters_thri2_66::-webkit-scrollbar {
  display: none !important;
}
._teamReportDateFilters_thri2_66 button {
  background: transparent;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 20px;
  transition: all 0.2s ease;
}
._teamReportDateFilters_thri2_66 button:hover {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--bg-dark);
}
._teamReportDateFilters_thri2_66 button._active_thri2_95 {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: var(--bg-dark);
  font-weight: 600;
}
._filterBtn_thri2_101 {
  background: var(--bg-wallet);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px #00000014;
}
._filterBtn_thri2_101 svg {
  width: 16px;
  height: 16px;
  color: #666;
}
._filterBtn_thri2_101:hover {
  border-color: #d0d0d0;
}
._filterBtn_thri2_101:active {
  transform: scale(0.98);
}
._teamReportSummary_thri2_130 {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--bg-medium);
}
._teamReportSummary_thri2_130 div {
  background: var(--bg-wallet);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
._teamReportSummary_thri2_130 div:before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}
._teamReportSummary_thri2_130 div p {
  font-size: 12px;
  color: #ffffffe6;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
}
._teamReportSummary_thri2_130 div p svg {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}
._teamReportSummary_thri2_130 div h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
._teamReportMyTeamsHeader_thri2_180 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--bg-wallet);
  border-bottom: 1px solid #e0e0e0;
  gap: 12px;
}
._teamReportMyTeamsHeader_thri2_180 h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
}
._headerActions_thri2_196 {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}
._headerActions_thri2_196 ._filterBtn_thri2_101,
._headerActions_thri2_196 ._dateBtn_thri2_204 {
  background: var(--color-white);
  color: #333;
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 1px 3px #00000014;
  border-radius: 12px;
}
._headerActions_thri2_196 ._filterBtn_thri2_101:hover,
._headerActions_thri2_196 ._dateBtn_thri2_204:hover {
  background: #f8f8f8;
  border-color: #d0d0d0;
}
._teamReportTiers_thri2_220 {
  display: flex;
  gap: 8px;
  padding: 16px;
  background: var(--bg-medium);
  position: relative;
}
._teamReportTiers_thri2_220 button {
  flex: 1;
  border: none;
  border-radius: 20px;
  padding: 9px 15px;
  font-weight: 600;
  font-size: 13px;
  color: #666;
  background: #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
._teamReportTiers_thri2_220 button:hover {
  background: #d0d0d0;
}
._teamReportTiers_thri2_220 button._active_thri2_95 {
  color: #fff;
  box-shadow: 0 2px 8px #0003;
}
._teamReportTiers_thri2_220 button:nth-child(1)._active_thri2_95 {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
._teamReportTiers_thri2_220 button:nth-child(2)._active_thri2_95 {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}
._teamReportTiers_thri2_220 button:nth-child(3)._active_thri2_95 {
  background: linear-gradient(135deg, #eab308, #ca8a04);
}
._teamReportTiers_thri2_220 button:nth-child(4)._active_thri2_95 {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
._teamReportTiers_thri2_220 button:nth-child(5)._active_thri2_95 {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
._teamReportTable_thri2_268 {
  background: var(--bg-wallet);
  border-radius: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
._teamReportTable_thri2_268 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
._teamReportTable_thri2_268 table thead {
  background: var(--bg-medium);
  position: sticky;
  top: 0;
  z-index: 10;
}
._teamReportTable_thri2_268 table th {
  padding: 10px 6px;
  text-align: left;
  font-weight: 600;
  color: var(--color-white);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._teamReportTable_thri2_268 table th:first-child {
  width: 18%;
  padding-left: 10px;
}
._teamReportTable_thri2_268 table th:nth-child(2) {
  width: 32%;
}
._teamReportTable_thri2_268 table th:nth-child(3) {
  width: 25%;
}
._teamReportTable_thri2_268 table th:last-child {
  width: 25%;
  padding-right: 10px;
}
._teamReportTable_thri2_268 table tbody {
  background: var(--bg-wallet);
}
._teamReportTable_thri2_268 table tbody tr {
  border-bottom: 0.1px solid var(--color-tertiary);
  transition: background-color 0.2s ease;
}
._teamReportTable_thri2_268 table tbody tr:last-child {
  border-bottom: none;
}
._teamReportTable_thri2_268 table tbody td {
  padding: 12px 6px;
  color: var(--bg-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._teamReportTable_thri2_268 table tbody td:first-child {
  padding-left: 10px;
  font-weight: 600;
  color: var(--color-secondary);
}
._teamReportTable_thri2_268 table tbody td:last-child {
  padding-right: 10px;
  font-weight: 600;
  color: var(--color-primary);
}
._teamReportTable_thri2_268 table tbody td:nth-child(2) {
  font-weight: 500;
  color: var(--color-secondary);
}
._noDataBox_thri2_349 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #999;
  min-height: 250px;
}
._noDataBox_thri2_349 p {
  margin-top: 12px;
  font-size: 14px;
  color: #999;
  font-weight: 500;
}
._illustration_thri2_365 {
  font-size: 48px;
  margin-bottom: 8px;
  opacity: 0.6;
  filter: grayscale(1);
}
._teamReportSearch_thri2_373 {
  padding: 4px 0;
  background: transparent;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
._teamReportSearch_thri2_373 ._searchContainer_thri2_380 {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 4px 8px;
  transition: all 0.2s;
  width: 100%;
  max-width: 180px;
}
._teamReportSearch_thri2_373 ._searchContainer_thri2_380:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.35);
}
._teamReportSearch_thri2_373
  ._searchContainer_thri2_380
  ._searchIcon_thri2_396 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-tertiary);
  margin-left: 4px;
  margin-right: 6px;
  font-size: 12px;
  flex-shrink: 0;
}
._teamReportSearch_thri2_373 ._searchContainer_thri2_380 input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px 0;
  font-size: 12px;
  background: transparent;
  color: #fff;
  min-width: 0;
}
._teamReportSearch_thri2_373 ._searchContainer_thri2_380 input::placeholder {
  color: #999;
  font-size: 11px;
}
._teamReportSummary_thri2_130 {
  gap: 8px;
  padding: 10px;
}
._teamReportSummary_thri2_130 div {
  padding: 14px 10px;
}
._teamReportSummary_thri2_130 div h3 {
  font-size: 18px;
}
._teamReportSummary_thri2_130 div p {
  font-size: 12px;
  gap: 4px;
}
._teamReportSummary_thri2_130 div p svg {
  width: 13px;
  height: 13px;
}
._teamReportTiers_thri2_220 {
  gap: 6px;
  padding: 10px;
}
._teamReportTiers_thri2_220 button {
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
}
._dateFilterContainer_thri2_23 {
  padding: 8px 10px;
  gap: 8px;
}
._teamReportMyTeamsHeader_thri2_180 {
  padding: 10px;
  gap: 8px;
}
._teamReportMyTeamsHeader_thri2_180 h3 {
  font-size: 14px;
  white-space: nowrap;
}
._headerActions_thri2_196 {
  flex: 1;
  min-width: 0;
}
._filterBtn_thri2_101 {
  font-size: 11px;
  padding: 6px 8px;
  gap: 4px;
  white-space: nowrap;
}
._filterBtn_thri2_101 svg {
  width: 14px;
  height: 14px;
}
._teamReportDateFilters_thri2_66 {
  gap: 6px;
}
._teamReportDateFilters_thri2_66 button {
  padding: 6px 12px;
  font-size: 12px;
}
@media (max-width: 380px) {
  ._teamReportTable_thri2_268 table {
    font-size: 11px;
  }
  ._teamReportTable_thri2_268 table th {
    padding: 8px 4px;
    font-size: 9px;
  }
  ._teamReportTable_thri2_268 table th:first-child {
    width: 16%;
    padding-left: 8px;
  }
  ._teamReportTable_thri2_268 table th:nth-child(2) {
    width: 34%;
  }
  ._teamReportTable_thri2_268 table th:nth-child(3) {
    width: 25%;
  }
  ._teamReportTable_thri2_268 table th:last-child {
    width: 25%;
    padding-right: 8px;
  }
  ._teamReportTable_thri2_268 table td {
    padding: 10px 4px;
    font-size: 10px;
  }
  ._teamReportTable_thri2_268 table td:first-child {
    padding-left: 8px;
  }
  ._teamReportTable_thri2_268 table td:last-child {
    padding-right: 8px;
  }
  ._teamReportSummary_thri2_130 div {
    padding: 12px 8px;
  }
  ._teamReportSummary_thri2_130 div h3 {
    font-size: 16px;
  }
  ._teamReportSummary_thri2_130 div p {
    font-size: 12px;
  }
  ._teamReportSummary_thri2_130 div p svg {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 360px) {
  ._teamReportTable_thri2_268 table th:first-child {
    width: 15%;
  }
  ._teamReportTable_thri2_268 table th:nth-child(2) {
    width: 35%;
  }
  ._teamReportTable_thri2_268 table th:nth-child(3) {
    width: 25%;
  }
  ._teamReportTable_thri2_268 table th:last-child {
    width: 25%;
  }
}
._inviterulesWrapper_ughum_1 {
  max-width: 500px;
  height: calc(100vh - 49px);
  padding: 1rem;
  overflow-y: scroll;
}
._inviterule_img_ughum_8 {
  width: 100%;
  object-fit: cover;
}
._registerContainer_hq5ou_1 {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  background: #05012b;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  position: relative;
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}
._registerContainer_hq5ou_1 ._logoSection_hq5ou_14 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1f3a, #0f1429);
  gap: 12px;
  padding: 10px 10px 0;
}
._registerContainer_hq5ou_1 ._logoSection_hq5ou_14 ._logo_hq5ou_14 {
  width: auto;
  height: 35px;
  filter: drop-shadow(0 2px 6px rgba(0, 236, 190, 0.3));
}
._registerContainer_hq5ou_1 ._logoSection_hq5ou_14 ._logoText_hq5ou_27 {
  font-size: 18px;
  font-weight: 700;
  color: #00ecbe;
  margin: 0;
  letter-spacing: 0.5px;
}
._registerContainer_hq5ou_1 ._header_hq5ou_34 {
  background: #011341;
  padding: 24px 21.3332px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
._registerContainer_hq5ou_1 ._header_hq5ou_34 ._headerContent_hq5ou_42 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  z-index: 2;
}
._registerContainer_hq5ou_1
  ._header_hq5ou_34
  ._headerContent_hq5ou_42
  ._titleSection_hq5ou_49
  ._title_hq5ou_49 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.2;
}
._registerContainer_hq5ou_1
  ._header_hq5ou_34
  ._headerContent_hq5ou_42
  ._titleSection_hq5ou_49
  ._subtitle_hq5ou_56 {
  color: #e3efff;
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}
._registerContainer_hq5ou_1 ._header_hq5ou_34 ._womanImage_hq5ou_62 {
  width: 180px;
  height: auto;
  position: absolute;
  right: 0;
  top: 20px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  z-index: 1;
}
._registerContainer_hq5ou_1 ._registerForm_hq5ou_71 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 21.3332px;
  min-height: 0;
}
._registerContainer_hq5ou_1 ._registerForm_hq5ou_71 ._inputGroup_hq5ou_78 {
  margin-bottom: 24px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._inputLabel_hq5ou_81 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #00ecbe;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._inputLabel_hq5ou_81
  ._labelIcon_hq5ou_90 {
  width: 20px;
  height: 20px;
  color: #00ecbe;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._inputLabel_hq5ou_81
  span {
  font-size: 16px;
  color: #e3efff;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._phoneInput_hq5ou_99 {
  display: flex;
  gap: 8px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._phoneInput_hq5ou_99
  ._countryCode_hq5ou_103 {
  background: #011341;
  border-radius: 14px;
  color: #92a8e3;
  padding: 14px 12px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  outline: none;
  width: 99.19px;
  height: 46.92px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._phoneInput_hq5ou_99
  ._countryCode_hq5ou_103:focus {
  border-color: #00ecbe;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._phoneInput_hq5ou_99
  ._countryCode_hq5ou_103
  option {
  background: #011341;
  color: #fff;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._phoneInput_hq5ou_99
  ._input_hq5ou_78 {
  flex: 1;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._verificationInput_hq5ou_125 {
  display: flex;
  gap: 8px;
  align-items: center;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._verificationInput_hq5ou_125
  ._input_hq5ou_78 {
  flex: 1;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._verificationInput_hq5ou_125
  ._sendButton_hq5ou_133 {
  background: linear-gradient(180deg, #7afec3, #02afb6);
  border: none;
  border-radius: 14px;
  color: #001845;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  cursor: pointer;
  height: 46.92px;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 80px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._verificationInput_hq5ou_125
  ._sendButton_hq5ou_133:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #00ecbe4d;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._verificationInput_hq5ou_125
  ._sendButton_hq5ou_133:disabled {
  background: #ffffff26;
  color: #ffffff80;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._passwordInput_hq5ou_158 {
  position: relative;
  display: flex;
  align-items: center;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._passwordInput_hq5ou_158
  ._input_hq5ou_78 {
  flex: 1;
  padding-right: 48px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._passwordInput_hq5ou_158
  ._eyeButton_hq5ou_167 {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #92a8e3;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._passwordInput_hq5ou_158
  ._eyeButton_hq5ou_167:hover {
  color: #00ecbe;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._passwordInput_hq5ou_158
  ._eyeButton_hq5ou_167
  svg {
  width: 20px;
  height: 20px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._input_hq5ou_78 {
  width: 100%;
  background: #011341;
  border-radius: 14px;
  color: #fff;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  border: none;
  height: 46.92px;
  transition: all 0.3s ease;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._input_hq5ou_78:focus {
  border: 1px solid var(--color-primary);
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._input_hq5ou_78::placeholder {
  color: #ffffff4d;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._inputGroup_hq5ou_78
  ._input_hq5ou_78:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._registerContainer_hq5ou_1 ._registerForm_hq5ou_71 ._checkboxLabel_hq5ou_209 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  cursor: pointer;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._checkboxLabel_hq5ou_209
  ._checkbox_hq5ou_209 {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #00ecbe;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  flex-shrink: 0;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._checkboxLabel_hq5ou_209
  ._checkbox_hq5ou_209:checked {
  background: #00ecbe;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._checkboxLabel_hq5ou_209
  ._checkbox_hq5ou_209:checked:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #001845;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._checkboxLabel_hq5ou_209
  ._checkboxText_hq5ou_242 {
  color: #92a8e3;
  font-size: 12px;
  line-height: 1.4;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._checkboxLabel_hq5ou_209
  ._checkboxText_hq5ou_242
  ._privacyLink_hq5ou_247 {
  color: #00ecbe;
  cursor: pointer;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._checkboxLabel_hq5ou_209
  ._checkboxText_hq5ou_242
  ._privacyLink_hq5ou_247:hover {
  text-decoration: underline;
}
._registerContainer_hq5ou_1 ._registerForm_hq5ou_71 ._errorMessage_hq5ou_254 {
  background: #ff444426;
  color: #f44;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
  border-left: 3px solid #ff4444;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263 {
  margin-top: auto;
  padding: 0 20px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263
  ._registerButton_hq5ou_267 {
  width: 100%;
  background: linear-gradient(180deg, #7afec3, #02afb6);
  border: none;
  border-radius: 25px;
  color: #001845;
  font-size: 19.2px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 16px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263
  ._registerButton_hq5ou_267:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #00ecbe4d;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263
  ._registerButton_hq5ou_267:active {
  transform: translateY(0);
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263
  ._registerButton_hq5ou_267:disabled {
  background: #ffffff26;
  color: #ffffff80;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263
  ._loginButton_hq5ou_294 {
  width: 100%;
  background: transparent;
  border: 1px solid #00ecbe;
  border-radius: 25px;
  color: #92a8e3;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263
  ._loginButton_hq5ou_294
  ._loginText_hq5ou_306 {
  color: #00ecbe;
  margin-left: 4px;
}
._registerContainer_hq5ou_1
  ._registerForm_hq5ou_71
  ._buttonContainer_hq5ou_263
  ._loginButton_hq5ou_294:hover {
  background: #00ecbe1a;
}
@media (max-width: 480px) {
  ._registerContainer_hq5ou_1 ._header_hq5ou_34 {
    padding: 20px 16px;
  }
  ._registerContainer_hq5ou_1 ._header_hq5ou_34 ._headerContent_hq5ou_42 {
    gap: 16px;
  }
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._logoSection_hq5ou_14
    ._logo_hq5ou_14 {
    width: 50px;
  }
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._logoSection_hq5ou_14
    ._logoText_hq5ou_27 {
    font-size: 16px;
  }
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._titleSection_hq5ou_49
    ._title_hq5ou_49 {
    font-size: 24px;
  }
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._titleSection_hq5ou_49
    ._subtitle_hq5ou_56 {
    font-size: 13px;
  }
  ._registerContainer_hq5ou_1 ._header_hq5ou_34 ._womanImage_hq5ou_62 {
    width: 160px;
    top: 30px;
  }
  ._registerContainer_hq5ou_1 ._registerForm_hq5ou_71 {
    padding: 24px 16px;
  }
  ._registerContainer_hq5ou_1 ._registerForm_hq5ou_71 ._inputGroup_hq5ou_78 {
    margin-bottom: 20px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._inputGroup_hq5ou_78
    ._inputLabel_hq5ou_81 {
    font-size: 13px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._inputGroup_hq5ou_78
    ._inputLabel_hq5ou_81
    ._labelIcon_hq5ou_90 {
    width: 18px;
    height: 18px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._inputGroup_hq5ou_78
    ._inputLabel_hq5ou_81
    span {
    font-size: 15px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._inputGroup_hq5ou_78
    ._phoneInput_hq5ou_99
    ._countryCode_hq5ou_103 {
    font-size: 13px;
    padding: 12px 10px;
    height: 44px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._inputGroup_hq5ou_78
    ._verificationInput_hq5ou_125
    ._sendButton_hq5ou_133 {
    font-size: 13px;
    padding: 12px 20px;
    height: 44px;
    min-width: 70px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._inputGroup_hq5ou_78
    ._input_hq5ou_78 {
    font-size: 13px;
    padding: 12px 14px;
    height: 44px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._inputGroup_hq5ou_78
    ._passwordInput_hq5ou_158
    ._eyeButton_hq5ou_167
    svg {
    width: 18px;
    height: 18px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._checkboxLabel_hq5ou_209
    ._checkboxText_hq5ou_242 {
    font-size: 11px;
  }
  ._registerContainer_hq5ou_1 ._registerForm_hq5ou_71 ._errorMessage_hq5ou_254 {
    font-size: 13px;
    padding: 10px 14px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._buttonContainer_hq5ou_263 {
    padding: 0 10px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._buttonContainer_hq5ou_263
    ._registerButton_hq5ou_267 {
    font-size: 17px;
    padding: 10px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._buttonContainer_hq5ou_263
    ._loginButton_hq5ou_294 {
    font-size: 15px;
    padding: 10px;
  }
}
@media (max-width: 360px) {
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._logoSection_hq5ou_14
    ._logo_hq5ou_14 {
    width: 45px;
  }
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._logoSection_hq5ou_14
    ._logoText_hq5ou_27 {
    font-size: 14px;
  }
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._titleSection_hq5ou_49
    ._title_hq5ou_49 {
    font-size: 22px;
  }
  ._registerContainer_hq5ou_1
    ._header_hq5ou_34
    ._headerContent_hq5ou_42
    ._titleSection_hq5ou_49
    ._subtitle_hq5ou_56 {
    font-size: 12px;
  }
  ._registerContainer_hq5ou_1 ._header_hq5ou_34 ._womanImage_hq5ou_62 {
    width: 140px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._buttonContainer_hq5ou_263
    ._registerButton_hq5ou_267 {
    font-size: 16px;
  }
  ._registerContainer_hq5ou_1
    ._registerForm_hq5ou_71
    ._buttonContainer_hq5ou_263
    ._loginButton_hq5ou_294 {
    font-size: 14px;
  }
}
._container_14dik_1 {
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(180deg, #0a0e27, #1a1f3a);
  min-height: 100vh;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  overflow-x: hidden;
}
._categoryNav_14dik_11 {
  display: flex;
  gap: 10px;
  padding: 16px 12px 12px;
  overflow-x: auto;
  background: #0a0e27;
  scroll-behavior: smooth;
}
._categoryNav_14dik_11::-webkit-scrollbar {
  height: 4px;
}
._categoryNav_14dik_11::-webkit-scrollbar-track {
  background: #ffffff0d;
}
._categoryNav_14dik_11::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 2px;
}
._categoryBtn_14dik_30 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 101px;
  height: 54px;
  background: var(--bg-medium);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 0;
  flex-shrink: 0;
  color: var(--color-secondary);
}
._categoryBtn_14dik_30._active_14dik_46 {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  box-shadow: 0 4px 20px #00f5a066;
  color: var(--bg-dark);
}
._categoryIcon_14dik_52 {
  width: max-content;
  height: max-content;
}
._categoryName_14dik_57 {
  font-size: 12.8px;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
}
._subCategoryNav_14dik_64 {
  display: flex;
  gap: 12px;
  padding: 16px 12px;
  overflow-x: auto;
  background: #0f1329;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  scroll-behavior: smooth;
}
._subCategoryNav_14dik_64::-webkit-scrollbar {
  height: 4px;
}
._subCategoryNav_14dik_64::-webkit-scrollbar-track {
  background: #ffffff0d;
}
._subCategoryNav_14dik_64::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 2px;
}
._subCategoryBtn_14dik_84 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 65px;
  height: 54px;
  background: #1e2442;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}
._subCategoryBtn_14dik_84:hover {
  background: #252b4a;
  transform: scale(1.05);
}
._subCategoryBtn_14dik_84._active_14dik_46 {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
}
._subCategoryBtn_14dik_84._active_14dik_46 ._subCategoryText_14dik_106 {
  color: #0a0e27;
  font-weight: 500;
}
._subCategoryText_14dik_106 {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.5px;
}
._content_14dik_120 {
  padding: 0 12px 20px;
}
._sectionHeader_14dik_124 {
  padding: 16px 0 12px;
}
._title_14dik_128 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}
._providerTitle_14dik_136 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 0;
}
._providerIcon_14dik_144 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
._providerName_14dik_150 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.5px;
}
._gamesGrid_14dik_157 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
._gameCard_14dik_164 {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
._gameCard_14dik_164:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px #0006;
}
._gameCard_14dik_164:hover ._gameImage_14dik_175 {
  transform: scale(1.05);
}
._jiliBadge_14dik_179 {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, gold, #ffed4e);
  color: #8a4a1a;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px #ffd70066;
}
._gameImage_14dik_175 {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
  padding: 12px 8px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  background-color: #1a1f3a;
}
._gameImage_14dik_175 img {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
}
._gameImage_14dik_175 ._shimmerCard_14dik_212 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
._gameTitle_14dik_220 {
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  width: 100%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
  line-height: 1.2;
}
._gameName_14dik_233 {
  font-size: 11px;
  font-weight: 600;
  color: #b8bfd8;
  text-align: center;
  padding: 8px 4px 0;
  line-height: 1.3;
  flex-wrap: wrap;
}
._allGamesBtn_14dik_243 {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
._allGamesBtn_14dik_243 button {
  background: linear-gradient(135deg, #00f5a0, #00d9f5);
  color: #0a0e27;
  border: none;
  padding: 12px 48px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px #00f5a04d;
}
._allGamesBtn_14dik_243 button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #00f5a066;
}
._allGamesBtn_14dik_243 button:active {
  transform: translateY(0);
}
._lottery_container_14dik_268 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
._lottery_container_14dik_268 ._lottery_card_14dik_274 {
  height: 90.66px;
  display: flex;
  justify-content: space-between;
  background: var(--bg-time);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
._lottery_container_14dik_268 ._lottery_card_14dik_274:hover {
  cursor: pointer;
}
._lottery_container_14dik_268 ._lottery_card_14dik_274 ._lottery_img_14dik_285 {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
._lottery_container_14dik_268
  ._lottery_card_14dik_274
  ._lottery_img_14dik_285
  img {
  width: 153.81px;
  height: 90.66px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
._lottery_container_14dik_268 ._lotteryCard_leftCont_14dik_295 {
  padding: 12px;
}
._lottery_container_14dik_268
  ._lotteryCard_leftCont_14dik_295
  ._lottery_name_14dik_298 {
  font-size: 18.668px;
  font-weight: 700;
  color: var(--color-tertiary);
}
._lottery_container_14dik_268
  ._lotteryCard_leftCont_14dik_295
  ._lottery_text_14dik_303 {
  font-size: 11.7332px;
  color: var(--color-secondary);
}
._shimmerCard_14dik_212 {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #2a3154, #353d66, #2a3154);
  background-size: 200% 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
._shimmer_14dik_212 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 191, 216, 0.4) 50%,
    transparent 100%
  );
  animation: _shimmer_14dik_212 1.5s infinite;
}
@keyframes _shimmer_14dik_212 {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(100%);
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
._gamesContainer_sw09i_13 {
  width: 100vw;
  max-width: 500px;
  height: 100vh;
  position: fixed;
  top: 49.05px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  overflow: hidden;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  -webkit-overflow-scrolling: touch;
}
._gamesContainer_sw09i_13._fadeIn_sw09i_33 {
  opacity: 1 !important;
}
._gamesTopbar_sw09i_37 {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  max-width: 500px;
  height: 49.05px;
  background: #fffffff2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229, 229, 229, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  box-shadow: 0 2px 20px #00000014;
  box-sizing: border-box;
  min-width: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background-color;
}
._headerBack_sw09i_61 {
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  background: #0000000a;
  border: 1px solid rgba(0, 0, 0, 0.08);
  will-change: transform, background-color;
}
._headerBack_sw09i_61:hover {
  background-color: #00000014;
  transform: scale(1.05);
}
._headerBack_sw09i_61:active {
  transform: scale(0.95);
}
._headerBack_sw09i_61 svg {
  display: block;
}
._headerTitle_sw09i_86 {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: capitalize;
}
._balanceText_sw09i_92 {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
._game_mainContent_sw09i_106 {
  padding-top: 0;
  height: 100%;
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-dark);
}
._loadingContainer_sw09i_119 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  gap: 20px;
  animation: _fadeInUp_sw09i_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-dark);
}
._spinner_sw09i_130 {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(116, 75, 162, 0.1);
  border-top: 4px solid var(--color-white);
  border-radius: 50%;
  animation: _smoothSpin_sw09i_1 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 4px 12px #744ba226;
  will-change: transform;
}
._loadingText_sw09i_141 {
  color: #4a5568;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  animation: _pulse_sw09i_1 2s ease-in-out infinite;
}
._loadingBar_sw09i_149 {
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-white),
    transparent
  );
  margin-top: 8px;
  border-radius: 1px;
  animation: _shimmer_sw09i_1 1.5s ease-in-out infinite;
}
._iframeContainer_sw09i_158 {
  width: 100%;
  height: calc(100dvh - 49.05px);
  border-radius: 0;
  overflow: hidden;
  animation: _fadeInScale_sw09i_1 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 0 1px #0000000d;
}
._gameIframe_sw09i_167 {
  width: 100%;
  height: 100%;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--bg-dark);
  display: block;
}
._errorContainer_sw09i_176 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 49.05px);
  height: calc(100svh - 49.05px);
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  text-align: center;
  animation: _fadeInUp_sw09i_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-dark);
}
._errorIcon_sw09i_190 {
  animation: _bounceIn_sw09i_1 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._errorIcon_sw09i_190 svg {
  display: block;
}
._errorIcon_sw09i_190 svg circle {
  animation: _drawCircle_sw09i_1 1s ease-in-out;
}
._errorIcon_sw09i_190 svg line:nth-child(2) {
  animation: _drawLine_sw09i_1 0.5s ease-in-out 0.5s both;
}
._errorIcon_sw09i_190 svg line:nth-child(3) {
  animation: _drawLine_sw09i_1 0.5s ease-in-out 0.7s both;
}
._errorContent_sw09i_206 h3 {
  margin: 0 0 8px;
  color: #e53e3e;
  font-size: 20px;
  font-weight: 600;
  animation: _slideUp_sw09i_1 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}
._errorContent_sw09i_206 p {
  margin: 0;
  color: #718096;
  font-size: 14px;
  animation: _slideUp_sw09i_1 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
._retryButton_sw09i_220 {
  background: linear-gradient(var(--gradient-start), var(--gradient-end));
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px #744ba24d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: _slideUp_sw09i_1 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
}
._retryButton_sw09i_220 span {
  position: relative;
  z-index: 1;
}
._retryButton_sw09i_220:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px #744ba266;
}
._retryButton_sw09i_220:hover ._ripple_sw09i_246 {
  width: 300px;
  height: 300px;
}
._retryButton_sw09i_220:active {
  transform: translateY(0) scale(0.98);
}
._ripple_sw09i_246 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #ffffff1a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0000000d;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 10px;
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a67d8, #6b46c1);
}
@keyframes _smoothSpin_sw09i_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes _fadeInUp_sw09i_1 {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeInScale_sw09i_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _bounceIn_sw09i_1 {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes _slideUp_sw09i_1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _pulse_sw09i_1 {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes _shimmer_sw09i_1 {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(200%);
  }
}
@keyframes _drawCircle_sw09i_1 {
  0% {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: 100 0;
  }
}
@keyframes _drawLine_sw09i_1 {
  0% {
    stroke-dasharray: 0 10;
  }
  to {
    stroke-dasharray: 10 0;
  }
}
@media (max-width: 768px) {
  ._headerBack_sw09i_61 {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
  }
  ._spinner_sw09i_130 {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 480px) {
  ._headerBack_sw09i_61 {
    min-width: 32px;
    min-height: 32px;
    padding: 4px;
  }
  ._loadingText_sw09i_141 {
    font-size: 14px;
  }
  ._retryButton_sw09i_220 {
    padding: 12px 24px;
    font-size: 13px;
  }
}
@media (max-width: 500px) {
  ._gamesContainer_sw09i_13 {
    width: 100vw;
    max-width: none;
    margin: 0;
    left: 0;
    transform: none;
    top: 49.05px;
  }
  ._gamesTopbar_sw09i_37 {
    width: 100vw;
    max-width: none;
    left: 0;
    transform: none;
    margin: 0;
  }
}
@media (max-width: 390px) {
  ._gamesContainer_sw09i_13 {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    top: 49.05px;
  }
  ._gamesTopbar_sw09i_37 {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    margin: 0;
    padding: 0 12px;
  }
  ._headerBack_sw09i_61 {
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
  }
  ._balanceText_sw09i_92 {
    font-size: 12px;
    max-width: max-content;
  }
  ._errorIcon_sw09i_190 svg {
    width: 48px;
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@supports (-webkit-touch-callout: none) {
  ._gamesContainer_sw09i_13 {
    height: calc(-webkit-fill-available - 49.05px);
    top: 49.05px;
  }
  ._errorContainer_sw09i_176 {
    height: calc(-webkit-fill-available - 49.05px);
  }
  ._game_mainContent_sw09i_106 {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
body,
._game_mainContent_sw09i_106 {
  overscroll-behavior-y: contain;
}
._audioMessage_1sn6v_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 0 8px;
  width: 100%;
  min-width: auto;
  max-width: none;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 767px) {
  ._audioMessage_1sn6v_1 {
    gap: 6px;
    padding: 6px 8px 0 6px;
  }
}
@media (max-width: 479px) {
  ._audioMessage_1sn6v_1 {
    gap: 5px;
    padding: 5px 6px 0 5px;
  }
}
@media (max-width: 319px) {
  ._audioMessage_1sn6v_1 {
    gap: 4px;
    padding: 4px 5px 0 4px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._audioMessage_1sn6v_1 {
    padding: 4px 6px 0 4px;
    gap: 5px;
  }
}
@media (min-width: 1024px) {
  ._audioMessage_1sn6v_1 {
    overflow: hidden;
  }
}
._speedButton_1sn6v_43 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #00000014;
  color: #667781;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
@media (max-width: 767px) {
  ._speedButton_1sn6v_43 {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
}
@media (max-width: 479px) {
  ._speedButton_1sn6v_43 {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}
@media (max-width: 319px) {
  ._speedButton_1sn6v_43 {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._speedButton_1sn6v_43 {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}
._speedButton_1sn6v_43:hover {
  background: #0000001f;
}
._speedButton_1sn6v_43:active {
  transform: scale(0.95);
}
@media (hover: none) {
  ._speedButton_1sn6v_43:hover {
    background: #00000014;
  }
  ._speedButton_1sn6v_43:active {
    background: #00000026;
  }
}
._playButton_1sn6v_102 {
  width: 40px;
  height: 40px;
  border: none;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  background: transparent;
}
@media (max-width: 767px) {
  ._playButton_1sn6v_102 {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 479px) {
  ._playButton_1sn6v_102 {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 319px) {
  ._playButton_1sn6v_102 {
    width: 28px;
    height: 28px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._playButton_1sn6v_102 {
    width: 32px;
    height: 32px;
  }
}
._playButton_1sn6v_102 svg {
  width: 26px;
  height: 26px;
}
@media (max-width: 767px) {
  ._playButton_1sn6v_102 svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 479px) {
  ._playButton_1sn6v_102 svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 319px) {
  ._playButton_1sn6v_102 svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._playButton_1sn6v_102 svg {
    width: 20px;
    height: 20px;
  }
}
._playButton_1sn6v_102:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._playButton_1sn6v_102:not(:disabled):hover {
  transform: scale(1.05);
}
._playButton_1sn6v_102:not(:disabled):active {
  transform: scale(0.95);
}
@media (hover: none) {
  ._playButton_1sn6v_102:not(:disabled):hover {
    transform: scale(1);
  }
  ._playButton_1sn6v_102:not(:disabled):active {
    transform: scale(0.95);
  }
}
._waveformContainer_1sn6v_186 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  ._waveformContainer_1sn6v_186 {
    gap: 6px;
  }
}
@media (max-width: 479px) {
  ._waveformContainer_1sn6v_186 {
    gap: 5px;
  }
}
@media (max-width: 319px) {
  ._waveformContainer_1sn6v_186 {
    gap: 4px;
  }
}
._waveform_1sn6v_186 {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 2px 0;
  position: relative;
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 767px) {
  ._waveform_1sn6v_186 {
    height: 30px;
  }
}
@media (max-width: 479px) {
  ._waveform_1sn6v_186 {
    height: 28px;
  }
}
@media (max-width: 319px) {
  ._waveform_1sn6v_186 {
    height: 26px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._waveform_1sn6v_186 {
    height: 26px;
  }
}
@media (min-width: 1024px) {
  ._waveform_1sn6v_186 {
    overflow: hidden;
  }
}
._waveform_1sn6v_186:active {
  cursor: grabbing;
}
._bars_1sn6v_252 {
  display: flex;
  align-items: center;
  gap: 1.5px;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  ._bars_1sn6v_252 {
    gap: 1.2px;
  }
}
@media (max-width: 479px) {
  ._bars_1sn6v_252 {
    gap: 1px;
  }
}
@media (max-width: 319px) {
  ._bars_1sn6v_252 {
    gap: 0.8px;
  }
}
._bar_1sn6v_252 {
  flex: 1;
  background: #0003;
  border-radius: 2px;
  min-width: 2px;
  max-width: 3px;
  transition: background 0.15s ease;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  ._bar_1sn6v_252 {
    min-width: 1.8px;
    max-width: 2.8px;
    border-radius: 1.5px;
  }
}
@media (max-width: 479px) {
  ._bar_1sn6v_252 {
    min-width: 1.5px;
    max-width: 2.5px;
    border-radius: 1px;
  }
}
@media (max-width: 319px) {
  ._bar_1sn6v_252 {
    min-width: 1.2px;
    max-width: 2px;
  }
}
._bar_1sn6v_252._active_1sn6v_307 {
  background: #000;
}
._seekerDot_1sn6v_311 {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  transition: left 0.05s linear, transform 0.1s ease, width 0.1s ease,
    height 0.1s ease;
  box-shadow: 0 1px 3px #0000004d;
  cursor: grab;
}
@media (max-width: 767px) {
  ._seekerDot_1sn6v_311 {
    width: 11px;
    height: 11px;
    box-shadow: 0 1px 2px #0000004d;
  }
}
@media (max-width: 479px) {
  ._seekerDot_1sn6v_311 {
    width: 10px;
    height: 10px;
  }
}
@media (max-width: 319px) {
  ._seekerDot_1sn6v_311 {
    width: 9px;
    height: 9px;
    box-shadow: 0 0.5px 2px #0000004d;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._seekerDot_1sn6v_311 {
    width: 10px;
    height: 10px;
  }
}
._seekerDot_1sn6v_311._dragging_1sn6v_351 {
  transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease;
  transform: translate(-50%, -50%) scale(1.2);
}
@media (max-width: 767px) {
  ._seekerDot_1sn6v_311._dragging_1sn6v_351 {
    transform: translate(-50%, -50%) scale(1.3);
  }
}
@media (max-width: 479px) {
  ._seekerDot_1sn6v_311._dragging_1sn6v_351 {
    transform: translate(-50%, -50%) scale(1.4);
  }
}
._waveform_1sn6v_186:active ._seekerDot_1sn6v_311 {
  cursor: grabbing;
}
._timeDisplay_1sn6v_370 {
  font-size: 12px;
  color: #667781;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 32px;
}
@media (max-width: 767px) {
  ._timeDisplay_1sn6v_370 {
    font-size: 11px;
    min-width: 30px;
  }
}
@media (max-width: 479px) {
  ._timeDisplay_1sn6v_370 {
    font-size: 10px;
    min-width: 28px;
  }
}
@media (max-width: 319px) {
  ._timeDisplay_1sn6v_370 {
    font-size: 9px;
    min-width: 26px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._timeDisplay_1sn6v_370 {
    font-size: 10px;
  }
}
._messageMeta_1sn6v_402 {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  bottom: 4px;
  right: 8px;
}
@media (max-width: 767px) {
  ._messageMeta_1sn6v_402 {
    gap: 3px;
    bottom: 3px;
    right: 6px;
  }
}
@media (max-width: 479px) {
  ._messageMeta_1sn6v_402 {
    gap: 2px;
    bottom: 2px;
    right: 5px;
  }
}
._messageTime_1sn6v_425 {
  font-size: 11px;
  color: #00000073;
}
@media (max-width: 767px) {
  ._messageTime_1sn6v_425 {
    font-size: 10px;
  }
}
@media (max-width: 479px) {
  ._messageTime_1sn6v_425 {
    font-size: 9px;
  }
}
@media (max-width: 319px) {
  ._messageTime_1sn6v_425 {
    font-size: 8px;
  }
}
._checkMarks_1sn6v_445 {
  display: block;
  margin-bottom: -1px;
}
@media (max-width: 479px) {
  ._checkMarks_1sn6v_445 {
    font-size: 13px;
  }
}
@media (max-width: 319px) {
  ._checkMarks_1sn6v_445 {
    font-size: 12px;
  }
}
._received_1sn6v_460 {
  background: #fff;
}
._received_1sn6v_460 ._speedButton_1sn6v_43 {
  background: #00000014;
  color: #667781;
}
._received_1sn6v_460 ._speedButton_1sn6v_43:hover {
  background: #0000001f;
}
@media (hover: none) {
  ._received_1sn6v_460 ._speedButton_1sn6v_43:hover {
    background: #00000014;
  }
  ._received_1sn6v_460 ._speedButton_1sn6v_43:active {
    background: #00000026;
  }
}
._received_1sn6v_460 ._playButton_1sn6v_102 {
  background: #fff;
  color: #000;
}
._received_1sn6v_460 ._bar_1sn6v_252 {
  background: #0003;
}
._received_1sn6v_460 ._bar_1sn6v_252._active_1sn6v_307,
._received_1sn6v_460 ._seekerDot_1sn6v_311 {
  background: #000;
}
._received_1sn6v_460 ._timeDisplay_1sn6v_370 {
  color: #667781;
}
._received_1sn6v_460 ._messageTime_1sn6v_425 {
  color: #00000073;
}
._sent_1sn6v_498 ._bar_1sn6v_252 {
  background: #0003;
}
._sent_1sn6v_498 ._bar_1sn6v_252._active_1sn6v_307,
._sent_1sn6v_498 ._seekerDot_1sn6v_311 {
  background: #000;
}
@media (hover: none) and (pointer: coarse) {
  ._speedButton_1sn6v_43,
  ._playButton_1sn6v_102 {
    min-width: 44px;
    min-height: 44px;
  }
  ._waveform_1sn6v_186 {
    padding: 8px 0;
  }
  ._seekerDot_1sn6v_311 {
    width: 14px;
    height: 14px;
  }
}
@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
  ._seekerDot_1sn6v_311 {
    width: 13px;
    height: 13px;
  }
}
@media (hover: none) and (pointer: coarse) and (max-width: 479px) {
  ._seekerDot_1sn6v_311 {
    width: 12px;
    height: 12px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  ._bar_1sn6v_252 {
    border-radius: 1.5px;
  }
  ._seekerDot_1sn6v_311 {
    box-shadow: 0 1px 4px #00000059;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._bar_1sn6v_252,
  ._seekerDot_1sn6v_311,
  ._speedButton_1sn6v_43,
  ._playButton_1sn6v_102 {
    transition: none !important;
  }
  ._playButton_1sn6v_102:not(:disabled):hover,
  ._speedButton_1sn6v_43:hover {
    transform: none;
  }
}
@media (min-width: 1440px) {
  ._audioMessage_1sn6v_1 {
    max-width: 450px;
  }
}
@media (max-width: 280px) {
  ._audioMessage_1sn6v_1 {
    gap: 3px;
    padding: 3px 4px 0 3px;
  }
  ._speedButton_1sn6v_43,
  ._playButton_1sn6v_102 {
    width: 24px;
    height: 24px;
  }
  ._playButton_1sn6v_102 svg {
    width: 16px;
    height: 16px;
  }
  ._speedButton_1sn6v_43 {
    font-size: 9px;
  }
  ._waveform_1sn6v_186 {
    height: 24px;
  }
  ._bars_1sn6v_252 {
    gap: 0.5px;
  }
  ._bar_1sn6v_252 {
    min-width: 1px;
    max-width: 1.5px;
  }
  ._seekerDot_1sn6v_311 {
    width: 8px;
    height: 8px;
  }
  ._timeDisplay_1sn6v_370 {
    font-size: 8px;
    min-width: 24px;
  }
}
._message_1dgz7_1 {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;
  width: max-content;
  justify-content: center;
  max-width: 65%;
  animation: _fadeIn_1dgz7_1 0.3s ease;
  position: relative;
}
@media (max-width: 767px) {
  ._message_1dgz7_1 {
    max-width: 75%;
  }
}
@media (max-width: 479px) {
  ._message_1dgz7_1 {
    max-width: 85%;
    margin-bottom: 6px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._message_1dgz7_1 {
    margin-bottom: 4px;
  }
}
._message_1dgz7_1._sent_1dgz7_27 {
  align-self: flex-end;
  align-items: flex-end;
}
._message_1dgz7_1._sent_1dgz7_27 ._messageContent_1dgz7_31 {
  background-color: #d9fdd3;
  color: #000;
  width: max-content;
  border-radius: 8px 8px 0;
}
@media (max-width: 767px) {
  ._message_1dgz7_1._sent_1dgz7_27 ._messageContent_1dgz7_31 {
    border-radius: 7px 7px 0;
  }
}
._message_1dgz7_1._sent_1dgz7_27 ._replyPreview_1dgz7_42 {
  background-color: #0003;
}
._message_1dgz7_1._sent_1dgz7_27 ._textContent_1dgz7_45 ._messageLink_1dgz7_45 {
  color: #004c8c;
}
._message_1dgz7_1._received_1dgz7_48 {
  align-self: flex-start;
  align-items: flex-start;
}
._message_1dgz7_1._received_1dgz7_48 ._messageContent_1dgz7_31 {
  background-color: #fff;
  border-radius: 8px 8px 8px 0;
  color: #000;
  width: max-content;
}
@media (max-width: 767px) {
  ._message_1dgz7_1._received_1dgz7_48 ._messageContent_1dgz7_31 {
    border-radius: 7px 7px 7px 0;
  }
}
._message_1dgz7_1._received_1dgz7_48 ._replyPreview_1dgz7_42 {
  background-color: #0000004d;
}
._message_1dgz7_1._received_1dgz7_48
  ._textContent_1dgz7_45
  ._messageLink_1dgz7_45 {
  color: #027eb5;
}
._message_1dgz7_1._received_1dgz7_48 ._replyButtonImage_1dgz7_69 {
  position: absolute;
  top: 4px;
  left: 85%;
}
._message_1dgz7_1._received_1dgz7_48 ._caption_1dgz7_74 {
  padding-left: 28px;
}
@media (max-width: 767px) {
  ._message_1dgz7_1._received_1dgz7_48 ._caption_1dgz7_74 {
    padding-left: 24px;
  }
}
@media (max-width: 479px) {
  ._message_1dgz7_1._received_1dgz7_48 ._caption_1dgz7_74 {
    padding-left: 20px;
  }
}
@keyframes _fadeIn_1dgz7_1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._replyPreview_1dgz7_42 {
  display: flex;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
}
@media (max-width: 767px) {
  ._replyPreview_1dgz7_42 {
    padding: 6px 10px;
    font-size: 12px;
    margin-bottom: 3px;
  }
}
@media (max-width: 479px) {
  ._replyPreview_1dgz7_42 {
    padding: 5px 8px;
    font-size: 11px;
  }
}
._replyBar_1dgz7_119 {
  width: 4px;
  background-color: #00a884;
  margin-right: 8px;
  border-radius: 2px;
}
@media (max-width: 767px) {
  ._replyBar_1dgz7_119 {
    width: 3px;
    margin-right: 6px;
  }
}
._replyContent_1dgz7_132 {
  flex: 1;
  min-width: 0;
}
._replySender_1dgz7_137 {
  color: #00a884;
  font-weight: 600;
  margin-bottom: 2px;
}
@media (max-width: 767px) {
  ._replySender_1dgz7_137 {
    font-size: 12px;
  }
}
@media (max-width: 479px) {
  ._replySender_1dgz7_137 {
    font-size: 11px;
  }
}
._replyText_1dgz7_153 {
  color: #8696a0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  ._replyText_1dgz7_153 {
    font-size: 11px;
  }
}
@media (max-width: 479px) {
  ._replyText_1dgz7_153 {
    font-size: 10px;
  }
}
._messageContent_1dgz7_31 {
  padding: 0;
  color: #000;
  width: max-content;
  word-wrap: break-word;
  box-shadow: 0 1px 2px #0000004d;
  min-width: 80px;
  position: relative;
}
@media (max-width: 767px) {
  ._messageContent_1dgz7_31 {
    min-width: 60px;
    box-shadow: 0 1px 1.5px #00000040;
  }
}
._textWrapper_1dgz7_187 {
  display: flex;
  flex-direction: column;
  padding: 6px 8px 0;
}
@media (max-width: 767px) {
  ._textWrapper_1dgz7_187 {
    padding: 5px 7px 0;
  }
}
@media (max-width: 479px) {
  ._textWrapper_1dgz7_187 {
    padding: 4px 6px 0;
  }
}
._textContent_1dgz7_45 {
  font-size: 16px;
  line-height: 19px;
  white-space: pre-wrap;
  word-wrap: break-word;
  display: flex;
  justify-content: space-between;
  flex: 1;
  min-height: 18px;
}
@media (max-width: 767px) {
  ._textContent_1dgz7_45 {
    font-size: 15px;
    line-height: 18px;
  }
}
@media (max-width: 479px) {
  ._textContent_1dgz7_45 {
    font-size: 14px;
    line-height: 17px;
  }
}
._textContent_1dgz7_45 ._messageLink_1dgz7_45 {
  text-decoration: underline;
  cursor: pointer;
  word-break: break-all;
  transition: opacity 0.2s;
}
._textContent_1dgz7_45 ._messageLink_1dgz7_45:hover {
  opacity: 0.8;
}
._textContent_1dgz7_45 ._messageLink_1dgz7_45:active {
  opacity: 0.6;
}
._textTimestamp_1dgz7_238 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  white-space: nowrap;
  margin-top: auto;
  padding: 2px 0 4px;
}
@media (max-width: 767px) {
  ._textTimestamp_1dgz7_238 {
    gap: 2px;
    padding: 2px 0 3px;
  }
}
._textTimestamp_1dgz7_238 ._timeText_1dgz7_253 {
  font-size: 10px;
  line-height: 15px;
  color: #667781;
}
@media (max-width: 767px) {
  ._textTimestamp_1dgz7_238 ._timeText_1dgz7_253 {
    font-size: 9px;
    line-height: 14px;
  }
}
@media (max-width: 479px) {
  ._textTimestamp_1dgz7_238 ._timeText_1dgz7_253 {
    font-size: 8px;
    line-height: 13px;
  }
}
._textTimestamp_1dgz7_238 ._statusIcon_1dgz7_270 {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #8696a0;
  margin-left: 2px;
}
@media (max-width: 767px) {
  ._textTimestamp_1dgz7_238 ._statusIcon_1dgz7_270 {
    font-size: 13px;
    margin-left: 1px;
  }
}
@media (max-width: 479px) {
  ._textTimestamp_1dgz7_238 ._statusIcon_1dgz7_270 {
    font-size: 12px;
  }
}
._readStatus_1dgz7_289 {
  color: #53bdeb;
}
._mediaWrapper_1dgz7_293 {
  position: relative;
  display: block;
  width: 100%;
}
._mediaTimestamp_1dgz7_299 {
  position: absolute;
  bottom: 6px;
  right: 7px;
  left: auto;
  padding: 4px 6px 3px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #667781;
  z-index: 1;
}
@media (max-width: 767px) {
  ._mediaTimestamp_1dgz7_299 {
    bottom: 5px;
    right: 6px;
    padding: 4px 6px 3px 10px;
    gap: 3px;
    font-size: 9px;
  }
}
@media (max-width: 479px) {
  ._mediaTimestamp_1dgz7_299 {
    padding: 4px 6px 3px 7px;
  }
}
._mediaTimestamp_1dgz7_299 ._statusIcon_1dgz7_270 {
  color: #667781;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 767px) {
  ._mediaTimestamp_1dgz7_299 ._statusIcon_1dgz7_270 {
    font-size: 14px;
  }
}
@media (max-width: 479px) {
  ._mediaTimestamp_1dgz7_299 ._statusIcon_1dgz7_270 {
    font-size: 13px;
  }
}
._mediaTimestamp_1dgz7_299 ._timeText_1dgz7_253 {
  font-size: 10px;
  line-height: 1;
}
@media (max-width: 767px) {
  ._mediaTimestamp_1dgz7_299 ._timeText_1dgz7_253 {
    font-size: 9px;
  }
}
@media (max-width: 479px) {
  ._mediaTimestamp_1dgz7_299 ._timeText_1dgz7_253 {
    font-size: 8px;
  }
}
._mediaContent_1dgz7_358 {
  max-width: 500px;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  ._mediaContent_1dgz7_358 {
    max-width: 100%;
  }
}
._image_1dgz7_369,
._video_1dgz7_370 {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s;
}
@media (max-width: 767px) {
  ._image_1dgz7_369,
  ._video_1dgz7_370 {
    border-radius: 7px;
  }
}
._image_1dgz7_369:hover,
._video_1dgz7_370:hover {
  opacity: 0.9;
}
@media (hover: none) {
  ._image_1dgz7_369:hover,
  ._video_1dgz7_370:hover {
    opacity: 1;
  }
}
._videoWrapper_1dgz7_397 {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
}
@media (max-width: 767px) {
  ._videoWrapper_1dgz7_397 {
    border-radius: 7px;
  }
}
._videoWrapper_1dgz7_397 ._playOverlay_1dgz7_407 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0000004d;
  border-radius: 8px;
  transition: background-color 0.2s;
}
@media (max-width: 767px) {
  ._videoWrapper_1dgz7_397 ._playOverlay_1dgz7_407 {
    border-radius: 7px;
  }
}
._videoWrapper_1dgz7_397 ._playOverlay_1dgz7_407 ._playButton_1dgz7_425 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ffffffe6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #005c4b;
  padding-left: 4px;
}
@media (max-width: 767px) {
  ._videoWrapper_1dgz7_397 ._playOverlay_1dgz7_407 ._playButton_1dgz7_425 {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}
@media (max-width: 479px) {
  ._videoWrapper_1dgz7_397 ._playOverlay_1dgz7_407 ._playButton_1dgz7_425 {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}
._videoWrapper_1dgz7_397:hover ._playOverlay_1dgz7_407 {
  background-color: #0006;
}
@media (hover: none) {
  ._videoWrapper_1dgz7_397:hover ._playOverlay_1dgz7_407 {
    background-color: #0000004d;
  }
}
._caption_1dgz7_74 {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  padding: 0 8px 8px;
}
@media (max-width: 767px) {
  ._caption_1dgz7_74 {
    margin-top: 6px;
    font-size: 13px;
    padding: 0 7px 7px;
  }
}
@media (max-width: 479px) {
  ._caption_1dgz7_74 {
    font-size: 12px;
    padding: 0 6px 6px;
  }
}
._audioWrapper_1dgz7_480 {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
AudioMessage {
  width: 100%;
  display: block;
  flex: 1;
}
._fileWrapper_1dgz7_492 {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
@media (max-width: 767px) {
  ._fileWrapper_1dgz7_492 {
    padding: 6px;
  }
}
@media (max-width: 479px) {
  ._fileWrapper_1dgz7_492 {
    padding: 4px;
  }
}
._fileContent_1dgz7_508 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
@media (max-width: 767px) {
  ._fileContent_1dgz7_508 {
    padding: 6px 0;
    gap: 6px;
  }
}
@media (max-width: 479px) {
  ._fileContent_1dgz7_508 {
    padding: 4px 0;
    gap: 4px;
  }
}
._fileContent_1dgz7_508 ._fileIcon_1dgz7_526 {
  font-size: 24px;
}
@media (max-width: 767px) {
  ._fileContent_1dgz7_508 ._fileIcon_1dgz7_526 {
    font-size: 20px;
  }
}
@media (max-width: 479px) {
  ._fileContent_1dgz7_508 ._fileIcon_1dgz7_526 {
    font-size: 18px;
  }
}
._fileContent_1dgz7_508 ._fileInfo_1dgz7_539 {
  flex: 1;
  min-width: 0;
}
._fileContent_1dgz7_508 ._fileName_1dgz7_543 {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px) {
  ._fileContent_1dgz7_508 ._fileName_1dgz7_543 {
    font-size: 13px;
  }
}
._fileContent_1dgz7_508 ._fileSize_1dgz7_555 {
  font-size: 12px;
  color: #8696a0;
}
@media (max-width: 767px) {
  ._fileContent_1dgz7_508 ._fileSize_1dgz7_555 {
    font-size: 11px;
  }
}
._fileContent_1dgz7_508 ._downloadButton_1dgz7_564 {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #00a884;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s;
}
._fileContent_1dgz7_508 ._downloadButton_1dgz7_564:hover {
  background-color: #0000001a;
}
@media (max-width: 767px) {
  ._fileContent_1dgz7_508 ._downloadButton_1dgz7_564 {
    font-size: 18px;
    padding: 2px;
  }
}
._errorContent_1dgz7_584 {
  padding: 20px;
  background: #fee;
  color: #c00;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
}
._replyButton_1dgz7_69 {
  top: 4px;
  background: transparent;
  border: none;
  color: #8696a0;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 900;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: flex-start;
}
._replyButtonImage_1dgz7_69 {
  position: absolute;
  top: 4px;
  background: transparent;
  font-weight: 900;
  border: none;
  color: #8696a0;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  ._replyButtonImage_1dgz7_69 {
    font-size: 13px;
    font-weight: 900;
    top: 3px;
    padding: 1px 5px;
  }
}
@media (max-width: 479px) {
  ._replyButtonImage_1dgz7_69 {
    font-size: 12px;
    padding: 1px 4px;
    font-weight: 900;
  }
}
._replyButtonImage_1dgz7_69:hover {
  color: #00a884;
  background-color: #0000001a;
  opacity: 1;
}
._replyButtonImage_1dgz7_69:active {
  transform: scale(0.95);
}
._sentReply_1dgz7_651 {
  right: 8px;
  left: auto;
}
._receivedReply_1dgz7_656 {
  left: 8px;
  right: auto;
}
._message_1dgz7_1:hover ._replyButton_1dgz7_69 {
  opacity: 1;
}
@media (hover: none) {
  ._replyButton_1dgz7_69 {
    opacity: 0.6;
  }
  ._message_1dgz7_1:active ._replyButton_1dgz7_69 {
    opacity: 1;
  }
}
._previewOverlay_1dgz7_673 {
  position: fixed;
  inset: 0;
  width: 100%;
  margin: 0 auto;
  background-color: #000000f2;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: _fadeIn_1dgz7_1 0.2s ease;
}
@media (min-width: 1024px) {
  ._previewOverlay_1dgz7_673 {
    max-width: 500px;
  }
}
@media (max-width: 767px) {
  ._previewOverlay_1dgz7_673 {
    padding: 0;
  }
}
._previewContainer_1dgz7_699 {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
@media (max-width: 767px) {
  ._previewContainer_1dgz7_699 {
    max-width: 100vw;
    max-height: 100vh;
    padding: 0 0.5rem;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._previewContainer_1dgz7_699 {
    max-height: 100vh;
    padding: 0 0.25rem;
  }
}
._closeButton_1dgz7_722 {
  position: absolute;
  top: -15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffffe6;
  border: none;
  color: #000;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: all 0.2s;
}
@media (max-width: 767px) {
  ._closeButton_1dgz7_722 {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._closeButton_1dgz7_722 {
    top: 5px;
    right: 5px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}
._closeButton_1dgz7_722:hover {
  background-color: #fff;
  transform: scale(1.1);
}
._closeButton_1dgz7_722:active {
  transform: scale(0.95);
}
._previewImage_1dgz7_766 {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}
@media (max-width: 767px) {
  ._previewImage_1dgz7_766 {
    max-height: 85vh;
    border-radius: 4px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._previewImage_1dgz7_766 {
    max-height: 90vh;
  }
}
._previewVideo_1dgz7_784 {
  max-width: 100%;
  max-height: 95vh;
  border-radius: 8px;
}
@media (max-width: 767px) {
  ._previewVideo_1dgz7_784 {
    max-height: 90vh;
    border-radius: 4px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._previewVideo_1dgz7_784 {
    max-height: 95vh;
  }
}
@media (hover: none) and (pointer: coarse) {
  ._downloadButton_1dgz7_564,
  ._playButton_1dgz7_425 {
    min-width: 44px;
    min-height: 44px;
  }
  ._image_1dgz7_369:hover,
  ._video_1dgz7_370:hover {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._message_1dgz7_1 {
    animation: none;
  }
  * {
    transition: none !important;
  }
}
._chatInput_1oouf_1 {
  background-color: #202c33;
  border-top: 1px solid #2a3942;
  position: relative;
  flex-shrink: 0;
}
._replyPreview_1oouf_8 {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #111b21;
  border-bottom: 1px solid #2a3942;
  gap: 12px;
}
@media (max-width: 767px) {
  ._replyPreview_1oouf_8 {
    padding: 10px 16px;
    gap: 10px;
  }
}
@media (max-width: 479px) {
  ._replyPreview_1oouf_8 {
    padding: 8px 12px;
    gap: 8px;
  }
}
@media (max-width: 319px) {
  ._replyPreview_1oouf_8 {
    padding: 6px 10px;
    gap: 6px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._replyPreview_1oouf_8 {
    padding: 6px 12px;
  }
}
._replyContent_1oouf_40 {
  flex: 1;
  min-width: 0;
}
._replyLabel_1oouf_45 {
  color: #00a884;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
@media (max-width: 767px) {
  ._replyLabel_1oouf_45 {
    font-size: 12px;
    margin-bottom: 3px;
  }
}
@media (max-width: 479px) {
  ._replyLabel_1oouf_45 {
    font-size: 11px;
    margin-bottom: 2px;
  }
}
@media (max-width: 319px) {
  ._replyLabel_1oouf_45 {
    font-size: 10px;
  }
}
._replyText_1oouf_69 {
  color: #8696a0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  ._replyText_1oouf_69 {
    font-size: 12px;
  }
}
@media (max-width: 479px) {
  ._replyText_1oouf_69 {
    font-size: 11px;
  }
}
@media (max-width: 319px) {
  ._replyText_1oouf_69 {
    font-size: 10px;
  }
}
._cancelReply_1oouf_92 {
  background: transparent;
  border: none;
  color: #8696a0;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  ._cancelReply_1oouf_92 {
    font-size: 18px;
    padding: 6px;
  }
}
@media (max-width: 479px) {
  ._cancelReply_1oouf_92 {
    font-size: 16px;
    padding: 4px;
  }
}
._cancelReply_1oouf_92:hover {
  color: #e9edef;
}
._cancelReply_1oouf_92:active {
  transform: scale(0.95);
}
@media (hover: none) {
  ._cancelReply_1oouf_92:hover {
    color: #8696a0;
  }
  ._cancelReply_1oouf_92:active {
    color: #e9edef;
  }
}
._emojiPicker_1oouf_133 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background-color: #2a3942;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 16px #00000080;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  animation: _slideUpPicker_1oouf_1 0.3s ease;
  z-index: 100;
}
@media (min-width: 1024px) {
  ._emojiPicker_1oouf_133 {
    max-width: 500px;
  }
}
@media (max-width: 767px) {
  ._emojiPicker_1oouf_133 {
    max-height: 350px;
    border-radius: 10px 10px 0 0;
  }
}
@media (max-width: 479px) {
  ._emojiPicker_1oouf_133 {
    max-height: 300px;
    border-radius: 8px 8px 0 0;
  }
}
@media (max-width: 319px) {
  ._emojiPicker_1oouf_133 {
    max-height: 280px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._emojiPicker_1oouf_133 {
    max-height: 250px;
  }
}
@keyframes _slideUpPicker_1oouf_1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._pickerTabs_1oouf_188 {
  display: flex;
  border-bottom: 1px solid #2a3942;
  background-color: #1f2b33;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._pickerTabs_1oouf_188 {
    border-radius: 10px 10px 0 0;
  }
}
@media (max-width: 479px) {
  ._pickerTabs_1oouf_188 {
    border-radius: 8px 8px 0 0;
  }
}
._pickerTab_1oouf_188 {
  flex: 1;
  padding: 14px;
  background: transparent;
  border: none;
  color: #8696a0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
}
@media (max-width: 767px) {
  ._pickerTab_1oouf_188 {
    padding: 12px;
    font-size: 13px;
    gap: 6px;
  }
}
@media (max-width: 479px) {
  ._pickerTab_1oouf_188 {
    padding: 10px;
    font-size: 12px;
    gap: 5px;
  }
}
@media (max-width: 319px) {
  ._pickerTab_1oouf_188 {
    padding: 8px;
    font-size: 11px;
    gap: 4px;
  }
}
._pickerTab_1oouf_188 svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 767px) {
  ._pickerTab_1oouf_188 svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 479px) {
  ._pickerTab_1oouf_188 svg {
    width: 16px;
    height: 16px;
  }
}
._pickerTab_1oouf_188._active_1oouf_259 {
  color: #00a884;
  border-bottom-color: #00a884;
}
._pickerTab_1oouf_188:hover:not(._active_1oouf_259) {
  color: #e9edef;
  background-color: #ffffff0d;
}
@media (hover: none) {
  ._pickerTab_1oouf_188:hover:not(._active_1oouf_259) {
    color: #8696a0;
    background-color: transparent;
  }
}
._emojiContent_1oouf_274 {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
._emojiCategories_1oouf_281 {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background-color: #1f2b33;
  border-bottom: 1px solid #2a3942;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
@media (max-width: 767px) {
  ._emojiCategories_1oouf_281 {
    padding: 6px 10px;
    gap: 3px;
  }
}
@media (max-width: 479px) {
  ._emojiCategories_1oouf_281 {
    padding: 5px 8px;
    gap: 2px;
  }
}
._emojiCategories_1oouf_281::-webkit-scrollbar {
  height: 4px;
}
._emojiCategories_1oouf_281::-webkit-scrollbar-track {
  background: transparent;
}
._emojiCategories_1oouf_281::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 2px;
}
._categoryTab_1oouf_315 {
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #8696a0;
  cursor: pointer;
  font-size: 12px;
  border-radius: 16px;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._categoryTab_1oouf_315 {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 14px;
  }
}
@media (max-width: 479px) {
  ._categoryTab_1oouf_315 {
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 12px;
  }
}
._categoryTab_1oouf_315._active_1oouf_259 {
  background-color: #00a884;
  color: #fff;
}
._categoryTab_1oouf_315:hover:not(._active_1oouf_259) {
  background-color: #ffffff1a;
  color: #e9edef;
}
@media (hover: none) {
  ._categoryTab_1oouf_315:hover:not(._active_1oouf_259) {
    background-color: transparent;
    color: #8696a0;
  }
}
._emojiGrid_1oouf_356 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
@media (max-width: 767px) {
  ._emojiGrid_1oouf_356 {
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    padding: 10px;
    gap: 3px;
  }
}
@media (max-width: 479px) {
  ._emojiGrid_1oouf_356 {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    padding: 8px;
    gap: 2px;
  }
}
@media (max-width: 319px) {
  ._emojiGrid_1oouf_356 {
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    padding: 6px;
  }
}
._emojiGrid_1oouf_356::-webkit-scrollbar {
  width: 6px;
}
._emojiGrid_1oouf_356::-webkit-scrollbar-track {
  background: transparent;
}
._emojiGrid_1oouf_356::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 3px;
}
._emojiGrid_1oouf_356::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
._emojiItem_1oouf_400 {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 28px;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
@media (max-width: 767px) {
  ._emojiItem_1oouf_400 {
    font-size: 26px;
    padding: 5px;
    min-height: 38px;
    border-radius: 7px;
  }
}
@media (max-width: 479px) {
  ._emojiItem_1oouf_400 {
    font-size: 24px;
    padding: 4px;
    min-height: 36px;
    border-radius: 6px;
  }
}
@media (max-width: 319px) {
  ._emojiItem_1oouf_400 {
    font-size: 22px;
    padding: 3px;
    min-height: 34px;
  }
}
._emojiItem_1oouf_400:hover {
  background-color: #ffffff1a;
  transform: scale(1.2);
}
._emojiItem_1oouf_400:active {
  transform: scale(1.1);
}
@media (hover: none) {
  ._emojiItem_1oouf_400:hover {
    background-color: transparent;
    transform: scale(1);
  }
  ._emojiItem_1oouf_400:active {
    background-color: #ffffff1a;
    transform: scale(1.1);
  }
}
._gifContent_1oouf_454 {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
._gifSearch_1oouf_461 {
  padding: 12px;
  background-color: #1f2b33;
  border-bottom: 1px solid #2a3942;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._gifSearch_1oouf_461 {
    padding: 10px;
    gap: 6px;
  }
}
@media (max-width: 479px) {
  ._gifSearch_1oouf_461 {
    padding: 8px;
    gap: 5px;
  }
}
._gifSearch_1oouf_461 svg {
  width: 20px;
  height: 20px;
  color: #8696a0;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._gifSearch_1oouf_461 svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 479px) {
  ._gifSearch_1oouf_461 svg {
    width: 16px;
    height: 16px;
  }
}
._gifSearchInput_1oouf_501 {
  flex: 1;
  background-color: #2a3942;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  color: #e9edef;
  font-size: 14px;
  outline: none;
}
@media (max-width: 767px) {
  ._gifSearchInput_1oouf_501 {
    font-size: 16px;
    padding: 7px 14px;
    border-radius: 18px;
  }
}
@media (max-width: 479px) {
  ._gifSearchInput_1oouf_501 {
    padding: 6px 12px;
    border-radius: 16px;
  }
}
._gifSearchInput_1oouf_501::placeholder {
  color: #8696a0;
}
._gifSearchInput_1oouf_501:focus {
  background-color: #323d47;
}
._gifGrid_1oouf_531 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
@media (max-width: 767px) {
  ._gifGrid_1oouf_531 {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    padding: 10px;
    gap: 6px;
  }
}
@media (max-width: 479px) {
  ._gifGrid_1oouf_531 {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    padding: 8px;
    gap: 5px;
  }
}
@media (max-width: 319px) {
  ._gifGrid_1oouf_531 {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    padding: 6px;
    gap: 4px;
  }
}
._gifGrid_1oouf_531::-webkit-scrollbar {
  width: 6px;
}
._gifGrid_1oouf_531::-webkit-scrollbar-track {
  background: transparent;
}
._gifGrid_1oouf_531::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 3px;
}
._gifGrid_1oouf_531::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
._gifItem_1oouf_576 {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
  aspect-ratio: 1;
  position: relative;
}
@media (max-width: 767px) {
  ._gifItem_1oouf_576 {
    border-radius: 6px;
  }
}
@media (max-width: 479px) {
  ._gifItem_1oouf_576 {
    border-radius: 5px;
  }
}
._gifItem_1oouf_576 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
._gifItem_1oouf_576:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px #00000080;
}
._gifItem_1oouf_576:active {
  transform: scale(0.98);
}
@media (hover: none) {
  ._gifItem_1oouf_576:hover {
    transform: scale(1);
    box-shadow: none;
  }
  ._gifItem_1oouf_576:active {
    transform: scale(0.95);
  }
}
._gifLoading_1oouf_620,
._gifEmpty_1oouf_621 {
  padding: 40px 20px;
  text-align: center;
  color: #8696a0;
  font-size: 14px;
}
@media (max-width: 767px) {
  ._gifLoading_1oouf_620,
  ._gifEmpty_1oouf_621 {
    padding: 30px 16px;
    font-size: 13px;
  }
}
@media (max-width: 479px) {
  ._gifLoading_1oouf_620,
  ._gifEmpty_1oouf_621 {
    padding: 20px 12px;
    font-size: 12px;
  }
}
._inputArea_1oouf_642 {
  padding: 8px 16px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
@media (max-width: 767px) {
  ._inputArea_1oouf_642 {
    padding: 8px 12px;
    gap: 6px;
  }
}
@media (max-width: 479px) {
  ._inputArea_1oouf_642 {
    padding: 6px 10px;
    gap: 5px;
  }
}
@media (max-width: 319px) {
  ._inputArea_1oouf_642 {
    padding: 6px 8px;
    gap: 4px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._inputArea_1oouf_642 {
    padding: 6px 10px;
    gap: 5px;
  }
}
._recordingIndicator_1oouf_673 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
@media (max-width: 767px) {
  ._recordingIndicator_1oouf_673 {
    gap: 10px;
  }
}
@media (max-width: 479px) {
  ._recordingIndicator_1oouf_673 {
    gap: 8px;
  }
}
@media (max-width: 319px) {
  ._recordingIndicator_1oouf_673 {
    gap: 6px;
  }
}
._recordingIcon_1oouf_695 {
  width: 24px;
  height: 24px;
  animation: _pulseIcon_1oouf_1 1.5s infinite;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._recordingIcon_1oouf_695 {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 479px) {
  ._recordingIcon_1oouf_695 {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 319px) {
  ._recordingIcon_1oouf_695 {
    width: 18px;
    height: 18px;
  }
}
@keyframes _pulseIcon_1oouf_1 {
  0%,
  to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}
._recordingText_1oouf_730 {
  color: #ef4444;
  font-size: 15px;
  font-weight: 500;
}
@media (max-width: 767px) {
  ._recordingText_1oouf_730 {
    font-size: 14px;
  }
}
@media (max-width: 479px) {
  ._recordingText_1oouf_730 {
    font-size: 13px;
  }
}
@media (max-width: 319px) {
  ._recordingText_1oouf_730 {
    font-size: 12px;
  }
}
._recordingTimer_1oouf_751 {
  color: #e9edef;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: center;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._recordingTimer_1oouf_751 {
    font-size: 15px;
    min-width: 45px;
  }
}
@media (max-width: 479px) {
  ._recordingTimer_1oouf_751 {
    font-size: 14px;
    min-width: 40px;
  }
}
@media (max-width: 319px) {
  ._recordingTimer_1oouf_751 {
    font-size: 13px;
    min-width: 38px;
  }
}
._recordingActions_1oouf_779 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._recordingActions_1oouf_779 {
    gap: 10px;
  }
}
@media (max-width: 479px) {
  ._recordingActions_1oouf_779 {
    gap: 8px;
  }
}
@media (max-width: 319px) {
  ._recordingActions_1oouf_779 {
    gap: 6px;
  }
}
._deleteButton_1oouf_801,
._stopButton_1oouf_802 {
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._deleteButton_1oouf_801,
  ._stopButton_1oouf_802 {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 479px) {
  ._deleteButton_1oouf_801,
  ._stopButton_1oouf_802 {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 319px) {
  ._deleteButton_1oouf_801,
  ._stopButton_1oouf_802 {
    width: 34px;
    height: 34px;
  }
}
._deleteButton_1oouf_801 svg,
._stopButton_1oouf_802 svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 767px) {
  ._deleteButton_1oouf_801 svg,
  ._stopButton_1oouf_802 svg {
    width: 19px;
    height: 19px;
  }
}
@media (max-width: 479px) {
  ._deleteButton_1oouf_801 svg,
  ._stopButton_1oouf_802 svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 319px) {
  ._deleteButton_1oouf_801 svg,
  ._stopButton_1oouf_802 svg {
    width: 17px;
    height: 17px;
  }
}
._deleteButton_1oouf_801:active,
._stopButton_1oouf_802:active {
  transform: scale(0.9);
}
._deleteButton_1oouf_801 {
  background-color: #374045;
  color: #e9edef;
}
._deleteButton_1oouf_801:hover {
  background-color: #ef4444;
  color: #fff;
}
@media (hover: none) {
  ._deleteButton_1oouf_801:hover {
    background-color: #374045;
  }
  ._deleteButton_1oouf_801:active {
    background-color: #ef4444;
    color: #fff;
  }
}
._stopButton_1oouf_802 {
  background-color: #00a884;
  color: #fff;
}
._stopButton_1oouf_802 svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 767px) {
  ._stopButton_1oouf_802 svg {
    width: 15px;
    height: 15px;
  }
}
@media (max-width: 479px) {
  ._stopButton_1oouf_802 svg {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 319px) {
  ._stopButton_1oouf_802 svg {
    width: 13px;
    height: 13px;
  }
}
._stopButton_1oouf_802:hover {
  background-color: #00c997;
}
._stopButton_1oouf_802:active {
  transform: scale(0.9);
}
@media (hover: none) {
  ._stopButton_1oouf_802:hover {
    background-color: #00a884;
  }
  ._stopButton_1oouf_802:active {
    background-color: #00c997;
  }
}
._attachmentContainer_1oouf_925 {
  position: relative;
  flex-shrink: 0;
  align-self: flex-end;
}
._attachButton_1oouf_931 {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #8696a0;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._attachButton_1oouf_931 {
    width: 38px;
    height: 38px;
    padding: 7px;
  }
}
@media (max-width: 479px) {
  ._attachButton_1oouf_931 {
    width: 36px;
    height: 36px;
    padding: 6px;
  }
}
@media (max-width: 319px) {
  ._attachButton_1oouf_931 {
    width: 34px;
    height: 34px;
    padding: 5px;
  }
}
._attachButton_1oouf_931 svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 767px) {
  ._attachButton_1oouf_931 svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 479px) {
  ._attachButton_1oouf_931 svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 319px) {
  ._attachButton_1oouf_931 svg {
    width: 18px;
    height: 18px;
  }
}
._attachButton_1oouf_931:hover {
  background-color: #ffffff1a;
  color: #e9edef;
}
._attachButton_1oouf_931:active {
  transform: scale(0.9);
}
@media (hover: none) {
  ._attachButton_1oouf_931:hover {
    background-color: transparent;
    color: #8696a0;
  }
  ._attachButton_1oouf_931:active {
    background-color: #ffffff1a;
    color: #e9edef;
  }
}
._attachMenu_1oouf_1007 {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background-color: #2a3942;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 16px #00000080;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  animation: _slideUp_1oouf_1 0.2s ease;
  z-index: 10;
}
@media (max-width: 767px) {
  ._attachMenu_1oouf_1007 {
    min-width: 140px;
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 6px;
  }
}
@media (max-width: 479px) {
  ._attachMenu_1oouf_1007 {
    min-width: 130px;
    border-radius: 8px;
    padding: 5px;
    gap: 3px;
  }
}
@media (max-width: 319px) {
  ._attachMenu_1oouf_1007 {
    min-width: 120px;
    padding: 4px;
    gap: 2px;
  }
}
@keyframes _slideUp_1oouf_1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._attachOption_1oouf_1057 {
  background-color: transparent;
  border: none;
  color: #e9edef;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  min-height: 44px;
}
@media (max-width: 767px) {
  ._attachOption_1oouf_1057 {
    padding: 10px 14px;
    font-size: 13px;
    gap: 10px;
    border-radius: 7px;
  }
}
@media (max-width: 479px) {
  ._attachOption_1oouf_1057 {
    padding: 8px 12px;
    font-size: 12px;
    gap: 8px;
    border-radius: 6px;
  }
}
@media (max-width: 319px) {
  ._attachOption_1oouf_1057 {
    padding: 6px 10px;
    font-size: 11px;
    gap: 6px;
  }
}
._attachOption_1oouf_1057 svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._attachOption_1oouf_1057 svg {
    width: 19px;
    height: 19px;
  }
}
@media (max-width: 479px) {
  ._attachOption_1oouf_1057 svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 319px) {
  ._attachOption_1oouf_1057 svg {
    width: 16px;
    height: 16px;
  }
}
._attachOption_1oouf_1057:hover {
  background-color: #374045;
}
._attachOption_1oouf_1057:active {
  background-color: #3d474d;
}
@media (hover: none) {
  ._attachOption_1oouf_1057:hover {
    background-color: transparent;
  }
  ._attachOption_1oouf_1057:active {
    background-color: #374045;
  }
}
._messageInput_1oouf_1134 {
  flex: 1;
  background-color: #2a3942;
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  color: #e9edef;
  font-size: 15px;
  outline: none;
  font-family: Segoe UI, Helvetica, Arial, sans-serif;
  min-height: 40px;
  max-height: 100px;
  min-width: 0;
  resize: none;
  overflow-y: hidden;
  line-height: 20px;
  transition: height 0.1s ease;
  align-self: flex-end;
}
@media (max-width: 767px) {
  ._messageInput_1oouf_1134 {
    font-size: 16px;
    padding: 9px 14px;
    border-radius: 18px;
    min-height: 38px;
    max-height: 92px;
    line-height: 19px;
  }
}
@media (max-width: 479px) {
  ._messageInput_1oouf_1134 {
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 16px;
    min-height: 36px;
    max-height: 84px;
    line-height: 18px;
  }
}
@media (max-width: 319px) {
  ._messageInput_1oouf_1134 {
    font-size: 16px;
    padding: 7px 10px;
    border-radius: 14px;
    min-height: 34px;
    max-height: 76px;
    line-height: 17px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._messageInput_1oouf_1134 {
    padding: 7px 12px;
    max-height: 60px;
    line-height: 18px;
  }
}
._messageInput_1oouf_1134::placeholder {
  color: #8696a0;
}
._messageInput_1oouf_1134:focus {
  background-color: #323d47;
}
._messageInput_1oouf_1134::-webkit-scrollbar {
  width: 6px;
}
._messageInput_1oouf_1134::-webkit-scrollbar-track {
  background: transparent;
}
._messageInput_1oouf_1134::-webkit-scrollbar-thumb {
  background: #fff3;
  border-radius: 3px;
}
._messageInput_1oouf_1134::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
._messageInput_1oouf_1134 {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
._emojiButton_1oouf_1217 {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #8696a0;
  flex-shrink: 0;
  align-self: flex-end;
}
@media (max-width: 767px) {
  ._emojiButton_1oouf_1217 {
    width: 44px;
    height: 44px;
    padding: 7px;
  }
}
@media (max-width: 479px) {
  ._emojiButton_1oouf_1217 {
    width: 44px;
    height: 44px;
    padding: 6px;
  }
}
@media (max-width: 319px) {
  ._emojiButton_1oouf_1217 {
    width: 34px;
    height: 34px;
    padding: 5px;
  }
}
._emojiButton_1oouf_1217 svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 767px) {
  ._emojiButton_1oouf_1217 svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 479px) {
  ._emojiButton_1oouf_1217 svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 319px) {
  ._emojiButton_1oouf_1217 svg {
    width: 18px;
    height: 18px;
  }
}
._emojiButton_1oouf_1217:hover {
  background-color: #ffffff1a;
  color: #e9edef;
}
._emojiButton_1oouf_1217:active {
  transform: scale(0.9);
}
@media (hover: none) {
  ._emojiButton_1oouf_1217:hover {
    background-color: transparent;
    color: #8696a0;
  }
  ._emojiButton_1oouf_1217:active {
    background-color: #ffffff1a;
    color: #e9edef;
  }
}
._micButton_1oouf_1294 {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: #8696a0;
  align-self: flex-end;
}
@media (max-width: 767px) {
  ._micButton_1oouf_1294 {
    width: 44px;
    height: 44px;
    padding: 7px;
  }
}
@media (max-width: 479px) {
  ._micButton_1oouf_1294 {
    width: 42px;
    height: 42px;
    padding: 6px;
  }
}
@media (max-width: 319px) {
  ._micButton_1oouf_1294 {
    width: 40px;
    height: 40px;
    padding: 5px;
  }
}
._micButton_1oouf_1294 svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 767px) {
  ._micButton_1oouf_1294 svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 479px) {
  ._micButton_1oouf_1294 svg {
    width: 21px;
    height: 21px;
  }
}
@media (max-width: 319px) {
  ._micButton_1oouf_1294 svg {
    width: 20px;
    height: 20px;
  }
}
._micButton_1oouf_1294:hover {
  background-color: #ffffff1a;
  color: #e9edef;
}
._micButton_1oouf_1294:active {
  background-color: #ffffff26;
  transform: scale(0.9);
}
@media (hover: none) {
  ._micButton_1oouf_1294:hover {
    background-color: transparent;
    color: #8696a0;
  }
  ._micButton_1oouf_1294:active {
    background-color: #ffffff1a;
    color: #e9edef;
  }
}
._sendButton_1oouf_1372 {
  background-color: #00a884;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: _scaleIn_1oouf_1 0.2s ease;
  align-self: flex-end;
}
@media (max-width: 767px) {
  ._sendButton_1oouf_1372 {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 479px) {
  ._sendButton_1oouf_1372 {
    width: 42px;
    height: 42px;
  }
}
@media (max-width: 319px) {
  ._sendButton_1oouf_1372 {
    width: 40px;
    height: 40px;
  }
}
._sendButton_1oouf_1372 svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 767px) {
  ._sendButton_1oouf_1372 svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 479px) {
  ._sendButton_1oouf_1372 svg {
    width: 21px;
    height: 21px;
  }
}
@media (max-width: 319px) {
  ._sendButton_1oouf_1372 svg {
    width: 20px;
    height: 20px;
  }
}
._sendButton_1oouf_1372:hover {
  background-color: #00c997;
  transform: scale(1.05);
}
._sendButton_1oouf_1372:active {
  transform: scale(0.9);
}
@media (hover: none) {
  ._sendButton_1oouf_1372:hover {
    background-color: #00a884;
    transform: scale(1);
  }
  ._sendButton_1oouf_1372:active {
    background-color: #00c997;
  }
}
@keyframes _scaleIn_1oouf_1 {
  0% {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    ._chatInput_1oouf_1 {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
@media (hover: none) and (pointer: coarse) {
  ._cancelReply_1oouf_92,
  ._attachButton_1oouf_931,
  ._emojiButton_1oouf_1217,
  ._micButton_1oouf_1294,
  ._sendButton_1oouf_1372,
  ._deleteButton_1oouf_801,
  ._stopButton_1oouf_802 {
    min-width: 44px;
    min-height: 44px;
  }
  ._attachOption_1oouf_1057 {
    min-height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._recordingIcon_1oouf_695,
  ._sendButton_1oouf_1372,
  ._attachMenu_1oouf_1007,
  ._emojiPicker_1oouf_133 {
    animation: none;
  }
  ._messageInput_1oouf_1134,
  * {
    transition: none !important;
  }
}
@media (max-height: 400px) {
  ._inputArea_1oouf_642 {
    padding: 4px 8px;
  }
  ._messageInput_1oouf_1134 {
    max-height: 60px;
  }
  ._emojiPicker_1oouf_133 {
    max-height: 200px;
  }
}
._chatApp_189t4_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 0;
  font-family: Segoe UI, Helvetica, Arial, sans-serif;
}
._contactInfoRow_189t4_11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
._onlineStatus_189t4_18 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: #c0c7c0;
  font-weight: 500;
}
._statusDot_189t4_27 {
  width: 8px;
  height: 8px;
  background-color: #4caf50;
  border-radius: 50%;
  display: inline-block;
}
._contactsView_189t4_35 {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  ._contactsView_189t4_35 {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  ._contactsView_189t4_35 {
    max-width: 500px;
  }
}
@media (min-width: 1024px) {
  ._contactsView_189t4_35 {
    overflow: hidden;
    box-shadow: 0 4px 16px #0000001f;
  }
}
._header_189t4_59 {
  padding: 20px;
  background-color: #00a884;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._header_189t4_59 ._headerLeft_189t4_66 {
  display: flex;
  align-items: center;
  gap: 16px;
}
._header_189t4_59 ._backButton_189t4_71 {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}
._header_189t4_59 ._backButton_189t4_71:hover {
  background-color: #ffffff1a;
}
._header_189t4_59 ._backButton_189t4_71 svg {
  width: 24px;
  height: 24px;
  display: block;
}
@media (max-width: 767px) {
  ._header_189t4_59 {
    padding: 16px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._header_189t4_59 {
    padding: 12px 16px;
  }
}
._header_189t4_59 h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
@media (max-width: 320px) {
  ._header_189t4_59 h1 {
    font-size: 20px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._header_189t4_59 h1 {
    font-size: 20px;
  }
}
._connectionStatus_189t4_117 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._connectionStatus_189t4_117 span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
@media (max-width: 767px) {
  ._connectionStatus_189t4_117 span {
    width: 10px;
    height: 10px;
  }
}
._connectionStatus_189t4_117 span._connected_189t4_134 {
  background-color: #25d366;
  box-shadow: 0 0 8px #25d36680;
}
._connectionStatus_189t4_117 span._connecting_189t4_138 {
  background-color: #f59e0b;
  animation: _pulse_189t4_1 1.5s infinite;
}
._connectionStatus_189t4_117 span._disconnected_189t4_142 {
  background-color: #ef4444;
}
@keyframes _pulse_189t4_1 {
  0%,
  to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}
._contactList_189t4_156 {
  flex: 1;
  overflow-y: auto;
  background-color: #fff;
}
._contactList_189t4_156::-webkit-scrollbar {
  width: 6px;
}
@media (max-width: 767px) {
  ._contactList_189t4_156::-webkit-scrollbar {
    width: 4px;
  }
}
._contactList_189t4_156::-webkit-scrollbar-track {
  background: transparent;
}
._contactList_189t4_156::-webkit-scrollbar-thumb {
  background: #cfd5db;
  border-radius: 3px;
}
._contactItem_189t4_177 {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #e9edef;
  gap: 12px;
  background-color: #fff;
}
@media (max-width: 767px) {
  ._contactItem_189t4_177 {
    padding: 12px 16px;
    gap: 10px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._contactItem_189t4_177 {
    padding: 8px 16px;
  }
}
._contactItem_189t4_177:hover {
  background-color: #f5f6f6;
}
._contactItem_189t4_177:active {
  background-color: #e9edef;
}
._avatar_189t4_205 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00a884, #00d9a5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._avatar_189t4_205 {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._avatar_189t4_205 {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}
._contactInfo_189t4_11 {
  flex: 1;
  min-width: 0;
}
._contactHeader_189t4_236 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
@media (max-height: 500px) and (orientation: landscape) {
  ._contactHeader_189t4_236 {
    margin-bottom: 4px;
  }
}
._contactName_189t4_248 {
  font-weight: 500;
  font-size: 17px;
  color: #111b21;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  ._contactName_189t4_248 {
    font-size: 16px;
    gap: 6px;
  }
}
@media (max-width: 320px) {
  ._contactName_189t4_248 {
    font-size: 15px;
  }
}
._groupBadge_189t4_271 {
  font-size: 10px;
  background-color: #00a884;
  color: #fff;
  padding: 3px 7px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 767px) {
  ._groupBadge_189t4_271 {
    font-size: 9px;
    padding: 2px 6px;
  }
}
._timestamp_189t4_288 {
  font-size: 13px;
  color: #667781;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._timestamp_189t4_288 {
    font-size: 12px;
  }
}
._lastMessageRow_189t4_299 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
@media (max-width: 767px) {
  ._lastMessageRow_189t4_299 {
    gap: 6px;
  }
}
._lastMessage_189t4_299 {
  font-size: 15px;
  color: #667781;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
@media (max-width: 767px) {
  ._lastMessage_189t4_299 {
    font-size: 14px;
  }
}
._unreadBadge_189t4_325 {
  background-color: #00a884;
  color: #fff;
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ._unreadBadge_189t4_325 {
    padding: 2px 8px;
    font-size: 11px;
    min-width: 20px;
  }
}
._chatView_189t4_344 {
  width: 100%;
  height: 100vh;
  background-color: #efeae2;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  ._chatView_189t4_344 {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  ._chatView_189t4_344 {
    max-width: 500px;
  }
}
._chatHeader_189t4_362 {
  background-color: #00a884;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px #0000001a;
}
@media (max-width: 767px) {
  ._chatHeader_189t4_362 {
    padding: 10px 12px;
    gap: 10px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._chatHeader_189t4_362 {
    padding: 8px 12px;
    gap: 8px;
  }
}
._chatHeader_189t4_362 ._avatar_189t4_205 {
  width: 40px;
  height: 40px;
  font-size: 20px;
  margin: 0;
}
@media (max-width: 767px) {
  ._chatHeader_189t4_362 ._avatar_189t4_205 {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._chatHeader_189t4_362 ._avatar_189t4_205 {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
._backButton_189t4_71 {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  border-radius: 50%;
  margin: -4px;
}
@media (max-width: 767px) {
  ._backButton_189t4_71 {
    padding: 8px;
    font-size: 22px;
    margin: -8px 0 -8px -8px;
  }
}
._backButton_189t4_71:hover {
  background-color: #ffffff1a;
}
._backButton_189t4_71:active {
  background-color: #ffffff26;
}
._chatHeader_189t4_362 ._contactName_189t4_248 {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  ._chatHeader_189t4_362 ._contactName_189t4_248 {
    font-size: 16px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._chatHeader_189t4_362 ._contactName_189t4_248 {
    font-size: 15px;
    margin-bottom: 1px;
  }
}
._groupMembers_189t4_452 {
  font-size: 13px;
  color: #ffffffd9;
}
@media (max-width: 767px) {
  ._groupMembers_189t4_452 {
    font-size: 12px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._groupMembers_189t4_452 {
    font-size: 11px;
  }
}
._messageContainer_189t4_467 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background-image: url(../../assets/image/whatsappbg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media (max-width: 767px) {
  ._messageContainer_189t4_467 {
    padding: 12px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  ._messageContainer_189t4_467 {
    padding: 8px 12px;
  }
}
._messageContainer_189t4_467::-webkit-scrollbar {
  width: 6px;
}
@media (max-width: 767px) {
  ._messageContainer_189t4_467::-webkit-scrollbar {
    width: 4px;
  }
}
._messageContainer_189t4_467::-webkit-scrollbar-track {
  background: transparent;
}
._messageContainer_189t4_467::-webkit-scrollbar-thumb {
  background: #0003;
  border-radius: 3px;
}
._messageContainer_189t4_467::-webkit-scrollbar-thumb:hover {
  background: #0000004d;
}
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 767px) {
    ._contactsView_189t4_35,
    ._chatView_189t4_344 {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
  @media (max-width: 767px) {
    ._header_189t4_59,
    ._chatHeader_189t4_362 {
      padding-top: calc(16px + env(safe-area-inset-top));
    }
  }
}
@media (hover: none) and (pointer: coarse) {
  ._contactItem_189t4_177 {
    min-height: 60px;
  }
  ._backButton_189t4_71 {
    min-width: 44px;
    min-height: 44px;
  }
}
._dateSeparator_189t4_531 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  gap: 12px;
  color: #fff;
}
@media (max-width: 768px) {
  ._dateSeparator_189t4_531 {
    margin: 12px 0;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  ._dateSeparator_189t4_531 {
    margin: 10px 0;
    gap: 8px;
  }
}
._dateSeparatorLine_189t4_552 {
  flex: 1;
  height: 1px;
  background-color: #8696a04d;
}
._dateSeparatorText_189t4_558 {
  padding: 5px 12px;
  background-color: #233138;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 1px 1px #0000000f;
  white-space: nowrap;
}
@media (max-width: 768px) {
  ._dateSeparatorText_189t4_558 {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 7px;
  }
}
@media (max-width: 480px) {
  ._dateSeparatorText_189t4_558 {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
  }
}
@media (prefers-color-scheme: dark) {
  ._dateSeparatorLine_189t4_552 {
    background-color: #8696a033;
  }
}
._floatingDate_189t4_588 {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (max-width: 768px) {
  ._floatingDate_189t4_588 {
    top: 8px;
  }
}
@media (max-width: 480px) {
  ._floatingDate_189t4_588 {
    top: 6px;
  }
}
._floatingDate_189t4_588._hidden_189t4_608 {
  opacity: 0;
  transform: translateY(-10px);
}
._floatingDate_189t4_588._visible_189t4_612 {
  opacity: 1;
  transform: translateY(0);
}
._floatingDateText_189t4_617 {
  padding: 6px 14px;
  background-color: #233138f2;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 0 2px 6px #0003;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
@media (max-width: 768px) {
  ._floatingDateText_189t4_617 {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 9px;
  }
}
@media (max-width: 480px) {
  ._floatingDateText_189t4_617 {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 8px;
  }
}
._promotionsContent_ehh0q_1 {
  padding: 1rem;
  flex: 1;
}
._bannersList_ehh0q_6 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 4rem;
}
._bannerCard_ehh0q_13 {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
._bannerCard_ehh0q_13:hover {
  transform: translateY(-2px);
}
._bannerCard_ehh0q_13:active {
  transform: translateY(0);
}
._bannerCard_ehh0q_13 img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: fill;
}
._loading_ehh0q_33 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}
._loading_ehh0q_33 ._spinner_ehh0q_41 {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: _spin_ehh0q_41 1s linear infinite;
  margin-bottom: 1rem;
}
._loading_ehh0q_33 p {
  color: #666;
  font-size: 0.9rem;
}
@keyframes _spin_ehh0q_41 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._errorMessage_ehh0q_63 {
  padding: 1rem;
  background-color: #fee;
  border-radius: 8px;
  color: #c33;
  text-align: center;
  margin: 1rem 0;
}
._noData_ehh0q_72 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: #666;
}
._noData_ehh0q_72 ._noDataBox_ehh0q_81 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
._noData_ehh0q_72 ._illustration_ehh0q_86 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
._noData_ehh0q_72 p {
  margin: 0;
  font-size: 1rem;
  color: #888;
}
._noDataBox_ehh0q_81 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
._illustration_ehh0q_86 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
._bannerTitle_ehh0q_107 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff80;
  color: #000;
  padding: 10px 16px;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  z-index: 1;
}
@media (max-width: 500px) {
  ._bannersList_ehh0q_6 {
    gap: 0.75rem;
  }
  ._bannerCard_ehh0q_13 {
    border-radius: 8px;
  }
}
._promotionsContentWrapper_mmmmg_1 {
  min-height: 100vh;
  background-color: #0b0e27;
}
._contentContainer_mmmmg_6 {
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
._contentImage_mmmmg_12 {
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px #0000001a;
}
._contentImage_mmmmg_12 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
._contentBody_mmmmg_25 {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px #0000000d;
}
._contentTitle_mmmmg_32 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}
._contentText_mmmmg_39 {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}
._contentText_mmmmg_39 p {
  margin-bottom: 1rem;
}
._contentText_mmmmg_39 ul,
._contentText_mmmmg_39 ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
._contentText_mmmmg_39 li {
  margin-bottom: 0.5rem;
}
@media (max-width: 500px) {
  ._contentContainer_mmmmg_6 {
    margin-top: 4rem;
    padding: 0.75rem;
  }
  ._contentBody_mmmmg_25 {
    padding: 1rem;
  }
  ._contentTitle_mmmmg_32 {
    font-size: 1.25rem;
  }
  ._contentText_mmmmg_39 {
    font-size: 0.9rem;
  }
}
.flash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #05022b;
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.flash-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flash-image {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: fill;
}