/* =============================================================
   KONECTA CRYPTOS - PROFESSIONAL POLISH V9
   ============================================================= */

:root{
  --kc-blue:#2b8cff;
  --kc-blue-soft:#69adff;
  --kc-blue-deep:#176fd1;
  --kc-bg:#07111f;
  --kc-card:#0b1b2d;
  --kc-card2:#0d2137;
  --kc-line:rgba(112,169,229,.16);
  --kc-line-hover:rgba(80,158,255,.38);
  --kc-text:#eef6ff;
  --kc-muted:#7992ad;
}

/* ---------- GLOBAL ---------- */

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(
      circle at 50% -150px,
      rgba(43,140,255,.13),
      transparent 500px
    ),
    var(--kc-bg);
}

body,
button,
input,
select{
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:1600px;
  margin:0 auto;
}


/* ---------- HEADER ---------- */

.topbar{
  background:
    rgba(5,17,31,.94) !important;

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(86,150,218,.16);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.10);
}

.brand strong{
  letter-spacing:-.35px;
}

.brand span{
  letter-spacing:1.7px;
  opacity:.72;
}

.desktop-nav{
  gap:4px;
}

.desktop-nav a{
  position:relative;
  border-radius:11px;
  padding:11px 15px !important;
  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.desktop-nav a:hover{
  background:
    rgba(43,140,255,.075);
  color:#fff;
}

.desktop-nav a.active{
  background:
    rgba(43,140,255,.12);
}

.desktop-nav a.active:after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-7px;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #2b8cff,
      #69adff,
      transparent
    );
}


/* ---------- SEARCH ---------- */

.global-search-button{
  background:
    linear-gradient(
      180deg,
      rgba(17,38,63,.85),
      rgba(9,27,46,.85)
    ) !important;

  border:
    1px solid
    rgba(80,151,223,.18) !important;

  transition:.15s ease;
}

.global-search-button:hover{
  border-color:
    rgba(43,140,255,.45) !important;

  box-shadow:
    0 0 0 3px
    rgba(43,140,255,.05);
}


/* ---------- PROFILE ---------- */

.avatar{
  background:
    linear-gradient(
      145deg,
      #2b8cff,
      #176fd1
    ) !important;

  box-shadow:
    0 5px 16px
    rgba(43,140,255,.25);
}

.profile-btn{
  transition:.15s ease;
}

.profile-btn:hover{
  border-color:
    rgba(43,140,255,.38);
}


/* ---------- CARDS ---------- */

.card,
.market-card,
.chart-card,
.assets-card,
.activity-card{
  border:
    1px solid
    var(--kc-line) !important;

  background:
    linear-gradient(
      180deg,
      rgba(12,31,52,.98),
      rgba(8,25,43,.98)
    ) !important;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.09);

  transition:
    border-color .17s ease,
    transform .17s ease,
    box-shadow .17s ease;
}

.card:hover{
  border-color:
    rgba(71,151,239,.26) !important;
}

.section-title h2,
.panel-title h2{
  letter-spacing:-.25px;
}


/* ---------- QUICK ACTIONS ---------- */

.quick-actions{
  display:grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(100px,1fr)
    );

  gap:12px !important;
}

.quick-action,
.kc-quick-action{
  min-height:98px;

  position:relative;

  display:flex !important;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:9px;

  overflow:hidden;

  border:
    1px solid
    rgba(80,151,223,.18) !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      145deg,
      rgba(14,39,66,.95),
      rgba(7,26,45,.95)
    ) !important;

  color:
    var(--kc-text) !important;

  text-decoration:none !important;

  cursor:pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.quick-action:before,
.kc-quick-action:before{
  content:"";

  position:absolute;

  width:90px;
  height:90px;

  top:-55px;
  right:-50px;

  border-radius:50%;

  background:
    rgba(43,140,255,.10);

  pointer-events:none;
}

.quick-action:hover,
.kc-quick-action:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(43,140,255,.50) !important;

  background:
    linear-gradient(
      145deg,
      rgba(19,48,79,.98),
      rgba(9,32,55,.98)
    ) !important;
}

.quick-action .icon-circle,
.kc-quick-icon{
  width:44px !important;
  height:44px !important;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(43,140,255,.18),
      rgba(23,111,209,.10)
    ) !important;

  color:
    var(--kc-blue-soft);

  box-shadow:
    inset 0 0 0 1px
    rgba(89,167,255,.08);
}

