/* http://meyerweb.com/eric/tools/css/reset/ */
/* v5.0 | 20220918 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
  /*  -webkit-user-select: none; 
    -moz-user-select: none;   
    -ms-user-select: none;     
    user-select: none;     */  
    /* Safari */
     /* Firefox */
     /* IE/Edge */
   /* Standard */
   /* -webkit-tap-highlight-color: transparent;*/

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
*{
    box-sizing: border-box;
}
body,html {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  color: #111;

  overscroll-behavior: none;

  height: 100vh;
  margin: 0;
  text-align: center;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}


@font-face {
  font-family: 'IBMPlexSansKRRegular'; /* Give your font a name */
  src: url('assets/font/IBMPlexSansKR-Regular.ttf') format('truetype'); /* Add more formats for wider browser support */
  font-weight: normal; /* Define font weight (normal, bold, etc.) */
  font-style: normal;  /* Define font style (normal, italic, etc.) */
  font-display: swap; /* Optimize font loading */
}

body {
  font-family: 'IBMPlexSansKRRegular', sans-serif; /* Use your custom font */
}


.container {
  max-width: 420px;
  margin: 0 auto;
  padding: 5px;

  
  
  height: 100vh; /* স্ক্রিনের পুরো উচ্চতা */
  overflow-y: auto; /* প্রয়োজনে উল্লম্ব স্ক্রল করার অনুমতি দেয় */

  /* স্ক্রলবার লুকানোর জন্য */
  -ms-overflow-style: none;  /* IE এবং Edge এর জন্য */
  scrollbar-width: none; /* Firefox এর জন্য */
}

/* WebKit ব্রাউজারের জন্য স্ক্রলবার লুকানো (Chrome, Safari, Opera) */
.container::-webkit-scrollbar {
  display: none;
}




.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /*background-color: #0B0E11; */
  background-color: #f2f5f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 1s ease-out forwards;
}

.splash-screen img {
width: 100px;
height: 100px;
margin-bottom: 10px;
/*transform: rotate(180deg);*/
}

.splash-screen .logo-text {
  color: #fcd535;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: Arial, sans-serif;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

.splash-screen.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

.signup-one-screen {
display: none;
}


.signup-one-screen.visible {
display: block;
}






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

.icon {
  font-size: 24px;
  color: #222;
  vertical-align: middle;
}

.back-arrow {
  padding: 8px;
  cursor: pointer;
}

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

.icon-wrapper {
  background-color: #f5f5f5;
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

h1 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 25px;
}

.signup-form input[type="text"] {
  width: 100%;
  padding: 14px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f7f7f7;
}

.referral-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #444;
  font-size: 15px;
  margin-bottom: 10px;
  cursor: pointer;
}

.dropdown-icon {
  font-size: 14px;
  color: #888;
}

.referral-input {
  display: none;
}

.terms {
  font-size: 13px;
  color: #444;
  margin-top: 20px;
  margin-bottom: 25px;
}

.terms a {
  font-weight: 500;
  color: #111;
  text-decoration: underline;
}

.next-btn {
  width: 100%;
  background-color: #fcd535;
  color: #111;
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 20px;
}

.entity-text {
  font-size: 14px;
  text-align: center;
  color: #444;
}

.entity-link {
  color: #f0b90b;
  font-weight: 500;
  text-decoration: none;
}



























.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
  
  .loader-box {
    width: 50px;
    height: 50px;
    background-color: #2e313a;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 8px;
  }
  
  .loader-box .dot {
    width: 6px;
    height: 6px;
    background-color: #fcd535;
    border-radius: 50%;
    animation: blink 1s infinite ease-in-out;
  }
  
  .loader-box .dot2 {
    animation-delay: 0.1s;
  }
  
  .loader-box .dot3 {
    animation-delay: 0.2s;
  }
  
  .loader-box .dot4 {
    animation-delay: 0.3s;
  }
  
  @keyframes blink {
    0%, 100% {
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
  }
  















/* SIGNUP SCREEN */

.signup-screen {
    padding: 24px;
  }
  
  .signup-illustration {
    text-align: center;
    margin-top: 40px;
  }
  
  .signup-illustration img {
    width: 160px;
  }
  
  .signup-title {
    margin-top: 30px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
  }
  
  .faq-link {
    font-size: 12px;
    color: #f0b90b;
    text-decoration: none;
  }
  
  .btn-signup {
    width: 100%;
    background-color: #fcd535;
    color: #111;
    padding: 14px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
  .btn-google {
    width: 100%;
    background-color: #f5f5f5;
    color: #111;
    padding: 14px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
  .btn-google img {
    width: 20px;
  }
  
  .signup-or {
    text-align: center;
    margin: 20px 0;
    color: #999;
  }
  
  .signup-footer {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
  }
  
  .link-yellow {
    color: #f0b90b;
    text-decoration: none;
  }
  













  /* SIGNUP ONE SCREEN */

.signup-one-screen {
  padding: 24px;
}








  /* signupAlertOverlay */


  .alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.alert-box {
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px;
  width: 80%;
  max-width: 360px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.alert-icon img {
  width: 100px;
  margin-bottom: 20px;
}

.alert-text {
  font-size: 15px;
  color: #111;
  margin-bottom: 20px;
}

.alert-ok-btn {
  background-color: #fcd535;
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  cursor: pointer;
}









/*  emailVerificationScreen  */




.email-verification-screen {
  padding: 24px;
}

.email-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-icon {
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

.email-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

.email-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

.input-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.code-input-wrapper {
  display: flex;
  align-items: center;
  background: #f6f6f6;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 20px;
}

.code-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
}

.get-code-btn {
  background: none;
  border: none;
  color: #f0b90b;
  font-weight: 600;
  cursor: pointer;
}

.submit-code-btn {
  background-color: #fcd535;
  color: #111;
  border: none;
  border-radius: 6px;
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  cursor: pointer;
}

.resend-text {
  font-size: 14px;
  color: #d4a600;
  text-align: center;
}




/*  setPasswordScreen  */


/* Set Password Screen */
.set-password-screen {
  padding: 24px;
}

.set-password-form {
  margin-top: 30px;
}

.set-password-form .input-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
  text-align: left;
}

.password-input-wrapper {
  position: relative;
  background: #f6f6f6;
  border-radius: 6px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding: 14px; /* Adjust padding to accommodate icons */
}

.password-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
  padding-right: 40px; /* Make space for icons */
}

.visibility-icon {
  position: absolute;
  right: 8px;
  color: #888;
  cursor: pointer;
}

.clear-icon {
  position: absolute;
  right: 37px;
  color: #888;
  cursor: pointer;
}












/* Account Successfully Created Screen */
.account-created-screen {
  padding: 24px;
  display: flex;
  flex-direction: column;
  
}

.success-icon {
  width: 100px;
  height: 100px;
  background-color: #f0fdf4; /* Light green background */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
}

.check-circle {
  font-size: 60px;
  color: #34d399; /* Green checkmark color */
}

.success-title {
  font-size: 22px;
  font-weight: bold;
  color: #111;
  margin-bottom: 40px;
  text-align: center;
}

.marketing-preference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding:0 16px; /* Add padding inside the marketing preference */
  margin: 100px auto 20px;
}

.marketing-text {
  font-size: 14px;
  color: #333;
}

/* Switch styles */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #22c55e; /* Green when checked */
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(10px);
}

.done-btn {
  width: 100%;
  background-color: #fcd535;
  color: #111;
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}





































/* Main Screen Container*/

/* backSupportScreen*/
#backSupportScreen {
  height: 0;
  z-index: -500;
  position: relative;
}


/* homepageScreen Homepage Screen */
#main {
  min-height: 100vh;
  background-color: #f8f8f8; /* Light grey background */
  color: #333; /* Dark grey text */
  min-height: 100vh;
  position: relative;
}


.main-bottom-cutout{
 margin-top: 120px;
}

/* Homepage Screen */
#homepageScreen {
  overflow-y: auto;
  height: 100vh;
}
/* Top Bar */
#homepageScreen .top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

#homepageScreen .top-bar .left-icons,
#homepageScreen .top-bar .right-icons {
  display: flex;
  align-items: center;
  gap: 15px;
}
#homepageScreen .top-bar .left-icons .homelogo {
  height: 30px;
}
#homepageScreen .top-bar .material-icons {
  font-size: 24px;
  color: #777;
  cursor: pointer;
}

#homepageScreen .top-bar .search-bar {
  flex-grow: 1;
  background-color: #eef0f3; /* Light background for search bar */
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  margin: 0 15px;
}

#homepageScreen .top-bar .search-bar .material-icons {
  color: #bbb;
  margin-right: 10px;
}

#homepageScreen .top-bar .search-bar input[type="text"] {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #333;
  outline: none;
  width: 100%;
}

/* Balance Section */
#homepageScreen .balance-section {
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 0px;
}

#homepageScreen .balance-section .balance-header {
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px;
  font-size: 16px;
}

#homepageScreen .balance-section .total-balance-text {
 
  color: #777;
}



#homepageScreen .balance-section .balance-body {
height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#homepageScreen .balance-section .balance {
  align-self: center;
  font-size: 28px;
  font-weight: bold;
  color: #222;
}

#homepageScreen .balance-section .deposit-btn {
  align-self: center;
  background-color: #fcd535;
  color: #111;
  border: none;
  border-radius: 20px;
  padding: 9px 28px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: auto;
  height: auto;

}
#homepageScreen .balance-section .deposit-btn:focus {
  outline: none !important;
}
#homepageScreen .balance-section .deposit-btn:active {
  outline: none !important;
}
/* Trust Section */


#homepageScreen .trust-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  padding: 20px;
  background-color: #f9f9f9;
}

#homepageScreen .item {
  text-align: center;
  border-left: 1px solid #ddd; /* বাম দিকে বর্ডার যোগ করা হয়েছে */
  padding-left: 25px; /* বর্ডারের জন্য জায়গা তৈরি করতে padding যোগ করা হয়েছে */
}

/* প্রথম আইটেমের বাম দিকে বর্ডার দরকার নেই */
#homepageScreen .item:first-child {
  border-left: none;
  padding-left: 0;
}

#homepageScreen .number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #222;
  font-family: 'Inter', sans-serif;
  margin-bottom: 8px;
}

#homepageScreen .label {
  font-size: 0.8rem;
  color: #555;
  font-family: 'Inter', sans-serif;
}

/* Watchlist Section */
#homepageScreen .watchlist-section {
  margin-bottom: 70px;
  padding: 0 10px;
}

/* Watchlist Header Top - Refined */
#homepageScreen .watchlist-section .watchlist-header-top {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 10px;
}

#homepageScreen .watchlist-section .watchlist-header-top .watchlist-title {
  display: none;
  font-size: 16px;
  font-weight: bold;
  color: #999;
  margin-right: 15px; /* Add some space after "Watchlist" */
}

#homepageScreen .watchlist-section .watchlist-header-top .coin-header {
  font-size: 16px;
  font-weight: bold;
  color: #727171;
  text-align: right;
}

/* Watchlist Tabs - Refined */
#homepageScreen .watchlist-section .watchlist-tabs {
  display: flex;
  gap: 5px; /* Reduce gap between tabs */
  overflow-x: auto;
  margin-bottom: 15px;
}

#homepageScreen .watchlist-section .watchlist-tabs button {
  background: none;
  border: none;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 8px; /* Reduce padding inside tabs */
  border-radius: 10px; /* More rounded tabs */
  white-space: nowrap;
}

#homepageScreen .watchlist-section .watchlist-tabs button.active {
  color: #fcd535;
  background-color: #2a2e34; /* Darker background for active tab */
}

#homepageScreen .watchlist-section .coin-list {
  /* No specific styling needed here yet, using general list styles */
}

#homepageScreen .watchlist-section .coin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

#homepageScreen .watchlist-section .coin-item:last-child {
  border-bottom: none;
}

#homepageScreen .watchlist-section .coin-item .coin-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#homepageScreen .watchlist-section .coin-item .coin-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

#homepageScreen .watchlist-section .coin-item .coin-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#homepageScreen .watchlist-section .coin-item .coin-details .coin-symbol {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin-bottom: 5px;
}

#homepageScreen .watchlist-section .coin-item .coin-details .coin-name {
  font-size: 14px;
  color: #777;
}

#homepageScreen .watchlist-section .coin-item .coin-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#homepageScreen .watchlist-section .coin-item .coin-price .price {
  font-weight: bold;
  color: #222;
  font-size: 16px;
  text-align: right; /* Align price to the right */
}

#homepageScreen .watchlist-section .coin-item .coin-price .change {
  font-size: 14px;
  text-align: right; /* Align change to the right */
  margin-bottom: 5px;
}

#homepageScreen .watchlist-section .coin-item .coin-price .change.positive {
  color: #22c55e;
}

#homepageScreen .watchlist-section .coin-item .coin-price .change.negative {
  color: #ef4444;
}

/* Bottom Navigation */
/* Bottom Navigation */
#main .bottom-navigation {
  background-color: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-around;
  padding: 10px 0; /* Adjust bottom navigation padding */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

#main .bottom-navigation .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #777;
  cursor: pointer;
}

#main .bottom-navigation .nav-item.active {
  color: #fcd535;
}

#main .bottom-navigation .nav-item .material-icons {
  font-size: 24px;
  margin-bottom: 5px;
}

#main .bottom-navigation .nav-item span {
  font-size: 12px;
}










/* Markets Screen - Updated Top Bar, Tabs, Filter Bar (Light Mode - Hiding Scrollbar, No BG, Less Padding) */
.markets-screen {
}
.markets-screen .top-bar {
  display: flex;
  align-items: center;
  padding: 8px 15px 8px 10px; /* Less padding */
  color: #111;
  overflow-x: clip;
}

