:root{
  --bg:#07111f;
  --bg-soft:#0a1626;
  --panel:#0d1b2e;
  --panel-2:#10233a;
  --line:#193552;
  --text:#ecf3fb;
  --muted:#8fa5bd;
  --blue:#2b8cff;
  --blue-2:#176fd1;
  --blue-3:#69adff;
  --red:#ff5d70;
  --radius:18px;
  --shadow:0 12px 32px rgba(0,0,0,.24);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

body{
  background:
    radial-gradient(circle at 30% -15%, rgba(43,140,255,.11), transparent 32%),
    linear-gradient(180deg,#07111f 0%,#081521 100%);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select{
  font:inherit;
}

.app-shell{
  min-height:100vh;
}

.topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  background:rgba(7,17,31,.96);
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
}

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

.brand{
  min-width:max-content;
}

.brand strong{
  display:block;
  font-size:22px;
  line-height:1;
}

.brand span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.desktop-nav{
  display:flex;
  gap:4px;
  align-items:center;
}

.desktop-nav a{
  padding:11px 13px;
  border-radius:10px;
  color:#c9d7e7;
  font-size:13px;
  font-weight:650;
  position:relative;
}

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

.desktop-nav a.active:after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:-15px;
  height:2px;
  background:var(--blue);
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.round-btn{
  width:42px;
  height:42px;
  border-radius:13px;
  border:1px solid var(--line);
  background:var(--panel);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.profile-btn{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px 6px 7px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
}

.avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  background:linear-gradient(135deg,var(--blue),#145cae);
}

.profile-data{
  line-height:1.15;
}

.profile-data strong{
  display:block;
  font-size:12px;
}

.profile-data span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:3px;
}

.page{
  padding:20px;
  max-width:1500px;
  margin:0 auto;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:18px;
}

.card{
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(14,29,49,.98),rgba(9,21,36,.98));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.balance-card{
  padding:24px;
}

.card-label{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:10px;
}

.balance-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.balance{
  font-size:42px;
  font-weight:850;
  letter-spacing:-1.1px;
}

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

.currency-select{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:#fff;
  border-radius:11px;
  padding:10px 12px;
}

.quick-actions{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}

.quick-action{
  min-height:92px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.015);
  border-radius:15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:12px;
  font-weight:700;
  transition:.15s ease;
}

.quick-action:hover{
  border-color:#2c639f;
  background:rgba(43,140,255,.07);
  transform:translateY(-1px);
}

.icon-circle{
  width:40px;
  height:40px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(43,140,255,.12);
  color:var(--blue-3);
  font-size:18px;
  font-weight:800;
}

.market-card{
  padding:20px;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.section-title h2{
  margin:0;
  font-size:17px;
}

.section-title a{
  color:var(--blue-3);
  font-size:12px;
}

.market-list{
  display:grid;
  gap:8px;
}

.market-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:12px;
  border:1px solid transparent;
}

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

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

.coin{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:850;
  background:#162b45;
}

.asset strong{
  display:block;
  font-size:12px;
}

.asset span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}

.price{
  font-size:12px;
  font-weight:700;
}

.change{
  min-width:62px;
  text-align:right;
  color:var(--blue-3);
  font-size:11px;
  font-weight:750;
}

.grid-2{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
  gap:18px;
  margin-top:18px;
}

.chart-card,
.assets-card,
.activity-card{
  padding:20px;
}

.chart-box{
  height:260px;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(43,140,255,.04),rgba(255,255,255,.005));
  position:relative;
  overflow:hidden;
}

.chart-line{
  position:absolute;
  left:4%;
  right:4%;
  top:26%;
  bottom:18%;
}

.chart-line svg{
  width:100%;
  height:100%;
}

.range{
  display:flex;
  gap:7px;
  margin-top:12px;
}

.range button{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
  border-radius:9px;
  padding:7px 10px;
  font-size:10px;
}

.range button.active{
  color:#fff;
  background:rgba(43,140,255,.12);
  border-color:#2b5f98;
}

.asset-list{
  display:grid;
}

.asset-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.asset-item:last-child{
  border-bottom:0;
}

.asset-balance{
  text-align:right;
}

.asset-balance strong{
  display:block;
  font-size:12px;
}

.asset-balance span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

.activity{
  margin-top:18px;
}

.activity-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.activity-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(43,140,255,.10);
  color:var(--blue-3);
}

.activity-data strong{
  display:block;
  font-size:12px;
}

.activity-data span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

.activity-amount{
  text-align:right;
  font-size:12px;
  font-weight:750;
}

.mobile-nav{
  display:none;
}

@media(max-width:1050px){
  .desktop-nav{
    display:none;
  }

  .hero,
  .grid-2{
    grid-template-columns:1fr;
  }

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

@media(max-width:720px){
  body{
    padding-bottom:78px;
  }

  .topbar{
    min-height:62px;
    padding:0 13px;
  }

  .brand strong{
    font-size:17px;
  }

  .brand span{
    display:none;
  }

  .profile-data{
    display:none;
  }

  .page{
    padding:12px;
  }

  .balance-card{
    padding:18px;
  }

  .balance{
    font-size:34px;
  }

  .quick-actions{
    grid-template-columns:repeat(5,1fr);
    gap:7px;
  }

  .quick-action{
    border:0;
    background:transparent;
    min-height:74px;
    padding:0;
    font-size:9px;
  }

  .icon-circle{
    width:38px;
    height:38px;
  }

  .mobile-nav{
    position:fixed;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    left:0;
    right:0;
    bottom:0;
    z-index:200;
    min-height:68px;
    border-top:1px solid var(--line);
    background:rgba(7,17,31,.98);
    backdrop-filter:blur(14px);
  }

  .mobile-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:var(--muted);
    font-size:9px;
  }

  .mobile-nav a.active{
    color:var(--blue-3);
  }

  .mobile-nav .nav-icon{
    font-size:18px;
  }

  .top-actions .round-btn:first-child{
    display:none;
  }
}


/* ==================================================
   KONECTA APP - MERCADOS V1
   ================================================== */

.market-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.market-page-head h1{
  margin:0;
  font-size:28px;
  letter-spacing:-.5px;
}

.market-page-head p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:12px;
}

.market-search{
  width:min(360px,100%);
  position:relative;
}

.market-search input{
  width:100%;
  height:44px;

  padding:
    0 14px
    0 42px;

  border:
    1px solid
    var(--line);

  border-radius:13px;

  background:
    var(--panel);

  color:#fff;

  outline:none;
}

.market-search input:focus{
  border-color:
    var(--blue);

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

.market-search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:16px;
}


.market-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  overflow:auto;

  margin-bottom:14px;

  padding-bottom:2px;
}

.market-tab{
  flex:0 0 auto;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.015);

  color:
    var(--muted);

  padding:
    9px 14px;

  border-radius:
    11px;

  cursor:pointer;

  font-size:
    11px;

  font-weight:750;
}

