‰PNG

   IHDR         ôxÔú   sBIT|dˆ   	pHYs  Ä  Ä•+   tEXtSoftware www.inkscape.org›î<  ,àtEXtComment 
:root{--color-primary:#31acee;--color-primary-hover:#2992ca;--color-main-background:#05080b;--color-white:#fff;--color-sidebar-background:hsla(0,0%,100%,.02);--color-card-background:hsla(0,0%,100%,.02);--color-box-border:hsla(0,0%,100%,.045);--color-control:hsla(0,0%,100%,.025);--color-control-hover:hsla(0,0%,100%,.05);--color-control-active:hsla(0,0%,100%,.075);--color-input:hsla(0,0%,100%,.025);--color-input-hover:hsla(0,0%,100%,.05);--color-input-border:hsla(0,0%,100%,.025);--color-text:#fff;--color-text-secondary:hsla(0,0%,100%,.5);--color-text-tertiary:hsla(0,0%,100%,.8);--placeholder-color:hsla(0,0%,100%,.08);--accent-green:#26A69A;--accent-red:#EF5350;--accent-yellow:#FFCA28}
*{box-sizing:border-box;margin:0;padding:0}
html{font-family:'Inter',sans-serif}
body{background-color:var(--color-main-background);color:var(--color-text);font-size:14px}
a{text-decoration:none}
.dashboard-container{display:flex;min-height:100vh;position:relative}
.main-content{flex-grow:1;padding:20px 30px;display:flex;flex-direction:column;width:100%}
.main-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.sidebar{width:250px;background-color:var(--color-main-background);padding:20px;display:flex;flex-direction:column;border-right:1px solid var(--color-box-border);flex-shrink:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}
.sidebar-header{margin-bottom:30px;padding-left:10px}
.sidebar-nav{flex-grow:1}
.sidebar-nav ul{list-style:none}
.sidebar-nav li{margin-bottom:5px}
.sidebar-nav a{display:flex;align-items:center;padding:12px 15px;border-radius:8px;color:var(--color-text-secondary);font-weight:500;transition:background-color .2s,color .2s}
.sidebar-nav a:hover{background-color:var(--color-control-hover);color:var(--color-text)}
.sidebar-nav li.active a{background-color:var(--color-control-active);color:var(--color-text)}
.sidebar-nav a svg{width:20px;height:20px;margin-right:15px}
.sidebar-footer{margin-top:auto}
.mobile-menu-header,.sidebar-nav .pagination{display:none}
.hamburger-menu{display:none;background:0 0;border:none;color:var(--color-text);cursor:pointer}
.hamburger-menu svg{width:28px;height:28px}
.header-title{display:flex;align-items:center;gap:10px}
.header-title h1{font-size:20px;font-weight:600}
.header-title .icon{width:24px;height:24px;color:var(--color-text-secondary)}
.header-controls{display:flex;align-items:center;gap:8px;position:relative}
.icon-btn{background-color:var(--color-control);border:1px dashed hsla(0,0%,100%,.1);color:var(--color-text);cursor:pointer;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.icon-btn:hover{background-color:var(--color-control-hover)}
.icon-btn svg{width:22px;height:22px}
.btn-reset{border:none;background:0 0}


.btn{border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;transition:background-color .2s}
.btn-primary{background:radial-gradient(ellipse at center,hsl(208,68%,20%) 0,hsl(212,63%,12%) 100%);border:1px solid hsl(208,50%,25%);color:var(--color-primary);font-size:15px;font-weight:600;padding:12px 18px;gap:10px;position:relative;overflow:hidden}
.btn-primary:hover{background:radial-gradient(ellipse at center,hsl(208,68%,25%) 0,hsl(212,63%,15%) 100%)}
.btn-primary .icon-lightning{width:20px;height:20px}
.btn-primary .icon-chevron{width:16px;height:16px;color:var(--color-text-secondary);margin-left:6px}
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr auto;gap:20px;flex-grow:1}
.card{background-color:var(--color-card-background);border:1px solid var(--color-box-border);border-radius:12px;padding:10px;display:flex;flex-direction:column}
.card-title{font-size:16px;font-weight:500;margin-bottom:8px}
.card-subtitle{color:var(--color-text-secondary);font-size:14px}
.card-subtitle a{color:var(--color-primary);text-decoration:none;font-weight:500}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.card-header.no-style{margin-bottom:0;padding:0}
.card-header .small-title{font-size:15px}
.view-all{color:var(--color-primary);text-decoration:none;font-size:14px;font-weight:500}
.card-divider{height:1px;background-color:var(--color-box-border);margin:20px -20px}
.order-card form{display:flex;flex-direction:column;height:100%;gap:15px}
.form-group{display:flex;flex-direction:column;flex-grow:1}
.form-row{display:flex;gap:15px}
.order-card label{color:var(--color-text-secondary);margin-bottom:8px;font-size:14px}
.order-card input[type=text]{background-color:var(--color-input);border:1px solid var(--color-input-border);border-radius:8px;padding:12px;color:var(--color-text);font-size:14px;width:100%;transition:background-color .2s,border-color .2s}
.order-card input[type=text]:hover{background-color:var(--color-input-hover)}
.order-card input[type=text]:focus{outline:0;border-color:var(--color-primary)}
.order-card input[type=text]::placeholder{color:var(--color-text-secondary)}
.order-card .btn-submit{background-color:var(--color-primary);color:var(--color-white);border:none;padding:14px;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;margin-top:auto;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.order-card .btn-submit:hover{background-color:var(--color-primary-hover)}


.user-profile-link{display:flex;align-items:center;padding:10px;margin:10px 0;border-radius:12px;background-color:var(--color-control);transition:background-color .2s}
.user-profile-link:hover{background-color:var(--color-control-hover)}
.header-avatar,.user-profile-link .user-avatar{position:relative;width:42px;height:42px;border-radius:10px;background-color:hsl(218,12%,18%);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.user-profile-link .user-avatar{margin-right:12px}
.header-avatar{width:40px;height:40px;background-color:var(--color-control-active);margin-right:0;cursor:pointer}
.header-avatar::after,.user-profile-link .user-avatar::after{content:'';position:absolute;width:8px;height:8px;background-color:hsl(218,24%,75%);bottom:3px;right:3px;transform:rotate(45deg);border-radius:1.5px}
.user-profile-link .user-name{font-weight:500;display:block;margin-bottom:3px;color:var(--color-text);font-size:14px}
.user-profile-link .verify-link{font-size:13px;color:var(--accent-red);font-weight:500}
.balance-selector{display:flex;align-items:center;background-color:var(--color-control);border:1px dashed hsla(0,0%,100%,.1);padding:0 15px;height:40px;border-radius:10px;font-weight:600;cursor:pointer;color:var(--color-text);gap:8px}
.balance-selector .real-text{color:var(--color-primary);font-size:13px;font-weight:700;margin:0}
.balance-selector .icon-chevron-solid{width:10px;height:10px;margin-left:4px}
.balance-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:260px;background-color:#1c2127;border:1px solid var(--color-box-border);border-radius:12px;padding:8px;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.balance-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.balance-dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;color:inherit;transition:background-color .2s}
.balance-dropdown-item:hover{background-color:var(--color-control-hover)}
.balance-dropdown-item .account-details{line-height:1.4}
.balance-dropdown-item .account-type{font-size:14px;font-weight:500;color:var(--color-primary)}
.balance-dropdown-item .account-amount{font-size:16px;font-weight:600;color:var(--color-text)}
.balance-dropdown-item .account-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--color-white)}
.balance-dropdown-item .account-icon.real{background-color:var(--color-primary);border-radius:8px}
.balance-dropdown-item .account-icon.demo{background-color:var(--color-control-active);border:1px solid var(--color-box-border);border-radius:50%}
.balance-dropdown-item .account-icon svg{width:22px;height:22px}
.balance-hidden {
  filter: blur(8px);
  user-select: none;
}
.fab{position:fixed;bottom:30px;right:30px;width:56px;height:56px;background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:background-color .2s,transform .2s;z-index:999}
.fab:hover{background-color:var(--color-primary-hover);transform:scale(1.05)}
.fab svg{width:28px;height:28px}


.overview-card{grid-column:1/3;grid-row:1/2}
.stats-card{grid-column:3/4;grid-row:1/2}
.chart-card{grid-column:1/3;grid-row:2/3;padding:0}
.order-card{grid-column:3/4;grid-row:2/3}
.trades-card{grid-column:1/-1;grid-row:3/4}
.mobile-balance-card,.mobile-tab-card{display:none}
.overview-balance-section{display:flex;justify-content:space-between;align-items:center}
.balance-amount{font-size:32px;font-weight:700;margin-top:5px}
.balance-actions{display:flex;align-items:center;gap:10px}
.card-icon-btn{background-color:var(--color-control-active);border:1px solid var(--color-box-border);color:var(--color-text)}
.overview-assets-section .card-header{margin-bottom:20px}
.stats-card{gap:25px}
.stats-card .card-title.main-title{margin-bottom:0}
.stats-card .card-subtitle{margin-bottom:10px}
.stats-card .card-header{margin-bottom:10px}
.stats-card .card-title{font-size:14px;color:var(--color-text-secondary)}
.stat-item.mt-20{margin-top:20px}
:root {
  --accent-green: #26A69A;
  --accent-red: #EF5350;
  --accent-yellow: #FFCA28;
  --placeholder-color: #e0e0e0; /* fallback gray background */
}

/* Percent text */
.percentage { font-weight: 600; }
.percentage.red { color: var(--accent-red); }
.percentage.yellow { color: var(--accent-yellow); }
.percentage.green { color: var(--accent-green); }

/* Progress bar */
.progress-bar-container {
  width: 100%;
  height: 8px;
  background-color: var(--placeholder-color);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 4px;
}
.progress-bar.red { background-color: var(--accent-red); }
.progress-bar.yellow { background-color: var(--accent-yellow); }
.progress-bar.green { background-color: var(--accent-green); }

/* Signal strength */
.signal-bar-container {
  display: flex;
  gap: 4px;
}
.signal-segment {
  flex-grow: 1;
  height: 8px;
  border-radius: 2px;
  background-color: var(--placeholder-color);
  opacity: .3;
}
.signal-segment.red { background-color: var(--accent-red); opacity: 1; }
.signal-segment.yellow { background-color: var(--accent-yellow); opacity: 1; }
.signal-segment.green { background-color: var(--accent-green); opacity: 1; }
.chart-area{flex-grow:1;position:relative;border-radius:12px;overflow:hidden;min-height:400px}
.trades-card{gap:20px}
.trades-header{display:flex;justify-content:space-between;align-items:center}


.trades-header h3{font-size:16px;font-weight:600}
.trades-tabs{display:flex;background-color:var(--color-control);border-radius:8px;padding:4px}
.trades-tabs button{background:0 0;border:none;padding:6px 16px;border-radius:6px;color:var(--color-text-secondary);font-weight:600;cursor:pointer;transition:all .2s}
.trades-tabs button.active{background-color:var(--color-primary);color:var(--color-white)}
.trade-accordion .accordion-header{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-control-active);padding:12px 15px;border-radius:8px;cursor:pointer}
.trade-accordion .accordion-title{display:flex;align-items:center;gap:10px;font-weight:600}
.trade-accordion .accordion-title svg{width:20px;height:20px}
.trade-accordion .accordion-title .count{color:var(--color-text-secondary)}
.trade-accordion .accordion-arrow{width:16px;height:16px;color:var(--color-text-secondary);transition:transform .3s ease;transform:rotate(180deg)}
.trade-accordion .accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}
.trade-accordion.active .accordion-content{max-height:500px;transition:max-height .4s ease-in}
.trade-accordion.active .accordion-arrow{transform:rotate(0deg)}
.trades-table-wrapper{overflow-x:auto}
.trades-table-header{display:grid;grid-template-columns:repeat(7,1fr);padding:0 10px 10px;border-bottom:1px solid var(--color-box-border);color:var(--color-text-secondary);font-size:13px;min-width:600px}
.asset-item{display:flex;align-items:center;margin-bottom:15px}
.asset-icon{width:40px;height:40px;border-radius:50%;background-color:var(--placeholder-color);margin-right:15px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--color-text)}
.asset-icon.icon-gold{background-color:#b8860b}
.asset-icon.icon-crypto{background-color:#f7931a}
.asset-icon.icon-forex{background-color:#0052b4}
.asset-info{flex-grow:1}
.asset-price{text-align:right}
.asset-name{font-weight:600;color:var(--color-text-tertiary);margin-bottom:4px}
.asset-symbol{font-size:13px;color:var(--color-text-secondary)}
.asset-value{font-weight:600;color:var(--color-text-tertiary);margin-bottom:4px}
.asset-change{font-size:13px;font-weight:500}
.asset-change.positive{color:var(--accent-green)}
.asset-change.negative{color:var(--accent-red)}
.placeholder-bar{background-color:var(--placeholder-color);border-radius:4px;height:10px}
.placeholder-bar.long{width:120px;margin-bottom:8px}
.placeholder-bar.short{width:80px}
.placeholder-bar.p-md{width:50px;margin-bottom:8px}
.placeholder-bar.p-sm{width:40px}
@keyframes pulse{50%{opacity:.5}}
@keyframes wave-light{0%,100%{stroke:hsla(0,0%,100%,.3)}50%{stroke:hsla(0,0%,100%,.9)}}


@keyframes shimmer{0%{transform:translateX(-100%) skewX(-20deg)}100%{transform:translateX(100%) skewX(-20deg)}}
.order-card .btn-submit .loading-icon path{stroke:hsla(0,0%,100%,.3);animation-name:wave-light;animation-duration:1.4s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.order-card .btn-submit .loading-icon .bar1{animation-delay:0s}
.order-card .btn-submit .loading-icon .bar2{animation-delay:.2s}
.order-card .btn-submit .loading-icon .bar3{animation-delay:.4s}
.btn-primary::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent,hsla(198,100%,75%,.15),transparent);animation:shimmer 3s ease-in-out 2s infinite}
.skeleton-row{display:grid;grid-template-columns:repeat(7,1fr);gap:15px;padding:15px 10px;min-width:600px}
.skeleton-bar{height:12px;background-color:var(--color-control-active);border-radius:4px;animation:pulse 1.5s cubic-bezier(.4,0,.6,1) infinite}
.notifications-overlay{position:fixed;inset:0;z-index:2000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.notifications-overlay.open{opacity:1;visibility:visible}
.notifications-backdrop{position:absolute;inset:0;background-color:rgba(0,0,0,.5);cursor:pointer}
.notifications-panel{position:absolute;top:0;right:0;height:100%;width:100%;max-width:450px;background-color:#212529;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.notifications-overlay.open .notifications-panel{transform:translateX(0)}
.notifications-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;flex-shrink:0;border-bottom:1px solid var(--color-box-border)}
.notifications-title-section{display:flex;align-items:center;gap:16px}
.notifications-title-section h2{font-size:18px;font-weight:500;color:var(--color-text-tertiary)}
.panel-btn{background:0 0;border:none;cursor:pointer;padding:4px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center}
.panel-btn svg{width:24px;height:24px}
.notifications-body{flex-grow:1;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow-y:auto}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--color-text-secondary);text-align:center}
.empty-state-icon{width:48px;height:48px;stroke-width:1}
.empty-state p{font-size:16px}
.notifications-fab{position:absolute;bottom:30px;right:30px;width:56px;height:56px;background-color:var(--color-primary);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.notifications-fab svg{width:28px;height:28px;color:var(--color-white)}
.user-account-panel{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#1c2127;z-index:2000;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94);opacity:0;visibility:hidden}


.user-account-panel.open{transform:translateX(0);opacity:1;visibility:visible}
.account-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;flex-shrink:0;border-bottom:1px solid var(--color-box-border)}
.account-panel-title-section{display:flex;align-items:center;gap:16px}
.account-panel-title-section h2{font-size:18px;font-weight:500;color:var(--color-text-tertiary)}
.account-panel-body{padding:24px;overflow-y:auto;flex-grow:1}
.user-account-panel .user-profile-link.no-bg{background:0 0;padding:0;margin:0 0 20px}
.account-tier{display:flex;align-items:center;justify-content:space-between;background-color:var(--color-control-active);padding:12px 16px;border-radius:10px}
.account-tier .tier-name{font-weight:600;color:var(--color-text-tertiary)}
.account-tier .tier-progress{font-weight:500;color:var(--color-text-secondary)}
.account-tier .btn-upgrade{background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer;transition:background-color .2s}
.account-tier .btn-upgrade:hover{background-color:var(--color-primary-hover)}
.account-summary{margin-top:24px}
.account-summary h3{font-size:16px;font-weight:600;margin-bottom:12px}
.summary-row{display:flex;justify-content:space-between;padding:10px 0;font-size:14px}
.summary-row .summary-label{color:var(--color-text-secondary)}
.summary-row .summary-value{font-weight:500;color:var(--color-text-tertiary)}
.actions-list-desktop{display:none}
.language-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:280px;background-color:#1c2127;border:1px solid var(--color-box-border);border-radius:12px;padding:8px;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.language-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.language-search-wrapper{position:relative;padding:4px;margin-bottom:8px}
.language-search-wrapper svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--color-text-secondary)}
.language-search-wrapper input{width:100%;background-color:var(--color-control-active);border:1px solid var(--color-box-border);border-radius:8px;padding:12px 12px 12px 45px;color:var(--color-text);font-size:15px;font-weight:500;outline:0}
.language-search-wrapper input::placeholder{color:var(--color-text-secondary)}
.language-list{list-style:none;max-height:250px;overflow-y:auto;padding-right:4px}
.language-list::-webkit-scrollbar{width:6px}
.language-list::-webkit-scrollbar-track{background:0 0}
.language-list::-webkit-scrollbar-thumb{background-color:var(--color-control-active);border-radius:3px}
.language-list-item a{display:flex;align-items:center;padding:12px;border-radius:8px;color:var(--color-text-tertiary);font-size:15px;font-weight:500;transition:background-color .2s}
.language-list-item a:hover{background-color:var(--color-control-hover);color:var(--color-white)}
.language-list-item.active a{background-color:var(--color-control-active);color:var(--color-white)}
.flag-icon{width:24px;height:24px;border-radius:50%;margin-right:12px;object-fit:cover}
body>.skiptranslate,.goog-te-banner-frame.skiptranslate{display:none!important}
body{top:0!important}


