/* =========================================================
   PayCash MiniApp 2.0
   Visual System v2.1
   ========================================================= */

:root{
  --v2-bg:#07090f;
  --v2-surface:rgba(17,20,31,.72);
  --v2-surface-strong:rgba(21,24,38,.88);
  --v2-surface-soft:rgba(255,255,255,.035);
  --v2-line:rgba(255,255,255,.075);
  --v2-line-hi:rgba(255,255,255,.13);

  --v2-text:#f5f6fb;
  --v2-muted:#8d94a8;
  --v2-muted2:#666d80;

  --v2-purple:#8b6cff;
  --v2-violet:#a855f7;
  --v2-cyan:#59d7ff;

  --v2-radius:22px;
  --v2-radius-small:15px;

  --v2-shadow:
    0 20px 55px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* ---------- PAGE ---------- */

html[data-theme="dark"]{
  --bg:var(--v2-bg);
  --fg:var(--v2-text);
  --muted:var(--v2-muted);
  --card1:rgba(18,21,33,.80);
  --card2:rgba(12,15,25,.72);
  --border:var(--v2-line);
}

html,
body{
  background:
    radial-gradient(
      900px 520px at 15% -10%,
      rgba(102,70,255,.13),
      transparent 62%
    ),
    radial-gradient(
      700px 500px at 105% 18%,
      rgba(50,117,255,.07),
      transparent 65%
    ),
    var(--bg);

  background-attachment:fixed;
}

body{
  letter-spacing:-.01em;
}

#app{
  max-width:920px;
  padding:
    max(15px, env(safe-area-inset-top))
    15px
    calc(112px + env(safe-area-inset-bottom));
}

/* subtle ambient glow */
#app::before{
  content:"";
  position:fixed;
  width:300px;
  height:300px;
  left:-130px;
  top:22vh;
  border-radius:50%;
  background:rgba(123,97,255,.055);
  filter:blur(80px);
  pointer-events:none;
  z-index:-1;
}

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

header{
  padding:5px 3px 21px;
}

header h1{
  font-size:19px;
  font-weight:650;
  letter-spacing:-.035em;
}

.toolbar{
  gap:6px;
}

.pill{
  min-height:39px;
  padding:7px 11px;
  border-radius:14px;

  background:rgba(17,20,31,.60);
  border:1px solid rgba(255,255,255,.07);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(0,0,0,.16);

  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}

.pill select{
  font-size:13px;
  font-weight:550;
}

.toggle{
  opacity:.82;
}

/* ---------- GLOBAL CARD SYSTEM ---------- */

.card{
  position:relative;
  overflow:hidden;

  margin-bottom:12px;
  padding:17px;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    ),
    var(--v2-surface);

  box-shadow:var(--v2-shadow);

  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}

/* fine highlight on glass */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      transparent 30%
    );

  opacity:.75;
}

/* ---------- TYPOGRAPHY ---------- */

.label{
  margin-bottom:7px;

  font-size:10px;
  line-height:1.3;
  font-weight:600;

  color:var(--v2-muted);

  letter-spacing:.085em;
}

.value{
  font-size:30px;
  line-height:1.05;
  font-weight:680;
  letter-spacing:-.045em;
}

.unit{
  margin-left:6px;

  font-size:11px;
  font-weight:550;

  color:var(--v2-muted);
  letter-spacing:0;
}

.muted{
  font-size:11px;
  line-height:1.45;
  color:var(--v2-muted);
}

/* =========================================================
   HOME
   ========================================================= */

/* MLNK hero */
#page-home > .card:first-child{
  min-height:142px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:20px;

  border-color:rgba(139,108,255,.14);

  background:
    radial-gradient(
      420px 170px at 5% 0%,
      rgba(123,97,255,.18),
      transparent 70%
    ),
    radial-gradient(
      300px 170px at 100% 100%,
      rgba(75,120,255,.075),
      transparent 75%
    ),
    rgba(17,20,31,.72);
}

#page-home > .card:first-child::before{
  content:"LIVE";
  position:absolute;
  right:18px;
  top:18px;

  padding:5px 8px;

  border:1px solid rgba(106,255,186,.12);
  border-radius:999px;

  background:rgba(49,209,139,.07);

  color:#75e5b0;

  font-size:8px;
  line-height:1;
  font-weight:700;
  letter-spacing:.12em;
}

#page-home > .card:first-child .label{
  padding-right:55px;

  color:#a9a0d7;
  font-size:10px;
}

#page-home > .card:first-child .value{
  margin-top:3px;

  font-size:clamp(31px,8vw,45px);
  font-weight:650;
  letter-spacing:-.055em;

  color:#fafaff;
}

#page-home > .card:first-child #price{
  text-shadow:0 0 35px rgba(139,108,255,.14);
}

#page-home > .card:first-child #price-ts{
  margin-top:10px;
  color:#777f93;
}

/* PRICE CHART */
#page-home > .card:nth-child(2){
  min-height:270px;

  padding:10px 10px 5px;

  background:
    radial-gradient(
      500px 180px at 45% 110%,
      rgba(123,97,255,.09),
      transparent 70%
    ),
    rgba(12,15,24,.64);

  border-color:rgba(255,255,255,.055);
}

#line{
  border-radius:17px;
}

#line-tip{
  border-radius:9px;

  background:rgba(9,11,18,.92);

  border:1px solid rgba(139,108,255,.24);

  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    0 0 20px rgba(123,97,255,.08);

  backdrop-filter:blur(12px);
}

/* ---------- HOME STAT CARDS ---------- */

#page-home .stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:11px;
}

#page-home .ob-box{
  min-width:0;
  padding:13px;

  border-radius:15px;
  border:1px solid rgba(255,255,255,.055);

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

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

#page-home .ob-box .t{
  margin-bottom:7px;

  color:var(--v2-muted);

  font-size:9px;
  line-height:1.35;
  font-weight:550;

  text-transform:uppercase;
  letter-spacing:.045em;
}

#page-home .ob-box .v{
  overflow:hidden;

  color:#f5f6fb;

  font-size:17px;
  line-height:1.25;
  font-weight:650;

  letter-spacing:-.025em;

  text-overflow:ellipsis;
}

/* ---------- SELECT ---------- */

.select-btn{
  min-height:46px;

  padding:11px 13px;

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

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

  color:var(--v2-text);

  font-size:13px;
  font-weight:550;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);

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

.select-btn:active{
  transform:scale(.99);
  background:rgba(255,255,255,.045);
}

.menu{
  border-radius:16px;

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

  background:rgba(14,17,27,.96);

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

  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
}

/* ---------- BUTTON ---------- */

.btn{
  min-height:45px;

  border-radius:14px !important;
  border:1px solid rgba(139,108,255,.17) !important;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.20),
      rgba(168,85,247,.12)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px rgba(0,0,0,.15);

  font-weight:600 !important;

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

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

/* ---------- ABOUT ---------- */

#about-text{
  font-size:12px;
  line-height:1.62 !important;
}

#about-text p{
  margin:11px 0;
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.nav{
  padding:
    9px
    12px
    calc(11px + env(safe-area-inset-bottom));

  bottom:0;

  background:
    linear-gradient(
      to top,
      rgba(7,9,15,.82),
      rgba(7,9,15,0)
    );
}

.navbar{
  width:min(100%,700px);

  gap:3px;

  padding:5px;

  border-radius:19px;

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

  background:rgba(17,20,31,.78);

  box-shadow:
    0 18px 45px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);

  overflow:visible;
}

.navbtn{
  min-width:0;

  gap:5px;

  padding:9px 7px;

  border-radius:14px;

  color:#70788c;

  backdrop-filter:none;

  transition:
    color .25s ease,
    background .25s ease,
    transform .18s ease;
}

.navbtn svg{
  width:20px;
  height:20px;
}

.navbtn .t{
  overflow:hidden;

  max-width:0;
  opacity:0;

  font-size:11px;
  font-weight:600;

  transition:
    max-width .32s cubic-bezier(.2,.8,.2,1),
    opacity .22s ease;
}

.navbtn.active{
  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.20),
      rgba(168,85,247,.12)
    );

  color:#eeeaff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 22px rgba(123,97,255,.08);

  transform:none;
}

.navbtn.active .t{
  max-width:105px;
  opacity:1;
}

/* ---------- INPUTS ---------- */

input[type=number],
input[type=text]{
  min-height:46px;

  border-radius:14px;

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

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

  font-weight:500;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

input[type=number]:focus,
input[type=text]:focus{
  border-color:rgba(139,108,255,.50);

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

  box-shadow:
    0 0 0 3px rgba(123,97,255,.07);
}

/* ---------- PAGE MOTION ---------- */

.page._anim_in_right{
  animation:v2InRight .26s cubic-bezier(.2,.8,.2,1) both;
}

.page._anim_out_left{
  animation:v2OutLeft .22s ease both;
}

.page._anim_in_left{
  animation:v2InLeft .26s cubic-bezier(.2,.8,.2,1) both;
}

.page._anim_out_right{
  animation:v2OutRight .22s ease both;
}

@keyframes v2InRight{
  from{transform:translateX(18px);opacity:0}
  to{transform:translateX(0);opacity:1}
}

@keyframes v2OutLeft{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(-12px);opacity:0}
}

@keyframes v2InLeft{
  from{transform:translateX(-18px);opacity:0}
  to{transform:translateX(0);opacity:1}
}

@keyframes v2OutRight{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(12px);opacity:0}
}

/* ---------- SMALL PHONES ---------- */

@media(max-width:520px){

  #app{
    padding-left:11px;
    padding-right:11px;
  }

  header{
    padding-left:3px;
    padding-right:3px;
  }

  header h1{
    font-size:18px;
  }

  .card{
    padding:15px;
    border-radius:20px;
  }

  #page-home > .card:first-child{
    min-height:132px;
    padding:18px;
  }

  #page-home > .card:nth-child(2){
    min-height:235px;
  }

  #page-home .ob-box{
    padding:11px;
  }

  #page-home .ob-box .v{
    font-size:15px;
  }

  .navbar{
    border-radius:18px;
  }

  .navbtn{
    padding:9px 6px;
  }

  .navbtn svg{
    width:19px;
    height:19px;
  }

  .navbtn.active .t{
    max-width:88px;
    font-size:10px;
  }
}

/* ---------- LIGHT THEME ---------- */

html[data-theme="light"] body{
  background:
    radial-gradient(
      800px 450px at 0% -10%,
      rgba(123,97,255,.08),
      transparent 65%
    ),
    #f5f6fa;
}

html[data-theme="light"] .card{
  background:rgba(255,255,255,.78);

  border-color:rgba(30,40,70,.07);

  box-shadow:
    0 16px 45px rgba(31,40,70,.07),
    inset 0 1px 0 rgba(255,255,255,.8);
}

html[data-theme="light"] .navbar{
  background:rgba(255,255,255,.82);
  border-color:rgba(30,40,70,.08);
}

html[data-theme="light"] #page-home > .card:first-child{
  background:
    radial-gradient(
      420px 180px at 5% 0%,
      rgba(123,97,255,.10),
      transparent 70%
    ),
    rgba(255,255,255,.84);
}

html[data-theme="light"] #page-home > .card:first-child .value{
  color:#12131a;
}

html[data-theme="light"] #page-home .ob-box{
  background:rgba(20,30,60,.025);
  border-color:rgba(20,30,60,.06);
}

html[data-theme="light"] #page-home .ob-box .v{
  color:#161820;
}


/* =========================================================
   PayCash MiniApp V2.2
   Market Home
   ========================================================= */


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

.pc-brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
}

.pc-brand span{
  font-size:20px;
  line-height:1;
  font-weight:680;
  letter-spacing:-.045em;
}

.pc-brand small{
  margin-top:4px;

  color:var(--v2-muted);

  font-size:9px;
  line-height:1;
  font-weight:550;

  text-transform:uppercase;
  letter-spacing:.13em;
}


/* ---------- HOME SECTION LABEL ---------- */

.home-section-kicker{
  margin:
    19px
    3px
    8px;

  color:#757d92;

  font-size:10px;
  font-weight:650;

  text-transform:uppercase;
  letter-spacing:.12em;
}


/* =========================================================
   MARKET HERO
   ========================================================= */

/* снимаем правила V2.1 для первой карточки */
#page-home > .market-hero{
  display:block !important;

  min-height:0 !important;

  padding:17px 15px 13px !important;

  border-color:
    rgba(139,108,255,.13) !important;

  background:
    radial-gradient(
      540px 240px at 0% 0%,
      rgba(109,74,255,.135),
      transparent 67%
    ),
    radial-gradient(
      420px 230px at 100% 45%,
      rgba(66,87,200,.055),
      transparent 72%
    ),
    rgba(13,16,26,.77) !important;

  overflow:visible;
}

#page-home > .market-hero::before{
  content:none !important;
}

.market-hero-head{
  position:relative;
  z-index:1;

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

  gap:12px;
}

.market-token{
  display:flex;
  align-items:center;

  gap:10px;

  min-width:0;
}

.market-token-icon{
  width:34px;
  height:34px;

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

  flex:0 0 auto;

  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      rgba(139,108,255,.16),
      rgba(168,85,247,.05)
    );

  border:
    1px solid rgba(139,108,255,.14);
}

.market-token-icon img{
  width:25px;
  height:25px;

  display:block;
}

.market-symbol{
  color:#f0ecff;

  font-size:13px;
  line-height:1.15;
  font-weight:650;

  letter-spacing:.015em;
}

.market-symbol span{
  color:#7d859a;

  font-weight:500;
}

.market-token-name{
  margin-top:3px;

  color:#737b90;

  font-size:9px;
  line-height:1;
  font-weight:500;
}

.market-live{
  display:flex;
  align-items:center;

  gap:6px;

  padding:5px 8px;

  border-radius:999px;

  border:
    1px solid rgba(71,214,153,.15);

  background:
    rgba(49,209,139,.055);

  color:#6cdaa6;

  font-size:8px;
  line-height:1;
  font-weight:700;

  letter-spacing:.12em;
}

.market-live span{
  width:5px;
  height:5px;

  border-radius:999px;

  background:#55d59c;

  box-shadow:
    0 0 9px rgba(85,213,156,.65);
}


/* ---------- PRICE ---------- */

.market-price-block{
  position:relative;
  z-index:1;

  margin-top:16px;
}

.market-price{
  display:flex;
  align-items:baseline;

  gap:7px;

  min-width:0;
}

.market-price #price{
  color:#fbfaff;

  font-size:
    clamp(34px,9.5vw,48px);

  line-height:.98;

  font-weight:630;

  letter-spacing:-.058em;

  font-variant-numeric:
    tabular-nums;

  text-shadow:
    0 0 34px rgba(139,108,255,.13);
}

.market-price small{
  color:#8b92a5;

  font-size:10px;
  font-weight:560;

  letter-spacing:.015em;
}

.market-updated{
  margin-top:9px;

  color:#696f83;

  font-size:9px;
  line-height:1;

  font-variant-numeric:
    tabular-nums;
}


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

.market-chart-wrap{
  position:relative;

  margin:
    12px
    -2px
    0;

  min-height:210px;
}

.market-chart-wrap #line{
  width:100%;

  border-radius:0;

  background:transparent;
}

.market-chart-wrap #line-tip{
  z-index:5;

  min-width:128px;

  padding:7px 9px;

  border-radius:9px;

  color:#f4efff;

  font-size:9px;

  background:
    rgba(9,11,18,.92);

  border:
    1px solid rgba(139,108,255,.20);

  box-shadow:
    0 12px 30px rgba(0,0,0,.38);

  backdrop-filter:blur(15px);
}


/* ---------- MAIN METRICS ---------- */

.market-metrics{
  display:grid;

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

  gap:7px;

  margin-top:5px;
}

.market-metric{
  min-width:0;

  padding:
    11px
    12px;

  border-radius:14px;

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

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

.market-metric span{
  display:block;

  margin-bottom:6px;

  color:#70788d;

  font-size:8px;
  line-height:1;

  font-weight:550;

  text-transform:uppercase;

  letter-spacing:.075em;
}

.market-metric strong{
  display:block;

  overflow:hidden;

  color:#f1f2f8;

  font-size:17px;
  line-height:1;

  font-weight:630;

  letter-spacing:-.035em;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   COMMON MARKET CARD HEADER
   ========================================================= */

.market-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;
}

.market-card-title{
  color:#e9eaf2;

  font-size:14px;
  line-height:1.2;

  font-weight:620;

  letter-spacing:-.025em;
}

.market-card-sub{
  margin-top:4px;

  color:#737b90;

  font-size:9px;
  line-height:1.25;
}

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

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

  flex:0 0 auto;

  border-radius:10px;

  background:
    rgba(89,215,255,.055);

  border:
    1px solid rgba(89,215,255,.10);
}

.market-card-icon svg{
  width:17px;
  height:17px;

  fill:none;

  stroke:#62cce8;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.market-card-icon.fire{
  background:
    rgba(168,85,247,.065);

  border-color:
    rgba(168,85,247,.12);
}

.market-card-icon.fire svg{
  fill:none;
  stroke:#a879ff;
}


/* =========================================================
   POOL CARD
   ========================================================= */

/* V2.1 nth-child(2) раньше был графиком.
   Теперь второй .card — pool card. */
#page-home > .market-pool-card{
  min-height:0 !important;

  padding:16px !important;

  background:
    rgba(16,19,30,.72) !important;
}

.market-pool-select{
  margin-top:2px;
}

.market-pool-select .select-btn{
  min-height:48px;

  padding:
    11px
    13px;

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

.pool-volume-result{
  margin-top:12px;

  padding-top:11px;

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

  color:#a7aec0;

  font-size:11px;
  line-height:1.45;

  font-weight:500;

  white-space:pre-line;
}


/* =========================================================
   BUYBACK
   ========================================================= */

.mlnk-buyback-card{
  padding:16px;
}

.buyback-grid{
  display:grid;

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

  gap:8px;
}

.buyback-stat{
  min-width:0;

  padding:
    13px
    12px;

  border-radius:15px;

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

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

.buyback-stat.primary{
  background:
    linear-gradient(
      145deg,
      rgba(139,108,255,.085),
      rgba(168,85,247,.025)
    );

  border-color:
    rgba(139,108,255,.12);
}

.buyback-stat > span{
  display:block;

  min-height:23px;

  color:#7b8397;

  font-size:8px;
  line-height:1.3;

  font-weight:550;

  text-transform:uppercase;

  letter-spacing:.05em;
}

.buyback-stat strong{
  display:block;

  overflow:hidden;

  margin-top:6px;

  color:#f2f2f7;

  font-size:16px;
  line-height:1.15;

  font-weight:640;

  letter-spacing:-.035em;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-variant-numeric:
    tabular-nums;
}

.buyback-stat.primary strong{
  color:#d9c9ff;
}

.buyback-stat small{
  display:block;

  margin-top:5px;

  color:#697185;

  font-size:8px;
  font-weight:550;

  letter-spacing:.05em;
}

.buyback-note{
  margin-top:10px;

  color:#646c80;

  font-size:9px;
  line-height:1.4;
}


/* ---------- LOWER HOME ---------- */

.home-about-card{
  margin-top:20px;
}

.home-donate-card .btn{
  width:100%;
}


/* =========================================================
   NAV V2.2 polish
   ========================================================= */

.navbar{
  padding:5px 6px;
}

.navbtn{
  min-height:42px;
}

.navbtn.active{
  background:
    linear-gradient(
      135deg,
      rgba(115,88,241,.22),
      rgba(148,73,215,.12)
    );
}


/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:520px){

  .market-price #price{
    font-size:
      clamp(33px,10.5vw,43px);
  }

  .market-chart-wrap{
    min-height:210px;
  }

  .market-metric strong{
    font-size:16px;
  }

  .buyback-stat{
    padding:12px 10px;
  }

  .buyback-stat strong{
    font-size:14px;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"] #page-home > .market-hero{
  background:
    radial-gradient(
      540px 240px at 0% 0%,
      rgba(109,74,255,.09),
      transparent 67%
    ),
    rgba(255,255,255,.82) !important;
}

html[data-theme="light"] .market-price #price{
  color:#16171f;
}