.market-tab:hover,
.market-tab.active{
  color:#fff;

  border-color:
    rgba(43,140,255,.38);

  background:
    rgba(43,140,255,.11);
}


.category-row{
  display:flex;
  gap:6px;
  overflow:auto;
  margin-bottom:17px;
}

.category{
  flex:0 0 auto;

  padding:
    7px 11px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.02);

  color:
    var(--muted);

  cursor:pointer;

  font-size:
    10px;

  font-weight:
    700;
}

.category.active{
  color:
    #9cc9ff;

  border-color:
    rgba(43,140,255,.28);

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


.market-summary{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:13px;

  margin-bottom:
    17px;
}

.market-stat{
  padding:17px;
}

.market-stat-top{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  margin-bottom:
    12px;
}

.market-stat-title{
  font-size:11px;

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    .8px;
}

.market-stat-icon{
  width:31px;
  height:31px;

  display:flex;

  align-items:center;

  justify-content:
    center;

  border-radius:
    10px;

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

  color:
    var(--blue-3);
}

.market-stat-value{
  font-size:20px;
  font-weight:800;
}

.market-stat-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
}


.market-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(310px,.65fr);

  gap:17px;
}


.market-table-card{
  min-width:0;
}


.market-table-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:
    16px 17px;

  border-bottom:
    1px solid
    var(--line);
}

.market-table-head h2{
  margin:0;
  font-size:15px;
}

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;

  color:
    #9cc9ff;

  font-size:
    9px;

  text-transform:
    uppercase;

  letter-spacing:
    .7px;

  font-weight:
    800;
}

.live-dot{
  width:6px;
  height:6px;

  border-radius:
    50%;

  background:
    var(--blue);

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


.exchange-table-wrap{
  overflow:auto;
}


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


.exchange-table th{
  padding:
    12px 14px;

  text-align:left;

  color:
    var(--muted);

  font-size:
    9px;

  text-transform:
    uppercase;

  letter-spacing:
    .75px;

  font-weight:
    750;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);

  white-space:
    nowrap;
}


.exchange-table td{
  padding:
    12px 14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);

  font-size:
    11px;

  white-space:
    nowrap;
}


.exchange-table tbody tr{
  cursor:pointer;
}


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


.coin-name-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}


.coin-logo{
  width:34px;
  height:34px;

  border-radius:
    50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    #132842;

  font-size:
    12px;

  font-weight:
    850;

  color:
    #fff;
}


.coin-meta strong{
  display:block;
  font-size:11px;
}


.coin-meta span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}


.favorite{
  color:
    #536b84;

  font-size:
    16px;

  cursor:pointer;
}


.favorite.active{
  color:
    #f7c94b;
}


.market-positive{
  color:
    #69adff;
  font-weight:750;
}


.market-negative{
  color:
    var(--red);
  font-weight:750;
}


.open-trade{
  color:
    var(--blue-3);

  font-size:
    10px;

  font-weight:
    750;
}


.market-side{
  display:grid;
  gap:17px;
  align-content:start;
}


.side-card{
  padding:17px;
}


.side-card h3{
  margin:
    0 0 13px;

  font-size:
    14px;
}


.ranking-row{
  display:grid;

  grid-template-columns:
    23px 1fr auto;

  gap:8px;

  align-items:center;

  padding:
    10px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}


.ranking-row:last-child{
  border-bottom:0;
}


.ranking-number{
  color:
    var(--muted);

  font-size:
    10px;
}


.ranking-asset strong{
  display:block;
  font-size:11px;
}


.ranking-asset span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:2px;
}


.ranking-change{
  font-size:10px;
  font-weight:750;
}


.market-section{
  display:none;
}


.market-section.active{
  display:block;
}


.market-full-card{
  padding:17px;
}


.market-sub-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}


.market-sub-title h2{
  margin:0;
  font-size:16px;
}


.trend-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;
}


.trend-card{
  padding:16px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.015);
}


.trend-card:hover{
  border-color:
    rgba(43,140,255,.30);

  background:
    rgba(43,140,255,.035);
}


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


.trend-symbol{
  display:flex;
  align-items:center;
  gap:9px;
}


.trend-symbol strong{
  font-size:12px;
}


.trend-price{
  margin-top:13px;

  font-size:
    19px;

  font-weight:
    800;
}


.trend-change{
  margin-top:6px;
  font-size:10px;
}


.data-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}


.heatmap{
  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  grid-auto-rows:
    88px;

  gap:6px;
}


.heat-box{
  display:flex;

  flex-direction:
    column;

  align-items:center;

  justify-content:center;

  gap:5px;

  border-radius:
    12px;

  border:
    1px solid
    rgba(255,255,255,.07);

  cursor:pointer;

  text-align:center;

  overflow:hidden;
}


.heat-box strong{
  font-size:11px;
}


.heat-box span{
  font-size:10px;
  font-weight:750;
}


.heat-blue-1{
  background:
    rgba(43,140,255,.08);
}

.heat-blue-2{
  background:
    rgba(43,140,255,.16);
}

.heat-blue-3{
  background:
    rgba(43,140,255,.27);
}


.heat-red-1{
  background:
    rgba(255,93,112,.08);
}

.heat-red-2{
  background:
    rgba(255,93,112,.16);
}

.heat-red-3{
  background:
    rgba(255,93,112,.27);
}


.no-market-results{
  padding:40px 20px;

  text-align:center;

  color:
    var(--muted);
}


@media(max-width:1100px){

  .market-layout{
    grid-template-columns:1fr;
  }

  .market-side{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .trend-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .heatmap{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }
}


@media(max-width:720px){

  .market-page-head{
    align-items:stretch;
    flex-direction:column;
  }

  .market-page-head h1{
    font-size:23px;
  }

  .market-search{
    width:100%;
  }

  .market-summary{
    grid-template-columns:1fr;
  }

  .market-side{
    grid-template-columns:1fr;
  }

  .trend-grid,
  .data-grid{
    grid-template-columns:1fr;
  }

  .heatmap{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    grid-auto-rows:
      82px;
  }

  .exchange-table th:nth-child(5),
  .exchange-table td:nth-child(5),
  .exchange-table th:nth-child(6),
  .exchange-table td:nth-child(6){
    display:none;
  }
}


/* ==================================================
   KONECTA APP V2
   ================================================== */

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.page-head h1{
  margin:0;
  font-size:28px;
}

.page-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
}