#gtranslate_wrapper{display:none!important}
.welcome-card{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;padding:24px}
.welcome-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.welcome-card .btn-primary{padding:10px 16px;font-size:14px}
.welcome-content h3{font-size:18px;font-weight:600;margin-bottom:6px}
.move-money-dropdown-container{position:relative}
.move-money-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;width:max-content;background-color:#1c2127;border:1px solid var(--color-box-border);border-radius:12px;padding:6px;display:flex;gap:6px;z-index:10;opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.move-money-dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-action-btn{display:flex;align-items:center;gap:8px;background-color:var(--color-control);color:var(--color-text-tertiary);font-size:14px;font-weight:500;padding:10px 16px;border-radius:8px;border:none;cursor:pointer;transition:background-color .2s,color .2s;text-decoration:none}
.dropdown-action-btn:hover{background-color:var(--color-control-hover);color:var(--color-white)}
.dropdown-action-btn svg{width:18px;height:18px}
.btn-primary .js-chevron{transition:transform .3s ease}
.move-money-dropdown-container.open .js-chevron{transform:rotate(180deg)}
.overview-card .details-view{display:none}
.overview-card.show-details .assets-view{display:none}
.overview-card.show-details .details-view{display:block}
#toggle-assets-view-btn{background-color:var(--color-control-active)}
.overview-card.show-details #toggle-assets-view-btn{background-color:var(--color-control)}
.overview-card.show-details #toggle-overview-view-btn{background-color:var(--color-control-active)}
.details-view-header{display:flex;justify-content:space-between;align-items:center}
.details-view-header .card-subtitle svg{width:16px;height:16px;margin-left:4px;vertical-align:middle;color:var(--color-text-secondary)}
.details-view-title{font-size:16px;font-weight:500;color:var(--color-text-secondary);margin-top:24px;margin-bottom:8px}
.detail-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-box-border)}
.details-list .detail-row:last-child{border-bottom:none}
.detail-label{display:flex;align-items:center;gap:12px;color:var(--color-text-tertiary);font-weight:500}
.detail-label svg{width:20px;height:20px;color:var(--color-text-secondary)}
.detail-value{color:var(--color-text-tertiary);font-weight:500;flex-grow:1;text-align:right;padding-right:24px}
.detail-row .detail-value:last-child{padding-right:0}
.status-unverified{color:var(--accent-red)!important}
.btn-action-small{background-color:var(--color-control-active);color:var(--color-text-tertiary);font-size:14px;font-weight:500;padding:8px 16px;border-radius:8px;text-decoration:none;transition:background-color .2s,color .2s;flex-shrink:0}
.btn-action-small:hover{background-color:var(--color-control-hover);color:var(--color-white)}
.asset-item a{display:flex;align-items:center;text-decoration:none;width:100%;padding:8px;border-radius:8px;transition:background-color .2s}
.asset-item a:hover{background-color:var(--color-control-hover)}
.asset-icon{background-color:transparent}
.asset-icon img{width:40px;height:40px;border-radius:50%}