html[data-theme="light"] .market-symbol{
  color:#282a35;
}

html[data-theme="light"] .market-metric,
html[data-theme="light"] .buyback-stat{
  background:
    rgba(30,40,70,.025);

  border-color:
    rgba(20,30,60,.06);
}

html[data-theme="light"] .market-metric strong,
html[data-theme="light"] .buyback-stat strong,
html[data-theme="light"] .market-card-title{
  color:#1b1d26;
}


/* =========================================================
   PayCash MiniApp V2.3 Glass Layer
   ========================================================= */

/* ---------- GLOBAL GLASS BOOST ---------- */

#app{
  padding-bottom:calc(132px + env(safe-area-inset-bottom));
}

.card{
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
    linear-gradient(180deg, rgba(18,21,33,.78), rgba(10,13,22,.68));

  border-color:rgba(255,255,255,.08);

  box-shadow:
    0 18px 48px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(255,255,255,.015);

  backdrop-filter:blur(28px) saturate(155%);
  -webkit-backdrop-filter:blur(28px) saturate(155%);
}

.card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%);
  opacity:.95;
}

.pill,
.select-btn,
.navbar,
.market-metric,
.buyback-stat,
.market-card-icon{
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
}

/* ---------- HERO COMPACT + GLASS ---------- */

#page-home > .market-hero{
  padding:15px 14px 12px !important;
  background:
    radial-gradient(540px 240px at 0% 0%, rgba(109,74,255,.16), transparent 67%),
    radial-gradient(420px 230px at 100% 45%, rgba(66,87,200,.065), transparent 72%),
    linear-gradient(180deg, rgba(15,18,29,.80), rgba(10,12,21,.72)) !important;
}

.market-hero-head{
  margin-bottom:2px;
}

.market-price-block{
  margin-top:12px;
}

.market-price #price{
  font-size:clamp(31px,8.7vw,44px);
}

.market-updated{
  margin-top:8px;
}

.market-change{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-top:8px;
  padding:7px 10px;

  min-height:31px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.06);

  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));

  color:#aab1c2;

  font-size:11px;
  line-height:1;
  font-weight:650;

  letter-spacing:-.01em;

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

.market-change small{
  color:#6d7589;
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.market-change.up{
  color:#7be2ac;
  border-color:rgba(90,219,155,.14);
  background:
    linear-gradient(180deg, rgba(67,174,122,.10), rgba(67,174,122,.035));
}

.market-change.down{
  color:#ff9bb1;
  border-color:rgba(255,110,146,.14);
  background:
    linear-gradient(180deg, rgba(198,63,104,.10), rgba(198,63,104,.035));
}

.market-change.flat{
  color:#bbc2d2;
}

/* ---------- RANGE PILLS ---------- */

.market-range{
  display:flex;
  gap:6px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  margin-top:8px;
  padding-bottom:2px;

  scrollbar-width:none;
}

.market-range::-webkit-scrollbar{
  display:none;
}

.market-range-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.065);

  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));

  color:#8d94a8;

  min-width:48px;
  height:31px;
  padding:0 12px;

  border-radius:999px;

  font-size:11px;
  line-height:31px;
  font-weight:650;

  letter-spacing:-.01em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);

  cursor:pointer;
  user-select:none;
}

.market-range-btn.active{
  color:#efe9ff;
  border-color:rgba(139,108,255,.18);

  background:
    linear-gradient(135deg, rgba(123,97,255,.22), rgba(168,85,247,.13));

  box-shadow:
    0 0 18px rgba(123,97,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.market-chart-wrap{
  min-height:182px;
  margin-top:10px;
}

.market-chart-wrap #line-tip{
  background:rgba(10,12,20,.80);
  border-color:rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}

.market-metrics{
  margin-top:8px;
  gap:8px;
}

.market-metric{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border-color:rgba(255,255,255,.06);
}

/* ---------- POOL CARD ---------- */

.market-pool-card{
  background:
    linear-gradient(145deg, rgba(255,255,255,.048), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(14,18,29,.78), rgba(9,12,21,.70)) !important;
}

.pool-volume-primary{
  margin-top:2px;
  margin-bottom:12px;

  color:#f4f5fb;

  font-size:28px;
  line-height:1.05;
  font-weight:650;
  letter-spacing:-.04em;

  font-variant-numeric:tabular-nums;
}

.pool-volume-result{
  margin-top:10px;
  padding-top:10px;
  color:#8a92a7;
  font-size:10px;
  line-height:1.45;
}

.market-pool-select .select-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.018));
}

/* ---------- BUYBACK GLASS ---------- */

.mlnk-buyback-card{
  background:
    radial-gradient(440px 220px at 100% 0%, rgba(123,97,255,.065), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.048), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(14,18,29,.78), rgba(9,12,21,.70)) !important;
}

.buyback-stat{
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.018));
  border-color:rgba(255,255,255,.06);
}

.buyback-stat.primary{
  background:
    linear-gradient(145deg, rgba(139,108,255,.12), rgba(168,85,247,.03));
  border-color:rgba(139,108,255,.15);
}

/* ---------- NAVBAR GLASS ---------- */

.nav{
  padding-bottom:calc(13px + env(safe-area-inset-bottom));
}

.navbar{
  background:
    linear-gradient(180deg, rgba(20,24,38,.74), rgba(13,16,27,.78));

  border-color:rgba(255,255,255,.09);

  box-shadow:
    0 20px 48px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter:blur(30px) saturate(175%);
  -webkit-backdrop-filter:blur(30px) saturate(175%);
}

.navbtn{
  color:#8a92a7;
}

.navbtn.active{
  background:
    linear-gradient(135deg, rgba(115,88,241,.26), rgba(148,73,215,.14));
  border:1px solid rgba(255,255,255,.045);
}

/* ---------- LIGHT ---------- */

html[data-theme="light"] .card{
  background:
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  border-color:rgba(30,40,70,.08);
}

html[data-theme="light"] .market-change{
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border-color:rgba(20,30,60,.08);
}

html[data-theme="light"] .market-range-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border-color:rgba(20,30,60,.08);
}

html[data-theme="light"] .market-range-btn.active{
  background:
    linear-gradient(135deg, rgba(123,97,255,.18), rgba(168,85,247,.09));
}

/* ---------- PHONE ---------- */

@media (max-width:520px){
  .pool-volume-primary{
    font-size:25px;
  }

  .market-price #price{
    font-size:clamp(30px,9vw,40px);
  }

  .market-range-btn{
    min-width:46px;
    padding:0 11px;
  }
}


/* =========================================================
   V2.3.1
   Dropdown layer fix
   ========================================================= */

/*
   Стеклянная карточка не должна обрезать выпадающие меню.
   Раньше overflow:hidden отсекал menu по границе .card.
*/
.card{
  overflow:visible !important;
}

/*
   backdrop-filter создаёт stacking context.
   Поэтому карточку с открытым dropdown поднимаем
   выше всех следующих карточек.
*/
.card:has(.pool-select.open){
  z-index:10000;
}

/* сам dropdown */
.pool-select{
  position:relative;
}

.pool-select.open{
  z-index:10010;
}

.pool-select .menu{
  z-index:10020 !important;

  max-height:min(340px, 52vh);

  overflow-y:auto;
  overflow-x:hidden;

  box-shadow:
    0 26px 60px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter:blur(30px) saturate(175%);
  -webkit-backdrop-filter:blur(30px) saturate(175%);

  overscroll-behavior:contain;
}

/*
   У открытого select чуть сильнее подсвечиваем границу,
   чтобы было понятно, откуда появилось меню.
*/
.pool-select.open .select-btn{
  border-color:rgba(139,108,255,.30);

  background:
    linear-gradient(
      180deg,
      rgba(139,108,255,.085),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 0 0 3px rgba(123,97,255,.055),
    inset 0 1px 0 rgba(255,255,255,.05);
}


/* =========================================================
   HOME: correct pool exchange semantics
   ========================================================= */

.market-pool-card .market-card-sub{
  max-width:260px;
}

/*
   Старый #vol-info оставляем в DOM как источник данных
   для JS, который вытаскивает оттуда число.
   Пользователю второй раз ту же сумму показывать не нужно.
*/
.market-pool-card #vol-info{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;

  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;

  white-space:nowrap !important;

  opacity:0 !important;
  pointer-events:none !important;
}

.pool-volume-primary{
  margin-top:4px;
  margin-bottom:14px;
}


/* light */
html[data-theme="light"] .pool-select.open .select-btn{
  border-color:rgba(123,97,255,.30);

  background:
    linear-gradient(
      180deg,
      rgba(123,97,255,.10),
      rgba(255,255,255,.75)
    );
}



/* =========================================================
   PayCash MiniApp V2.4
   Account 2.0
   ========================================================= */


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

#page-account > .card:first-child{
  padding:15px;

  background:
    radial-gradient(
      380px 170px at 100% 0%,
      rgba(123,97,255,.07),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    ),
    rgba(13,16,26,.74);
}

#page-account > .card:first-child .label{
  margin-bottom:10px;
}

#page-account .acc-grid{
  gap:8px;
}

#page-account #acc-btn{
  min-width:104px;
}


/* ---------- ACCOUNT MAIN TABS ---------- */

#acc-tabs-wrap{
  padding:4px !important;

  border:0 !important;

  background:transparent !important;

  box-shadow:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#acc-tabs{
  padding:4px;

  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.017)
    );

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035);

  backdrop-filter:
    blur(25px)
    saturate(150%);

  -webkit-backdrop-filter:
    blur(25px)
    saturate(150%);
}

#acc-tabs .seg{
  height:38px;
  line-height:38px;

  font-size:11px;
  font-weight:600;

  border-radius:13px;
}

#acc-tabs .seg-indicator{
  top:4px;
  height:calc(100% - 8px);

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.24),
      rgba(168,85,247,.12)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 20px rgba(123,97,255,.06);
}


/* =========================================================
   ACCOUNT OVERVIEW
   ========================================================= */

.account-overview{
  overflow:hidden !important;

  padding:17px !important;

  border-color:
    rgba(139,108,255,.12);

  background:
    radial-gradient(
      520px 260px at 0% 0%,
      rgba(102,70,255,.145),
      transparent 67%
    ),
    radial-gradient(
      420px 240px at 105% 70%,
      rgba(61,92,210,.055),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(15,18,30,.80),
      rgba(9,12,21,.74)
    ) !important;
}

.account-overview::before{
  content:"";

  position:absolute;

  width:220px;
  height:220px;

  right:-105px;
  top:-115px;

  border-radius:999px;

  background:
    rgba(139,108,255,.08);

  filter:blur(52px);

  pointer-events:none;
}


.account-overview-top{
  position:relative;
  z-index:1;

  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:12px;
}


.account-ident{
  display:flex;

  align-items:center;

  min-width:0;

  gap:10px;
}


.account-avatar{
  width:37px;
  height:37px;

  flex:0 0 auto;

  display:flex;

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

  border-radius:12px;

  border:
    1px solid rgba(139,108,255,.15);

  background:
    linear-gradient(
      145deg,
      rgba(123,97,255,.16),
      rgba(168,85,247,.045)
    );

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


.account-avatar svg{
  width:20px;
  height:20px;

  fill:none;

  stroke:#cfc2ff;

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.account-ident-text{
  min-width:0;
}


.account-ident-text span{
  display:block;

  color:#777f94;

  font-size:8px;
  line-height:1;

  font-weight:650;

  letter-spacing:.12em;
}


.account-ident-text strong{
  display:block;

  overflow:hidden;

  margin-top:5px;

  max-width:230px;

  color:#f2efff;

  font-size:15px;
  line-height:1;

  font-weight:640;

  letter-spacing:-.025em;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.account-live{
  display:flex;

  align-items:center;

  gap:6px;

  padding:6px 8px;

  border-radius:999px;

  border:
    1px solid rgba(90,219,155,.13);

  background:
    rgba(64,190,131,.055);

  color:#69d7a2;

  font-size:7px;

  font-weight:700;

  letter-spacing:.12em;
}


.account-live span{
  width:5px;
  height:5px;

  border-radius:999px;

  background:#5bd79d;

  box-shadow:
    0 0 8px
    rgba(91,215,157,.60);
}


/* ---------- TOTAL ---------- */

.account-total-block{
  position:relative;
  z-index:1;

  margin-top:22px;
}


.account-total-label{
  display:block;

  color:#858da2;

  font-size:9px;

  font-weight:570;

  text-transform:uppercase;

  letter-spacing:.09em;
}


.account-total-value{
  margin-top:7px;

  color:#fbfaff;

  font-size:
    clamp(31px,9vw,44px);

  line-height:1;

  font-weight:630;

  letter-spacing:-.055em;

  font-variant-numeric:
    tabular-nums;

  text-shadow:
    0 0 32px
    rgba(139,108,255,.11);
}


.account-total-sub{
  margin-top:8px;

  color:#676f84;

  font-size:9px;

  line-height:1.35;
}


/* ---------- ALLOCATION ---------- */

.account-allocation{
  --wallet-share:25%;
  --liq-share:25%;
  --cash-share:25%;
  --zr-share:25%;

  position:relative;
  z-index:1;

  display:flex;

  gap:3px;

  width:100%;
  height:8px;

  margin-top:19px;

  overflow:hidden;

  border-radius:999px;

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

  box-shadow:
    inset 0 1px 3px
    rgba(0,0,0,.20);
}


.account-allocation span{
  min-width:0;

  height:100%;

  border-radius:999px;

  transition:
    width .60s
    cubic-bezier(.2,.8,.2,1);
}


.account-allocation .wallet{
  width:var(--wallet-share);

  background:
    linear-gradient(
      90deg,
      #7667ff,
      #8a6cff
    );
}


.account-allocation .liquidity{
  width:var(--liq-share);

  background:
    linear-gradient(
      90deg,
      #a25cfa,
      #bd63ec
    );
}


.account-allocation .cash{
  width:var(--cash-share);

  background:
    linear-gradient(
      90deg,
      #43bfd7,
      #52d1dd
    );
}


.account-allocation .zerorisk{
  width:var(--zr-share);

  background:
    linear-gradient(
      90deg,
      #58c994,
      #65daa3
    );
}


/* ---------- BREAKDOWN ---------- */

.account-breakdown{
  position:relative;
  z-index:1;

  display:grid;

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

  gap:8px;

  margin-top:13px;
}


.account-breakdown-item{
  appearance:none;

  min-width:0;

  padding:12px;

  text-align:left;

  border-radius:15px;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.016)
    );

  color:inherit;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.03);

  backdrop-filter:
    blur(20px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(145%);

  cursor:pointer;

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


.account-breakdown-item:active{
  transform:scale(.985);

  border-color:
    rgba(139,108,255,.20);
}


.account-breakdown-head{
  display:flex;

  align-items:center;

  gap:6px;

  min-width:0;

  color:#81899e;

  font-size:8px;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.055em;
}


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

  flex:0 0 auto;

  border-radius:999px;
}


.account-dot.wallet{
  background:#826aff;
}


.account-dot.liquidity{
  background:#ad60f2;
}


.account-dot.cash{
  background:#4bc9dc;
}


.account-dot.zerorisk{
  background:#5bd39b;
}


.account-breakdown-item strong{
  display:block;

  overflow:hidden;

  margin-top:8px;

  color:#eef0f8;

  font-size:15px;

  line-height:1;

  font-weight:630;

  letter-spacing:-.03em;

  white-space:nowrap;

  text-overflow:ellipsis;

  font-variant-numeric:
    tabular-nums;
}


.account-breakdown-item small{
  display:block;

  margin-top:5px;

  color:#686f84;

  font-size:8px;

  font-weight:600;
}


/* shimmer while overview loads */

.account-overview.loading
.account-breakdown-item strong,

.account-overview.loading
.account-total-value{
  opacity:.52;
}


/* =========================================================
   WALLET BALANCE
   ========================================================= */

#acc-tab-balance{
  padding:16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.048),
      rgba(255,255,255,.014)
    ),
    rgba(13,16,26,.73);
}


#acc-pie-wrap{
  margin-top:4px !important;

  padding:5px 0 0;
}


#acc-pie{
  max-height:270px;
}


/* table becomes an asset list */

.acc-table{
  margin-top:4px !important;

  border-spacing:
    0 7px !important;
}


.acc-table thead th{
  padding:
    0 7px 3px !important;

  color:#676f83 !important;

  font-size:8px !important;

  font-weight:600 !important;

  text-transform:uppercase;

  letter-spacing:.055em;
}


.acc-table tbody td{
  padding:
    10px 7px !important;

  border-color:
    rgba(255,255,255,.05) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.016)
    ) !important;

  font-size:11px !important;

  font-variant-numeric:
    tabular-nums;
}


.acc-table tbody td:first-child{
  border-radius:
    12px 0 0 12px;
}


.acc-table tbody td:last-child{
  border-radius:
    0 12px 12px 0;
}


.acc-table tbody img{
  width:22px !important;
  height:22px !important;

  box-shadow:
    0 5px 14px
    rgba(0,0,0,.22);
}


.acc-token-link{
  font-weight:620;

  text-decoration:none !important;
}


/* selected token */

.acc-table tbody tr.acc-sel td{
  border-color:
    rgba(139,108,255,.22)
    !important;

  box-shadow:
    inset 0 0 0 9999px
    rgba(123,97,255,.055)
    !important;
}


/* external explorer */

#acc-open-explorer-wrap{
  margin-top:15px !important;
}


#acc-open-explorer{
  background:
    rgba(255,255,255,.025)
    !important;

  border-color:
    rgba(255,255,255,.06)
    !important;

  color:#9199ad !important;

  box-shadow:none !important;
}


/* =========================================================
   INVESTMENTS
   ========================================================= */

#acc-tab-invest{
  padding:15px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.014)
    ),
    rgba(13,16,26,.72);
}


#inv-tabs{
  margin-top:11px !important;

  padding:4px;

  border-radius:16px;
}


