/* Recent fills feed, under the live registry board. Same sky palette:
   every color comes from the custom properties live.css already uses, so the
   dark theme keeps working without a duplicate override block here. */
.trade-section{max-width:1180px;margin:0 auto;padding:0 24px 120px}
.trade-section .eyebrow{margin-bottom:14px}
.trade-section h2{margin:0 0 10px}
.tf-wrap{display:flex;flex-direction:column;gap:10px}
.tf-row{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr .9fr;gap:16px;align-items:center;
  padding:16px 20px;border:1px solid var(--line);border-radius:18px;background:var(--panel);
  box-shadow:0 6px 24px rgba(28,92,143,.05)}
.tf-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.tf-label{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tf-cell strong{font-size:13px;font-weight:600;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tf-cost{color:var(--positive)}
.tf-token a,.tf-meta a{font-size:12px;color:var(--blue);text-decoration:none;white-space:nowrap}
.tf-token a:hover,.tf-meta a:hover{text-decoration:underline}
.tf-meta{align-items:flex-end;text-align:right}
.tf-when{font-size:11px;color:var(--muted)}
.tf-status{margin-top:16px;padding:16px 18px;border-radius:18px;font-size:12.5px;line-height:1.65;
  background:rgba(43,143,230,.06);border:1px solid rgba(43,143,230,.16);color:var(--muted)}

/* Narrow viewports: the five columns of a fill become five stacked rows,
   because a squeezed sideways grid is unreadable on a phone. */
@media(max-width:620px){
  .tf-row{grid-template-columns:1fr;gap:10px;padding:14px 16px}
  .tf-meta{align-items:flex-start;text-align:left}
}