.asset-info{flex-grow:1;padding:0 15px}
.asset-symbol{text-transform:uppercase}
.balance-card{grid-column:1/3;gap:12px}
.activity-card{grid-column:3/4}
.assets-card{grid-column:1/-1}
.balance-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;margin-bottom:0;color:var(--color-text-secondary)}
.large-balance{font-size:36px;font-weight:700;line-height:1.2}
.activity-card{display:flex;flex-direction:column}
.activity-content{flex-grow:1;display:flex;align-items:flex-start;padding-top:10px}
.no-activity-text{font-size:14px;color:var(--color-text-secondary)}
.assets-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;flex-wrap:wrap}
.assets-header h3{font-size:18px;font-weight:600}
.assets-controls{display:flex;align-items:center;gap:15px}
.assets-search-wrapper{position:relative}
.assets-search-wrapper svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--color-text-secondary)}
.assets-search-wrapper input{width:100%;max-width:240px;background-color:var(--color-control);border:1px solid var(--color-box-border);border-radius:8px;padding:10px 12px 10px 42px;color:var(--color-text);font-size:14px;font-weight:500;outline:0;transition:background-color .2s,border-color .2s}
.assets-search-wrapper input:hover{background-color:var(--color-control-hover)}
.assets-search-wrapper input:focus{border-color:var(--color-primary)}
.assets-search-wrapper input::placeholder{color:var(--color-text-secondary)}
.assets-filter-btn{display:flex;align-items:center;background-color:var(--color-control);border:1px solid var(--color-box-border);padding:10px 15px;height:42px;border-radius:8px;font-weight:500;cursor:pointer;color:var(--color-text-tertiary);gap:12px;font-size:14px;transition:background-color .2s}
.assets-filter-btn:hover{background-color:var(--color-control-hover)}
.assets-table-wrapper{overflow-x:auto}
.asset-skeleton-row,.assets-table-header{display:grid;grid-template-columns:2fr 1fr 1.5fr 1.5fr 1.5fr;gap:20px;min-width:700px;align-items:center}
.assets-table-header{padding:0 15px 15px;border-bottom:1px solid var(--color-box-border);color:var(--color-text-secondary);font-size:13px;font-weight:500;text-transform:capitalize}
.asset-skeleton-row{padding:18px 15px;border-bottom:1px solid var(--color-box-border)}
.assets-table-body .asset-skeleton-row:last-child{border-bottom:none}
.skeleton-asset-info{display:flex;align-items:center;gap:15px}
.skeleton-icon{width:32px;height:32px;border-radius:50%;background-color:var(--color-control-active);flex-shrink:0;animation:pulse 1.5s cubic-bezier(.4,0,.6,1) infinite}
.skeleton-actions{display:flex;gap:10px}
.withdrawals-card{grid-column:1/-1}
.withdrawals-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;flex-wrap:wrap}
.withdrawals-title-group{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.withdrawals-title-group h3{font-size:22px;font-weight:600}
.btn-withdraw{background-color:var(--color-primary);color:var(--color-white);font-size:14px;font-weight:500;padding:10px 16px}
.btn-withdraw:hover{background-color:var(--color-primary-hover)}
.withdrawals-table-wrapper{overflow-x:auto}
.withdrawals-table-header{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;min-width:800px;padding:0 15px 15px;border-bottom:1px solid var(--color-box-border);color:var(--color-text-secondary);font-size:13px;font-weight:500}
.table-empty-state{padding:40px 15px;text-align:center;font-size:14px;color:var(--color-text-secondary)}
.table-empty-state a{color:var(--color-primary);font-weight:500;text-decoration:none}
.table-empty-state a:hover{text-decoration:underline}
.investing-card{grid-column:1/-1;gap:25px}
.investing-title{font-size:20px;font-weight:600}
.investing-tabs{display:flex;gap:24px;border-bottom:1px solid var(--color-box-border)}
.investing-tab-item{background:0 0;border:none;color:var(--color-text-secondary);padding:0 4px 12px;font-size:15px;font-weight:600;cursor:pointer;position:relative;transition:color .2s}
.investing-tab-item:hover{color:var(--color-text-tertiary)}
.investing-tab-item.active{color:var(--color-text)}
.investing-tab-item.active::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background-color:var(--color-primary)}
.portfolio-summary{display:flex;flex-direction:column;gap:8px}
.portfolio-label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--color-text-secondary)}
.portfolio-amount{font-size:28px;font-weight:700}
.positions-header{display:flex;justify-content:space-between;align-items:center}
.positions-header h4{font-size:16px;font-weight:600}


