/* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background-color: #1b1b1b;
            color: #f7f7f7;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-size: 12px; /* Increased from 8px */
        }

        /* Header */
        header {
            padding: 18px 18px 12px;
            text-align: center;
        }

        h1 {
            font-size: 22.5px; /* Increased from 15px */
            font-weight: 500;
        }

        /* Home page styles */
        .home-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-bottom: 52.5px; /* Increased from 35px */
        }

        .wallet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
        }

        .expand-icon {
            width: 18px; /* Increased from 12px */
            height: 18px; /* Increased from 12px */
            color: #f7f7f7;
        }

        .wallet-selector {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 18px; /* Increased from 12px */
            font-weight: 500;
        }

        .search-icon {
            width: 21px; /* Increased from 14px */
            height: 21px; /* Increased from 14px */
            color: #f7f7f7;
        }

        .balance-section {
            text-align: center;
            padding: 15px 0 22.5px;
        }

        .main-balance {
            font-size: 36px; /* Increased from 24px */
            font-weight: 500;
            margin-bottom: 6px;
        }

        .secondary-balance {
            font-size: 15px; /* Increased from 10px */
            color: #9b9b9d;
        }

        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 18px;
            margin-bottom: 22.5px;
        }

        .action-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            /* 1.3x larger for action buttons */
            transform: scale(1.3);
            margin: 15px;
        }
        

        .button-icon {
            width: 45px; /* Increased from 30px */
            height: 45px; /* Increased from 30px */
            background-color: var(--button-bg);
            border-radius: 12px; /* Increased from 8px */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .button-icon.earn {
            background-color: #48f98f;
        }

        .button-icon svg {
            width: 18px; /* Increased from 12px */
            height: 18px; /* Increased from 12px */
            color: var(--text-color);
        }

        .button-icon.earn svg {
            color: #000000;
        }

        .button-label {
            font-size: 12px; /* Increased from 8px */
        }

        .promo-banner {
            margin: 0 15px 22.5px;
            background-color: #242426;
            border-radius: 12px; /* Increased from 8px */
            padding: 15px;
            display: flex;
            position: relative;
            border: 1px solid #31ccfa;
        }

        .banner-image {
            width: 60px; /* Increased from 40px */
            height: 60px; /* Increased from 40px */
            margin-right: 12px;
        }

        .banner-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .banner-title {
            font-size: 15px; /* Increased from 10px */
            font-weight: 500;
            margin-bottom: 3px;
        }

        .banner-cta {
            color: #48f98f;
            font-size: 13.5px; /* Increased from 9px */
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .close-button {
            position: absolute;
            top: 9px;
            right: 9px;
            width: 18px; /* Increased from 12px */
            height: 18px; /* Increased from 12px */
            color: #9b9b9d;
            cursor: pointer;
        }

        .crypto-section {
            padding: 0 15px;
        }

        .crypto-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .crypto-title {
            font-size: 18px; /* Increased from 12px */
            font-weight: 500;
        }

        .filter-icon {
            width: 18px; /* Increased from 12px */
            height: 18px; /* Increased from 12px */
            color: #9b9b9d;
        }

        .crypto-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .crypto-item {
            background-color: #242426;
            border-radius: 12px; /* Increased from 8px */
            padding: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .crypto-info {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .crypto-logo {
            width: 30px; /* Increased from 20px */
            height: 30px; /* Increased from 20px */
            border-radius: 50%;
            overflow: hidden;
        }

        .crypto-name {
            display: flex;
            flex-direction: column;
        }

        .crypto-symbol {
            font-size: 13.5px; /* Increased from 9px */
            font-weight: 500;
        }

        .crypto-fullname {
            font-size: 12px; /* Increased from 8px */
            color: #9b9b9d;
        }

        .crypto-balance {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
		
		.crypto-balance .value {
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}
.crypto-header .crypto-network {
  margin-left: 4px !important;
}
        .crypto-amount {
            font-size: 13.5px; /* Increased from 9px */
            font-weight: 500;
        }

        .crypto-value {
            font-size: 12px; /* Increased from 8px */
            color: #9b9b9d;
        }

        /* Earn page styles */
        .earn-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-bottom: 52.5px; /* Increased from 35px */
        }

        .staking-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0 15px;
        }

        .staking-item {
            background-color: #242426;
            border-radius: 12px; /* Increased from 8px */
            padding: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .staking-info {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .staking-logo {
            width: 30px; /* Increased from 20px */
            height: 30px; /* Increased from 20px */
            border-radius: 50%;
            overflow: hidden;
        }

        .staking-name {
            display: flex;
            flex-direction: column;
        }

        .staking-symbol {
            font-size: 13.5px; /* Increased from 9px */
            font-weight: 500;
        }

        .staking-fullname {
            font-size: 12px; /* Increased from 8px */
            color: #9b9b9d;
        }

        .staking-apr {
            font-size: 13.5px; /* Increased from 9px */
            font-weight: 500;
            color: #48f98f;
        }

        /* Settings page styles */
        .settings-container {
            flex: 1;
            padding: 0 18px;
            padding-bottom: 52.5px; /* Increased from 35px */
        }

        .settings-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .settings-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            cursor: pointer;
        }

        .settings-item-with-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
        }

        .settings-icon {
            width: 30px; /* Increased from 20px */
            height: 30px; /* Increased from 20px */
            background-color: #262626;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }

        .settings-icon svg {
            width: 18px; /* Increased from 12px */
            height: 18px; /* Increased from 12px */
            color: #b2b2b4;
        }

        .settings-label {
            font-size: 15px; /* Increased from 10px */
        }

        .settings-left {
            display: flex;
            align-items: center;
        }

        /* Toggle switch */
        .switch {
            position: relative;
            display: inline-block;
            width: 37.5px; /* Increased from 25px */
            height: 22.5px; /* Increased from 15px */
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #262626;
            transition: .4s;
            border-radius: 25.5px; /* Increased from 17px */
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 19.5px; /* Increased from 13px */
            width: 19.5px; /* Increased from 13px */
            left: 1.5px; /* Increased from 1px */
            bottom: 1.5px; /* Increased from 1px */
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #48f98f;
        }

        input:checked + .slider:before {
            transform: translateX(15px); /* Increased from 10px */
        }

        /* History page styles */
        .history-container {
            flex: 1;
            padding: 0 18px;
            display: flex;
            flex-direction: column;
            padding-bottom: 52.5px; /* Increased from 35px */
        }

        .networks-filter {
            background-color: #262626;
            border-radius: 22.5px; /* Increased from 15px */
            padding: 9px 18px;
            display: inline-block;
            margin: 12px 0;
            font-size: 15px; /* Increased from 10px */
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-top: 60px;
        }

        .search-icon-container {
            background-color: #f7f7f7;
            width: 135px; /* Increased from 90px */
            height: 90px; /* Increased from 60px */
            border-radius: 9px; /* Increased from 6px */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }

        .search-icon-large {
            width: 45px; /* Increased from 30px */
            height: 45px; /* Increased from 30px */
            color: #00a2ff;
        }

        .placeholder-lines {
            display: flex;
            gap: 15px;
            margin-bottom: 22.5px;
        }

        .placeholder-column {
            display: flex;
            flex-direction: column;
            gap: 7.5px;
        }

        .placeholder-line {
            height: 7.5px; /* Increased from 5px */
            width: 60px; /* Increased from 40px */
            background-color: #b2b2b4;
            opacity: 0.3;
            border-radius: 3.75px; /* Increased from 2.5px */
        }

        .empty-message {
            font-size: 16.5px; /* Increased from 11px */
            color: #9b9b9d;
            max-width: 300px; /* Increased from 200px */
            line-height: 1.4;
        }

        /* Bottom navigation */
        .bottom-nav {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid #262626;
            background-color: #1b1b1b;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            height: 52.5px; /* Increased from 35px */
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 6px 0;
            cursor: pointer;
        }

        .nav-item svg {
            width: 18px; /* Increased from 12px */
            height: 18px; /* Increased from 12px */
            color: #9b9b9d;
            margin-bottom: 3px;
        }

        .nav-item span {
            font-size: 10.5px; /* Increased from 7px */
            color: #9b9b9d;
        }

        .nav-item.active svg,
        .nav-item.active span {
            color: #48f98f;
        }

        /* Page transitions */
        .page {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .page.active {
            display: block;
            opacity: 1;
        }
		
		.crypto-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #1e1e1e;
  border-radius: 8px;
}

.crypto-network {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #555;
  border-radius: 12px;
  font-size: 12px;
  color: #ccc;
}
.crypto-info {
  display: flex;
  align-items: center;
}

.crypto-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}

.crypto-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crypto-text {
  display: flex;
  flex-direction: column;
}

.crypto-header {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.crypto-header .name {
  font-weight: normal;
  color: #aaa;
  margin-left: 8px;
}

.crypto-price {
  font-size: 14px;
  color: #aaa;
}

.crypto-price .positive {
  color: #4caf50;
  margin-left: 4px;
}

.crypto-price .negative {
  color: #f44336;
  margin-left: 4px;
}

.crypto-balance {
  text-align: right;
  font-size: 16px;    /* чуть больше */
  color: #fff;
}

.crypto-balance .value {
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; justify-content: center; align-items: flex-end;
  z-index: 1000;
}
.modal-window {
  background: #111; width:100%; max-width:400px; height:80%;
  border-top-left-radius:12px; border-top-right-radius:12px;
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-header {
  display:flex; align-items:center;
  padding:12px; border-bottom:1px solid #333; color:#fff;
}
.modal-header h2 { flex:1; text-align:center; margin:0; }
.modal-back {
  background:none; border:none; color:#ccc; font-size:1.2em; cursor:pointer;
}
.modal-search {
  padding:0 12px; border-bottom:1px solid #333;
}
.modal-search input {
  width:100%; padding:8px; background:#222;
  border:none; border-radius:6px; color:#fff;
}
.modal-list {
  flex:1; overflow-y:auto; list-style:none; margin:0; padding:0;
}
.modal-list li {
  display:flex; align-items:center;
  padding:12px; border-bottom:1px solid #333;
  cursor:pointer; color:#fff;
}
.modal-list li:hover { background:#1a1a1a; }
.modal-list img.icon {
  width:24px; height:24px; margin-right:12px;
}
.modal-list .label { flex:1; }
.modal-list .radio {
  width:18px; height:18px; border:2px solid #555; border-radius:50%;
  position:relative;
}
.modal-list .radio.selected::after {
  content:""; position:absolute; top:3px; left:3px;
  width:8px; height:8px; background:#4caf50; border-radius:50%;
}
.modal-list li { display:flex; align-items:center; padding:12px; border-bottom:1px solid #333; cursor:pointer; color:#fff; }
.modal-list img.icon { width:24px; height:24px; margin-right:12px; object-fit:contain; }
.modal-list .label { flex:1; }
.modal-list .checkbox { margin-right:12px; width:18px; height:18px; }
/* === Стили для списка сетей в модалке === */
#network-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#network-list li {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid #333;
}
#network-list li:first-child {
  border-top: none;
}

/* иконка слева */
#network-list li .icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 12px;
}

/* текст названия сети в пилке */
#network-list li .label {
  background: #222;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.95rem;
  margin-right: auto; /* чтобы чекбокс справа */
}

/* круглый чекбокс справа */
#network-list li .checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
#network-list li .checkbox:checked {
  background: #4caf50;
  border-color: #4caf50;
}
#network-list li .checkbox:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
}

/* “All networks” пункт */
#network-list li:first-child .label {
  font-weight: bold;
}
#network-list li:first-child .checkbox {
  border-color: #4caf50;
}
#network-list li:first-child .checkbox:checked {
  background: #4caf50;
}