.markets-screen .top-bar .search-bar {
  flex-grow: 1;
  background-color: #eef0f3;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 6px 12px; /* Less padding */
  margin-right: 8px; /* Less margin */
  overflow-x: clip;
}

.markets-screen .top-bar .search-bar .material-icons {
  color: #bbb;
  margin-right: 6px; /* Less margin */
  font-size: 20px;
}

.markets-screen .top-bar .search-bar input[type="text"] {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #333;
  outline: none;
  width: 100%;
}

.markets-screen .top-bar .right-icons {
  display: flex;
  align-items: center;
  gap: 8px; /* Less gap */
}

.markets-screen .top-bar .right-icons .material-icons {
  font-size: 24px;
  color: #777;
  cursor: pointer;
}

.markets-screen .markets-tabs-top {
  display: flex;
  align-items: center;
  gap: 6px; /* Less gap */
  overflow-x: auto;
  padding: 8px 10px 8px 10px; /* Less padding */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
.markets-screen .markets-tabs-left {
  display: flex;
  align-items: center;
  gap: 6px; /* Less gap */
  overflow-x: auto;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
.markets-screen .markets-tabs-right {
  display: flex;
  align-items: center;
  gap: 6px; /* Less gap */
  overflow-x: auto;
  padding: 0px 0px 0px 10px; /* Less padding */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

.markets-screen .markets-tabs-left::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

.markets-screen .markets-tabs-left .tab {
  background: none;
  border: none;
  color: #777;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 10px; /* Less padding */
  white-space: nowrap;
}

.markets-screen .markets-tabs-left .tab.active {
  color: #fcd535;
  border-bottom: 1px solid #fcd535;
  padding-bottom: 4px; /* Less padding */
}

.markets-screen .markets-tabs-top .tab-menu-icon {
  font-size: 24px;
  color: #777;
  margin-left: auto;
}

.markets-screen .markets-tabs-middle {
  padding: 5px 15px 5px 10px; /* Less padding */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.markets-screen .markets-tabs-middle::-webkit-scrollbar {
  display: none;
}

.markets-screen .markets-tabs-middle .tabs-middle-container {
  display: flex;
  gap: 6px; /* Less gap */
}

.markets-screen .markets-tabs-middle .tab {
  background: none;
  border: 1px solid #ddd;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 10px; /* Less padding */
  border-radius: 20px;
  white-space: nowrap;
}

.markets-screen .markets-tabs-middle .tab.active {
  color: #fcd535;
  border-color: #fcd535;
}

.markets-screen .filter-bar {
  display: flex;
  align-items: center;
  gap: 4px; /* Less gap */
  overflow-x: auto;
  padding: 8px 10px; /* Less padding */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.markets-screen .filter-left {
  display: flex;
  align-items: center;
  gap: 4px; /* Less gap */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.markets-screen .filter-right {
  display: flex;
  align-items: center;
  gap: 4px; /* Less gap */
  overflow-x: auto;
  padding: 0px 0 0 8px; /* Less padding */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.markets-screen .filter-left::-webkit-scrollbar {
  display: none;
}

.markets-screen .filter-left .filter-btn {
  background: none;
  border: 1px solid #ddd;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px; /* Less padding */
  border-radius: 20px;
  white-space: nowrap;
}

.markets-screen .filter-left .filter-btn.active {
  background-color: #fcd535;
  color: #111;
  border-color: #fcd535;
}

.markets-screen .filter-bar .filter-list-icon {
  font-size: 20px;
  color: #777;
  margin-left: auto;
}









/* Coin Table Wrapper */
.markets-screen .coin-table-wrapper {
  overflow-x: auto;
}

/* Markets Header (Table Header) */
.markets-screen .markets-header.coin-row {
  display: flex;
  /* border-bottom: 1px solid #eee; */ /* Optional: Add a line after the header */
}

.markets-screen .markets-header .name-header.coin-cell {
  flex: 2; /* Adjust as needed for column width */
  padding: 12px 10px;
  font-weight: normal;
  color: #777;
  font-size: 12px;
  text-align: left;
}

.markets-screen .markets-header .price-header.coin-cell {
  flex: 1.5;
  padding: 12px 0px;
  font-weight: normal;
  color: #777;
  font-size: 12px;
  text-align: right;
}

.markets-screen .markets-header .change-header.coin-cell {
  flex: 1.5;
  padding: 12px 0px;
  font-weight: normal;
  color: #777;
  font-size: 12px;
  text-align: right;
}

.markets-screen .markets-header .sort-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Coin Item (Table Row) */
.markets-screen .coin-item.coin-row {
  display: flex;
}

.markets-screen .coin-item:last-child {
  border-bottom: none;
}

.markets-screen .coin-item .coin-name.coin-cell {
  flex: 2;
  padding: 12px 10px;
  text-align: left;
}

.markets-screen .coin-item .coin-price.coin-cell {
  flex: 1.5;
  padding: 12px 10px;
  text-align: right;
}

.markets-screen .coin-item .coin-change.coin-cell {
  flex: 1.5;
  padding: 12px 10px;
  text-align: center;
}

.markets-screen .coin-item .coin-price .secondary-price {
  display: block;
  font-size: 12px;
  color: #777;
}

.markets-screen .coin-item .coin-change {
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  color: #ffffff;
  margin-left: auto; /* Push to the right */
}

.markets-screen .coin-item .coin-change span {
  display: block;
  padding: 10px 8px;
  border-radius: 6px;
}

.markets-screen .coin-item .coin-change.positive span {
  background-color: rgba(4, 156, 60, 0.811);
}

.markets-screen .coin-item .coin-change.negative span {
  background-color: rgb(239 68 68 / 72%);
}
































/* Trade Screen Styles - Top Bar */
.trade-screen {
  padding: 2px 10px;
}
.trade-screen .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 10px 2px 10px;
  color: #111;
}

.trade-screen .top-bar .left-items {
  display: flex;
  gap: 5px;
  flex:1;
}

.trade-screen .top-bar .left-items .top-link {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid transparent;
}

.trade-screen .top-bar .left-items .top-link.active {
  color: #111;
  border-bottom: 1px solid #fcd535;
}

.trade-screen .top-bar .right-items {
  display: flex;
  align-items: center;
}

.trade-screen .top-bar .right-items .material-icons {
  font-size: 24px;
  color: #555;
  cursor: pointer;
}

/* Trade Screen Styles - Trade Tabs Top */
.trade-screen .trade-tabs-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ddd;
}

.trade-screen .trade-tabs-top .left-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trade-screen .trade-tabs-top .left-items .tab {
  color: #555;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}

.trade-screen .trade-tabs-top .left-items .tab.active {
  color: #111;
  border-bottom: 1px solid #fcd535;
}

.trade-screen .trade-tabs-top .left-items .tab .symbol {
  font-size: 10px;
}

.trade-screen .trade-tabs-top .right-items {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trade-screen .trade-tabs-top .right-items .dropdown {
  display: flex;
  align-items: center;
  position: relative;
  gap: 3px;
  padding: 4px 8px;
  color: #555;
  cursor: pointer;
  font-size: 10px;
}

.trade-screen .trade-tabs-top .right-items .dropdown .selected-item {
  font-weight: bold;
}

.trade-screen .trade-tabs-top .right-items .dropdown .dropdown-items {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none; /* Initially hidden */
  flex-direction: column;
  min-width: 100%;
}

.trade-screen .trade-tabs-top .right-items .active .dropdown-items {
  display: flex!important; /* Should be 'flex' to show items vertically */
}

.trade-screen .trade-tabs-top .right-items .dropdown .dropdown-items span {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: bold;
}

.trade-screen .trade-tabs-top .right-items .dropdown .dropdown-items span.active {
  color: #fcd535;
}

.trade-screen .trade-tabs-top .right-items .dropdown .dropdown-items span:hover {
  background-color: #eee;
}

.trade-screen .trade-tabs-top .right-items .dropdown .arrow {
  font-size: 16px;
  font-weight: bold;
}

.trade-screen .trade-tabs-top .right-items .material-icons {
  font-size: 16px;
  color: #555;
  cursor: pointer;
}






/* ... other CSS ... */

.trade-tabs-top .right-items .search-container {
  display: flex;
  align-items: center;
  position: relative;
  height: 35px;
}

.trade-tabs-top .right-items .search-container .material-icons#searchIcon {
  font-size: 20px;
  color: #555;
  cursor: pointer;
}

.expanded-search-bar {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 20;
  overflow: hidden;
  width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px 15px 10px 10px;
  transition: width 0.2s ease-out;
}

.expanded-search-bar.active {
  width: 180px;
  padding: 0 8px;
}

.expanded-search-bar input[type="text"] {
  flex-grow: 1;
  border: none;
  padding: 8px;
  font-size: 14px;
  outline: none;
  background-color: transparent;
  color: #333;
}

.expanded-search-bar input[type="text"]::placeholder {
  color: #999;
}

.expanded-search-bar .close-search {
  position: absolute; /* Make the close icon absolute */
  top: 50%; /* Vertically center */
  right: 8px; /* Position from the right */
  transform: translateY(-50%); /* Adjust for exact vertical centering */
  font-size: 20px;
  color: #777;
  cursor: pointer;
  padding: 4px;
  z-index: 1; /* Ensure it's above the input */
}

.expanded-search-bar .close-search:hover {
  color: #555;
}







/* Trade Screen Styles - Trade List */
.trade-screen .trade-list {
  padding: 0;
}

.trade-screen .trade-item {
  padding: 12px 15px;
  margin-bottom: 8px;
  border-radius: 6px;
  border: 2px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trade-screen .trade-item-top {
  display: flex;
  align-items: center;
  gap: 15px;
}

.trade-screen .trade-item-top .logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.trade-screen .trade-item-top .logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.trade-screen .trade-item-top .coin-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trade-screen .trade-item-top .coin-info .symbol-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}

.trade-screen .trade-item-top .coin-info .symbol-pair .name {
  display: flex;
  align-items: center;
  gap: 5px;
}

.trade-screen .trade-item-top .coin-info .symbol-pair .name .badge {
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
}

.trade-screen .trade-item-top .coin-info .symbol-pair .name .badge.sell {
  background-color: #ef4444;
}

.trade-screen .trade-item-top .coin-info .symbol-pair .name .badge.buy {
  background-color: #22c55e;
}

.trade-screen .trade-item-top .coin-info .symbol-pair .price-change .price {
  font-weight: bold;
}

.trade-screen .trade-item-top .coin-info .symbol-pair .price-change .percentage {
  font-size: 11px;
  color: #777;
  font-weight: normal;
}

.trade-screen .trade-item-top .coin-info .base-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}

.trade-screen .trade-item-top .coin-info .base-pair .name {
  display: flex;
  align-items: center;
  gap: 5px;
}

.trade-screen .trade-item-top .coin-info .base-pair .name .badge {
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
}

.trade-screen .trade-item-top .coin-info .base-pair .name .badge.sell {
  background-color: #ef4444;
}

.trade-screen .trade-item-top .coin-info .base-pair .name .badge.buy {
  background-color: #22c55e;
}

.trade-screen .trade-item-top .coin-info .base-pair .price-change .change {
  font-weight: bold;
}
.trade-screen .trade-item-top .coin-info .base-pair .price-change .positive {
  color:#22c55e;
}

.trade-screen .trade-item-top .coin-info .base-pair .price-change .percentage {
  font-size: 11px;
  font-weight: normal;
}

/* Add styling for "Perp" using ::after */
.trade-screen .trade-item-top .coin-info .perp .name .pair::after {
  content: "Perp";
  background-color: #f0f0f0; /* Light gray background */
  color: #777; /* Gray text */
  font-size: 9px;
  font-weight: bold;
  border-radius: 3px;
  padding: 2px 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.trade-screen .trade-item-bottom {
  color: #777;
  font-size: 11px;
}

.trade-screen .trade-item-bottom .funding {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.trade-screen .trade-item-bottom .countdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
}





.trade-screen .trade-item-top .coin-info .badge-sell .name .pair::before {
  content: "S";
  background-color: #ef4444;
  display: inline-block;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    margin-right: 5px;
}
.trade-screen .trade-item-top .coin-info .badge-buy .name .pair::before {
  content: "B";
  background-color: #22c55e;
  display: inline-block;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    margin-right: 5px;
}



























#tradeScreenProjects {
  padding: 16px;
}

.projects-header {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: left;
}

.projects-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.projects-scroll::-webkit-scrollbar {
  display: none;
}

.project-card {
  background-color: #fff;
  border-radius: 12px;
  width: 65%;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Full-width image */
.project-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Title */
.project-title {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px 0;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.project-title .title {
  color: #111;
}
.project-title .verified-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #fcd535;
  border-radius: 50%;
  position: relative;
}
.project-title .verified-icon::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 10px;
  color: #111;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

/* Stats */
.project-stats {
  display: flex;
  justify-content: space-between;
  padding: 2px 10px;
  font-size: 13px;
  color: #333;
}
.project-stats .percent {
  color: #5b57ff;
  font-weight: 500;
}
.project-stats .volume {
  font-weight: 500;
}

/* Progress bar */
.progress-bar {
  background: #e0e0e0;
  height: 6px;
  margin: 4px 0px;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  background: #5b57ff;
  height: 100%;
}

/* Meta Info */
.project-meta {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px 10px;
  font-size: 12px;
  color: #666;
}
.project-meta .material-icons {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 4px;
}


























#projectScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 5px 10px;
  background-color: #f8f8f8;
  color: #1e272e;
  z-index: 1000;
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
  font-size: 14px; /* ⬆️ increased overall font size */
}

/* Header Row */
#projectScreen .project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-weight: 600;
  font-size: 16px;
}
#projectScreen .back-button,
#projectScreen .qr-button {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
#projectScreen .material-icons {
  font-size: 17px;
  /*color: #fcd535;*/
}

/* Card Container */
#projectScreen .project-detail-card {
  padding: 0;
  background: transparent; /* 🟡 no background */
  border-radius: 0;         /* 🟡 no border radius */
  box-shadow: none;         /* 🟡 no shadow */
}

/* Banner */
#projectScreen .project-banner {
  position: relative;
}
#projectScreen .project-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 10px; /* ✅ new */
}
#projectScreen .project-banner .play-button,
#projectScreen .project-banner .bookmark-icon {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#projectScreen .project-banner .play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#projectScreen .project-banner .bookmark-icon {
  top: 12px;
  right: 12px;
}