.positions-table-wrapper{overflow-x:auto}
.position-skeleton-row,.positions-table-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;min-width:600px;align-items:center}
.positions-table-header{padding:0 15px;color:var(--color-text-secondary);font-size:13px;font-weight:500}
.position-skeleton-row{padding:18px 15px;border-bottom:1px solid var(--color-box-border)}
.positions-table-body{border-top:1px solid var(--color-box-border);padding-top:15px;margin-top:15px}
.positions-table-body .position-skeleton-row:last-child{border-bottom:none}
.markets-card{grid-column:1/-1}
.markets-card .assets-header{margin-bottom:15px}
.markets-card .assets-header h3{font-size:22px}
.markets-table-wrapper{overflow-x:auto}
.market-skeleton-row,.markets-table-header{display:grid;grid-template-columns:2.5fr 1fr 1.5fr 1.5fr 1fr;gap:20px;min-width:800px;align-items:center}
.markets-table-header{padding:15px;border-top:1px solid var(--color-box-border);margin-top:15px;color:var(--color-text-secondary);font-size:13px;font-weight:500}
.market-header-asset{display:flex;align-items:center;gap:10px}
.market-header-asset svg{width:16px;height:16px;flex-shrink:0}
.market-skeleton-row{padding:14px 15px}
.market-asset-cell{display:flex;align-items:center;gap:15px}
.skeleton-star-icon{width:20px;height:20px;color:var(--color-control-active);flex-shrink:0}
.mining-summary-card{grid-column:1/2;display:flex;flex-direction:column;gap:12px}
.mining-stats-card{grid-column:2/4}
.mining-pools-card{grid-column:1/-1}
.mining-section-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}
.mining-amount{font-size:32px;font-weight:700;line-height:1.2}
.mining-summary-card .card-subtitle{margin-top:-8px;margin-bottom:12px}
.btn-roi{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;padding:12px;background-color:var(--color-control-active);border:1px solid var(--color-box-border);border-radius:8px;color:var(--color-text-tertiary);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}
.btn-roi:hover{background-color:var(--color-control-hover)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:30px 20px;height:100%;align-content:space-between}
.stat-item{display:flex;flex-direction:column;gap:6px}
.stat-label{font-size:13px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}
.stat-value{font-size:20px;font-weight:600;color:var(--color-text-tertiary)}
.pools-content{padding-top:25px}
.pools-content h4{font-size:16px;font-weight:600}
.real-estate-card{grid-column:1/-1;gap:25px}
.re-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.re-portfolio-value{display:flex;flex-direction:column;gap:8px}
.re-portfolio-label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--color-text-secondary);font-weight:500}
.re-portfolio-amount{font-size:32px;font-weight:700}
.btn-dark-outline{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background-color:var(--color-control-active);border:1px solid var(--color-box-border);border-radius:8px;color:var(--color-text-tertiary);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s;text-decoration:none}
.btn-dark-outline:hover{background-color:var(--color-control-hover)}
.projects-section{padding-top:25px}
.projects-title{font-size:18px;font-weight:600;margin-bottom:20px}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.project-card{background-color:var(--color-control);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.project-card-image img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.project-card-content{padding:20px;flex-grow:1}
.project-card-content h5{font-size:18px;font-weight:600;margin-bottom:10px;color:var(--color-text)}
.project-card-content p{font-size:14px;color:var(--color-text-secondary);line-height:1.5}
.project-card-details{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:20px;border-top:1px solid var(--color-box-border)}
.detail-item{display:flex;flex-direction:column;gap:4px}
.detail-label{font-size:13px;color:var(--color-text-secondary)}
.detail-value{font-size:14px;font-weight:600;color:var(--color-text-tertiary)}
.project-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px 20px}
.btn-invest-now{background-color:var(--color-primary);color:var(--color-white);font-size:14px;font-weight:600;padding:10px 16px;text-align:center;border-radius:8px;text-decoration:none;transition:background-color .2s}