.panel-title{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.panel-title h2{
  margin:0;
  font-size:15px;
}

.panel-body{
  padding:18px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.field label{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.input{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#091522;
  color:#fff;
  outline:none;
}

.input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(43,140,255,.08);
}

.btn{
  min-height:44px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:#fff;
  font-weight:750;
  cursor:pointer;
}

.btn-primary{
  border-color:transparent;
  background:linear-gradient(180deg,var(--blue),var(--blue-2));
}

.btn-danger{
  border-color:transparent;
  background:linear-gradient(180deg,#ff6677,#db4455);
}

.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

.tabs{
  display:flex;
  gap:7px;
  overflow:auto;
  margin-bottom:16px;
}

.tab{
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
}

.tab.active{
  background:rgba(43,140,255,.11);
  border-color:rgba(43,140,255,.35);
  color:#fff;
}

.app-table-wrap{
  overflow:auto;
}

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

.app-table th{
  padding:12px 14px;
  text-align:left;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.7px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.app-table td{
  padding:13px 14px;
  font-size:11px;
  border-bottom:1px solid rgba(255,255,255,.045);
  white-space:nowrap;
}

.status{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(43,140,255,.10);
  color:#94c6ff;
  font-size:9px;
  font-weight:800;
}

.empty{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  text-align:center;
  padding:30px;
}

.empty-icon{
  width:50px;
  height:50px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  color:var(--blue-3);
  background:rgba(43,140,255,.09);
  border:1px solid rgba(43,140,255,.15);
  font-size:22px;
}

.asset-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.asset-card{
  padding:17px;
}

.asset-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.asset-card .coin{
  width:38px;
  height:38px;
}

.asset-card h3{
  margin:14px 0 4px;
  font-size:15px;
}

.asset-card .amount{
  font-size:22px;
  font-weight:850;
}

.asset-card .fiat{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

.asset-actions{
  display:flex;
  gap:7px;
  margin-top:15px;
}

.asset-actions .btn{
  flex:1;
  min-height:36px;
  padding:0 8px;
  font-size:10px;
}

.trade-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(320px,.5fr);
  gap:15px;
}

.trade-chart-card{
  min-width:0;
}

.trade-symbolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 17px;
  border-bottom:1px solid var(--line);
}

.trade-pair strong{
  display:block;
  font-size:18px;
}

.trade-pair span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
}

.trade-price{
  text-align:right;
}

.trade-price strong{
  display:block;
  color:var(--blue-3);
  font-size:20px;
}

.trade-price span{
  font-size:10px;
  color:var(--muted);
}

.timeframes{
  display:flex;
  gap:5px;
  overflow:auto;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}

.tf{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:6px 9px;
  border-radius:7px;
  cursor:pointer;
  font-size:10px;
}

.tf.active{
  color:#fff;
  background:rgba(43,140,255,.12);
}

#tradeCanvas{
  width:100%;
  height:430px;
  display:block;
  background:#081522;
}

.orderbook{
  max-height:470px;
  overflow:auto;
}

.book-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:6px 15px;
  font-size:10px;
  position:relative;
}

.book-row span:last-child{
  text-align:right;
}

.ask{
  color:#ff6a7a;
}

.bid{
  color:#69adff;
}

.trade-form-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-bottom:14px;
}

.trade-form-tabs button{
  height:38px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.trade-form-tabs button.active{
  color:#fff;
  background:rgba(43,140,255,.12);
  border-color:rgba(43,140,255,.3);
}

.quote-box{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}

.quote-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  font-size:11px;
}

.quote-line:last-child{
  margin-bottom:0;
}

.profile-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.6fr);
  gap:16px;
}

.security-list{
  display:grid;
}

.security-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.security-item:last-child{
  border-bottom:0;
}

.security-item strong{
  display:block;
  font-size:12px;
}

.security-item span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

.earn-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.earn-card{
  padding:18px;
}

.earn-card h3{
  margin:12px 0 4px;
}

.apy{
  margin-top:12px;
  font-size:24px;
  color:var(--blue-3);
  font-weight:850;
}

.disabled-note{
  margin-top:10px;
  color:var(--muted);
  font-size:10px;
}

@media(max-width:1050px){
  .asset-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .trade-layout,
  .profile-grid{
    grid-template-columns:1fr;
  }

  .earn-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .form-grid,
  .asset-grid,
  .earn-grid{
    grid-template-columns:1fr;
  }

  #tradeCanvas{
    height:330px;
  }

  .trade-symbolbar{
    align-items:flex-start;
  }
}

/* ==========================================================
   KONECTA APP - WALLET FLOWS V3
   ========================================================== */

.action-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.action-card{
  padding:20px;
  min-height:170px;
  cursor:pointer;
  transition:.16s ease;
}

.action-card:hover{
  transform:translateY(-2px);
  border-color:rgba(43,140,255,.35);
  background:
    linear-gradient(
      180deg,
      rgba(16,35,58,.98),
      rgba(10,25,42,.98)
    );
}

.action-card-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:rgba(43,140,255,.11);
  color:var(--blue-3);
  font-size:22px;
  margin-bottom:16px;
}

.action-card h3{
  margin:0;
  font-size:15px;
}

.action-card p{
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
  margin:7px 0 0;
}

.flow-shell{
  max-width:760px;
  margin:0 auto;
}

.flow-card{
  padding:22px;
}

.flow-title{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:22px;
}

.flow-title-icon{
  width:46px;
  height:46px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(43,140,255,.12);
  color:var(--blue-3);
  font-size:20px;
}

.flow-title h2{
  margin:0;
  font-size:18px;
}

.flow-title p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:10px;
}

.flow-step{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}

.step-number{
  width:25px;
  height:25px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--blue);
  font-size:10px;
  font-weight:800;
}

.step-number.off{
  background:#172a40;
  color:var(--muted);
}

.flow-option-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.flow-option{
  border:1px solid var(--line);
  background:#091522;
  color:#fff;
  border-radius:13px;
  padding:15px;
  cursor:pointer;
  text-align:left;
}

.flow-option:hover,
.flow-option.selected{
  border-color:rgba(43,140,255,.55);
  background:rgba(43,140,255,.08);
}

.flow-option strong{
  display:block;
  font-size:12px;
}

.flow-option span{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:10px;
}

.summary-box{
  margin-top:17px;
  padding:15px;
  border-radius:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.015);
}

.summary-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:8px 0;
  font-size:11px;
}

.summary-row span{
  color:var(--muted);
}

.summary-row.total{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:5px;
  padding-top:13px;
}

.summary-row.total strong{
  color:var(--blue-3);
  font-size:14px;
}

.warning{
  padding:13px 14px;
  border-radius:12px;
  background:rgba(247,201,75,.06);
  border:1px solid rgba(247,201,75,.16);
  color:#dcc779;
  font-size:10px;
  line-height:1.5;
}

.info{
  padding:13px 14px;
  border-radius:12px;
  background:rgba(43,140,255,.07);
  border:1px solid rgba(43,140,255,.17);
  color:#9bc9ff;
  font-size:10px;
  line-height:1.5;
}

.qr-placeholder{
  width:180px;
  height:180px;
  margin:20px auto;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(43,140,255,.06),
      rgba(43,140,255,.06) 8px,
      rgba(255,255,255,.015) 8px,
      rgba(255,255,255,.015) 16px
    );
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--muted);
  font-size:10px;
}

.address-box{
  display:flex;
  align-items:center;
  gap:8px;
}

.address-box .input{
  flex:1;
}

