:root{
    --bg:#0b0f14; --fg:#e9eef5; --muted:#a5b1bd;
    --card1:#101623; --card2:#0e1420; --border:rgba(255,255,255,.07);
    --primary:#7b61ff; --primary-2:#b43cff; --accent:#22d3ee;
  }
  /* light theme vars */
  html[data-theme="light"]{
    --bg:#f5f7fb; --fg:#0b0f14; --muted:#516072;
    --card1:#ffffff; --card2:#f3f6fb; --border:rgba(0,0,0,.08);
  }

  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
  body{overscroll-behavior-y:auto}
  #app{
    max-width:880px;
    margin:0 auto;
    padding:16px 16px calc(120px + env(safe-area-inset-bottom));
  }

  header{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 16px;gap:12px}
  header h1{margin:0;font-size:20px;font-weight:800;letter-spacing:.2px}
  .toolbar{display:flex;align-items:center;gap:8px}
  .pill{
    display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;
    border:1px solid var(--border); background:linear-gradient(180deg,var(--card1),var(--card2)); color:var(--fg);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
  }
  .pill select{background:transparent;border:0;outline:none;color:inherit;font-weight:700}
  .toggle{cursor:pointer;user-select:none}
  .toggle svg{width:18px;height:18px;display:block}
  .sep{width:1px;height:18px;background:var(--border)}

  .card{background:linear-gradient(180deg,var(--card1),var(--card2));border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);margin-bottom:14px}
  html[data-theme="light"] .card{box-shadow:0 10px 30px rgba(0,0,0,.07)}
  .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.2px;margin-bottom:6px}
  .value{font-size:28px;font-weight:800}
  .unit{font-size:14px;color:var(--muted);margin-left:6px}
  .muted{font-size:12px;color:var(--muted)}
  .row{display:flex;gap:12px;flex-wrap:wrap}
  .col{flex:1 1 260px}
  input[type=number], input[type=text]{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--fg);font-size:16px}
  html[data-theme="light"] input[type=number], html[data-theme="light"] input[type=text]{background:rgba(0,0,0,.03)}
  input[type=number]:focus, input[type=text]:focus{outline:none;border-color:var(--primary)}
  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0;}
  input[type=number]{ -moz-appearance: textfield;}
  input[type=number]{ touch-action: manipulation; }
  canvas{display:block;width:100%;height:auto;border-radius:14px}
  #line, #donut, #depth{touch-action: none;}

  /* Bottom nav fixed */
  .nav{
    position:fixed; left:0; right:0;
    bottom:calc(env(safe-area-inset-bottom));
    display:flex; gap:8px; align-items:center; justify-content:center;
    padding:12px 16px 18px; background:transparent; pointer-events:none; z-index:9999;
  }
  .navbar{pointer-events:auto;display:flex;gap:6px;align-items:center;justify-content:space-between;background:rgba(16,22,35,.82);backdrop-filter:saturate(160%) blur(16px);border:1px solid var(--border);border-radius:999px;padding:8px 10px;max-width:960px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:auto}
  html[data-theme="light"] .navbar{background:rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(0,0,0,.12)}
  .navbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:999px;color:var(--muted);cursor:pointer;user-select:none;transition:all .35s cubic-bezier(.4,0,.2,1);backdrop-filter:saturate(160%) blur(8px);white-space:nowrap}
  .navbtn.active{background:linear-gradient(135deg,rgba(123,97,255,.25),rgba(180,60,255,.25));color:#fff;box-shadow:0 0 15px rgba(180,60,255,.4), inset 0 0 20px rgba(255,255,255,.08);transform:scale(1.04)}
  .navbtn svg{width:22px;height:22px;fill:currentColor;display:block;overflow:visible}
  .navbtn .t{font-size:13px;font-weight:700}

  section.page{display:none; min-height:calc(100vh - 160px);}
  section.page.active{display:block}
  .badge{position:absolute;padding:8px 12px;border-radius:999px;font-weight:800;font-size:12px;color:#0b0f14;background:#e9eef5;box-shadow:0 12px 30px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .18s ease;white-space:nowrap}
  .tip{position:absolute;padding:6px 8px;border-radius:10px;background:#0b0f14;color:#e9eef5;border:1px solid var(--border);font-size:12px;pointer-events:none;opacity:0;transition:opacity .12s}
  html[data-theme="light"] .tip{background:#ffffff;color:#0b0f14}

  /* swipe slide animations */
  .page._pre{display:block}
  .page._anim_in_right{animation:slideInRight .24s ease both}
  .page._anim_out_left{animation:slideOutLeft .24s ease both}
  .page._anim_in_left{animation:slideInLeft .24s ease both}
  .page._anim_out_right{animation:slideOutRight .24s ease both}
  @keyframes slideInRight{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
  @keyframes slideOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-24px);opacity:0}}
  @keyframes slideInLeft{from{transform:translateX(-24px);opacity:0}to{transform:translateX(0);opacity:1}}
  @keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(24px);opacity:0}}

  /* Books page UI */
  .pool-select{position:relative;width:100%}
  .select-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:12px 14px;border-radius:14px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);color:var(--fg);font-weight:700;cursor:pointer}
  html[data-theme="light"] .select-btn{background:rgba(0,0,0,.03)}
  .select-btn .chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;opacity:.8;transition:transform .18s}
  .pool-select.open .select-btn .chev{transform:rotate(180deg)}
  .menu{position:absolute;inset:auto 0 0 0;transform:translateY(calc(100% + 8px));list-style:none;margin:0;padding:6px;
    border:1px solid var(--border);border-radius:14px;background:rgba(16,22,35,.96);backdrop-filter:saturate(160%) blur(10px);
    opacity:0;pointer-events:none;transition:opacity .16s, transform .16s;max-height:220px;overflow:auto;z-index:30}
  html[data-theme="light"] .menu{background:#fff}
  .pool-select.open .menu{opacity:1;pointer-events:auto;transform:translateY(calc(100% + 4px))}
  .menu li{padding:10px 12px;border-radius:10px;cursor:pointer}
  .menu li[aria-selected="true"], .menu li:hover{background:linear-gradient(90deg,rgba(123,97,255,.18),rgba(180,60,255,.18));}

  .ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:720px){ .ob-grid{grid-template-columns:1fr} }
  table.ob{width:100%;border-collapse:separate;border-spacing:0 6px}
  table.ob thead th{font-size:12px;color:var(--muted);font-weight:700;text-align:left;padding:0 6px}
  table.ob tbody td{background:rgba(255,255,255,.04);border:1px solid var(--border);padding:8px 10px}
  html[data-theme="light"] table.ob tbody td{background:rgba(0,0,0,.03)}
  table.ob tbody tr{transition:transform .18s, background .18s}
  table.ob tbody tr.bump{animation:rowBump .28s ease}
  @keyframes rowBump{0%{transform:translateY(-2px)}50%{transform:translateY(0)}100%{transform:none}}
  .buy{box-shadow:inset 0 0 0 9999px rgba(139,92,246,.18)}
  .sell{box-shadow:inset 0 0 0 9999px rgba(236,72,153,.18)}

  /* no select while interacting with charts */
  canvas, #app, .card, header, .tip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
  .acc-grid{display:grid;grid-template-columns:1fr auto;gap:10px}
  .acc-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 6px;
    table-layout:fixed;              /* фиксированная сетка по ширине экрана */
  }

  .acc-table thead th{
    font-size:12px;
    color:var(--muted);
    font-weight:700;
    text-align:left;
    padding:0 6px;
    white-space:nowrap;              /* заголовки не переносятся */
  }

  .acc-table tbody td{
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    padding:8px 6px;          /* чуть меньше общий горизонтальный отступ */
    font-size:14px;           /* немного крупнее шрифт */
    white-space:nowrap;
  }

  /* Первый столбец (иконки) — правую границу ближе к иконке */
  .acc-table th:nth-child(1),
  .acc-table td:nth-child(1){
    width:32px;       /* уже, чем было */
    padding-right:2px;
  }

  /* Второй столбец (символ токена) — меньше воздуха справа и слева */
  .acc-table th:nth-child(2),
  .acc-table td:nth-child(2){
    width:78px;       /* поуже, чтобы освободить место под числа */
    padding-left:4px;
    padding-right:4px;
  }



  /* числовые колонки выравниваем вправо */
  .acc-table th:nth-child(3),
  .acc-table th:nth-child(4),
  .acc-table td:nth-child(3),
  .acc-table td:nth-child(4){
    text-align:right;
  }

  html[data-theme="light"] .acc-table tbody td{
    background:rgba(0,0,0,.03);
  }

  /* Дополнительное сжатие на узких экранах (телефон) */
  @media (max-width:480px){
    .acc-table thead th{
      font-size:11px;
      padding:0 4px;
    }
    .acc-table tbody td{
      padding:6px 4px;
      font-size:12px;
    }
  }

  .btn{padding:12px 16px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(123,97,255,.25),rgba(180,60,255,.25));color:#fff;font-weight:800;cursor:pointer}
  /* Explorer event cards */
  .evt{display:flex;flex-direction:column;gap:8px}
  .evt-head{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
  .evt-body{font-size:13px;line-height:1.45;color:var(--muted)}
  .evt a{text-decoration:none;color:var(--accent)}
  .evt a:hover{text-decoration:underline}

  /* tabs in "Мой аккаунт" */
  /* Segmented tabs (ползунок) */
  .seg-tabs{
    position:relative; display:flex; gap:0;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border); border-radius:16px; padding:2px;
  }
  html[data-theme="light"] .seg-tabs{ background:rgba(0,0,0,.04) }

  .seg{
    position:relative; z-index:1; flex:1 1 0;
    height:34px; line-height:34px; text-align:center; cursor:pointer;
    border:none; background:transparent; color:var(--muted); font-weight:800; border-radius:12px;
  }
  .seg.active{ color:#fff }

  .seg-indicator{
    position:absolute; z-index:0; top:2px; left:2px; height:calc(100% - 4px);
    width:calc((100% - 4px)/3); /* 3 вкладки; если их будет больше, JS сам поправит ширину */
    background:linear-gradient(135deg, rgba(123,97,255,.25), rgba(180,60,255,.25));
    border-radius:12px; transition:left .18s ease;
  }
  #calc-tabs .seg-indicator{ width:calc((100% - 4px)/2); }


  /* --- Инвестиции: криптоналичные — кликабельные карточки --- */
  .cash-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    margin:8px 0;
    border-radius:14px;
    border:1px solid var(--border);
    background:linear-gradient(180deg,var(--card1),var(--card2));
    box-shadow:0 10px 26px rgba(0,0,0,.35);
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .cash-card:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 32px rgba(0,0,0,.45);
    border-color:rgba(180,60,255,.6);
  }
  .cash-card-main{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .cash-card-title{
    font-weight:800;
    font-size:14px;
  }
  .cash-card-chevron{
    font-size:18px;
    color:var(--muted);
  }

  /* --- Модальное окно криптоналичных --- */
  .cash-modal-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    z-index:9998;
  }
  .cash-modal-overlay.active{
    opacity:1;
    pointer-events:auto;
  }
  .cash-modal{
    width:100%;
    max-width:420px;
    border-radius:20px;
    border:1px solid var(--border);
    background:linear-gradient(180deg,var(--card1),var(--card2));
    box-shadow:0 22px 60px rgba(0,0,0,.6);
    padding:16px 14px 14px;
    position:relative;
    transform:translateY(10px);
    transition:transform .2s ease;
  }
  .cash-modal-overlay.active .cash-modal{
    transform:translateY(0);
  }
  .cash-modal-close{
    position:absolute;
    right:10px;
    top:8px;
    width:26px;
    height:26px;
    border-radius:999px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:20px;
    line-height:24px;
    cursor:pointer;
  }
  .cash-modal-header{
    font-weight:800;
    font-size:15px;
    margin-bottom:4px;
  }
  .cash-modal-sub{
    font-size:12px;
    margin-bottom:12px;
  }

  /* аккордеон внутри модалки */
  .cash-accordion{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .cash-acc-item{
    border-radius:14px;
    border:1px solid var(--border);
    background:linear-gradient(180deg,var(--card1),var(--card2));
    overflow:hidden;
  }
  .cash-acc-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
  }
  .cash-acc-icon{
    width:24px;
    text-align:center;
    font-size:20px;
  }
  .cash-acc-body{
    padding:0 12px;
    font-size:13px;
    color:var(--muted);
    line-height:1.5;
    max-height:0;
    overflow:hidden;
    transition:max-height .22s ease, padding-bottom .22s ease;
  }
  .cash-acc-item.open .cash-acc-body{
    padding-bottom:10px;
    max-height:320px; /* достаточно для текста и таблицы */
  }

  /* таблица всех выпусков */
  .cash-issues{
    width:100%;
    border-collapse:collapse;
    margin-top:4px;
    font-size:12px;
  }
  .cash-issues th,
  .cash-issues td{
    padding:4px 6px;
    text-align:right;
  }
  .cash-issues th:first-child,
  .cash-issues td:first-child{
    text-align:left;
  }
  .cash-issues thead th{
    color:var(--muted);
  }
  .cash-issues tbody tr:nth-child(odd){
    background:rgba(255,255,255,.02);
  }