.btn-invest-now:hover{background-color:var(--color-primary-hover)}
.subscription-section{grid-column:1/-1;gap:25px}
.subscription-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.subscription-balance-info{display:flex;flex-direction:column;gap:8px}
.subscription-balance-label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--color-text-secondary);font-weight:500}
.subscription-balance-amount{font-size:32px;font-weight:700}
.current-subscription-text{font-size:14px;color:var(--color-text-secondary)}
.current-subscription-text strong{color:var(--color-text-tertiary);font-weight:600}
.plans-content-area{padding-top:25px}
.plans-title{font-size:18px;font-weight:600;margin-bottom:20px}
.plans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.plan-card{background-color:var(--color-card-background);border:1px solid var(--color-box-border);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:20px}
.plan-title{font-size:18px;font-weight:600;color:var(--color-primary)}
.plan-details-list{display:flex;flex-direction:column}
.plan-detail-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--color-box-border);font-size:14px;color:var(--color-text-secondary)}
.plan-detail-row:first-child{padding-top:0}
.plan-detail-row span:last-child{color:var(--color-text-tertiary);font-weight:500}
.plan-detail-row .roi-value{color:var(--accent-green);font-weight:600}
.plan-detail-row.no-border{border-bottom:none;padding-bottom:0}
.plan-amount-group{display:flex;flex-direction:column;gap:8px}
.plan-amount-group label{font-size:14px;color:var(--color-text-secondary)}
.amount-input-wrapper{display:flex;align-items:center;background-color:var(--color-input);border:1px solid var(--color-input-border);border-radius:8px;padding:0 12px}
.amount-input-wrapper input{flex-grow:1;background:0 0;border:none;outline:0;color:var(--color-text);font-size:14px;font-weight:500;height:44px}
.currency-badge{font-size:14px;font-weight:600;color:var(--color-text-secondary);background-color:var(--color-control-active);padding:4px 8px;border-radius:6px}
.btn-subscribe{background-color:var(--color-control-active);color:var(--color-text-secondary);text-align:center;padding:12px;font-size:15px;font-weight:600;border-radius:8px;text-decoration:none;transition:background-color .2s,color .2s;margin-top:auto}
.btn-subscribe:hover{background-color:var(--color-control-hover);color:var(--color-text)}
.staking-stat-card{display:flex;flex-direction:column;gap:8px}
.staking-stat-amount{font-size:28px;font-weight:700}
.staking-stat-label{font-size:15px;font-weight:500;color:var(--color-text-tertiary)}
.staking-stat-sublabel{font-size:14px;color:var(--color-text-secondary)}
.staking-pools-section{grid-column:1/-1;gap:25px}
.staking-content-area{padding-top:25px}
.staking-pools-title{font-size:18px;font-weight:600;margin-bottom:20px}
.staking-pools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.staking-pool-card{background-color:var(--color-control);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:20px}
.staking-pool-header{display:flex;align-items:center;gap:15px}
.pool-icon{width:40px;height:40px;flex-shrink:0}
.pool-icon img{width:100%;height:100%}
.pool-info{line-height:1.4}
.pool-name{font-size:16px;font-weight:600;color:var(--color-text)}
.pool-symbol{font-size:14px;color:var(--color-text-secondary)}
.btn-stake{width:100%;background-color:var(--color-primary);color:var(--color-white);text-align:center;padding:12px;font-size:15px;font-weight:600;border-radius:8px;text-decoration:none;transition:background-color .2s;margin-top:auto}
.btn-stake:hover{background-color:var(--color-primary-hover)}
.copy-trading-section{grid-column:1/-1;gap:25px}
.copy-trading-title{font-size:20px;font-weight:600}
.experts-content-area{padding-top:25px}
.experts-area-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.experts-title{font-size:18px;font-weight:600}
.experts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.expert-card{background-color:var(--color-control);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:24px}
.expert-header{display:flex;align-items:center;gap:15px}
.expert-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0}
.expert-info{line-height:1.5}
.expert-name{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:var(--color-text)}
.verified-icon{width:18px;height:18px;color:#ffc107}
.expert-handle{font-size:14px;color:var(--color-text-secondary)}
.expert-followers{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--color-text-tertiary)}
.expert-followers svg{width:16px;height:16px;color:var(--color-text-secondary)}
.expert-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--color-box-border);border-bottom:1px solid var(--color-box-border)}
.expert-stat-item{display:flex;flex-direction:column;gap:4px}
.expert-stat-item span{font-size:13px;color:var(--color-text-secondary)}
.expert-stat-item strong{font-size:16px;font-weight:600;color:var(--color-text)}
.expert-stat-item strong.positive{color:var(--accent-green)}