.notification-list{
  display:grid;
}

.notification-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.notification-item:last-child{
  border-bottom:0;
}

.notification-icon{
  width:39px;
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(43,140,255,.10);
  color:var(--blue-3);
}

.notification-body strong{
  display:block;
  font-size:12px;
}

.notification-body p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}

.notification-time{
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}

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

.settings-link{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.015);
  display:flex;
  align-items:center;
  gap:12px;
}

.settings-link:hover{
  background:rgba(43,140,255,.05);
  border-color:rgba(43,140,255,.3);
}

.settings-link-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(43,140,255,.09);
  color:var(--blue-3);
}

.settings-link strong{
  display:block;
  font-size:12px;
}

.settings-link span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:3px;
}

.support-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.support-card{
  padding:20px;
}

.support-card h3{
  margin:14px 0 7px;
  font-size:14px;
}

.support-card p{
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
  margin:0;
}

.big-swap{
  width:44px;
  height:44px;
  margin:-5px auto;
  position:relative;
  z-index:2;
  border-radius:50%;
  border:5px solid var(--bg);
  background:var(--panel-2);
  color:var(--blue-3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
}

.convert-box{
  padding:17px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#091522;
}

.convert-box-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:13px;
  color:var(--muted);
  font-size:10px;
}

.convert-input-row{
  display:grid;
  grid-template-columns:1fr 145px;
  gap:10px;
}

.convert-amount{
  border:0;
  background:transparent;
  outline:none;
  color:#fff;
  font-size:25px;
  font-weight:750;
  width:100%;
}

.coin-select{
  height:42px;
  border:1px solid var(--line);
  background:var(--panel);
  color:#fff;
  border-radius:11px;
  padding:0 10px;
}

.security-status{
  min-width:90px;
  text-align:right;
}

@media(max-width:900px){
  .action-grid,
  .support-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .action-grid,
  .support-grid,
  .settings-menu,
  .flow-option-grid{
    grid-template-columns:1fr;
  }

  .flow-card{
    padding:17px;
  }

  .convert-input-row{
    grid-template-columns:1fr 115px;
  }

  .notification-item{
    grid-template-columns:auto 1fr;
  }

  .notification-time{
    grid-column:2;
  }
}

/* ==========================================================
   KONECTA APP - EXPANSION V4
   ========================================================== */

.profile-menu-wrap{
  position:relative;
}

.profile-dropdown{
  position:absolute;
  right:0;
  top:52px;
  width:260px;
  display:none;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#0b192a;
  box-shadow:0 18px 45px rgba(0,0,0,.4);
  z-index:500;
}

.profile-dropdown.open{
  display:block;
}

.profile-drop-head{
  padding:15px;
  border-bottom:1px solid var(--line);
}

.profile-drop-head strong{
  display:block;
  font-size:12px;
}

.profile-drop-head span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:4px;
}

.profile-drop-links{
  padding:7px;
}

.profile-drop-links a,
.profile-drop-links button{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#d8e5f5;
  text-align:left;
  cursor:pointer;
  font-size:11px;
}

.profile-drop-links a:hover,
.profile-drop-links button:hover{
  background:rgba(43,140,255,.08);
}

.profile-drop-separator{
  height:1px;
  margin:6px 8px;
  background:var(--line);
}

.admin-only{
  display:none;
}

.asset-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(330px,.6fr);
  gap:16px;
}

.asset-hero{
  padding:22px;
}

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

.asset-hero-info{
  display:flex;
  align-items:center;
  gap:13px;
}

.asset-hero-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#152a43;
  color:#fff;
  font-size:22px;
  font-weight:850;
}

.asset-hero-info h1{
  margin:0;
  font-size:22px;
}

.asset-hero-info span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
}

.asset-hero-price{
  text-align:right;
}

.asset-hero-price strong{
  display:block;
  font-size:28px;
}

.asset-hero-price span{
  display:block;
  margin-top:5px;
  font-size:11px;
}

.asset-chart{
  height:360px;
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  background:#081522;
}

.asset-chart canvas{
  width:100%;
  height:100%;
  display:block;
}

.asset-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.asset-stat{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}

.asset-stat span{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.asset-stat strong{
  display:block;
  margin-top:7px;
  font-size:13px;
}

.watchlist-btn{
  min-height:40px;
  padding:0 13px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  color:#fff;
  cursor:pointer;
}

.watchlist-btn.active{
  border-color:#7b6723;
  color:#f7c94b;
  background:rgba(247,201,75,.07);
}

.operation-card{
  max-width:900px;
  margin:0 auto;
}

.operation-main{
  padding:20px;
}

.operation-id{
  font-size:22px;
  font-weight:850;
}

.operation-meta{
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
}

.operation-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.operation-field{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}

.operation-field span{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.operation-field strong{
  display:block;
  margin-top:7px;
  font-size:12px;
}

.trade-bottom{
  margin-top:15px;
}

.trade-bottom-tabs{
  display:flex;
  gap:6px;
  padding:12px 14px 0;
  border-bottom:1px solid var(--line);
}

.trade-bottom-tab{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:9px 10px;
  cursor:pointer;
  font-size:10px;
  font-weight:700;
  border-bottom:2px solid transparent;
}

.trade-bottom-tab.active{
  color:#fff;
  border-bottom-color:var(--blue);
}

.trade-bottom-panel{
  display:none;
}

.trade-bottom-panel.active{
  display:block;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}

.admin-stat{
  padding:17px;
}

.admin-stat span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.admin-stat strong{
  display:block;
  font-size:24px;
  margin-top:8px;
}

.admin-section{
  margin-top:16px;
}

.admin-user-actions{
  display:flex;
  gap:6px;
}

.admin-user-actions .btn{
  min-height:32px;
  padding:0 9px;
  font-size:9px;
}

.mobile-more{
  display:none;
}

@media(max-width:1050px){
  .asset-detail-grid{
    grid-template-columns:1fr;
  }

  .admin-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .asset-hero-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .asset-hero-price{
    text-align:left;
  }

  .asset-chart{
    height:300px;
  }

  .operation-grid{
    grid-template-columns:1fr;
  }

  .admin-grid{
    grid-template-columns:1fr;
  }

  .profile-dropdown{
    position:fixed;
    left:12px;
    right:12px;
    top:70px;
    width:auto;
  }

  .mobile-more{
    display:block;
  }
}

/* ==========================================================
   KONECTA APP - EXPANSION V4
   ========================================================== */

.profile-menu-wrap{
  position:relative;
}

.profile-dropdown{
  position:absolute;
  right:0;
  top:52px;
  width:260px;
  display:none;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#0b192a;
  box-shadow:0 18px 45px rgba(0,0,0,.4);
  z-index:500;
}

.profile-dropdown.open{
  display:block;
}

.profile-drop-head{
  padding:15px;
  border-bottom:1px solid var(--line);
}

.profile-drop-head strong{
  display:block;
  font-size:12px;
}

.profile-drop-head span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:4px;
}

.profile-drop-links{
  padding:7px;
}

.profile-drop-links a,
.profile-drop-links button{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#d8e5f5;
  text-align:left;
  cursor:pointer;
  font-size:11px;
}

.profile-drop-links a:hover,
.profile-drop-links button:hover{
  background:rgba(43,140,255,.08);
}

.profile-drop-separator{
  height:1px;
  margin:6px 8px;
  background:var(--line);
}

.admin-only{
  display:none;
}

.asset-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(330px,.6fr);
  gap:16px;
}

