/* Палітра знята з макета Figma «Crypto Wallet (Community)» (ключ
   d2c8xI5loyKtib4Y2wNdPy) через REST API, а не піпеткою зі знімка:
   значення нижче — рівно ті, що найчастіші у файлі (див.
   design/figma/<key>/summary.json), із кількістю вживань у коментарях.
   Тому це перенесення, а не «схоже на».

   Макет темний, тож темна тема стала основною, а світла лишилась як
   вибір — гаманцем користуються і вдень, і в метро. */
/* Шрифти лежать У НАС, а не в Google, і це не про швидкість.

   Досі тут стояв `@import` із fonts.googleapis.com, і сторінка на кожному
   відкритті робила чотири запити на чужі хости. Два наслідки, і другий
   важить більше за перший.

   Приватність: кожен, хто відкриває гаманець, повідомляв про це третій
   стороні — IP, час, User-Agent. Проєкт виміряв (c17), що баланс і історія
   на Canton і так публічні; а от ХТО І КОЛИ відкриває гаманець — ні.

   Цілісність показу: d36 доводить, що віддані файли — рівно ті, які ми
   підписали. Але CSS приходив ззовні й у підписаний перелік не входив, тобто
   в гарантії була діра розміром рівно з оформлення. А оформлення вирішує, ЩО
   ЛЮДИНА БАЧИТЬ, — і на цьому тримається вся безпека гаманця: сторінка
   підписує рівно те, що показала. Той, хто керує цим CSS, може сховати
   адресу отримувача або зробити кнопку «Відхилити» невидимою, і перерахунок
   хешу з перевіркою наміру пройдуть обидва.

   Тепер шрифти — звичайні файли вітрини: входять у манiфест, підписані,
   і d82 стежить, щоб сторінка не ходила на чужі хости взагалі.

   Деванагарі не взято навмисно: серед десяти мов її немає, а CJK Poppins не
   покриває — там працює системний стек нижче. */
/* ШРИФТІВ У КОМПЛЕКТІ БІЛЬШЕ НЕМАЄ.
   Тут стояли двадцять файлів Poppins та IBM Plex Mono. Хендофф вимагає
   зворотного й називає причину коротко: «системний шрифт». Це не економія
   ваги (хоч і вона): системний шрифт уже намальований для цього екрана й
   цієї мови, а завантажений — ні. На вʼєтнамській і корейській Poppins не
   має половини знаків, і браузер однаково підставляв системний, лише після
   зайвого очікування.
   Моноширинний — теж системний: `ui-monospace` віддає SF Mono на Apple,
   Consolas на Windows, а на решті чесно падає в те, що є. */

:root {
  /* Палітра з хендоффу «Custis crypto wallet UI». Один акцент, пласкі
     поверхні, тонкі лінії замість карток у картках. */
  --bg: #12141F;          /* земля екрана */
  --surface: #12141F;     /* карток більше немає — поверхня та сама */
  --surface-2: rgba(237, 239, 245, .06);   /* тихі плитки, кружечки історії */
  --ink: #EDEFF5;
  --ink-2: #8A8FA3;
  --muted: #8A8FA3;
  /* Третій рівень тексту. У хендоффі #6f7488 — виміряно 3.95 на цьому тлі
     при потрібних 4.5 для 12px. Піднято рівно до порога, відтінок той самий:
     це той самий колір, лише читабельний. Так само вчинили з палітрою Figma
     торік — і теж на виміряну величину, а не «трохи світліше». */
  --ink-3: #797D91;
  /* Підвал. У хендоффі #565b6d дає 2.72 — це не «тихо», це не видно. */
  --ink-4: #777E94;
  --line: rgba(237, 239, 245, .08);
  --line-2: rgba(237, 239, 245, .14);
  --accent: #E8B54A;
  --accent-hover: #F3C86A;
  --accent-tint: rgba(232, 181, 74, .13);
  --accent-line: rgba(232, 181, 74, .5);
  --on-accent: #12141F;
  --green: #5FAE7E;
  --green-bg: rgba(95, 174, 126, .14);
  --in: #7FB88F;          /* сума, що прийшла */
  --amber: #E8B54A;
  --amber-bg: rgba(232, 181, 74, .13);
  --danger: #D98A72;
  --danger-ink: #D98A72;
  --nav: #8A8FA3;
  --link: #E8B54A;
  /* Рамка акцентом — 40% від нього. Окремою змінною, бо в світлій темі
     сам акцент інший, і рахувати прозорість від літерального кольору
     означало б розійтися з ним при першій же зміні палітри. */
  --accent-40: rgba(232, 181, 74, .5);
  --accent-28: rgba(232, 181, 74, .32);
  --hover: rgba(237, 239, 245, .06);
  --radius: 14px;
  --radius-sm: 12px;
  --radius-pill: 8px;
  --pad: 22px;            /* поле екрана з хендоффу */
  /* Стек із хендоффу плюс запасні для CJK. Їх там немає, і це не недогляд
     автора — він малював українською. У нас десять мов, і без цього хвоста
     китайський або корейський рядок дістається тому, що трапиться першим. */
  --sans: -apple-system, 'SF Pro Text', Inter, system-ui,
          'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR',
          'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo',
          'Microsoft YaHei', 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

/* Світла тема. У хендоффі її НЕМАЄ — там лише темна, — але перемикач
   «Темна / Світла» він же й малює в налаштуваннях. Тож вона виведена з тієї
   самої пари «графіт + золото», а кожен колір узятий не на око: усі перевірені
   на порозі 4.5 проти світлого тла (`d46` міряє обидві теми).

   Акцент лишається ТОЙ САМИЙ — #E8B54A. Він працює як заливка кнопки, де
   текст темний (9.72), і як пігулка. А от золото ТЕКСТОМ на білому дає 1.54,
   тобто не читається взагалі — для нього окремий темніший бурштин. */
[data-theme="light"] {
  --bg: #F7F7FA;
  --surface: #FFFFFF;
  --surface-2: rgba(23, 26, 36, .05);
  --ink: #171A24;
  --ink-2: #5B6070;
  --muted: #5B6070;
  --ink-3: #6A6F80;
  --ink-4: #6A6F80;
  --line: rgba(23, 26, 36, .10);
  --line-2: rgba(23, 26, 36, .16);
  --accent: #E8B54A;
  --accent-hover: #D9A431;
  --accent-tint: rgba(232, 181, 74, .20);
  --accent-line: rgba(160, 116, 20, .55);
  --on-accent: #12141F;
  --green: #2E7D51;
  --green-bg: rgba(46, 125, 81, .13);
  --in: #2E7D51;
  /* На пігулці `--amber-bg` (виходить #F4E8D3) колір #8A6410 дає 4.43 — на
     сім сотих нижче порога. Це саме той рід похибки, який не побачиш оком,
     а `d46` бачить. */
  --amber: #7A5809;
  --amber-bg: rgba(232, 181, 74, .22);
  --danger: #A8492B;
  --danger-ink: #A8492B;
  --nav: #5B6070;
  --link: #8A6410;
  --accent-40: rgba(138, 100, 16, .45);
  --accent-28: rgba(138, 100, 16, .3);
  --hover: rgba(23, 26, 36, .05);
}

* { box-sizing: border-box; }

/* Захист від обрізання по горизонталі. Виміряно, що жоден елемент за межу не
   виходить (d45_mobile_layout: 10 мов × 4 ширини), але одного вимірювання
   мало: рядок, якого ще немає в перекладі, або майбутній довгий ідентифікатор
   можуть розсунути потік — і людина побачить обрубок замість гаманця.
   Тут ціна помилки несиметрична, тому стоїть глухий запобіжник. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); }
.hidden { display: none !important; }
.center { text-align: center; }

.phone {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 16px env(safe-area-inset-bottom);
}

/* На сенсорному пристрої рамку не звужуємо. Причина не косметична, і знайшлась
   вимірюванням на живому телефоні: Chrome віддав `layout 737` при `screen 384`,
   тобто малював сторінку з масштабом близько 52%. Це його налаштування, не наше,
   але наслідок подвоювався нами: браузер зменшив удвічі, а `max-width: 430px`
   лишив картку ще й посередині порожнечі — на екрані 384 px вона займала
   заледве половину. Тепер у такому разі рамка бере всю ширину, і сторінка
   лишається читаною навіть при чужому масштабі.

   `pointer: coarse` — саме той признак, який тут потрібен: на комп'ютері
   вузька колонка задумана й виглядає добре (це підтверджено), а на пальці
   широке вікно означає рівно одне — зменшений масштаб. */
@media (pointer: coarse) {
  .phone { max-width: 100%; }
  /* Панель повторює рамку: інакше на телефоні вона лишалась би 430px
     посередині, тоді як гаманець уже на всю ширину. */
  .tabs { max-width: 100%; }
}

/* ---------- шапка ---------- */
/* `flex-wrap` тут не косметика. Android множить розміри шрифтів своїм
   масштабом тексту, а ширини в цьому CSS у пікселях і не ростуть: при 150%
   шапка займала 397 px на екрані 360, і кнопка теми йшла за край — на
   комп'ютері цього не видно ніколи. Тепер дії просто переходять на другий
   рядок. `min-width: 0` обов'язковий: без нього flex-елемент не стискається
   менше за свій вміст, а вміст селекта задає найдовша назва мови. */
.top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 18px 0 8px;
}
.top > * { min-width: 0; }
.brand { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }

