.app {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#infoBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.info-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.info-stat { display: flex; align-items: baseline; gap: 5px; }

.info-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .1px;
}

.info-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}

.jump-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  padding: 6px 11px;
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}

.jump-btn:hover { border-color: rgba(122,162,255,.35); color: var(--accent); }
.jump-btn:focus-visible { outline: 2px solid rgba(122,162,255,.45); outline-offset: 2px; }

#rewardsBlock {
  height: var(--list-h);
  overflow-y: scroll;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

#rewardsBlock::-webkit-scrollbar { display: none; }

.rewards-inner {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

.block {
  height: var(--block-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: border-color .3s, background .3s, box-shadow .3s;
  flex-shrink: 0;
  overflow: hidden;
}

.block[data-role="past"]   { opacity: .5; }
.block[data-role="future"] { opacity: .7; }

.block[data-role="active"] {
  border-color: rgba(122,162,255,.28);
  background: rgba(122,162,255,.05);
  box-shadow: 0 0 0 1px rgba(122,162,255,.08) inset;
  opacity: 1;
}

.block[data-role="active"][data-status="confirmed"] {
  border-color: rgba(120,255,170,.28);
  background: rgba(120,255,170,.05);
  box-shadow: 0 0 0 1px rgba(120,255,170,.08) inset;
}

.b-user     { flex: 0 0 auto; min-width: 112px; max-width: 140px; }
.b-username { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-queue    { font-size: 10.5px; color: var(--muted-2); font-family: var(--font-mono); margin-top: 2px; }

.b-rewards       { flex: 1 1 auto; min-width: 0; }
.b-rewards-val   { font-size: 12px; font-weight: 500; font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.b-rewards-label { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

.b-status { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.b-txid   { flex: 0 0 auto; max-width: 110px; min-width: 0; text-align: right; }
.b-txid a {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.b-txid a:hover { color: var(--accent); }
.b-txid-placeholder { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); opacity: .4; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font-ui);
  text-transform: lowercase;
  letter-spacing: .2px;
  white-space: nowrap;
  color: var(--muted);
}

.badge[data-status="processing"] { border-color: rgba(122,162,255,.35); color: var(--accent); }
.badge[data-status="pending"]    { border-color: var(--border-soft);    color: var(--muted); }
.badge[data-status="confirming"] { border-color: rgba(255,214,102,.35); color: var(--amber); }
.badge[data-status="confirmed"]  { border-color: rgba(120,255,170,.30); color: var(--green); }
.badge[data-status="canceled"]   { border-color: var(--border-soft);    color: var(--muted-2); opacity: .6; }
.badge[data-status="rejected"]   { border-color: rgba(255,110,110,.35); color: var(--red); }

.b-amount { font-size: 11px; font-weight: 500; font-family: var(--font-mono); color: var(--muted); }

.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(122,162,255,.5);
  animation: pulse-anim 1.4s infinite;
  vertical-align: middle;
  margin-right: 3px;
}

@keyframes pulse-anim {
  0%   { box-shadow: 0 0 0 0 rgba(122,162,255,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(122,162,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(122,162,255,0); }
}