/* ZYNN V28 - system fix: search rounded, tab icon side, balance sync, button outline */
:root{
  --zv28-dark:#06111e;
  --zv28-dark2:#081425;
  --zv28-cyan:#59efff;
  --zv28-blue:#74b8ff;
  --zv28-violet:#a36fff;
  --zv28-text:#eaf7ff;
}

/* search should not look boxy on desktop */
.search-wrapper,.ds-search-wrap{
  width:min(100% - 28px, 1120px)!important;
  margin:18px auto 22px!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:26px!important;
  padding:0!important;
  box-shadow:0 0 0 1px rgba(89,239,255,.16), 0 0 24px rgba(28,180,255,.08)!important;
  background:linear-gradient(180deg, rgba(10,20,38,.84), rgba(5,11,24,.92))!important;
}
.search-wrapper::before,.ds-search-wrap::before{
  content:'\f002'!important;
  font-family:'Font Awesome 6 Free'!important;
  font-weight:900!important;
  position:absolute!important;
  left:24px!important; top:50%!important; transform:translateY(-50%)!important;
  color:var(--zv28-cyan)!important; z-index:2!important; font-size:18px!important;
  text-shadow:0 0 14px rgba(89,239,255,.55)!important;
}
.search-wrapper::after,.ds-search-wrap::after{
  content:'\f1de'!important;
  font-family:'Font Awesome 6 Free'!important;
  font-weight:900!important;
  position:absolute!important;
  right:24px!important; top:50%!important; transform:translateY(-50%)!important;
  color:var(--zv28-cyan)!important; z-index:2!important; font-size:17px!important;
  text-shadow:0 0 14px rgba(89,239,255,.45)!important; opacity:.95!important;
}
#searchInput,.ds-search{
  width:100%!important; height:64px!important; border:none!important; outline:none!important;
  border-radius:26px!important; background:transparent!important; box-shadow:none!important;
  color:var(--zv28-text)!important; font-size:16px!important; font-weight:800!important;
  padding:0 58px!important;
}
#searchInput::placeholder,.ds-search::placeholder{color:rgba(226,238,255,.46)!important;}
#searchInput:focus,.ds-search:focus{
  box-shadow:inset 0 0 0 1px rgba(89,239,255,.22), 0 0 0 3px rgba(89,239,255,.08)!important;
}

