/* Страница чека об исполнении. Палитра и шрифты берутся из app/app.css —
   отдельных токенов тут нет намеренно, иначе страница разъедется с приложением
   при первой же правке бренда. */

.fx {
  margin: 0;
  min-height: 100vh;
  background: var(--deep);
  color: var(--muted);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.fx * { box-sizing: border-box; }
.fx a { color: inherit; }

/* ─── шапка ─── */

.fx-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line-2);
}
.fx-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.fx-brand span { font-size: 15px; letter-spacing: -0.01em; }
.fx-brand img { display: block; }
.fx-app {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border: 1px solid var(--line);
  padding: 8px 12px; border-radius: 8px; transition: border-color .15s, color .15s;
}
.fx-app:hover { color: var(--text); border-color: var(--c); }

/* ─── каркас ─── */

.fx-main { max-width: 860px; margin: 0 auto; padding: 34px 22px 80px; }
.fx-load { color: var(--dim); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

.fx-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 10px;
}
.fx-hash {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  word-break: break-all; margin: 0 0 26px;
}
.fx-hash a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.fx-hash a:hover { color: var(--c); border-color: var(--c); }

/* ─── сама сделка ─── */

.fx-trade {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(19px, 3.2vw, 27px); color: var(--text);
  margin: 0 0 12px; line-height: 1.25;
}
.fx-trade .arrow { color: var(--c); }
/* Число и тикер — одна неразрывная группа: при переносе они обязаны уехать
   вместе, иначе на узком экране сумма остаётся на строке, а её тикер уходит
   вниз и читается как отдельная величина. */
.fx-trade .leg { display: inline-flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.fx-trade .sym { color: var(--muted); font-size: 0.62em; letter-spacing: 0.04em; }

.fx-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--dim); margin: 0 0 28px;
}
.fx-meta b { color: var(--muted); font-weight: 400; }

/* ─── вердикт ─── */

.fx-verdict {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px;
  background: var(--surf); margin: 0 0 34px;
}
.fx-verdict.good { border-color: rgba(0, 255, 178, 0.34); background: rgba(0, 255, 178, 0.05); }
.fx-verdict.bad  { border-color: rgba(240, 97, 109, 0.42); background: rgba(240, 97, 109, 0.06); }
.fx-verdict h2 {
  margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.fx-verdict.good h2 { color: var(--c); }
.fx-verdict.bad  h2 { color: var(--red); }
.fx-verdict p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ─── доска ─── */

.fx-sec-h { margin: 0 0 4px; font-size: 15px; color: var(--text); font-weight: 400; }
.fx-sec-s { margin: 0 0 16px; font-size: 13px; color: var(--dim); line-height: 1.5; }

.fx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fx-table th {
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim); text-align: right;
  padding: 0 0 10px; border-bottom: 1px solid var(--line);
}
.fx-table th:first-child, .fx-table td:first-child { text-align: left; }
.fx-table td {
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: right;
  vertical-align: baseline;
}
.fx-table tr.you td { color: var(--text); background: rgba(0, 255, 178, 0.055); }
.fx-table tr.you td:first-child { box-shadow: inset 2px 0 0 var(--c); padding-left: 10px; }
.fx-table tr.you td:last-child { padding-right: 10px; }
.fx-rank { color: var(--dim); }
.fx-route { font-size: 12px; }
.fx-route .fam {
  display: inline-block; border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); margin-right: 7px;
}
.fx-route a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.fx-route a:hover { color: var(--c); border-color: var(--c); }
.fx-delta.up { color: var(--c); }
.fx-delta.down { color: var(--red); }
.fx-you-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c); display: block; margin-top: 3px;
}

.fx-counts {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--dim); margin: 16px 0 0;
}

/* ─── воспроизводимость ─── */

.fx-repro { margin: 40px 0 0; border-top: 1px solid var(--line-2); padding-top: 24px; }
.fx-repro pre {
  margin: 12px 0 0; padding: 14px; overflow-x: auto;
  background: var(--surf); border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.6;
}
.fx-note { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--dim); }

/* ─── пустые состояния ─── */

.fx-empty { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--surf); }
.fx-empty h1 { margin: 0 0 10px; font-size: 17px; font-weight: 400; color: var(--text); }
.fx-empty p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.fx-empty code { font-family: var(--mono); font-size: 12px; color: var(--c); }

/* На узком экране колонка маршрута не прячется, а уезжает в прокрутку внутри
   своей обёртки. Скрыть её было бы дешевле, но чек без указания площадки
   перестаёт быть чеком: остаётся число без источника. */
.fx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fx-scroll .fx-table { min-width: 430px; }