button { font: inherit; cursor: pointer; }

.ghost {
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: var(--radius-sm);
  padding: 8px 12px; transition: border-color .15s, color .15s;
}
.ghost:hover { border-color: var(--line-2); color: var(--ink); }
.ghost.wide { width: 100%; margin-top: 10px; }

/* ---------- баланс ---------- */
/* Баланс без картки. Хендофф прибирає плитку зовсім: число саме по собі
   достатньо велике, щоб бути головним, а рамка навколо нього лише кричала
   «тут щось важливе» замість того, щоб цим бути. */
.balance {
  background: none; border: 0; border-radius: 0;
  padding: 0 0 28px; margin-top: 0;
}
.label { color: var(--muted); font-size: 12px; line-height: 1; }
.amount {
  /* 46px тонким накресленням, як у хендоффі. Товщина тут працює навпаки:
     велике число легким шрифтом читається спокійно, жирним — тривожно. */
  font-size: 46px; font-weight: 300; letter-spacing: -0.02em;
  line-height: 1; margin-top: 12px; word-break: break-all;
}
.amount .unit { font-size: 17px; font-weight: 400; color: var(--muted); }
/* Долари навмисно приглушені й дрібні: підписують і звіряють CC, а це лише
   орієнтир. Однаковий кегль читався б як друга офіційна сума. */
.fiat { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* Приріст за добу. Три предмети в один рядок: скільки, на скільки відсотків,
   за який час. Колір несе знак, тож окремих слів «зросло/впало» не треба. */
.growth {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; color: var(--green);
}
.growth.down { color: var(--danger); }
.growth-cc { font-size: 14px; font-weight: 500; line-height: 1; }
.growth-pct {
  padding: 4px 8px; border-radius: var(--radius-pill);
  background: var(--green-bg); font-size: 12px; font-weight: 600; line-height: 1;
}
.growth.down .growth-pct { background: rgba(217, 138, 114, .14); }
.growth-per { font-size: 12px; color: var(--ink-3); line-height: 1; }

/* Адресна книга. Фішки переносяться, а не тиснуться в один рядок: імена
   вибирає людина, і обрізане ім'я — це те саме, що не показане. */
.book { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.book:empty { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
}
.chip-name, .chip-x {
  font: inherit; background: none; border: 0; color: var(--ink);
  cursor: pointer; padding: 6px 4px 6px 12px; border-radius: 999px;
}
.chip-x { padding: 6px 11px 6px 4px; color: var(--muted); font-size: 15px; }
.chip-name:hover, .chip-x:hover { color: var(--accent); }
.booksave { display: flex; gap: 8px; margin-top: 10px; }
.booksave input {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  /* Ті самі 16px, що й у `.field input`, і з тієї ж причини: нижче цієї межі
     мобільний браузер наближає сторінку на кожен дотик до поля, а масштаб
     лишається після виходу. Тут спершу стояв типовий шрифт браузера — і
     `d45` це впіймав одразу. */
  padding: 12px 14px; font: 400 16px/1.4 var(--mono);
}
.booksave input:focus { outline: none; border-color: var(--accent); }
.booksave button { flex: 0 0 auto; width: auto; padding: 10px 16px; }
.hold {
  margin-top: 14px; padding: 8px 12px; border-radius: 999px;
  background: var(--amber-bg); color: var(--amber); font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.hold .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); flex: none;
}

/* ---------- вкладки ---------- */
.tabs { display: flex; gap: 4px; margin: 20px 0 4px; }
.tab {
  flex: 1; background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted); padding: 10px 4px; font-size: 15px;
  transition: color .15s, border-color .15s;
}
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

main { flex: 1; padding: 12px 0 24px; }

/* Онбординг — єдиний екран, який КОРОТШИЙ за телефон, тож він єдиний, де
   лишалась порожнеча на пів екрана: картка тулилась угору, а нижче нічого.
   Гаманець, історія й безпека довші за екран і прокручуються, їм центрувати
   нічого. `justify-content: center` спрацьовує лише коли місце є; коли
   картка виросла (довга мова, збільшений текст), вона просто починається
   згори, як і раніше. */
#onboard, #invite {
  display: flex; flex-direction: column; justify-content: center;
}
#onboard[hidden], #invite[hidden] { display: none !important; }
.view { display: none; }
.view.active { display: block; }

h2 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 18px 0 10px; }

/* ---------- історія ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
/* Рядок історії без картки: тонка лінія знизу, і все. Картки в картках були
   найгучнішою прикметою старого вигляду — на екрані з десятьма переказами
   виходило десять рамок, кожна з яких казала «поглянь на мене». */
.item {
  background: none; border: 0; border-radius: 0;
  padding: 15px 0; border-bottom: 1px solid rgba(237, 239, 245, .06);
  display: flex; align-items: center; gap: 13px;
}
[data-theme="light"] .item { border-bottom-color: rgba(23, 26, 36, .08); }
.list > .item:last-child { border-bottom: 0; }
.item .who { flex: 1; min-width: 0; }
.item .kind { font-size: 14px; font-weight: 500; line-height: 1.3; }
.item .cp {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4;
}
.item .val {
  font-size: 14px; font-weight: 500; white-space: nowrap; line-height: 1.3;
}
.val.in { color: var(--in); }
.val.hold { color: var(--amber); }
/* Повернений переказ — не втрата. Мінус тут збрехав би. */
.val.muted { color: var(--muted); }

.tag {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.wait { background: var(--amber-bg); color: var(--amber); }

/* Порожній стан — картка, а не пропуск у списку. Сірий рядок під заголовком
   читався як «щось не догрузилось», тобто рівно як збій, від якого його й
   треба відрізнити. */
.empty {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 16px; color: var(--muted); font-size: 14px;
}
.empty-i {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; font-size: 18px; font-weight: 600;
}
/* Збій не має виглядати як спокій: «не зчитали» жовтим, «нічого немає» сірим. */
.empty.bad { color: var(--amber); }
.empty.bad .empty-i { background: var(--amber-bg); color: var(--amber); }
.skeleton {
  height: 58px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2));
  background-size: 200% 100%; animation: sh 1.2s infinite;
}
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- очікують ---------- */
.pending {
  background: var(--amber-bg); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px;
  color: var(--amber);
}
.pending b { font-family: var(--mono); font-weight: 500; }

/* ---------- форма ---------- */
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  /* РІВНО 16px, і це не смак. Мобільний Chrome і Safari самі наближають
     сторінку, коли фокус потрапляє в поле з шрифтом МЕНШИМ за 16px — щоб
     людина бачила, що набирає. Тут стояло 15px, тобто на один піксель нижче
     межі: кожен дотик до поля наближав сторінку, масштаб лишався після
     виходу з поля, і далі все виглядало обрізаним і дрібним. Саме звідси
     взявся `layout 737` при екрані 384 у діагностиці з живого телефона.
     Міняти це можна лише вгору. */
  padding: 12px 14px; font: 400 16px/1.4 var(--mono);
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
/* Кільце фокуса для тих, хто ходить клавіатурою.
   `outline: none` вище прибирало його й лишало саму зміну кольору рамки —
   а рамка й так кольорова, тож на екрані фокус ставав майже невидимим.
   `:focus-visible` не чіпає мишу: кільце бачить лише клавіатура. Розмір і
   зсув однакові з рядком активу (.item.asset), щоб мова була одна. */