/* Content Area */
#projectScreen .project-content {
  padding: 0 16px 16px;
}

/* Top Row */
#projectScreen .project-content .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #888;
  margin: 12px 0 6px;
}
#projectScreen .project-content .category {
  color: #4c6ef5;
  font-weight: 600;
}
#projectScreen .project-content .time-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Title & Subtitle */
#projectScreen .project-content .title {
  font-size: 25px; /* ✅ slightly larger */
  font-weight: 700;
  margin: 4px 0 6px;
  text-align: left;
  color: #111;
  margin: 15px 0;
}
#projectScreen .project-content .subtitle {
  font-size: 19px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

/* Funding */
#projectScreen .funding {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 14px;
  font-weight: 500;
  margin: 20px 0 10px;
}
#projectScreen .raised-goal {
  display: flex;
  gap: 4px;
  align-items: center;
}
#projectScreen .funding .raised {
  color: #14b8a6;
  font-weight: 600;
  font-size: 15px; /* ✅ bold & bigger */
}
#projectScreen .funding .from {
  color: #999;
  font-weight: 400;
}
#projectScreen .funding .goal {
  color: #555;
  font-weight: 600;
  font-size: 15px; /* ✅ bold & bigger */
}
#projectScreen .funding .collected {
  color: #4c6ef5;
  font-size: 14px;
}
#projectScreen .funding .collected .percentage {
  color: #fcd535;
  font-weight: 700;
  margin-left: 4px;
  font-size: 15px; /* ✅ bold & bigger */
}

/* Progress Bar */
#projectScreen .progress-bar {
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}
#projectScreen .progress-fill {
  height: 100%;
  background: #fcd535;
}

/* Stats Row */
#projectScreen .stats-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
  font-size: 14px;
  color: #444;
  margin-bottom: 16px;
}
#projectScreen .stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#projectScreen .stat-block .label {
  font-size: 13px;
  color: #888;
}
#projectScreen .stat-block .value {
  font-weight: 600;
}
#projectScreen .stat-block .material-icons {
  font-size: 30px; /* ✅ bigger icon in stats */
  color: #fcd535;
}

/* Tab Menu */
#projectScreen .tab-menu {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
  padding-bottom: 4px;
  font-size: 14px;
}
#projectScreen .tab-menu .tab {
  color: #888;
  cursor: pointer;
}
#projectScreen .tab-menu .tab.active {
  color: #fcd535;
  border-bottom: 2px solid #fcd535;
}

/* Description */
#projectScreen .description-text {
  font-size: 14px;
  color: #444;
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: left;
}

/* Support Button */
#projectScreen .support-btn {
  text-align: center;
  padding: 12px 0;
}
#projectScreen .support-btn button {
  background: #fcd535;
  color: #1e272e;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  width: 100%;
}









#tradeScreenCopy .copy-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* No specific background or padding in the provided .top-bar */
}

#tradeScreenCopy .copy-topbar .top-link {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

#tradeScreenCopy .copy-topbar .top-link.active {
  color: #111;
  border-bottom: 1px solid #fcd535;
}

#tradeScreenCopy .copy-tabs-selector-search {
  display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
}

#tradeScreenCopy .copy-tabs-selector-search .left-items {
  display: flex;
  align-items: center;
  gap: 10px;
}
#tradeScreenCopy .copy-tabs-selector-search .left-items .dropdown {
  display: flex;
      align-items: center;
      position: relative;
      gap: 3px;
      padding: 4px 8px;
      color: #555;
      cursor: pointer;
      font-size: 10px;
}
#tradeScreenCopy .copy-tabs-selector-search .left-items .active .dropdown-items {
  display: flex !important
;
}
#tradeScreenCopy .copy-tabs-selector-search .left-items .dropdown .dropdown-items {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
  flex-direction: column;
  min-width: 100%;
}
#tradeScreenCopy .copy-tabs-selector-search .left-items .dropdown .dropdown-items span {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: bold;
}
#tradeScreenCopy .copy-tabs-selector-search .left-items .dropdown .dropdown-items span.active {
  color: #fcd535;
}
#tradeScreenCopy .copy-tabs-selector-search .left-items .dropdown .arrow {
  font-size: 16px;
  font-weight: bold;
}
#tradeScreenCopy .copy-tabs-selector-search .left-items .material-icons {
  font-size: 16px;
  color: #555;
  cursor: pointer;
}

#tradeScreenCopy .copy-tabs-selector-search .right-items {
  display: flex;
  align-items: center;
  gap: 10px;
}

#tradeScreenCopy .copy-tabs-selector-search .right-items .search-container {
  display: flex;
  align-items: center;
  position: relative;
  height: 35px;
}
#tradeScreenCopy .copy-tabs-selector-search .right-items .search-container #copySearchIcon {
  font-size: 20px;
  color: #555;
  cursor: pointer;
}
#tradeScreenCopy .copy-tabs-selector-search .expanded-search-bar {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 20;
  overflow: hidden;
  width: 0;
  height: 100%;
  display: flex
;
  align-items: center;
  padding: 10px 15px 10px 10px;
  transition: width 0.2s ease-out;
}
#tradeScreenCopy .copy-tabs-selector-search .expanded-search-bar input[type="text"] {
  flex-grow: 1;
  border: none;
  padding: 8px;
  font-size: 14px;
  outline: none;
  background-color: transparent;
  color: #333;
}
#tradeScreenCopy .copy-tabs-selector-search .expanded-search-bar .close-search {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 20px;
  color: #777;
  cursor: pointer;
  padding: 4px;
  z-index: 1;
}



#tradeScreenCopy .copy-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid #eee;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-bottom: 8px;
}


#tradeScreenCopy .copy-item .copy-name {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
#tradeScreenCopy .copy-item .copy-name .copy-button button {
    background-color: #fcd535;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    height: auto;
    display: flex;
    align-items: flex-start;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
#tradeScreenCopy .copy-item .copy-name .item-nameimage {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
#tradeScreenCopy .copy-item .copy-name .item-nameimage img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
#tradeScreenCopy .copy-item .copy-name .item-nameimage div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#tradeScreenCopy .copy-item .copy-name .item-nameimage div span:first-child {
  font-size: 16px;
  font-weight: bold;
  color: #222;
}
#tradeScreenCopy .copy-item .copy-name .item-nameimage div span:last-child {
  font-size: 10px;
  color: #777;
}
#tradeScreenCopy .copy-item .copy-name .item-nameimage .name {
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  margin-right: 8px;
}  




  /* Copy Info Main Section */
#tradeScreenCopy .copy-item> div:last-child {  /*copy-info  -- div:last-child*/
    display: flex;
    justify-content: space-between;
  }
#tradeScreenCopy .copy-item> div:last-child >div {
    display: flex;
    flex:1;
    flex-direction: column;
    justify-content: space-between;
  }
  
#tradeScreenCopy .copy-item> div:last-child >div:first-child > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color:black;
  }
  
#tradeScreenCopy .copy-item> div:last-child >div:first-child > div:first-child {
    flex: 1.3;
    display: flex;
    justify-content: flex-end;
}
#tradeScreenCopy .copy-item> div:last-child >div:first-child > div:last-child img {
    width: 100px;
    height: auto;
    min-width: 80px;
}
  #tradeScreenCopy .copy-item> div:last-child >div:first-child > div:last-child,    #tradeScreenCopy .copy-item> div:last-child >div:first-child > div > div:nth-child(2) {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
  }
    #tradeScreenCopy .copy-item> div:last-child >div:first-child > div > div.title {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
    text-align: left;
}
    #tradeScreenCopy .copy-item> div:last-child >div:first-child > div > div.value {
    font-size: 14px;
    font-weight: bold;
  }
  
    #tradeScreenCopy .copy-item> div:last-child >div:first-child .value.profit {
    color: #28a745;
  }
  
    #tradeScreenCopy .copy-item> div:last-child >div:first-child .percentage {
    font-size: 12px;
    color: #6c757d;
  }


  #tradeScreenCopy .copy-item> div:last-child >div:last-child> div:first-child > div:first-child> div:first-child {
    font-size: 12px;
  }
  #tradeScreenCopy .copy-item> div:last-child >div:last-child> div:first-child > div:last-child> div:first-child {
    font-size: 14px;
  }
  #tradeScreenCopy .copy-item> div:last-child >div:last-child> div:first-child > div> div:last-child {
    font-size: 11px;
  }
  #tradeScreenCopy .copy-item .positive {
    color:green;
  }



  /* Copy Info Details Section */

  
  #tradeScreenCopy .copy-item> div:last-child >div:last-child > div {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  #tradeScreenCopy .copy-item> div:last-child >div:last-child > div>div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
  }

  
  #tradeScreenCopy .copy-item> div:last-child >div:last-child> div:last-child > div> div:first-child {
    font-size: 14px;
  }
  #tradeScreenCopy .copy-item> div:last-child >div:last-child> div:last-child > div> div:last-child {
    font-size: 12px;
  }

  
  #tradeScreenCopy .copy-item> div:last-child >div:last-child > div > div.value {
    font-size: 14px;
    font-weight: bold;
    color: #212529;
  }
  
  #tradeScreenCopy .copy-item> div:last-child >div:last-child .value.profit {
    color: #28a745;
  }
  
  #tradeScreenCopy .copy-item> div:last-child >div:last-child .percentage {
    font-size: 12px;
    color: #6c757d;
  }




































#tradeScreenEarn .earn-search-bar {
  /* Corrected to match marketsScreen's top-bar .search-bar */
  flex-grow: 1;
  background-color: #eef0f3;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  margin-bottom: 20px;
  overflow-x: clip;
}

#tradeScreenEarn .earn-search-bar .search-bar {
  display: flex;
  align-items: center;
  width: 100%;
}

#tradeScreenEarn .earn-search-bar .search-bar .material-icons {
  color: #bbb;
  margin-right: 6px;
  font-size: 20px;
}

#tradeScreenEarn .earn-search-bar .search-bar input[type="text"] {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #333;
  outline: none;
  width: 100%;
}

#tradeScreenEarn .earn-topbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 2px 5px 2px 2px;
  color: #111;
  margin-bottom: 15px;
}

#tradeScreenEarn .earn-topbar .top-link {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid transparent;
  margin-right: 15px;
}

#tradeScreenEarn .earn-topbar .top-link.active {
  color: #111;
  border-bottom: 2px solid #fcd535;
}

#tradeScreenEarn .earn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

#tradeScreenEarn .earn-list>div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

#tradeScreenEarn .earn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background-color: transparent;
  border: 1px solid #ddd;
  border-radius: 8px;
}

#tradeScreenEarn .earn-item .item-first {
  display: flex;
  align-items: center;
  flex: 1; /* Added flex: 1 */
}

#tradeScreenEarn .earn-item .item-first img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
  object-fit: cover;
}

#tradeScreenEarn .earn-item .item-first .name {
  font-size: 16px;
  font-weight: 500;
}

#tradeScreenEarn .earn-item .item-middle {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  flex: 1; /* Added flex: 1 */
  margin-right: 10px;
}

#tradeScreenEarn .earn-item .item-middle span {
  display: inline-block;
}

#tradeScreenEarn .earn-item .item-middle .percentage {
  font-size: 12px;
  color: #555;
}

#tradeScreenEarn .earn-item .item-last {
  /* Styles for the Subscribe button */
  flex: 1; /* Added flex: 1 */
  text-align: right; /* Align the button to the right */
}

#tradeScreenEarn .earn-item .item-last .subscribe-button {
  background-color: #ffde59;
  color: #111;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.2s ease-in-out;
}

#tradeScreenEarn .earn-item .item-last .subscribe-button:hover {
  background-color: #f0c90b;
}

#tradeScreenEarn .earn-item .name-with-subtext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#tradeScreenEarn .earn-item .name-with-subtext .name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

#tradeScreenEarn .earn-item .name-with-subtext .subtext {
  font-size: 12px;
  color: #555;
}








/* General container for the Bot screen */
#tradeScreenBot {
  padding: 2px 10px;
  border-radius: 0;
  height: 100vh;
}

/* NEW TOP BAR STYLES */
.bot-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
}

.bot-topbar .left-items span {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

.bot-topbar .right-items {
  display: flex;
  align-items: center;
}

.bot-topbar .icon-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ced4da;
  border-radius: 15px;
  padding: 2px 5px;
  font-size: 14px;
}
.bot-topbar .icon-button .vertical-line {
  height: 14px;
  border-left: 1px solid #ced4da;
  margin: 0 4px;
}

.bot-topbar .icon-button .material-icons {
  font-size: 20px;
  color: #6c757d;
}

.bot-topbar .icon-button .material-icons:first-child {
  margin-right: 4px;
}

/* Container for individual bot items */
#tradeScreenBot .bot-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid #eee;
  border: 1px solid #dee2e6; /* Added border */
  border-radius: 8px; /* Added border radius */
  margin-bottom: 8px; /* Added margin between items */
}

/* Bot Name Section */
#tradeScreenBot .bot-item .bot-name {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

#tradeScreenBot .bot-item .bot-name .bot-name {
  display: flex;
  flex-direction: column;
}

#tradeScreenBot .bot-item .bot-name .bot-name .name {
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  margin-right: 8px;
}