.expert-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
@media (max-width:1024px){.sidebar{position:fixed;left:0;top:0;width:100%;height:100%;z-index:1000;transform:translateX(-100%);opacity:0;visibility:hidden;border-right:none;padding:24px 16px;overflow-y:auto}.sidebar.open{transform:translateX(0);opacity:1;visibility:visible}.sidebar-footer,.sidebar-header{display:none}.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.mobile-menu-header .user-profile-link{background:0 0;padding:0;margin:0}.mobile-menu-header .user-profile-link .user-name{font-size:16px}.mobile-menu-header .user-profile-link .verify-link{color:var(--color-text-secondary);font-size:14px;font-weight:400}.mobile-menu-header .menu-controls{display:flex;gap:12px}.mobile-menu-header .menu-controls button{background:0 0;border:none;color:var(--color-text-secondary);cursor:pointer}.mobile-menu-header .menu-controls svg{width:24px;height:24px}.sidebar-nav ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sidebar-nav li{margin-bottom:0}.sidebar-nav a{flex-direction:column;justify-content:center;height:100px;background-color:var(--color-control-active);color:var(--color-text-tertiary);gap:8px;font-size:13px}.sidebar-nav a:hover{background-color:var(--color-control-hover)}.sidebar-nav li.active a{box-shadow:0 0 0 1px var(--color-primary)}.sidebar-nav a svg{width:28px;height:28px;margin-right:0}.sidebar-nav .pagination{display:flex;justify-content:center;gap:8px;margin-top:30px}.sidebar-nav .dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-control-active)}.sidebar-nav .dot.active{background-color:var(--color-white)}.main-content{padding:15px}}
@media (max-width:767px){.header-title,.overview-card,.stats-card{display:none}.mobile-balance-card,.mobile-tab-card{display:flex}.hamburger-menu{display:block}.main-header{padding:10px;background-color:var(--color-main-background);margin-bottom:15px;position:sticky;top:0;z-index:99;border-radius:0;width:100%;border-bottom:1px solid var(--color-box-border)}.main-content{padding-top:0}main.content-grid{padding-top:15px}.header-controls .icon-btn:nth-child(3){display:none}.content-grid{display:flex;flex-direction:column}.chart-card{padding:0;min-height:300px}.mobile-balance-card{flex-direction:column;gap:20px}.mobile-balance-top{display:flex;justify-content:space-between;align-items:flex-start}.mobile-balance-top .card-subtitle{display:flex;align-items:center;gap:8px}.mobile-balance-top .card-subtitle svg{width:16px;height:16px}.mobile-balance-top .balance-amount{font-size:28px}.mobile-balance-actions{display:flex;justify-content:space-around;text-align:center}.mobile-action-btn{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--color-text-tertiary);font-size:13px;font-weight:500}.mobile-action-btn .icon-wrapper{width:48px;height:48px;background-color:var(--color-control);border-radius:50%;display:flex;align-items:center;justify-content:center}.mobile-action-btn svg{width:22px;height:22px}.mobile-tab-card{flex-direction:column;gap:20px}.mobile-content-tabs{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--color-box-border);padding-bottom:10px}.mobile-content-tabs button{background:0 0;border:none;color:var(--color-text-secondary);font-size:15px;font-weight:600;padding:5px 0;cursor:pointer;position:relative}.mobile-content-tabs button.active{color:var(--color-primary)}.mobile-content-tabs button.active::after{content:'';position:absolute;bottom:-11px;left:0;width:100%;height:2px;background-color:var(--color-primary)}.mobile-tab-content .asset-item{padding:10px 0}.mobile-tab-content .asset-info{flex-grow:1}.mobile-tab-content .asset-price{text-align:right}.welcome-card{flex-direction:column;align-items:flex-start;gap:16px}.welcome-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.activity-card,.balance-card{grid-column:1/-1}.asset-skeleton-row,.assets-table-header{grid-template-columns:2fr 1fr 1.5fr;min-width:500px}.assets-table-header .header-cell:nth-child(4),.assets-table-header .header-cell:nth-child(5),.asset-skeleton-row .skeleton-cell:nth-child(4),.asset-skeleton-row .skeleton-cell:nth-child(5){display:none}.withdrawals-table-header{grid-template-columns:1fr 1fr 1fr;min-width:400px}.withdrawals-table-header div:nth-child(2),.withdrawals-table-header div:nth-child(3),.withdrawals-table-header div:nth-child(5){display:none}.projects-grid{grid-template-columns:1fr}.plans-grid{grid-template-columns:1fr}.staking-stat-card{grid-column:1/-1}.staking-pools-grid{grid-template-columns:1fr}.experts-grid{grid-template-columns:1fr}}
@media (min-width:768px){.user-account-panel{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:550px;height:auto;border:1px solid var(--color-box-border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.4);transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s}.user-account-panel.open{transform:translateY(0)}.account-panel-header{display:none}.actions-list-desktop{display:flex}.account-panel-body{display:flex;gap:24px;padding:24px;overflow-y:visible}.account-panel-main{flex:1}.account-panel-actions{width:180px;flex-shrink:0;border-left:1px solid var(--color-box-border);padding-left:24px}.actions-list-desktop{list-style:none;flex-direction:column;gap:4px}.actions-list-desktop a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--color-text-tertiary);font-weight:500;transition:background-color .2s,color .2s}.actions-list-desktop a:hover{background-color:var(--color-control-hover);color:var(--color-white)}.actions-list-desktop a svg{width:20px;height:20px;color:var(--color-text-secondary)}.actions-list-desktop .logout-item{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-box-border)}}



.deposits-card { grid-column: 1 / -1; }
.deposits-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; flex-wrap: wrap; }
.deposits-title-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.deposits-title-group h3 { font-size: 20px; font-weight: 600; }
.btn-deposit-now { background-color: var(--color-primary); color: var(--color-white); font-size: 14px; font-weight: 500; padding: 10px 16px; }
.btn-deposit-now:hover { background-color: var(--color-primary-hover); }
.deposits-table-wrapper { overflow-x: auto; }
.deposits-table-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; min-width: 900px; padding: 0 15px 15px 15px; border-bottom: 1px solid var(--color-box-border); color: var(--color-text-secondary); font-size: 12px; font-weight: 500; }