#inv-tabs .seg{
  min-width:0;

  height:36px;

  line-height:36px;

  font-size:9px;

  font-weight:600;
}


#acc-tab-invest .inv-pane.card{
  margin:
    12px 0 0 !important;

  padding:
    13px !important;

  border-color:
    rgba(255,255,255,.045)
    !important;

  background:
    rgba(255,255,255,.018)
    !important;

  box-shadow:none !important;
}


#inv-liq-pie{
  max-height:270px;
}


/* investment cards */

#acc-tab-invest .cash-card{
  border-color:
    rgba(255,255,255,.055);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.016)
    );

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


/* =========================================================
   TRANSACTIONS
   ========================================================= */

#acc-tab-trx{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.014)
    ),
    rgba(13,16,26,.72);
}


#acc-trx-list > li{
  border:
    1px solid rgba(255,255,255,.05);

  border-radius:14px;

  padding:12px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.038),
      rgba(255,255,255,.014)
    );
}


/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:520px){

  #page-account #acc-btn{
    min-width:91px;
  }

  .account-overview{
    padding:15px !important;
  }

  .account-total-block{
    margin-top:19px;
  }

  .account-breakdown-item{
    padding:11px 10px;
  }

  .account-breakdown-item strong{
    font-size:14px;
  }

  .account-ident-text strong{
    max-width:180px;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
.account-overview{

  background:
    radial-gradient(
      520px 260px at 0% 0%,
      rgba(102,70,255,.09),
      transparent 67%
    ),
    rgba(255,255,255,.82)
    !important;
}


html[data-theme="light"]
.account-total-value,

html[data-theme="light"]
.account-breakdown-item strong,

html[data-theme="light"]
.account-ident-text strong{
  color:#171923;
}


html[data-theme="light"]
.account-breakdown-item{
  background:
    rgba(30,40,70,.025);

  border-color:
    rgba(20,30,60,.06);
}


html[data-theme="light"]
.acc-table tbody td{
  background:
    rgba(30,40,70,.025)
    !important;

  border-color:
    rgba(20,30,60,.06)
    !important;
}



/* =========================================================
   PayCash MiniApp V2.5
   Glass Analytics
   ========================================================= */


/* =========================================================
   DONUT STAGES
   ========================================================= */

#acc-pie-wrap,
#inv-liq-pie-wrap{
  position:relative;

  margin-top:8px !important;

  border-radius:21px;

  background:
    radial-gradient(
      260px 170px at 50% 52%,
      rgba(113,89,221,.045),
      transparent 72%
    );

  overflow:visible;
}


#acc-pie,
#inv-liq-pie{
  border-radius:20px;

  filter:
    saturate(.88);
}


/* tooltip of both diagrams */

#acc-pie-tooltip,
#inv-liq-pie-tooltip{
  padding:
    8px 10px !important;

  border-radius:
    11px !important;

  border:
    1px solid
    rgba(255,255,255,.075)
    !important;

  background:
    rgba(10,13,22,.80)
    !important;

  box-shadow:
    0 14px 35px
    rgba(0,0,0,.38)
    !important;

  backdrop-filter:
    blur(22px)
    saturate(160%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(160%);

  color:#f0eff6;

  font-size:
    10px !important;
}


/* hint no longer looks like documentation */

#inv-liq-pie-hint{
  margin:
    2px 2px 12px
    !important;

  color:#687087
    !important;

  font-size:
    9px !important;

  text-align:center;
}


/* =========================================================
   WALLET CARD
   ========================================================= */

#acc-tab-balance{
  background:
    radial-gradient(
      460px 230px at 50% 5%,
      rgba(120,93,224,.055),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    rgba(12,15,25,.72)
    !important;
}


#acc-tab-balance > .label{
  margin-bottom:0;

  color:#858da2;

  font-size:9px;
}


/* total table row */

.acc-table tbody tr:last-child td{
  background:
    rgba(255,255,255,.018)
    !important;

  color:#81899d;

  font-size:9px
    !important;
}


/* =========================================================
   LIQUIDITY
   ========================================================= */

#inv-pane-liq{
  background:
    radial-gradient(
      440px 220px at 50% 4%,
      rgba(120,93,224,.05),
      transparent 72%
    ),
    rgba(255,255,255,.014)
    !important;
}


/* cards generated by liquidity endpoint */

#invest-liq
.liq-pool-card{
  position:relative;

  margin-top:8px;

  padding:
    12px 13px;

  border:
    1px solid
    rgba(255,255,255,.055)
    !important;

  border-radius:
    15px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.042),
      rgba(255,255,255,.014)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025)
    !important;

  backdrop-filter:
    blur(18px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(145%);

  transition:
    opacity .2s ease,
    transform .18s ease,
    border-color .2s ease;
}


#invest-liq
.liq-pool-card.hit{
  border-color:
    rgba(135,117,255,.24)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(124,100,255,.065),
      rgba(255,255,255,.018)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035),
    0 0 24px
    rgba(120,91,255,.045)
    !important;
}


#invest-liq
.liq-pool-card.dim{
  opacity:.30;

  filter:
    saturate(.55);
}


.liq-pool-pair{
  font-size:12px;

  font-weight:620;
}


.liq-pool-pair img{
  width:21px;
  height:21px;

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

  box-shadow:
    0 5px 12px
    rgba(0,0,0,.20);
}


/* =========================================================
   CRYPTOCASH + ZERORISK BAR CHARTS
   ========================================================= */

.cash-bars-wrap{
  position:relative;

  margin:
    8px 0 12px
    !important;

  padding:
    13px 10px 11px
    !important;

  border-radius:
    18px !important;

  border:
    1px solid
    rgba(255,255,255,.055)
    !important;

  background:
    radial-gradient(
      300px 150px at 50% 100%,
      rgba(89,199,217,.035),
      transparent 75%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.034),
      rgba(255,255,255,.012)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025)
    !important;
}


.cash-bars-grid{
  height:177px
    !important;

  gap:9px
    !important;

  padding:
    5px 2px 0
    !important;
}


.cash-bar-stage{
  width:58px
    !important;

  height:135px
    !important;
}


/* glass track */

.cash-bar-stage::before{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  width:44px;
  height:100%;

  transform:
    translateX(-50%);

  border-radius:
    13px;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.010)
    );

  box-shadow:
    inset 0 1px 2px
    rgba(255,255,255,.018);
}


/* issued */

.cash-bar-fill-issued{
  width:39px
    !important;

  border-radius:
    11px 11px 9px 9px
    !important;

  border:
    1px solid
    rgba(139,117,255,.21)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(135,117,255,.72),
      rgba(111,89,215,.20)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.10),
    0 0 18px
    rgba(120,93,224,.055);
}


/* MLNK collateral */

.cash-bar-fill-mlnk{
  width:25px
    !important;

  border-radius:
    9px 9px 7px 7px
    !important;

  border:
    1px solid
    rgba(82,199,216,.20)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(80,198,216,.70),
      rgba(64,154,178,.18)
    )
    !important;

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


/* old horizontal notch becomes subtle */

.cash-bar-notch{
  width:46px
    !important;

  height:1px
    !important;

  background:
    rgba(255,255,255,.18)
    !important;
}


.cash-bar-marker{
  gap:4px
    !important;
}


.cash-bar-icon{
  width:21px
    !important;

  height:21px
    !important;

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

  background:
    rgba(18,21,31,.78)
    !important;

  box-shadow:
    0 6px 14px
    rgba(0,0,0,.25)
    !important;
}


.cash-bar-sum{
  padding:
    4px 7px
    !important;

  border-radius:
    999px
    !important;

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

  background:
    rgba(12,15,24,.74)
    !important;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.22),
    inset 0 1px 0
    rgba(255,255,255,.03);

  color:#d9dbe5;

  font-size:
    9px !important;

  font-weight:
    620 !important;

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);
}


.cash-bar-caption{
  color:#8a92a5
    !important;

  font-size:
    9px !important;

  font-weight:
    620 !important;
}


/* legend */

.cash-bars-legend{
  justify-content:
    flex-start !important;

  flex-wrap:wrap;

  gap:
    8px 15px !important;

  padding:
    8px 2px 0;

  border-top:
    1px solid
    rgba(255,255,255,.035);
}


.cash-legend-item{
  font-size:
    9px !important;

  color:#747c91
    !important;
}


.cash-legend-swatch{
  width:8px
    !important;

  height:8px
    !important;

  border-radius:
    999px !important;
}


.cash-legend-swatch.sw-issued{
  background:
    #8775ff
    !important;

  border:0
    !important;
}


.cash-legend-swatch.sw-mlnk{
  background:
    #57c6d9
    !important;

  border:0
    !important;
}


/* ZeroRisk uses same design, not old purple bars */

.zr-bars-wrap
.cash-bar-fill-issued{
  background:
    linear-gradient(
      180deg,
      rgba(91,207,160,.70),
      rgba(66,162,126,.18)
    )
    !important;

  border-color:
    rgba(91,207,160,.20)
    !important;
}


/* =========================================================
   INVESTMENT CARDS
   ========================================================= */

.cash-cards-list{
  display:grid;

  gap:8px;

  margin-top:10px
    !important;
}


.cash-card{
  margin:0
    !important;

  padding:
    12px 13px
    !important;

  border-radius:
    15px
    !important;

  border:
    1px solid
    rgba(255,255,255,.055)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.042),
      rgba(255,255,255,.014)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025)
    !important;

  transform:none
    !important;
}


.cash-card:hover{
  transform:none
    !important;

  border-color:
    rgba(135,117,255,.16)
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035)
    !important;
}


.cash-card-title{
  color:#dedfe7;

  font-size:
    11px !important;

  font-weight:
    620 !important;
}


.cash-card .muted{
  color:#737c91;

  font-size:9px;
}


.cash-card-chevron{
  color:#687087
    !important;

  font-weight:400;
}


/* =========================================================
   TRANSACTIONS — EVENT FEED
   ========================================================= */

#acc-tab-trx{
  padding:
    16px 14px
    !important;

  background:
    radial-gradient(
      440px 230px at 100% 0%,
      rgba(87,198,217,.035),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.043),
      rgba(255,255,255,.012)
    ),
    rgba(12,15,25,.73)
    !important;
}


#acc-trx-list{
  gap:8px
    !important;
}


#acc-trx-list > li{
  position:relative;

  overflow:hidden;

  padding:
    0 !important;

  border:
    1px solid
    rgba(255,255,255,.055)
    !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.041),
      rgba(255,255,255,.013)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025)
    !important;
}


#acc-trx-list > li::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:2px;

  background:
    linear-gradient(
      180deg,
      rgba(135,117,255,.78),
      rgba(87,198,217,.42)
    );
}


#acc-trx-list .evt{
  gap:0;

  padding:
    12px 13px
    13px 15px;
}


#acc-trx-list .evt-body{
  color:#929aad;

  font-size:
    10px;

  line-height:
    1.48;
}


.trx-v2-meta{
  margin-bottom:
    9px;

  padding-bottom:
    8px;

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

  color:#7d8599;

  font-size:
    9px;

  line-height:
    1.3;
}


.trx-v2-content{
  color:#9098aa;

  font-size:
    10px;

  line-height:
    1.48;
}


.trx-v2-content b{
  color:#d9dbe4;

  font-weight:650;
}


#acc-trx-list
.acc-link{
  color:#70cadb;

  text-decoration:none;

  border-bottom:0;
}


#acc-trx-list
.acc-link b{
  color:inherit;
}


#acc-trx-more{
  width:100%;

  margin-top:
    10px !important;
}


/* floating history buttons */

.scroll-top-btn{
  border:
    1px solid
    rgba(255,255,255,.075)
    !important;

  background:
    rgba(14,17,28,.80)
    !important;

  color:#aab1c2
    !important;

  box-shadow:
    0 14px 30px
    rgba(0,0,0,.30)
    !important;

  backdrop-filter:
    blur(22px)
    saturate(160%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(160%);
}


/* =========================================================
   INVESTMENT TABS polish
   ========================================================= */

#inv-tabs{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.040),
      rgba(255,255,255,.015)
    )
    !important;

  border-color:
    rgba(255,255,255,.06)
    !important;
}


#inv-tabs .seg.active{
  color:#eeeafa;
}


/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:520px){

  #acc-pie,
  #inv-liq-pie{
    max-height:
      250px;
  }

  .cash-bars-grid{
    height:
      168px !important;
  }

  .cash-bar-stage{
    height:
      128px !important;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
#acc-trx-list > li,

html[data-theme="light"]
.cash-card,

html[data-theme="light"]
#invest-liq .liq-pool-card{
  background:
    rgba(30,40,70,.025)
    !important;

  border-color:
    rgba(20,30,60,.06)
    !important;
}


html[data-theme="light"]
.trx-v2-content{
  color:#525b6e;
}


html[data-theme="light"]
.trx-v2-meta{
  color:#747c8e;

  border-color:
    rgba(20,30,60,.07);
}



/* =========================================================
   PayCash MiniApp V2.5.1
   Deep Glass — remove neutral gray surfaces
   ========================================================= */


/* ---------------------------------------------------------
   ACCOUNT: WALLET
   --------------------------------------------------------- */

#acc-tab-balance{
  border-color:
    rgba(124,104,224,.10)
    !important;

  background:
    radial-gradient(
      520px 280px at 10% -10%,
      rgba(112,79,255,.080),
      transparent 66%
    ),
    radial-gradient(
      380px 220px at 105% 60%,
      rgba(52,105,190,.035),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(14,17,29,.82),
      rgba(7,10,18,.78)
    )
    !important;

  box-shadow:
    0 18px 48px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.035)
    !important;

  backdrop-filter:
    blur(30px)
    saturate(155%)
    !important;

  -webkit-backdrop-filter:
    blur(30px)
    saturate(155%)
    !important;
}


/* область самой диаграммы — без серой подложки */

#acc-pie-wrap{
  background:
    radial-gradient(
      260px 190px at 50% 50%,
      rgba(116,91,220,.045),
      transparent 72%
    )
    !important;
}


/* ---------------------------------------------------------
   ACCOUNT: INVESTMENTS OUTER CARD
   --------------------------------------------------------- */

#acc-tab-invest{
  border-color:
    rgba(124,104,224,.09)
    !important;

  background:
    radial-gradient(
      520px 260px at 95% -10%,
      rgba(107,76,232,.065),
      transparent 67%
    ),
    linear-gradient(
      155deg,
      rgba(13,16,28,.82),
      rgba(7,10,18,.79)
    )
    !important;

  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.032)
    !important;
}


/* investment tabs — dark glass instead of gray */

#inv-tabs{
  background:
    linear-gradient(
      180deg,
      rgba(18,22,36,.76),
      rgba(9,12,22,.72)
    )
    !important;

  border-color:
    rgba(255,255,255,.065)
    !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035)
    !important;

  backdrop-filter:
    blur(26px)
    saturate(155%)
    !important;

  -webkit-backdrop-filter:
    blur(26px)
    saturate(155%)
    !important;
}


/* ---------------------------------------------------------
   INNER INVESTMENT PANES
   --------------------------------------------------------- */

#acc-tab-invest .inv-pane.card{
  border-color:
    rgba(255,255,255,.05)
    !important;

  background:
    radial-gradient(
      400px 200px at 50% 0%,
      rgba(104,79,205,.042),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(12,15,26,.76),
      rgba(7,10,18,.70)
    )
    !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025)
    !important;
}


/* конкретно LP pane */

#inv-pane-liq{
  background:
    radial-gradient(
      420px 220px at 50% 0%,
      rgba(101,78,211,.050),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(11,14,25,.77),
      rgba(6,9,17,.72)
    )
    !important;
}


#inv-liq-pie-wrap{
  background:
    radial-gradient(
      270px 185px at 50% 50%,
      rgba(103,80,212,.043),
      transparent 72%
    )
    !important;
}


/* ---------------------------------------------------------
   LP POSITION CARDS
   --------------------------------------------------------- */

#invest-liq .liq-pool-card{
  border-color:
    rgba(255,255,255,.055)
    !important;

  background:
    radial-gradient(
      240px 120px at 0% 0%,
      rgba(112,86,222,.032),
      transparent 75%
    ),
    linear-gradient(
      155deg,
      rgba(15,18,30,.74),
      rgba(8,11,20,.68)
    )
    !important;

  box-shadow:
    0 9px 24px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.028)
    !important;

  backdrop-filter:
    blur(22px)
    saturate(150%)
    !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(150%)
    !important;
}


#invest-liq .liq-pool-card.hit{
  border-color:
    rgba(135,117,255,.22)
    !important;

  background:
    radial-gradient(
      260px 130px at 0% 0%,
      rgba(123,97,255,.085),
      transparent 75%
    ),
    linear-gradient(
      155deg,
      rgba(18,20,35,.78),
      rgba(8,11,21,.71)
    )
    !important;
}


/* ---------------------------------------------------------
   CRYPTOCASH / ZERORISK
   --------------------------------------------------------- */

.cash-bars-wrap{
  border-color:
    rgba(255,255,255,.05)
    !important;

  background:
    radial-gradient(
      320px 180px at 50% 100%,
      rgba(76,188,209,.035),
      transparent 75%
    ),
    linear-gradient(
      155deg,
      rgba(12,15,26,.76),
      rgba(6,9,17,.72)
    )
    !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025)
    !important;
}


.cash-bar-stage::before{
  background:
    linear-gradient(
      180deg,
      rgba(20,24,38,.52),
      rgba(8,11,20,.38)
    )
    !important;

  border-color:
    rgba(255,255,255,.040)
    !important;
}


.cash-card{
  border-color:
    rgba(255,255,255,.052)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.72),
      rgba(8,11,20,.66)
    )
    !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025)
    !important;
}


/* ---------------------------------------------------------
   TRANSACTIONS
   --------------------------------------------------------- */

#acc-tab-trx{
  border-color:
    rgba(255,255,255,.055)
    !important;

  background:
    radial-gradient(
      450px 220px at 100% 0%,
      rgba(72,175,202,.027),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(13,16,27,.81),
      rgba(7,10,18,.77)
    )
    !important;
}


#acc-trx-list > li{
  border-color:
    rgba(255,255,255,.052)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.73),
      rgba(8,11,20,.67)
    )
    !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.11),
    inset 0 1px 0 rgba(255,255,255,.025)
    !important;
}


/* ---------------------------------------------------------
   TABLE ROWS
   --------------------------------------------------------- */

.acc-table tbody td{
  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.70),
      rgba(8,11,20,.64)
    )
    !important;

  border-color:
    rgba(255,255,255,.048)
    !important;
}


/* ---------------------------------------------------------
   SEGMENTS
   --------------------------------------------------------- */

#acc-tabs,
#inv-tabs{
  background:
    linear-gradient(
      180deg,
      rgba(18,21,34,.76),
      rgba(9,12,21,.72)
    )
    !important;
}


/* ---------------------------------------------------------
   GLOBAL ACCOUNT NESTED GLASS
   --------------------------------------------------------- */