#tradeScreenBot .bot-item .bot-name .bot-name .totale-hittet {
  display: flex;
  align-items: center;
  color: #6c757d;
  font-size: 12px;
}

#tradeScreenBot .bot-item .bot-name .bot-name .totale-hittet .material-icons {
  font-size: 16px;
  margin-right: 4px;
}

#tradeScreenBot .bot-item .bot-name .bot-name .totale-hittet .count {
  text-align: left;
}

#tradeScreenBot .bot-item .copy-button button {
  background-color: #fcd535;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  height: auto;
  display: flex;
  align-items: flex-start;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

/* Bot Main Info Section */
#tradeScreenBot .bot-item .bot-main-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#tradeScreenBot .bot-item .bot-main-info > div:first-child {
  display: flex;
  flex:1;
  flex-direction: column;
  align-items: flex-start; /* Aligns content to the left */
}
#tradeScreenBot .bot-item .bot-main-info > div:last-child {
  flex: 1.3;
  display: flex;
  justify-content: flex-end;
}

#tradeScreenBot .bot-item .bot-main-info .title {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 4px;
  text-align: left; /* Ensures title text is left-aligned */
}

#tradeScreenBot .bot-item .bot-main-info .value {
  font-size: 18px;
  font-weight: bold;
  color: #28a745;
  text-align: left; /* Ensures value text is left-aligned */
}

#tradeScreenBot .bot-item .bot-main-info .value.loss {
  color: #dc3545;
}

#tradeScreenBot .bot-main-info .chart img {
  width: 100px;
  height: auto;
  min-width: 180px;

}

/* Bot Info Details Section */
#tradeScreenBot .bot-item .bot-info-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

#tradeScreenBot .bot-item .bot-info-details > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#tradeScreenBot .bot-item .bot-info-details > div > div:first-child {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 2px;
}

#tradeScreenBot .bot-item .bot-info-details > div > div.value {
  font-size: 14px;
  font-weight: bold;
  color: #212529;
}

#tradeScreenBot .bot-item .bot-info-details .value.profit {
  color: #28a745;
}

#tradeScreenBot .bot-item .bot-info-details .percentage {
  font-size: 12px;
  color: #6c757d;
}

/* Total Matched Trades Section */
#tradeScreenBot .bot-item .total-matched-trades {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

#tradeScreenBot .bot-item .total-matched-trades .title {
  font-size: 12px;
  color: #6c757d;
}

#tradeScreenBot .bot-item .total-matched-trades .value {
  font-size: 14px;
  font-weight: bold;
  color: #212529;
}

/* Last bot item, remove border */
#tradeScreenBot .bot-item:last-child {
  border-bottom: none;
}

/* Example: Styles for a list of bots */
#tradeScreenBot .bot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}












































/* Arbitrage Screen Styles - Light Mode - Updated */

.arbitrage-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* স্ক্রিনের পুরো উচ্চতা */
  padding: 5px 10px 5px 10px;
  background-color: inherit; /* লাইট ব্যাকগ্রাউন্ড */
  color: #1e272e; /* ডার্ক টেক্সট */
  z-index: 1000;
  overflow-y: auto; /* প্রয়োজনে উল্লম্ব স্ক্রল করার অনুমতি দেয় */

  /* স্ক্রলবার লুকানোর জন্য */
  -ms-overflow-style: none;  /* IE এবং Edge এর জন্য */
  scrollbar-width: none; /* Firefox এর জন্য */
}

/* WebKit ব্রাউজারের জন্য স্ক্রলবার লুকানো (Chrome, Safari, Opera) */
.arbitrage-screen::-webkit-scrollbar {
  display: none;
}



.arbitrage-screen .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px 2px 0px;
}

.arbitrage-screen .top-bar .back-button i {
  font-size: 24px;
  cursor: pointer;
  color: #555;
}

.arbitrage-screen .top-bar .title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.arbitrage-screen #createMenuBtn{
  vertical-align: middle;
}

.arbitrage-screen .section-title {
  padding: 15px 0px;
  font-size: 16px;
  font-weight: bold;
  color: #555;
  display: flex;
  align-items: center;
  gap: 5px;
}

.arbitrage-screen .section-title .info-icon {
  font-size: 18px;
  color: #777;
}

.arbitrage-screen .coin-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arbitrage-screen .coin-header .coin-logo i {
  font-size: 30px;
  color: #fcd535;
}

.arbitrage-screen .coin-header .coin-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.arbitrage-screen .coin-header .arrow-down i {
  font-size: 20px;
  color: #555;
}

.arbitrage-screen .symbol-pairs {
  padding: 15px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arbitrage-screen .symbol-pairs > div { /* Target direct children (perp and base-pair) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
  padding: 8px 0;
}

.arbitrage-screen .symbol-pairs .name {
  display: flex;
  align-items: center;
  gap: 5px;
}

.arbitrage-screen .symbol-pairs .price-change {
  text-align: right;
}

.arbitrage-screen .symbol-pairs .price-change .price {
  font-weight: bold;
}

.arbitrage-screen .symbol-pairs .price-change .percentage {
  font-size: 11px;
}

.arbitrage-screen .symbol-pairs .price-change .change {
  font-weight: bold;
}

.arbitrage-screen .symbol-pairs .negative {
  color: #ef4444;
}
.arbitrage-screen .symbol-pairs .positive {
  color: #22c55e;
}

.arbitrage-screen .symbol-pair .name .pair-label {
  content: "Perp";
  background-color: #f0f0f0;
  color: #777;
  font-size: 9px;
  font-weight: bold;
  border-radius: 3px;
  padding: 2px 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.arbitrage-screen .symbol-pair .name .leverage-label {
  content: "2X";
  background-color: #f0f0f0;
  color: #777;
  font-size: 9px;
  font-weight: bold;
  border-radius: 3px;
  padding: 2px 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.arbitrage-screen .symbol-pairs .badge-sell .name .pair::before {
  content: "S";
  background-color: #ef4444;
  display: inline-block;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  margin-right: 5px;
}

.arbitrage-screen .symbol-pairs .badge-buy .name .pair::before {
  content: "B";
  background-color: #22c55e;
  display: inline-block;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  margin-right: 5px;
}

.arbitrage-screen .apr-info {
  padding: 15px 0px;
  display: flex;
  justify-content: space-between;
}

.arbitrage-screen .apr-info .apr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arbitrage-screen .apr-info .apr-item .label {
  font-size: 12px;
  color: #777;
  margin-bottom: 5px;
}

.arbitrage-screen .apr-info .apr-item .value {
  font-weight: bold;
  color: #333;
}

.arbitrage-screen .apr-info .apr-item .value.positive {
  color: #22c55e;
}

.arbitrage-screen .available-info,
.arbitrage-screen .position-size,
.arbitrage-screen .trading-period,
.arbitrage-screen .platform-fees {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.arbitrage-screen .available-info .value i.add-icon {
  font-size: 18px;
  vertical-align: middle;
  margin-left: 5px;
  color: #fcd535;
}

.arbitrage-screen .trading-period .value i.arrow-right {
  font-size: 18px;
  vertical-align: middle;
}

.arbitrage-screen .investment-section {
  padding: 15px 0px;
}

.arbitrage-screen .investment-section .investment-input {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
}

.arbitrage-screen .investment-section .investment-input .greater-than {
  margin-right: 5px;
  color: #777;
}

.arbitrage-screen .investment-section .investment-input input[type="number"] {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: #333;
  font-size: 16px;
  outline: none;
  padding: 8px 0;
}

.arbitrage-screen .investment-section .investment-input .unit {
  margin-left: 5px;
  color: #777;
}

/* Leverage Slider Section (Designed Line) */
.arbitrage-screen .leverage-slider {
  padding: 10px 5px 5px 5px;
}

.arbitrage-screen .leverage-slider .label {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.arbitrage-screen .leverage-slider .designed-line-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.arbitrage-screen .leverage-slider .designed-line {
  position: relative;
  width: 100%;
  height: 1px; /* লাইনের উচ্চতা */
  background-color: #ddd; /* লাইনের রঙ */
}

.arbitrage-screen .leverage-slider .designed-line .step {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-50%) translateY(-50%);
  width: 7px;
  height: 7px;
  background-color: #ddd; /* ধাপের রঙ */
  border-radius: 50%;
}

/* প্রতিটি ধাপের অবস্থান নির্ধারণ */
.arbitrage-screen .leverage-slider .designed-line .step:nth-child(1) {
  left: 0%;
}

.arbitrage-screen .leverage-slider .designed-line .step:nth-child(2) {
  left: 25%;
}

.arbitrage-screen .leverage-slider .designed-line .step:nth-child(3) {
  left: 50%;
}

.arbitrage-screen .leverage-slider .designed-line .step:nth-child(4) {
  left: 75%;
}

.arbitrage-screen .leverage-slider .designed-line .step:nth-child(5) {
  left: 100%;
}

/* প্রথম এবং শেষ ধাপের ডিজাইন (ডায়মন্ড আকৃতি) */
.arbitrage-screen .leverage-slider .designed-line .step:first-child,
.arbitrage-screen .leverage-slider .designed-line .step:last-child {
  width: 9px;
  height: 9px;
  border-radius: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.arbitrage-screen .chart-section {
  padding: 15px;
}

.arbitrage-screen .chart-section .chart-ratio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  color: #777;
}

.arbitrage-screen .chart-section .chart-ratio .ratio-change.negative {
  color: #ef4444;
}

.arbitrage-screen .chart-section .chart-ratio i.arrow-up-down {
  font-size: 16px;
}

.arbitrage-screen .chart-section .chart-container {
  margin-bottom: 10px;
}

.arbitrage-screen .chart-section .chart-time-frames {
  display: flex;
  gap: 10px;
}

.arbitrage-screen .chart-section .chart-time-frames button {
  background: none;
  border: none;
  color: #777;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}
.arbitrage-screen .chart-section .chart-time-frames button i{
  font-size: 15px;
  vertical-align: middle;
}

.arbitrage-screen .chart-section .chart-time-frames button.active {
  color: #333;
  background-color: #f0f0f0;
}





.arbitrage-screen .bottom-action {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  text-align: center;
  margin-bottom: 60px;
}

.arbitrage-screen .bottom-action .create-button {
  background-color: #fcd535;
  color: #111;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}



.arbitrage-screen .arbitrage-coin-logo{
  height: 20px;
  vertical-align: middle;
}




/* Arbitrage Screen Coin Dropdown Styling */
.arbitrage-screen #arbitrageCoinDropdown {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 0px;
  color: #333; /* গাঢ় টেক্সট */
  font-size: 14px;
}

.arbitrage-screen #arbitrageCoinDropdown.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.arbitrage-screen #selectedCoinName {
  display: flex;
  align-items: center;
  gap: 5px;
}

.arbitrage-screen #selectedCoinName img.arbitrage-coin-logo {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.arbitrage-screen #arbitrageCoinDropdown .arrow-down {
  margin-left: 8px;
}

.arbitrage-screen #arbitrageCoinDropdown .arrow-down i {
  font-size: 20px;
}

.arbitrage-screen #arbitrageCoinDropdownItems {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex; /* Enable flexbox */
  flex-direction: column;
  place-content: stretch space-evenly;
  align-items: flex-start;
  width: fit-content;
  z-index: 1001; /* Ensure it's above other elements */
  padding: 8px 0;
  display: none; /* Initially hidden using CSS as well for fallback */
}

.arbitrage-screen #arbitrageCoinDropdownItems span {
  display: block;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}

.arbitrage-screen #arbitrageCoinDropdownItems span img.arbitrage-coin-logo {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

.arbitrage-screen #arbitrageCoinDropdownItems span.active,
.arbitrage-screen #arbitrageCoinDropdownItems span:hover {
  background-color: #f0f0f0;
  color: #007bff; /* Highlight color */
}























/*  **********************    */
/*  **********************    */






#assetsScreen .assets-header { /* Assuming there's a container with id="assetsScreen" */
  padding: 2px 8px 2px 8px;
  justify-content: space-between;
  align-items: center;
}

#assetsScreen .assets-header .header-first,
#assetsScreen .assets-header .header-last {
  display: flex;
}

#assetsScreen .assets-header .top-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #808191;
  padding: 6px 0px;
  border-bottom: 1px solid transparent;
}

#assetsScreen .assets-header .top-link.active {
  border-bottom: 1px solid #FCD535;
}

#assetsScreen .assets-header div {
  display: flex;
  gap: 1px;
}

/* Assets Balance Section */
#assetsScreen .assets-balance-section {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 10px 8px 16px 8px;
}

#assetsScreen .balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#assetsScreen .balance-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

#assetsScreen .total-balance {
  font-size: 14px;
  color: #555;
}

#assetsScreen #assetsBalanceVisibility {
  color: #555;
  font-size: 16px;
  margin: 0 0 0 5px;
}

#assetsScreen .balance-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#assetsScreen .balance-header-right .material-icons {
  font-size: 20px;
  color: #555;
  cursor: pointer;
  font-weight: bold;
  max-width: 20px;
}

#assetsScreen .balance-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-direction: column;
}

#assetsScreen .amount {
  font-size: 24px;
  font-weight: bold;
  color: #222;
}

#assetsScreen .approx-amount {
  font-size: 14px;
  color: #555;
}

#assetsScreen .balance-pnl {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: center;
}

#assetsScreen .pnl-today {
  font-size: 14px;
  color: #555;
}

#assetsScreen .pnl-value {
  font-size: 14px;
  color: green;
}

/* Assets Actions Section */
#assetsScreen .assets-actions-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
  gap: 5%;
  margin-bottom: 10px;
}

#assetsScreen .assets-action-btn {
  background-color: #f8f8f8;
  border: none;
  border-radius: 8px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 24%;
  cursor: pointer;
}

#assetsScreen .action-icon {
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  margin: 5%;
}