/* шрифты заголовка модалки */
#network-modal h2 {
  font-size: 1.3rem;
}

/* поиск */
#network-search {
  font-size: 1rem;
}

.btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 50%;
}
#btn-network-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #4caf50;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
#btn-network-filter img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
#network-list li {
  margin: 8px 0;
}
#network-list img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
#network-list .label {
  font-size: 1.2rem;
}
#network-search { font-size:1.1rem; }
#modal-apply {
  margin-top: 16px;
  padding: 16px 24px;
  background: #4caf50;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}
/* Увеличиваем «радиокнопки» (чекбоксы) в модальном окне */
#network-list .checkbox {
  /* сделаем их в полтора раза больше (или подберите своё значение) */
  width: 24px;
  height: 24px;
  /* если хотите, чтобы обработка кликов шла по всей области, а не только по input */
  margin-right: 12px;
  vertical-align: middle;
}

/* Скрываем нативный радиокружок и рисуем свой, если нужен кастомный стиль */
#network-list .checkbox {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #4caf50;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
#network-list .checkbox:checked::before {
  content: '';
  display: block;
  width: 12px;   /* внутренний кружочек половинного размера */
  height: 12px;
  background: #4caf50;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#btn-network-filter img.icon {
  width: 72px;
  height: 72x;
  margin-right: 8px;
  vertical-align: middle;
}
#network-list .icon {
  width: 72px;    /* в 2 раза больше, чем было (раньше было ~16px) */
  height: 72px;
  object-fit: contain;
  margin-right: 12px; /* отступ между иконкой и текстом */
  vertical-align: middle;
}
.token-network {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid #444;
  border-radius: 10px;
  font-size: 12px;
  color: #ccc;
  vertical-align: middle;
}
.crypto-header {
  display: flex;
  align-items: center;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  padding: 0 4px;
  gap: 4px;
}
.action-button {
  width: 64px;
  height: 64px;
  background: #1f1f1f;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.action-button svg {
  width: 20px;
  height: 20px;
  stroke: white;
}
.action-button.green {
  background: #00ff95;
}
.action-button.green svg {
  stroke: black;
}
.button-label {
  font-size: 11px;
  color: white;
  font-weight: 500;
}
.action-button.green .button-label {
  color: black;
}
.manage-btn {
  display: block;
  margin: 30px auto;
  background-color: #00ff95;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.manage-btn:hover {
  background-color: #00cc7a;
}

/* Лоадер */
#global-loader {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items:center; justify-content:center;
  z-index: 9999;
}
#global-loader.hidden { display: none; }
.spinner {
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  width: 40px; height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Скелетон для карточек */
.skeleton {
  background: #222;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute; top:0; left:-100%;
  width:100%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  animation: load 1.2s infinite;
}
@keyframes load { to { left:100%; } }

/* Toastы */
.toast-container {
  position: fixed; top:16px; right:16px;
  display: flex; flex-direction: column; gap:8px;
  z-index:10000;
}
.toast {
  padding: 10px 16px;
  border-radius: 4px;
  color: #fff;
  min-width: 200px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(-10px);
  animation: toast-in .3s forwards, toast-out .3s forwards 3.7s;
}
.toast.info    { background: #333; }
.toast.success { background: #00aa00; }
.toast.error   { background: #aa0000; }

@keyframes toast-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-10px); }
}