#page-account .ob-box,
#page-account .cash-acc-item,
#page-account .cash-modal,
#page-account .tok-table-scroll{
  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.74),
      rgba(8,11,20,.68)
    )
    !important;

  border-color:
    rgba(255,255,255,.052)
    !important;
}


/* ---------------------------------------------------------
   Keep glass highlight, not gray wash
   --------------------------------------------------------- */

#page-account .card::after{
  background:
    linear-gradient(
      135deg,
      rgba(135,117,255,.028),
      rgba(255,255,255,.012) 28%,
      transparent 48%
    )
    !important;
}


/* ---------------------------------------------------------
   LIGHT MODE untouched stylistically
   --------------------------------------------------------- */

html[data-theme="light"] #acc-tab-balance,
html[data-theme="light"] #acc-tab-invest,
html[data-theme="light"] #acc-tab-trx{
  background:
    rgba(255,255,255,.84)
    !important;
}



/* =========================================================
   PayCash MiniApp V2.6
   Orderbook 2.0
   ========================================================= */


/* =========================================================
   MARKET HEADER
   ========================================================= */

.books-market-card{
  padding:16px !important;

  border-color:
    rgba(123,97,255,.11)
    !important;

  background:
    radial-gradient(
      460px 220px at 0% 0%,
      rgba(107,76,232,.095),
      transparent 70%
    ),
    radial-gradient(
      340px 180px at 105% 70%,
      rgba(68,183,208,.035),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(13,16,28,.82),
      rgba(7,10,18,.78)
    )
    !important;

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.28),
    inset 0 1px 0
    rgba(255,255,255,.035)
    !important;
}


.books-market-head{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:17px;
}


.books-market-title{
  color:#f0eef8;

  font-size:17px;
  line-height:1.05;

  font-weight:640;

  letter-spacing:-.035em;
}


.books-market-sub{
  margin-top:5px;

  color:#6e768a;

  font-size:9px;

  font-weight:520;
}


.books-market-live{
  display:flex;

  align-items:center;

  gap:6px;

  padding:6px 8px;

  border-radius:999px;

  border:
    1px solid
    rgba(90,219,155,.13);

  background:
    rgba(64,190,131,.05);

  color:#68d6a1;

  font-size:7px;

  font-weight:700;

  letter-spacing:.13em;
}


.books-market-live span{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#59d79d;

  box-shadow:
    0 0 8px
    rgba(89,215,157,.65);
}


.books-pair-label{
  margin-bottom:8px;
}


/* =========================================================
   SELECT
   ========================================================= */

.books-market-card
#pool-select .select-btn{
  min-height:51px;

  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  border-color:
    rgba(255,255,255,.065);

  font-size:14px;

  font-weight:620;
}


/* =========================================================
   MARKET SUMMARY
   ========================================================= */

.books-summary{
  display:grid;

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

  gap:7px;

  margin-top:12px;
}


.books-summary-item{
  min-width:0;

  padding:
    11px 9px;

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

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.038),
      rgba(255,255,255,.012)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

  backdrop-filter:
    blur(18px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(145%);
}


.books-summary-item span{
  display:block;

  overflow:hidden;

  color:#737b90;

  font-size:7px;

  font-weight:620;

  text-transform:uppercase;

  letter-spacing:.065em;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.books-summary-item strong{
  display:block;

  overflow:hidden;

  margin-top:7px;

  color:#eef0f6;

  font-size:13px;

  line-height:1;

  font-weight:640;

  letter-spacing:-.025em;

  font-variant-numeric:
    tabular-nums;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.books-summary-item small{
  display:block;

  margin-top:5px;

  color:#666e82;

  font-size:7px;

  font-weight:600;

  letter-spacing:.05em;
}


.books-summary-item.buy{
  border-color:
    rgba(80,198,216,.09);
}


.books-summary-item.buy strong{
  color:#9bdbe4;
}


.books-summary-item.mid{
  border-color:
    rgba(135,117,255,.10);
}


.books-summary-item.mid strong{
  color:#d8d0ff;
}


.books-summary-item.sell{
  border-color:
    rgba(215,111,145,.09);
}


.books-summary-item.sell strong{
  color:#dda9b9;
}


/* =========================================================
   ORDERS CONTAINER
   ========================================================= */

.books-orders-card{
  padding:14px !important;

  border-color:
    rgba(255,255,255,.052)
    !important;

  background:
    radial-gradient(
      420px 200px at 50% 0%,
      rgba(105,80,215,.035),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(12,15,26,.80),
      rgba(6,9,17,.76)
    )
    !important;

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.25),
    inset 0 1px 0
    rgba(255,255,255,.028)
    !important;
}


.books-orders-card
.label-row{
  margin-bottom:12px;
}


.books-orders-card
.label-row > .label{
  margin:0;

  color:#838ba0;
}


/* live update indicator */

.books-orders-card
.ob-upd{
  gap:5px;

  color:#697186;
}


.books-orders-card
.ob-dot-status{
  width:6px;
  height:6px;

  background:#56cf99;

  box-shadow:
    0 0 7px
    rgba(86,207,153,.45);
}


/* =========================================================
   BUY / SELL SIDES
   ========================================================= */

.ob-sides{
  gap:11px;
}


.ob-side{
  padding:11px !important;

  border-radius:18px !important;

  border:
    1px solid
    rgba(255,255,255,.052)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(14,17,29,.72),
      rgba(7,10,18,.68)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.024)
    !important;
}


.ob-buy{
  background:
    radial-gradient(
      300px 150px at 0% 0%,
      rgba(79,193,211,.030),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(14,17,29,.72),
      rgba(7,10,18,.68)
    )
    !important;
}


.ob-sell{
  background:
    radial-gradient(
      300px 150px at 100% 0%,
      rgba(207,94,134,.025),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(14,17,29,.72),
      rgba(7,10,18,.68)
    )
    !important;
}


/* =========================================================
   SIDE HEAD
   ========================================================= */

.ob-head{
  align-items:center;

  margin-bottom:10px;
}


.ob-title{
  gap:7px;

  color:#dfe1e8;

  font-size:12px;

  font-weight:620;
}


.ob-dot{
  width:6px;
  height:6px;
}


.ob-dot.buy{
  background:#55c8da;

  box-shadow:
    0 0 7px
    rgba(85,200,218,.40);
}


.ob-dot.sell{
  background:#d47b99;

  box-shadow:
    0 0 7px
    rgba(212,123,153,.35);
}


.ob-count{
  padding:
    3px 7px;

  border-radius:999px;

  border-color:
    rgba(255,255,255,.055);

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

  color:#6f778b;

  font-size:9px;

  font-weight:620;
}


/* =========================================================
   SORT PILLS
   ========================================================= */

.ob-sort{
  padding:3px;

  gap:2px;

  border-radius:12px;

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

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


.ob-pill{
  min-height:27px;

  padding:
    0 9px !important;

  border:0 !important;

  border-radius:9px !important;

  background:
    transparent !important;

  color:#687084 !important;

  font-size:9px !important;

  line-height:27px;

  font-weight:600 !important;
}


.ob-pill.active{
  color:#e5e1f7 !important;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.18),
      rgba(168,85,247,.08)
    )
    !important;

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


/* =========================================================
   ORDER CARDS
   ========================================================= */

.ob-list{
  gap:7px !important;
}


.ob-list:empty::before{
  content:"Нет активных ордеров";

  display:block;

  padding:20px 10px;

  text-align:center;

  color:#61697d;

  font-size:10px;
}


.ob-order{
  --depth:0%;

  position:relative;

  overflow:hidden !important;

  border-radius:14px !important;

  border:
    1px solid
    rgba(255,255,255,.047)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.69),
      rgba(8,11,20,.64)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.020)
    !important;

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


/*
   Relative order size / "depth".
   Очень мягкая подложка — это не execution progress.
*/

.ob-order::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  width:var(--depth);

  pointer-events:none;

  z-index:0;

  opacity:.72;
}


.ob-order.buy::after{
  left:0;

  background:
    linear-gradient(
      90deg,
      rgba(70,190,209,.105),
      rgba(70,190,209,.025),
      transparent
    );
}


.ob-order.sell::after{
  right:0;

  background:
    linear-gradient(
      270deg,
      rgba(207,94,134,.095),
      rgba(207,94,134,.020),
      transparent
    );
}


/*
   Старый execution-fill превращаем
   из большой заливки в тонкую нижнюю линию.
*/

.ob-order::before{
  top:auto !important;
  bottom:0 !important;

  height:2px !important;

  width:var(--fill,0%);

  z-index:2;

  opacity:.82;
}


.ob-order.buy::before{
  background:
    linear-gradient(
      90deg,
      #54c4d6,
      #8175ef
    )
    !important;
}


.ob-order.sell::before{
  background:
    linear-gradient(
      90deg,
      #b76c93,
      #d4859f
    )
    !important;
}


.ob-top,
.ob-body{
  position:relative;

  z-index:1;
}


.ob-top{
  padding:
    10px 11px !important;
}


/* =========================================================
   ORDER TYPOGRAPHY
   ========================================================= */

.ob-main{
  gap:5px;

  font-weight:620 !important;
}


.ob-main .num{
  color:#eef0f6;

  font-size:14px !important;

  font-weight:640 !important;

  letter-spacing:-.025em;
}


.ob-main .sym{
  color:#70788c;

  font-size:9px !important;

  font-weight:600 !important;
}


.ob-sub{
  margin-top:3px;

  gap:5px;

  color:#656d81;

  font-size:9px !important;

  font-weight:500 !important;
}


.ob-sub .acc-link{
  color:#8e9aae;

  border:0 !important;

  text-decoration:none;
}


.ob-right{
  min-width:112px !important;

  gap:7px;
}


.ob-price{
  max-width:126px !important;

  color:#dfe1e8;

  font-size:10px !important;

  font-weight:620 !important;

  letter-spacing:-.015em;
}


.ob-pct{
  padding:
    3px 6px;

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

  border-radius:999px;

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

  color:#697185;

  font-size:8px !important;

  font-weight:620 !important;
}


.ob-caret{
  color:#697185;
}


/* =========================================================
   OPEN ORDER DETAILS
   ========================================================= */

.ob-order.open{
  border-color:
    rgba(135,117,255,.13)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(18,20,34,.76),
      rgba(8,11,21,.69)
    )
    !important;
}


.ob-body{
  padding:
    0 10px !important;
}


.ob-order.open
.ob-body{
  padding-bottom:
    11px !important;
}


.ob-details{
  gap:7px !important;

  padding-top:5px;
}


.ob-box{
  padding:
    9px !important;

  border-radius:
    11px !important;

  border:
    1px solid
    rgba(255,255,255,.045)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.030),
      rgba(255,255,255,.010)
    )
    !important;
}


.ob-box .t{
  margin-bottom:5px;

  color:#697185;

  font-size:8px !important;

  font-weight:570 !important;

  text-transform:uppercase;

  letter-spacing:.045em;
}


.ob-box .v{
  color:#d9dbe4;

  font-size:10px !important;

  font-weight:600 !important;

  line-height:1.35;
}


/* =========================================================
   EXECUTION PROGRESS
   ========================================================= */

.ob-progress-line{
  margin-top:10px;
}


.ob-progress-top{
  margin-bottom:6px;

  color:#676f83;

  font-size:8px !important;

  font-weight:550 !important;
}


.ob-progress-wrap{
  height:4px !important;

  border-radius:999px;

  background:
    rgba(255,255,255,.035)
    !important;
}


.ob-progress{
  border-radius:999px;
}


.ob-order.buy
.ob-progress{
  background:
    linear-gradient(
      90deg,
      #54c4d6,
      #8175ef
    )
    !important;
}


.ob-order.sell
.ob-progress{
  background:
    linear-gradient(
      90deg,
      #b76c93,
      #d4859f
    )
    !important;
}


/* =========================================================
   TOTAL FOOTER
   ========================================================= */

.ob-total{
  margin-top:9px !important;

  padding:
    9px 4px 1px
    !important;

  border-top:
    1px solid
    rgba(255,255,255,.045)
    !important;

  color:#687084 !important;

  font-size:8px !important;

  font-weight:570 !important;

  text-transform:uppercase;

  letter-spacing:.045em;
}


.ob-total .v{
  color:#aeb4c2 !important;

  font-size:10px !important;

  font-weight:620 !important;

  text-transform:none;

  letter-spacing:0;
}


/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:520px){

  .books-market-card{
    padding:15px !important;
  }

  .books-summary{
    gap:6px;
  }

  .books-summary-item{
    padding:
      10px 8px;
  }

  .books-summary-item strong{
    font-size:12px;
  }

  /*
    Показываем live-индикатор,
    но убираем длинное слово "Обновлено".
  */

  .books-orders-card
  .ob-upd{
    display:flex !important;
  }

  .books-orders-card
  .ob-upd > .muted:first-of-type{
    display:none;
  }

  .books-orders-card
  #ob-upd-time{
    font-size:8px;
  }

  .ob-side{
    padding:9px !important;
  }

  .ob-head{
    gap:6px;
  }

  .ob-title{
    font-size:11px;
  }

  .ob-top{
    padding:
      9px 9px !important;
  }

  .ob-main .num{
    font-size:13px !important;
  }

  .ob-right{
    min-width:105px !important;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
.books-market-card,

html[data-theme="light"]
.books-orders-card,

html[data-theme="light"]
.ob-side,

html[data-theme="light"]
.ob-order{
  background:
    rgba(255,255,255,.82)
    !important;

  border-color:
    rgba(20,30,60,.07)
    !important;
}



/* =========================================================
   PayCash MiniApp V2.7
   Calculator 2.0
   ========================================================= */


/* =========================================================
   TOP SWITCH
   ========================================================= */

.calc-v2-tabs-card{
  padding:
    12px !important;

  border-color:
    rgba(123,97,255,.09)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(13,16,28,.80),
      rgba(7,10,18,.77)
    )
    !important;
}


.calc-v2-eyebrow{
  margin:
    2px 4px 9px;

  color:#697186;

  font-size:8px;

  font-weight:650;

  letter-spacing:.13em;
}


#calc-tabs{
  padding:4px;

  border-radius:16px;

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

  background:
    linear-gradient(
      180deg,
      rgba(18,21,34,.76),
      rgba(9,12,21,.72)
    );

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


#calc-tabs .seg{
  height:38px;

  line-height:38px;

  font-size:11px;

  font-weight:600;

  border-radius:12px;
}


#calc-tabs .seg-indicator{
  top:4px !important;

  height:
    calc(100% - 8px)
    !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.24),
      rgba(168,85,247,.11)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04),
    0 0 20px
    rgba(123,97,255,.055);
}


/* =========================================================
   GENERIC CALCULATOR CARD
   ========================================================= */

#page-calc .calc-tab{
  border-color:
    rgba(255,255,255,.052)
    !important;

  background:
    radial-gradient(
      470px 230px at 100% 0%,
      rgba(104,76,220,.045),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(13,16,28,.81),
      rgba(7,10,18,.77)
    )
    !important;

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.25),
    inset 0 1px 0
    rgba(255,255,255,.027)
    !important;
}


.calc-v2-head{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:17px;
}


.calc-v2-title{
  color:#eeedf5;

  font-size:17px;

  line-height:1.05;

  font-weight:640;

  letter-spacing:-.035em;
}


.calc-v2-subtitle{
  margin-top:5px;

  color:#6d7589;

  font-size:9px;

  line-height:1.35;
}


.calc-v2-icon{
  width:34px;
  height:34px;

  flex:0 0 auto;

  display:flex;

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

  border-radius:11px;

  border:
    1px solid
    rgba(87,198,217,.10);

  background:
    rgba(87,198,217,.045);
}


.calc-v2-icon svg{
  width:18px;
  height:18px;

  fill:none;

  stroke:#63c7d8;

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.calc-v2-icon.mlnk{
  border-color:
    rgba(135,117,255,.13);

  background:
    rgba(135,117,255,.06);
}


.calc-v2-icon.mlnk img{
  width:25px;
  height:25px;
}


/* =========================================================
   POOL SELECT + TVL
   ========================================================= */

#yield-pool-select
.select-btn{
  min-height:50px;

  font-size:13px;

  font-weight:620;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.043),
      rgba(255,255,255,.014)
    );

  border-color:
    rgba(255,255,255,.06);
}


.calc-pool-value{
  margin-top:12px;

  padding:
    12px 13px;

  border-radius:15px;

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

  background:
    linear-gradient(
      155deg,
      rgba(16,19,31,.68),
      rgba(8,11,20,.61)
    );

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


.calc-pool-value > span{
  display:block;

  color:#747c91;

  font-size:8px;

  font-weight:620;

  text-transform:uppercase;

  letter-spacing:.07em;
}


.calc-pool-value
.input-suffix{
  margin-top:5px;
}


.calc-pool-value input{
  min-height:0 !important;

  padding:
    2px 88px 2px 0 !important;

  border:0 !important;

  background:
    transparent !important;

  box-shadow:none !important;

  color:#f0f1f6;

  font-size:22px !important;

  line-height:1.15;

  font-weight:640 !important;

  letter-spacing:-.04em;

  font-variant-numeric:
    tabular-nums;
}


.calc-pool-value
.input-suffix .suffix{
  right:0;

  color:#6b7387;

  font-size:8px;

  font-weight:600;
}


.calc-pool-value small{
  display:block;

  margin-top:5px;

  color:#60687b;

  font-size:8px;
}


/* =========================================================
   SHARE DONUT
   ========================================================= */

.calc-v2-share-pill{
  padding:
    6px 9px;

  border-radius:999px;

  border:
    1px solid
    rgba(135,117,255,.14);

  background:
    rgba(135,117,255,.055);

  color:#c5bbfa;

  font-size:9px;

  font-weight:650;
}


.calc-donut-stage{
  position:relative;

  margin:
    -2px 0 0;

  min-height:260px;

  background:
    radial-gradient(
      260px 180px at 50% 50%,
      rgba(108,83,215,.045),
      transparent 72%
    );
}


#donut{
  max-height:260px;

  filter:
    saturate(.90);
}


#badge{
  z-index:10;

  padding:
    7px 9px;

  border-radius:999px;

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

  background:
    rgba(9,12,20,.82);

  color:#d9dbe5;

  font-size:9px;

  font-weight:600;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.30);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/* share legend */

.calc-share-legend{
  display:grid;

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

  gap:8px;

  margin-top:2px;
}


.calc-share-item{
  display:flex;

  align-items:center;

  gap:9px;

  padding:
    10px 11px;

  border-radius:14px;

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

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.67),
      rgba(8,11,20,.60)
    );
}


.calc-share-dot{
  width:8px;
  height:8px;

  flex:0 0 auto;

  border-radius:50%;
}


.calc-share-dot.pool{
  background:#57c6d9;

  box-shadow:
    0 0 8px
    rgba(87,198,217,.25);
}


.calc-share-dot.user{
  background:#8775ff;

  box-shadow:
    0 0 8px
    rgba(135,117,255,.28);
}


.calc-share-item small{
  display:block;

  color:#6d7589;

  font-size:7px;

  font-weight:620;

  letter-spacing:.06em;
}


