:root {
  --bg: #0a0a0c; --card: #121317; --field: #0d0e11; --line: rgba(255,255,255,.08);
  --text: #f4f5f8; --muted: #8b8f9c; --accent: #0098ea; --accent2: #3db5ff; --ok: #4ade80; --bad: #f87171; --warn: #fbbf24;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--text); font: 15px/1.4 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }

/* фон — те же цветные пятна, что на основном сайте */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .32; }
.b1 { width: 60vmax; height: 60vmax; background: #0098ea; top: -28vmax; left: -18vmax; animation: f1 20s ease-in-out infinite; }
.b2 { width: 55vmax; height: 55vmax; background: #5a2fd6; bottom: -30vmax; right: -20vmax; animation: f2 24s ease-in-out infinite; }
.b3 { width: 30vmax; height: 30vmax; background: #8b5cf6; top: 40%; left: 60%; opacity: .15; animation: f1 28s ease-in-out infinite reverse; }
@keyframes f1 { 50% { transform: translate(8vmax, 6vmax) scale(1.1); } }
@keyframes f2 { 50% { transform: translate(-6vmax, -8vmax) scale(.95); } }

.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 4vw, 40px); }
.brand { font: 800 22px Unbounded, sans-serif; color: #fff; text-decoration: none; letter-spacing: -.01em; }
.brand #brandText { color: #fff; }

.main { position: relative; z-index: 1; display: flex; justify-content: center; padding: 4vh 16px 60px; }
.swap {
  width: min(460px, 100%); padding: 14px; border-radius: 28px;
  background: rgba(18,19,23,.86); border: 1px solid var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
.swap-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px; }
.swap-head h1 { font: 700 20px Unbounded, sans-serif; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: none; border: 0; color: var(--muted); transition: background .2s, color .2s; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: rgba(255,255,255,.07); color: #fff; }
.icon-btn svg { width: 22px; height: 22px; }

.settings { margin: 0 4px 12px; padding: 14px; border-radius: 18px; background: var(--field); border: 1px solid var(--line); animation: pop .3s cubic-bezier(.22,1,.36,1); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.set-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.set-row { display: flex; gap: 8px; }
.set-row button { flex: 1; padding: 9px 0; border-radius: 12px; border: 1px solid var(--line); background: none; font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.set-row button.on { background: #fff; color: #0a0a0c; border-color: #fff; }
.slip-custom { flex: 1.3; display: flex; align-items: center; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); }
.slip-custom input { width: 100%; background: none; border: 0; outline: 0; padding: 9px 0; font-weight: 600; font-size: 14px; }
.slip-custom span { color: var(--muted); font-size: 14px; }

.field { padding: 16px 16px 14px; border-radius: 22px; background: var(--field); border: 1px solid transparent; transition: border-color .2s; }
.field:focus-within { border-color: rgba(255,255,255,.12); }
.f-top, .f-bot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); min-height: 20px; }
.f-mid { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.f-mid input, .out {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  font: 600 34px Inter, sans-serif; letter-spacing: -.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.f-mid input::placeholder { color: #44474f; }
.out.dim { color: #44474f; }
.out.loading { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.bal { cursor: default; }
.bal.click { cursor: pointer; }
.bal.click:hover { color: #fff; }
.pcts { display: flex; gap: 6px; }
.pcts button { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: none; font-size: 12px; font-weight: 600; color: var(--muted); transition: color .2s, border-color .2s; }
.pcts button:hover { color: #fff; border-color: rgba(255,255,255,.25); }

.token-btn {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); font-weight: 700; font-size: 16px; transition: background .2s;
}
.token-btn:hover { background: rgba(255,255,255,.12); }
.token-btn img, .t-ico { width: 30px; height: 30px; border-radius: 50%; background: #1e2026; object-fit: cover; flex: none; }
.token-btn::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; }

.flip {
  position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -12px auto;
  border-radius: 14px; background: var(--card); border: 4px solid rgba(18,19,23,1); color: #fff;
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .2s;
}
.flip:hover { background: #1c1e24; }
.flip.turn { transform: rotate(180deg); }
.flip svg { width: 20px; height: 20px; }

.quote-state { font-size: 12px; }
.quote-state.bad { color: var(--bad); }

.details { margin: 12px 4px 0; padding: 4px 12px; border-radius: 18px; border: 1px solid var(--line); animation: pop .35s cubic-bezier(.22,1,.36,1); }
.d-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.d-row:first-child { border-top: 0; }
.d-row b { color: #fff; font-weight: 600; text-align: right; }
.d-rate span:first-child { color: #fff; font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.6s infinite; }
#impact.warn { color: var(--warn); }
#impact.bad { color: var(--bad); }

.cta {
  width: 100%; margin-top: 12px; padding: 18px; border-radius: 20px; border: 0;
  background: #fff; color: #0a0a0c; font: 700 17px Inter, sans-serif;
  transition: background .2s, transform .15s, opacity .2s;
}
.cta:hover:not(:disabled) { background: #e6e8ee; }
.cta:active:not(:disabled) { transform: scale(.985); }
.cta:disabled { background: rgba(255,255,255,.08); color: var(--muted); cursor: default; }
.cta.danger:disabled { color: var(--bad); }
.powered { margin-top: 12px; text-align: center; font-size: 12px; color: #5c606b; }

/* модальные окна */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.modal-card { width: min(440px, 100%); max-height: min(640px, 88vh); display: flex; flex-direction: column; padding: 18px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0,0,0,.95); animation: rise .4s cubic-bezier(.22,1,.36,1); }
@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.m-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.m-head h2 { font: 700 18px Unbounded, sans-serif; }
.search { width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); outline: 0; font-size: 15px; }
.search:focus { border-color: rgba(255,255,255,.2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: none; font-weight: 600; font-size: 13px; }
.chip:hover { background: rgba(255,255,255,.06); }
.chip img { width: 22px; height: 22px; border-radius: 50%; }
.token-list { overflow: auto; margin: 4px -8px 0; padding: 0 4px; min-height: 120px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.t-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: none; border: 0; text-align: left; transition: background .15s; }
.t-row:hover, .t-row:focus-visible { background: rgba(255,255,255,.06); outline: 0; }
.t-row .t-ico { width: 38px; height: 38px; }
.t-name { flex: 1; min-width: 0; }
.t-name b { display: block; font-weight: 700; }
.t-name span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-bal { text-align: right; font: 500 13px var(--mono); }
.t-bal span { display: block; font: 500 11px Inter, sans-serif; color: var(--muted); }
.t-empty { padding: 30px 10px; text-align: center; color: var(--muted); font-size: 14px; }

.tx-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 18px; font-weight: 600; flex-wrap: wrap; }
.tx-pair img { width: 26px; height: 26px; border-radius: 50%; }
.tx-pair i { font-style: normal; color: var(--muted); }
.steps { list-style: none; display: grid; gap: 4px; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; color: var(--muted); font-weight: 500; transition: color .3s; }
.steps li i { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #33363f; position: relative; transition: border-color .3s, background .3s; }
.steps li.active { color: #fff; }
.steps li.active i { border-color: var(--accent2); border-top-color: transparent; animation: spin .8s linear infinite; }
.steps li.done { color: #fff; }
.steps li.done i { background: var(--ok); border-color: var(--ok); }
.steps li.done i::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #0a0a0c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps li.fail { color: var(--bad); }
.steps li.fail i { background: var(--bad); border-color: var(--bad); }
@keyframes spin { to { transform: rotate(360deg); } }
.tx-msg { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.5; min-height: 21px; }
.tx-msg.ok { color: var(--ok); }
.tx-msg.bad { color: var(--bad); }
.tx-link { display: block; margin-top: 12px; padding: 13px; border-radius: 14px; text-align: center; font-weight: 600; color: #fff; text-decoration: none; background: rgba(255,255,255,.07); }
.tx-link:hover { background: rgba(255,255,255,.12); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 14px; background: #fff; color: #0a0a0c; font-weight: 600; font-size: 14px; transition: opacity .25s, transform .25s; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bad); color: #fff; }

@media (max-width: 520px) {
  .main { padding-top: 8px; }
  .swap { padding: 10px; border-radius: 24px; }
  .f-mid input, .out { font-size: 28px; }
  .modal { align-items: end; padding: 0; }
  .modal-card { width: 100%; max-height: 86vh; border-radius: 26px 26px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .blob, .live i, .out.loading { animation: none; } }

/* метки проверенных/непроверенных токенов и заглушка иконки */
.t-name b em { font-style: normal; margin-left: 6px; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.t-name b em.ok { color: var(--accent2); }
.t-name b em.un { color: var(--warn); padding: 1px 6px; border-radius: 999px; background: rgba(251,191,36,.12); }
.t-letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2a2d36; color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.chip .t-letter { width: 22px; height: 22px; font-size: 11px; }
.t-row .t-letter { width: 38px; height: 38px; font-size: 15px; }
.tx-pair .t-letter { width: 26px; height: 26px; }
.d-warn span, .d-warn b { color: var(--warn) !important; }

/* ================= шапка с разделами ================= */
.top { gap: 20px; max-width: 1180px; margin: 0 auto; }
.nav { display: flex; gap: 6px; margin-right: auto; margin-left: 18px; }
.nav a { padding: 8px 14px; border-radius: 12px; color: var(--muted); font-weight: 600; text-decoration: none; transition: color .2s, background .2s; }
.nav a:hover { color: #fff; }
.nav a.on { color: #fff; background: rgba(255,255,255,.07); }
.top-right { display: flex; align-items: center; gap: 8px; }
.price-chip { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.06); font: 600 14px var(--mono); }
.price-chip img, .price-chip .t-letter { width: 24px; height: 24px; border-radius: 50%; }

.main { flex-direction: column; align-items: center; padding-top: 3vh; }
.view { width: min(1120px, 100%); animation: viewIn .45s cubic-bezier(.22,1,.36,1); }
.view-center { display: flex; justify-content: center; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

/* ================= главная: плитки ================= */
.hero-banner, .tile, .collection-card {
  position: relative; overflow: hidden; border-radius: 28px;
  background: linear-gradient(160deg, #17181d, #111216); border: 1px solid var(--line);
  color: #fff; text-decoration: none;
}
.hero-banner { display: flex; align-items: center; min-height: 230px; padding: 32px; margin-bottom: 16px; }
.hero-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 50%, rgba(0,152,234,.28), transparent 55%); }
.hb-copy { position: relative; z-index: 2; max-width: 520px; }
.hb-copy h1 { font: 800 clamp(24px, 3vw, 34px)/1.15 Unbounded, sans-serif; margin-bottom: 10px; }
.hb-copy p { color: var(--muted); margin-bottom: 22px; max-width: 440px; }
.hb-art { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); height: 135%; pointer-events: none; }
.btn-main, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 16px; font-weight: 700; text-decoration: none; border: 0; transition: transform .15s, background .2s; }
.btn-main { background: #fff; color: #0a0a0c; }
.btn-main:hover { background: #e6e8ee; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.14); }

.tiles { display: grid; gap: 16px; margin-bottom: 16px; }
.tiles-2 { grid-template-columns: 1fr 1fr; }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tile { display: flex; flex-direction: column; min-height: 240px; padding: 24px; transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s; }
.tile-s { min-height: 150px; }
.tile:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.16); }
.tile b { position: relative; z-index: 2; font: 700 26px Unbounded, sans-serif; }
.tile-s b { font-size: 19px; }
.tile span { position: relative; z-index: 2; margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 55%; }
.tile img { position: absolute; right: -30px; bottom: -40px; height: 115%; pointer-events: none; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.tile-s img { height: 135%; right: -40px; bottom: -50px; }
.tile:hover img { transform: translate(-6px, -6px) rotate(-3deg) scale(1.04); }

.collection-card { display: flex; align-items: center; padding: 32px; min-height: 280px; margin-bottom: 16px; }
.collection-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 60%, rgba(139,92,246,.3), transparent 55%); }
.cc-copy { position: relative; z-index: 2; max-width: 520px; }
.cc-copy h2 { font: 800 28px Unbounded, sans-serif; margin-bottom: 8px; }
.cc-copy p { color: var(--muted); margin-bottom: 20px; }
.cc-stats { display: flex; gap: 28px; margin-bottom: 22px; }
.cc-stats span, .stats-row span { display: block; font-size: 13px; color: var(--muted); }
.cc-stats b { font: 700 22px Inter, sans-serif; }
.cc-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-art { position: absolute; right: 0; bottom: -30px; height: 120%; pointer-events: none; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats-row div { padding: 20px 22px; border-radius: 22px; background: rgba(18,19,23,.86); border: 1px solid var(--line); }
.stats-row b { font: 700 22px Inter, sans-serif; }

/* ================= таблицы ================= */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 18px; }
.page-head h1 { font: 800 30px Unbounded, sans-serif; }
.page-search { max-width: 280px; }
.table-card { border-radius: 24px; background: rgba(18,19,23,.86); border: 1px solid var(--line); overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 14px 18px; text-align: right; font-weight: 600; font-size: 12px; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); }
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]:hover, .table th.sorted { color: #fff; }
.table th.sorted::after { content: " \2193"; }
.table td { padding: 12px 18px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.04); font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(255,255,255,.03); }
.table .l { text-align: left; }
.table .muted { color: var(--muted); }
.table .pos { color: var(--ok); }
.tok { display: inline-flex; align-items: center; gap: 10px; }
.tok img, .tok .t-letter { width: 30px; height: 30px; border-radius: 50%; }
.tok b { font-weight: 700; }
.tok > span:not(.pair):not(.t-letter) { color: var(--muted); font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tok em.un { font-style: normal; margin-left: 6px; font-size: 11px; color: var(--warn); }
.pair { display: inline-flex; }
.pair > :last-child { margin-left: -10px; box-shadow: 0 0 0 2px #121317; border-radius: 50%; }
.row-btn { padding: 7px 14px; border-radius: 10px; border: 0; background: rgba(255,255,255,.08); font-weight: 600; font-size: 13px; transition: background .2s, color .2s; }
.row-btn:hover { background: #fff; color: #0a0a0c; }
.t-loading { text-align: center !important; padding: 40px !important; color: var(--muted); }
.note { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }

.pf-total { margin-bottom: 16px; padding: 24px; border-radius: 24px; background: rgba(18,19,23,.86); border: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pf-total span { color: var(--muted); }
.pf-total b { font: 800 34px Inter, sans-serif; }
.pf-total em { font-style: normal; color: var(--muted); font-size: 14px; }
.pf-empty { display: grid; gap: 8px; justify-items: start; width: 100%; }
.pf-empty b { font: 700 20px Unbounded, sans-serif; }
.pf-empty .btn-main { margin-top: 10px; }

.tabbar { display: none; }

@media (max-width: 860px) {
  .nav, .price-chip { display: none; }
  .tiles-2 { grid-template-columns: 1fr; }
  .tiles-3 { grid-template-columns: 1fr 1fr; }
  .tiles-3 .tile:last-child { grid-column: span 2; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .hb-art, .cc-art { opacity: .35; }
  .tile span { max-width: 60%; }
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 64px;
    background: rgba(22,23,28,.82); border: 1px solid var(--line); border-radius: 22px;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: rgba(255,255,255,.4); text-decoration: none; font-size: 10px; font-weight: 600; transition: color .25s; }
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a.on { color: #fff; }
  .tabbar .tab-main { width: 64px; height: 64px; margin: -26px auto 0; justify-content: center; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #2ab0f5, #0077c8); box-shadow: 0 0 0 5px rgba(10,10,12,.95), 0 12px 26px -6px rgba(0,152,234,.75); }
  .tabbar .tab-main svg { width: 30px; height: 30px; }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .hero-banner, .collection-card { padding: 24px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-search { max-width: none; }
  .table td, .table th { padding: 11px 12px; }
  #tokensTable th:nth-child(1), #tokensTable td:nth-child(1), #tokensTable th:nth-child(5), #tokensTable td:nth-child(5) { display: none; }
  #poolsTable th:nth-child(4), #poolsTable td:nth-child(4) { display: none; }
  #pfTable th:nth-child(2), #pfTable td:nth-child(2) { display: none; }
}

#poolsTable.no-apy th:nth-child(4), #poolsTable.no-apy td:nth-child(4) { display: none; }

/* ================= логотип с меню продуктов ================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-wrap { position: relative; }
.brand {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-left: -8px; border-radius: 12px;
  background: none; border: 0; color: #fff; cursor: pointer; font: 800 22px Unbounded, sans-serif; letter-spacing: -.01em;
  transition: background .2s;
}
.brand:hover, .brand[aria-expanded="true"] { background: rgba(255,255,255,.08); }
.brand .caret { width: 12px; height: 12px; opacity: .7; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.brand[aria-expanded="true"] .caret { transform: rotate(180deg); }
.brand-menu {
  position: absolute; top: calc(100% + 10px); left: -8px; width: 330px; padding: 14px;
  background: #16171b; border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
  transform-origin: top left;
  /* мягкое появление и исчезновение: прозрачность + лёгкий сдвиг и масштаб */
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); filter: blur(2px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease, visibility 0s .45s;
}
.brand-menu.open {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .35s ease, visibility 0s;
}
/* пункты появляются друг за другом */
.brand-menu > * { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.brand-menu.open > * { opacity: 1; transform: none; }
.brand-menu.open > :nth-child(2) { transition-delay: .04s; } .brand-menu.open > :nth-child(3) { transition-delay: .08s; }
.brand-menu.open > :nth-child(4) { transition-delay: .12s; } .brand-menu.open > :nth-child(5) { transition-delay: .16s; }
.brand-menu.open > :nth-child(6) { transition-delay: .2s; }
.bm-label { font: 600 12px Inter, sans-serif; color: var(--muted); margin: 2px 8px 8px; }
.bm-item { display: flex; gap: 12px; align-items: center; padding: 9px 8px; border-radius: 14px; transition: background .15s; }
.bm-item:hover { background: rgba(255,255,255,.06); }
.bm-item i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.07); color: #c9cbd3; transition: background .15s, color .15s; }
.bm-item:hover i, .bm-item.current i { background: rgba(255,255,255,.12); color: #fff; }
.bm-item i svg { width: 20px; height: 20px; }
.bm-item span { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.bm-item b { font: 700 14px Inter, sans-serif; color: #fff; display: flex; align-items: center; gap: 8px; }
.bm-item em { font: 600 10px Inter, sans-serif; font-style: normal; color: #3db5ff; background: rgba(0,152,234,.14); padding: 2px 7px; border-radius: 999px; }
.bm-sections { display: none; }
.bm-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); }
.bm-foot span { font: 600 12px Inter, sans-serif; color: var(--muted); margin-right: auto; }
.bm-foot a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #c9cbd3; transition: background .15s, color .15s; }
.bm-foot a:hover { background: rgba(255,255,255,.08); color: #fff; }
.bm-foot svg { width: 18px; height: 18px; }

.brand-menu { z-index: 60; }
.bm-item.current { background: rgba(255,255,255,.05); }
.brand-menu > * { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.brand-menu.open > * { opacity: 1; transform: none; }
.brand-menu.open > :nth-child(2) { transition-delay: .04s; } .brand-menu.open > :nth-child(3) { transition-delay: .08s; }
.brand-menu.open > :nth-child(4) { transition-delay: .12s; } .brand-menu.open > :nth-child(5) { transition-delay: .16s; }
.brand-menu.open > :nth-child(6) { transition-delay: .2s; } .brand-menu.open > :nth-child(7) { transition-delay: .24s; }
@media (max-width: 860px) {
  .bm-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
  .bm-sections a { padding: 9px 8px; border-radius: 10px; font: 600 14px Inter, sans-serif; color: #fff; text-decoration: none; }
  .bm-sections a:hover { background: rgba(255,255,255,.06); }
  .brand-menu { width: min(330px, calc(100vw - 24px)); }
}
.brand-menu .bm-item { color: inherit; text-decoration: none; }

/* ================= заставка ================= */
#intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.intro-bg { position: absolute; inset: 0; background: #000; }
.intro-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0;
  font: 800 clamp(48px, 11vw, 150px) Unbounded, sans-serif; letter-spacing: -.01em; color: #fff; white-space: nowrap;
}
.intro-on #brandText { opacity: 0; }
.intro-on .main, .intro-on .nav, .intro-on .top-right, .intro-on .tabbar { opacity: 0; transform: translateY(24px); }
.intro-on.intro-reveal .main, .intro-on.intro-reveal .nav, .intro-on.intro-reveal .top-right, .intro-on.intro-reveal .tabbar {
  opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.intro-on.intro-reveal .main { transition-delay: .1s; }

/* ================= стиль в духе Uniswap ================= */
.view-trade { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 4vh; min-height: calc(100vh - 140px); }
.trade-title { position: relative; z-index: 2; text-align: center; font: 800 clamp(36px, 6vw, 68px)/1.05 Unbounded, sans-serif; letter-spacing: -.02em; margin-bottom: 28px; }
.trade-sub { position: relative; z-index: 2; margin: 26px 0 18px; color: var(--muted); font-size: 16px; text-align: center; }
.view-trade .swap { position: relative; z-index: 2; }
.view-trade .stats-row { position: relative; z-index: 2; width: min(760px, 100%); }
.floaters { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.floaters img {
  position: absolute; border-radius: 50%; opacity: .55; filter: saturate(.9);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.8);
  animation: floatTok ease-in-out infinite alternate;
}
@keyframes floatTok { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(14px, -26px) rotate(var(--r)); } }
.nft-strip {
  position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  width: min(760px, 100%); margin-top: 16px; padding: 18px 22px; border-radius: 20px; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, rgba(0,152,234,.16), rgba(139,92,246,.16)); border: 1px solid var(--line);
  transition: border-color .3s;
}
.nft-strip:hover { border-color: rgba(255,255,255,.2); }
.nft-strip span { color: var(--muted); }
.nft-strip b { color: #fff; }
.nft-strip em { font-style: normal; font-weight: 700; white-space: nowrap; }

.explore-title { font: 800 34px Unbounded, sans-serif; margin: 8px 0 18px; }
.explore-stats { margin-bottom: 26px; }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 8px 4px; margin-right: 18px; font: 700 22px Inter, sans-serif; color: #5c606b; text-decoration: none; transition: color .2s; }
.tabs a:hover { color: #b8bbc5; }
.tabs a.on { color: #fff; }

@media (max-width: 860px) {
  .floaters img { opacity: .25; }
  .tabbar { grid-template-columns: repeat(3, 1fr); }
  .trade-title { margin-bottom: 20px; }
}
@media (max-width: 600px) {
  .page-head { flex-direction: row; align-items: center; }
  .page-search { max-width: 150px; }
  .nft-strip { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .floaters img { animation: none; } }

/* плавающие монетки — размытые, в глубине фона */
.floaters img { filter: blur(6px) saturate(.9); opacity: .45; }
.floaters img:nth-child(3n) { filter: blur(10px); opacity: .35; }
.floaters img:nth-child(4n) { filter: blur(3px); opacity: .5; }
.view-trade { padding-top: 6vh; }

/* ================= индексы ================= */
.nav-new { font-style: normal; margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #3db5ff; background: rgba(0,152,234,.16); vertical-align: 1px; }
.idx-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.idx-head .explore-title { margin-bottom: 0; }
.demo-badge { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--warn); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25); }
.idx-lead { color: var(--muted); max-width: 640px; margin: 12px 0 22px; line-height: 1.55; }
.idx-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.idx-card {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 2px 16px; text-align: left;
  padding: 18px 20px; border-radius: 22px; background: rgba(18,19,23,.86); border: 1px solid var(--line); color: #fff;
  transition: border-color .25s, transform .3s cubic-bezier(.22,1,.36,1);
}
.idx-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); }
.idx-card.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset, 0 20px 40px -24px var(--c); }
.ic-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.ic-top b { font: 800 18px Unbounded, sans-serif; }
.ic-top em, .idx-change { font-style: normal; font-size: 13px; font-weight: 700; }
.up { color: var(--ok); } .down { color: var(--bad); }
.ic-name { color: var(--muted); font-size: 13px; }
.ic-price { font: 700 22px Inter, sans-serif; grid-row: 3; }
.idx-card svg { grid-column: 2; grid-row: 2 / 4; width: 140px; height: 48px; align-self: end; }

.idx-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
.idx-main { display: grid; gap: 16px; min-width: 0; }
.idx-chart-card, .idx-block, .idx-trade, .idx-pos { border-radius: 24px; background: rgba(18,19,23,.86); border: 1px solid var(--line); padding: 20px; }
.idx-title { display: flex; align-items: baseline; gap: 10px; }
.idx-title b { font: 700 18px Unbounded, sans-serif; }
.idx-title span { color: var(--muted); font: 600 13px var(--mono); }
.idx-price-row { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 14px; }
.idx-price-row b { font: 800 36px Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.idx-change { color: var(--muted); }
.idx-chart { display: block; width: 100%; height: 260px; cursor: crosshair; touch-action: pan-y; }
.idx-ranges { display: flex; gap: 6px; margin-top: 12px; }
.idx-ranges button, .idx-tabs button { padding: 7px 14px; border-radius: 10px; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 13px; transition: background .2s, color .2s; }
.idx-ranges button.on, .idx-tabs button.on { background: rgba(255,255,255,.09); color: #fff; }
.idx-stats { grid-template-columns: repeat(4, 1fr); }
.idx-block h3, .idx-pos h3 { font: 700 15px Unbounded, sans-serif; margin-bottom: 10px; }
.idx-block p { color: var(--muted); line-height: 1.6; font-size: 14px; }
.idx-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 6px 0 14px; }
.idx-bar i { display: block; min-width: 3px; }
.idx-parts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.idx-parts li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.04); }
.idx-parts li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.idx-parts li span { flex: 1; color: #d6d8df; }
.idx-parts li b { font-variant-numeric: tabular-nums; }

.idx-side { display: grid; gap: 16px; position: sticky; top: 16px; }
.idx-trade { padding: 14px; }
.idx-tabs { display: flex; gap: 4px; margin: 2px 0 12px; }
.idx-trade .field + .field { margin-top: 8px; }
.idx-trade .f-mid input, .idx-trade .out { font-size: 28px; }
.unit { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-weight: 700; font-size: 14px; }
.idx-trade .details { margin: 12px 0 0; }
.d-row b { font-variant-numeric: tabular-nums; }
.pos-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--muted); border-top: 1px solid rgba(255,255,255,.05); }
.pos-row:first-child { border-top: 0; }
.pos-row b { color: #fff; }
.pos-empty { color: var(--muted); font-size: 14px; line-height: 1.55; }

@media (max-width: 960px) {
  .idx-grid { grid-template-columns: 1fr; }
  .idx-side { position: static; }
}
@media (max-width: 860px) { .tabbar { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) {
  .idx-cards { grid-template-columns: 1fr; }
  .idx-stats { grid-template-columns: 1fr 1fr; }
  .idx-parts { grid-template-columns: 1fr; }
  .idx-chart { height: 200px; }
  .idx-price-row b { font-size: 30px; }
}

/* ================= портфель: вкладки, NFT, активность ================= */
.pf-tabs { display: flex; gap: 6px; margin: 4px 0 16px; padding: 4px; border-radius: 16px; background: rgba(18,19,23,.86); border: 1px solid var(--line); width: fit-content; }
.pf-tabs button { padding: 9px 18px; border-radius: 12px; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 14px; transition: background .2s, color .2s; }
.pf-tabs button:hover { color: #fff; }
.pf-tabs button.on { background: rgba(255,255,255,.1); color: #fff; }
.pf-sec { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.pf-sec:first-child { margin-top: 0; }
.pf-sec h3 { font: 700 16px Unbounded, sans-serif; }
.pf-more { border: 0; background: none; color: var(--accent2); font-weight: 600; font-size: 14px; }
.pf-none { padding: 34px; text-align: center; color: var(--muted); border-radius: 22px; background: rgba(18,19,23,.86); border: 1px solid var(--line); }
.nft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.nft { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(18,19,23,.86); border: 1px solid var(--line); text-decoration: none; color: #fff; transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .25s; }
.nft:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.nft img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #1a1c22; }
.nft span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.nft b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nft em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nft em .ok { font-style: normal; color: var(--accent2); }
.act-list { border-radius: 22px; background: rgba(18,19,23,.86); border: 1px solid var(--line); overflow: hidden; }
.act { display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none; color: #fff; border-top: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.act:first-child { border-top: 0; }
.act:hover { background: rgba(255,255,255,.03); }
.act-ico { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #22252d; display: grid; place-items: center; }
.act-ico img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.act-ico i { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px Inter, sans-serif; font-style: normal; background: #3a3d47; border: 2px solid #121317; }
.act-ico.in i { background: #16a34a; } .act-ico.out i { background: #6b7280; } .act-ico.swap i { background: #0098ea; }
.act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.act-main b { font-size: 14px; }
.act-main span, .act-side span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; max-width: 45%; }
.act-side b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.act-main em { font-style: normal; font-size: 11px; }
@media (max-width: 600px) {
  .pf-tabs { width: 100%; justify-content: space-between; }
  .pf-tabs button { padding: 9px 10px; flex: 1; }
  .nft-grid { grid-template-columns: repeat(2, 1fr); }
}

/* размытые монетки на фоне — крупнее и заметнее */
.floaters img { opacity: .6; filter: blur(5px) saturate(1.05); }
.floaters img:nth-child(3n) { filter: blur(9px); opacity: .5; }
.floaters img:nth-child(4n) { filter: blur(3px); opacity: .7; }

/* индексы: колонки не растягиваются полем ввода */
.idx-side, .idx-main { min-width: 0; }
.idx-trade .f-mid input { width: 0; min-width: 0; flex: 1; }
.pf-hidden { display: block; margin: 14px auto 0; color: var(--muted); }
.pf-hidden:hover { color: #fff; }

/* ================= мобильная версия (≤600px): компактная шапка, таблицы → строки-карточки ================= */
@media (max-width: 600px) {
  .top { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 19px; padding: 4px 6px; }
  .top-right { gap: 4px; }
  #ton-connect { transform: scale(.88); transform-origin: right center; }
  .main { padding: 6px 12px calc(100px + env(safe-area-inset-bottom)); }
  .view-trade { padding-top: 6px; min-height: 0; }
  .swap { padding: 10px; }
  .swap-head { padding: 4px 6px 10px; }
  .field { padding: 14px 14px 12px; border-radius: 20px; }
  .trade-sub { margin: 18px 0 12px; font-size: 14px; }
  .nft-strip { margin-bottom: 8px; }
  .stats-row { gap: 10px; }
  .stats-row div { padding: 14px 16px; border-radius: 18px; }
  .stats-row b { font-size: 18px; }
  .explore-title { font-size: 28px; margin: 4px 0 14px; }
  .explore-stats { margin-bottom: 18px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 12px; }
  .page-search { max-width: none; }
  .tabs a { font-size: 20px; }

  /* таблицы токенов, пулов и портфеля — строки: иконка + название слева, цифры справа */
  .table-card { overflow: visible; border-radius: 20px; }
  .table, .table tbody { display: block; }
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { display: block; padding: 0 !important; border: 0 !important; text-align: right; white-space: nowrap; }
  .table td.l { text-align: left; }
  .table td.muted { display: none !important; }
  .table td:empty { display: none; }
  .tok { min-width: 0; max-width: 100%; }
  .tok > span:not(.pair):not(.t-letter) { max-width: 120px; }
  .row-btn { padding: 8px 14px; }

  /* токены: Token | Price, ниже объём; кнопка Swap — по тапу на всю строку */
  #tokensTable tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tok price" "tok vol"; row-gap: 2px; }
  #tokensTable td:nth-child(2) { grid-area: tok; }
  #tokensTable td:nth-child(3) { grid-area: price; font-weight: 700; }
  #tokensTable td:nth-child(4) { grid-area: vol; font-size: 12px; color: var(--muted); }
  #tokensTable td:nth-child(4)::before { content: "Vol "; }
  #tokensTable td:nth-child(5), #tokensTable td:nth-child(6) { display: none; }

  /* пулы: пара | ликвидность, ниже объём */
  #poolsTable tr { grid-template-areas: "pair tvl" "pair vol"; row-gap: 2px; }
  #poolsTable td:nth-child(1) { grid-area: pair; }
  #poolsTable td:nth-child(2) { grid-area: tvl; font-weight: 700; }
  #poolsTable td:nth-child(2)::before { content: "TVL "; font-weight: 400; color: var(--muted); font-size: 12px; }
  #poolsTable td:nth-child(3) { grid-area: vol; font-size: 12px; color: var(--muted); }
  #poolsTable td:nth-child(3)::before { content: "Vol "; }
  #poolsTable td:nth-child(4), #poolsTable td:nth-child(5) { display: none; }

  /* портфель: токен | стоимость, ниже количество */
  #pfTable tr { grid-template-areas: "tok val" "tok amt"; row-gap: 2px; }
  #pfTable td:nth-child(1) { grid-area: tok; }
  #pfTable td:nth-child(2), #pfTable td:nth-child(5) { display: none !important; }
  #pfTable td:nth-child(3) { grid-area: amt; font-size: 12px; color: var(--muted); }
  #pfTable td:nth-child(4) { grid-area: val; }
  .table tbody tr { cursor: pointer; }
  .t-loading { display: block; }

  /* индексы */
  .idx-head .explore-title { font-size: 28px; }
  .idx-lead { font-size: 14px; margin: 8px 0 16px; }
  .idx-card { padding: 14px 16px; }
  .idx-card svg { width: 110px; height: 40px; }
  .idx-chart-card, .idx-block, .idx-pos { padding: 16px; border-radius: 20px; }
  .pf-total { padding: 18px; }
  .pf-total b { font-size: 28px; }
}
/* на очень узких экранах прячем цену в шапке и уменьшаем кнопку кошелька сильнее */
@media (max-width: 360px) { #ton-connect { transform: scale(.8); } .brand { font-size: 17px; } }

/* плавающие монетки: независимая траектория у каждой, глубина через размытие */
.floaters img { filter: blur(var(--blur, 6px)) saturate(1.05); opacity: .6; animation-name: floatFree; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.floaters img:nth-child(3n), .floaters img:nth-child(4n) { filter: blur(var(--blur, 6px)); opacity: .6; }
@keyframes floatFree { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

/* карточка обмена: почти чёрная с мелкой точечной текстурой */
.swap {
  background-color: #141414;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 6px 6px;
  border-color: rgba(255,255,255,.07);
}
.swap .field { background: rgba(8,8,8,.75); }

/* Indexes — полностью чёрный фон */
/* Indexes: обычный фон, в размытии — подарки Telegram и анонимные номера */
.floaters-idx { display: none; }
body[data-view="indexes"] .floaters-idx { display: block; }
.floaters-idx img.sq { border-radius: 22%; }

/* Portfolio — палитра Tonviewer */
body[data-view="portfolio"] { background: #10161f; }
body[data-view="portfolio"] .bg, body[data-view="portfolio"] .floaters { display: none; }
body[data-view="portfolio"] .pf-total, body[data-view="portfolio"] .table-card, body[data-view="portfolio"] .pf-tabs,
body[data-view="portfolio"] .nft, body[data-view="portfolio"] .act-list, body[data-view="portfolio"] .pf-none { background: #1b2430; border-color: rgba(255,255,255,.06); }
body[data-view="portfolio"] .pf-tabs button.on { background: #45aef5; color: #fff; }
body[data-view="portfolio"] .pf-more { color: #45aef5; }
body[data-view="portfolio"] .row-btn { background: #222d3b; }
body[data-view="portfolio"] .row-btn:hover { background: #45aef5; color: #fff; }
body[data-view="portfolio"] .table tbody tr:hover, body[data-view="portfolio"] .act:hover { background: #222d3b; }

/* монетки видны только на экране обмена (слой лежит в body) */
body:not([data-view="swap"]) .floaters { display: none; }

/* карточка обмена — ровный тёмно-серый, без текстуры */
.swap { background: #1c1c1c; background-image: none; border-color: rgba(255,255,255,.06); }
.swap .field { background: #141414; }

/* размытые непроверенные NFT */
.nft-grid.spam { margin-top: 12px; }
.nft-grid.spam img { filter: blur(14px) saturate(.6); }
.nft-grid.spam .nft { opacity: .7; }
.nft-grid.spam em { color: var(--warn); }

body[data-view="indexes"] .floaters.floaters-idx { display: block; }
body[data-view="swap"] .floaters.floaters-idx { display: none; }
/* значки направления в активности: ровные svg, обводка в цвет карточки */
.act-ico i { right: -4px; bottom: -4px; width: 20px; height: 20px; color: #fff; border: 2.5px solid #1b2430; line-height: 0; }
.act-ico i svg { width: 11px; height: 11px; display: block; }
.act-ico:not(:has(img)) { background: #2a3442; }
/* Indexes: карточки серые, как окно свапа (#1c1c1c), поля внутри темнее */
.idx-card, .idx-chart-card, .idx-block, .idx-trade, .idx-pos, .idx-stats > div { background: #1c1c1c; border-color: rgba(255,255,255,.06); }
.idx-trade .field { background: #141414; }
.idx-trade .details { background: #141414; border-color: rgba(255,255,255,.05); }
.idx-chart-card .idx-chart { background: none; }

/* ===== серый фон как у CUBEX Market — во всех разделах ===== */
:root { --bg: #131316; }
body, body[data-view="portfolio"] { background: #131316; }
.blob { filter: blur(90px); }
.b1 { background: #aaacb6; opacity: .14; }
.b2 { background: #787a86; opacity: .16; }
.b3 { background: #dcdee6; opacity: .06; }
body[data-view="portfolio"] .bg { display: block; }
/* портфолио: карточки серые, как окно свапа */
body[data-view="portfolio"] .pf-total, body[data-view="portfolio"] .table-card, body[data-view="portfolio"] .pf-tabs,
body[data-view="portfolio"] .nft, body[data-view="portfolio"] .act-list, body[data-view="portfolio"] .pf-none { background: #1c1c1c; }
body[data-view="portfolio"] .row-btn { background: #2a2a30; }
body[data-view="portfolio"] .table tbody tr:hover, body[data-view="portfolio"] .act:hover { background: #242428; }
.act-ico i { border-color: #1c1c1c; }

/* ===== серые баннер и плашки, без цветного свечения ===== */
.nft-strip { background: #1c1c1c !important; border-color: rgba(255,255,255,.06) !important; }
.nft-strip::before, .nft-strip::after { display: none !important; }
.idx-card.on { box-shadow: none; border-color: rgba(255,255,255,.45); }
.stats-row > *, .table-card { background: #1c1c1c; border-color: rgba(255,255,255,.06); }
.page-search { background: #1c1c1c; }

/* ===== Explore: изменение за 24ч и избранное ===== */
.chg { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg.up { color: var(--ok); } .chg.down { color: var(--bad); }
.rank { display: inline-flex; align-items: center; gap: 8px; }
.fav { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #5d606b; cursor: pointer; transition: color .15s, transform .2s, background .15s; }
.fav:hover { color: #c9cbd3; background: rgba(255,255,255,.06); }
.fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fav.on { color: #fbbf24; } .fav.on svg { fill: currentColor; }
.fav:active { transform: scale(.85); }
.page-tools { display: flex; gap: 10px; align-items: center; }
.fav-toggle { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: #1c1c1c; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; transition: color .15s, border-color .15s; }
.fav-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fav-toggle:hover { color: #fff; }
.fav-toggle.on { color: #fbbf24; border-color: rgba(251,191,36,.4); } .fav-toggle.on svg { fill: currentColor; }
@media (max-width: 600px) {
  .page-tools { width: 100%; } .page-tools .page-search { flex: 1; min-width: 0; }
  #tokensTable tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "fav tok price" "fav tok chg"; }
  #tokensTable td:nth-child(1) { display: flex !important; grid-area: fav; padding-right: 0; align-items: center; }
  #tokensTable td:nth-child(1) .rank { font-size: 0; gap: 0; }
  #tokensTable td:nth-child(2) { grid-area: tok; }
  #tokensTable td:nth-child(3) { grid-area: price; font-weight: 700; }
  #tokensTable td:nth-child(4) { grid-area: chg; display: block; font-size: 12px; color: inherit; }
  #tokensTable td:nth-child(4)::before { content: none; }
  #tokensTable td:nth-child(5), #tokensTable td:nth-child(6), #tokensTable td:nth-child(7) { display: none !important; }
}

/* ===== мобильная панель: liquid glass, ровные иконки ===== */
@media (max-width: 860px) {
  .tabbar {
    height: 66px; border-radius: 26px; padding: 0 4px; grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)), rgba(24,24,28,.38);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), 0 18px 40px -16px rgba(0,0,0,.85);
  }
  .tabbar a { gap: 4px; font-size: 10.5px; color: rgba(255,255,255,.45); -webkit-tap-highlight-color: transparent; transition: color .25s, transform .3s cubic-bezier(.22,1,.36,1); }
  .tabbar a svg { width: 25px; height: 25px; }
  .tabbar a:active { transform: scale(.88); }
  .tabbar a.on { color: #fff; }
}
/* фон под страницей тоже серый — при оттягивании не видно чёрного; без «резинового» ухода в пустоту */
html { background: #131316; }

@media (max-width: 860px) {
  body { min-height: 0; }
  .view-trade { min-height: 0; }
}
/* Telegram во весь экран: шапка ниже системных кнопок Telegram */
.tg-app .top { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 12px); }

/* серые пятна фона — мягкие градиенты вместо blur-фильтра: iOS обрезал размытие по краю элемента (резкая линия) */
.blob { filter: none !important; }
.b1 { background: radial-gradient(closest-side, rgba(170,172,182,.55), rgba(170,172,182,0)); opacity: .5; }
.b2 { background: radial-gradient(closest-side, rgba(120,122,134,.6), rgba(120,122,134,0)); opacity: .5; }
.b3 { background: radial-gradient(closest-side, rgba(220,222,230,.3), rgba(220,222,230,0)); opacity: .4; }
/* отступ под кнопки Telegram во весь экран — без метки: вне Telegram переменные пустые и отступ обычный */
.top { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 18px); }
@media (max-width: 860px) { .top { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 10px); } }