.field input:focus-visible, .field textarea:focus-visible,
button:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Картка підпису дістає фокус програмно (focusScreen), і обводити її не
   треба: вона й так єдине, що на екрані. Кільце тут лише плутало б. */
#card:focus, #card:focus-visible { outline: none; }

.primary {
  width: 100%; background: var(--accent); color: var(--on-accent); border: 0;
  border-radius: var(--radius-sm); padding: 15px; font-weight: 600;
  font-size: 16px; transition: opacity .15s;
}
.primary:hover { opacity: .92; }
.primary:disabled { opacity: .45; cursor: default; }

.hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 12px 2px 0; }

/* ---------- QR ---------- */
.qrbox {
  margin-top: 18px; background: var(--surface); border: 0;
  border-radius: var(--radius); padding: 18px;
}
.qr { display: block; text-align: center; line-height: 0; }
/* segno віддає svg без viewBox, тож масштабуємо явними розмірами, а не 100% */
.qr svg { width: min(100%, 260px); height: auto; }
[data-theme="dark"] .qr { background: #FAF8F4; border-radius: 10px; padding: 10px; }
/* Доки коду немає, світлої підкладки бути не повинно: порожній блок малювався
   білою смугою й читався як зламана картинка. Підкладка потрібна самому QR —
   темний код на темному тлі не сканується, — а не місцю під нього. */
.qr:empty { background: none !important; padding: 0 !important; }

.summary { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.summary .row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 5px 0; font-size: 14px;
}
.summary .row span { color: var(--muted); flex: none; }
.summary .row b {
  font-weight: 500; text-align: right; word-break: break-all; min-width: 0;
}

.addr {
  font-size: 12px; word-break: break-all; text-align: center;
  color: var(--ink-2); margin-top: 6px;
}
/* Довге посилання одним рядком. Воно потрібне, щоб його передати, а не щоб
   читати: base64 у чотири рядки — не інформація, а шум, який відсуває вниз
   усе справжнє. Повний текст лишається у вузлі, тож «виділити все» й
   перевірки беруть його цілим. */
.addr.one {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal; text-align: left;
}

/* Плашка «зараз просимо стільки-то»: у QR лежить уже не сама адреса, і про
   це має бути видно з екрана, а не з пам'яті. */
.badge {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  margin: 0 auto 12px; width: fit-content;
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 4px 4px 4px 14px; font-size: 13px; color: var(--ink);
}

.foot {
  padding: 14px 0 22px; color: var(--muted); font-size: 12px; text-align: center;
  border-top: 1px solid var(--line);
}

/* ---------- безпека ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 10px;
}
.card-t { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.srow:first-of-type { border-top: 0; }
.srow .mono { font-size: 12px; }
.srow b { font-weight: 500; }
.card .hint { margin-top: 10px; }

.inline { display: flex; gap: 10px; }
.field.small { flex: 1; margin-bottom: 10px; }
.field.small input { text-align: center; }
#recoverOut:not(:empty), #createOut:not(:empty) { margin-top: 12px; }

/* ---------- локалізація ---------- */
.top-actions { display: flex; gap: 6px; align-items: center; min-width: 0; }
.top-actions > * { min-width: 0; }
/* Ширину не фіксуємо ніде: турецький рядок довший за англійський у півтора
   раза, корейський коротший удвічі — вміст сам задає розмір. */
#lang {
  /* 16px з тієї ж причини, що й у полів: селект теж дає фокус, і Safari на
     ньому наближає так само. Ширину тримає max-width, не дрібний шрифт. */
  /* Ширина в ПІКСЕЛЯХ, і це не лінощі. Виміряно три варіанти:
     `max-width: 42vw` — шапка переносилась на другий рядок, бо внесок
     селекта у ширину батька Chromium рахує за max-content (найдовша назва
     мови, ~252 px), а не за намальованою шириною;
     `width: min(42vw, 100%)` — те саме, бо відсоток усередині ширини, яка
     сама ще обчислюється, при визначенні внутрішнього розміру ігнорується;
     `width: 150px` — внесок визначений, переносу немає на жодній ширині.
     Довгі назви мов селект обрізає сам, це його рідна поведінка. */
  width: 150px; max-width: 100%; padding: 8px 10px; font-size: 16px;
  text-overflow: ellipsis;
  background: transparent; color: var(--muted);
}
/* Не переносимо: «セキュリティ» розривалось усередині слова. Замість переносу —
   горизонтальна прокрутка, вона коректна в усіх десяти мовах. */
.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; white-space: nowrap; padding-inline: 12px; }
.hint.flush { margin-top: 0; margin-bottom: 14px; }

/* Атрибут hidden мусить перемагати будь-який display у правилах вище:
   інакше .card/.view з власним display лишаються видимими. */
[hidden] { display: none !important; }

/* Картка підпису поза .phone-потоком лишається в рамці телефона */
#card { margin: 0 16px 16px; }
#fields .row { display: flex; justify-content: space-between; gap: 12px;
               padding: 4px 0; font-size: 13px; }
#fields .row b { font-weight: 500; word-break: break-all; text-align: right; }
#card.bad { border-color: var(--bad, #c33); }
#card.bad .card-t { color: var(--bad, #c33); }


/* ============================================================
   Перенесення макета Figma «Crypto Wallet (Community)».
   Кольори вище зняті з файлу через API; нижче — розкладка,
   знята з кадрів home.png і wallet.png того ж файла.
   ============================================================ */

/* ---------- шапка: аватар + привітання (home.png) ---------- */
.who-me { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-weight: 600; font-size: 18px; text-transform: uppercase;
}
/* Знак замість заглушки-літери, доки рахунку немає. Тло — фірмове #0E0D0B,
   а не `--accent`: на жовтому accent золото знака дає 1.6 і зливається. */