.asset-hero{
  padding:22px;
}

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

.asset-hero-info{
  display:flex;
  align-items:center;
  gap:13px;
}

.asset-hero-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#152a43;
  color:#fff;
  font-size:22px;
  font-weight:850;
}

.asset-hero-info h1{
  margin:0;
  font-size:22px;
}

.asset-hero-info span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
}

.asset-hero-price{
  text-align:right;
}

.asset-hero-price strong{
  display:block;
  font-size:28px;
}

.asset-hero-price span{
  display:block;
  margin-top:5px;
  font-size:11px;
}

.asset-chart{
  height:360px;
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  background:#081522;
}

.asset-chart canvas{
  width:100%;
  height:100%;
  display:block;
}

.asset-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.asset-stat{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}

.asset-stat span{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.asset-stat strong{
  display:block;
  margin-top:7px;
  font-size:13px;
}

.watchlist-btn{
  min-height:40px;
  padding:0 13px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  color:#fff;
  cursor:pointer;
}

.watchlist-btn.active{
  border-color:#7b6723;
  color:#f7c94b;
  background:rgba(247,201,75,.07);
}

.operation-card{
  max-width:900px;
  margin:0 auto;
}

.operation-main{
  padding:20px;
}

.operation-id{
  font-size:22px;
  font-weight:850;
}

.operation-meta{
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
}

.operation-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.operation-field{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}

.operation-field span{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.operation-field strong{
  display:block;
  margin-top:7px;
  font-size:12px;
}

.trade-bottom{
  margin-top:15px;
}

.trade-bottom-tabs{
  display:flex;
  gap:6px;
  padding:12px 14px 0;
  border-bottom:1px solid var(--line);
}

.trade-bottom-tab{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:9px 10px;
  cursor:pointer;
  font-size:10px;
  font-weight:700;
  border-bottom:2px solid transparent;
}

.trade-bottom-tab.active{
  color:#fff;
  border-bottom-color:var(--blue);
}

.trade-bottom-panel{
  display:none;
}

.trade-bottom-panel.active{
  display:block;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}

.admin-stat{
  padding:17px;
}

.admin-stat span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.admin-stat strong{
  display:block;
  font-size:24px;
  margin-top:8px;
}

.admin-section{
  margin-top:16px;
}

.admin-user-actions{
  display:flex;
  gap:6px;
}

.admin-user-actions .btn{
  min-height:32px;
  padding:0 9px;
  font-size:9px;
}

.mobile-more{
  display:none;
}

@media(max-width:1050px){
  .asset-detail-grid{
    grid-template-columns:1fr;
  }

  .admin-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .asset-hero-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .asset-hero-price{
    text-align:left;
  }

  .asset-chart{
    height:300px;
  }

  .operation-grid{
    grid-template-columns:1fr;
  }

  .admin-grid{
    grid-template-columns:1fr;
  }

  .profile-dropdown{
    position:fixed;
    left:12px;
    right:12px;
    top:70px;
    width:auto;
  }

  .mobile-more{
    display:block;
  }
}


/* =========================================================
   KONECTA EXPERIENCE V5
   ========================================================= */

.global-search-button{
  min-width:190px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:0 12px;

  border:
    1px solid
    var(--line);

  border-radius:13px;

  background:
    var(--panel);

  color:
    var(--muted);

  cursor:pointer;

  font-size:10px;
}


.global-search-button:hover{
  border-color:
    rgba(43,140,255,.32);
}


.search-shortcut{
  padding:4px 7px;

  border:
    1px solid
    var(--line);

  border-radius:6px;

  background:
    rgba(255,255,255,.03);

  font-size:8px;
}


.app-overlay{
  position:fixed;

  inset:0;

  display:none;

  align-items:flex-start;
  justify-content:center;

  padding-top:10vh;

  background:
    rgba(1,8,16,.72);

  backdrop-filter:
    blur(10px);

  z-index:2000;
}


.app-overlay.open{
  display:flex;
}


.search-dialog{
  width:
    min(
      680px,
      calc(100% - 28px)
    );

  max-height:76vh;

  overflow:hidden;

  border:
    1px solid
    var(--line);

  border-radius:18px;

  background:
    #091727;

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


.search-box{
  display:flex;
  align-items:center;
  gap:10px;

  padding:15px;

  border-bottom:
    1px solid
    var(--line);
}


.search-box input{
  flex:1;

  border:0;
  outline:0;

  background:
    transparent;

  color:#fff;

  font-size:16px;
}


.search-results{
  max-height:
    60vh;

  overflow:auto;

  padding:8px;
}


.search-group-title{
  padding:
    10px 10px 6px;

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    .8px;

  font-size:8px;
}


.search-result{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:12px;

  border:0;

  border-radius:11px;

  background:
    transparent;

  color:#fff;

  cursor:pointer;

  text-align:left;
}


.search-result:hover{
  background:
    rgba(43,140,255,.08);
}


.search-result-main{
  display:flex;
  align-items:center;
  gap:11px;
}


.search-result-icon{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

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

  color:
    var(--blue-3);

  font-weight:800;
}


.search-result strong{
  display:block;

  font-size:11px;
}


.search-result small{
  display:block;

  margin-top:3px;

  color:
    var(--muted);

  font-size:9px;
}


.notification-drawer{
  position:fixed;

  right:-410px;
  top:0;
  bottom:0;

  width:
    min(
      390px,
      100%
    );

  z-index:1800;

  border-left:
    1px solid
    var(--line);

  background:
    #081624;

  box-shadow:
    -20px 0 50px
    rgba(0,0,0,.35);

  transition:
    right .20s ease;

  overflow:auto;
}


.notification-drawer.open{
  right:0;
}


.drawer-head{
  position:sticky;
  top:0;

  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:17px;

  border-bottom:
    1px solid
    var(--line);

  background:
    #081624;
}


.drawer-head h2{
  margin:0;

  font-size:16px;
}


.drawer-close{
  width:34px;
  height:34px;

  border:
    1px solid
    var(--line);

  border-radius:10px;

  background:
    var(--panel);

  color:#fff;

  cursor:pointer;
}


.notification-count{
  min-width:18px;
  height:18px;

  position:absolute;

  top:-4px;
  right:-4px;

  display:none;

  align-items:center;
  justify-content:center;

  padding:0 5px;

  border-radius:999px;

  background:
    var(--blue);

  color:#fff;

  font-size:8px;

  font-weight:850;
}


.notification-trigger{
  position:relative;
}


.watchlist-section{
  margin-top:18px;
}


.watchlist-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:12px;
}


.watch-card{
  padding:15px;

  cursor:pointer;

  transition:
    .15s ease;
}


.watch-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(43,140,255,.30);
}


.watch-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:8px;
}