#assetsScreen .action-icon img {
  max-width: 100%;
  max-height: 100%;
}

#assetsScreen .action-text {
  font-size: 12px;
  font-weight: bold;
  color: #555;
  text-align: center;
}

#assetsScreen #deposit-btn {}

#assetsScreen #withdraw-btn {}

#assetsScreen #refer2earn-btn {}

#assetsScreen #transfer-btn {}

#assetsScreen .asset-coin-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 10px;
}
#assetsScreen .asset-coin-selector .left-items {
  display: flex;
  align-items: center;
  gap: 8px;
}
#assetsScreen .asset-coin-selector .left-items .tab {
  color: #555;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.8rem;
}
#assetsScreen .asset-coin-selector .left-items .tab .symbol {
  font-size: 10px;
}
#assetsScreen .asset-coin-selector .tab.active {
  color: #111;
  border-bottom: 1px solid #fcd535;
}
#assetsScreen .asset-coin-selector .right-items {
  display: flex;
  align-items: center;
  gap: 20px;
}
#assetsScreen .asset-coin-selector .right-items .material-icons {
  font-size: 20px;
  color: #555;
  cursor: pointer;
  font-weight: bold;
  max-width: 20px;
}
/* Assets List Section */
#assetsScreen .assets-list-section {
  background-color: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 20px;
}

#assetsScreen .hrline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 2px;
  margin: 0 10px;
  border-bottom: 1px solid #ddd;
}

#assetsScreen .assets-list-header-left {
  display: flex;
  gap: 10px;
}

#assetsScreen .assets-list-tab {
  background: none;
  border: none;
  color: #555;
  font-weight: bold;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
}

#assetsScreen .assets-list-tab.active {
  color: #222;
  border-bottom: 2px solid #fcd535;
}

#assetsScreen .assets-list-header-right {
  display: flex;
  gap: 10px;
}

#assetsScreen .assets-list-header-right .material-icons {
  font-size: 20px;
  color: #555;
}

/* Asset Item */
#assetsScreen .asset-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

#assetsScreen .asset-item:last-child {
  border-bottom: none;
}

#assetsScreen .asset-left {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ddd;
  color: #222;
  font-weight: bold;
  font-size: 16px;
}

#assetsScreen .asset-left img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#assetsScreen .asset-right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;
}

#assetsScreen .asset-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
}

#assetsScreen .asset-name {
  font-size: 16px;
  font-weight: bold;
  color: #222;
}

#assetsScreen .asset-amount {
  font-size: 16px;
  font-weight: bold;
  color: #222;
}

#assetsScreen .asset-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  font-size: 12px;
  color: #555;
  margin-bottom: 2px;
}

#assetsScreen .asset-details:last-child {
  margin-bottom: 0;
}

#assetsScreen .asset-sub-name {}

#assetsScreen .asset-value {}

#assetsScreen .asset-pnl {}

#assetsScreen .asset-pnl-value {
  color: #22c55e;
}

#assetsScreen .asset-avg {}

#assetsScreen .asset-avg-cost {}






/* NFT grid */
#assetsScreen .nft-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 5px 15px;
}

/* Card */
#assetsScreen .nft-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}

/* Image & badge */
#assetsScreen .nft-img-wrapper {
  position: relative;
}
#assetsScreen .nft-img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
#assetsScreen .nft-img-wrapper .nft-badge {
  position: absolute;
  top: 8px;
  right: 8px; /* ✅ moved from left to right */
  font-size: 11px;
  font-weight: 600;
  padding: 2px 15px;
  border-radius: 6px;
  line-height: 1.4;
  display: inline-block;

  background: #fcd535;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #333;
}

#assetsScreen .nft-img-wrapper .nft-badge.gold {
  background-color: #fcd535;
  color: #111;
}




/* Title & Price */
#assetsScreen .nft-title {
  font-weight: 600;
  padding: 6px 10px 2px;
  text-align: left;
}
#assetsScreen .nft-price {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 10px;
  font-size: 13px;
  color: #666;
}



#assetsScreen .nft-update-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
  font-weight: 500;
}

#assetsScreen .nft-update-count .material-icons {
  font-size: 16px;
  color: #999;
  animation: rotateRefresh 2s linear infinite;
  cursor: pointer;
}







































/* Deposit Screen */

#depositScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #f8f8f8;
  color: #1e272e;
  z-index: 1000;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#depositScreen::-webkit-scrollbar {
  display: none;
}

#depositScreen .deposit-title { /* Specific to depositScreen */
  font-size: 24px;
  font-weight: bold;
  color: #111;
  margin-bottom: 24px;
  text-align: left;
}

#depositScreen .top-bar { /* Specific to depositScreen */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 8px 8px;
}

#depositScreen .top-bar .back-button { /* Specific to depositScreen */
  display: flex;
  align-items: center;
  cursor: pointer;
}

#depositScreen .top-bar .back-button i { /* Specific to depositScreen */
  font-size: 24px;
  color: #333;
}

#depositScreen .top-bar .title { /* Specific to depositScreen */
  font-size: 20px;
  font-weight: bold;
  color: #111;
  margin: 0;
}

#depositScreen .top-bar .right-button { /* Specific to depositScreen */
  display: flex;
  gap: 16px;
}
#depositScreen .top-bar .right-button span{ /* Specific to depositScreen */
  max-width: 20px;
}

#depositScreen .top-bar .right-button span { /* Specific to depositScreen */
  font-size: 24px;
  color: #333;
}











/* --- Transfer Coin Section --- */
#depositScreen .transfer-coin {
  margin-bottom: 16px;
}

#depositScreen .transfer-coin .label {
  font-size: 14px;
  color: #717171;
  margin-bottom: 8px;
  text-align: left;
}

#depositScreen .transfer-coin .coin-selector.dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px;

  background-color: #e2e2e2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  border-radius: 8px;
}

#depositScreen .transfer-coin .coin-selector #depositSelectedCoin {
  display: flex;
  align-items: center;
}

#depositScreen .transfer-coin .coin-selector .coin-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
}

#depositScreen .transfer-coin .coin-selector .coin-name {
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  margin-right: 4px;
}

#depositScreen .transfer-coin .coin-selector .coin-ticker {
  font-size: 12px;
  color: #717171;
}

#depositScreen .transfer-coin .coin-selector .material-icons {
  font-size: 20px;
  color: #717171;
}

#depositScreen .transfer-coin .coin-selector .dropdown-items {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  overflow: hidden;
  z-index: 10;
  border: 1px solid #e0e0e0;
}

#depositScreen .transfer-coin .coin-selector .dropdown-items div {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
}

#depositScreen .transfer-coin .coin-selector .dropdown-items div:hover {
  background-color: #f5f5f5;
}

#depositScreen .transfer-coin .no-amount-available {
  font-size: 12px;
  color: #ef4444;
  display: none;
  margin-top: 8px;
  text-align: left;
}













#depositScreen .deposit-nameaddress {
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  border: 1px solid #ddd; /* Light border */
  margin-bottom: 20px;

}


#depositScreen .deposit-card {

}

#depositScreen .name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#depositScreen .name-network {
  flex-grow: 1;
}

#depositScreen .network {
  font-size: 14px;
  color: #888;
  margin-bottom: 2px;
  text-align: left;
}

#depositScreen .network-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  text-align: left;
}

#depositScreen .network-contact {
  font-size: 10px;
  color: #888;
  text-align: left;
}

#depositScreen .name-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333; 
  cursor: pointer;
}

#depositScreen .name-icon span {
  font-size: 20px;
}

#depositScreen .hr {
  border-top: 1px solid #ddd;
  margin: 12px 0;
}

#depositScreen .address {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#depositScreen .address-coin {
  flex-grow: 1;
}

#depositScreen .address-title {
  font-size: 14px;
  color: #888;
  margin-bottom: 2px;
  text-align: left;
}

#depositScreen .address-address {
  font-size: 14px;
  color: #333;
  word-wrap: break-word;
  text-align: left;
}

#depositScreen .address-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333; 
  cursor: pointer;
}

#depositScreen .address-icon span {
  font-size: 20px;
}




/* ... (previous CSS for depositScreen) ... */

#depositScreen .deposit-info {
  margin-top: 20px;
  padding: 0px;
  border-radius: 12px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #ddd;  */
}

#depositScreen .deposit-info label {
  display: block;
  font-size: 14px;
  color: #888; /* Darker grey label */
  margin-bottom: 8px;
  text-align: left;
}

#depositScreen .deposit-info .input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f0f0f0; /* Lighter input background */
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #ddd;
  transition: border-color 0.2s ease-in-out; /* Smooth transition */
}

#depositScreen .deposit-info .input-wrapper:focus-within {
  border-color: #FCD535; /* Blue focus border */
}

#depositScreen .deposit-info .input-wrapper span {
  margin-right: 8px;
  color: #111; /* Blue icon */
  font-size: 20px;
}

#depositScreen .deposit-info .input-wrapper input[type="text"] {
  flex-grow: 1;
  background: none;
  border: none;
  color: #333; /* Dark text input */
  font-size: 16px;
  padding: 8px 0;
}

#depositScreen .deposit-info .input-wrapper input[type="text"]::placeholder {
  color: #888; /* Lighter grey placeholder */
}

#depositScreen .deposit-info .input-wrapper input[type="text"]:focus,
#depositScreen .deposit-info .input-wrapper input[type="text"]:hover,
#depositScreen .deposit-info .input-wrapper input[type="text"]:focus-visible {
    border: none;
    outline: none;
}

#depositScreen .deposit-info-submit {
  padding: 16px;
  display: flex;
  justify-content: center;
  margin: 0 0 60px 0;
}

#depositScreen .deposit-info-submit .submit {
  background-color: #FCD535; /* Blue submit button */
  color: #111; /* White text on button */
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}
























/* Deposit Successful Screen */
#depositSuccessfullScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff; /* Light background */
  color: #1e272e; /* Dark text */
  z-index: 1001; /* Higher than depositScreen */
  overflow-y: auto;
  display: none; /* Initially hidden */
}

.deposit-success-top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
}

.deposit-success-top-bar .done-button {
  background: none;
  border: none;
  color: #FCD535; /* Yellow "Done" button text */
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.deposit-success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
}

.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #e6f9e8; /* Light green background */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.success-icon .checkmark {
  font-size: 48px;
  color: #2ecc71; /* Green checkmark */
}

.success-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.success-amount {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.success-recipient-info {
  color: #888;
  text-align: center;
  margin-bottom: 24px;
}

.transaction-details-card {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 32px;
  width: 80%; /* Adjust width as needed */
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

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

.detail-label {
  color: #666;
}

.detail-value {
  font-weight: bold;
}

.blurred-text {
  filter: blur(5px);
}

.send-another-button {
  background-color: #FCD535; /* Yellow button */
  color: #111; /* Dark text */
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%; /* Make button full width */
}






/* History Screen Styles */
.history-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; /* Match depositSuccessfullScreen */
  z-index: 1000; /* Ensure it's on top */
  padding: 24px;
  box-sizing: border-box; /* Important to include padding in width/height */
}


.history-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}

.history-topbar .left-items span {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

.history-topbar .right-items {
  display: flex;
  align-items: center;
}

.history-topbar .icon-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ced4da;
  border-radius: 15px;
  padding: 2px 5px;
  font-size: 14px;
}
.history-topbar .icon-button .vertical-line {
  height: 14px;
  border-left: 1px solid #ced4da;
  margin: 0 4px;
}

.history-topbar .icon-button .material-icons {
  font-size: 20px;
  color: #6c757d;
}

.history-topbar .icon-button .material-icons:first-child {
  margin-right: 4px;
}














/* History Screen Styles - history-selector */
.history-screen .history-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #ddd;
}

.history-screen .history-selector .left-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-screen .history-selector .left-items .tab {
  color: #555;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}

.history-screen .history-selector .left-items .tab.active {
  color: #111;
  border-bottom: 1px solid #fcd535;
}

.history-screen .history-selector .left-items .tab .symbol {
  font-size: 10px;
}

.history-screen .history-selector .right-items {
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-screen .history-selector .right-items .dropdown {
  display: flex;
  align-items: center;
  position: relative;
  gap: 3px;
  padding: 4px 8px;
  color: #555;
  cursor: pointer;
  font-size: 10px;
}

.history-screen .history-selector .right-items .dropdown .selected-item {
  font-weight: bold;
}

.history-screen .history-selector .right-items .dropdown .dropdown-items {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none; /* Initially hidden */
  flex-direction: column;
  min-width: 100%;
}

.history-screen .history-selector .right-items .active .dropdown-items {
  display: flex!important; /* Should be 'flex' to show items vertically */
}

.history-screen .history-selector .right-items .dropdown .dropdown-items span {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: bold;
}

.history-screen .history-selector .right-items .dropdown .dropdown-items span.active {
  color: #fcd535;
}

.history-screen .history-selector .right-items .dropdown .dropdown-items span:hover {
  background-color: #eee;
}

.history-screen .history-selector .right-items .dropdown .arrow {
  font-size: 16px;
  font-weight: bold;
}

.history-screen .history-selector .right-items .material-icons {
  font-size: 16px;
  color: #555;
  cursor: pointer;
}











/* History Body Styles */
.history-screen .history-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 80px); /* Calculate height */
    min-height: 200px;

}

.history-screen .history-body .no-records {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center content vertically */
  color: #888;
  position: absolute; /* Position absolutely */
  top: 50%;           /* Center vertically */
  left: 50%;          /* Center horizontally */
  transform: translate(-50%, -50%); /* Precisely center */
  width: 100%;       /* Take full width */
}

.history-screen .history-body .no-records .material-icons {
  font-size: 60px;
  margin-bottom: 8px;
}