/* tab buttons: icon must be beside text, not on edge */
.tab-switch,.ds-tabs{
  display:grid!important; grid-template-columns:1fr 1fr!important; gap:16px!important;
  width:min(100% - 28px,1120px)!important; margin:24px auto 26px!important;
  padding:0!important; background:transparent!important; border:none!important; box-shadow:none!important;
}
.tab-switch .tab-btn,.ds-tabs .ds-tab{
  position:relative!important; isolation:isolate!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:12px!important;
  min-height:60px!important; height:60px!important; padding:0 20px!important;
  border:none!important; border-radius:22px!important; background:transparent!important; overflow:visible!important;
  color:rgba(232,244,255,.76)!important; font-size:17px!important; font-weight:850!important; text-decoration:none!important;
  white-space:nowrap!important;
}
.tab-switch .tab-btn::before,.ds-tabs .ds-tab::before{
  content:''!important; position:absolute!important; inset:2px!important; border-radius:20px!important;
  background:linear-gradient(180deg, rgba(7,17,32,.96), rgba(4,10,22,.96))!important; z-index:-1!important;
}
.tab-switch .tab-btn::after,.ds-tabs .ds-tab::after{
  content:''!important; position:absolute!important; inset:0!important; border-radius:22px!important; padding:2px!important;
  background:linear-gradient(90deg, rgba(91,237,255,.82), rgba(101,188,255,.78), rgba(164,118,255,.80), rgba(206,91,255,.76))!important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.34!important; z-index:-1!important;
}
.tab-switch .tab-btn.active,.ds-tabs .ds-tab.active{color:#efffff!important; text-shadow:0 0 10px rgba(89,239,255,.10)!important;}
.tab-switch .tab-btn.active::after,.ds-tabs .ds-tab.active::after{opacity:1!important;}
.tab-switch .tab-btn i,.ds-tabs .ds-tab i{font-size:16px!important; color:var(--zv28-cyan)!important; margin:0!important; flex:0 0 auto!important;}
.tab-switch .tab-btn span,.ds-tabs .ds-tab span{display:inline-block!important; line-height:1!important;}
.tab-switch .tab-btn:not(.active) i,.ds-tabs .ds-tab:not(.active) i{color:rgba(173,231,255,.78)!important;}

/* price buttons dark background with neon outline only */
.section.category-section .grid .card{overflow:hidden!important; padding-bottom:74px!important;}
.section.category-section .grid .card[data-price]::after{
  content:attr(data-price)!important;
  position:absolute!important; left:16px!important; right:16px!important; bottom:16px!important;
  height:46px!important; border-radius:16px!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  color:#ebf8ff!important; font-size:14px!important; font-weight:900!important;
  background:linear-gradient(180deg, rgba(8,18,34,.98), rgba(5,11,24,.98)) padding-box,
             linear-gradient(90deg, rgba(91,237,255,.92), rgba(101,188,255,.92), rgba(164,118,255,.92), rgba(206,91,255,.90)) border-box!important;
  border:2px solid transparent!important; box-shadow:0 0 12px rgba(89,239,255,.08),0 0 18px rgba(163,111,255,.08)!important;
}
.section.category-section .grid .card[data-badge]:nth-child(4n+3)::after{
  background:linear-gradient(180deg, rgba(8,18,34,.98), rgba(5,11,24,.98)) padding-box,
             linear-gradient(90deg, rgba(22,245,178,.95), rgba(80,228,255,.92), rgba(112,132,255,.92)) border-box!important;
}
.section.category-section .grid .card[data-badge]:nth-child(4n+4)::after{
  background:linear-gradient(180deg, rgba(8,18,34,.98), rgba(5,11,24,.98)) padding-box,
             linear-gradient(90deg, rgba(255,61,143,.95), rgba(255,104,124,.92), rgba(176,105,255,.92)) border-box!important;
}

/* cyber dashboard buttons same system/cleaner */
.cyber-actions{display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important;}
.cyber-actions .wallet-btn-index, .cyber-actions a, .cyber-actions button{
  position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:center!important;
  min-height:48px!important; height:48px!important; border-radius:16px!important; cursor:pointer!important;
  background:linear-gradient(180deg, rgba(8,18,34,.98), rgba(5,11,24,.98)) padding-box,
             linear-gradient(90deg, rgba(91,237,255,.88), rgba(101,188,255,.88), rgba(164,118,255,.88), rgba(206,91,255,.88)) border-box!important;
  border:2px solid transparent!important; color:#efffff!important; text-decoration:none!important; font-weight:800!important;
  box-shadow:0 0 12px rgba(89,239,255,.08),0 0 18px rgba(163,111,255,.08)!important;
}

/* mobile */
@media (max-width: 720px){
  .search-wrapper,.ds-search-wrap{width:calc(100% - 24px)!important; border-radius:22px!important; margin:14px auto 18px!important;}
  #searchInput,.ds-search{height:58px!important; border-radius:22px!important; font-size:14px!important; padding:0 52px!important;}
  .search-wrapper::before,.ds-search-wrap::before{left:20px!important; font-size:16px!important;}
  .search-wrapper::after,.ds-search-wrap::after{right:20px!important; font-size:16px!important;}
  .tab-switch,.ds-tabs{width:calc(100% - 24px)!important; gap:12px!important; margin:18px auto 20px!important;}
  .tab-switch .tab-btn,.ds-tabs .ds-tab{height:54px!important; min-height:54px!important; border-radius:18px!important; font-size:14px!important; gap:8px!important; padding:0 12px!important;}
  .tab-switch .tab-btn::before,.ds-tabs .ds-tab::before{border-radius:16px!important;}
  .tab-switch .tab-btn::after,.ds-tabs .ds-tab::after{border-radius:18px!important;}
  .section.category-section .grid .card{padding-bottom:60px!important;}
  .section.category-section .grid .card[data-price]::after{left:10px!important; right:10px!important; bottom:10px!important; height:40px!important; font-size:12px!important; border-radius:14px!important;}
}