:root{
  --bg:#0E1320;
  --panel:#141B2A;
  --card:#1A2030;
  --card2:#171E2D;
  --stroke:rgba(255,255,255,.08);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.65);
  --muted2:rgba(234,240,255,.45);

  --blue:#4A7DFF;
  --green:#3DDC97;
  --red:#FF5C5C;
  --violet:#7B61FF;
  --orange:#FFB13D;
  --yellow:#FFC700;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 20px;
  --radius2: 16px;

  --font: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow-x:hidden}
body{
  font-family:var(--font);
  background: radial-gradient(1200px 700px at 50% -200px, rgba(74,125,255,.30), transparent 60%),
              radial-gradient(900px 600px at 120% 0%, rgba(123,97,255,.22), transparent 55%),
              radial-gradient(900px 650px at -20% 20%, rgba(61,220,151,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  min-height:100vh;
  width:100%;
  max-width:100vw;
}

/* Container */
.wrap{
  max-width: 440px;
  margin: 0 auto;
  padding: 18px 16px 220px;
}

/* Responsive for tablets and desktop */
@media (min-width: 768px){
  .wrap{
    max-width: 720px;
    padding: 24px 20px 30px;
  }
}

@media (min-width: 1024px){
  .wrap{
    max-width: 960px;
    padding: 30px 24px 40px;
  }
}

@media (min-width: 1280px){
  .wrap{
    max-width: 1200px;
    padding: 40px 32px 50px;
  }
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  background: rgba(20,27,42,.75);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hdr-left, .hdr-right{display:flex;align-items:center;gap:10px}

.icon-btn{
  width:42px;height:42px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  display:grid;place-items:center;
  outline:none;
  transition: transform .12s ease, background .12s ease;
}

.icon-btn:active{transform: scale(.98)}
.icon-btn:hover{background: rgba(255,255,255,.06)}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.logo{
  display:flex;align-items:baseline;gap:2px;
  font-weight:800;
  letter-spacing:.3px;
  line-height:1;
  user-select:none;
}

.logo .by{color:#FFB13D;font-size:24px}
.logo .dex{color:#FF6A3D;font-size:24px}

.avatar{
  width:42px;height:42px;border-radius: 999px;
  border: 2px solid rgba(74,125,255,.75);
  background: linear-gradient(135deg, rgba(74,125,255,.25), rgba(123,97,255,.22));
  overflow:hidden;
  flex:0 0 auto;
  cursor:pointer;
  transition: transform .12s ease;
}

.avatar:hover{transform: scale(1.05)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Modal */
.modal{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background: rgba(0,0,0,.75);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal.active{display:flex}

.modal-content{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 480px;
  width:100%;
  box-shadow: var(--shadow);
  max-height:80vh;
  overflow-y:auto;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.modal-title{
  font-size:20px;
  font-weight:800;
  margin:0;
}

.modal-close{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  display:grid;place-items:center;
  transition: transform .12s ease;
}

.modal-close:hover{background:rgba(255,255,255,.06)}
.modal-close:active{transform: scale(.95)}

.menu-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

@media (max-width: 400px){
  .menu-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.menu-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 12px;
  border-radius:var(--radius2);
  border:none;
  background:transparent;
  cursor:pointer;
  text-decoration:none;
  color:var(--muted);
  transition: all .12s ease;
  text-align:center;
}

.menu-item:hover .icon{
  background:rgba(255,255,255,.06);
}

.menu-item.active{
  background:transparent;
  border:none;
  color:var(--text);
}

.menu-item .icon{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.08);
}

.menu-item.active .icon{
  background:rgba(255,177,61,.15);
  border-color:rgba(255,177,61,.25);
}

.menu-item.active .icon svg{
  fill: var(--orange);
}

.menu-item.active .label{
  background: linear-gradient(135deg, var(--orange) 0%, #FF6A3D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.menu-item .label{
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

/* Hero card */
.hero{
  margin-top: 14px;
  border-radius: var(--radius);
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 250px at 10% 0%, rgba(74,125,255,.45), transparent 60%),
    radial-gradient(600px 250px at 90% 10%, rgba(123,97,255,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;inset:-1px;
  background: linear-gradient(90deg, rgba(74,125,255,.25), rgba(123,97,255,.18), rgba(61,220,151,.10));
  opacity:.15;
  pointer-events:none;
}

.hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  position:relative;
  z-index:1;
}

.hero-title{
  font-size:13px;
  letter-spacing:.2px;
  color: var(--muted);
}

.eye{
  width:40px;height:40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color:var(--text);
  cursor:pointer;
  display:grid;place-items:center;
  transition: transform .12s ease;
}

.eye:hover{background: rgba(0,0,0,.18)}
.eye:active{transform: scale(.95)}

.balance{
  margin-top: 8px;
  position:relative;
  z-index:1;
}

.balance-main{
  font-size: 40px;
  font-weight: 850;
  letter-spacing: .2px;
  line-height: 1.05;
  margin: 0;
}

.balance-sub{
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.rate{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap: nowrap;
  flex-direction: row;
  position:relative;
  z-index:1;
}

.rate .chip{
  border:1px solid rgba(255,255,255,.12);
  flex: 1 1 0;
  text-align: center;
  background: rgba(0,0,0,.10);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  color: var(--muted);
}

.rate .chip b{color:var(--text);font-weight:700}

@media (max-width: 400px){
  .rate{flex-wrap:wrap}
  .rate .chip{
    flex:1 1 calc(50% - 5px);
    min-width:140px;
    font-size:11px;
    padding:8px 10px;
  }
}

/* Primary actions */
.section{
  margin-top: 14px;
}

.actions-row{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.primary-actions{
  margin-bottom: 10px;
}

.secondary-actions{
  margin-top: 0;
}

.action-btn{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: 0 8px 20px rgba(0,0,0,.20);
  cursor:pointer;
  text-decoration:none;
  color:var(--text);
  transition: transform .12s ease, border-color .12s ease;
}

.action-btn:active{transform: scale(.98)}

.action-btn .badge{
  width:46px;height:46px;
  border-radius: 16px;
  display:grid;place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  flex: 0 0 auto;
}

.action-btn .btn-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  min-width:0;
  flex:1;
}

.action-btn .btn-text{
  font-size:16px;
  font-weight:800;
  line-height:1.1;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.action-btn .btn-hint{
  font-size:12.5px;
  font-weight:400;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* For secondary actions without hint text */
.secondary-actions .action-btn{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 10px 8px;
}

.secondary-actions .action-btn .badge{
  width:36px;height:36px;
  border-radius: 12px;
}

.secondary-actions .action-btn .btn-text{
  font-size:11px;
  font-weight:700;
  text-align:center;
}

.buy .badge{box-shadow: 0 0 24px rgba(61,220,151,.18)}
.buy{border-color: rgba(61,220,151,.22)}
.buy:hover{border-color: rgba(61,220,151,.35)}
.buy .badge{background: radial-gradient(90px 60px at 30% 20%, rgba(61,220,151,.32), rgba(0,0,0,.10))}
.buy svg{fill: var(--green)}

.sell{border-color: rgba(255,92,92,.20)}
.sell:hover{border-color: rgba(255,92,92,.34)}
.sell .badge{background: radial-gradient(90px 60px at 30% 20%, rgba(255,92,92,.26), rgba(0,0,0,.10))}
.sell svg{fill: var(--red)}

.exchange{border-color: rgba(123,97,255,.20)}
.exchange:hover{border-color: rgba(123,97,255,.34)}
.exchange .badge{background: radial-gradient(60px 40px at 30% 20%, rgba(123,97,255,.26), rgba(0,0,0,.10))}
.exchange svg{fill: var(--violet)}

.deposit{border-color: rgba(74,125,255,.20)}
.deposit:hover{border-color: rgba(74,125,255,.34)}
.deposit .badge{background: radial-gradient(60px 40px at 30% 20%, rgba(74,125,255,.26), rgba(0,0,0,.10))}
.deposit svg{fill: var(--blue)}

.withdraw{border-color: rgba(255,177,61,.20)}
.withdraw:hover{border-color: rgba(255,177,61,.34)}
.withdraw .badge{background: radial-gradient(60px 40px at 30% 20%, rgba(255,177,61,.26), rgba(0,0,0,.10))}
.withdraw svg{fill: var(--orange)}

@media (max-width: 500px){
  .actions-row{
    gap: 6px;
  }
  .primary-actions .action-btn{
    padding: 12px 10px;
  }
  .primary-actions .action-btn .badge{
    width:40px;height:40px;
  }
  .primary-actions .action-btn .btn-text{
    font-size:14px;
  }
  .primary-actions .action-btn .btn-hint{
    font-size:11px;
  }
  .secondary-actions .action-btn{
    padding: 8px 6px;
  }
  .secondary-actions .action-btn .badge{
    width:32px;height:32px;
  }
  .secondary-actions .action-btn .btn-text{
    font-size:10px;
  }
}

/* Cryptocurrencies list */
.crypto-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding: 0 2px;
}

.crypto-header .btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.crypto-title{
  margin:0;
  font-size: 16px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--text);
}

.search-btn{
  width:36px;height:36px;
}

.crypto-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  transition: max-height .3s ease;
}

.crypto-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 16px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.05);
  background: linear-gradient(135deg, #1E293B 0%, #161B28 100%);
  transition: transform .2s ease, border-color .12s ease, opacity .3s ease, max-height .3s ease;
  cursor:pointer;
  text-decoration: none;
  color: var(--text);
}

.crypto-item:hover{
  border-color: rgba(255,255,255,.1);
}

.crypto-item:active{
  transform: scale(0.98);
}

.crypto-icon{
  width:48px;height:48px;
  border-radius: 16px;
  display:grid;place-items:center;
  flex:0 0 auto;
}

.crypto-icon.btc{ background: rgba(247, 147, 26, 0.1); color: #F7931A; }
.crypto-icon.eth{ background: rgba(98, 126, 234, 0.1); color: #627EEA; }
.crypto-icon.usdt{ background: rgba(38, 161, 123, 0.1); color: #26A17B; }
.crypto-icon.trx{ background: rgba(255, 0, 19, 0.1); color: #FF0013; }
.crypto-icon.ton{ background: rgba(0, 136, 204, 0.1); color: #0088CC; }
.crypto-icon.ltc{ background: rgba(52, 93, 157, 0.1); color: #345D9D; }
.crypto-icon.sol{ background: rgba(153, 69, 255, 0.1); color: #9945FF; }

.crypto-info{
  flex:1;
  min-width:0;
}

.crypto-name-row, .crypto-balance-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}

.crypto-name{
  font-size:18px;
  font-weight:700;
  color: #FFFFFF;
}

.crypto-ticker{
  font-size:12px;
  font-weight:500;
  color: #64748B;
  background: transparent;
  border: none;
  padding: 0;
}

.crypto-balance{
  font-size:18px;
  font-weight:700;
  color: #FFFFFF;
}

.crypto-balance span{
  font-size:12px;
  font-weight:500;
  color: #64748B;
  margin-left: 4px;
}

.crypto-usd, .crypto-pair{
  font-size:12px;
  font-weight:500;
  color: #64748B;
}

.crypto-change{
  font-size:12px;
  font-weight:600;
}

.crypto-item-hidden{
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
  border: none;
  pointer-events: none;
  transition: all .3s ease;
}

.crypto-list.expanded .crypto-item-hidden{
  max-height: 200px;
  opacity: 1;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.05);
  pointer-events: auto;
}

.crypto-expand-btn{
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s ease;
}

.crypto-expand-btn:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}

.crypto-expand-btn:active{
  transform: scale(.98);
}

.crypto-expand-btn .expand-icon{
  transition: transform .3s ease;
}

.crypto-list.expanded + .crypto-expand-btn .expand-icon{
  transform: rotate(180deg);
}

.crypto-list.expanded + .crypto-expand-btn .expand-text{
  display: none;
}

.crypto-list.expanded + .crypto-expand-btn::before{
  content: "Скрыть";
}

.tile{
  padding: 14px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  text-decoration:none;
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}

.tile:active{transform: scale(.995)}
.tile:hover{background: rgba(255,255,255,.05)}

.tile .left{
  display:flex;align-items:center;gap:10px;min-width:0;
}

.tile .ico{
  width:38px;height:38px;border-radius: 14px;
  display:grid;place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  flex:0 0 auto;
}

.tile .label{
  font-weight:800;
  font-size: 14px;
  margin:0;
}

.tile .hint{
  margin:2px 0 0;
  font-size: 12px;
  color: var(--muted2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* News */
.news-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin-top: 18px;
  padding: 0 2px;
}

.news-head h2{
  margin:0;
  font-size: 18px;
  letter-spacing:.2px;
}

.news-head a{
  color: rgba(74,125,255,.95);
  text-decoration:none;
  font-weight:700;
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(74,125,255,.18);
  background: rgba(74,125,255,.06);
  transition: all .12s ease;
}

.news-head a:hover{
  background: rgba(74,125,255,.12);
  border-color: rgba(74,125,255,.30);
}

.news-list{margin-top: 10px;display:grid;gap:10px}

@media (min-width: 768px){
  .news-list{
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px){
  .news-list{
    grid-template-columns: repeat(3, 1fr);
  }
}

.news{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  padding: 14px 14px;
  cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  transition: transform .12s ease, border-color .12s ease;
}

.news:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.15);
}

.news .meta{min-width:0}

.news .title{
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
  font-size: 14.5px;
  line-height:1.2;
}

.news .sub{
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.news .tag{
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  color: var(--muted);
  white-space:nowrap;
}

/* Page content */
.page-header{
  margin-top:14px;
  padding:16px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
}

.page-header h1{
  margin:0 0 8px;
  font-size:28px;
  font-weight:900;
}

.page-header p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.content-card{
  margin-top:14px;
  padding:20px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

/* Pagination */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding:0 16px;
}

.page-btn{
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  display:grid;place-items:center;
  font-size:14px;
  font-weight:700;
  transition: all .12s ease;
}

.page-btn:hover{
  background:rgba(255,255,255,.06);
}

.page-btn.active{
  background:rgba(74,125,255,.15);
  border-color:rgba(74,125,255,.35);
  color:var(--blue);
}

.page-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* Forms */
.form-group{
  margin-bottom:16px;
}

.form-label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
}

.form-input, .form-select, .form-textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition: all .12s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus{
  border-color:rgba(74,125,255,.35);
  background:rgba(255,255,255,.05);
}

.form-textarea{
  resize:vertical;
  min-height:100px;
}

.btn{
  padding:14px 24px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:var(--text);
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition: all .12s ease;
  text-decoration:none;
  display:inline-block;
  text-align:center;
}

.btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}

.btn:active{
  transform: scale(.98);
}

.btn-primary{
  background: linear-gradient(135deg, var(--blue), rgba(74,125,255,.85));
  border-color: rgba(74,125,255,.35);
}

.btn-primary:hover{
  background: linear-gradient(135deg, rgba(74,125,255,1.1), var(--blue));
}

.btn-success{
  background: linear-gradient(135deg, var(--green), rgba(61,220,151,.85));
  border-color: rgba(61,220,151,.35);
}

.btn-danger{
  background: linear-gradient(135deg, var(--red), rgba(255,92,92,.85));
  border-color: rgba(255,92,92,.35);
}

/* Tables */
.table-wrapper{
  overflow-x:auto;
  margin-top:14px;
}

table{
  width:100%;
  border-collapse:collapse;
}

th, td{
  padding:12px;
  text-align:left;
  border-bottom:1px solid var(--stroke);
}

th{
  font-weight:800;
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}

td{
  font-size:14px;
}

tr:hover{
  background:rgba(255,255,255,.02);
}

/* Status badges */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.status-success{
  background:rgba(61,220,151,.15);
  color:var(--green);
  border:1px solid rgba(61,220,151,.25);
}

.status-pending{
  background:rgba(255,199,0,.15);
  color:var(--yellow);
  border:1px solid rgba(255,199,0,.25);
}

.status-cancelled{
  background:rgba(255,92,92,.15);
  color:var(--red);
  border:1px solid rgba(255,92,92,.25);
}

/* Filters */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.filter-item{
  flex:1;
  min-width:150px;
}

/* Safe focus states */
button:focus-visible, a:focus-visible{
  outline: 2px solid rgba(74,125,255,.55);
  outline-offset: 2px;
}

/* Small devices tweaks */
@media (max-width: 360px){
  .balance-main{font-size:34px}
}

/* Hide scrollbar but keep functionality */
.modal-content::-webkit-scrollbar{
  width:6px;
}

.modal-content::-webkit-scrollbar-track{
  background:rgba(0,0,0,.2);
  border-radius:3px;
}

.modal-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);
  border-radius:3px;
}

.modal-content::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.25);
}
/* Light theme variables - Modern Premium Style */
:root[data-theme="light"]{
  --bg: #F4F7FF;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --card2: #F8FAFC;
  --stroke: rgba(0, 0, 0, 0.05);
  --text: #0F172A;
  --muted: #64748B;
  --muted2: #94A3B8;
  --blue: #3B82F6;
  --orange: #F59E0B;
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

body[data-theme="light"] {
  background: 
    radial-gradient(at 0% 0%, #E0E7FF 0%, transparent 40%),
    radial-gradient(at 100% 0%, #F5F3FF 0%, transparent 40%),
    radial-gradient(at 50% 50%, #EFF6FF 0%, transparent 100%),
    #F4F7FF;
  color: var(--text);
}

body[data-theme="light"]::after {
  background: linear-gradient(0deg, rgba(59, 130, 246, 0.05), transparent);
}

body[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

body[data-theme="light"] .hero {
  background: 
    radial-gradient(600px 250px at 10% 0%, rgba(59, 130, 246, 0.1), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #F8FAFC);
  border-color: #FFFFFF;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .crypto-item {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

body[data-theme="light"] .crypto-item:hover {
  border-color: var(--blue);
}

body[data-theme="light"] .crypto-name {
  color: #1E293B;
}

body[data-theme="light"] .crypto-balance {
  color: #0F172A;
}

body[data-theme="light"] .action-btn {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.04);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
}

body[data-theme="light"] .badge {
  background: #F1F5F9;
  border-color: rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .news {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.03);
}

body[data-theme="light"] .icon-btn {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.05);
  color: #1E293B;
}

/* Light theme select adjustments */
:root[data-theme="light"] select,
:root[data-theme="light"] .form-select{
  background-color: rgba(0,0,0,.03);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231A2030' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

:root[data-theme="light"] select option,
:root[data-theme="light"] .form-select option{
  background-color: var(--panel);
  color: var(--text);
}

/* Fixed gradient at bottom - only once */
body::after{
  content:"";
  position:fixed;
  bottom:0;left:0;right:0;
  height:200px;
  background: linear-gradient(0deg, rgba(74,125,255,.12), transparent);
  pointer-events:none;
  z-index:-1;
}

/* Select dropdown styling */
select, .form-select{
  appearance:none;
  -webkit-appearance:none;
  background-color: rgba(255,255,255,.03);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23EAF0FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  color: var(--text);
}

select option, .form-select option{
  background-color: var(--panel);
  color: var(--text);
}

/* Filter toggle button */
.filter-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(74,125,255,.08);
  color:var(--text);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:all .2s ease;
  margin-bottom:16px;
}

.filter-toggle:hover{
  background:rgba(74,125,255,.12);
  border-color:rgba(74,125,255,.3);
}

.filter-toggle svg{
  width:18px;
  height:18px;
  transition:transform .2s ease;
}

.filter-toggle.active svg{
  transform:rotate(180deg);
}

.filters{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease, opacity .3s ease;
  opacity:0;
}

.filters.active{
  max-height:500px;
  opacity:1;
  margin-bottom:20px;
}

/* Optimized font sizes */
.page-header h1{
  font-size:24px;
  font-weight:900;
  margin:0 0 8px;
}

.page-header p{
  font-size:14px;
  color:var(--muted);
  margin:0;
}

h2, .modal-title{
  font-size:18px;
}

/* Icon size optimization */
.icon-btn svg,
.tile .ico svg{
  width:20px;
  height:20px;
}

/* Theme and language switcher in profile modal */
.theme-language-switcher{
  display:flex;
  gap:12px;
  padding:16px 0;
  border-top:1px solid var(--stroke);
  margin-top:16px;
}

.switcher-group{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.switcher-label{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.switcher-btn{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(255,177,61,.15), rgba(255,106,61,.12));
  border-color:rgba(255,177,61,.35);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.switcher-btn:hover{
  background:linear-gradient(135deg, rgba(255,177,61,.20), rgba(255,106,61,.17));
  transform:translateY(-1px);
}

.switcher-btn:active{
  transform:translateY(0);
}

/* Contacts page - items on same line */
.contacts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:24px;
}

@media (max-width: 500px){
  .contacts-grid{
    grid-template-columns:1fr;
  }
}

/* Referral page optimizations */
.ref-code-group{
  display:flex;
  gap:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--stroke);
}

.ref-code-input{
  flex:1;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:none;
  color:var(--text);
  font-family:monospace;
  font-size:15px;
  font-weight:700;
}

.ref-copy-btn{
  padding:14px 20px;
  background:rgba(74,125,255,.12);
  border:none;
  border-left:1px solid var(--stroke);
  color:var(--blue);
  cursor:pointer;
  transition:background .2s ease;
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:14px;
}

.ref-copy-btn:hover{
  background:rgba(74,125,255,.18);
}

.ref-copy-btn svg{
  width:18px;
  height:18px;
}

.ref-stats-inline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Ticket messages full width */
.ticket-message{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border-radius:16px;
  margin-bottom:12px;
}

.ticket-message-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.ticket-message-author{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
}

.ticket-message-date{
  font-size:12px;
  color:var(--muted2);
}

.ticket-message-text{
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  width:100%;
}

.ticket-message.user{
  background:rgba(74,125,255,.08);
  border:1px solid rgba(74,125,255,.2);
  align-self:flex-end;
}

.ticket-message.support{
  background:rgba(61,220,151,.08);
  border:1px solid rgba(61,220,151,.2);
  align-self:flex-start;
}

/* Profile mobile button fix */
.profile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}

@media (max-width: 380px){
  .profile-actions{
    grid-template-columns:1fr;
  }
}

/* Fix mobile rate chips and button alignment */
@media (max-width: 500px){
  .rate{
    flex-direction:row;
    flex-wrap:wrap;
  }
  
  .rate .chip{
    flex:1 1 calc(50% - 5px);
    min-width:0;
    font-size:11px;
    padding:8px 10px;
  }
  
  .primary-grid{
    grid-template-columns:1fr;
  }
  
  .action .txt .t1{
    font-size:15px;
  }
  
  .action .txt .t2{
    font-size:11px;
    white-space:normal;
  }
}

/* Crypto History Page Styles */
.crypto-balance-section{
  margin-top: 14px;
  padding: 24px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  text-align: center;
}

.crypto-balance-icon.btc-large{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #F7931A, #E2761B);
  box-shadow: 0 8px 24px rgba(247,147,26,.35);
}

.crypto-symbol-large{
  font-size: 40px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}

.crypto-balance-header{
  margin-bottom: 20px;
}

.crypto-balance-title-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.crypto-balance-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.crypto-balance-main{
  font-size: 32px;
  font-weight: 850;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 4px;
}

.crypto-balance-sub{
  font-size: 14px;
  color: var(--muted2);
}

.crypto-actions-row{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.crypto-action-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  background: rgba(74,125,255,.12);
  border-radius: 16px;
  cursor: pointer;
  transition: all .2s ease;
  min-width: 80px;
  text-decoration: none;
  color: var(--text);
}

.crypto-action-btn:hover{
  background: rgba(74,125,255,.18);
  transform: translateY(-2px);
}

.crypto-action-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(74,125,255,.2);
  color: #FFFFFF;
}

.crypto-action-text{
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.crypto-history-section{
  margin-top: 24px;
}

.crypto-history-title{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0 0 16px;
  padding: 0 2px;
}

.crypto-history-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crypto-history-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  text-decoration: none;
  color: var(--text);
  transition: transform .12s ease, border-color .12s ease;
  cursor: pointer;
}

.crypto-history-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
}

.crypto-history-item-icon{
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.history-icon-circle{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
}

.history-icon-overlay{
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  bottom: -2px;
}

.history-icon-overlay.btc-overlay{
  right: -2px;
  background: linear-gradient(135deg, #F7931A, #E2761B);
  box-shadow: 0 2px 8px rgba(247,147,26,.4);
}

.history-icon-overlay.btc-overlay-right{
  right: -2px;
  background: linear-gradient(135deg, #F7931A, #E2761B);
  box-shadow: 0 2px 8px rgba(247,147,26,.4);
}

.history-icon-overlay.usdt-overlay{
  left: -2px;
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
  box-shadow: 0 2px 8px rgba(38,161,123,.4);
}

.crypto-history-item-info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crypto-history-item-type{
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.crypto-history-item-date{
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.2;
}

.crypto-history-item-amount{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

.crypto-history-item-amount-secondary{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

.crypto-history-item-status{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  flex: 0 0 auto;
}

.crypto-history-item-status .status-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: block;
}

/* Crypto Detail Page Styles */
.crypto-detail-header{
  margin-top: 14px;
  padding: 32px 20px;
  border-radius: var(--radius);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.crypto-detail-header.withdraw-header{
  background: linear-gradient(135deg, var(--green), rgba(61,220,151,.85));
}

.crypto-detail-header.exchange-header{
  background: linear-gradient(135deg, var(--violet), rgba(123,97,255,.85));
}

.crypto-detail-header.deposit-header{
  background: linear-gradient(135deg, var(--blue), rgba(74,125,255,.85));
}

.crypto-detail-icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.2);
  color: #FFFFFF;
}

.crypto-detail-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.crypto-detail-amount{
  margin-bottom: 8px;
}

.amount-main{
  font-size: 24px;
  font-weight: 850;
  color: #FFFFFF;
  display: block;
  margin-bottom: 4px;
}

.amount-crypto{
  font-size: 14px;
  color: rgba(255,255,255,.9);
}

.crypto-detail-approx{
  font-size: 16px;
  color: rgba(255,255,255,.85);
  margin-bottom: 24px;
}

.crypto-detail-progress{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.progress-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.progress-step-number{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  background: rgba(255,255,255,.3);
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,.5);
}

.progress-step.completed .progress-step-number{
  background: #FFFFFF;
  color: var(--green);
  border-color: #FFFFFF;
}

.progress-step-label{
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}

.progress-step-line{
  width: 40px;
  height: 2px;
  background: rgba(255,255,255,.3);
  flex: 0 0 auto;
}

.progress-step-line.completed{
  background: #FFFFFF;
}

.crypto-detail-repeat-btn{
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.15);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s ease;
}

.crypto-detail-repeat-btn:hover{
  background: rgba(255,255,255,.25);
  transform: translateY(-1px);
}

.crypto-detail-content{
  margin-top: 20px;
}

.crypto-detail-card{
  padding: 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.crypto-detail-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--stroke);
  gap: 12px;
}

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

.crypto-detail-label{
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  flex: 0 0 40%;
}

.crypto-detail-value{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  flex: 1;
  word-break: break-word;
}

.crypto-detail-value.status-value{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--green);
}

.crypto-detail-value.address-value,
.crypto-detail-value.txid-value{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.address-text,
.txid-text{
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

.icon-btn-small{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: all .12s ease;
}

.icon-btn-small:hover{
  background: rgba(255,255,255,.06);
}

.txid-actions{
  display: flex;
  gap: 4px;
}

.crypto-detail-banner{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(74,125,255,.08);
  border: 1px solid rgba(74,125,255,.2);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0;
}

@media (max-width: 500px){
  .crypto-balance-main{
    font-size: 28px;
  }
  
  .crypto-actions-row{
    gap: 12px;
  }
  
  .crypto-action-btn{
    min-width: 70px;
    padding: 10px 12px;
  }
  
  .crypto-action-icon{
    width: 40px;
    height: 40px;
  }
  
  .crypto-action-text{
    font-size: 11px;
  }
  
  .crypto-detail-header{
    padding: 24px 16px;
  }
  
  .amount-main{
    font-size: 20px;
  }
  
  .crypto-detail-label{
    font-size: 13px;
    flex: 0 0 45%;
  }
  
  .crypto-detail-value{
    font-size: 13px;
  }
}

/* Exchange Page Styles */
.exchange-section{
  margin-top: 14px;
}

.exchange-header{
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke);
}

.exchange-tab{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .2s ease;
}

.exchange-tab.active{
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.exchange-input-section{
  margin-bottom: 16px;
}

.exchange-input-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 2px;
}

.exchange-label{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.exchange-balance{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.exchange-max-btn{
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(74,125,255,.08);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
}

.exchange-max-btn:hover{
  background: rgba(74,125,255,.12);
}

.exchange-input-wrapper{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.exchange-amount-input{
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  outline: none;
  min-width: 0;
}

.exchange-amount-input::placeholder{
  color: var(--muted2);
  opacity: 0.5;
}

.exchange-currency-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all .12s ease;
  flex: 0 0 auto;
}

.exchange-currency-btn:hover{
  background: rgba(255,255,255,.06);
}

.exchange-currency-icon{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.exchange-currency-icon.btc{
  background: linear-gradient(135deg, #F7931A, #E2761B);
}

.exchange-currency-icon.eth{
  background: linear-gradient(135deg, #627EEA, #4F46E5);
}

.exchange-currency-icon.trx{
  background: linear-gradient(135deg, #FF0018, #DC143C);
}

.exchange-currency-icon.usdt{
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
}

.exchange-currency-icon.ton{
  background: linear-gradient(135deg, #0088CC, #0066AA);
}

.exchange-currency-icon.ltc{
  background: linear-gradient(135deg, #345D9D, #2A4A7A);
}

.exchange-currency-icon.sol{
  background: linear-gradient(135deg, #9945FF, #7B2CBF);
}

.crypto-symbol-small{
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
}

.exchange-currency-name{
  font-weight: 800;
}

.exchange-balance-hint{
  margin-top: 6px;
  padding: 0 2px;
  font-size: 13px;
  color: var(--muted2);
}

.exchange-swap-wrapper{
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

.exchange-swap-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.exchange-swap-btn:hover{
  transform: rotate(180deg);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}

.exchange-details{
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--stroke);
}

.exchange-detail-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.exchange-detail-row:first-child{
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 14px;
  margin-bottom: 12px;
}

.exchange-rate-hint{
  font-size: 12px;
  font-weight: 400;
  color: var(--muted2);
  line-height: 1.4;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--stroke);
}

.exchange-detail-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

.exchange-detail-value{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

.exchange-submit-btn{
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius2);
  border: none;
  background: linear-gradient(135deg, var(--blue), rgba(74,125,255,.85));
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 8px 24px rgba(74,125,255,.3);
}

.exchange-submit-btn:hover{
  background: linear-gradient(135deg, rgba(74,125,255,1.1), var(--blue));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(74,125,255,.4);
}

.exchange-submit-btn:active{
  transform: translateY(0);
}

/* Currency Modal */
.currency-modal{
  max-width: 100%;
  padding: 20px;
}

.currency-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.currency-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  cursor: pointer;
  transition: all .12s ease;
  width: 100%;
  text-align: left;
  color: var(--text);
}

.currency-item:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
}

.currency-item-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.currency-item-icon.btc{
  background: linear-gradient(135deg, #F7931A, #E2761B);
}

.currency-item-icon.eth{
  background: linear-gradient(135deg, #627EEA, #4F46E5);
}

.currency-item-icon.trx{
  background: linear-gradient(135deg, #FF0018, #DC143C);
}

.currency-item-icon.usdt{
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
}

.currency-item-icon.ton{
  background: linear-gradient(135deg, #0088CC, #0066AA);
}

.currency-item-icon.ltc{
  background: linear-gradient(135deg, #345D9D, #2A4A7A);
}

.currency-item-icon.sol{
  background: linear-gradient(135deg, #9945FF, #7B2CBF);
}

.currency-item-info{
  flex: 1;
  min-width: 0;
}

.currency-item-name{
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.currency-item-code{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

.currency-item-balance{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted2);
  flex: 0 0 auto;
}

@media (max-width: 500px){
  .exchange-amount-input{
    font-size: 20px;
  }
  
  .exchange-currency-btn{
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .exchange-currency-icon{
    width: 28px;
    height: 28px;
  }
  
  .exchange-detail-label{
    font-size: 11px;
  }
  
  .exchange-detail-value{
    font-size: 13px;
  }
}

/* Deposit Network Page Styles */
.deposit-network-header{
  margin-top: 14px;
  padding: 20px 16px;
  text-align: center;
}

.deposit-network-title{
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.2;
}

.deposit-network-subtitle{
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}

.deposit-networks-section{
  margin-top: 20px;
}

.deposit-networks-list{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.deposit-network-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .12s ease, border-color .12s ease;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 10px;
}

.deposit-network-item:hover:not(.coming-soon){
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
}

.deposit-network-item.coming-soon{
  opacity: 0.6;
  cursor: not-allowed;
}

.deposit-network-icon{
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.network-icon-base{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFFFFF;
}

.network-icon-base.btc{
  background: linear-gradient(135deg, #F7931A, #E2761B);
  box-shadow: 0 4px 12px rgba(247,147,26,.25);
}

.network-icon-base.usdt{
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
  box-shadow: 0 4px 12px rgba(38,161,123,.25);
}

.network-icon-overlay{
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #FFFFFF;
  bottom: -2px;
  right: -2px;
  border: 2px solid var(--panel);
}

.network-icon-overlay.bep20{
  background: linear-gradient(135deg, #F3BA2F, #F0B90B);
  box-shadow: 0 2px 8px rgba(243,186,47,.4);
}

.network-icon-overlay.erc20{
  background: linear-gradient(135deg, #627EEA, #4F46E5);
  box-shadow: 0 2px 8px rgba(98,126,234,.4);
}

.network-icon-overlay.trc20{
  background: linear-gradient(135deg, #FF0018, #DC143C);
  box-shadow: 0 2px 8px rgba(255,0,24,.4);
}

.network-icon-overlay.arbitrum{
  background: linear-gradient(135deg, #28A0F0, #1B6BCC);
  box-shadow: 0 2px 8px rgba(40,160,240,.4);
}

.network-icon-overlay.optimism{
  background: linear-gradient(135deg, #FF0420, #FF6B35);
  box-shadow: 0 2px 8px rgba(255,4,32,.4);
}

.network-icon-overlay.solana{
  background: linear-gradient(135deg, #9945FF, #7B2CBF);
  box-shadow: 0 2px 8px rgba(153,69,255,.4);
}

.network-icon-overlay.toncoin{
  background: linear-gradient(135deg, #0088CC, #0066AA);
  box-shadow: 0 2px 8px rgba(0,136,204,.4);
}

.deposit-network-info{
  flex: 1;
  min-width: 0;
}

.deposit-network-name{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.deposit-network-fee{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.deposit-network-arrow{
  font-size: 20px;
  color: var(--muted);
  opacity: 0.7;
  flex: 0 0 auto;
}

.deposit-networks-divider{
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--stroke) 0px,
    var(--stroke) 8px,
    transparent 8px,
    transparent 16px
  );
  margin: 20px 0;
}

.deposit-networks-coming-soon-header{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 0 2px;
}

@media (max-width: 500px){
  .deposit-network-title{
    font-size: 20px;
  }
  
  .deposit-network-item{
    padding: 14px;
  }
  
  .deposit-network-icon{
    width: 48px;
    height: 48px;
  }
  
  .network-icon-base{
    width: 48px;
    height: 48px;
  }
  
  .network-icon-overlay{
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  
  .deposit-network-name{
    font-size: 15px;
  }
  
  .deposit-network-fee{
    font-size: 12px;
  }
}

/* Deposit Address Page Styles */
.deposit-address-section{
  margin-top: 14px;
}

.deposit-address-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0 2px;
}

.deposit-address-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.deposit-address-icon.btc{
  background: linear-gradient(135deg, #F7931A, #E2761B);
  box-shadow: 0 4px 12px rgba(247,147,26,.25);
}

.deposit-address-icon.usdt{
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
  box-shadow: 0 4px 12px rgba(38,161,123,.25);
}

.deposit-address-title{
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}

.deposit-qr-wrapper{
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.deposit-qr-code{
  width: 280px;
  height: 280px;
  padding: 20px;
  border-radius: var(--radius2);
  background: #FFFFFF;
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
}

.deposit-qr-code canvas{
  display: block;
  max-width: 100%;
  height: auto;
}

.deposit-warning{
  margin-bottom: 24px;
  padding: 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--stroke);
}

.deposit-warning-text{
  font-size: 13px;
  font-weight: 400;
  color: var(--muted2);
  line-height: 1.5;
  margin: 0;
}

.deposit-warning-crypto{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--text);
}

.warning-crypto-icon{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  background: linear-gradient(135deg, #F7931A, #E2761B);
  flex: 0 0 auto;
}

.deposit-address-info{
  margin-bottom: 24px;
  padding: 20px;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.deposit-address-label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.deposit-address-date{
  color: var(--muted2);
}

.deposit-address-value-wrapper{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.05);
  border: 1px solid var(--stroke);
  margin-bottom: 12px;
}

.deposit-address-value{
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  line-height: 1.4;
}

.deposit-address-copy-icon{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: all .12s ease;
}

.deposit-address-copy-icon:hover{
  background: rgba(255,255,255,.06);
}

.deposit-default-btn{
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--green), rgba(61,220,151,.85));
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
}

.deposit-default-btn:hover{
  background: linear-gradient(135deg, rgba(61,220,151,1.1), var(--green));
  transform: translateY(-1px);
}

.deposit-address-actions{
  display: flex;
  gap: 12px;
}

.deposit-action-btn{
  flex: 1;
  padding: 16px;
  border-radius: var(--radius2);
  border: none;
  background: linear-gradient(135deg, var(--blue), rgba(74,125,255,.85));
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s ease;
  box-shadow: 0 8px 24px rgba(74,125,255,.3);
}

.deposit-action-btn:hover{
  background: linear-gradient(135deg, rgba(74,125,255,1.1), var(--blue));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(74,125,255,.4);
}

.deposit-action-btn:active{
  transform: translateY(0);
}

@media (max-width: 500px){
  .deposit-address-title{
    font-size: 18px;
  }
  
  .deposit-qr-code{
    width: 240px;
    height: 240px;
    padding: 16px;
  }
  
  .deposit-address-value{
    font-size: 12px;
  }
  
  .deposit-action-btn{
    padding: 14px;
    font-size: 14px;
  }
}

/* Deposit Currency Selection Page Styles */
.deposit-currency-header{
  margin-top: 14px;
  padding: 20px 16px;
  text-align: center;
}

.deposit-currency-title{
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.2;
}

.deposit-currency-subtitle{
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}

.deposit-currencies-section{
  margin-top: 20px;
}

.deposit-currencies-list{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.deposit-currency-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .12s ease, border-color .12s ease;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 10px;
}

.deposit-currency-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
}

.deposit-currency-icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.deposit-currency-icon.btc{
  background: linear-gradient(135deg, #F7931A, #E2761B);
  box-shadow: 0 4px 12px rgba(247,147,26,.25);
}

.deposit-currency-icon.usdt{
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
  box-shadow: 0 4px 12px rgba(38,161,123,.25);
}

.deposit-currency-info{
  flex: 1;
  min-width: 0;
}

.deposit-currency-name{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.deposit-currency-code{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.deposit-currency-arrow{
  font-size: 20px;
  color: var(--muted);
  opacity: 0.7;
  flex: 0 0 auto;
}

@media (max-width: 500px){
  .deposit-currency-title{
    font-size: 20px;
  }
  
  .deposit-currency-item{
    padding: 14px;
  }
  
  .deposit-currency-icon{
    width: 48px;
    height: 48px;
  }
  
  .deposit-currency-name{
    font-size: 15px;
  }
  
  .deposit-currency-code{
    font-size: 12px;
  }
}

/* Withdraw Address Page Styles */
.withdraw-address-section{
  margin-top: 14px;
}

.withdraw-address-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0 2px;
}

.withdraw-address-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.withdraw-address-icon.btc{
  background: linear-gradient(135deg, #F7931A, #E2761B);
  box-shadow: 0 4px 12px rgba(247,147,26,.25);
}

.withdraw-address-icon.usdt{
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
  box-shadow: 0 4px 12px rgba(38,161,123,.25);
}

.withdraw-address-title{
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}

.withdraw-address-input-wrapper{
  margin-bottom: 24px;
}

.withdraw-address-input{
  width: 100%;
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-family: monospace;
  outline: none;
  transition: border-color .12s ease;
}

.withdraw-address-input:focus{
  border-color: rgba(255,255,255,.15);
}

.withdraw-address-input::placeholder{
  color: var(--muted2);
}

.withdraw-address-history{
  margin-bottom: 24px;
}

.withdraw-address-history-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 0 2px;
}

.withdraw-address-history-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.withdraw-address-history-item{
  padding: 12px 14px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  cursor: pointer;
  transition: all .12s ease;
}

.withdraw-address-history-item:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.15);
}

.withdraw-address-history-address{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: monospace;
  margin-bottom: 4px;
  word-break: break-all;
}

.withdraw-address-history-date{
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.withdraw-address-history-empty{
  padding: 20px;
  text-align: center;
  color: var(--muted2);
  font-size: 14px;
}

.withdraw-address-next-btn{
  width: 100%;
  padding: 16px;
  border-radius: var(--radius2);
  border: none;
  background: linear-gradient(135deg, var(--blue), rgba(74,125,255,.85));
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 8px 24px rgba(74,125,255,.3);
}

.withdraw-address-next-btn:hover:not(:disabled){
  background: linear-gradient(135deg, rgba(74,125,255,1.1), var(--blue));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(74,125,255,.4);
}

.withdraw-address-next-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* Withdraw Amount Page Styles */
.withdraw-amount-section{
  margin-top: 14px;
}

.withdraw-amount-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 0 2px;
}

.withdraw-amount-label{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.withdraw-balance-info{
  display: flex;
  align-items: center;
  gap: 8px;
}

.withdraw-balance-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.withdraw-all-btn,
.withdraw-clear-btn{
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(74,125,255,.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
}

.withdraw-all-btn:hover,
.withdraw-clear-btn:hover{
  background: rgba(74,125,255,.12);
}

.withdraw-amount-input-wrapper{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.withdraw-amount-input{
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 32px;
  font-weight: 800;
  outline: none;
  min-width: 0;
}

.withdraw-amount-input::placeholder{
  color: var(--muted2);
  opacity: 0.5;
}

.withdraw-amount-currency{
  font-size: 24px;
  font-weight: 800;
  color: var(--muted);
}

.withdraw-amount-rub{
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 20px;
  padding: 0 2px;
}

.withdraw-quick-buttons{
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.withdraw-quick-btn{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(74,125,255,.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
}

.withdraw-quick-btn:hover{
  background: rgba(74,125,255,.12);
}

.withdraw-info-section{
  margin-bottom: 24px;
  padding: 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--stroke);
}

.withdraw-info-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--stroke);
}

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

.withdraw-info-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.withdraw-info-value{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.withdraw-info-icon{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.withdraw-info-icon.btc{
  background: linear-gradient(135deg, #F7931A, #E2761B);
}

.withdraw-info-icon.usdt{
  background: linear-gradient(135deg, #26A17B, #1E8E6F);
}

.withdraw-info-text{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: monospace;
  word-break: break-all;
  text-align: right;
}

.withdraw-info-icon-btn{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.withdraw-summary{
  margin-bottom: 24px;
  padding: 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--stroke);
}

.withdraw-summary-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.withdraw-summary-row:first-child{
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.withdraw-summary-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.withdraw-summary-value{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.withdraw-submit-btn{
  width: 100%;
  padding: 16px;
  border-radius: var(--radius2);
  border: none;
  background: linear-gradient(135deg, var(--blue), rgba(74,125,255,.85));
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 8px 24px rgba(74,125,255,.3);
}

.withdraw-submit-btn:hover:not(:disabled){
  background: linear-gradient(135deg, rgba(74,125,255,1.1), var(--blue));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(74,125,255,.4);
}

.withdraw-submit-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 500px){
  .withdraw-address-title{
    font-size: 18px;
  }
  
  .withdraw-amount-input{
    font-size: 28px;
  }
  
  .withdraw-amount-currency{
    font-size: 20px;
  }
  
  .withdraw-quick-btn{
    padding: 8px 10px;
    font-size: 11px;
  }
  
  .withdraw-info-text{
    font-size: 12px;
  }
}

/* Bank Cards Styles */
.bank-cards-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bank-card{
  position: relative;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}

.bank-card::before{
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
  pointer-events: none;
}

.bank-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,.4);
}

.bank-card-visa{
  background: linear-gradient(135deg, #1434CB 0%, #1E3A8A 100%);
}

.bank-card-mastercard{
  background: linear-gradient(135deg, #EB001B 0%, #F79E1B 100%);
}

.bank-card-mir{
  background: linear-gradient(135deg, #0071BC 0%, #005A9E 100%);
}

.bank-card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.bank-card-logo{
  display: flex;
  align-items: center;
}

.bank-card-logo svg{
  filter: brightness(0) invert(1);
}

.bank-card-type{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.9;
}

.bank-card-number{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-bottom: 24px;
  font-family: 'Courier New', monospace;
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.bank-card-footer{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

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

.bank-card-label{
  font-size: 11px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bank-card-value{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}

.bank-card-balance{
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bank-card-balance-label{
  font-size: 12px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bank-card-balance-value{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

@media (max-width: 480px){
  .bank-card{
    min-height: 200px;
    padding: 20px;
  }
  
  .bank-card-number{
    font-size: 20px;
    letter-spacing: 2px;
  }
  
  .bank-card-balance-value{
    font-size: 20px;
  }
}

/* Bank Card Info Block */
.bank-card-info-card{
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(74,125,255,.12), rgba(102,126,234,.08));
  border: 1px solid rgba(74,125,255,.2);
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.bank-card-info-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.bank-card-info-icon{
  font-size: 32px;
  line-height: 1;
}

.bank-card-info-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  flex: 1;
  line-height: 1.3;
}

.bank-card-info-text{
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.currency-badge{
  display: inline-block;
  padding: 2px 6px;
  margin: 0 2px;
  border-radius: 6px;
  background: rgba(74,125,255,.15);
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(74,125,255,.25);
}

@media (max-width: 480px){
  .bank-card-info-title{
    font-size: 16px;
  }
  
  .bank-card-info-text{
    font-size: 13px;
  }
  
  .bank-card-info-icon{
    font-size: 28px;
  }
}

/* AML Policy Notice */
.aml-policy-notice{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,177,61,.12), rgba(255,177,61,.08));
  border: 1px solid rgba(255,177,61,.2);
  text-decoration: none;
  color: var(--text);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.aml-policy-notice:hover{
  transform: translateY(-2px);
  border-color: rgba(255,177,61,.3);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.aml-policy-icon{
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.aml-policy-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.aml-policy-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.aml-policy-arrow{
  font-size: 20px;
  color: var(--muted);
  margin-left: 8px;
  flex-shrink: 0;
}

@media (max-width: 480px){
  .aml-policy-notice{
    padding: 14px 16px;
  }
  
  .aml-policy-icon{
    font-size: 24px;
  }
  
  .aml-policy-title{
    font-size: 14px;
  }
}

/* ========================================================================== */
/* Light Minimal 2026 Override                                                 */
/* ========================================================================== */
:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --card: #ffffff;
  --card2: #f2f4f7;
  --stroke: rgba(15, 23, 42, 0.08);
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.6);
  --muted2: rgba(15, 23, 42, 0.4);

  --blue: #2563eb;
  --green: #10b981;
  --red: #ef4444;
  --violet: #7c3aed;
  --orange: #f59e0b;
  --yellow: #fcd34d;

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --radius: 16px;
  --radius2: 12px;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Inter",
    "Segoe UI", Roboto, Arial, sans-serif;
  animation: none;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.wrap {
  padding-bottom: 120px;
}

/* Header */
.header {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: #f3f5f9;
  color: var(--text);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  clip-path: none;
}

.icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.25);
  background: #eef2ff;
  clip-path: none;
  box-shadow: none;
}

/* Hero */
.hero {
  border: 1px solid var(--stroke);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: var(--shadow);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 60%);
  animation: floatSoft 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hero-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.eye {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: #f3f5f9;
  color: var(--text);
  transition: transform 180ms ease, box-shadow 180ms ease;
  clip-path: none;
}

.eye:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}

.balance-main {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "SF Mono",
    "Roboto Mono", monospace;
}

.balance-sub {
  color: var(--muted);
}

.rate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.chip {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: #f8f9fd;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.chip b {
  font-weight: 700;
}

/* Actions */
.actions-row {
  gap: 12px;
}

.action-btn {
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--shadow);
  padding: 16px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  clip-path: none;
  min-width: 0;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
}

.action-btn .badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5ff;
  border: 1px solid rgba(37, 99, 235, 0.2);
  box-shadow: none;
  clip-path: none;
}

.action-btn .btn-text,
.action-btn .btn-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-btn .btn-content,
.crypto-info {
  min-width: 0;
}

/* Lists */
.crypto-item,
.news,
.menu-item {
  min-width: 0;
  overflow: hidden;
}

.crypto-item {
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.crypto-name,
.crypto-balance,
.crypto-usd,
.news .title,
.news .sub {
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.news .title,
.news .sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Modal */
.modal {
  background: rgba(15, 23, 42, 0.35);
}

.modal-content {
  background: #ffffff;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* Buttons and inputs */
.btn,
.page-btn,
.switcher-btn {
  border: 1px solid var(--stroke);
  background: #ffffff;
  color: var(--text);
  border-radius: 12px;
  box-shadow: none;
}

.btn:hover,
.page-btn:hover,
.switcher-btn:hover {
  background: #f3f5f9;
}

input,
select,
textarea,
.input,
.select {
  border: 1px solid var(--stroke);
  background: #ffffff;
  color: var(--text);
  border-radius: 12px;
}

/* Prevent icon/text overflow in all cards */
.action-btn,
.crypto-item,
.news,
.menu-item,
.chip {
  min-width: 0;
}

.action-btn svg,
.menu-item svg,
.crypto-item svg {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .rate {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 18px;
  }
  .balance-main {
    font-size: 30px;
  }
}