.history-screen .history-body .no-records .material-icons.mirror {
  transform: scaleX(-1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-115%, -40%) scaleX(-1);
  font-size: 3rem;
  color: black;
}

.history-screen .history-body .no-records span:last-child {
  font-size: 6rem;
  margin-top: 0;
}

/* History Bottom Styles */
.history-screen .history-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  padding: 0 0 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50px;
}

.history-screen .history-bottom .icon {
  color: #111;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-screen .history-bottom .icon .material-icons {
  font-size: 20px;
}

.history-screen .history-bottom .title {
  font-size: 12px;
  color: #555;
  font-weight: bold;
}

.history-screen .history-body .title {
  font-size: 0.8rem;
  color: #555;
  margin-top: 40px;
}



















/* Assets Details Screen Styles */
#assetsDetailsScreen {
  display: none; /* Hidden by default */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8; /* Light background */
  padding: 16px;
  box-sizing: border-box;
  z-index: 1001; /* Higher than historyScreen */
}

#assetsDetailsScreen .assets-details-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

#assetsDetailsScreen .assets-details-topbar .left-items .back-icon {
  font-size: 24px;
  cursor: pointer;
  color: #212529;
}

#assetsDetailsScreen .assets-details-topbar .middle-items .currency-symbol {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

#assetsDetailsScreen .assets-details-balance {
  margin-bottom: 24px;
  text-align: left;
}

#assetsDetailsScreen .assets-details-balance .label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 4px;
}

#assetsDetailsScreen .assets-details-balance .amount {
  font-size: 24px;
  font-weight: bold;
  color: #212529;
}

#assetsDetailsScreen .assets-details-balance .amount .fiat-equivalent {
  font-size: 16px;
  color: #6c757d;
  margin-left: 8px;
}

#assetsDetailsScreen .assets-details-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  /* background-color: #fff; */
  /*padding: 16px;*/
  border-radius: 8px;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
}

#assetsDetailsScreen .assets-details-overview .item {
  text-align: left;
}
#assetsDetailsScreen .assets-details-overview .item:nth-first-child {
  display: none;
}

#assetsDetailsScreen .assets-details-overview .item .label {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 4px;
}

#assetsDetailsScreen .assets-details-overview .item .value {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
}

#assetsDetailsScreen .assets-details-overview .item .value.positive {
  color: #28a745;
}

#assetsDetailsScreen .assets-details-allocation {
  margin-bottom: 24px;
  text-align: left;
}

#assetsDetailsScreen .assets-details-allocation .label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 12px;
}

#assetsDetailsScreen .assets-details-allocation .allocation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
 /* background-color: #fff; */
  padding: 16px;
  border-radius: 8px;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
}

#assetsDetailsScreen .assets-details-allocation .allocation-item .left {
  display: flex;
  align-items: center;
}

#assetsDetailsScreen .assets-details-allocation .allocation-item .left .progress-circle {
  width: 40px;
  height: 40px;
  position: relative;
  margin-right: 12px;
  display: none;
}

#assetsDetailsScreen .assets-details-allocation .allocation-item .left .progress-circle svg {
  width: 100%;
  height: 100%;
}

#assetsDetailsScreen .assets-details-allocation .allocation-item .left .progress-circle .percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: #212529;
}

#assetsDetailsScreen .assets-details-allocation .allocation-item .left .spot {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
}

#assetsDetailsScreen .assets-details-allocation .allocation-item .right .amount {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
  text-align: right;
}

#assetsDetailsScreen .assets-details-allocation .allocation-item .right .fiat-equivalent {
  font-size: 12px;
  color: #6c757d;
}

#assetsDetailsScreen .assets-details-history-header {
  margin-bottom: 12px;
  text-align: left;
}

#assetsDetailsScreen .assets-details-history-header .label {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
}

#assetsDetailsScreen .assets-details-history-list {
  /* Styles for the list of history items */
}

#assetsDetailsScreen .assets-details-history-list .history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
 /* background-color: #fff;*/
  padding: 12px 16px;
  border-radius: 8px;
 /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
  margin-bottom: 8px;
}

#assetsDetailsScreen .assets-details-history-list .history-item .left {
  text-align: left;
}

#assetsDetailsScreen .assets-details-history-list .history-item .left .type {
  font-size: 14px;
  font-weight: bold;
  color: #212529;
  margin-bottom: 2px;
}

#assetsDetailsScreen .assets-details-history-list .history-item .left .details {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 2px;
}

#assetsDetailsScreen .assets-details-history-list .history-item .left .date {
  font-size: 10px;
  color: #6c757d;
}

#assetsDetailsScreen .assets-details-history-list .history-item .right .amount {
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}

#assetsDetailsScreen .assets-details-history-list .history-item.withdraw .right .amount {
  color: #dc3545;
}

#assetsDetailsScreen .assets-details-history-list .history-item.deposit .right .amount {
  color: #28a745;
}

#assetsDetailsScreen .assets-details-actions {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f8f8f8;
  padding: 16px;
  box-sizing: border-box;
}

#assetsDetailsScreen .assets-details-actions button {
  flex-grow: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

#assetsDetailsScreen .assets-details-actions .send-button {
 /* background-color: #fcd535;*/
  background-color: #e0e0e0;
  color: #111;
}

#assetsDetailsScreen .assets-details-actions .transfer-button {
  background-color: #e0e0e0;
  color: #111;
}













/* Menu Logged Screen Styles */
#menuLoggedScreen {
  display: none; /* Hidden by default */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8; /* Light background */
  padding: 16px;
  box-sizing: border-box;
  z-index: 1002; /* Higher than other overlay screens */
}

#menuLoggedScreen .menu-logged-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

#menuLoggedScreen .menu-logged-topbar .left-items.backBTN .back-icon {
  font-size: 24px;
  cursor: pointer;
  color: #212529;
}

#menuLoggedScreen .menu-logged-topbar .middle-items .title {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

#menuLoggedScreen .user-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 30px;
  padding: 16px;
  /*background-color: #fff;*/
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#menuLoggedScreen .user-info > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  /*border-bottom: 1px solid #eee;*/
}

#menuLoggedScreen .user-info > div:last-child {
  border-bottom: none;
}

#menuLoggedScreen .user-info > div:first-child {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
  /*border-bottom: 1px solid #eee;*/
  padding-bottom: 15px;
}

#menuLoggedScreen .user-info > div:first-child img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 16px;
  object-fit: cover;
}

#menuLoggedScreen .user-info > div:first-child .name {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
  margin-right: 8px;
}

#menuLoggedScreen .user-info > div:first-child .material-icons {
  color: #888;
  cursor: pointer;
}

#menuLoggedScreen .user-info > div > div:first-child {
  font-size: 14px;
  color: #6c757d;
}

#menuLoggedScreen .user-info > div > div:last-child {
  font-size: 16px;
  color: #212529;
}

#menuLoggedScreen .user-info > div > div:last-child .material-icons {
  color: #888;
  cursor: pointer;
  font-size: 16px;
}

#menuLoggedScreen .menu-list {
  margin-bottom: 30px;
  padding: 16px;
  /*background-color: #fff;*/
  border-radius: 8px;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
}

#menuLoggedScreen .menu-list > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
 /* border-bottom: 1px solid #eee;*/
}

#menuLoggedScreen .menu-list > div:last-child {
  border-bottom: none;
}

#menuLoggedScreen .menu-list > div > div:first-child {
  display: flex;
  align-items: center;
}

#menuLoggedScreen .menu-list > div > div:first-child img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
  object-fit: contain;
}

#menuLoggedScreen .menu-list > div > div:first-child span {
  font-size: 16px;
  color: #212529;
}

#menuLoggedScreen .menu-list > div > div:last-child {
  display: flex;
  align-items: center;
}

#menuLoggedScreen .menu-list > div > div:last-child span {
  font-size: 14px;
  color: #6c757d;
  margin-right: 8px;
}

#menuLoggedScreen .menu-list > div > div:last-child .vefified {
  color: #28a745; /* Green color for verified */
  font-weight: bold;
}

#menuLoggedScreen .menu-list > div > div:last-child .unlinked {
  color: #dc3545; /* Red color for unlinked */
  font-weight: bold;
}

#menuLoggedScreen .menu-list > div > div:last-child .material-icons {
  color: #888;
  cursor: pointer;
  font-size: 18px;
}

#menuLoggedScreen .tools {
  padding: 16px;
 /* background-color: #fff;*/
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

#menuLoggedScreen .tools .header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;
}

#menuLoggedScreen .tools .header span {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
}

#menuLoggedScreen .tools .list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#menuLoggedScreen .tools .list > div {
  width: calc(25% - 10px); /* Adjust for gap */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0;
}

#menuLoggedScreen .tools .list > div > div:first-child {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}

#menuLoggedScreen .tools .list > div > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#menuLoggedScreen .tools .list > div > div:last-child {
  font-size: 12px;
  color: #6c757d;
}

#menuLoggedScreen .menu-actions {
  display: flex;
  gap: 16px;
  padding: 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}

#menuLoggedScreen .menu-actions button {
  flex-grow: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

#menuLoggedScreen .menu-actions .send-button {
  background-color: #e0e0e0;
  color: #111;
}

#menuLoggedScreen .menu-actions .transfer-button {
  background-color: #e0e0e0;
  color: #111;
}








































#refer2Earn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1003; /* Higher than menuLoggedScreen */
  display: none; /* Hidden by default */
}

#refer2Earn .refer-2-earn-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

#refer2Earn .refer-2-earn-topbar .left-items.backBTN .back-icon {
  font-size: 24px;
  cursor: pointer;
  color: #212529;
}

#refer2Earn .refer-2-earn-topbar .middle-items .title {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

#refer2Earn .refer-2-earn-content {
  display: flex;
  flex-direction: column;
}

#refer2Earn .hero-section {
  text-align: center;
  margin-bottom: 30px;
}

#refer2Earn .hero-section h2 {
  font-size: 24px;
  color: #212529;
  margin-bottom: 10px;
}

#refer2Earn .hero-section p {
  font-size: 16px;
  color: #6c757d;
  line-height: 1.5;
}

#refer2Earn .bonus-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-around;
}

#refer2Earn .bonus-info .bonus-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#refer2Earn .bonus-info .bonus-item .material-icons {
  font-size: 28px;
  color: #007bff; /* Example icon color */
  margin-bottom: 5px;
}

#refer2Earn .bonus-info .bonus-item span:nth-child(2) {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 2px;
}

#refer2Earn .bonus-info .bonus-item .amount {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

#refer2Earn .commission-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#refer2Earn .commission-section .section-title {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
  margin-bottom: 10px;
}

#refer2Earn .commission-section .commission-levels {
  display: flex;
  flex-direction: column;
}

#refer2Earn .commission-section .commission-levels .level {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

#refer2Earn .commission-section .commission-levels .level:last-child {
  border-bottom: none;
}

#refer2Earn .commission-section .commission-levels .level span:first-child {
  color: #6c757d;
}

#refer2Earn .commission-section .commission-levels .level span:last-child {
  font-weight: bold;
  color: #212529;
}

#refer2Earn .referral-stats {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#refer2Earn .referral-stats .stats-row {
  display: flex;
  width: 100%;
  justify-content: space-around;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

#refer2Earn .referral-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#refer2Earn .referral-stats .stat-item .label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
}

#refer2Earn .referral-stats .stat-item .value {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

#refer2Earn .referral-stats .separator {
  border-left: 1px solid #eee;
  height: 30px;
}

#refer2Earn .referral-stats .total-deposit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 15px;
}

#refer2Earn .referral-stats .total-deposit .label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
}

#refer2Earn .referral-stats .total-deposit .value {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

#refer2Earn .referral-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

#refer2Earn .referral-info .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

#refer2Earn .referral-info .info-row:last-child {
  border-bottom: none;
}

#refer2Earn .referral-info .info-row .label {
  font-size: 16px;
  color: #212529;
}

#refer2Earn .referral-info .info-row .value-copy {
  display: flex;
  align-items: center;
}

#refer2Earn .referral-info .info-row .value-copy .value {
  font-size: 14px;
  color: #6c757d;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px; /* Adjust as needed */
}

#refer2Earn .referral-info .info-row .value-copy .material-icons {
  font-size: 18px;
  color: #007bff; /* Example copy icon color */
  cursor: pointer;
}

#refer2Earn .invite-qr-button {
  background-color: #fcd535; /* Example button color */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
}

#refer2Earn .invite-qr-button:active {
  background-color: #e9c42f;
}












































#earnSubscribeScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1004;
  display: none;
}

/* --- Top Bar --- */
#earnSubscribeScreen .earn-subscribe-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

#earnSubscribeScreen .earn-subscribe-topbar .left-items.backBTN .back-icon {
  font-size: 24px;
  cursor: pointer;
  color: #212529;
}

#earnSubscribeScreen .earn-subscribe-topbar .middle-items .title {
  font-size: 18px;
  font-weight: bold;
  color: #212529;
}

#earnSubscribeScreen .earn-subscribe-topbar .right-items .help-icon {
  font-size: 24px;
  color: #212529;
}

/* --- Content Area --- */
#earnSubscribeScreen .earn-subscribe-content {
  display: flex;
  flex-direction: column;
}

/* --- Plan Selector --- */
#earnSubscribeScreen .plan-selector {
  margin-bottom: 20px;
}

#earnSubscribeScreen .plan-selector .plan-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  width: fit-content;
}
#earnSubscribeScreen .plan-selector .plan-item div:first-child {
  margin-bottom: 10px;
}

#earnSubscribeScreen .plan-selector .plan-item.active {
 /* background-color: #fcd535;*/
  border-color: #fcd535;
}

#earnSubscribeScreen .plan-selector .plan-item .label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 4px;
}

#earnSubscribeScreen .plan-selector .plan-item .rate {
  font-size: 18px;
  font-weight: bold;
  margin-right: 8px;
  vertical-align: middle;
}