.calc-share-item strong{
  display:block;

  margin-top:4px;

  color:#e5e7ee;

  font-size:12px;

  font-weight:630;
}


/* =========================================================
   INPUT FIELDS
   ========================================================= */

.calc-fields-title{
  margin:
    20px 2px 9px;

  color:#747c91;

  font-size:8px;

  font-weight:650;

  text-transform:uppercase;

  letter-spacing:.10em;
}


.calc-input-grid{
  display:grid;

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

  gap:8px;
}


.calc-input-card{
  display:block;

  min-width:0;

  padding:
    11px 11px 10px;

  border-radius:15px;

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

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.68),
      rgba(8,11,20,.62)
    );

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


.calc-input-card > span{
  display:block;

  color:#7a8296;

  font-size:8px;

  font-weight:620;

  text-transform:uppercase;

  letter-spacing:.055em;
}


.calc-input-card
.input-suffix{
  margin-top:6px;
}


.calc-input-card input{
  min-height:38px !important;

  padding:
    6px 24px 6px 0
    !important;

  border:0 !important;

  border-radius:0 !important;

  background:
    transparent !important;

  box-shadow:none !important;

  color:#eeeff5;

  font-size:18px !important;

  font-weight:620;

  letter-spacing:-.03em;

  font-variant-numeric:
    tabular-nums;
}


.calc-input-card
.input-suffix .suffix{
  right:0;

  color:#777f93;

  font-size:10px;
}


.calc-input-card small{
  display:block;

  min-height:20px;

  margin-top:4px;

  color:#5f677a;

  font-size:7px;

  line-height:1.35;
}


.calc-input-wide{
  grid-column:
    1 / -1;
}


/* focus */

.calc-input-card:focus-within{
  border-color:
    rgba(135,117,255,.20);

  background:
    linear-gradient(
      155deg,
      rgba(22,22,39,.74),
      rgba(9,12,22,.66)
    );

  box-shadow:
    0 0 0 3px
    rgba(123,97,255,.04),
    inset 0 1px 0
    rgba(255,255,255,.03);
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.calc-primary-btn{
  width:100%;

  min-height:49px;

  margin-top:10px;

  border-radius:15px
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(117,91,240,.28),
      rgba(151,79,223,.15)
    )
    !important;

  border-color:
    rgba(135,117,255,.17)
    !important;

  color:#f0ecff;

  font-size:11px;

  font-weight:630 !important;

  box-shadow:
    0 10px 26px
    rgba(0,0,0,.16),
    inset 0 1px 0
    rgba(255,255,255,.045)
    !important;
}


/* =========================================================
   INCOME RESULT
   ========================================================= */

.calc-income-result{
  margin-top:11px
    !important;

  padding:
    15px;

  border-radius:17px;

  border:
    1px solid
    rgba(91,207,160,.11);

  background:
    radial-gradient(
      320px 160px at 100% 0%,
      rgba(91,207,160,.05),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(13,21,27,.74),
      rgba(7,12,18,.68)
    );

  animation:
    calcResultIn .28s
    cubic-bezier(.2,.8,.2,1)
    both;
}


@keyframes calcResultIn{
  from{
    opacity:0;
    transform:
      translateY(5px);
  }

  to{
    opacity:1;
    transform:none;
  }
}


.calc-income-result > span{
  display:block;

  color:#6fc99d;

  font-size:8px;

  font-weight:650;

  letter-spacing:.09em;
}


.calc-income-result > div{
  display:flex;

  align-items:baseline;

  gap:7px;

  margin-top:8px;
}


.calc-income-result strong{
  color:#eff7f2;

  font-size:27px;

  line-height:1;

  font-weight:640;

  letter-spacing:-.045em;

  font-variant-numeric:
    tabular-nums;
}


.calc-income-result small{
  color:#6b8b7c;

  font-size:8px;

  font-weight:600;
}


.calc-income-result p{
  margin:
    8px 0 0;

  color:#62756d;

  font-size:8px;
}


/* =========================================================
   PRICE CALCULATOR
   ========================================================= */

.calc-v2-price-card{
  padding:16px
    !important;
}


.calc-price-current{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    28px
    minmax(0,1fr);

  align-items:center;

  gap:7px;

  margin-top:4px;
}


.calc-price-current-main,
.calc-price-target{
  min-width:0;

  padding:
    11px;

  border-radius:15px;

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

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.68),
      rgba(8,11,20,.61)
    );
}


.calc-price-current-main > span,
.calc-price-target > span{
  display:block;

  color:#737b90;

  font-size:7px;

  font-weight:650;

  letter-spacing:.07em;
}


.calc-price-input-hero{
  display:flex;

  align-items:baseline;

  gap:5px;

  margin-top:7px;
}


.calc-price-input-hero input{
  width:100%;

  min-width:0;

  min-height:0
    !important;

  padding:0
    !important;

  border:0
    !important;

  border-radius:0
    !important;

  background:
    transparent
    !important;

  box-shadow:none
    !important;

  color:#eeeff5;

  font-size:17px
    !important;

  line-height:1;

  font-weight:640;

  letter-spacing:-.035em;

  font-variant-numeric:
    tabular-nums;
}


.calc-price-input-hero.target
input{
  color:#d4caff;
}


.calc-price-input-hero small{
  color:#626a7e;

  font-size:7px;
}


.calc-price-arrow{
  color:#575f73;

  text-align:center;

  font-size:18px;

  font-weight:400;
}


/* delta */

.calc-price-delta{
  display:inline-flex;

  margin-top:9px;

  padding:
    6px 9px;

  border-radius:999px;

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

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

  color:#7c8498;

  font-size:8px;

  font-weight:600;
}


.calc-price-delta.up{
  color:#68cf9d;

  border-color:
    rgba(91,207,160,.11);

  background:
    rgba(91,207,160,.045);
}


.calc-price-delta.down{
  color:#d99aae;

  border-color:
    rgba(215,111,145,.11);

  background:
    rgba(215,111,145,.04);
}


/* market stats */

.calc-price-market{
  display:grid;

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

  gap:8px;
}


.calc-market-stat{
  min-width:0;

  padding:
    11px;

  border-radius:14px;

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

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.66),
      rgba(8,11,20,.60)
    );
}


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

  color:#747c90;

  font-size:7px;

  font-weight:630;

  letter-spacing:.06em;
}


.calc-market-stat input{
  min-height:0
    !important;

  margin-top:6px;

  padding:0
    !important;

  border:0
    !important;

  border-radius:0
    !important;

  background:
    transparent
    !important;

  box-shadow:none
    !important;

  color:#e9ebf1;

  font-size:15px
    !important;

  font-weight:630;

  letter-spacing:-.025em;

  font-variant-numeric:
    tabular-nums;
}


.calc-market-stat small{
  display:block;

  margin-top:5px;

  color:#5f677a;

  font-size:7px;
}


/* loader */

.calc-price-loading{
  margin-top:12px
    !important;
}


/* =========================================================
   PRICE RESULTS
   ========================================================= */

.calc-price-results{
  margin-top:14px
    !important;

  animation:
    calcResultIn .28s
    cubic-bezier(.2,.8,.2,1)
    both;
}


.calc-price-result-grid{
  display:grid;

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

  gap:8px;
}


.calc-result-card{
  min-width:0;

  padding:
    12px;

  border-radius:15px;

  border:
    1px solid
    rgba(135,117,255,.11);

  background:
    radial-gradient(
      220px 100px at 100% 0%,
      rgba(135,117,255,.045),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(17,18,32,.70),
      rgba(8,11,20,.62)
    );
}


.calc-result-card.secondary{
  border-color:
    rgba(255,255,255,.05);

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.67),
      rgba(8,11,20,.60)
    );
}


.calc-result-card .label{
  min-height:25px;

  margin:0;

  color:#7a8296;

  font-size:7px;

  line-height:1.3;

  font-weight:630;

  letter-spacing:.045em;
}


.calc-result-card input{
  min-height:0
    !important;

  margin-top:7px;

  padding:0
    !important;

  border:0
    !important;

  border-radius:0
    !important;

  background:
    transparent
    !important;

  box-shadow:none
    !important;

  color:#ddd5ff;

  font-size:17px
    !important;

  line-height:1.05;

  font-weight:640;

  letter-spacing:-.035em;

  font-variant-numeric:
    tabular-nums;
}


.calc-result-card.secondary input{
  color:#e2e4eb;
}


.calc-result-card small{
  display:block;

  margin-top:5px;

  color:#626a7e;

  font-size:7px;

  font-weight:600;
}


.calc-after-title{
  margin-top:16px;
}


/* disclaimer */

.calc-disclaimer{
  margin:
    15px 2px 1px;

  padding-top:10px;

  border-top:
    1px solid
    rgba(255,255,255,.04);

  color:#596174;

  font-size:8px;

  line-height:1.4;
}


/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:520px){

  .calc-v2-title{
    font-size:16px;
  }

  .calc-price-current{
    grid-template-columns:
      minmax(0,1fr)
      22px
      minmax(0,1fr);
  }

  .calc-price-current-main,
  .calc-price-target{
    padding:
      10px 9px;
  }

  .calc-price-input-hero input{
    font-size:
      15px !important;
  }

  .calc-input-card input{
    font-size:
      17px !important;
  }

  .calc-income-result strong{
    font-size:25px;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
#page-calc .calc-tab,

html[data-theme="light"]
.calc-v2-tabs-card{
  background:
    rgba(255,255,255,.84)
    !important;

  border-color:
    rgba(20,30,60,.07)
    !important;
}


html[data-theme="light"]
.calc-input-card,

html[data-theme="light"]
.calc-share-item,

html[data-theme="light"]
.calc-pool-value,

html[data-theme="light"]
.calc-market-stat,

html[data-theme="light"]
.calc-result-card,

html[data-theme="light"]
.calc-price-current-main,

html[data-theme="light"]
.calc-price-target{
  background:
    rgba(30,40,70,.025);

  border-color:
    rgba(20,30,60,.06);
}



/* =========================================================
   PayCash MiniApp V2.8
   Explorer 2.0
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.explorer-hero{
  overflow:hidden !important;

  padding:17px !important;

  border-color:
    rgba(123,97,255,.12)
    !important;

  background:
    radial-gradient(
      480px 250px at 0% 0%,
      rgba(111,78,242,.145),
      transparent 68%
    ),
    radial-gradient(
      380px 220px at 105% 80%,
      rgba(70,184,207,.045),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(13,16,28,.83),
      rgba(7,10,18,.79)
    )
    !important;
}


.explorer-hero-top{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  position:relative;
  z-index:1;
}


.explorer-eyebrow{
  color:#80769f;

  font-size:8px;

  font-weight:680;

  letter-spacing:.14em;
}


.explorer-title{
  margin-top:7px;

  color:#f2f1f7;

  font-size:29px;

  line-height:1;

  font-weight:640;

  letter-spacing:-.05em;
}


.explorer-subtitle{
  max-width:250px;

  margin-top:8px;

  color:#737b90;

  font-size:9px;

  line-height:1.4;
}


/* orbit mark */

.explorer-orbit{
  position:relative;

  width:47px;
  height:47px;

  flex:0 0 auto;

  border-radius:50%;

  border:
    1px solid
    rgba(135,117,255,.13);

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(135,117,255,.10),
      rgba(135,117,255,.025) 45%,
      transparent 70%
    );

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


.explorer-orbit::before{
  content:"";

  position:absolute;

  inset:9px;

  border:
    1px solid
    rgba(87,198,217,.20);

  border-radius:50%;

  transform:
    rotate(-28deg)
    scaleY(.55);
}


.explorer-orbit::after{
  content:"";

  position:absolute;

  inset:8px;

  border:
    1px solid
    rgba(135,117,255,.25);

  border-radius:50%;

  transform:
    rotate(35deg)
    scaleY(.48);
}


.explorer-orbit span:nth-child(1){
  position:absolute;

  width:5px;
  height:5px;

  top:12px;
  right:9px;

  border-radius:50%;

  background:#8775ff;

  box-shadow:
    0 0 10px
    rgba(135,117,255,.60);
}


.explorer-orbit span:nth-child(2){
  position:absolute;

  width:4px;
  height:4px;

  left:8px;
  bottom:13px;

  border-radius:50%;

  background:#57c6d9;

  box-shadow:
    0 0 9px
    rgba(87,198,217,.50);
}


.explorer-orbit i{
  position:absolute;

  width:5px;
  height:5px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:#d9d3ff;
}


/* hero status */

.explorer-status-grid{
  display:grid;

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

  gap:7px;

  margin-top:19px;
}


.explorer-status{
  min-width:0;

  padding:
    10px 11px;

  border-radius:14px;

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

  background:
    linear-gradient(
      155deg,
      rgba(16,19,31,.65),
      rgba(8,11,20,.59)
    );

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


.explorer-status > span{
  display:block;

  color:#687084;

  font-size:7px;

  font-weight:650;

  letter-spacing:.08em;
}


.explorer-status > strong{
  display:block;

  margin-top:6px;

  color:#e5e7ee;

  font-size:13px;

  line-height:1;

  font-weight:640;
}


.explorer-live{
  display:flex !important;

  align-items:center;

  gap:5px;

  color:#68d5a1
    !important;
}


.explorer-live i{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#5bd69d;

  box-shadow:
    0 0 8px
    rgba(91,214,157,.55);
}


/* =========================================================
   MAIN TABS
   ========================================================= */

.explorer-tabs-card{
  padding:4px
    !important;

  border:0 !important;

  background:
    transparent !important;

  box-shadow:none
    !important;

  backdrop-filter:none
    !important;

  -webkit-backdrop-filter:none
    !important;
}


#expl-tabs{
  padding:4px;

  border-radius:17px;

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

  background:
    linear-gradient(
      180deg,
      rgba(18,21,34,.76),
      rgba(9,12,21,.72)
    );

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


#expl-tabs .seg{
  min-width:0;

  height:39px;

  line-height:39px;

  border-radius:12px;

  font-size:10px;

  font-weight:600;
}


#expl-tabs .seg-indicator{
  top:4px !important;

  height:
    calc(100% - 8px)
    !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.23),
      rgba(168,85,247,.10)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04),
    0 0 20px
    rgba(123,97,255,.05);
}


/* =========================================================
   EXPLORER PANES
   ========================================================= */

#page-market .expl-pane,
#expl-sc-content .expl-sc-pane{
  padding:16px
    !important;

  border-color:
    rgba(255,255,255,.052)
    !important;

  background:
    radial-gradient(
      460px 220px at 100% 0%,
      rgba(105,77,220,.040),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(13,16,28,.81),
      rgba(7,10,18,.77)
    )
    !important;

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.24),
    inset 0 1px 0
    rgba(255,255,255,.026)
    !important;
}


.expl-pane-title{
  color:#eeedf5;

  font-size:17px;

  line-height:1;

  font-weight:640;

  letter-spacing:-.035em;

  margin-bottom:6px;
}


/* =========================================================
   TOKEN SEARCH
   ========================================================= */

.explorer-token-search{
  margin-top:14px;
}


#expl-token-search{
  min-height:47px;

  border-color:
    rgba(255,255,255,.058);

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.68),
      rgba(8,11,20,.61)
    );
}


#expl-token-clear{
  min-width:77px;

  background:
    rgba(255,255,255,.025)
    !important;

  border-color:
    rgba(255,255,255,.055)
    !important;

  color:#8a92a6;
}


/* =========================================================
   TOKEN GRID
   ========================================================= */

.token-grid{
  display:grid
    !important;

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

  gap:8px
    !important;

  margin-top:3px;
}


.tok-card{
  position:relative;

  display:flex
    !important;

  flex-direction:column;

  align-items:stretch
    !important;

  justify-content:flex-start
    !important;

  min-width:0;

  min-height:118px;

  padding:12px
    !important;

  border-radius:16px
    !important;

  border:
    1px solid
    rgba(255,255,255,.052)
    !important;

  background:
    radial-gradient(
      220px 120px at 0% 0%,
      rgba(110,84,221,.040),
      transparent 74%
    ),
    linear-gradient(
      155deg,
      rgba(15,18,30,.70),
      rgba(8,11,20,.64)
    )
    !important;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.10),
    inset 0 1px 0
    rgba(255,255,255,.024)
    !important;

  cursor:pointer;

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


.tok-card:active{
  transform:
    scale(.985);
}


.tok-card:focus-visible{
  outline:none;

  border-color:
    rgba(135,117,255,.28)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(123,97,255,.05)
    !important;
}


.tok-card-top{
  display:flex;

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

  gap:8px;
}


.tok-left{
  display:flex;

  align-items:center;

  min-width:0;

  gap:9px;
}


.tok-icon-wrap{
  width:34px;
  height:34px;

  flex:0 0 auto;

  display:flex;

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

  border-radius:11px;

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

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

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


.tok-icon{
  width:25px
    !important;

  height:25px
    !important;

  object-fit:contain;
}


.tok-main{
  min-width:0;
}


.tok-sym{
  overflow:hidden;

  color:#e9eaf1;

  font-size:12px
    !important;

  line-height:1;

  font-weight:650
    !important;

  letter-spacing:-.015em;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.tok-name{
  overflow:hidden;

  margin-top:4px;

  color:#727a8f;

  font-size:8px;

  line-height:1.15;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.tok-arrow{
  flex:0 0 auto;

  color:#61697d;

  font-size:21px;

  font-weight:300;
}


.tok-contract{
  align-self:flex-start;

  max-width:100%;

  overflow:hidden;

  margin-top:11px;

  padding:
    4px 7px;

  border-radius:999px;

  border:
    1px solid
    rgba(135,117,255,.08);

  background:
    rgba(135,117,255,.035);

  color:#8983a4
    !important;

  font-size:7px
    !important;

  font-weight:600
    !important;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.tok-desc{
  display:-webkit-box;

  overflow:hidden;

  margin-top:7px;

  color:#61697d
    !important;

  font-size:7px
    !important;

  line-height:1.35;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}


/* =========================================================
   CONTRACT SEARCH + TABS
   ========================================================= */

#expl-pane-contracts
.acc-grid{
  margin-top:
    14px !important;
}


#expl-sc-tabs{
  margin-top:2px;

  padding:4px;

  border-radius:16px;

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

  background:
    linear-gradient(
      180deg,
      rgba(18,21,34,.72),
      rgba(9,12,21,.68)
    );
}


#expl-sc-tabs .seg{
  min-width:0;

  height:37px;

  line-height:37px;

  font-size:9px;

  font-weight:600;
}


#expl-sc-tabs .seg-indicator{
  top:4px !important;

  height:
    calc(100% - 8px)
    !important;

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.21),
      rgba(168,85,247,.09)
    )
    !important;
}


#expl-sc-current{
  display:inline-flex;

  padding:
    6px 9px;

  border-radius:999px;

  border:
    1px solid
    rgba(87,198,217,.09);

  background:
    rgba(87,198,217,.035);

  color:#7bbcc7;

  font-size:8px;
}


/* =========================================================
   RAW CONTRACT EVENTS
   ========================================================= */