.watch-symbol{
  display:flex;

  align-items:center;

  gap:9px;
}


.watch-coin{
  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    #142b45;

  font-size:10px;

  font-weight:850;
}


.watch-price{
  margin-top:15px;

  font-size:17px;

  font-weight:800;
}


.watch-change{
  margin-top:5px;

  font-size:10px;

  font-weight:750;
}


.more-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:13px;
}


.more-card{
  min-height:145px;

  padding:18px;

  transition:
    .15s ease;
}


.more-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(43,140,255,.32);
}


.more-icon{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

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

  color:
    var(--blue-3);

  font-size:18px;
}


.more-card h3{
  margin:
    14px 0 5px;

  font-size:13px;
}


.more-card p{
  margin:0;

  color:
    var(--muted);

  font-size:9px;

  line-height:1.5;
}


.fee-table{
  width:100%;

  border-collapse:
    collapse;
}


.fee-table th,
.fee-table td{
  padding:
    14px 15px;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);

  text-align:left;

  font-size:11px;
}


.fee-table th{
  color:
    var(--muted);

  text-transform:
    uppercase;

  font-size:8px;

  letter-spacing:
    .8px;
}


.service-status-list{
  display:grid;

  gap:10px;
}


.service-status{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:14px;

  border:
    1px solid
    var(--line);

  border-radius:13px;

  background:
    rgba(255,255,255,.015);
}


.service-status strong{
  display:block;

  font-size:11px;
}


.service-status span{
  display:block;

  margin-top:3px;

  color:
    var(--muted);

  font-size:9px;
}


.status-light{
  width:9px;
  height:9px;

  border-radius:50%;

  background:
    var(--blue);

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


.status-light.off{
  background:
    var(--red);

  box-shadow:
    0 0 13px
    rgba(255,93,112,.5);
}


.install-card{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:18px;
}


.install-copy strong{
  display:block;

  font-size:13px;
}


.install-copy span{
  display:block;

  margin-top:4px;

  color:
    var(--muted);

  font-size:9px;
}


@media(max-width:1150px){

  .global-search-button{
    min-width:44px;
    width:44px;
  }

  .global-search-button .search-label,
  .search-shortcut{
    display:none;
  }

  .watchlist-grid,
  .more-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media(max-width:720px){

  .watchlist-grid,
  .more-grid{
    grid-template-columns:1fr;
  }

  .global-search-button{
    display:none;
  }

  .search-dialog{
    margin-top:0;
  }

  .app-overlay{
    padding-top:20px;
  }

  .install-card{
    align-items:flex-start;

    flex-direction:column;
  }

}



/* ==========================================================
   KONECTA CRYPTOS - PRO EXPERIENCE V6
   ========================================================== */


/* ---------- APP MODAL ---------- */

.kc-modal-overlay{
  position:fixed;
  inset:0;
  z-index:3000;

  display:none;

  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    rgba(1,7,14,.78);

  backdrop-filter:
    blur(10px);
}


.kc-modal-overlay.open{
  display:flex;
}


.kc-modal{
  width:min(560px,100%);

  max-height:
    min(760px,90vh);

  overflow:auto;

  border:
    1px solid
    var(--line);

  border-radius:
    20px;

  background:
    #091726;

  box-shadow:
    0 35px 100px
    rgba(0,0,0,.55);
}


.kc-modal-head{
  position:sticky;
  top:0;
  z-index:2;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:17px 18px;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(9,23,38,.97);

  backdrop-filter:
    blur(12px);
}


.kc-modal-head h2{
  margin:0;
  font-size:17px;
}


.kc-modal-head p{
  margin:4px 0 0;

  color:
    var(--muted);

  font-size:9px;
}


.kc-modal-close{
  width:36px;
  height:36px;

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    var(--panel);

  color:#fff;

  cursor:pointer;

  font-size:18px;
}


.kc-modal-body{
  padding:18px;
}


.kc-modal-actions{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px;

  margin-bottom:18px;
}


.kc-modal-action{
  padding:15px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.015);

  color:#fff;

  cursor:pointer;

  text-align:left;
}


.kc-modal-action:hover,
.kc-modal-action.active{
  background:
    rgba(43,140,255,.08);

  border-color:
    rgba(43,140,255,.35);
}


.kc-modal-action-icon{
  width:38px;
  height:38px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin-bottom:10px;

  border-radius:
    11px;

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

  color:
    var(--blue-3);

  font-size:17px;
}


.kc-modal-action strong{
  display:block;

  font-size:11px;
}


.kc-modal-action span{
  display:block;

  margin-top:4px;

  color:
    var(--muted);

  font-size:9px;

  line-height:1.4;
}


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

.kc-fab-wrap{
  position:fixed;

  right:22px;
  bottom:22px;

  z-index:950;
}


.kc-fab{
  width:54px;
  height:54px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:0;

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      var(--blue),
      var(--blue-2)
    );

  color:#fff;

  box-shadow:
    0 14px 35px
    rgba(43,140,255,.28);

  cursor:pointer;

  font-size:24px;
}


.kc-fab-menu{
  position:absolute;

  right:0;
  bottom:65px;

  width:220px;

  display:none;

  padding:8px;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    #0a192a;

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.40);
}


.kc-fab-menu.open{
  display:block;
}


.kc-fab-menu button,
.kc-fab-menu a{
  width:100%;

  min-height:42px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:0 11px;

  border:0;

  border-radius:
    10px;

  background:
    transparent;

  color:#fff;

  cursor:pointer;

  font-size:10px;

  text-align:left;
}


.kc-fab-menu button:hover,
.kc-fab-menu a:hover{
  background:
    rgba(43,140,255,.08);
}


/* ---------- TRADING PRO ---------- */

.trade-market-select{
  min-width:145px;

  height:40px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    #091522;

  color:#fff;

  padding:
    0 10px;

  outline:none;
}