.avatar.logo {
  background: #0E0D0B url("./brand/custis-192.png") center / 74% no-repeat;
  color: transparent;
}
.who-txt { min-width: 0; }
.who-txt .sub {
  color: var(--muted); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ghost.icon {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
}

/* ---------- чотири золоті дії (home.png) ---------- */
/* Одна головна дія, дві тихі — і в один рядок, а не сітка з чотирьох
   золотих квадратів. Коли акцентом світиться все, він не означає нічого. */
.actions { display: flex; gap: 8px; padding: 0 0 26px; }
.act-send, .act-recv {
  flex: 1; height: 44px; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1; padding: 0;
}
.act-send { font-weight: 600; }
.act-recv { font-weight: 500; }
.act-sec {
  width: 44px; height: 44px; flex: none; padding: 0;
  display: grid; place-items: center; border-radius: var(--radius-sm);
}
.act:hover .act-i { filter: brightness(1.06); }
.act:active .act-i { transform: scale(.96); }

/* ---------- нижня панель (home.png, wallet.png) ---------- */
/* Панель прибита до низу екрана, тому вміст мусить мати запас під нею —
   інакше останній рядок історії ховається під панеллю й людина думає, що
   список коротший, ніж є. */
/* FIXED, а не STICKY. Різниця не теоретична: `sticky` прилипає до низу
   СВОГО потоку, а не екрана, — тож варто було підвалу опинитись під панеллю,
   і вона починала їздити разом зі сторінкою. Саме це й побачив власник.

   Прибиваємо до вікна й повторюємо ширину рамки: без `max-width` панель
   розтяглася б через увесь монітор при гаманці 430px посередині. */
.tabs {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 40;
  display: flex; gap: 2px; margin: 0;
  padding: 10px 4px calc(30px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.tab {
  flex: 1; background: transparent; border: 0; border-bottom: 0;
  /* У макеті цей синій — #5A7E9A (×84), але на нашому тлі він дає 4.07 при
     потрібних 4.5 для 12px. Підняли до найближчого, який проходить: 5.94.
     Дизайн тут поступається читаності, і поступається на виміряну величину,
     а не «трохи світліше». */
  color: var(--nav);
  padding: 0; font-size: 10px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: color .15s;
  min-width: 0;
}
.tab span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.tab-i { display: grid; place-items: center; }
.tab-i svg { width: 20px; height: 20px; }
/* Обраний розділ позначено КОЛЬОРОМ, а не вагою. Вага його ще й розширювала:
   при 600 «Налаштування» переставали вміщатись рівно тоді, коли їх обирали, —
   тобто підпис обрізало саме в мить вибору. Виміряно на 360px: українською й
   португальською. Хендофф ваги для обраного й не просив: там 10px/500 і
   акцентний колір. */
.tab.active { color: var(--accent); }
.tab.active span:last-child { color: var(--ink); }
/* Запас під панеллю. Без нього останній рядок історії ховається під нею, і
   людина думає, що список коротший, ніж є. Число зібране з самої панелі:
   10 + 30 + іконка 20 + проміжок 6 + підпис 10 + поля кнопки 12. */
:root { --navh: calc(88px + env(safe-area-inset-bottom)); }
main { padding-bottom: 12px; }
/* Запас на САМОМУ гаманці, а не на рамці. Рамка спільна для всіх екранів,
   зокрема вітального й створення рахунку, а панелі там немає — і 88px
   порожнечі внизу зайве виштовхували перший екран у прокрутку на менших
   телефонах. Упіймав d45: вісім мов із десяти. */
#wallet { padding-bottom: var(--navh); }

/* ---------- рядки списку з плиткою (home.png) ---------- */
/* Плитку малюємо псевдоелементом, а не новим тегом: рядки будує app.js, і
   зайвий вузол довелось би вносити туди, де його перевіряють тести. */
/* Кружечок 28px замість плитки 44px: у хендоффі це тихий значок напрямку,
   а не другий за величиною предмет рядка. */
.item::before {
  content: '↕'; flex: none; width: 28px; height: 28px;
  border-radius: 14px; background: var(--surface-2);
  display: grid; place-items: center;
  font-size: 13px; line-height: 1; color: var(--muted);
}
/* У макеті в плитці логотип монети. Монета в нас одна, тож логотип нічого не
   розрізняв би — а от напрямок розрізняє, і саме його людина шукає очима.
   Беремо його з класу суми через `:has`, щоб не чіпати app.js: рядки будує
   він, і зайвий вузол довелось би вносити туди, де його перевіряють тести. */
.item:has(.val.in)::before { content: '↓'; color: var(--green); }
.item:has(.val.hold)::before { content: '⏳'; color: var(--amber); font-size: 16px; }
.item:has(.val.muted)::before { content: '↺'; }
.item:has(.val:not(.in):not(.muted):not(.hold))::before {
  content: '↑'; color: var(--ink-2);
}
/* Підключений сайт — не переказ: напрямку в дозволу немає. Замість стрілки
   перша літера хоста, тим самим розміром плитки, щоб список не розсипався. */
.item.site::before {
  content: attr(data-letter);
  font-size: 17px; font-weight: 600; color: var(--ink-2);
}

/* ---------- картки розділу «Безпека» (settings.png) ---------- */
.card { border: 0; }
.card-t { font-weight: 600; color: var(--ink); font-size: 15px; }


/* ---------- онбординг за кадром «Create account» ---------- */
/* У макеті це не форма в картці, а екран: ілюстрація, великий заголовок,
   золота дія, роздільник «or», друга дія тоном нижче. Порядок елементів у
   розмітці не змінювався — жоден id не переїхав, — змінилась подача. */
.card.ob { padding: 26px 20px 24px; }
/* Малюнки цих екранів зроблені під ТЕМНЕ тло: у них білі обриси й золоті
   крапки, вписані просто в розмітку. На світлій темі картка біла, і білий
   обрис на ній дає 1.00 — екран запрошення охоронця та екран створення
   рахунку показували порожнє місце. Плашка робить тло однаковим у будь-якій
   темі, і вона ж ріднить ці екрани з вітальним. */
.ob-art {
  display: grid; place-items: center; margin: 6px auto 22px;
  width: min(76%, 250px); padding: 14px 10px;
  /* Тло плашки — фірмове темно-синє, а не майже чорне. Причина плашки та сама
     (білий обрис на світлій темі давав 1.00), змінився лише її колір: чорний
     прямокутник посеред синьої картки читався як рамка недовантаженої
     картинки. Виміряно: білий обрис 17.51, золоті крапки 11.38 — обидва вище
     за 4.5 в будь-якій темі, бо колір плашки від теми не залежить. */
  background: #161730; border-radius: 18px;
}
.ob-art svg { width: min(92%, 230px); height: auto; }
.ob-title {
  font-size: 24px; font-weight: 600; text-align: center;
  margin: 0 0 22px; letter-spacing: -0.01em;
}
/* «or» з тонкими рисками обабіч — рівно як у кадрі */
.or {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--muted); font-size: 14px;
}
.or::before, .or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
/* Друга дія в макеті не порожня рамка, а плитка тоном нижче за тло картки. */
.card.ob .ghost.wide {
  background: var(--surface-2); border-color: transparent;
  color: var(--ink); padding: 15px; font-size: 16px; font-weight: 500;
}
.card.ob .ghost.wide:hover { border-color: var(--line-2); }
/* Приписка, за якою одразу кнопка, притискалась до неї впритул і читалась як
   її підпис. Пояснення й дія — різні речі, і між ними має бути повітря. */
.card.ob .hint + .primary, .card.ob .hint + .ghost { margin-top: 16px; }


/* ---------- сума великою цифрою (кадри trade, wallet) ---------- */
/* ---------- екран «Надіслати» (хендофф, 2b) ---------- */
/* Шапка екрана: назад — назва — порожнє місце такої ж ширини. Порожній
   елемент праворуч не декорація: без нього назва стає по центру ЗАЛИШКУ
   ширини, тобто трохи праворуч від справжнього центру, і це видно. */
.scrhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 18px;
}
.scrhead-t { font-size: 15px; font-weight: 500; }
.scrhead-s, .backb { width: 34px; flex: none; }
.backb {
  height: 34px; padding: 0; border-radius: 17px;
  border: 1px solid var(--line-2); background: none; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; min-height: 0;
}
.backb:hover { background: var(--hover); }
.backb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Отримувач одним рядком, коли адреса вже відома. */
.torow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 16px;
  border: 1px solid var(--line-2); border-radius: 12px;
}
.torow-l { font-size: 12px; color: var(--muted); flex: none; }
.torow-a {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.torow-e {
  flex: none; padding: 0; min-height: 0; width: auto;
  background: none; border: 0; color: var(--link);
  font-size: 12px; cursor: pointer;
}
.torow-e:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Цифрова клавіатура. Клавіші прозорі — сітка з дванадцяти залитих кнопок
   важить більше за суму, яку вона набирає. */
.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
}
.keypad button {
  height: 56px; min-height: 0; width: 100%; padding: 0;
  border: 0; background: none; color: var(--ink);
  font: 400 22px/1 var(--sans); border-radius: 12px; cursor: pointer;
}
.keypad button:hover { background: var(--hover); }
.keypad button:active { background: var(--surface-2); }
.keypad button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Клавіатура — для пальця. На комп'ютері цифри набирають з клавіатури, і
   дванадцять кнопок мишею там означали б лише зайву висоту. */
@media (pointer: fine) { .keypad { display: none; } }

/* Сума перевищує баланс — це попередження, а не заборона: остаточно
   відмовляє мережа, і вигадувати за неї відмову наперед ми не будемо.
   Тому колір теплий, а не червоний, і кнопка лишається живою. */
/* Той самий `#D98A72`, що й у хендоффі, — і це вже змінна `--danger-ink`, у
   якої для світлої теми виміряний d46 темніший відповідник. Заводити другу
   змінну того ж кольору означало б завести другу, яку ніхто не переміряє. */
#sendAvail.over { color: var(--danger-ink); }
/* Екран переказу щільніший за решту: під сумою має поміститись клавіатура,
   і кожні зайві 10px відсувають її під нижню панель. Тому відступи навколо
   суми тут свої, а не спільні з екраном «Отримати». */
#view-send .bigamt { margin: 4px 0 10px; }
.hint.small { font-size: 11px; line-height: 1.6; }