#expl-sc-ops-list{
  gap:8px !important;
}


#expl-sc-ops-list
> li,
.expl-raw-event{
  position:relative;

  overflow:hidden;

  padding:
    12px 12px 12px 14px
    !important;

  border:
    1px solid
    rgba(255,255,255,.05)
    !important;

  border-radius:15px
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.69),
      rgba(8,11,20,.63)
    )
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.022)
    !important;
}


#expl-sc-ops-list
> li::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:2px;

  background:
    linear-gradient(
      180deg,
      rgba(87,198,217,.68),
      rgba(135,117,255,.42)
    );
}


#expl-sc-pane-ops
pre.mono{
  max-height:240px;

  overflow:auto;

  padding:9px;

  border-radius:11px;

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

  background:
    rgba(5,8,15,.46);

  color:#9da5b7;

  font-size:9px;

  line-height:1.3;
}


/* =========================================================
   SERVICES
   ========================================================= */

.expl-services-grid{
  display:grid;

  gap:8px;

  margin-top:13px;
}


.expl-service-card{
  position:relative;

  padding:
    13px 38px 13px 13px;

  border-radius:15px;

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

  background:
    radial-gradient(
      240px 110px at 0% 0%,
      rgba(87,198,217,.030),
      transparent 74%
    ),
    linear-gradient(
      155deg,
      rgba(15,18,30,.68),
      rgba(8,11,20,.62)
    );

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


.expl-service-card::after{
  content:"›";

  position:absolute;

  right:14px;
  top:50%;

  transform:
    translateY(-50%);

  color:#5e6679;

  font-size:22px;

  font-weight:300;
}


.expl-service-card
.label{
  margin-bottom:5px;

  color:#dfe1e8;

  font-size:11px;

  letter-spacing:-.01em;

  text-transform:none;
}


.expl-service-card
.muted{
  color:#687084;

  font-size:8px;

  line-height:1.45;
}


/* =========================================================
   TOKEN MODAL — DEEP GLASS
   ========================================================= */

#token-modal-overlay{
  background:
    rgba(2,4,9,.68)
    !important;

  backdrop-filter:
    blur(18px)
    saturate(120%)
    !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(120%)
    !important;
}


#token-modal-overlay
.cash-modal{
  width:min(
    calc(100% - 20px),
    480px
  );

  max-width:480px;

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

  padding:
    17px 15px 15px;

  border-radius:24px;

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

  background:
    radial-gradient(
      440px 250px at 0% 0%,
      rgba(111,78,242,.11),
      transparent 70%
    ),
    linear-gradient(
      155deg,
      rgba(14,17,29,.96),
      rgba(6,9,17,.95)
    );

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.58),
    inset 0 1px 0
    rgba(255,255,255,.04);
}


#token-modal-overlay
.cash-modal-close{
  top:12px;
  right:12px;

  width:31px;
  height:31px;

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

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

  color:#82899c;

  font-size:18px;

  line-height:28px;
}


/* token top */

.token-modal-top{
  padding-right:37px;
}


.token-modal-left{
  display:flex;

  align-items:center;

  gap:11px;
}


.token-modal-icon{
  width:40px !important;
  height:40px !important;

  padding:5px;

  border-radius:13px;

  border:
    1px solid
    rgba(135,117,255,.12);

  background:
    linear-gradient(
      155deg,
      rgba(135,117,255,.10),
      rgba(255,255,255,.015)
    );
}


.token-modal-title{
  color:#f0eff6;

  font-size:20px
    !important;

  line-height:1;

  font-weight:650
    !important;

  letter-spacing:-.04em;
}


/* token key values */

.token-kv{
  display:grid;

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

  gap:7px;

  margin-top:14px;
}


.token-kv-row{
  display:block
    !important;

  min-width:0;

  padding:
    10px 11px
    !important;

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

  border-radius:13px;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.67),
      rgba(8,11,20,.60)
    );
}


.token-kv-row .k{
  color:#70788d
    !important;

  font-size:7px
    !important;

  font-weight:620;

  text-transform:uppercase;

  letter-spacing:.045em;
}


.token-kv-row .v{
  overflow:hidden;

  margin-top:6px;

  color:#e6e8ef
    !important;

  font-size:13px
    !important;

  font-weight:630
    !important;

  letter-spacing:-.025em;

  white-space:nowrap;

  text-overflow:ellipsis;

  font-variant-numeric:
    tabular-nums;
}


/* accordion */

#token-modal-overlay
.token-accordion{
  display:grid;

  gap:7px;

  margin-top:12px;
}


#token-modal-overlay
.cash-acc-item{
  border:
    1px solid
    rgba(255,255,255,.05)
    !important;

  border-radius:15px
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.68),
      rgba(8,11,20,.62)
    )
    !important;
}


#token-modal-overlay
.cash-acc-head{
  min-height:46px;

  padding:
    11px 12px;

  color:#daddE6;

  font-size:10px;

  font-weight:620;
}


#token-modal-overlay
.cash-acc-icon{
  color:#737b8f;

  font-size:17px;
}


/* holders */

#token-modal-overlay
.tok-table-scroll{
  border:
    1px solid
    rgba(255,255,255,.045)
    !important;

  border-radius:12px;

  background:
    rgba(5,8,15,.34)
    !important;
}


#token-modal-overlay
.tok-holders-table{
  font-size:10px;

  min-width:460px;
}


#token-modal-overlay
.tok-holders-table
thead th{
  padding:8px;

  background:
    rgba(9,12,20,.94)
    !important;

  color:#70788d;

  font-size:7px;

  font-weight:650;

  letter-spacing:.04em;

  text-transform:uppercase;
}


#token-modal-overlay
.tok-holders-table
tbody td{
  padding:9px 8px;

  border-top:
    1px solid
    rgba(255,255,255,.035)
    !important;

  color:#a7aebe;

  font-size:9px;
}


#token-modal-overlay
.tok-col-rank{
  color:#666f83;

  font-weight:600;
}


#token-modal-overlay
.tok-col-acct a{
  color:#75c8d7;

  font-weight:600;

  text-decoration:none;
}


#token-modal-overlay
.tok-col-qty,
#token-modal-overlay
.tok-col-usd{
  color:#d6d9e2;

  font-weight:620;
}


/* =========================================================
   OLD ACCOUNT EXPLORER
   ========================================================= */

.explorer-account-search,
.explorer-account-result{
  border-color:
    rgba(255,255,255,.052)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(13,16,28,.81),
      rgba(7,10,18,.77)
    )
    !important;
}


#expl-list{
  gap:8px
    !important;
}


#expl-list
> li,
.expl-event{
  position:relative;

  overflow:hidden;

  padding:12px
    !important;

  border:
    1px solid
    rgba(255,255,255,.05)
    !important;

  border-radius:15px
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.68),
      rgba(8,11,20,.62)
    )
    !important;
}


/* =========================================================
   EMPTY / PLACEHOLDER STATES
   ========================================================= */

#expl-token-empty,
#expl-sc-ops-empty,
#expl-empty{
  padding:24px 10px;

  text-align:center;

  color:#626a7e;

  font-size:9px;
}


/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:520px){

  .explorer-title{
    font-size:27px;
  }

  .explorer-status{
    padding:
      9px 8px;
  }

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

  .tok-card{
    min-height:113px;

    padding:
      11px !important;
  }

  .tok-icon-wrap{
    width:31px;
    height:31px;
  }

  .tok-icon{
    width:23px !important;
    height:23px !important;
  }

  .tok-sym{
    font-size:
      11px !important;
  }

  .token-modal-title{
    font-size:
      19px !important;
  }

  #token-modal-overlay
  .cash-modal{
    max-height:
      calc(
        88vh -
        env(safe-area-inset-bottom)
      );
  }

}


@media(max-width:350px){

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

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
.explorer-hero,

html[data-theme="light"]
#page-market .expl-pane,

html[data-theme="light"]
#expl-sc-content .expl-sc-pane{
  background:
    rgba(255,255,255,.85)
    !important;

  border-color:
    rgba(20,30,60,.07)
    !important;
}


html[data-theme="light"]
.tok-card,

html[data-theme="light"]
.expl-service-card{
  background:
    rgba(30,40,70,.025)
    !important;

  border-color:
    rgba(20,30,60,.06)
    !important;
}



/* =========================================================
   PayCash MiniApp V2.9
   Final Polish
   ========================================================= */


/* =========================================================
   GLOBAL RHYTHM
   ========================================================= */

*{
  -webkit-tap-highlight-color:
    transparent;
}


html{
  scroll-behavior:smooth;
}


body{
  overscroll-behavior-y:none;
}


body.pc-modal-open{
  overflow:hidden;
}


.page{
  padding-bottom:8px;
}


.page > .card{
  margin-bottom:12px;
}


button,
input,
select,
textarea{
  font:inherit;
}


button{
  touch-action:manipulation;
}


.value,
.num,
strong,
input,
td,
.ob-price,
.ob-pct{
  font-variant-numeric:
    tabular-nums;
}


/* ---------------------------------------------------------
   Global typography cleanup
   --------------------------------------------------------- */

.label{
  color:#81899e;

  font-size:9px;

  font-weight:650;

  letter-spacing:.095em;
}


.muted{
  color:#747c91;
}


/* =========================================================
   GLASS CONSISTENCY
   ========================================================= */

.card{
  border-color:
    rgba(255,255,255,.055);

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.25),
    inset 0 1px 0
    rgba(255,255,255,.030);
}


.card::after{
  opacity:.55;
}


/* =========================================================
   INPUTS
   ========================================================= */

input[type=text],
input[type=number],
input[type=search]{
  min-height:47px;

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

  border-radius:14px;

  background:
    linear-gradient(
      155deg,
      rgba(15,18,30,.68),
      rgba(8,11,20,.61)
    );

  color:#eceef4;

  caret-color:#a997ff;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.022);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


input::placeholder{
  color:#596174;

  opacity:1;
}


input:focus{
  outline:none;

  border-color:
    rgba(135,117,255,.24);

  background:
    linear-gradient(
      155deg,
      rgba(19,21,35,.74),
      rgba(9,12,22,.66)
    );

  box-shadow:
    0 0 0 3px
    rgba(123,97,255,.045),
    inset 0 1px 0
    rgba(255,255,255,.028);
}


input[readonly]{
  cursor:default;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  min-height:46px;

  border-radius:14px
    !important;

  transition:
    transform .14s ease,
    border-color .18s ease,
    filter .18s ease,
    background .18s ease;
}


.btn:disabled{
  opacity:.43;

  cursor:default;

  filter:saturate(.45);
}


.pc-pressed{
  transform:
    scale(.985)
    !important;
}


.btn:focus-visible,
.select-btn:focus-visible,
.seg:focus-visible,
.navbtn:focus-visible{
  outline:none;

  box-shadow:
    0 0 0 3px
    rgba(123,97,255,.055);
}


/* =========================================================
   SEGMENTED CONTROLS
   ========================================================= */

.seg-tabs{
  user-select:none;
}


.seg{
  transition:
    color .18s ease,
    opacity .18s ease;
}


.seg:not(.active){
  color:#777f93;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.pool-select .menu{
  padding:5px;

  border-radius:16px;

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

  background:
    linear-gradient(
      155deg,
      rgba(18,21,34,.96),
      rgba(8,11,20,.96)
    );

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.52),
    inset 0 1px 0
    rgba(255,255,255,.035);

  backdrop-filter:
    blur(32px)
    saturate(170%);

  -webkit-backdrop-filter:
    blur(32px)
    saturate(170%);
}


.pool-select .menu li{
  min-height:42px;

  display:flex;

  align-items:center;

  padding:
    9px 10px;

  border-radius:11px;

  color:#c5c9d4;

  font-size:11px;

  transition:
    background .15s ease,
    color .15s ease;
}


.pool-select .menu li:active{
  background:
    rgba(123,97,255,.09);

  color:#f0ecff;
}


/* =========================================================
   LOADERS
   ========================================================= */

.loader-wrap{
  overflow:hidden;

  height:4px;

  border-radius:999px;

  background:
    rgba(255,255,255,.035)
    !important;
}


.loader-bar{
  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(135,117,255,.90),
      rgba(87,198,217,.82),
      transparent
    )
    !important;

  background-size:
    180% 100%
    !important;

  animation:
    pcLoaderMove
    1.1s linear
    infinite;
}


@keyframes pcLoaderMove{

  from{
    background-position:
      140% 0;
  }

  to{
    background-position:
      -80% 0;
  }

}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.pc-empty-state{
  margin-top:8px;

  padding:
    24px 15px
    !important;

  border:
    1px dashed
    rgba(255,255,255,.055);

  border-radius:15px;

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

  color:#60687c
    !important;

  text-align:center;

  font-size:9px
    !important;
}


/* =========================================================
   TABLES
   ========================================================= */

.tok-table-scroll,
.table-scroll{
  scrollbar-width:thin;

  scrollbar-color:
    rgba(135,117,255,.22)
    transparent;
}


.tok-table-scroll::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar{
  width:4px;
  height:4px;
}


.tok-table-scroll::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb{
  border-radius:999px;

  background:
    rgba(135,117,255,.22);
}


.tok-table-scroll::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track{
  background:transparent;
}


/* =========================================================
   MODALS
   ========================================================= */

.cash-modal-overlay,
#token-modal-overlay{
  animation:
    pcModalFade
    .18s ease
    both;
}


.cash-modal,
#token-modal-overlay .cash-modal{
  animation:
    pcModalIn
    .24s
    cubic-bezier(.2,.8,.2,1)
    both;
}


@keyframes pcModalFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}


@keyframes pcModalIn{

  from{
    opacity:0;

    transform:
      translateY(10px)
      scale(.985);
  }

  to{
    opacity:1;

    transform:none;
  }

}


/* =========================================================
   NAVBAR FINAL
   ========================================================= */

.nav{
  pointer-events:none;

  padding:
    10px 12px
    calc(
      14px +
      env(safe-area-inset-bottom)
    );
}


.navbar{
  pointer-events:auto;

  border-color:
    rgba(255,255,255,.075);

  background:
    linear-gradient(
      180deg,
      rgba(18,22,36,.78),
      rgba(9,12,22,.83)
    );

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.46),
    inset 0 1px 0
    rgba(255,255,255,.045);

  backdrop-filter:
    blur(32px)
    saturate(175%);

  -webkit-backdrop-filter:
    blur(32px)
    saturate(175%);
}


.navbtn{
  min-height:42px;

  transition:
    transform .14s ease,
    color .18s ease,
    background .18s ease;
}


.navbtn.active{
  border:
    1px solid
    rgba(255,255,255,.040);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04),
    0 0 21px
    rgba(123,97,255,.055);
}


/* =========================================================
   HOME ABOUT
   ========================================================= */

.home-about-card{
  padding:15px
    !important;
}


#about-text{
  position:relative;

  overflow:hidden;

  transition:
    max-height .35s
    cubic-bezier(.2,.8,.2,1);
}


#about-text.about-collapsed{
  max-height:67px;
}


#about-text.about-collapsed::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:38px;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(11,14,24,.97)
    );
}


#about-text.about-expanded{
  max-height:1500px;
}


.about-toggle{
  display:flex;

  align-items:center;

  gap:6px;

  margin-top:9px;

  padding:
    0;

  border:0;

  background:transparent;

  color:#9c91c5;

  font-size:9px;

  font-weight:620;

  cursor:pointer;
}


.about-toggle i{
  display:inline-block;

  font-style:normal;

  color:#77708f;

  transition:
    transform .20s ease;
}


.about-toggle.open i{
  transform:
    rotate(180deg);
}


/* =========================================================
   HOME DONATE
   ========================================================= */

.home-donate-card{
  background:
    radial-gradient(
      380px 160px at 50% 100%,
      rgba(123,97,255,.045),
      transparent 75%
    ),
    linear-gradient(
      155deg,
      rgba(13,16,28,.78),
      rgba(7,10,18,.74)
    )
    !important;
}


/* =========================================================
   CONTENT ABOVE NAVBAR
   ========================================================= */

#app{
  padding-bottom:
    calc(
      142px +
      env(safe-area-inset-bottom)
    )
    !important;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.menu,
.cash-modal,
pre.mono{
  scrollbar-width:thin;

  scrollbar-color:
    rgba(135,117,255,.18)
    transparent;
}


.menu::-webkit-scrollbar,
.cash-modal::-webkit-scrollbar,
pre.mono::-webkit-scrollbar{
  width:4px;
  height:4px;
}


.menu::-webkit-scrollbar-thumb,
.cash-modal::-webkit-scrollbar-thumb,
pre.mono::-webkit-scrollbar-thumb{
  border-radius:999px;

  background:
    rgba(135,117,255,.18);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:
  reduce
){

  *,
  *::before,
  *::after{
    scroll-behavior:auto
      !important;

    animation-duration:
      .01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      .01ms
      !important;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:390px){

  #app{
    padding-left:10px;
    padding-right:10px;
  }

  .card{
    border-radius:19px;
  }

  .label{
    font-size:8px;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
#about-text.about-collapsed::after{
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,.97)
    );
}



/* =========================================================
   PayCash MiniApp V2.9.1
   Transaction floating controls + Bottom nav fit
   ========================================================= */


/* =========================================================
   TRANSACTIONS — FLOATING NAVIGATION
   ========================================================= */

/*
   Эти кнопки уже существуют в старом функционале.
   Проблема была только в том, что новый navbar
   оказался поверх них по z-index.
*/

.scroll-top-btn,
#acc-trx-back,
#acc-trx-forward,
#acc-trx-top{
  z-index:10040 !important;
}


/* новая единая glass-подача */

.scroll-top-btn,
#acc-trx-back,
#acc-trx-forward{
  width:39px !important;
  height:39px !important;

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

  border-radius:13px !important;

  border:
    1px solid
    rgba(255,255,255,.075)
    !important;

  background:
    linear-gradient(
      155deg,
      rgba(20,24,39,.90),
      rgba(9,12,22,.91)
    )
    !important;

  color:#aeb5c6 !important;

  box-shadow:
    0 13px 32px
    rgba(0,0,0,.38),
    inset 0 1px 0
    rgba(255,255,255,.04)
    !important;

  backdrop-filter:
    blur(26px)
    saturate(165%)
    !important;

  -webkit-backdrop-filter:
    blur(26px)
    saturate(165%)
    !important;
}


/*
   Нижняя навигация теперь находится примерно
   в районе 15–90px от низа. Плавающие кнопки
   держим гарантированно выше неё.
*/

.scroll-top-btn{
  bottom:
    calc(
      108px +
      env(safe-area-inset-bottom)
    )
    !important;

  right:14px
    !important;
}


#acc-trx-back{
  bottom:
    calc(
      108px +
      env(safe-area-inset-bottom)
    )
    !important;

  left:14px
    !important;
}


#acc-trx-forward{
  bottom:
    calc(
      108px +
      env(safe-area-inset-bottom)
    )
    !important;

  left:61px
    !important;
}


/* скрытые остаются реально скрытыми */