#earnSubscribeScreen .plan-selector .plan-item .max {
  font-size: 12px;
  color: #fff;
  background-color: #6c757d;
  border-radius: 4px;
  padding: 2px 4px;
  vertical-align: middle;
}

/* --- Amount Input Section --- */
#earnSubscribeScreen .amount-input-section {
  margin-bottom: 20px;
}

#earnSubscribeScreen .amount-input-section .amount-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

#earnSubscribeScreen .amount-input-section .amount-header label {
  font-size: 16px;
  color: #212529;
}

#earnSubscribeScreen .amount-input-section .amount-header .auto-subscribe-checkbox label {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #212529;
}

#earnSubscribeScreen .amount-input-section .amount-header .auto-subscribe-checkbox input[type="checkbox"] {
  margin-right: 8px;
}

#earnSubscribeScreen .amount-input-section .input-with-max {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
}

#earnSubscribeScreen .amount-input-section .input-with-max input {
  flex-grow: 1;
  border: none;
  font-size: 16px;
  padding: 8px;
  background:none;
  outline: none;
}

#earnSubscribeScreen .amount-input-section .input-with-max input::placeholder {
  color: #999;
}

#earnSubscribeScreen .amount-input-section .input-with-max .currency {
  margin-left: 8px;
  color: #6c757d;
}

#earnSubscribeScreen .amount-input-section .input-with-max .max-button {
  background: none;
  border: none;
  color: #fcd535; /* Changed to yellow */
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
}

#earnSubscribeScreen .amount-input-section .available-balance {
  font-size: 14px;
  color: #6c757d;
  margin-top: 8px;
  display: flex;
  align-items: center;
}

#earnSubscribeScreen .amount-input-section .available-balance .balance {
  color: #212529;
  font-weight: bold;
  margin-right: 4px;
}

#earnSubscribeScreen .amount-input-section .available-balance .add-icon {
  font-size: 16px;
  color: #fcd535; /* Changed to yellow */
  cursor: pointer;
}

/* --- Summary Tabs Selector --- */
#earnSubscribeScreen .summary-tabs-selector {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

#earnSubscribeScreen .summary-tabs-selector .tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  color: #6c757d;
  cursor: pointer;
}

#earnSubscribeScreen .summary-tabs-selector .tab.active {
  color: #212529;
  border-bottom: 2px solid #fcd535; /* Changed to yellow */
}

/* --- Summary Details --- */
#earnSubscribeScreen .summary-details {
  margin-bottom: 20px;
}

#earnSubscribeScreen .summary-details > div {
  display: none;
}

#earnSubscribeScreen .summary-details > div.active {
  display: block;
}

#earnSubscribeScreen .summary-details .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

#earnSubscribeScreen .summary-details .detail-row:last-child {
  border-bottom: none;
}

#earnSubscribeScreen .summary-details .detail-row .label {
  font-size: 14px;
  color: #6c757d;
}

#earnSubscribeScreen .summary-details .detail-row .value {
  font-size: 14px;
  font-weight: bold;
  color: #212529;
}

#earnSubscribeScreen .summary-details .detail-row .reward-tier {
  display: flex;
  align-items: center;
}

#earnSubscribeScreen .summary-details .detail-row .reward-tier .arrow-icon {
  font-size: 16px;
  color: #28a745;
  margin-right: 4px;
}

#earnSubscribeScreen .summary-details .detail-row .roi {
  font-size: 14px;
  color: #6c757d;
}

/* --- About Simple Earn (ase) Styles --- */
#earnSubscribeScreen #ase {
  /* Add any specific container styles if needed */
}

#earnSubscribeScreen #ase .ase-title {
  font-size: 20px;
  font-weight: bold;
  color: #212529;
  margin-bottom: 16px;
  text-align: left;
}

#earnSubscribeScreen #ase .ase-paragraph {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 12px;
  line-height: 1.6;
  text-align: left;
}

#earnSubscribeScreen #ase .ase-section {
  margin-bottom: 20px;
}

#earnSubscribeScreen #ase .ase-section:last-child {
  margin-bottom: 0;
}

#earnSubscribeScreen #ase .ase-section-title {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
  margin-bottom: 12px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

#earnSubscribeScreen #ase .ase-section-title .icon-background {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fcd535; /* Changed to yellow */
  border-radius: 50%;
  width: auto;
  height: auto;
  padding: 4px 6px;
  font-size: 12px;
  color: #212529;
  border: 1px solid #fcd535; /* Changed to yellow */
}

#earnSubscribeScreen #ase .ase-section-title .icon-background .material-icons {
  font-size: 12px;
  line-height: 1;
}

#earnSubscribeScreen #ase .ase-risk-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

#earnSubscribeScreen #ase .ase-risk-button {
  background-color: #f0f0f0;
  color: #212529;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

#earnSubscribeScreen #ase .ase-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

#earnSubscribeScreen #ase .ase-feature-icon {
  font-size: 24px;
  color: #fcd535; /* Changed to yellow */
  width: 24px;
  height: 24px;
  text-align: center;
}

#earnSubscribeScreen #ase .ase-feature-content {
  flex: 1;
}

#earnSubscribeScreen #ase .ase-feature-title {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
  margin-bottom: 8px;
  text-align: left;
}

#earnSubscribeScreen #ase .ase-feature-paragraph {
  font-size: 14px;
  color: #6c757d;
  line-height: 1.6;
  text-align: left;
}

/* --- Source of Yield (soy) Styles --- */
#earnSubscribeScreen #soy {
  /* Add any specific container styles if needed */
}

#earnSubscribeScreen #soy .soy-title {
  font-size: 16px;
  font-weight: bold;
  color: #212529;
  margin-bottom: 8px;
  text-align: left;
}

#earnSubscribeScreen #soy .soy-paragraph {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 12px;
  line-height: 1.6;
  text-align: left;
}

/* --- Submission Area --- */
#earnSubscribeScreen .submission {
  margin-top: 20px;
}

#earnSubscribeScreen .submission .agreement-checkbox {
  margin-bottom: 12px;
}

#earnSubscribeScreen .submission .agreement-checkbox label {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  color: #212529;
}

#earnSubscribeScreen .submission .agreement-checkbox input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 2px;
  /* No direct way to style the checkbox *checkmark* with CSS */
}

#earnSubscribeScreen .submission .agreement-checkbox span:last-child {
  display: inline-block;
}

#earnSubscribeScreen .submission .agreement-checkbox .link {
  color: #fcd535; /* Changed to yellow */
  text-decoration: none;
}

#earnSubscribeScreen .submission .submit-button .confirm-button {
  background-color: #fcd535;
  color: #212529;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}

#earnSubscribeScreen .submission .submit-button .confirm-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
















































































/* --- General Transfer Screen Styles --- */
/* --- General Transfer Screen Styles --- */
#transferScreen {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1005;
  background:inherit;
}

/* --- Transfer Header --- */
#transferScreen .transfer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

#transferScreen .transfer-header .back-button {
  cursor: pointer;
  font-size: 24px;
  color: #212529;
  margin-right: 16px;
}

#transferScreen .transfer-header div:nth-child(2) {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  margin: 0;
  flex-grow: 1;
  text-align: center;
}

#transferScreen .transfer-header .qr-button {
  cursor: pointer;
  font-size: 24px;
  color: #212529;
  margin-left: 16px;
}

/* --- Transfer Body --- */
#transferScreen .transfer-body {
  /* No specific styles needed */
}

/* --- Transfer From/To Section --- */
#transferScreen .transfer-from-to {
  background-color: #e2e2e2;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#transferScreen .transfer-from-to .left {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#transferScreen .transfer-row.from {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
}
#transferScreen .transfer-row.to {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
}

#transferScreen .transfer-row .label {
  font-size: 14px;
  color: #717171;
  margin-right: 12px;
  width: 30px;
  text-align: left;
}

#transferScreen .transfer-row .value {
  font-size: 16px;
  color: #212529;
  font-weight: 500;
  flex-grow: 1;
  text-align: left;
  flex:1;


  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px 16px;
  border-radius: 8px;
  background-color: #e2e2e2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}


#transferScreen .transfer-row .value input {
  flex-grow: 1;
  border: none;
  font-size: 16px;
  padding: 8px 0;
  color: #212529;
  background: none;
  outline: none;
}
#transferScreen .transfer-row .value span{
  font-size: 16px;
  color: #212529;
  margin-left: 8px;
}

#transferScreen .transfer-row .arrow {
  font-size: 20px;
  color: #717171;
  margin-left: auto;
}

#transferScreen .transfer-from-to .right {
  display: flex;
  align-items: center;
  margin-left: 16px;
}

#transferScreen .transfer-from-to .right .material-icons {
  font-size: 28px;
  color: black;
  cursor: pointer;
}

/* --- Transfer Coin Section --- */
#transferScreen .transfer-coin {
  margin-bottom: 16px;
}

#transferScreen .transfer-coin .label {
  font-size: 14px;
  color: #717171;
  margin-bottom: 8px;
  text-align: left;
}

#transferScreen .transfer-coin .coin-selector.dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px;

  background-color: #e2e2e2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  border-radius: 8px;
}

#transferScreen .transfer-coin .coin-selector #tcsSelectedCoin {
  display: flex;
  align-items: center;
}

#transferScreen .transfer-coin .coin-selector .coin-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
}

#transferScreen .transfer-coin .coin-selector .coin-name {
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  margin-right: 4px;
}

#transferScreen .transfer-coin .coin-selector .coin-ticker {
  font-size: 12px;
  color: #717171;
}

#transferScreen .transfer-coin .coin-selector .material-icons {
  font-size: 20px;
  color: #717171;
}

#transferScreen .transfer-coin .coin-selector .dropdown-items {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  overflow: hidden;
  z-index: 10;
  border: 1px solid #e0e0e0;
}

#transferScreen .transfer-coin .coin-selector .dropdown-items div {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
}

#transferScreen .transfer-coin .coin-selector .dropdown-items div:hover {
  background-color: #f5f5f5;
}

#transferScreen .transfer-coin .no-amount-available {
  font-size: 12px;
  color: #ef4444;
  display: none;
  margin-top: 8px;
  text-align: left;
}

/* --- Transfer Amount Section --- */
#transferScreen .transfer-amount {
  margin-bottom: 16px;

}

#transferScreen .transfer-amount .label {
  font-size: 14px;
  color: #717171;
  margin-bottom: 8px;
  text-align: left;
}

#transferScreen .transfer-amount .input-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  
  
  padding: 6px 16px;
  border-radius: 8px;
  background-color: #e2e2e2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#transferScreen .transfer-amount .input-group input {
  flex-grow: 1;
  border: none;
  font-size: 16px;
  padding: 8px 0;
  color: #212529;
  background:none;
}
#transferScreen .transfer-amount .input-group input:focus-visible {
  border: none;
  background: none;
  outline:none; /* Add an outline for focus */
  box-shadow: none; /* Reset any box-shadow */
}

#transferScreen .transfer-amount .input-group input::placeholder {
  color: #b0b0b0;
}

#transferScreen .transfer-amount .input-group .suffix {
  font-size: 16px;
  color: #212529;
  margin-left: 8px;
}

#transferScreen .transfer-amount .input-group .max {
  font-size: 16px;
  color: #fcd535;
  cursor: pointer;
  font-weight: 500;
  margin-left: 8px;
}

#transferScreen .transfer-amount .available-balance {
  font-size: 12px;
  color: #717171;
  margin-top: 8px;
  text-align: left;
}

/* --- Transfer Footer --- */
#transferScreen .transfer-footer {
  margin-top: 32px;
  /*padding: 0 16px;*/
}

#transferScreen .transfer-footer .confirm-transfer-button {
  background-color: #fcd535;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#transferScreen .transfer-footer .confirm-transfer-button:disabled {
  background-color: #d1d5db;
  color: #b0b0b0;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Common Utility Class --- */
#transferScreen .backBTN {
  /* Add any specific styles for the back button if needed */
}

/* --- Dropdown Styles (applied to the .dropdown class) --- */
#transferScreen .dropdown {
  position: relative;
  cursor: pointer;
}

#transferScreen .dropdown.active .dropdown-items {
  display: block;
}







































/* --- General NFT Screen Styles --- */
#nftScreen {
  padding: 10px;
  font-family: 'Inter', sans-serif;
  background-color: #fff;
}

#nftScreen .nft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#nftScreen .nft-header .left-items {
  display: flex;
  align-items: center;
}

#nftScreen .nft-header .left-items img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  vertical-align: middle;
}

#nftScreen .nft-header .nft-title-label {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  vertical-align: middle;
}

#nftScreen .nft-header .right-items {
  display: flex;
  align-items: center;
}

#nftScreen .nft-header .icon-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #999;
}

#nftScreen .nft-header .vertical-line {
  height: 16px;
  width: 1px;
  background-color: #ccc;
}


#nftScreen .nft-search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

#nftScreen .nft-search-bar .search-icon {
  font-size: 20px;
  color: #aaa;
  margin-right: 8px;
}

#nftScreen .nft-search-bar input[type="text"] {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
  width: 100%;
}



#nftScreen .nft-images {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  overflow-y: auto;

  /* Hide scrollbar - cross-browser */
  -ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
}

#nftScreen .nft-images::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}

#nftScreen .nft-images .nft-banner {
  width: 80%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}


#nftScreen .nft-images img {
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}



#nftScreen .nft-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  padding: 0 2px;
}

#nftScreen .nft-tabs .tab {
  background: none;
  border: none;
  font-size: 16px;
  color: #777;
  cursor: pointer;
}

#nftScreen .nft-tabs .tab.active {
  color: #fcd535;
  border-bottom: 2px solid #fcd535;
}

#nftScreen .nft-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#nftScreen .dropdown {
  position: relative;
  flex: 1;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nftScreen .dropdown-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  z-index: 999;
}

