.fx-hero { display:flex; flex-direction:column; align-items:center; gap:var(--s-4); padding:var(--s-7) 0; }
.fx-pair { display:flex; align-items:center; gap:var(--s-3); color:var(--ink-2); font-size:var(--fs-sub); flex-wrap:wrap; justify-content:center; }
.fx-currency-token { display:grid; place-items:center; width:var(--s-8); height:var(--s-8); border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-text); font-size:var(--fs-title-3); font-weight:var(--fw-bold); }
.fx-hero-rate { border:0; background:transparent; padding:0; display:flex; align-items:baseline; flex-wrap:wrap; justify-content:center; gap:var(--s-2); cursor:pointer; border-radius:var(--r-md); }
.fx-hero-base { color:var(--ink-2); font-size:var(--fs-title-2); font-weight:var(--fw-medium); }
.fx-hero-number { font-size:var(--fs-hero); line-height:1.05; font-weight:var(--fw-bold); letter-spacing:var(--track-hero); }
.fx-hero-symbol { font-size:.6em; color:var(--ink-2); margin-right:var(--s-1); }
.fx-hero-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3); color:var(--ink-2); font-size:var(--fs-sub); }
.fx-positive { color:var(--pos); }
.fx-negative { color:var(--neg); }
.fx-chart-content { display:flex; flex-direction:column; gap:var(--s-6); min-width:0; }
.fx-chart-content > .segmented { max-width:480px; align-self:center; width:100%; }
.fx-chart-card,.fx-chart-card .card__body { min-width:0; }
.fx-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-3); }
.fx-stats .stat-tile { min-width:0; }
.fx-stats .stat-tile__value { font-size:var(--fs-title-1); }
.fx-assessment { display:flex; align-items:center; gap:var(--s-3); padding:0 var(--s-2); font-size:var(--fs-sub); color:var(--ink-2); }
.fx-assessment-dot { width:var(--s-2); height:var(--s-2); border-radius:var(--r-pill); background:var(--accent); flex-shrink:0; }
.fx-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6); }
.fx-grid > * { min-width:0; }
.fx-note { color:var(--ink-2); font-size:var(--fs-sub); line-height:1.65; }
.fx-converter,.fx-performance,.fx-source { display:flex; flex-direction:column; gap:var(--s-4); }
.fx-converter .input { font-size:var(--fs-title-1); height:var(--s-9); font-variant-numeric:tabular-nums; }
.fx-converter-result { font-size:var(--fs-display); line-height:1.2; font-weight:var(--fw-bold); letter-spacing:var(--track-title); overflow-wrap:anywhere; }
.fx-performance-value { font-size:var(--fs-title-1); letter-spacing:var(--track-title); line-height:1.3; overflow-wrap:anywhere; }
.fx-details { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3); font-size:var(--fs-sub); }
.fx-details dt { color:var(--ink-2); }
.fx-details dd { font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; }
.fx-source-warning { padding:var(--s-4); background:var(--warn-soft); color:var(--warn); border-radius:var(--r-md); font-size:var(--fs-sub); line-height:1.65; }
@media (max-width:767px) {
  .fx-hero { padding:var(--s-5) 0; }
  .fx-hero-base { font-size:var(--fs-title-3); }
  .fx-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2); }
  .fx-stats .stat-tile { padding:var(--s-4); }
  .fx-grid { grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
  .fx-source .fx-details { grid-template-columns:1fr; gap:var(--s-2); }
  .fx-source .fx-details dd { text-align:left; margin-bottom:var(--s-2); }
}