:root {
  --bg: #0c0f14;
  --panel: #141821;
  --panel-2: #1b2030;
  --border: #232a3b;
  --text: #e6ebf2;
  --muted: #8b95a8;
  --accent: #4ea3ff;
  --green: #2fc77a;
  --orange: #f0a04b;
  --red: #ef5b5b;
  --gray: #5a637a;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  min-height: 100dvh;
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray); transition: background 0.3s; }
.dot.live { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.dead { background: var(--red); }
.env-badge {
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 12px; font-size: 11px; color: var(--muted);
  text-transform: uppercase;
}

/* The header nav never widens the page: when its links don't fit next to the
   brand they scroll sideways inside the header (hamburger below 1024px). */
.brand { flex: none; }
nav { display: flex; gap: 16px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; white-space: nowrap; flex: none; }
nav .nav-user, nav .nav-logout { white-space: nowrap; flex: none; }
@media (max-width: 1320px) {
  header { gap: 12px; }
  nav { gap: 2px; }
  nav a { padding: 6px 8px; }
}
nav a:hover { color: var(--text); background: var(--panel-2); }
nav a.active { color: var(--accent); }

/* EN / RU switch (LB.langSwitch in common.js) — in the nav and on the login page. */
.lang-switch {
  display: inline-flex; flex: none; align-self: center;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.lang-switch button {
  background: transparent; color: var(--muted); border: none; cursor: pointer;
  padding: 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.lang-switch button + button { border-left: 1px solid var(--border); }
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { background: var(--panel-2); color: var(--accent); }

main { max-width: 1400px; margin: 0 auto; padding: 24px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; box-shadow: var(--shadow);
}
.card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.card .value { font-size: 28px; font-weight: 700; margin: 6px 0 4px; }
.card .sub { color: var(--muted); font-size: 12px; }

.chains {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px;
  margin-bottom: 24px;
}
.chain-pill {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chain-pill .net { font-weight: 600; text-transform: uppercase; font-size: 11px; color: var(--accent); }
.chain-pill .chain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chain-pill .mini-refresh {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.chain-pill .mini-refresh:hover {
  color: var(--text);
  border-color: var(--accent);
}
.chain-pill .blk { color: var(--muted); }
.chain-pill .health-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.chain-pill .health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.chain-pill.level-green { border-color: rgba(47, 199, 122, 0.45); }
.chain-pill.level-green .health-line { color: var(--green); }
.chain-pill.level-green .health-dot { background: var(--green); box-shadow: 0 0 8px rgba(47, 199, 122, 0.9); }
.chain-pill.level-yellow { border-color: rgba(240, 160, 75, 0.45); }
.chain-pill.level-yellow .health-line { color: var(--orange); }
.chain-pill.level-yellow .health-dot { background: var(--orange); box-shadow: 0 0 8px rgba(240, 160, 75, 0.7); }
.chain-pill.level-red { border-color: rgba(239, 91, 91, 0.6); }
.chain-pill.level-red .health-line { color: var(--red); }
.chain-pill.level-red .health-dot { background: var(--red); box-shadow: 0 0 8px rgba(239, 91, 91, 0.75); }

.feed {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); overflow: hidden;
}
.feed-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.feed-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.feed-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.avg-delta-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: rgba(78, 163, 255, 0.12);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.filters { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.filters select, .filters button, .filters input[type="search"] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 4px 8px; border-radius: 6px;
}
.filters button { cursor: pointer; }

.feed-columns,
.tx-row {
  display: grid;
  grid-template-columns: 150px 70px 44px 86px 140px 130px 116px minmax(250px, 1fr) 92px 112px;
  gap: 8px;
  padding: 10px 16px;
  align-items: center;
  min-width: 1250px;
}

.feed-columns {
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.feed-table-wrap {
  overflow-x: auto;
}

.feed-list {
  max-height: calc(100vh - 430px);
  overflow-y: auto;
  overflow-x: hidden;
}

.tx-row {
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  animation: fadeIn 0.3s ease-out;
}
.tx-row.unknown { background: rgba(240, 160, 75, 0.06); }
.tx-row.spam { opacity: 0.4; }
.tx-row.assigned { background: rgba(47, 199, 122, 0.04); }
.tx-row.outgoing { background: rgba(78, 163, 255, 0.04); }

.tx-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.tx-net { font-size: 11px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.tx-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tx-dir.incoming { background: rgba(47, 199, 122, 0.2); color: var(--green); }
.tx-dir.outgoing { background: rgba(240, 160, 75, 0.2); color: var(--orange); }
.tx-dir.internal { background: rgba(78, 163, 255, 0.2); color: var(--accent); }
.tx-dir.unknown { background: rgba(90, 99, 122, 0.2); color: var(--muted); }
.tx-status {
  display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px;
  font-weight: 600; text-transform: uppercase;
}
.tx-status.detected { background: rgba(47, 199, 122, 0.2); color: var(--green); }
.tx-status.unknown_sender { background: rgba(240, 160, 75, 0.2); color: var(--orange); }
.tx-status.assigned { background: rgba(47, 199, 122, 0.2); color: var(--green); }
.tx-status.spam { background: rgba(90, 99, 122, 0.2); color: var(--gray); }
.tx-status.outgoing { background: rgba(78, 163, 255, 0.2); color: var(--accent); }
.tx-asset { font-weight: 600; }
.tx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-main .tx-sub { color: var(--muted); font-size: 11px; }
.tx-tag {
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: rgba(90, 99, 122, 0.2);
}
.tx-tag.tag-btn {
  cursor: pointer;
}
.tx-tag.tag-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.tx-tag.transit_tx {
  color: var(--muted);
}
.tx-tag.client_revenue {
  color: var(--green);
}
.tx-tag.postpaid_fee {
  color: var(--green);
}
.tx-tag.other_revenue {
  color: var(--green);
}
.tx-tag.client_payout {
  color: var(--accent);
}
.tx-tag.swap_leg {
  color: var(--orange);
}
.tx-tag.gas_expense {
  color: var(--red);
}
.tx-tag.expenses {
  color: var(--red);
}
.tx-tag.dividends {
  color: var(--green);
}
.tx-tag.other {
  color: var(--muted);
}
.tx-tag.spam {
  color: var(--red);
}
.tx-tag.unclassified {
  color: var(--muted);
}
.tx-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-usd { color: var(--muted); font-size: 11px; }
.tx-fee { color: var(--green); font-variant-numeric: tabular-nums; font-size: 12px; }
/* Postpaid clients: the margin is accrued, not collected at payin. */
.tx-fee.postpaid { color: var(--orange); }
.tx-fee .tx-fee-note { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Linked legs (deposit ↔ paired payout) rendered as one visual block.
   Width must follow the SAME rule as .tx-row (block + min-width 1250px) —
   width:max-content made the group wider than ungrouped rows and the grid
   columns inside it drifted out of alignment. */
.tx-group {
  min-width: 1250px;
  margin: 8px 0;
  border-top: 1px solid rgba(78, 163, 255, 0.35);
  border-bottom: 1px solid rgba(78, 163, 255, 0.35);
  border-left: 3px solid var(--accent);
  background: rgba(78, 163, 255, 0.04);
}
.tx-group.swap {
  border-top-color: rgba(240, 160, 75, 0.4);
  border-bottom-color: rgba(240, 160, 75, 0.4);
  border-left-color: var(--orange);
  background: rgba(240, 160, 75, 0.04);
}
.tx-group-head {
  position: sticky;
  left: 0;
  padding: 4px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(78, 163, 255, 0.08);
  border-bottom: 1px dashed var(--border);
}
.tx-group.swap .tx-group-head { color: var(--orange); background: rgba(240, 160, 75, 0.08); }
.tx-group .tx-row { border-bottom: 1px dashed var(--border); background: transparent; }
.tx-group .tx-row:last-child { border-bottom: none; }

/* "Show in context" (filtered views): muted neighbours around an anchor row. */
.tx-row.tx-context {
  opacity: 0.55;
  border-left: 2px dashed var(--gray);
  background: rgba(90, 99, 122, 0.06);
}
.tx-row.tx-anchor { border-left: 2px solid var(--accent); }
.tx-client { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-delta { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.tx-from { font-family: ui-monospace, "SF Mono", monospace; color: var(--muted); font-size: 11px; }
.tx-actions { display: flex; gap: 4px; justify-content: flex-end; }
.tx-actions button, .tx-actions a {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; text-decoration: none;
}
.tx-actions button:hover, .tx-actions a:hover { background: var(--accent); border-color: var(--accent); color: white; }

.feed-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: rgba(27, 32, 48, 0.45);
}
.feed-meta {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.feed-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.feed-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.feed-page-status {
  color: var(--muted);
  font-size: 12px;
  min-width: 96px;
  text-align: center;
}
.feed-pagination select,
.feed-pagination input,
.feed-pagination button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  min-height: 30px;
}
.feed-pagination input {
  width: 72px;
}
.feed-pagination button {
  cursor: pointer;
}
.feed-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px; min-width: 360px; max-width: calc(100vw - 24px); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog h3 { margin: 0 0 12px; }
dialog input { width: 100%; margin-bottom: 12px; padding: 6px 10px; }
dialog select {
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.client-list { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }
.client-list li {
  padding: 8px 12px; cursor: pointer; border-radius: 6px;
}
.client-list li:hover { background: var(--panel-2); }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.dialog-actions button {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
}

@media (max-width: 1100px) {
  .feed-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .feed-title {
    justify-content: space-between;
  }
  .filters {
    flex-wrap: wrap;
  }
}

.analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.analytics-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.analytics-filters select,
.analytics-filters input,
.analytics-filters button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 140px;
}
.analytics-filters button {
  cursor: pointer;
  min-width: auto;
}

.analytics-cards {
  margin-bottom: 16px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 16px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.bar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar-row {
  display: grid;
  grid-template-columns: 95px 1fr 130px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.bar-label { color: var(--muted); }
.bar-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #8e9bff);
}
.bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sparkline {
  width: 100%;
  height: 160px;
  display: block;
}
.spark-area {
  fill: rgba(78, 163, 255, 0.16);
}
.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.spark-meta {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
.chip-label {
  color: var(--muted);
  font-size: 11px;
}
.chip-value {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
}
.chip-sub {
  color: var(--muted);
  font-size: 11px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.metric-grid div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
}
.metric-grid span { color: var(--muted); }
.metric-grid strong { font-variant-numeric: tabular-nums; }

.mini-bars {
  height: 170px;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  align-items: end;
}
.mini-bar {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.mini-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #8e9bff, var(--accent));
}
.mini-label {
  color: var(--muted);
  font-size: 10px;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.analytics-table thead {
  background: var(--panel-2);
}
.analytics-table th,
.analytics-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.analytics-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}
.analytics-table td.right,
.analytics-table th.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}

.alert-banner {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(239, 91, 91, 0.5);
  background: rgba(239, 91, 91, 0.12);
  color: #ffb5b5;
  font-size: 13px;
}

.client-metrics-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metrics-hero {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.metrics-hero h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.metrics-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 840px;
  line-height: 1.4;
}

.hero-totals {
  display: grid;
  gap: 10px;
  min-width: 220px;
}

.hero-totals div {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-totals span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-totals strong {
  font-size: 24px;
  line-height: 1.1;
}

.metrics-controls {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.metrics-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.metrics-controls .checkbox-wrap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
}

.metrics-controls select,
.metrics-controls button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  min-height: 36px;
}

.metrics-controls button {
  cursor: pointer;
}

.metrics-controls button.ghost {
  color: var(--muted);
}

.metrics-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.metrics-cards {
  margin-bottom: 0;
}

.stacked-panel {
  margin-bottom: 0;
}

.stacked-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.stacked-head h2 {
  margin: 0;
}

.stacked-sub {
  color: var(--muted);
  font-size: 12px;
}

.stacked-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 10px;
  align-items: stretch;
}

.stacked-canvas-wrap {
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(27, 32, 48, 0.65), rgba(20, 24, 33, 0.75));
  padding: 8px;
}

.stacked-chart {
  width: 100%;
  height: 340px;
}

.stacked-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.stacked-legend {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(20, 24, 33, 0.6);
  color: var(--text);
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}

.legend-item:hover {
  border-color: var(--accent);
}

.legend-item.hidden {
  opacity: 0.42;
}

.legend-item.others {
  border-style: dashed;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}

.legend-total {
  font-size: 11px;
  color: var(--muted);
}

.legend-hint {
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 980px) {
  .metrics-hero {
    flex-direction: column;
  }

  .hero-totals {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .stacked-layout {
    grid-template-columns: 1fr;
  }

  .stacked-legend {
    max-height: none;
  }
}

.clients-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.form-hint code {
  background: rgba(78, 163, 255, 0.08);
  border: 1px solid rgba(78, 163, 255, 0.18);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
}

.quick-client-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-client-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-client-preview {
  margin-top: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 8px 10px;
  min-height: 40px;
}

.quick-client-preview .muted {
  color: var(--muted);
  font-size: 12px;
}

.alert-inline {
  color: #ffb5b5;
  font-size: 12px;
}

/* Inline error shown inside the client dialog (the page banner is hidden
   behind the open modal, so dialog errors must live in the form). */
.form-inline-msg {
  color: #ffb5b5;
  background: rgba(239, 91, 91, 0.1);
  border: 1px solid rgba(239, 91, 91, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}

.client-form input.input-error,
.client-form select.input-error,
.client-form textarea.input-error {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(239, 91, 91, 0.18);
}

.primary-btn {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.primary-btn:hover { filter: brightness(1.08); }

.ghost-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}

.ghost-btn:hover { border-color: var(--accent); }

.client-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.client-dialog-head h3 {
  margin: 0;
  font-size: 18px;
}

.dialog-close {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.dialog-close:hover {
  color: var(--text);
  background: var(--panel-2);
}

.client-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.client-tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: -1px;
}

.client-tab:hover { color: var(--text); }

.client-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.client-tab-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.client-tab-panel.is-active {
  display: flex;
}

.clients-toolbar {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.clients-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.clients-toolbar input[type="search"] {
  min-width: 320px;
  max-width: 520px;
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.clients-toolbar button {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.clients-toolbar .checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
}

.clients-table-panel {
  margin-bottom: 0;
}

.clients-table tbody tr.is-inactive {
  opacity: 0.56;
}

.clients-table td,
.clients-table th {
  white-space: nowrap;
}

.clients-table td strong {
  font-weight: 600;
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-pill.active {
  color: var(--green);
  background: rgba(47, 199, 122, 0.16);
}

.status-pill.inactive {
  color: var(--muted);
  background: rgba(90, 99, 122, 0.18);
}

.row-actions {
  display: flex;
  gap: 6px;
}

.row-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 11px;
}

.row-actions button.danger {
  color: #ffb5b5;
}

.client-dialog {
  min-width: 560px;
  max-width: min(94vw, 720px);
  width: 720px;
  max-height: 92vh;
  padding: 18px 20px;
  overflow: auto;
}

.client-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.client-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.client-form input,
.client-form select,
.client-form textarea {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  margin-bottom: 0;
  width: 100%;
}

.client-form input:focus,
.client-form select:focus,
.client-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(78, 163, 255, 0.18);
}

.client-form label > input[type="checkbox"] {
  width: auto;
}

.client-form code {
  background: rgba(78, 163, 255, 0.08);
  border: 1px solid rgba(78, 163, 255, 0.18);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
}

.client-form textarea {
  resize: vertical;
}

.client-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.client-form .checkbox-wrap {
  flex-direction: row;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

@media (max-width: 860px) {
  .quick-client-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-client-buttons {
    width: 100%;
    flex-direction: column;
  }

  .quick-client-buttons .primary-btn,
  .quick-client-buttons .ghost-btn {
    width: 100%;
  }

  .clients-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .clients-toolbar input[type="search"] {
    max-width: none;
    min-width: 0;
  }

  .client-dialog {
    min-width: min(94vw, 520px);
    width: min(94vw, 520px);
    padding: 14px 14px 12px;
  }

  .client-form-grid {
    grid-template-columns: 1fr;
  }
}

.delta-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.delta-toolbar {
  margin-bottom: 0;
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.delta-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.delta-toolbar select,
.delta-toolbar button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  min-height: 36px;
}

.delta-toolbar button {
  cursor: pointer;
}

.delta-toolbar .checkbox-wrap {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
}

.delta-cards {
  margin-bottom: 0;
}

.delta-table td .muted {
  color: var(--muted);
  font-size: 11px;
}

.delta-table tbody tr.delta-overdue {
  background: rgba(239, 91, 91, 0.06);
}

.source-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.source-tag.manual {
  background: rgba(78, 163, 255, 0.2);
  color: var(--accent);
}

.source-tag.auto {
  background: rgba(47, 199, 122, 0.18);
  color: var(--green);
}

.status-pill.ok {
  color: var(--green);
  background: rgba(47, 199, 122, 0.18);
}

.status-pill.overdue {
  color: #ffb5b5;
  background: rgba(239, 91, 91, 0.18);
}

.status-pill.ready {
  color: #ffc784;
  background: rgba(240, 160, 75, 0.18);
  margin-left: 4px;
}

.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.delta-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.delta-actions input {
  width: 90px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
}

.delta-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

/* ============================================================
   Responsive / mobile adaptations
   ============================================================ */

/* Hamburger toggle button — injected by responsive-nav.js. Hidden on desktop. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav-toggle .nav-toggle-close { display: none; }
header.nav-open .nav-toggle .nav-toggle-open { display: none; }
header.nav-open .nav-toggle .nav-toggle-close { display: block; }

/* Collapse the header nav into a toggleable panel on tablet/phone widths. */
@media (max-width: 1023px) {
  header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }

  .brand { min-width: 0; flex: 1; }
  .brand h1 {
    min-width: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-toggle { display: inline-flex; }

  header nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  header.nav-open nav { display: flex; }

  header nav a,
  header nav .nav-logout,
  header nav .logout-link {
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 15px;
  }
  header nav a:hover,
  header nav .nav-logout:hover,
  header nav .logout-link:hover { color: var(--text); background: var(--panel-2); }
  header nav .nav-user,
  header nav .whoami {
    padding: 8px 12px;
    margin: 0;
  }
  header nav .lang-switch { align-self: flex-start; margin: 6px 12px; }
  header nav .lang-switch button { padding: 8px 14px; font-size: 13px; }
}

@media (max-width: 760px) {
  main { padding: 16px 12px; }

  /* Keep text fields at >=16px so iOS doesn't zoom the page on focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Wide data tables scroll horizontally instead of widening the whole page. */
  .analytics-table,
  table.rpc,
  table.users {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Step down oversized headings. */
  .metrics-hero h2 { font-size: 22px; }

  /* Never let a dialog spill past the viewport. */
  dialog { min-width: 0; width: calc(100vw - 24px); }
  .dialog-actions { gap: 8px; }
  .dialog-actions button { padding: 10px 16px; font-size: 15px; border-radius: 8px; }
  .client-list li { padding: 12px; font-size: 15px; }

  /* --- Transaction feed: reflow each row into a card (no sideways scrolling).
     The DOM order from renderRow() is time, net, dir, status, client, amount,
     fee, main(tag+sender+addresses), delta, actions — grid areas re-arrange it. --- */
  .feed-columns { display: none; }

  .tx-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "time    net     dir"
      "client  status  status"
      "amount  fee     fee"
      "main    main    main"
      "delta   actions actions";
    gap: 6px 10px;
    padding: 14px;
    align-items: center;
  }

  .tx-time { grid-area: time; }
  .tx-net { grid-area: net; justify-self: end; }
  .tx-dir { grid-area: dir; justify-self: end; font-size: 10px; padding: 3px 8px; }
  .tx-status { grid-area: status; justify-self: end; font-size: 11px; padding: 3px 8px; }
  .tx-client { grid-area: client; font-size: 15px; }
  .tx-amount { grid-area: amount; font-size: 16px; }
  .tx-fee { grid-area: fee; justify-self: end; align-self: start; }
  .tx-main { grid-area: main; gap: 4px; }
  /* The asset symbol is already shown next to the amount — drop the duplicate. */
  .tx-main .tx-asset { display: none; }
  .tx-main .tx-sub { font-size: 13px; }
  /* Long addresses/hashes wrap instead of forcing width. */
  .tx-from { font-size: 12px; white-space: normal; word-break: break-all; }
  .tx-delta { grid-area: delta; align-self: center; }
  .tx-delta::before { content: "Δ "; color: var(--muted); }

  /* Linked-leg groups: cards already fit the viewport — no sideways sizing. */
  .tx-group { width: auto; min-width: 0; }
  .tx-group-head { position: static; }

  /* Tap-friendly tagging controls. */
  .tx-tag { font-size: 12px; padding: 4px 10px; }
  .tx-actions {
    grid-area: actions;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }
  .tx-actions button, .tx-actions a {
    padding: 9px 13px;
    font-size: 13px;
    border-radius: 8px;
  }
}

/* Clients page: people inside a client's chat + the Wirex One window. */
.people-toggle { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 6px; font-size: 13px; }
.people-toggle:hover { color: var(--text); }
.people-row > td { background: var(--panel-2); padding: 6px 10px 10px 34px; }
/* The clients table scrolls inside its panel, never the page. The client column
   stays put while scrolling (from tablet width up), and an expanded chat's people
   stay inside the visible width instead of spreading across the whole table. */
#clients-list { overflow-x: auto; container-type: inline-size; container-name: clientlist; }
.clients-table .client-col { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--border); }
.clients-table > thead .client-col { background: var(--panel-2); z-index: 2; }
.clients-table > tbody > tr.is-inactive { opacity: 1; }
.clients-table > tbody > tr.is-inactive > td:not(.client-col),
.clients-table > tbody > tr.is-inactive > td.client-col > * { opacity: 0.56; }
.clients-table .people-toggle-gap { display: inline-block; width: 25px; }
.clients-table .cell-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.people-panel { position: sticky; left: 34px; width: calc(100cqw - 44px); overflow-x: auto; }
.people-scroll { overflow-x: auto; }
.tg-chip { display: inline-block; padding: 0 5px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: #7cc4f2; border: 1px solid rgba(124, 196, 242, 0.45); vertical-align: 1px; }
.tg-line { margin: 0 0 6px; }
@container clientlist (max-width: 720px) {
  .clients-table .client-col { position: static; box-shadow: none; }
  .people-row > td { padding-left: 10px; }
  .people-panel { left: 10px; width: calc(100cqw - 20px); }
}
.people-table { margin: 0; font-size: 12px; }
.people-table td, .people-table th { padding: 4px 8px; }
.level-pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; border: 1px solid var(--border); }
.level-pill.Bespoke { border-color: #b08d3c; color: #e3c27a; }
.level-pill.Private { border-color: #6c5bb5; color: #b9adf0; }
.level-pill.Access { color: var(--muted); }
.panel-title { margin: 0 0 6px; font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.wirex-dialog { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; }
.wx-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.wx-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 150px; }
.wx-card .k { font-size: 11px; color: var(--muted); }
.wx-card .v { font-size: 17px; font-weight: 600; margin-top: 2px; }
.wx-section { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.wx-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.wx-tabs button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.wx-tabs button.is-active { color: var(--text); border-color: #4b6bd6; }
.wx-scroll { overflow-x: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.amount-out { color: #e58b8b; }
.amount-in { color: #8bd3a0; }

/* Clients page: filters, tags, person dialog, card tabs. */
.clients-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.people-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.people-filters select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.tag-chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); margin: 2px 4px 0 0; white-space: nowrap; }
.tag-edit { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 4px; }
.tag-edit:hover { color: var(--accent); }
.spend-hint { display: inline-block; font-size: 11px; color: var(--orange, #f0a04b); white-space: nowrap; }
.person-dialog { width: min(720px, calc(100vw - 24px)); }
.person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; }
.person-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.person-grid input, .person-grid select { margin: 0; }
.person-edit { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 11px; padding: 1px 6px; }
.person-edit:hover { color: var(--text); border-color: var(--accent); }
.deal-badge { font-size: 10px; color: var(--accent); border: 1px solid rgba(78,163,255,.4); border-radius: 8px; padding: 0 5px; margin-left: 4px; }

/* Personal data inside Clients (clients-pii.js). */
.pii-bar { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pii-slot:not(:empty) { display: block; margin-top: 2px; }
.pii-name { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.pii-name:hover { color: var(--accent); text-decoration: underline; }
.pii-link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.pii-link:hover { color: var(--accent); }
.pii-bad, .pii-link.pii-bad { color: var(--red); }
.pii-tag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); letter-spacing: 0.04em; }
.pii-dialog { width: min(720px, calc(100vw - 24px)); }
.pii-login-dialog { width: min(420px, calc(100vw - 24px)); }
.pii-login-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.pii-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.pii-form-grid .wide { grid-column: 1 / -1; }
.pii-form-grid label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.pii-form-grid input, .pii-form-grid textarea { width: 100%; margin: 0; padding: 7px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 13px; }
.pii-form-grid textarea { min-height: 64px; resize: vertical; }
.pii-form-grid input[readonly], .pii-form-grid textarea[readonly] { background: transparent; border-color: transparent; padding-left: 0; resize: none; }
@media (max-width: 560px) { .pii-form-grid { grid-template-columns: 1fr; } }
.pii-files { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.pii-files-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.pii-files-head select, .pii-files-head input { width: auto; margin: 0; }
.pii-files ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.pii-files li { margin: 4px 0; }
.pii-dialog .dialog-actions { gap: 8px; align-items: center; flex-wrap: wrap; }
.pii-dialog .pii-page-link { margin-right: auto; }
.pii-note a, .pii-page-link:hover { color: var(--accent); }