.signal-balance-card { grid-column: 1 / 3; gap: 12px; }
.signal-strength-card { grid-column: 3 / 4; gap: 12px; }
.signals-list-card { grid-column: 1 / -1; gap: 25px; }
.signal-balance-header { display: flex; justify-content: space-between; align-items: flex-start; }
.signal-balance-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-secondary); font-weight: 500; }
.signal-balance-amount { font-size: 28px; font-weight: 700; }
.signal-strength-header { display: flex; justify-content: space-between; align-items: center; }
.signal-strength-label { font-size: 14px; color: var(--color-text-secondary); font-weight: 500; }
.signal-strength-percent { font-size: 14px; font-weight: 600; color: var(--accent-red); }
.signal-strength-bar-container { display: flex; gap: 4px; margin: 12px 0; }
.signal-strength-segment { flex: 1; height: 8px; border-radius: 2px; background-color: var(--accent-red); }
.active-signal-text { font-size: 14px; color: var(--color-text-secondary); }
.signals-content-area { padding-top: 25px; }
.signals-list-title { font-size: 17px; font-weight: 600; margin-bottom: 20px; }
.signals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.signal-purchase-card { background-color: var(--color-card-background); border: 1px solid var(--color-box-border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.signal-strength-value { display: flex; align-items: center; }
.mini-signal-bar { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 8px; }
.mini-bar { width: 3px; height: 10px; border-radius: 1px; background-color: var(--color-control-active); }
.mini-bar.active { background-color: #FFC107; }
.btn-purchase { background-color: var(--color-control-active); color: var(--color-text-secondary); text-align: center; padding: 12px; font-size: 14px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: background-color 0.2s, color 0.2s; margin-top: auto; }
.btn-purchase:hover { background-color: var(--color-control-hover); color: var(--color-text); }
@media (max-width: 992px) {
    .signal-balance-card { grid-column: 1 / -1; }
    .signal-strength-card { grid-column: 1 / -1; }
    .signals-grid { grid-template-columns: 1fr; }
}
.referrals-body { flex-grow: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; }
.referrals-intro { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }
.referral-group label { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); display: block; margin-bottom: 10px; }
.input-action-wrapper { display: flex; gap: 10px; }
.display-input { flex-grow: 1; background-color: var(--color-input); border: 1px solid var(--color-box-border); border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 500; color: var(--color-text-tertiary); }
.display-input.code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-claim { background-color: var(--color-control-active); color: var(--color-text); font-weight: 600; padding: 0 24px; }
.btn-claim:hover { background-color: var(--color-control-hover); }
.btn-copy { background-color: var(--color-primary); color: var(--color-white); font-weight: 600; padding: 0 24px; }
.btn-copy:hover { background-color: var(--color-primary-hover); }
.referral-stats { display: flex; gap: 30px; }
.ref-stat-item { display: flex; flex-direction: column; gap: 6px; }
.ref-stat-item span { font-size: 14px; color: var(--color-text-secondary); }
.ref-stat-item strong { font-size: 18px; font-weight: 600; color: var(--color-text); }
.referrals-empty-state { margin-top: 20px; flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--color-text-secondary); text-align: center; }
.referrals-empty-state p { font-size: 15px; }
.wallet-body { flex-grow: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; }
.wallet-main-title { font-size: 18px; font-weight: 600; color: var(--color-text-tertiary); }
.wallet-intro { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }
.wallet-list { display: flex; flex-direction: column; gap: 8px; }
.wallet-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-box-border); }
.wallet-item:last-child { border-bottom: none; }
.wallet-info { display: flex; align-items: center; gap: 15px; }
.wallet-icon { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; }
.wallet-name { font-size: 14px; font-weight: 500; color: var(--color-text-tertiary); }
.wallet-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.toggle-checkbox { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background-color: var(--color-input); border-radius: 12px; transition: background-color 0.2s ease; }
.toggle-knob { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background-color: white; border-radius: 50%; transition: transform 0.2s ease; }
.toggle-checkbox:checked + .toggle-track { background-color: var(--color-primary); }
.toggle-checkbox:checked + .toggle-track .toggle-knob { transform: translateX(20px); }
/* --- 24. Corrected Settings Panel --- */
.settings-body { flex-grow: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background-color: #1c2127; }
.settings-section-title { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); padding: 16px 12px 4px; }
.settings-link { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 10px; text-decoration: none; background-color: var(--color-control); transition: background-color 0.2s; }
.settings-link:hover { background-color: var(--color-control-hover); }
.settings-user-profile { margin-bottom: 16px; }
.settings-user-profile .user-avatar { width: 48px; height: 48px; background-color: hsl(218, 12%, 18%); color: var(--color-primary); font-size: 18px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-user-profile .settings-link-text strong { font-size: 17px; color: var(--color-white); }
.settings-user-profile .settings-link-text span { color: var(--color-text-secondary); }
.settings-link-icon { width: 24px; height: 24px; color: var(--color-text-tertiary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.settings-link-text { line-height: 1.5; }
.settings-link-text strong { font-size: 16px; font-weight: 500; color: var(--color-text); display: block; }
.settings-link-text span { font-size: 14px; color: var(--color-text-secondary); }
/* --- New styles for Trade Form Button --- */
.btn-submit .submit-text {
    display: none; /* Hide text by default */
}

.btn-submit:not(:disabled) .loading-icon {
    display: none; /* Hide loading icon when button is enabled */
}

.btn-submit:not(:disabled) .submit-text {
    display: inline; /* Show text when button is enabled */
}
/* --- UPDATED: Styles for Trade Form Inputs & Selects --- */
.order-card input[type=text],
.order-card input[type=number],
.order-card select {
    /* Reset browser default styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    
    /* Apply consistent styling */
    background-color: var(--color-input);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    padding: 12px;
    color: var(--color-text);
    font-size: 14px;
    width: 100%;
    transition: background-color .2s, border-color .2s;
    cursor: pointer;
}

/* Add custom dropdown arrow for select elements */
.order-card select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23ffffff80'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px; /* Make space for the arrow */
}

/* Ensure placeholder-like text for default options is dim */
.order-card select:invalid {
    color: var(--color-text-secondary);
}
.order-card option {
    background-color: #1c2127; /* Dark background for options dropdown */
    color: var(--color-text);
}

/* Apply hover and focus states to both */
.order-card input[type=text]:hover,
.order-card select:hover {
    background-color: var(--color-input-hover);
}

.order-card input[type=text]:focus,
.order-card select:focus {
    outline: 0;
    border-color: var(--color-primary);
}
/* --- DEPOSIT MODAL STYLES (FROM FILE) --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 1001; padding: 15px; transition: opacity 0.2s ease-in-out; }
.modal-overlay.active { display: flex; }
.modal-content { background-color: #1a1d21; padding: 24px; border-radius: 12px; width: 100%; max-width: 480px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column; transition: transform 0.2s ease-in-out; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h2 { font-size: 20px; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 10px; }
.modal-close-btn, .modal-back-btn { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 0;}
.modal-close-btn svg, .modal-back-btn svg { width: 24px; height: 24px; }
.modal-label { display: block; color: var(--color-text-secondary); font-size: 14px; margin-bottom: 8px; font-weight: 500; }
.modal-footer { margin-top: 24px; }
.modal-continue-btn { width: 100%; background-color: var(--color-primary); color: var(--color-white); border: none; padding: 14px; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; transition: background-color 0.2s; }
.modal-continue-btn:hover { background-color: var(--color-primary-hover); }
.modal-continue-btn:disabled { background-color: #4a4f54; color: #8e9499; cursor: not-allowed; }

/* Step 1 */
#modal-step-1 p { color: var(--color-text-tertiary); margin-bottom: 24px; line-height: 1.5; font-size: 15px; }
.payment-method-box { width: 100%; background-color: #1a1d21; border: 1px solid var(--color-primary); border-radius: 8px; padding: 12px 16px; color: var(--color-text); font-size: 16px; }

/* Step 2 */
#modal-step-2 p { color: #b0b4b8; font-size: 15px; line-height: 1.5; margin-bottom: 24px; }
.stepper { display: flex; flex-direction: column; gap: 20px; }
.step { display: flex; }
.step-indicator { display: flex; flex-direction: column; align-items: center; margin-right: 16px; flex-shrink: 0; }
.step-number { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--color-text); background-color: transparent; border: 2px solid #4a4f54; transition: all 0.3s ease; }
.step-number .checkmark { display: none; width: 16px; height: 16px; stroke: white; }
.step.completed .step-number { background-color: var(--color-primary); border-color: var(--color-primary); }
.step.completed .step-number span { display: none; }
.step.completed .step-number .checkmark { display: block; }
.step-line { flex-grow: 1; width: 2px; background-color: #4a4f54; margin: 6px 0; transition: background-color 0.3s ease; }
.step.completed .step-line { background-color: var(--color-primary); }
.step:last-child .step-line { display: none; }
.step-content { flex-grow: 1; padding-bottom: 15px; }
.step-content h3 { font-weight: 500; font-size: 15px; color: #d1d5db; margin-bottom: 10px; }
.custom-select-wrapper { position: relative; display: flex; align-items: center; }
.custom-select-wrapper .token-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: none; }
.custom-select-wrapper.has-icon select.input-style { padding-left: 48px; }
.custom-select-wrapper.has-icon .token-icon { display: block; }
.step-content .input-style { width: 100%; background-color: #2c3036; border: 1px solid #4a4f54; border-radius: 8px; padding: 12px 16px; color: var(--color-text); font-size: 16px; font-family: 'Inter', sans-serif; }
.step-content select.input-style { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25em; cursor: pointer; padding-left: 16px; }
.deposit-details-box { display: none; align-items: center; justify-content: space-between; background-color: #2c3036; border-radius: 8px; padding: 12px 8px 12px 16px; min-height: 60px; }
.deposit-details-box.visible { display: flex; }
.deposit-address { font-size: 15px; color: #e5e7eb; word-break: break-all; padding-right: 10px; }
#copy-address-btn { background-color: #374151; border: none; border-radius: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; }
#copy-address-btn:hover { background-color: #4b5563; }
#copy-address-btn .copy-icon { display: block; width: 18px; height: 18px; color: #d1d5db; }
#copy-address-btn .check-icon { display: none; width: 18px; height: 18px; color: var(--accent-green); }
#copy-address-btn.copied .copy-icon { display: none; }
#copy-address-btn.copied .check-icon { display: block; }
.deposit-details-placeholder { height: 60px; position: relative; overflow: hidden; background-color: #2c3036; border-radius: 8px;}
.deposit-confirmation-text { color: #8e9499; font-size: 14px; }
.shimmer-wrapper::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Step 3 */
#modal-step-3 { display: none; }
.amount-input-wrapper { position: relative; }
.amount-token-badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background-color: #374151; color: white; padding: 6px 10px; border-radius: 6px; display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px;}
.amount-token-badge img { width: 20px; height: 20px; }
.deposit-info-list { list-style: none; padding: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.deposit-info-item { display: flex; justify-content: space-between; align-items: center; color: #d1d5db; font-size: 14px; }
.deposit-info-label { color: #8e9499; }
.info-spacer { flex-grow: 1; border-bottom: 1px dotted #4a4f54; margin: 0 8px; height: 1px; transform: translateY(-3px); }
.payment-proof-uploader { background-color: #2c3036; border-radius: 8px; padding: 16px; text-align: center; cursor: pointer; }
.payment-proof-uploader a { color: var(--color-primary); font-weight: 500; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
.payment-proof-uploader svg { width: 20px; height: 20px; }
.total-deposit-value { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; color: #d1d5db; font-size: 15px; font-weight: 500; }
/* This is the CSS you need to place */
.pnl-value {
    font-weight: bold;
    transition: color 0.3s ease;
}
.pnl-value.positive {
    color: #4CAF50; /* Green */
}
.pnl-value.negative {
    color: #f44336; /* Red */
}
.pnl-value.neutral {
    color: #9E9E9E; /* Gray */
}
/* FILE: your_main_style.css */

/* --- NEW: Trades Table Layout --- */

/* This applies the grid layout to BOTH the header and the body rows */
.trades-table-header, .trades-table-row {
    display: grid;
    /* UPDATED: This now creates 6 equal-width columns */
    grid-template-columns: repeat(6, 1fr); 
    align-items: center; /* Vertically centers the content in each cell */
    padding: 12px 15px;
    gap: 10px; /* Adds a small space between columns */
    text-align: left;
}

/* Adds the line separator between rows, matching your screenshot */
.trades-table-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Optional: Finer control over column widths if needed */
/* If you want some columns to be wider than others, you could use this instead: */
/*
.trades-table-header, .trades-table-row {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr 1fr 1fr;
    ...
}
*/
/* Add to your main CSS file */
.btn-close-trade {
    background-color: #f44336; /* Red */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-close-trade:hover {
    background-color: #d32f2f; /* Darker Red */
}
/* Add this to your main CSS file */

/* This targets the container for your header and body */
.trades-table-wrapper {
    overflow-x: auto;  /* This is the magic property! Enables horizontal scrolling. */
    -webkit-overflow-scrolling: touch; /* Adds smooth scrolling on iOS devices. */
}

/* This tells the table content not to shrink below a certain width, forcing the scrollbar to appear. */
.trades-table-header, .trades-table-row {
    min-width: 700px; /* Adjust this value if your columns still look too squeezed. */
}
/* =================================================================== */
/*               STYLING FOR PAGINATION CONTROLS                       */
/* =================================================================== */

/* 1. The main container for the pagination links */
.pagination {
    display: flex;              /* Use flexbox for easy alignment */
    justify-content: center;    /* Center the buttons horizontally */
    align-items: center;        /* Align items vertically */
    padding: 2rem 0;            /* Add vertical space above and below */
    gap: 0.5rem;                /* Add a small space between each button (8px) */
    list-style-type: none;      /* Remove bullets if using a <ul> */
    margin: 0;
}

/* 2. Style for each individual pagination link/button */
.pagination a {
    display: inline-block;
    color: #e0e0e0;             /* Light grey text, easier on the eyes than pure white */
    background-color: #2c2f36;  /* Dark grey, slightly lighter than a black background */
    border: 1px solid #444;     /* Subtle border to define the shape */
    padding: 0.6rem 1rem;       /* Comfortable padding (vertical, horizontal) */
    border-radius: 8px;         /* Modern rounded corners */
    text-decoration: none;      /* Remove the default link underline */
    font-weight: 600;           /* Semi-bold for readability */
    font-size: 0.9rem;          /* Slightly smaller than body text */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; /* Smooth transitions */
}

/* 3. Hover effect for interactive buttons */
/* We use :not(.active) so the hover effect doesn't apply to the current page button */
.pagination a:hover:not(.active) {
    background-color: #4a4d55;  /* A lighter grey on hover */
    border-color: #666;
    color: #ffffff;             /* Pure white text on hover */
}

/* 4. Style for the currently active page button */
.pagination a.active {
    background-color: var(--color-primary);  /* A bright accent color. CHANGE THIS to your site's primary color! */
    border-color: #007bff;
    color: #ffffff;
    cursor: default;            /* The cursor should not be a pointer, as it's not clickable */
}

/* 5. (Optional but Recommended) Style for disabled "Prev" or "Next" links */
/* You would need to add a 'disabled' class to your PHP for this to work */
.pagination a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;       /* Disables click events entirely */
}
/* =================================================================== */
/*               PROFIT & LOSS COLOR STYLES                            */
/* =================================================================== */

/* This sets a consistent font weight for all PNL values */
.pnl-value {
    font-weight: 600; /* Semi-bold for better visibility */
}

/* This rule applies the green color to any element with the .positive class,
   making profits stand out. It uses the --accent-green variable you defined. */
.positive {
    color: var(--accent-green, #26A69A); 
}

/* This rule applies the red color to any element with the .negative class,
   making losses clear. It uses the --accent-red variable. */
.negative {
    color: var(--accent-red, #EF5350);
}

/* This rule applies a neutral color for zero or non-applicable values. */
.neutral {
    color: var(--color-text-secondary, #9E9E9E);
}
.btn-primary-markets {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    margin-top:10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width:100%;
}
.faq-accordion { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background-color: var(--color-card-background, #222230); border-radius: 12px; overflow: hidden; }
.faq-question { display: flex; align-items: center; gap: 16px; padding: 10px 20px; cursor: pointer; width: 100%; color: var(--text-primary, #e0e0e0); font-size: 1rem; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question { list-style: none; }
.faq-number { background-color: var(--color-card-background, #2d2d42); color: var(--color-text-tertiary, #a0a0b8); width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 500; }
.faq-title { flex-grow: 1; text-align: left; }
.faq-chevron { width: 20px; height: 20px; color: var(--color-text-tertiary, #a0a0b8); transition: transform 0.3s ease-in-out; }
.faq-item[open] > .faq-question .faq-chevron { transform: rotate(180deg); }
.faq-answe