.scroll-top-btn:not(.visible),
#acc-trx-back:not(.visible),
#acc-trx-forward:not(.visible){
  opacity:0 !important;
  pointer-events:none !important;

  transform:
    translateY(6px)
    scale(.96);

  visibility:hidden;
}


/* видимые */

.scroll-top-btn.visible,
#acc-trx-back.visible,
#acc-trx-forward.visible{
  opacity:1 !important;
  pointer-events:auto !important;

  transform:none;

  visibility:visible;

  transition:
    opacity .18s ease,
    transform .18s ease,
    border-color .18s ease;
}


/* =========================================================
   BOTTOM NAVIGATION — FIT ALL 5 ITEMS
   ========================================================= */

/*
   Главное изменение:
   не пытаемся постоянно показывать подписи всех пяти кнопок.

   Неактивные пункты = компактная иконка.
   Активный пункт = иконка + полное название.

   Именно так navbar уже задумывался в V2,
   но старые CSS-правила оставляли кнопкам слишком много ширины.
*/

.nav{
  padding-left:10px !important;
  padding-right:10px !important;
}


.navbar{
  display:grid !important;

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

  gap:3px !important;

  padding:5px !important;

  overflow:visible !important;
}


.navbtn{
  width:100%;

  min-width:0 !important;

  padding:
    9px 5px
    !important;

  gap:0 !important;

  border-radius:
    13px !important;

  overflow:hidden;
}


/* icons */

.navbtn svg{
  width:20px !important;
  height:20px !important;

  flex:0 0 20px;
}


/* неактивные подписи полностью не занимают ширину */

.navbtn .t{
  display:block;

  overflow:hidden;

  width:0;
  max-width:0;

  margin-left:0;

  opacity:0;

  white-space:nowrap;

  font-size:10px !important;

  font-weight:620 !important;

  transition:
    max-width .25s
    cubic-bezier(.2,.8,.2,1),
    width .25s
    cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    margin-left .25s ease;
}


/*
   Активной кнопке даём больше места,
   остальным — одинаково компактное.
*/

.navbar:has(.navbtn:nth-child(1).active){
  grid-template-columns:
    1.65fr repeat(4,.84fr);
}

.navbar:has(.navbtn:nth-child(2).active){
  grid-template-columns:
    .77fr 2.05fr .72fr .72fr .72fr;
}

.navbar:has(.navbtn:nth-child(3).active){
  grid-template-columns:
    .82fr .82fr 1.72fr .82fr .82fr;
}

.navbar:has(.navbtn:nth-child(4).active){
  grid-template-columns:
    .80fr .80fr .80fr 1.80fr .80fr;
}

.navbar:has(.navbtn:nth-child(5).active){
  grid-template-columns:
    .72fr .72fr .72fr .72fr 2.05fr;
}


.navbtn.active{
  display:flex;

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

  gap:6px !important;

  padding-left:8px !important;
  padding-right:8px !important;
}


.navbtn.active .t{
  width:auto;

  max-width:105px;

  margin-left:0;

  opacity:1;
}


/* Для особо длинных названий */

.navbtn[data-page="calc"].active .t{
  max-width:92px;
}

.navbtn[data-page="market"].active .t{
  max-width:96px;
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:390px){

  .nav{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .navbar{
    gap:2px !important;
  }

  .navbtn{
    padding:
      8px 3px
      !important;
  }

  .navbtn svg{
    width:19px !important;
    height:19px !important;

    flex-basis:19px;
  }

  .navbtn.active{
    gap:5px !important;

    padding-left:6px !important;
    padding-right:6px !important;
  }

  .navbtn.active .t{
    font-size:9px !important;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
.scroll-top-btn,

html[data-theme="light"]
#acc-trx-back,

html[data-theme="light"]
#acc-trx-forward{
  background:
    rgba(255,255,255,.90)
    !important;

  border-color:
    rgba(20,30,60,.08)
    !important;

  color:#5e6677 !important;
}



/* =========================================================
   PayCash MiniApp V2.9.2
   Transaction navigation viewport layer
   ========================================================= */


/*
   Теперь кнопки являются прямыми потомками body,
   поэтому стеклянные .card больше никак
   не влияют на position:fixed.
*/

.pc-trx-nav-btn{
  position:fixed !important;

  z-index:2147483000
    !important;

  width:42px !important;
  height:42px !important;

  display:flex !important;

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

  padding:0 !important;

  border-radius:14px
    !important;

  border:
    1px solid
    rgba(255,255,255,.09)
    !important;

  background:
    radial-gradient(
      90px 65px at 30% 0%,
      rgba(135,117,255,.10),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(21,25,40,.94),
      rgba(9,12,22,.95)
    )
    !important;

  color:#d4d8e3
    !important;

  font-size:20px !important;

  font-weight:400
    !important;

  line-height:1
    !important;

  box-shadow:
    0 15px 36px
    rgba(0,0,0,.46),
    inset 0 1px 0
    rgba(255,255,255,.055)
    !important;

  backdrop-filter:
    blur(28px)
    saturate(170%)
    !important;

  -webkit-backdrop-filter:
    blur(28px)
    saturate(170%)
    !important;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:
    translateY(7px)
    scale(.96);

  transition:
    opacity .18s ease,
    transform .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease
    !important;
}


/* ---------------------------------------------------------
   LEFT HISTORY
   --------------------------------------------------------- */

.pc-trx-nav-back{
  left:14px !important;
  right:auto !important;

  bottom:
    calc(
      108px +
      env(safe-area-inset-bottom)
    )
    !important;
}


.pc-trx-nav-forward{
  left:64px !important;
  right:auto !important;

  bottom:
    calc(
      108px +
      env(safe-area-inset-bottom)
    )
    !important;
}


/* ---------------------------------------------------------
   TOP
   --------------------------------------------------------- */

.pc-trx-nav-top{
  left:auto !important;
  right:14px !important;

  bottom:
    calc(
      108px +
      env(safe-area-inset-bottom)
    )
    !important;
}


/* ---------------------------------------------------------
   VISIBLE
   --------------------------------------------------------- */

.pc-trx-nav-btn.visible{
  opacity:1 !important;

  visibility:visible
    !important;

  pointer-events:auto
    !important;

  transform:none
    !important;
}


/* ---------------------------------------------------------
   DISABLED

   Видна, но понятно что сейчас действие недоступно.
   --------------------------------------------------------- */

.pc-trx-nav-btn.visible.pc-disabled{
  opacity:.30
    !important;

  pointer-events:none
    !important;

  filter:
    saturate(.45);

  color:#7a8192
    !important;

  border-color:
    rgba(255,255,255,.045)
    !important;
}


/* ---------------------------------------------------------
   ACTIVE
   --------------------------------------------------------- */

.pc-trx-nav-btn.visible:not(.pc-disabled):active{
  transform:
    scale(.94)
    !important;

  border-color:
    rgba(135,117,255,.22)
    !important;
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:390px){

  .pc-trx-nav-btn{
    width:40px
      !important;

    height:40px
      !important;

    border-radius:
      13px !important;
  }


  .pc-trx-nav-back{
    left:10px !important;
  }


  .pc-trx-nav-forward{
    left:57px !important;
  }


  .pc-trx-nav-top{
    right:10px !important;
  }

}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
.pc-trx-nav-btn{
  background:
    rgba(255,255,255,.94)
    !important;

  border-color:
    rgba(20,30,60,.09)
    !important;

  color:#555e70
    !important;
}



/* =========================================================
   Top Holders modal fixes
   ========================================================= */


/* ---------------------------------------------------------
   FIX 1
   Закрытый overlay действительно невидим.
   V2.9 animation больше не может удержать opacity:1.
   --------------------------------------------------------- */

#token-modal-overlay:not(.active){
  opacity:0 !important;

  visibility:hidden
    !important;

  pointer-events:none
    !important;

  animation:none
    !important;
}


#token-modal-overlay.active{
  opacity:1 !important;

  visibility:visible
    !important;

  pointer-events:auto
    !important;
}


/* ---------------------------------------------------------
   FIX 2
   Само окно нормально листается на iPhone.
   --------------------------------------------------------- */

#token-modal-overlay
.cash-modal{
  max-height:
    calc(
      100dvh -
      30px -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom)
    )
    !important;

  overflow-y:auto
    !important;

  overflow-x:hidden
    !important;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  touch-action:
    pan-y;
}


/* крестик всегда поверх содержимого */

#token-modal-overlay
.cash-modal-close{
  z-index:100
    !important;

  pointer-events:auto
    !important;

  touch-action:
    manipulation;

  cursor:pointer;
}


/* ---------------------------------------------------------
   FIX 3
   Accordion больше не обрезает Top Holders на 520px.
   --------------------------------------------------------- */

#token-modal-overlay
.cash-acc-item[data-lazy="holders"].open
.cash-acc-body{
  max-height:none
    !important;

  overflow:visible
    !important;

  padding-bottom:
    10px !important;
}


/*
   Сам список получает собственный вертикальный
   и горизонтальный scroll.

   Поэтому можно спокойно смотреть 20+ аккаунтов,
   не двигая всю модалку целиком.
*/

#token-modal-overlay
.tok-table-scroll{
  width:100%;

  max-height:
    min(
      52dvh,
      520px
    )
    !important;

  overflow-x:auto
    !important;

  overflow-y:auto
    !important;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  touch-action:
    pan-x pan-y;
}


/* sticky header остаётся сверху */

#token-modal-overlay
.tok-holders-table
thead th{
  position:sticky
    !important;

  top:0;

  z-index:4;
}


/* ---------------------------------------------------------
   ACCOUNT LINK
   --------------------------------------------------------- */

#token-modal-overlay
.tok-col-acct
a.acc-link{
  position:relative;

  z-index:5;

  display:inline-block;

  pointer-events:auto
    !important;

  cursor:pointer;

  color:#71c9d8
    !important;

  text-decoration:
    underline !important;

  text-decoration-color:
    rgba(113,201,216,.42)
    !important;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;

  touch-action:
    manipulation;
}


#token-modal-overlay
.tok-col-acct
a.acc-link:active{
  opacity:.60;
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media(max-width:520px){

  #token-modal-overlay{
    padding:
      calc(
        8px +
        env(safe-area-inset-top)
      )
      8px
      calc(
        8px +
        env(safe-area-inset-bottom)
      )
      !important;
  }


  #token-modal-overlay
  .cash-modal{
    max-height:
      calc(
        100dvh -
        16px -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
      )
      !important;
  }


  #token-modal-overlay
  .tok-table-scroll{
    max-height:
      55dvh
      !important;
  }

}



/* =========================================================
   Top Holders pagination
   ========================================================= */

.tok-holders-meta{
  display:flex;

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

  flex-wrap:wrap;

  gap:5px 10px;

  margin-bottom:8px;

  color:#677084;

  font-size:8px;

  line-height:1.3;
}


.tok-holders-meta b{
  color:#9ba3b5;

  font-weight:620;
}


.tok-holders-footer{
  padding-top:9px;
}


.tok-holders-more{
  width:100%;

  min-height:42px
    !important;

  border-radius:13px
    !important;

  border:
    1px solid
    rgba(135,117,255,.13)
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.14),
      rgba(87,198,217,.045)
    )
    !important;

  color:#cfc8f7
    !important;

  font-size:9px
    !important;

  font-weight:630
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.03)
    !important;
}


.tok-holders-more:disabled{
  opacity:.48;

  pointer-events:none;
}


.tok-holders-end{
  padding:
    8px 4px 2px;

  text-align:center;

  color:#596174;

  font-size:8px;
}


/*
   Таблица остаётся scrollable,
   кнопка расположена уже ПОД ней.
*/

#token-modal-overlay
.tok-table-scroll{
  max-height:
    min(
      54dvh,
      540px
    )
    !important;
}


@media(max-width:520px){

  .tok-holders-meta{
    font-size:7px;
  }

  .tok-holders-more{
    min-height:40px
      !important;
  }

}



/* =========================================================
   V2.10 — SMOOTH BOTTOM NAVIGATION + PAGE MOTION
   ========================================================= */

/*
   Главное:
   grid теперь не прыгает между пятью схемами,
   а действительно интерполирует ширины колонок.
*/

.navbar{
  transition:
    grid-template-columns .22s
    cubic-bezier(.22,.80,.20,1)
    !important;
}


/*
   Убираем старое scale-дерганье активной кнопки.
   Размер теперь меняется только через плавную grid-анимацию.
*/

.navbtn,
.navbtn.active{
  transform:
    translateZ(0)
    !important;

  transition:
    padding-left .22s cubic-bezier(.22,.80,.20,1),
    padding-right .22s cubic-bezier(.22,.80,.20,1),
    gap .22s cubic-bezier(.22,.80,.20,1),
    color .16s ease,
    border-color .18s ease,
    box-shadow .20s ease
    !important;

  will-change:
    padding-left,
    padding-right;
}


/* Иконка мягко меняет акцент */

.navbtn svg{
  transition:
    opacity .16s ease,
    transform .22s cubic-bezier(.22,.80,.20,1)
    !important;
}

.navbtn:not(.active) svg{
  opacity:.72;
  transform:scale(.96);
}

.navbtn.active svg{
  opacity:1;
  transform:scale(1);
}


/*
   Подпись движется в том же ритме,
   что и изменение ширины кнопки.
*/

.navbtn .t{
  transition:
    max-width .22s cubic-bezier(.22,.80,.20,1),
    width .22s cubic-bezier(.22,.80,.20,1),
    opacity .14s ease,
    margin-left .22s cubic-bezier(.22,.80,.20,1)
    !important;
}


/* =========================================================
   PAGE TRANSITIONS
   ========================================================= */

/*
   Старые 18–24px перемещения были слишком заметны.
   Здесь оставляем только 6px — ощущается как нативный
   переход, а не как прокрутка целого экрана.
*/

.page._anim_in_right{
  animation:
    pcPageInRight .20s
    cubic-bezier(.22,.80,.20,1)
    both
    !important;
}

.page._anim_out_left{
  animation:
    pcPageOutLeft .20s
    cubic-bezier(.22,.80,.20,1)
    both
    !important;
}

.page._anim_in_left{
  animation:
    pcPageInLeft .20s
    cubic-bezier(.22,.80,.20,1)
    both
    !important;
}

.page._anim_out_right{
  animation:
    pcPageOutRight .20s
    cubic-bezier(.22,.80,.20,1)
    both
    !important;
}


@keyframes pcPageInRight{
  from{
    transform:translate3d(6px,0,0);
    opacity:.76;
  }

  to{
    transform:translate3d(0,0,0);
    opacity:1;
  }
}


@keyframes pcPageOutLeft{
  from{
    transform:translate3d(0,0,0);
    opacity:1;
  }

  to{
    transform:translate3d(-4px,0,0);
    opacity:0;
  }
}


@keyframes pcPageInLeft{
  from{
    transform:translate3d(-6px,0,0);
    opacity:.76;
  }

  to{
    transform:translate3d(0,0,0);
    opacity:1;
  }
}


@keyframes pcPageOutRight{
  from{
    transform:translate3d(0,0,0);
    opacity:1;
  }

  to{
    transform:translate3d(4px,0,0);
    opacity:0;
  }
}


/*
   Подсказываем WebView заранее вынести движение
   страниц на compositor.
*/

.page._anim_in_right,
.page._anim_out_left,
.page._anim_in_left,
.page._anim_out_right{
  will-change:
    transform,
    opacity;

  backface-visibility:hidden;
}


/* Людям с отключённой анимацией — без принуждения. */

@media(prefers-reduced-motion:reduce){

  .navbar,
  .navbtn,
  .navbtn .t,
  .navbtn svg{
    transition:none !important;
  }

  .page._anim_in_right,
  .page._anim_out_left,
  .page._anim_in_left,
  .page._anim_out_right{
    animation-duration:.01ms !important;
  }

}



/* =========================================================
   V2.10.1 — REAL SMOOTH NAV MORPH
   ========================================================= */

/*
   Grid/fr убираем.
   Flex-grow нормально интерполируется в WebView.
*/

.navbar{
  display:flex !important;
  grid-template-columns:none !important;

  align-items:stretch;

  gap:3px !important;

  transition:none !important;
}


/*
   Все кнопки стартуют одинаково компактными.
*/

.navbtn{
  width:auto !important;

  flex:
    .82 1 0
    !important;

  min-width:0 !important;

  gap:0 !important;

  transform:none !important;

  transition:
    flex-grow .34s
      cubic-bezier(.20,.80,.20,1),
    padding-left .34s
      cubic-bezier(.20,.80,.20,1),
    padding-right .34s
      cubic-bezier(.20,.80,.20,1),
    color .22s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .30s ease
    !important;

  will-change:flex-grow;
}


/*
   Активная кнопка реально расширяется,
   а не получает новую grid-колонку скачком.
*/

.navbtn[data-page="home"].active{
  flex-grow:1.68 !important;
}

.navbtn[data-page="calc"].active{
  flex-grow:2.12 !important;
}

.navbtn[data-page="books"].active{
  flex-grow:1.76 !important;
}

.navbtn[data-page="account"].active{
  flex-grow:1.82 !important;
}

.navbtn[data-page="market"].active{
  flex-grow:2.08 !important;
}


.navbtn.active{
  gap:0 !important;

  padding-left:8px !important;
  padding-right:8px !important;
}


/* =========================================================
   LABEL MORPH
   ========================================================= */

/*
   ВАЖНО:
   width:0 -> auto НЕ анимируется.

   Поэтому width всегда auto,
   а раскрытие делаем только через max-width.
*/

.navbtn .t{
  display:block !important;

  width:auto !important;

  max-width:0 !important;

  margin-left:0 !important;

  opacity:0;

  overflow:hidden;

  white-space:nowrap;

  transition:
    max-width .34s
      cubic-bezier(.20,.80,.20,1),
    margin-left .34s
      cubic-bezier(.20,.80,.20,1),
    opacity .22s ease
    !important;
}


.navbtn.active .t{
  width:auto !important;

  max-width:105px !important;

  margin-left:6px !important;

  opacity:1;
}


.navbtn[data-page="calc"].active .t{
  max-width:92px !important;
}

.navbtn[data-page="market"].active .t{
  max-width:96px !important;
}


/* =========================================================
   ICON MOTION
   ========================================================= */

.navbtn svg{
  transition:
    opacity .26s ease,
    transform .34s
      cubic-bezier(.20,.80,.20,1)
    !important;
}


.navbtn:not(.active) svg{
  opacity:.66;

  transform:
    scale(.94)
    !important;
}


.navbtn.active svg{
  opacity:1;

  transform:
    scale(1)
    !important;
}


/* =========================================================
   SLOWER / SOFTER PAGE MOTION
   ========================================================= */

.page._anim_in_right{
  animation:
    pcSmoothPageInRight .34s
    cubic-bezier(.20,.80,.20,1)
    both
    !important;
}

.page._anim_out_left{
  animation:
    pcSmoothPageOutLeft .34s
    cubic-bezier(.20,.80,.20,1)
    both
    !important;
}