.bigamt { margin: 10px 0 18px; }
.bigamt .label { display: block; margin-bottom: 6px; }
.bigamt-row {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
/* Скидаємо вигляд поля: тут це не поле форми, а число на екрані. Рамка,
   заливка й вирівнювання по лівому краю зробили б із головного елемента
   рядовий рядок форми. */
.bigamt input {
  width: auto; max-width: 68vw; min-width: 2ch;
  field-sizing: content;            /* поле росте під цифри там, де вміє */
  background: transparent; border: 0; padding: 4px 0;
  color: var(--ink); text-align: center;
  /* 52px/300 з хендоффу: на екрані переказу головне число — скільки. */
  font: 300 52px/1 var(--sans);
  letter-spacing: -0.02em;
}
.bigamt input::placeholder { color: var(--line-2); }
.bigamt input:focus { outline: none; }
.bigamt-u { font-size: 18px; font-weight: 500; color: var(--muted); }


/* ---------- історія за днями (кадр notification.png) ---------- */
.daysep {
  color: var(--muted); font-size: 13px; font-weight: 500;
  margin: 16px 2px 4px;
}
.daysep:first-child { margin-top: 4px; }
.valwrap { text-align: right; min-width: 0; }
.valwrap .at { color: var(--muted); font-size: 11px; margin-top: 2px; }


/* ---------- «Безпека» списком (кадр settings.png) ---------- */
/* У макеті це рядки зі стрілкою праворуч, а вміст відкривається окремо.
   Робимо на `<details>`, а не на своєму перемикачі: рядок лишається
   доступним із клавіатури й читалкою без жодного рядка JS.

   Важливе обмеження, через яке тут не можна закривати ВСЕ: `d39` читає
   `innerText` розділу й шукає в ньому спадкоємця й строк. Тому підсумок
   (`#sec`) лишається завжди на видноті — згортаються лише ФОРМИ. */
.srowc { padding: 0; }
.srowc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
  /* 14px, а не 15: при 15 «Призначити спадкоємця» разом зі значенням «Не
     налаштовано» не вміщались, і обрізало обидва — і назву, і значення.
     Виміряно на 360 і 390px: п'ять мов із десяти й три з десяти відповідно.
     Хендофф для рядків так і пише: назва 14px/500. */
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.srowc > summary::-webkit-details-marker { display: none; }
/* Стрілка прибита до правого краю, а не стоїть у потоці. Через це назва й
   значення можуть ПЕРЕНЕСТИСЬ на другий рядок, коли разом не вміщаються, —
   і жодне з них не обрізається. Виміряно: при однорядковій розкладці
   «Призначити спадкоємця» разом із «Не налаштовано» різало обидва, і не в
   одній мові, а в п'ятьох із десяти на 360px. */
.srowc > summary { position: relative; padding-right: 38px; flex-wrap: wrap; }
.srowc > summary::after {
  content: ''; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.srowc[open] > summary::after { transform: rotate(45deg); }
/* Значення в рядку — праворуч, перед стрілкою: хендофф ставить поруч із
   назвою те, що людина шукала, відкриваючи цей рядок. «Підключені сайти»
   з числом 2 відповідають на питання, не розкриваючись. */
/* Значення не переносимо, а назву даємо стиснути: «Не налаштовано» в два
   рядки лізло під стрілку й обрізалось на півслові. */
.srowc > summary .setval {
  margin-left: auto; font-size: 13px; white-space: nowrap; flex: none;
}
/* Назва рядка має перевагу над значенням: назва каже, ЩО це, значення —
   подробиця. Перша редакція давала перевагу значенню, і «Призначити
   спадкоємця» обрізалось до «Призначити с…» заради «Не налаштовано». */
.srowc > summary > span:first-of-type {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srowc > summary .setval {
  margin-left: auto; max-width: 100%; text-align: right;
}
.srowc[open] > summary { border-bottom: 1px solid var(--line); }
/* Вміст рядка живе під заголовком і має власні поля — інакше він приліг би
   до країв картки, бо саму картку ми обнулили. */
.srowc > *:not(summary) { margin-left: 18px; margin-right: 18px; }
.srowc > *:not(summary):first-of-type { margin-top: 14px; }
.srowc > *:last-child { margin-bottom: 16px; }


/* ---------- «Налаштування» пласкими рядками (кадр settings.png) ---------- */
/* У макеті це не картки, а рядки на тлі екрана з тонкими роздільниками —
   тому фон тут прозорий, а не `--surface`. */
.setgroup { margin: 4px 0 6px; }
.setrow {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.setrow > span:first-child { flex: 1; min-width: 0; }
.setval { color: var(--muted); font-size: 14px; }
/* Гніздо, у яке переїжджає справжній перемикач із шапки. Порожнім воно не
   лишається ніколи: `placeControls` викликається на кожному показі екрана. */
.setslot { display: inline-flex; align-items: center; }
.setslot #lang { width: auto; max-width: 46vw; }
.setslot .ghost.icon { width: 38px; height: 38px; }


/* Баланс і золоті дії — належність ГОЛОВНОЇ, а не всіх розділів. Вони стоять
   над перемикачем екранів, тож без цього правила висіли б і над
   «Налаштуваннями», де питання не «скільки в мене», а «як це влаштовано».
   Ховаємо через CSS, а не `hidden`: елементи лишаються в DOM, і `#balance`
   читається перевірками так само, як читався. */
#wallet[data-view]:not([data-view="home"]) .balance,
#wallet[data-view]:not([data-view="home"]) .actions { display: none; }


/* ---------- нижня панель справді внизу ---------- */
/* Раніше панель просто йшла за вмістом: коли вмісту мало (а «Налаштування»
   короткі), вона зупинялась посеред екрана. `sticky` тут не рятує — він
   притискає лише доки контейнер видно.

   Тому гаманець розтягуємо на всю висоту й віддаємо надлишок вмісту:
   панель опиняється внизу сама, без `position: fixed`. Fixed тут узагалі
   не годиться — на `.phone` при чужому масштабі стоїть `zoom`, а всередині
   зумленого предка фіксовані координати масштабуються, і панель поїхала б
   саме на тому пристрої, заради якого зум і додавали. */
#wallet {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
#wallet[hidden] { display: none !important; }
#wallet > main { flex: 1; }


/* ---------- картка «Власник поки один» (хендофф, 2e) ---------- */
.infocard {
  border: 1px solid var(--accent-28); border-radius: var(--radius);
  padding: 14px 16px; margin-top: 16px;
}
.infocard-t {
  font-size: 13px; font-weight: 500; color: var(--link); margin-bottom: 4px;
}
.infocard .hint { font-size: 12px; margin-top: 0; }

/* ---------- мітка мережі в шапці ---------- */
/* Маленька, приглушена й завжди на видноті. Вона не має тягнути на себе
   увагу — вона має бути там, коли її шукають. */
/* Мітка з'являється разом із гаманцем. На вітальному екрані питання «в якій я
   мережі» ще не стоїть, а місце в шапці вона з'їдає: виміряно на 360×720 —
   шапка від неї переносилась у другий рядок, і перший екран починав гортатись
   у п'яти мовах із десяти. Мережу там і так названо в підвалі.

   Правило в стилях, а не в коді: стан, який треба ПАМ'ЯТАТИ перемалювати,
   колись не перемалюють. `:has()` читає стан гаманця сам. */
body:has(#wallet[hidden]) .netchip { display: none !important; }
.netchip { position: relative; flex: none; }
.netchip > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; min-height: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 500; cursor: default;
}
.netchip.pickable > button { cursor: pointer; }
.netchip.pickable > button:hover { color: var(--ink); border-color: var(--line-2); }
.netchip > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.netdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.netcaret {
  width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-1px, -1px);
}
.netmenu {
  /* Від ЛІВОГО краю мітки, а не від правого. З `right: 0` меню росло вліво й
     виїжджало за рамку — на знімку було видно обрізані назви мереж, бо рамка
     ріже все, що виходить по горизонталі. Мітка стоїть у лівій частині шапки,
     тож ліворуч місця немає, а праворуч — уся ширина. */
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 160px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.netmenu a, .netmenu span {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; text-decoration: none; color: var(--ink);
}
.netmenu a:hover { background: var(--hover); }
.netmenu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.netmenu .on { color: var(--link); }

/* ---------- мережа ---------- */
.netlinks { display: inline-flex; gap: 8px; margin-left: 10px; flex: none; }
.netlinks a {
  color: var(--link); font-size: 13px; text-decoration: none;
  border-bottom: 1px solid var(--accent-40); padding-bottom: 1px;
}
.netlinks a:hover { border-bottom-color: var(--accent); }
.netlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#netRow .setval { margin-left: auto; }
/* Рахунок з іншої мережі: не червоне, бо нічого не зламалось, — але й не
   сірим рядком серед решти, бо людина в цю мить певна, що втратила гроші. */
.warnbox {
  margin: 0 16px 10px; padding: 12px 14px;
  border: 1px solid var(--accent-28); border-radius: var(--radius);
  color: var(--ink-2); font-size: 13px;
}

/* ---------- сегментний перемикач теми (хендофф, 2f) ---------- */
.seg { display: inline-flex; gap: 6px; margin-left: auto; }
.seg button {
  min-height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500; background: transparent;
  border: 1px solid var(--line); color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button.on {
  color: var(--link); background: var(--amber-bg); border-color: var(--accent-40);
}
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Рядок «за посиланням просять» несе ПОВНУ адресу — 80 знаків, які мусять
   лягти в рамку, а не виїхати за неї. */
#reqNote { word-break: break-all; line-height: 1.5; }

/* ---------- екран отримання (хендофф, 2d) ---------- */
.recvbox .addr { margin: 8px 0 20px; font-size: 13px; }
.recvbox .or { margin: 24px 0; }
/* Картка коду: 210×210, світла підкладка, код 170. Розміри з хендоффу, але
   ширина обмежена й рамкою — на вужчому екрані картка стискається разом із
   нею, а не вилазить. */
.qrcard {
  width: min(210px, 100%); height: min(210px, 78vw);
  margin: 6px auto 20px; border-radius: 16px;
  background: #EDEFF5; display: grid; place-items: center;
}
.qrcard .qr { background: none !important; padding: 0 !important; }
.qrcard .qr svg { width: min(170px, 62vw); height: auto; }
/* Обведена акцентом. Головна дія екрана, яка нічого не витрачає: заливка
   лишається за тим єдиним місцем, де віддають гроші. */
.outline {
  background: transparent; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); color: var(--ink);
  min-height: 48px; padding: 0 14px; font-size: 14px; font-weight: 500;
}
.outline.accent { border-color: var(--accent-40); color: var(--link); }
.outline.wide { width: 100%; }
.outline:hover { background: var(--hover); }
.outline.accent:hover { background: var(--amber-bg); }
.outline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Рядок «Сума запиту»: підпис ліворуч, число праворуч. */
.reqrow { padding: 15px 0; }
.reqval { display: inline-flex; align-items: baseline; gap: 6px; }
.reqval input {
  width: 5ch; field-sizing: content; min-width: 2ch; max-width: 40vw;
  background: none; border: 0; padding: 0; text-align: right;
  color: var(--ink); font: 400 18px/1.2 var(--sans);
}
.reqval input:focus { outline: none; }
.reqval input::placeholder { color: var(--ink-3); }
.reqval-u { font-size: 13px; color: var(--muted); }


/* ---------- два інші шляхи на першому екрані ---------- */
/* У кадрі «Create account» перший екран показує одну дію й два посилання —
   не форму на три екрани прокрутки. Тому решта шляхів згорнута; поля
   лишаються в DOM, просто не показуються, доки їх не попросили. */
.obalt { margin-top: 10px; }
.obalt > summary {
  list-style: none; cursor: pointer;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 15px; text-align: center;
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.obalt > summary::-webkit-details-marker { display: none; }
.obalt[open] > summary { background: transparent; color: var(--muted); }
.obalt > *:not(summary) { margin-top: 12px; }
/* Кнопка всередині повторює підпис рядка — прибираємо верхній відступ,
   щоб між ними не було двох порожніх смуг. */
.obalt .ghost.wide { margin-top: 10px; }


/* «Я загубив пристрій» — не друга рівноправна кнопка, а посилання внизу, як
   «Already have an account? Log In» у кадрі. Дві однакові плитки поспіль
   робили з екрана меню, а він має пропонувати ОДНУ дію. */
.obalt.aslink > summary {
  background: none; padding: 12px 0 4px;
  color: var(--link); font-weight: 500;
}
.obalt.aslink[open] > summary { color: var(--muted); }

/* Низькі екрани. 360×640 ще трапляється, і саме там перший екран починав
   гортатись у всіх десяти мовах: іспанська й індонезійська довші за
   англійську на сотню пікселів. Тиснемо те, що можна тиснути без втрати
   змісту — ілюстрацію й відступи, — а не текст обіцянки. */
@media (max-height: 760px) {
  .card.ob { padding: 14px 16px 16px; }
  .ob-art { margin: 0 auto 6px; width: min(52%, 150px); padding: 8px 8px; }
  .ob-art svg { width: min(38%, 118px); }
  .ob-title { font-size: 20px; margin-bottom: 10px; }
  .card.ob .field { margin-bottom: 10px; }
  /* Підпис поля ховаємо, підказка в самому полі його замінює. Обіцянку про
     ключ НЕ чіпаємо — вона тут головна, а не оздоба. */
  .card.ob .field > span { display: none; }
  .card.ob .hint { margin-top: 8px; font-size: 12.5px; line-height: 1.35; }
  /* Друга приписка додала екранові висоти, і на 360×720 іспанська, вʼєтнамська
     та індонезійська почали гортатись на 11 px. Тиснемо повітря між
     приписками й кнопкою, а не самі приписки: перша з них — головне, що тут
     сказано. */
  .card.ob .hint + .primary, .card.ob .hint + .ghost { margin-top: 10px; }
  .or { margin: 10px 0; }
  .obalt { margin-top: 6px; }
  .card.ob .ghost.wide, .card.ob .primary { padding: 12px; }
  /* Шапка на низькому екрані теж має бути скромнішою. */
  .top { padding: 10px 0 4px; }
  .avatar { width: 34px; height: 34px; font-size: 15px; }
  .foot { padding: 8px 0 12px; }
}


/* ---------- картка підпису ---------- */
/* Єдине місце, де людина віддає гроші. Досі це була таблиця «поле —
   значення» без жодної ієрархії: сума мала таку саму вагу, як назва
   синхронізатора. Тепер головне велике, службове дрібне, а картка спливає
   знизу як лист — щоб її не сплутати з рештою екрана.

   Кольори не вигадані: та сама пара з макета, лише роль інша — тут золоте
   означає «підтвердити», а не «дія». */
#card,
#txDetail {
  /* `sticky` тут було помилкою, і показала її людина: картка стоїть у потоці
     ПІСЛЯ гаманця, тож до неї доводилось прокручувати. Для екрана, де
     підписують гроші, це найгірше з можливого — головне питання опинялось за
     межами видимого, а зверху лишався звичайний інтерфейс, по якому можна
     клацати далі.

     Тепер це справжній діалог: `fixed` притискає його до низу вікна поверх
     усього, а затемнення позаду каже, що решта екрана зараз не діє. Розмітка
     давно оголошувала його діалогом (`role="alertdialog"`, фокус переходить
     сюди) — розійшлись саме вигляд і оголошення. */
  /* По центру екрана, а не листом знизу. Знизу воно читалось як панель
     інтерфейсу, повз яку можна ковзнути оком; посередині — як питання, на яке
     треба відповісти. Для єдиного місця, де віддають гроші, це різні речі. */
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* Ширина — рівно рамка гаманця (`.phone`, 430 px), а не вікно. Перша
     редакція розтягла діалог на весь екран, і на комп'ютері він виглядав як
     смуга через увесь сайт при вузькому гаманці посередині. Гаманець — це
     рамка; усе, що до нього належить, живе в її межах. */
  /* І поля з боків: без них картка впритул до країв на телефоні читалась як
     ще один екран, а не як питання поверх нього — затемнення видно було лише
     згори й знизу. */
  width: calc(100% - 32px); max-width: 414px; z-index: 60;
  margin: 0; padding: 20px 18px;
  /* Висока картка (довга адреса, кілька дій) не має ховати кнопки за краєм
     екрана: гортається вона сама, а «Підписати» лишається досяжним. */
  /* `vh` на телефоні — це БІЛЬШИЙ вигляд вікна, той, що без адресного рядка.
     Доки рядок видно, `innerHeight` менший за `100vh`, і 86vh легко вилазить
     за видиме. `dvh` міряє те вікно, яке людина бачить зараз. Обидва рядки
     потрібні: браузер без `dvh` мовчки бере перший. */
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  /* Дійшовши до кінця своєї прокрутки, картка передавала рух сторінці позаду:
     людина гортає доказ, доказ закінчився — і далі поїхав гаманець. */
  overscroll-behavior: contain;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
/* Затемнення позаду. Псевдоелемент, а не окремий вузол: інакше довелось би
   тримати його видимість синхронно з карткою в трьох місцях коду, і рано чи
   пізно він лишився б висіти сам.

   Але НЕ псевдоелемент самої картки, як було досі. `transform` робить елемент
   блоком-контейнером для власних нащадків із `position: fixed`, тож `inset: 0`
   всередині картки означало не вікно, а саму картку: виміряно 428×69 при вікні
   430×880. Затемнення виходило рівно за розміром картки й ховалось за її ж
   непрозорим тлом — тобто відколи картка стала діалогом, обіцяне «решта екрана
   зараз не діє» не намалювалось жодного разу.
   Тепер воно висить на `body`, де жодного `transform` немає, а видимість
   лишається зв'язаною зі станом самої картки — через `:has()`, а не через
   третє місце в коді. Браузер без `:has()` просто не покаже затемнення —
   рівно те, що є сьогодні. */
body:has(#card:not([hidden]))::before,
body:has(#txDetail:not([hidden]))::before {
  content: ''; position: fixed; inset: 0; z-index: 59;
  background: rgba(0, 0, 0, .55);
}

/* Поки діалог відкритий, СТОРІНКА НЕ ЇДЕ. Виміряно на порожньому місці:
   `window.scrollBy(0, 600)` при відкритій картці зсував гаманець на 285 px —
   тобто затемнення казало «решта екрана зараз не діє», а решта екрана діяла.
   Наслідок гірший за косметичний: діалог висить посередині вікна, а зміст під
   ним тим часом інший, ніж був, коли людина його відкривала.

   Замок тут-таки, поруч із затемненням, і теж через `:has()`: тримати
   видимість діалога й замок у різних місцях коду означає, що колись вони
   розійдуться і сторінка лишиться замкненою без діалога.

   `scrollbar-gutter: stable` — щоб на комп'ютері зникла смуга прокрутки не
   зсувала рамку гаманця на свою ширину в мить відкриття. */
html { scrollbar-gutter: stable; }
html:has(#card:not([hidden])),
html:has(#txDetail:not([hidden])) { overflow: hidden; }
#card .card-t { font-size: 16px; margin-bottom: 4px; }
/* Підсумок — унизу, під полями, і акцентом. 24px, а не 32px по центру:
   найбільшим на екрані має бути не сума (її людина щойно набрала), а те, що
   вона зараз перевіряє. */
.total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 20px 0 0;
}
.total-l { font-size: 12px; color: var(--muted); }
#card .amount {
  font-size: 24px; font-weight: 400; color: var(--accent);
  text-align: right; word-break: break-all;
}
#fields {
  border-top: 1px solid var(--line); margin-top: 6px;
}
/* Рядки «підпис — значення» за хендоффом: 15px поле, волосяний роздільник,
   підпис ліворуч приглушений, значення праворуч. */
#fields .row span { color: var(--muted); }
#fields > .row, #fields > .whom {
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
#fields > .row { font-size: 13px; }
#fields > .row b { font-size: 14px; }
/* Другий рядок значення — те, що можна звірити: скорочений ідентифікатор
   синхронізатора з тієї самої транзакції. Назва мережі над ним — наша заява,
   цей рядок — з підписуваного. */
.row-sub {
  display: block; font-size: 11px; font-weight: 400;
  color: var(--muted); margin-top: 3px;
}
/* Отримувач — не «ще одне поле». Саме його підміняють, і саме на нього має
   впасти око: `c14_relay_threat` показав, що підміну ловить лише порівняння,
   але людині треба дати шанс помітити її самій.

   Раніше це робила вага шрифту в першому рядку — і рівно доти, доки першим
   рядком був отримувач. Тепер у нього власний блок: адреса не тиснеться до
   правого краю поруч із назвою шаблона, а стоїть на всю ширину. */
.whom { padding: 4px 0 10px; }
.whom .whom-a { font-size: 13px; }
.whom .label { margin-bottom: 4px; }
.whom-n { font-size: 16px; font-weight: 600; }
.whom-k { font-size: 12px; font-weight: 400; color: var(--muted); }
.whom-a {
  font-size: 13px; line-height: 1.55; word-break: break-all;
  color: var(--ink-2); margin-top: 2px;
}

/* Службове — під згорткою. Воно лишається в картці (і в тексті сторінки, який
   читають перевірки), але не стоїть між людиною й кнопкою. */
.tech { border-top: 1px solid var(--line); margin-top: 6px; }
.tech > summary {
  list-style: none; cursor: pointer; padding: 10px 0;
  font-size: 13px; color: var(--muted);
}
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary::after { content: ' ▾'; }
.tech[open] > summary::after { content: ' ▴'; }
.tech .row:last-child { padding-bottom: 10px; }
/* Стовпчиком. Поруч вони були сусідами однакового розміру, тобто «Скасувати»
   стояла на відстані пальця від «Підписати» — на єдиному екрані, де промах
   коштує грошей. Тепер підтвердження одне на всю ширину, а відмова під ним
   тихим рядком: її натискають свідомо, а не зачепивши. */
#buttons.stack { margin-top: 18px; }
#buttons.stack .primary { width: 100%; min-height: 52px; }
.quiet {
  width: 100%; min-height: 46px; margin-top: 6px; padding: 0;
  background: none; border: 0; color: var(--muted);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.quiet:hover { color: var(--ink); }
.quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#card.bad { border-color: var(--danger); }
#card.bad .card-t { color: var(--danger); }
#card #warn { color: var(--amber); margin-top: 12px; }


/* Рядок активу: плитка з символом замість стрілки напрямку. */
.item.asset::before { content: '◆'; color: var(--accent); }

/* Обраний актив. Рядок — це вибір того, що поїде в переказ, тож він мусить
   бути видимим НЕ лише кольором: у макеті обидві теми темні, а вибір, який
   видно тільки за відтінком, губиться і при поганому екрані, і при
   дальтонізмі. Тому смуга ліворуч плюс жирніша назва. */
.item.asset { cursor: pointer; border-radius: 12px; }
.item.asset.on {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}
.item.asset.on .kind { font-weight: 700; }
.item.asset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ---------- вітання (кадр 2.png) ---------- */
/* У кадрі це не картка, а екран: щит по центру, заголовок, підзаголовок, і
   кнопка притиснута донизу. Тому фон тут прозорий, а простір між текстом і
   кнопкою розтягується сам. */
#hello {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding-top: 6vh;
}
#hello[hidden] { display: none !important; }
/* Знак на фірмовій плашці, а не «просто картинка»: золото читається на
   темному (6.23) і зникає на світлому (2.86). Плашка робить обидві теми
   однаковими, і вона ж — те, що людина побачить на домашньому екрані. */
.hello-art {
  width: min(58%, 210px); aspect-ratio: 1;
  background: #0E0D0B; border-radius: 26%;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.hello-art img { width: 78%; height: auto; }
.hello-art svg { width: min(58%, 210px); height: auto; }
.hello-t {
  font-size: 27px; font-weight: 700; line-height: 1.2;
  margin: 26px 0 0; letter-spacing: -0.02em;
}
.hello-s {
  color: var(--muted); font-size: 15px; line-height: 1.5;
  margin: 14px 0 0; max-width: 34ch;
}
/* Розпірка, яка й притискає кнопку донизу. */
.hello-sp { flex: 1; min-height: 24px; }
#hello .primary { margin-bottom: 8px; }

@media (max-height: 760px) {
  #hello { padding-top: 2vh; }
  .hello-art, .hello-art svg { width: min(40%, 140px); }
  .hello-t { font-size: 22px; margin-top: 18px; }
  .hello-s { font-size: 13.5px; margin-top: 10px; }
}

/* ---------- вимкнений рух ----------
   Сім переходів у стилях і плавна прокрутка в app.js. Для вестибулярних
   розладів це не оздоблення, а причина закрити застосунок; системну
   налаштунок «зменшити рух» треба поважати, а не перекривати. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Посилання «у мережі» під сумою в історії. Дрібне й приглушене навмисно:
   це довідка, а не дія з грошима. З'являється лише коли розгортання назвало
   перевірений провідник — див. EXPLORER_TX у wallet_server.py. */
.seen {
  display: block; margin-top: 2px; font-size: 11px;
  color: var(--link); text-decoration: none;
}
.seen:hover { text-decoration: underline; }

/* «Доступно» належить до суми, а не до кнопки: тримаємо його при цифрі й
   лишаємо повітря перед «Надіслати», щоб рядок не читався як підпис кнопки. */
#sendAvail { margin: -10px 0 18px; }
#sendAvail:empty { margin: 0; }

/* Фраза відновлення: 24 слова плитками з номерами.
   Досі вони йшли суцільним рядком у `.addr`, а той має `word-break: break-all`
   — на 360 px фраза рвалась посеред слова («m andate», «h ard»). Це не
   косметика: слова існують саме для того, щоб їх переписали на папір, і
   переписаний розрив означає втрачений рахунок. */
.words {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 8px;
}
.words .word {
  display: flex; align-items: baseline; gap: 6px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 7px 8px; font-size: 13px; color: var(--ink);
  word-break: normal; overflow-wrap: anywhere;
}
.words .word i {
  font-style: normal; font-size: 11px; color: var(--muted);
  min-width: 14px; text-align: right; flex: none;
}
/* Два стовпці на вузькому: при трьох на 360 px шість плиток із 24 ставали
   двострядковими, тобто слово знову рвалось — лише в межах своєї плитки.
   Виміряно на 320/360/430. */
@media (max-width: 400px) { .words { grid-template-columns: repeat(2, 1fr); } }

/* ---------- доказ переказу (Proof of Transfer) ---------- */
/* Гармошка під рядком історії. Згорнута за замовчуванням, але кнопки
   копіювання стоять у самому заголовку — вимога посібника: копіювати можна,
   не розгортаючи. */
.proof {
  background: var(--surface); border-radius: var(--radius-sm);
  margin-top: -4px; padding: 0 16px 2px; font-size: 13px;
}
.proof > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; cursor: pointer; color: var(--muted);
  list-style: none;
}
.proof > summary::-webkit-details-marker { display: none; }
.proof > summary::before {
  content: '›'; flex: none; font-size: 15px; line-height: 1;
  transition: transform .15s ease; color: var(--muted);
}
.proof[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .proof > summary::before { transition: none; }
}
.proof-tools { margin-left: auto; display: flex; gap: 6px; flex: none; }
.ghost.tiny {
  padding: 4px 9px; font-size: 12px; border-radius: var(--radius-sm);
  width: auto; min-height: 0;
}
.proof .label { margin: 6px 0 2px; }
.proof .json {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.45; color: var(--ink);
  overflow-x: auto; white-space: pre;
}

/* ---------- вихід із картки підпису ---------- */
/* Картка не мала виходу взагалі: на відмові кнопок немає за призначенням, і
   людина лишалась замкненою до перезавантаження. Хрестик стоїть у своєму
   кутку й не зсуває заголовка — тому `position: absolute`, а не рядок.

   Власного `position: relative` картці для цього НЕ треба, і рядок, що його
   ставив, коштував дорого: він стоїть нижче за оголошення `position: fixed`,
   тобто скасовував його. Обидві картки лишались у потоці в кінці гаманця —
   тобто нижче за всю історію, — а на екрані вони все одно з'являлись
   посередині лише тому, що `showTx` вів до них фокус голим `focus()`, і
   браузер прокручував сторінку до них. Тобто «діалог» був не діалогом, а
   рядком у кінці сторінки, до якого нас щоразу підвозили: сторінка при цьому
   їхала, і після закриття людина лишалась не там, де була.
   `position: fixed` сам робить елемент опорою для нащадків з `absolute`. */
.cardx {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  color: var(--muted); background: none; border: 0;
  border-radius: var(--radius-sm); cursor: pointer;
}
.cardx:hover { color: var(--ink); background: var(--surface-2); }
.cardx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Заголовок не має лізти під хрестик. */
#card .card-t { padding-right: 38px; }

/* ---------- запит на оплату для того, хто ще без рахунку ---------- */
.reqcall {
  margin: 0 0 14px; padding: 13px 16px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.5; color: var(--ink);
}

/* ---------- «Вийти» ---------- */
/* Той самий рядок, що й решта налаштувань, — щоб не виглядав кнопкою, яку
   тиснуть мимохідь. Червоний лише текст: заливка кричала б про небезпеку,
   якої тут немає — це не видалення. */
.setrow.danger {
  width: 100%; font: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
  color: var(--danger-ink);
}
.setrow.danger:hover { background: var(--surface-2); }
.setrow.danger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- налаштування як суцільний список (кадр із меню) ---------- */
/* Було чотири окремі картки з проміжками — читалось як чотири розділи, хоч
   це один. Тепер одна група з волосяними роздільниками: рядок, іконка,
   стрілочка. Радіус лишається зовні групи, а не в кожного рядка. */
.rowlist {
  background: var(--surface); border-radius: var(--radius);
  overflow: hidden; margin: 4px 0 6px;
}
.rowlist > .srowc { border-radius: 0; margin: 0; background: none; }
.rowlist > .srowc + .srowc > summary { border-top: 1px solid var(--line); }
/* Відкритий рядок відділяємо зверху теж — інакше вміст зливається з сусідом. */
.rowlist > .srowc[open] + .srowc > summary { border-top: 1px solid var(--line); }

/* Іконка рядка. `currentColor` навмисно: колір успадковується від рядка, тож
   обидві теми й червоний «Вийти» дістаються без жодного окремого правила. */
.ri {
  width: 20px; height: 20px; flex: none;
  color: var(--muted); opacity: .9;
}
.srowc > summary > .ri { margin-right: -2px; }
/* Підпис має тягнутись, інакше стрілочка приліпає до тексту, а не до краю. */
.srowc > summary > span { flex: 1; min-width: 0; }
.setrow > .ri { color: var(--muted); }
.setrow.danger > .ri { color: inherit; opacity: 1; }

/* Рядки «Вигляд» теж із іконками — тому перший елемент більше не тягнеться
   сам, а віддає це підпису. */
.setrow > span:first-of-type { flex: 1; min-width: 0; }

/* ---------- деталі операції ---------- */
/* Доказ переказу живе ТУТ, а не гармошкою під кожним рядком історії. По
   нього приходять раз — коли треба щось довести; список читають щодня, і
   технічний текст під кожним рядком робив його вдвічі довшим. */
#txRows .srow { padding: 9px 0; }
#txProof .label { margin: 12px 0 3px; }
#txProof .json {
  margin: 0; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  color: var(--ink); overflow-x: auto; white-space: pre; max-height: 34vh;
}
#txProof .inline { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#txProof .inline > * { flex: 1 1 auto; }

/* Рядок історії тепер натискний — і мусить це показувати. */
.item.tap { cursor: pointer; }
.item.tap:hover { background: var(--surface-2); }
.item.tap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- панель, мітки груп, посилання-рядок (хендофф) ---------- */
/* Мітка групи: 11px, великими, з розрядкою — тиха вивіска над списком, а не
   заголовок. Заголовком тут був `h2`, і він сперечався за увагу з тим, що
   під ним. */
.seclabel {
  font-size: 11px; line-height: 1; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 22px 0 10px;
}
.view > .seclabel:first-child { margin-top: 4px; }

/* «Показати всю історію» — рядок, а не кнопка: дія тиха, і виглядати вона
   мусить так само тихо. */
.linkrow {
  display: block; width: 100%; text-align: left;
  padding: 14px 0; border: 0; background: none;
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.linkrow:hover { color: var(--ink); }
.linkrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Кнопка з акцентною рамкою: не заливка (та лишається головній дії), але й
   не зовсім тиха. У хендоффі так виглядають «Додати охоронців» і
   «Скопіювати адресу». */
.ghost.accent {
  /* ТЕКСТ, а не заливка — тому не `--accent`. Золото літерами на світлому
     тлі дає 1.76: у темній темі воно читається, у світлій зникає. `--link`
     саме для цього й є: золото в темній, темний бурштин у світлій. */
  border-color: var(--accent-line); color: var(--link);
}
.ghost.accent:hover { background: var(--accent-tint); }