/* --- Анимированная полоска загрузки --- */
.loader-wrap{
  width:100%;              /* тянем на всю ширину контейнера */
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin:6px 0;
  box-sizing:border-box;   /* на всякий случай, чтобы учитывать паддинги */
}


.loader-bar{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cf6,#ec4899);
  animation:loader-fill .9s ease-out forwards;
}

@keyframes loader-fill{
  from{ width:0; }
  to{   width:100%; }
}

/* Кнопка "наверх" для вкладки "Транзакции" */
.scroll-top-btn {
  position: fixed;
  right: 16px;
  bottom:120px; /* выше нижней навигации */
  z-index: 80;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(15, 23, 42, 0.82);
  color: #e5e7eb;

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

  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(10px);
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:active {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.6);
}

/* Мягкая подсветка поля ввода аккаунта */
#acc-name {
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}

.acc-input-flash {
  animation: accInputFlash 0.9s ease-out;
}

@keyframes accInputFlash {
  0% {
    background-color: rgba(186, 85, 255, 0.18); /* лёгкий фиолетовый оттенок */
    transform: scale(1.01);                    /* почти незаметный "подъём" */
    box-shadow: 0 0 0 2px rgba(186, 85, 255, 0.25);
  }
  35% {
    background-color: rgba(186, 85, 255, 0.10);
    transform: scale(1.005);
    box-shadow: 0 0 0 2px rgba(186, 85, 255, 0.15);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(186, 85, 255, 0);
  }
}





/* Размер/адаптация */
@media (max-width:420px){
  .seg{ height:32px; line-height:32px; font-size:13px }
}