.page._anim_in_left{
  animation:
    pcSmoothPageInLeft .34s
    cubic-bezier(.20,.80,.20,1)
    both
    !important;
}

.page._anim_out_right{
  animation:
    pcSmoothPageOutRight .34s
    cubic-bezier(.20,.80,.20,1)
    both
    !important;
}


@keyframes pcSmoothPageInRight{
  from{
    opacity:.72;
    transform:translate3d(10px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


@keyframes pcSmoothPageOutLeft{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(-7px,0,0);
  }
}


@keyframes pcSmoothPageInLeft{
  from{
    opacity:.72;
    transform:translate3d(-10px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


@keyframes pcSmoothPageOutRight{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(7px,0,0);
  }
}


/* маленькие телефоны */

@media(max-width:390px){

  .navbtn[data-page="home"].active{
    flex-grow:1.70 !important;
  }

  .navbtn[data-page="calc"].active{
    flex-grow:2.18 !important;
  }

  .navbtn[data-page="books"].active{
    flex-grow:1.78 !important;
  }

  .navbtn[data-page="account"].active{
    flex-grow:1.84 !important;
  }

  .navbtn[data-page="market"].active{
    flex-grow:2.12 !important;
  }

}




/* =========================================================
   V2.10.2 — IMMEDIATE PAGE RESPONSE
   Нижнее меню V2.10.1 не трогаем.
   ========================================================= */

.page._anim_in_right{
  animation:
    pcResponsivePageInRight .24s
    cubic-bezier(.22,.75,.20,1)
    both
    !important;
}

.page._anim_out_left{
  animation:
    pcResponsivePageOutLeft .24s
    cubic-bezier(.22,.75,.20,1)
    both
    !important;
}

.page._anim_in_left{
  animation:
    pcResponsivePageInLeft .24s
    cubic-bezier(.22,.75,.20,1)
    both
    !important;
}

.page._anim_out_right{
  animation:
    pcResponsivePageOutRight .24s
    cubic-bezier(.22,.75,.20,1)
    both
    !important;
}


@keyframes pcResponsivePageInRight{
  from{
    opacity:.88;
    transform:translate3d(6px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


@keyframes pcResponsivePageOutLeft{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(-4px,0,0);
  }
}


@keyframes pcResponsivePageInLeft{
  from{
    opacity:.88;
    transform:translate3d(-6px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


@keyframes pcResponsivePageOutRight{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(4px,0,0);
  }
}



/* =========================================================
   V2.11 — SHARED NAV GLASS INDICATOR

   Тот же принцип, что у seg-indicator:
   одна физическая плашка переезжает между вкладками.
   ========================================================= */

.navbar{
  position:relative !important;
}


/*
   Общая активная glass-плашка.
   Её положение и ширину обновляет JS,
   следуя за реальной геометрией активной кнопки.
*/

.nav-glass-indicator{
  position:absolute;

  top:5px;
  bottom:5px;
  left:0;

  width:0;

  border-radius:13px;

  pointer-events:none;

  z-index:1;

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.22),
      rgba(81,132,255,.12)
    );

  border:
    1px solid
    rgba(139,108,255,.24);

  box-shadow:
    0 5px 18px rgba(82,63,190,.13),
    inset 0 1px 0 rgba(255,255,255,.07);

  backdrop-filter:
    blur(14px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(145%);

  transform:
    translate3d(0,0,0);

  will-change:
    transform,
    width;
}


/*
   Теперь background не принадлежит
   каждой отдельной кнопке.

   Иконки и подписи остаются поверх
   единого индикатора.
*/

.navbtn{
  position:relative;
  z-index:2;
}


.navbtn.active{
  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  border-color:
    transparent
    !important;
}


/*
   Нажатие остаётся едва заметным,
   но не ломает геометрию pill.
*/

.navbtn:active{
  filter:
    brightness(1.08);
}


/* light mode */

html[data-theme="light"]
.nav-glass-indicator{
  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.15),
      rgba(81,132,255,.09)
    );

  border-color:
    rgba(111,83,224,.20);

  box-shadow:
    0 5px 16px rgba(70,56,160,.09),
    inset 0 1px 0 rgba(255,255,255,.40);
}




/* =========================================================
   V2.11.1 — CLEAN NAV INDICATOR

   Убираем glass/border/blink.
   Остаётся только спокойная цветная подложка.
   ========================================================= */

.nav-glass-indicator{

  background:
    linear-gradient(
      135deg,
      rgba(123,97,255,.18),
      rgba(90,82,210,.10)
    )
    !important;

  border:
    0
    !important;

  box-shadow:
    none
    !important;

  backdrop-filter:
    none
    !important;

  -webkit-backdrop-filter:
    none
    !important;

}


/*
   Сама кнопка вообще не рисует
   собственную активную рамку/блик.
*/

.navbtn.active{

  background:
    transparent
    !important;

  border:
    0
    !important;

  box-shadow:
    none
    !important;

  outline:
    none
    !important;

}


/*
   И при нажатии не создаём белый flash.
*/

.navbtn:active,
.navbtn.active:active{

  box-shadow:
    none
    !important;

  outline:
    none
    !important;

  filter:
    none
    !important;

}


/* light */

html[data-theme="light"]
.nav-glass-indicator{

  background:
    rgba(123,97,255,.11)
    !important;

  border:
    0
    !important;

  box-shadow:
    none
    !important;

}



/* =========================================================
   ACCOUNT — TOTAL VALUE CURRENCY
   ========================================================= */

#account-overview-total::before{
  content:"$";
  margin-right:.10em;
}



/* =========================================================
   GLOBAL MODAL CLOSE FIX
   Крестик всегда выше содержимого любой cash-modal.
   ========================================================= */

.cash-modal{
  position:relative !important;
}


/* Не только token modal — ВСЕ модальные окна */

.cash-modal-overlay .cash-modal-close{
  position:absolute !important;

  top:10px !important;
  right:10px !important;

  z-index:1000 !important;

  pointer-events:auto !important;

  touch-action:manipulation !important;

  cursor:pointer !important;

  -webkit-tap-highlight-color:transparent;
}


/*
   Контент модалки не должен перекрывать крестик.
*/

.cash-modal > *:not(.cash-modal-close){
  position:relative;
  z-index:1;
}

.cash-modal > .cash-modal-close{
  z-index:1000 !important;
}



/* =========================================================
   MODAL VISIBILITY — FINAL FIX

   Старый animation-fill-mode: both мог удерживать
   overlay видимым после удаления класса .active.

   Состояние окна теперь однозначно определяется
   только наличием .active.
   ========================================================= */


/* Базовое закрытое состояние */

.cash-modal-overlay{
  animation:none !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;

  transition:
    opacity .18s ease,
    visibility 0s linear .18s
    !important;
}


/* Открытое состояние */

.cash-modal-overlay.active{
  opacity:1 !important;
  visibility:visible !important;

  pointer-events:auto !important;

  transition:
    opacity .18s ease,
    visibility 0s linear 0s
    !important;
}


/*
   Внутреннее окно можно по-прежнему
   немного анимировать при открытии,
   но overlay больше не удерживается animation-fill-mode.
*/

.cash-modal-overlay:not(.active) .cash-modal{
  pointer-events:none !important;
}


/* Крестик гарантированно кликабельный */

.cash-modal-overlay.active .cash-modal-close{
  position:absolute !important;

  z-index:1000 !important;
  pointer-events:auto !important;

  touch-action:manipulation !important;
}



/* =========================================================
   CONTRACT EXPLORER V1
   ========================================================= */

.expl-contract-grid{
  display:grid;
  gap:10px;
}


.expl-contract-card{
  width:100%;

  padding:14px;

  border-radius:16px;

  border:
    1px solid
    rgba(139,108,255,.16);

  background:
    linear-gradient(
      145deg,
      rgba(20,22,35,.74),
      rgba(12,14,25,.58)
    );

  color:inherit;

  text-align:left;

  cursor:pointer;

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


.expl-contract-card:active{
  transform:
    scale(.992);
}


.expl-contract-card-top{
  display:flex;
  align-items:center;
  gap:11px;
}


.expl-contract-card-icon{
  width:42px;
  height:42px;

  flex:0 0 42px;

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

  border-radius:13px;

  background:
    rgba(123,97,255,.13);

  color:#b9aaff;

  font-size:13px;
  font-weight:800;

  letter-spacing:.04em;
}


.expl-contract-card-main{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:3px;

  flex:1;
}


.expl-contract-card-main strong{
  font-size:15px;
  font-weight:700;
}


.expl-contract-card-main span{
  font-size:11px;
  opacity:.58;
}


.expl-contract-card-arrow{
  font-size:25px;
  line-height:1;

  opacity:.38;
}


.expl-contract-card-desc{
  margin-top:11px;

  font-size:12px;
  line-height:1.45;

  opacity:.66;
}


.expl-contract-card-tag{
  display:inline-flex;

  margin-top:10px;

  padding:4px 8px;

  border-radius:999px;

  background:
    rgba(123,97,255,.09);

  color:
    rgba(205,197,255,.88);

  font-size:10px;
  font-weight:650;
}



/* contract identity */

.expl-contract-identity{
  margin-top:12px;
}


.expl-contract-identity-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;
}


.expl-contract-selected-title{
  font-size:19px;
  font-weight:760;

  letter-spacing:-.02em;
}


.expl-contract-account{
  margin-top:3px;

  font-size:11px;

  opacity:.54;
}


.expl-contract-category{
  padding:5px 8px;

  border-radius:999px;

  background:
    rgba(123,97,255,.10);

  color:
    rgba(205,197,255,.86);

  font-size:10px;
  font-weight:650;

  white-space:nowrap;
}


.expl-contract-description{
  margin:
    10px 0 14px;
}



/* overview */

.expl-contract-stats{
  display:grid;

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

  gap:8px;
}


.expl-contract-stat{
  padding:11px 12px;

  border-radius:13px;

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

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

  display:flex;
  flex-direction:column;

  gap:5px;
}


.expl-contract-stat span{
  font-size:10px;

  opacity:.50;

  text-transform:uppercase;
}


.expl-contract-stat strong{
  font-size:18px;
  font-weight:730;
}


.expl-contract-meta{
  margin-top:10px;

  display:grid;

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

  gap:8px;
}


.expl-contract-meta > div{
  padding:
    10px 12px;

  border-radius:13px;

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


.expl-contract-meta span{
  display:block;

  margin-bottom:5px;

  font-size:10px;

  opacity:.48;
}


.expl-contract-meta strong{
  font-size:12px;
  font-weight:620;
}


.expl-contract-block{
  margin-top:16px;
}


.expl-contract-block-title,
.expl-sc-section-title{
  margin-bottom:9px;

  font-size:12px;
  font-weight:680;
}


.expl-contract-assets{
  display:grid;

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

  gap:7px;
}


.expl-contract-asset{
  padding:
    9px 10px;

  border-radius:12px;

  background:
    rgba(123,97,255,.055);

  display:flex;

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


.expl-contract-asset span{
  font-size:11px;

  opacity:.72;
}


.expl-contract-asset strong{
  font-size:12px;
}


.expl-contract-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}


.expl-contract-action{
  padding:
    5px 9px;

  border-radius:999px;

  background:
    rgba(123,97,255,.08);

  border:
    1px solid
    rgba(123,97,255,.11);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size:10px;

  opacity:.82;
}



/* operations */

.expl-contract-ops-list{
  list-style:none;

  padding:0;
  margin:0;

  display:grid;
  gap:9px;
}


.expl-contract-op{
  padding:12px;

  border-radius:13px;

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

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


.expl-contract-op-head{
  margin-bottom:8px;

  font-size:10px;

  opacity:.50;

  word-break:break-word;
}


.expl-contract-op-raw{
  margin:0;

  white-space:pre-wrap;

  word-break:break-word;

  font-size:10px;

  line-height:1.5;

  opacity:.78;
}



/* tables */

.expl-table-card{
  border-radius:15px;

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

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

  padding:12px;
}


.expl-table-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}


.expl-table-head > div:first-child{
  display:flex;
  flex-direction:column;

  gap:3px;
}


.expl-table-head strong{
  font-size:14px;
}


.expl-table-head span{
  font-size:10px;
  opacity:.48;
}


.expl-table-type{
  font-size:10px;

  opacity:.42;
}


.expl-table-fields{
  margin-top:10px;

  display:flex;
  flex-wrap:wrap;

  gap:5px;
}


.expl-table-fields > span{
  padding:
    4px 7px;

  border-radius:8px;

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

  font-size:9px;
}


.expl-table-fields b{
  font-weight:600;
}


.expl-table-fields i{
  margin-left:4px;

  font-style:normal;

  opacity:.42;
}


.expl-scope-tabs{
  margin-top:13px;

  display:grid;

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

  gap:6px;
}


.expl-scope-btn{
  min-width:0;

  border:0;

  border-radius:11px;

  padding:
    8px 9px;

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

  color:inherit;

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

  gap:6px;

  font-size:10px;

  cursor:pointer;

  transition:
    background .18s ease,
    color .18s ease;
}


.expl-scope-btn span{
  overflow:hidden;

  text-overflow:ellipsis;
}


.expl-scope-btn b{
  opacity:.54;

  font-size:9px;
}


.expl-scope-btn.active{
  background:
    rgba(123,97,255,.14);

  color:#ddd6ff;
}


.expl-table-rows{
  margin-top:12px;

  display:grid;

  gap:6px;
}


.expl-zr-row{
  padding:
    10px 11px;

  border-radius:11px;

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

  display:flex;

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

  gap:10px;
}


.expl-zr-row-main{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:4px;
}


.expl-zr-row-main strong{
  overflow:hidden;

  text-overflow:ellipsis;

  font-size:11px;
}


.expl-zr-row-main span{
  font-size:11px;

  color:
    rgba(220,216,255,.82);
}


.expl-zr-row-meta{
  flex:0 0 auto;

  display:flex;
  flex-direction:column;

  align-items:flex-end;

  gap:4px;

  font-size:9px;

  opacity:.43;
}


.expl-generic-row{
  padding:10px;

  border-radius:11px;

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

  display:grid;
  gap:6px;
}


.expl-generic-row > div{
  display:flex;
  justify-content:space-between;

  gap:10px;
}


.expl-generic-row span{
  font-size:9px;

  opacity:.45;
}


.expl-generic-row strong{
  font-size:10px;

  text-align:right;

  word-break:break-word;
}


@media(max-width:390px){

  .expl-contract-stats,
  .expl-contract-assets{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .expl-contract-meta{
    grid-template-columns:1fr;
  }

}



/* =========================================================
   ZERO RISK — SORT + ACCOUNT LINKS
   ========================================================= */

.expl-zr-owner-link{
  appearance:none;
  -webkit-appearance:none;

  display:block;

  max-width:100%;

  padding:0;
  margin:0;

  border:0;
  outline:0;

  background:transparent;

  color:rgba(199,190,255,.94);

  font:inherit;
  font-size:11px;
  font-weight:650;

  text-align:left;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  cursor:pointer;

  text-decoration:none;
}


.expl-zr-owner-link:active{
  opacity:.58;
}


.expl-zr-sort-note{
  display:flex;

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

  gap:6px;

  padding:
    2px 3px 5px;

  font-size:9px;

  opacity:.48;
}


.expl-zr-sort-note strong{
  font-weight:650;
}




/* =========================================================
   ZERO RISK — OVERVIEW EXPLANATION
   ========================================================= */

.expl-contract-about{
  margin-bottom:16px;
}


.expl-contract-about-title{
  margin-bottom:7px;

  font-size:13px;
  font-weight:700;
}


.expl-contract-about-text{
  font-size:12px;
  line-height:1.58;

  color:
    rgba(225,225,238,.67);
}


.expl-contract-about-text b{
  color:
    rgba(240,238,255,.94);

  font-weight:700;
}


.expl-contract-about-table{
  margin-top:12px;

  padding:12px;

  border-radius:14px;

  display:flex;

  align-items:flex-start;

  gap:10px;

  background:
    rgba(123,97,255,.06);

  border:
    1px solid
    rgba(135,112,255,.10);
}


.expl-contract-about-icon{
  width:31px;
  height:31px;

  flex:0 0 31px;

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

  border-radius:10px;

  background:
    rgba(123,97,255,.12);

  color:
    rgba(197,185,255,.90);

  font-size:15px;
}


.expl-contract-about-table strong{
  display:block;

  margin-bottom:4px;

  font-size:11px;
  font-weight:680;
}


.expl-contract-about-table span{
  display:block;

  font-size:11px;
  line-height:1.5;

  color:
    rgba(220,220,235,.59);
}



/* =========================================================
   CONTRACT OPERATIONS — HUMAN READABLE
   ========================================================= */

.expl-op-top{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}


.expl-op-title{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:3px;
}


.expl-op-title strong{
  font-size:13px;
  font-weight:700;
}


.expl-op-title span{
  font-size:9px;

  opacity:.46;
}


.expl-op-direction{
  flex:0 0 auto;

  padding:
    4px 7px;

  border-radius:999px;

  font-size:9px;
  font-weight:650;

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

  color:
    rgba(220,220,235,.62);
}


.expl-op-direction.in{
  background:
    rgba(97,215,174,.08);

  color:
    rgba(161,231,208,.86);
}


.expl-op-direction.out{
  background:
    rgba(199,118,255,.08);

  color:
    rgba(210,174,255,.86);
}


.expl-op-amount{
  margin-top:11px;

  font-size:15px;
  font-weight:720;

  color:
    rgba(239,237,255,.94);
}


.expl-op-route{
  margin-top:8px;

  display:flex;

  align-items:center;

  gap:7px;

  min-width:0;
}


.expl-op-account-link{
  appearance:none;
  -webkit-appearance:none;

  min-width:0;

  padding:0;

  border:0;
  outline:0;

  background:transparent;

  color:
    rgba(195,185,255,.92);

  font:inherit;

  font-size:10px;
  font-weight:620;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  cursor:pointer;
}


.expl-op-account-link:active{
  opacity:.55;
}


.expl-op-arrow{
  flex:0 0 auto;

  font-size:10px;

  opacity:.30;
}


.expl-op-detail{
  margin-top:8px;

  display:flex;

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

  gap:10px;
}


.expl-op-detail > span{
  font-size:9px;

  opacity:.42;
}


.expl-op-memo{
  margin-top:8px;

  padding:
    7px 8px;

  border-radius:9px;

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

  font-size:10px;
  line-height:1.45;

  color:
    rgba(220,220,235,.58);
}


.expl-op-extra{
  margin-top:9px;

  display:grid;

  gap:5px;
}


.expl-op-extra > div{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;
}


.expl-op-extra span{
  font-size:9px;

  opacity:.39;
}


.expl-op-extra strong{
  max-width:70%;

  font-size:9px;
  font-weight:500;

  text-align:right;

  word-break:break-word;

  opacity:.68;
}


.expl-op-footer{
  margin-top:10px;

  padding-top:8px;

  border-top:
    1px solid
    rgba(255,255,255,.035);

  display:flex;

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

  gap:10px;

  font-size:8px;

  color:
    rgba(220,220,235,.34);
}