.qfl-an__cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.qfl-an__card {
  min-width: 120px;
  padding: 12px 16px;
  border: 1px solid var(--border, #e1e3e5);
  border-radius: 8px;
  background: var(--card);
}
.qfl-an__card-num { font-size: 26px; font-weight: 600; }
.qfl-an__card-label { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; }
.qfl-an__card-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.qfl-an__picker { margin: 12px 0; }

.qfl-an__chart {
  margin-bottom: 20px;
  max-width: 620px;
}
.qfl-an__chart h3 { font-size: 13px; margin: 0 0 6px; }

.qfl-an__svg {
  width: 100%;
  height: 120px;
  background: var(--bg, #f6f6f7);
  border-radius: 6px;
}
.qfl-an__bar { fill: var(--accent, #2c6ecb); }
.qfl-an__bar:hover { fill: #1a4f9c; }
.qfl-an__axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.qfl-an__hbars { display: flex; flex-direction: column; gap: 4px; }
.qfl-an__hbar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.qfl-an__hbar-label { flex: 0 0 140px; font-family: ui-monospace, monospace; text-align: right; }
.qfl-an__hbar-track { flex: 1; height: 14px; background: var(--bg, #f6f6f7); border-radius: 7px; overflow: hidden; }
.qfl-an__hbar-fill { display: block; height: 100%; background: var(--accent, #2c6ecb); }
.qfl-an__hbar-val { flex: 0 0 70px; }