:root{ --ground:#FBFAF8; --panel:#FFFFFF; --ink:#171A1F; --ink-soft:#5A626E; --line:#E3E1DC; --accent:#A16207; --accent-soft:#FDF6E7; --arrow:#B9B4AA; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; --sans:system-ui,-apple-system,"Segoe UI",sans-serif; --serif:Georgia,"Iowan Old Style",Cambria,serif; } @media (prefers-color-scheme:dark){:root{ --ground:#14161A; --panel:#1B1E24; --ink:#E8E6E1; --ink-soft:#9AA1AC; --line:#2A2E36; --accent:#D9A441; --accent-soft:#221C10; --arrow:#4A505A; }} *{box-sizing:border-box} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} .wrap{max-width:1180px;margin:0 auto;padding:40px 24px 72px; display:flex;flex-direction:column;gap:22px} /* Ширша сітка потрібна транзакціям через одинадцять колонок (просять ~1460px, у 1180 не влазять). Гаманці її взяли теж — не заради таблиці, а заради РАМКИ: плитки, фільтри, період і повзунок мусять стояти однаково на обох сторінках, інакше при перемиканні вкладок сторінка помітно «стрибає», і вужча здається старішою. На вужчому екрані таблиця, як і раніше, прокручується всередині .scroll — від одинадцяти колонок на ноутбуці нікуди не подітися. */ .wrap.wide{max-width:1600px} /* Одинадцять колонок не влазять навіть у 1600: таблиці мінімально треба ~1460px, а на екрані 1440 доступно 1375. Тому на цій сторінці комірки щільніші — 8px замість 12 дають 88px на одинадцяти колонках, тобто рівно те, чого бракувало. Сторінки гаманців це не чіпає: там сім колонок і місця вдосталь. */ .wide th, .wide td{padding-left:5px;padding-right:5px} /* 5px, а не типові 12: одинадцять колонок зі значками просять ~1340px, і кожен піксель відступу коштує одинадцять. Заміряно, що найдовший можливий маршрут (Avalanche → Algorand) уже в даних, тобто ця колонка не зросте; а от суми зростуть, тож запас лишаємо саме під них. */ h1{font-family:var(--serif);font-size:clamp(26px,4vw,38px);font-weight:400; margin:0;letter-spacing:-.01em} .sub{color:var(--ink-soft);font-size:14px;max-width:64ch} .tabs{display:flex;gap:4px;margin:-6px 0 4px} .tab{font-size:14px;padding:6px 14px;border-radius:999px;text-decoration:none; color:var(--ink-soft);border:1px solid transparent} .tab[aria-current="page"]{background:var(--accent-soft);color:var(--accent); border-color:var(--accent)} .tab:hover:not([aria-current]){border-color:var(--line)} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden} .kpi{background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:3px} .kpi .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)} .kpi .val{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums} .kpi .val.accent{color:var(--accent)} .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .grp-lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-soft);margin-right:2px} .grp{display:flex;flex-wrap:wrap;gap:7px;align-items:center} /* Дві смуги фільтрів — один стос, тому проміжок між ними менший за проміжок між блоками сторінки: це одна річ, а не дві сусідні. */ .filters{display:flex;flex-direction:column;gap:10px} /* Смуга мереж не переносить свій підпис під кнопки: nowrap тримає «Куди забирали» ліворуч, а переносяться самі кнопки — усередині .grp. */ .nets-bar{flex-wrap:nowrap;align-items:flex-start} .nets-bar .grp-lbl{padding-top:7px;white-space:nowrap} .nets-bar .grp{flex-wrap:wrap;flex:1;min-width:0} /* Стан вибору — біля підпису, бо без нього «нічого не золоте» читається двозначно: чи то фільтра нема, чи то він усе відсік. min-width — під найдовше можливе «13 із 17», і це не педантизм: підпис стоїть ЗЛІВА від кнопок у смузі з flex-wrap:nowrap, тож кожен його зайвий символ забирає ширину в самих кнопок. Заміряно: «усі» → «1 із 17» звужувало смугу на 27px, і остання кнопка стрибала в панель «ще N» рівно від кліку по сусідній. Зарезервоване місце коштує ~30px порожнечі, поки вибору нема, — дешевше, ніж смуга, що перебудовується під рукою. */ #net-state{font-family:var(--mono);letter-spacing:0;text-transform:none;opacity:.75; display:inline-block;min-width:8ch} #net-state.on{color:var(--accent);opacity:1} button.n,button.f{font:inherit;font-size:13px;padding:5px 11px;border:1px solid var(--line); background:var(--panel);color:var(--ink-soft);border-radius:999px;cursor:pointer; display:inline-flex;align-items:center;gap:6px} /* Назва мережі — ОСНОВНИМ чорнилом, лічильник — приглушеним. Доти обоє були приглушені, і то успадковано з часів, коли КОЖНА кнопка світилась золотом і читалася по фону: щойно порожній вибір став означати «усі» і фон зробився нейтральним, назви попливли. .f (єдина — «Очистити» в панелі періоду) лишається приглушеною: вона не назва, а дія. */ button.n{color:var(--ink)} button.n b{font-family:var(--mono);font-size:11px;font-weight:500;opacity:.55} button.n:hover{border-color:var(--accent);color:var(--accent)} /* Не вміщені в два рядки кнопки лишаються в DOM: замір (fitNets) ховає їх саме класом, щоб не перебудовувати смугу з нуля на кожному кроці циклу. */ button.n.hid{display:none} /* Лише .n: єдина кнопка з класом .f у проєкті — «Очистити» в панелі періоду, і aria-pressed їй ніхто не ставить (перевірено grep'ом по web/). Тобто ,button.f[aria-pressed="true"] у цьому селекторі не міг збігтися НІКОЛИ — лишався б обіцянкою стану, якого нема. */ button.n[aria-pressed="true"]{background:var(--accent); border-color:var(--accent);color:var(--ground)} /* Обрана мережа під мишею не «гасне»: фон уже акцентний, і акцентний текст на ньому зник би зовсім. Селектор специфічніший за button.n:hover навмисно — інакше правильний колір тримався б лише на порядку правил у файлі. */ button.n[aria-pressed="true"]:hover{color:var(--ground)} /* Мережа без жодного рядка в поточному зрізі — глухий кут: натиснеш і отримаєш порожню таблицю. Лишаємо видимою і натисною (нуль — теж відповідь), але тьмяною, і тримаємо в панелі, а не в головній смузі, де вона займала б цілий рядок задарма. */ button.n.zero{opacity:.4} /* «ще N» — вхід у панель із рештою мереж. Пунктир, бо це не фільтр, а двері: суцільна рамка ставила б її в один ряд із кнопками мереж. */ button.more{font:inherit;font-size:13px;padding:5px 11px;border:1px dashed var(--line); background:transparent;color:var(--ink-soft);border-radius:999px;cursor:pointer;flex:none} button.more:hover{border-color:var(--accent);color:var(--accent)} button.more[aria-expanded="true"]{border-style:solid;border-color:var(--accent); color:var(--accent)} button.more[hidden]{display:none} /* «скинути» — скидання, а не ще одна мережа, тож і виглядає не пігулкою: підкреслений текст без рамки. Стоїть усередині #nets, за останньою кнопкою. align-self:stretch — НЕ косметика, а умова, на якій тримається замір смуги. .grp вирівнює по центру (align-items:center), і ця кнопка на 6px нижча за пігулки, тож у ТОМУ Ж рядку її offsetTop відрізнявся на 3px. рядків() рахує різні offsetTop — і бачила три рядки там, де око бачило два, після чого fitNets() зрізáв зайвий десяток кнопок «щоб влізло». Заміряно: смуга згорталась у ОДИН рядок і рапортувала про два. Розтягнута кнопка починається з верху свого рядка, як і решта; текст усередині