*{box-sizing:border-box}body{margin:0;font-family:Arial;background:radial-gradient(circle at top,#fff,#91d7ff 35%,#49a8e8 70%,#1d5d95);min-height:100vh;color:#07304d}body:before{content:"";position:fixed;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.55),transparent 40%,rgba(255,255,255,.35));pointer-events:none}header,nav,.card{backdrop-filter:blur(18px);background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.8);box-shadow:0 20px 50px rgba(0,80,150,.25);border-radius:28px}header{margin:14px;padding:18px;display:flex;justify-content:space-between;align-items:center}h1{margin:0;font-size:32px;text-shadow:0 2px white}#balance{font-size:28px;font-weight:900}nav{margin:14px;padding:10px;display:flex;gap:10px}button{border:0;border-radius:18px;padding:13px 16px;font-weight:800;color:#06436b;background:linear-gradient(#fff,#9ee7ff);box-shadow:inset 0 1px white,0 8px 18px #278ac055}button:active{transform:scale(.97)}main{padding:14px}.auth{max-width:380px;margin:12vh auto;padding:25px;text-align:center}input{width:100%;margin:8px 0;padding:14px;border-radius:16px;border:1px solid white;background:rgba(255,255,255,.65);font-size:16px}.page{animation:pop .25s}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.item{padding:16px}.item img{width:58px;height:58px;object-fit:contain}.item b{font-size:20px}.small{opacity:.8}@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1}}@media(max-width:600px){header{display:block;text-align:center}nav{overflow:auto}button{white-space:nowrap}#balance{font-size:24px}.grid{grid-template-columns:1fr}}

.head-left{display:flex;align-items:center;gap:12px}
.head-right{display:flex;align-items:center;gap:12px}
.top-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid white;box-shadow:0 8px 20px rgba(0,80,150,.25)}
.iconbtn{font-size:24px;padding:10px 14px;border-radius:50%}
.modal{position:fixed;inset:0;background:rgba(0,40,80,.35);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:99;padding:18px}
.modal-card{width:min(420px,100%);padding:22px}
input[type=range]{width:100%}
.danger{background:linear-gradient(#fff,#ff9e9e)!important;color:#7a0000!important}
button:disabled{opacity:.45}
@media(max-width:600px){
  header{display:flex;text-align:left}
  .head-right{flex-direction:column;align-items:flex-end}
  .top-avatar{width:48px;height:48px}
}

[hidden] {
  display: none !important;
}

.item img {
  background: white;
  padding: 10px;
  border-radius: 18px;
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
}

.item img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  background: white !important;
  padding: 8px !important;
  border-radius: 18px !important;
}

.price {
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 14px;
  display: inline-block;
}

.price.up {
  color: #006b2f;
  background: rgba(80,255,150,.35);
}

.price.down {
  color: #9b0000;
  background: rgba(255,80,80,.28);
}

.brand-logo{
  width:74px!important;
  height:74px!important;
  object-fit:contain!important;
  background:white!important;
  padding:8px!important;
  border-radius:18px!important;
}

.price{
  font-weight:900;
  padding:6px 10px;
  border-radius:14px;
  display:inline-block;
}

.price.up{
  color:#006b2f!important;
  background:rgba(60,255,140,.45)!important;
}

.price.down{
  color:#a00000!important;
  background:rgba(255,70,70,.35)!important;
}

.fab{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;
  width:64px;
  height:64px;
  border-radius:50%;
  font-size:38px;
  line-height:1;
  background:linear-gradient(#ffffff,#71ddff)!important;
  box-shadow:0 14px 35px rgba(0,90,160,.45), inset 0 2px white;
}

.mini-chart-wrap{
  width:100%;
  overflow-x:auto;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.85);
  border-radius:16px;
  padding:6px;
  margin:8px 0;
}

.mini-chart{
  width:520px;
  height:74px;
  color:#075d99;
  display:block;
}

.price.up + .mini-chart-wrap .mini-chart{
  color:#00883e;
}

.price.down + .mini-chart-wrap .mini-chart{
  color:#b00020;
}

/* PHONE FIX */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#app, main, header, nav {
  width: calc(100vw - 20px);
  max-width: 100%;
}

header, nav {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

main {
  padding: 10px !important;
}

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

.item {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

.item b {
  display: inline-block;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.price {
  margin-left: 6px;
}

/* CANDLE CHART */
.mini-chart-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.mini-chart {
  min-width: 520px;
  height: 82px !important;
  display: block;
}

.candle-up {
  fill: #00a651;
  stroke: #00a651;
}

.candle-down {
  fill: #d92d20;
  stroke: #d92d20;
}

@media(max-width:600px){
  body {
    font-size: 15px;
  }

  header {
    padding: 14px !important;
    border-radius: 22px !important;
  }

  header h1 {
    font-size: 28px !important;
  }

  #balance {
    font-size: 24px !important;
  }

  .item {
    padding: 14px !important;
    border-radius: 24px !important;
  }

  .brand-logo {
    width: 64px !important;
    height: 64px !important;
  }

  .mini-chart {
    min-width: 620px;
  }
}

.mini-chart-wrap{
  height:86px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:6px!important;
}

.mini-chart{
  min-width:520px!important;
  height:76px!important;
  display:block!important;
}

.candle-up{
  fill:#00a651!important;
  stroke:#00a651!important;
}

.candle-down{
  fill:#e02020!important;
  stroke:#e02020!important;
}

.fab{
  position:fixed!important;
  right:22px!important;
  bottom:22px!important;
  z-index:999!important;
  width:64px!important;
  height:64px!important;
  border-radius:50%!important;
  font-size:38px!important;
}

.bank-id{
  font-size:13px;
  opacity:.75;
  font-weight:800;
  letter-spacing:.5px;
}