.trade-market-stats{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:1px;

  background:
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.trade-market-stat{
  padding:
    10px 13px;

  background:
    #091725;
}


.trade-market-stat span{
  display:block;

  color:
    var(--muted);

  text-transform:
    uppercase;

  font-size:8px;

  letter-spacing:
    .7px;
}


.trade-market-stat strong{
  display:block;

  margin-top:5px;

  font-size:10px;
}


.trade-right-grid{
  display:grid;

  grid-template-rows:
    minmax(300px,1fr)
    minmax(220px,.65fr);

  gap:15px;

  align-content:start;
}


.recent-trades{
  max-height:300px;
  overflow:auto;
}


.recent-trade-head,
.recent-trade-row{
  display:grid;

  grid-template-columns:
    1fr 1fr 1fr;

  gap:10px;

  padding:
    7px 13px;

  font-size:9px;
}


.recent-trade-head{
  position:sticky;

  top:0;

  background:
    #0b192a;

  color:
    var(--muted);

  border-bottom:
    1px solid
    var(--line);

  z-index:2;
}


.recent-trade-row span:nth-child(2),
.recent-trade-row span:nth-child(3),
.recent-trade-head span:nth-child(2),
.recent-trade-head span:nth-child(3){
  text-align:right;
}


/* ---------- FAVORITES ---------- */

.favorite-market-btn{
  width:28px;
  height:28px;

  border:0;

  border-radius:
    8px;

  background:
    transparent;

  color:#536a83;

  cursor:pointer;

  font-size:16px;
}


.favorite-market-btn.active{
  color:#f7c94b;

  background:
    rgba(247,201,75,.06);
}


/* ---------- OPERATIONS CENTER ---------- */

.operations-toolbar{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;
}


.operations-filters{
  display:flex;

  gap:6px;

  overflow:auto;
}


.operation-search{
  width:min(280px,100%);

  height:40px;

  padding:
    0 12px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    var(--panel);

  color:#fff;

  outline:none;
}


.operation-summary{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;

  margin-bottom:15px;
}


.operation-summary-card{
  padding:15px;
}


.operation-summary-card span{
  display:block;

  color:
    var(--muted);

  font-size:8px;

  text-transform:
    uppercase;

  letter-spacing:
    .7px;
}


.operation-summary-card strong{
  display:block;

  margin-top:7px;

  font-size:21px;
}


/* ---------- APP CHIPS ---------- */

.app-chip{
  display:inline-flex;

  align-items:center;

  gap:5px;

  padding:
    5px 8px;

  border-radius:
    999px;

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

  color:
    #9bc9ff;

  font-size:8px;

  font-weight:750;
}


.app-chip.red{
  background:
    rgba(255,93,112,.08);

  color:
    #ff8290;
}


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

.mobile-action-sheet{
  display:none;
}


@media(max-width:1000px){

  .trade-market-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .trade-right-grid{
    grid-template-rows:auto;
  }


  .operation-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:720px){

  .kc-modal-overlay{
    align-items:flex-end;

    padding:0;
  }


  .kc-modal{
    width:100%;

    max-height:86vh;

    border-radius:
      22px 22px 0 0;

    border-bottom:0;
  }


  .kc-modal-actions{
    grid-template-columns:1fr;
  }


  .kc-fab-wrap{
    display:none;
  }


  .trade-market-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .trade-symbolbar{
    flex-wrap:wrap;
  }


  .trade-market-select{
    width:100%;
  }


  .operation-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .operations-toolbar{
    align-items:stretch;

    flex-direction:column;
  }


  .operation-search{
    width:100%;
  }

}



/* ==========================================================
   KONECTA CRYPTOS - UI V7
   ========================================================== */

.kc-svg-icon{
  width:20px;
  height:20px;
  display:block;
}

.kc-svg-icon-sm{
  width:16px;
  height:16px;
}

.kc-svg-icon-lg{
  width:24px;
  height:24px;
}

.kc-action-icon img{
  width:21px;
  height:21px;
}

.kc-coin-img{
  width:36px;
  height:36px;
  display:block;
  border-radius:50%;
}

.kc-currency-switch{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
}

.kc-currency-switch button{
  min-width:46px;
  height:31px;
  padding:0 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:9px;
  font-weight:800;
}

.kc-currency-switch button.active{
  color:#fff;
  background:rgba(43,140,255,.16);
}

.kc-balance-currency{
  margin-left:8px;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.wallet-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:16px;
}

.wallet-detail-hero{
  padding:22px;
}

.wallet-detail-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.wallet-detail-asset{
  display:flex;
  align-items:center;
  gap:12px;
}

.wallet-detail-asset h1{
  margin:0;
  font-size:20px;
}

.wallet-detail-asset span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}

.wallet-balance{
  margin-top:26px;
}

.wallet-balance-label{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.wallet-balance-value{
  margin-top:7px;
  font-size:34px;
  font-weight:850;
}

.wallet-balance-fiat{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

.wallet-action-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:21px;
}

.wallet-action{
  min-height:74px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.015);
  color:#fff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:9px;
  font-weight:700;
}

.wallet-action:hover{
  border-color:rgba(43,140,255,.32);
  background:rgba(43,140,255,.06);
}

.wallet-action-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue-3);
  background:rgba(43,140,255,.10);
}

.wallet-side-card{
  padding:18px;
}

.wallet-info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.wallet-info-row:last-child{
  border-bottom:0;
}

.wallet-info-row span{
  color:var(--muted);
  font-size:9px;
}

.wallet-info-row strong{
  font-size:11px;
}

.mobile-top-logo{
  display:none;
}

.mobile-header-tools{
  display:none;
}

.mobile-app-title{
  display:none;
}

.mobile-nav a{
  transition:.14s ease;
}

.mobile-nav a.active{
  color:var(--blue-3);
}

.mobile-nav a.active .nav-icon{
  transform:translateY(-1px);
}

.mobile-nav .nav-icon img{
  width:20px;
  height:20px;
  display:block;
}

.app-section-spacing{
  margin-top:17px;
}

.soft-panel{
  background:
    linear-gradient(
      180deg,
      rgba(16,34,56,.96),
      rgba(8,21,35,.96)
    );
}

.desktop-nav a{
  letter-spacing:.01em;
}

.topbar{
  box-shadow:
    0 3px 18px
    rgba(0,0,0,.12);
}

.card{
  transition:
    border-color .15s ease,
    transform .15s ease;
}

.kc-mobile-page-title{
  display:none;
}

@media(max-width:1050px){

  .wallet-detail-layout{
    grid-template-columns:1fr;
  }

}

@media(max-width:720px){

  body{
    background:
      radial-gradient(
        circle at 50% -10%,
        rgba(43,140,255,.12),
        transparent 28%
      ),
      #07111f;
  }

  .topbar{
    height:59px;
    min-height:59px;
    padding:0 12px;
  }

  .brand-wrap{
    gap:8px;
  }

  .brand{
    display:flex;
    align-items:center;
  }

  .brand strong{
    font-size:15px;
  }

  .desktop-nav{
    display:none;
  }

  .top-actions{
    gap:6px;
  }

  .round-btn{
    width:36px;
    height:36px;
    border-radius:11px;
  }

  .profile-btn{
    min-height:36px;
    padding:3px;
    border:0;
    background:transparent;
  }

  .profile-btn > span:last-child{
    display:none;
  }

  .avatar{
    width:33px;
    height:33px;
  }

  .page{
    padding:12px 12px 20px;
  }

  .page-head{
    margin-bottom:13px;
  }

  .page-head h1{
    font-size:21px;
  }

  .page-head p{
    font-size:10px;
  }

  .card{
    border-radius:16px;
    box-shadow:
      0 7px 20px
      rgba(0,0,0,.16);
  }

  .wallet-detail-hero{
    padding:17px;
  }

  .wallet-detail-top{
    align-items:flex-start;
  }

  .wallet-balance-value{
    font-size:29px;
  }

  .wallet-action-row{
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }

  .wallet-action{
    min-height:67px;
    border:0;
    background:transparent;
  }

  .wallet-action-icon{
    width:37px;
    height:37px;
    border-radius:12px;
  }

  .kc-currency-switch button{
    min-width:39px;
  }

  .quick-actions{
    margin-top:18px;
  }

  .quick-action{
    font-size:9px;
  }

  .market-card,
  .chart-card,
  .assets-card,
  .activity-card{
    padding:15px;
  }

  .section-title h2{
    font-size:14px;
  }

  .mobile-nav{
    min-height:66px;
    padding-bottom:
      env(safe-area-inset-bottom);
  }

  .mobile-nav a{
    font-size:8px;
    font-weight:650;
  }

  .mobile-nav .nav-icon{
    font-size:0;
  }

  .kc-mobile-page-title{
    display:block;
    margin:
      3px 0 13px;
    font-size:21px;
    font-weight:800;
  }

}