#nftScreen .dropdown-items div {
  padding: 10px;
  cursor: pointer;
}

#nftScreen .dropdown-items div:hover,
#nftScreen .dropdown-items .active {
  background-color: #fcd535;
  color: #111;
}

#nftScreen .nft-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  font-size: 13px;
  color: #999;
  margin-bottom: 8px;
}

#nftScreen .nft-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#nftScreen .nft-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#nftScreen .nft-rank {
  color: #fcd535;
  font-weight: bold;
  width: 18px;
  font-size: 14px;
  margin-right: 5px;
}

#nftScreen .nft-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

#nftScreen .nft-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

#nftScreen .nft-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-bottom:5px;
}

#nftScreen .nft-title .verified {
  color: #fcd535;
  font-size: 14px;
  margin-left: 4px;
}

#nftScreen .nft-volume {
  font-size: 13px;
  color: #999;
  margin-top: 2px;
  text-align: left;
}


#nftScreen .nft-price {
  text-align: right;
}

#nftScreen .nft-price .floor {
  font-size: 14px;
  font-weight: bold;
  margin-bottom:5px;
}

#nftScreen .nft-price .change {
  font-size: 13px;
  margin-top: 2px;
}

#nftScreen .nft-price .change.positive {
  color: #22c55e;
}

#nftScreen .nft-price .change.negative {
  color: #ef4444;
}

































































/* Container */
#nftGroupScreen {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1005;
}

/* Header */
#nftGroupScreen .nft-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
#nftGroupScreen .nft-category-subtitle {
  text-align: left;
}
#nftGroupScreen .screen-title {
  font-size: 20px;
  font-weight: bold;
}
#nftGroupScreen .right-icons {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #444;
}

/* Subtitle */
#nftGroupScreen .nft-category-subtitle .subtitle {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* Selector row */
#nftGroupScreen .nft-group-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
#nftGroupScreen .subsub {
  font-size: 12px;
  color: #888;
}
#nftGroupScreen .toggle-buttons {
  display: flex;
  gap: 0px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f7f7f7;


}
#nftGroupScreen .toggle-buttons button {
  border: 1px solid transparent;
  padding: 4px 8px;
  font-size: 12px;
  background: #f7f7f7;
  cursor: pointer;
  border-radius: 6px;
}
#nftGroupScreen .toggle-buttons button.active {
  background-color: #fcd535;
  color: #111;
}

/* Stats bar */
#nftGroupScreen .nft-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 12px;
  font-size: 12px;
  justify-content: space-between;
}
#nftGroupScreen .nft-stats-bar .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ✅ Align left */
  gap: 2px;
  font-weight: 500;
}
#nftGroupScreen .nft-stats-bar .negative {
  color: #ef4444;
}
#nftGroupScreen .nft-stats-bar .positive {
  color: #22c55e;
}

/* Category tabs */
#nftGroupScreen .nft-category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 2px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE & Edge */
}
#nftGroupScreen .nft-category-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
#nftGroupScreen .nft-category-tabs .tab {
  background: none;
  border: none;
  font-size: 13px; /* ✅ smaller font */
  color: #777;
  cursor: pointer;
  white-space: nowrap;
}
#nftGroupScreen .nft-category-tabs .tab.active {
  color: #fcd535;
  border-bottom: 2px solid #fcd535;
}

/* Search bar */
#nftGroupScreen .nft-search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
#nftGroupScreen .nft-search-bar .search-icon {
  font-size: 20px;
  color: #aaa;
  margin-right: 8px;
}
#nftGroupScreen .nft-search-bar input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  width: 100%;
}

/* Filter row */
#nftGroupScreen .nft-filter-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
#nftGroupScreen .chip {
  background-color: #e6e6e6;
  border-radius: 20px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#nftGroupScreen .chip .tiny-icon {
  font-size: 14px;
  cursor: pointer;
}
#nftGroupScreen .clear-all {
  color: #fcd535;
  cursor: pointer;
}

/* NFT grid */
#nftGroupScreen .nft-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

/* Card */
#nftGroupScreen .nft-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}

/* Image & badge */
#nftGroupScreen .nft-img-wrapper {
  position: relative;
}
#nftGroupScreen .nft-img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
#nftGroupScreen .nft-img-wrapper .nft-badge {
  position: absolute;
  top: 8px;
  right: 8px; /* ✅ moved from left to right */
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.4;
  display: inline-block;

  background: linear-gradient(to right, rgba(252, 213, 53, 0.2), #ffffff);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #333;
}

#nftGroupScreen .nft-img-wrapper .nft-badge.gold {
  background-color: #fcd535;
  color: #111;
}




/* Title & Price */
#nftGroupScreen .nft-title {
  font-weight: 600;
  padding: 6px 10px 2px;
  text-align: left;
}
#nftGroupScreen .nft-price {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 10px;
  font-size: 13px;
  color: #666;
}



#nftGroupScreen .nft-update-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
  font-weight: 500;
}

#nftGroupScreen .nft-update-count .material-icons {
  font-size: 16px;
  color: #999;
  animation: rotateRefresh 2s linear infinite;
  cursor: pointer;
}

@keyframes rotateRefresh {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


































#nftGroupItemScreen {
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1006;
  font-family: 'Inter', sans-serif;
}

/* Header */
#nftGroupItemScreen .nftgi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
#nftGroupItemScreen .nftgi-header .left {
  font-size: 18px;
  font-weight: 700;
}
#nftGroupItemScreen .nftgi-header .right-icons {
  display: flex;
  gap: 10px;
  color: #444;
}

/* Collection + Title */
#nftGroupItemScreen .nftgi-collection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

#nftGroupItemScreen .nftgi-collection .left {
  color: #fcd535;
}

#nftGroupItemScreen .nftgi-collection .right-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 18px;
}

#nftGroupItemScreen .nftgi-collection .like-count {
  font-size: 13px;
  margin: 0 4px 0 -2px;
  color: #444;
}

#nftGroupItemScreen .nftgi-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  text-align: left;
}

/* Main Image */
#nftGroupItemScreen .nftgi-img img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 16px;
}

/* Price Info */
#nftGroupItemScreen .nftgi-price-block {
  position: relative;
  /*background: #fff;*/
  border-radius: 10px;
  padding: 10px 0px;
  margin-bottom: 16px;
  text-align: left;
}
#nftGroupItemScreen .price-row .label,
#nftGroupItemScreen .countdown-row .label {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}
#nftGroupItemScreen .price-row .value {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
#nftGroupItemScreen .price-row .value span {
  font-size: 13px;
  color: #999;
}
#nftGroupItemScreen .price-row .change {
  font-size: 13px;
  color: #ef4444;
  margin-top: 4px;
}
#nftGroupItemScreen .countdown-row {
  margin-top: 16px;
}
#nftGroupItemScreen .countdown-row .count {
  font-weight: 600;
  font-size: 16px;
}
#nftGroupItemScreen .countdown-row .count span {
  font-size: 12px;
  color: #666;
  margin-right: 6px;
}

/* Support icon */
#nftGroupItemScreen .support-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #fcd535;
  padding: 10px;
  border-radius: 50%;
}
#nftGroupItemScreen .support-btn .material-icons {
  color: white;
  font-size: 18px;
}

/* Details */
#nftGroupItemScreen .nftgi-details {
  /*background: #fff;*/
  border-radius: 10px;
  border:1px solid #d6d1d1;
  padding: 12px;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#nftGroupItemScreen .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
#nftGroupItemScreen .detail-row:last-child {
  border-bottom: none;
}
#nftGroupItemScreen .detail-row img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Buy Now */
#nftGroupItemScreen .nftgi-buy {
  position: static;
  bottom: 0;
  left: 0;
  background: #f3f3f3;
  width: 100%;
  padding: 12px 0px;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
}
#nftGroupItemScreen .nftgi-buy button {
  width: 100%;
  background: #fcd535;
  color: white;
  font-weight: bold;
  font-size: 16px;
  padding: 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
#nftGroupItemScreen .nftgi-details-section .title {
  color: black;
  margin-bottom: 10px;
  text-align: left;
}


































#withdrawalScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 12px 16px;
  background-color: #f8f8f8;
  color: #1e272e;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  overflow-y: auto;
  z-index: 1000;
}

/* Header */
#withdrawalScreen .withdrawal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}
#withdrawalScreen .withdrawal-header .material-icons {
  font-size: 20px;
  color: #1e272e;
}
#withdrawalScreen .withdrawal-header .left,
#withdrawalScreen .withdrawal-header .right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Form Area */
#withdrawalScreen .withdrawal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form Group */
#withdrawalScreen .form-group label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #333;
}
#withdrawalScreen .form-group .info-icon {
  font-size: 16px;
  color: #999;
}
#withdrawalScreen .input-group {
  background-color: #ededed;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#withdrawalScreen .input-group input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
  color: #333;
  outline: none; /* ✅ remove focus outline */
}
#withdrawalScreen .input-group input::placeholder {
  color: #999;
}
#withdrawalScreen .input-icons {
  display: flex;
  gap: 12px;
}
#withdrawalScreen .input-icons .material-icons {
  color: #999;
  font-size: 18px;
}
#withdrawalScreen .input-group.dropdown {
  cursor: pointer;
}

/* Currency & Max Button */
#withdrawalScreen .currency-block {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
#withdrawalScreen .currency-block .currency {
  font-weight: 600;
}
#withdrawalScreen .currency-block .max-btn {
  color: #fcd535;
  font-weight: 500;
  cursor: pointer;
}

/* Available Info */
#withdrawalScreen .available-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
  padding: 0 4px;
}
#withdrawalScreen .available-info .available {
  font-weight: 400;
}
#withdrawalScreen .available-info .balance {
  font-weight: 600;
  color: #111;
}

/* Warning Section (list) */
#withdrawalScreen .withdrawal-warning {
  font-size: 12px;
  color: #888;
  line-height: 1.4;
  background-color: #fff;
  padding: 12px;
  border-radius: 10px;
  text-align: left;
}
#withdrawalScreen .withdrawal-warning ul {
  list-style-type: "* ";
  padding-left: 16px;
  margin: 0;
}
#withdrawalScreen .withdrawal-warning li {
  margin-bottom: 6px;
}
#withdrawalScreen .withdrawal-warning a {
  color: #fcd535;
  text-decoration: none;
  font-weight: 500;
}

/* Receive Amount */
#withdrawalScreen .receive-summary {
  background-color: #fff;
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}
#withdrawalScreen .receive-title {
  font-size: 13px;
  color: #999;
  margin-bottom: 4px;
}
#withdrawalScreen .receive-value {
  font-size: 20px;
  font-weight: 600;
  color: #111;
}
#withdrawalScreen .receive-value span {
  font-size: 13px;
  font-weight: 500;
  margin-left: 4px;
}
#withdrawalScreen .fee {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}

/* Submit Button */
#withdrawalScreen .submit-withdrawal {
  background-color: #fcd535;
  color: #1e272e;
  font-size: 15px;
  font-weight: 600;
  padding: 14px;
  border: none;
  border-radius: 10px;
  margin-top: 20px;
  cursor: pointer;
  width: 100%;
}




/* --- Transfer Coin Section --- */
#withdrawalScreen .transfer-coin {
  margin-bottom: 16px;
}

#withdrawalScreen .transfer-coin .label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  text-align: left;


  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #333;
}

#withdrawalScreen .transfer-coin .coin-selector.dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px;

  background-color: #e2e2e2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  border-radius: 8px;
}

#withdrawalScreen .transfer-coin .coin-selector #withdrawSelectedCoin {
  display: flex;
  align-items: center;
}

#withdrawalScreen .transfer-coin .coin-selector .coin-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
}

#withdrawalScreen .transfer-coin .coin-selector .coin-name {
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  margin-right: 4px;
}

#withdrawalScreen .transfer-coin .coin-selector .coin-ticker {
  font-size: 12px;
  color: #717171;
}

#withdrawalScreen .transfer-coin .coin-selector .material-icons {
  font-size: 20px;
  color: #717171;
}

#withdrawalScreen .transfer-coin .coin-selector .dropdown-items {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  overflow: hidden;
  z-index: 10;
  border: 1px solid #e0e0e0;
}

#withdrawalScreen .transfer-coin .coin-selector .dropdown-items div {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
}

#withdrawalScreen .transfer-coin .coin-selector .dropdown-items div:hover {
  background-color: #f5f5f5;
}

#withdrawalScreen .transfer-coin .no-amount-available {
  font-size: 12px;
  color: #ef4444;
  display: none;
  margin-top: 8px;
  text-align: left;
}













































/* Withdrawal Successful Screen */
#withdrawalSuccessfullScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  color: #1e272e;
  z-index: 1001;
  overflow-y: auto;
  display: none;
}

.withdrawal-success-top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
}

.withdrawal-success-top-bar .done-button {
  background: none;
  border: none;
  color: #FCD535;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.withdrawal-success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
}

.withdrawal-success-content .success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #e6f9e8;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.withdrawal-success-content .checkmark {
  font-size: 48px;
  color: #2ecc71;
}

.withdrawal-success-content .success-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.withdrawal-success-content .success-amount {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.withdrawal-success-content .success-recipient-info {
  color: #888;
  text-align: center;
  margin-bottom: 24px;
}

.withdrawal-success-content .transaction-details-card {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 32px;
  width: 80%;
}

.withdrawal-success-content .detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.withdrawal-success-content .detail-row:last-child {
  border-bottom: none;
}

.withdrawal-success-content .detail-label {
  color: #666;
}

.withdrawal-success-content .detail-value {
  font-weight: bold;
}

.withdrawal-success-content .blurred-text {
  filter: blur(5px);
}

.withdrawal-success-content .send-another-button {
  background-color: #FCD535;
  color: #111;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}