.quick-action .icon-circle img,
.kc-quick-icon img{
  width:21px !important;
  height:21px !important;
}

.quick-action > span:last-child,
.kc-quick-action-label{
  font-size:10px;
  font-weight:750;
}


/* ---------- ASSETS ---------- */

.asset-row{
  transition:
    background .15s ease;
}

.asset-row:hover{
  background:
    rgba(43,140,255,.035);
}

.kc-coin-img{
  box-shadow:
    0 5px 14px
    rgba(0,0,0,.20);
}

.asset-row strong{
  letter-spacing:-.1px;
}


/* ---------- MARKET ---------- */

.market-row{
  transition:
    background .13s ease;
}

.market-row:hover{
  background:
    rgba(43,140,255,.035);
}


/* ---------- CHART ---------- */

.chart-card{
  overflow:hidden;
}

.chart-card canvas{
  filter:
    drop-shadow(
      0 9px 12px
      rgba(43,140,255,.07)
    );
}


/* ---------- BUTTONS ---------- */

.btn,
.btn-primary{
  border-radius:
    11px !important;

  font-weight:750;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.btn:hover,
.btn-primary:hover{
  transform:
    translateY(-1px);
}

.btn-primary{
  background:
    linear-gradient(
      135deg,
      #2b8cff,
      #176fd1
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(43,140,255,.18);
}


/* ---------- FAB ---------- */

.kc-fab{
  width:56px !important;
  height:56px !important;

  border-radius:
    17px !important;

  background:
    linear-gradient(
      145deg,
      #2b8cff,
      #176fd1
    ) !important;

  box-shadow:
    0 12px 30px
    rgba(43,140,255,.32) !important;

  transition:
    transform .18s ease;
}

.kc-fab:hover{
  transform:
    translateY(-3px)
    scale(1.03);
}


/* ---------- CURRENCY ---------- */

.kc-currency-switch{
  background:
    rgba(8,27,47,.85) !important;

  border-color:
    rgba(80,151,223,.16) !important;
}

.kc-currency-switch button.active{
  background:
    linear-gradient(
      145deg,
      rgba(43,140,255,.28),
      rgba(23,111,209,.22)
    ) !important;

  color:#fff !important;
}


/* ---------- TABLES ---------- */

.app-table th{
  color:
    #7189a4 !important;

  letter-spacing:
    .7px;
}

.app-table tbody tr{
  transition:
    background .13s ease;
}

.app-table tbody tr:hover{
  background:
    rgba(43,140,255,.035);
}


/* ---------- SCROLLBAR ---------- */

*{
  scrollbar-width:thin;
  scrollbar-color:
    #214c76
    transparent;
}

*::-webkit-scrollbar{
  width:8px;
  height:8px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

*::-webkit-scrollbar-thumb{
  background:
    #214c76;

  border-radius:20px;
}

*::-webkit-scrollbar-thumb:hover{
  background:
    #2b6da9;
}


/* ---------- MOBILE ---------- */

@media(max-width:1050px){

  .quick-actions{
    grid-template-columns:
      repeat(3,minmax(100px,1fr));
  }

}

@media(max-width:720px){

  .page{
    padding:
      12px 11px 86px !important;
  }

  .quick-actions{
    grid-template-columns:
      repeat(5,minmax(0,1fr));

    gap:4px !important;
  }

  .quick-action,
  .kc-quick-action{
    min-height:72px;

    padding:5px;

    border:0 !important;

    background:
      transparent !important;
  }

  .quick-action:hover,
  .kc-quick-action:hover{
    transform:none;

    background:
      transparent !important;
  }

  .quick-action .icon-circle,
  .kc-quick-icon{
    width:42px !important;
    height:42px !important;
  }

  .quick-action > span:last-child,
  .kc-quick-action-label{
    font-size:8px;
  }

  .mobile-nav{
    background:
      rgba(5,18,32,.96) !important;

    backdrop-filter:
      blur(16px);

    border-top:
      1px solid
      rgba(89,154,222,.13) !important;

    box-shadow:
      0 -10px 30px
      rgba(0,0,0,.16);
  }

  .mobile-nav a{
    position:relative;
  }

  .mobile-nav a.active{
    color:
      #69adff !important;
  }

  .mobile-nav a.active:after{
    content:"";

    position:absolute;

    top:-1px;
    left:31%;
    right:31%;

    height:2px;

    border-radius:
      999px;

    background:
      #2b8cff;
  }

}