/* ==========================================================
   EMERGENCY UI GUARD V7
   Evita SVG/IMG gigantes aunque falle otro componente.
   ========================================================== */

.wallet-detail-asset > img,
img.kc-coin-img{
  display:block !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  object-fit:contain !important;
  flex:0 0 44px !important;
}

.wallet-detail-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 360px !important;
  gap:16px !important;
  align-items:start !important;
}

.wallet-detail-hero{
  min-width:0 !important;
  padding:22px !important;
  overflow:hidden !important;
}

.wallet-action-row{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:9px !important;
}

.wallet-action{
  min-width:0 !important;
  text-decoration:none !important;
}

.wallet-action-icon img,
.icon-circle img{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
}

@media(max-width:1050px){

  .wallet-detail-layout{
    grid-template-columns:1fr !important;
  }

}

@media(max-width:720px){

  .wallet-detail-hero{
    padding:17px !important;
  }

  .wallet-action-row{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
  }

}



/* ==========================================================
   KONECTA APP SHELL V8
   ========================================================== */


.kc-shell-topbar{
  width:100%;
}


.kc-shell-mobile{
  width:100%;
}


.kc-page-width{
  width:100%;
  max-width:1500px;
  margin:0 auto;
}


.kc-account-hero{
  display:grid;

  grid-template-columns:
    minmax(0,1.3fr)
    minmax(300px,.7fr);

  gap:16px;
}


.kc-account-card{
  padding:20px;
}


.kc-account-profile{
  display:flex;

  align-items:center;

  gap:14px;
}


.kc-account-avatar{
  width:58px;
  height:58px;

  display:flex;

  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      var(--blue),
      #155cac
    );

  color:#fff;

  font-size:22px;
  font-weight:850;
}


.kc-account-profile h2{
  margin:0;

  font-size:18px;
}


.kc-account-profile p{
  margin:5px 0 0;

  color:
    var(--muted);

  font-size:10px;
}


.kc-account-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:13px;

  margin-top:16px;
}


.kc-account-link{
  min-height:118px;

  padding:16px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.015);

  transition:
    .15s ease;
}


.kc-account-link:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(43,140,255,.30);

  background:
    rgba(43,140,255,.04);
}


.kc-account-link-icon{
  width:38px;
  height:38px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:
    11px;

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

  color:
    var(--blue-3);
}


.kc-account-link strong{
  display:block;

  margin-top:12px;

  font-size:11px;
}


.kc-account-link span{
  display:block;

  margin-top:4px;

  color:
    var(--muted);

  font-size:9px;

  line-height:1.4;
}


.kc-pref-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:16px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.kc-pref-row:last-child{
  border-bottom:0;
}


.kc-pref-copy strong{
  display:block;

  font-size:11px;
}


.kc-pref-copy span{
  display:block;

  margin-top:4px;

  color:
    var(--muted);

  font-size:9px;

  line-height:1.4;
}


.kc-toggle{
  position:relative;

  width:44px;
  height:25px;

  flex:0 0 auto;

  border:0;

  border-radius:999px;

  background:
    #1d3147;

  cursor:pointer;

  transition:.15s;
}


.kc-toggle:after{
  content:"";

  position:absolute;

  top:3px;
  left:3px;

  width:19px;
  height:19px;

  border-radius:50%;

  background:#fff;

  transition:.15s;
}


.kc-toggle.active{
  background:
    var(--blue);
}


.kc-toggle.active:after{
  transform:
    translateX(19px);
}


.kc-session{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:15px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.kc-session:last-child{
  border-bottom:0;
}


.kc-session-main{
  display:flex;

  align-items:center;

  gap:11px;
}


.kc-session-icon{
  width:39px;
  height:39px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:
    12px;

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

  color:
    var(--blue-3);
}


.kc-session-main strong{
  display:block;

  font-size:11px;
}


.kc-session-main span{
  display:block;

  margin-top:3px;

  color:
    var(--muted);

  font-size:9px;
}


.kc-admin-toolbar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:15px;
}


.kc-admin-search{
  width:min(340px,100%);

  height:42px;

  padding:0 13px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  outline:0;

  background:
    var(--panel);

  color:#fff;
}


.kc-admin-badge{
  display:inline-flex;

  align-items:center;

  min-height:25px;

  padding:0 9px;

  border-radius:999px;

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

  color:
    #9bc9ff;

  font-size:8px;

  font-weight:800;
}


.kc-audit-item{
  display:grid;

  grid-template-columns:
    150px 160px 1fr 140px;

  gap:12px;

  align-items:center;

  padding:12px 14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);

  font-size:9px;
}


.kc-audit-head{
  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    .6px;
}


.kc-balance-hidden{
  filter:
    blur(8px);

  user-select:none;
}


.kc-balance-eye{
  width:35px;
  height:35px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  margin-left:8px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px;

  background:
    var(--panel);

  color:
    var(--muted);

  cursor:pointer;
}


.kc-more-sheet{
  display:none;
}


@media(max-width:1050px){

  .kc-account-hero{
    grid-template-columns:1fr;
  }


  .kc-account-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .kc-audit-item{
    grid-template-columns:
      130px 140px 1fr;
  }


  .kc-audit-item > *:last-child{
    display:none;
  }

}


@media(max-width:720px){

  .kc-account-grid{
    grid-template-columns:1fr;
  }


  .kc-account-link{
    min-height:86px;
  }


  .kc-pref-row{
    padding:14px 0;
  }


  .kc-audit-item{
    grid-template-columns:1fr;
    gap:4px;

    padding:14px;
  }


  .kc-audit-head{
    display:none;
  }


  .kc-admin-toolbar{
    align-items:stretch;

    flex-direction:column;
  }


  .kc-admin-search{
    width:100%;
  }


  .kc-currency-switch{
    display:none;
  }

}