/* ============================================================
   * Exchange Rate Card — compact single-pair card
   * ============================================================ */

  .crtoday-rate-card {
    --crtoday-rate-card-gap: var(--crtoday-space-12, 0.75rem);
  }

  /* — Content area (pair + body + bidask) — */

  .crtoday-rate-card-content {
    position: relative;
    z-index: 1;
    padding: var(--crtoday-space-16, 1rem) var(--crtoday-space-20, 1.25rem) var(--crtoday-space-8, 0.5rem);
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-content {
    padding: var(--crtoday-space-10, 0.625rem) var(--crtoday-space-14, 0.875rem) var(--crtoday-space-6, 0.375rem);
  }

  /* ── Pair header row (flags + label) — standalone inside content ── */

  .crtoday-rate-card-pair {
    display: flex;
    align-items: center;
    gap: var(--crtoday-space-10, 0.625rem);
    margin-block-end: var(--crtoday-space-8, 0.5rem);
  }

  .crtoday-rate-card-flags {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .crtoday-rate-card-flags img {
    width: var(--crtoday-size-flag-lg, 2rem);
    height: var(--crtoday-size-flag-lg, 2rem);
    border-radius: 50%;
    object-fit: cover;
    border: 0.0938rem solid var(--crtoday-flag-border, rgba(255, 255, 255, 0.55));
    box-shadow: var(--crtoday-flag-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-flags img {
    width: var(--crtoday-size-flag-md, 1.5rem);
    height: var(--crtoday-size-flag-md, 1.5rem);
  }

  .crtoday-rate-card-flags img + img {
    margin-inline-start: -8px;
  }

  .crtoday-rate-card-label {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--crtoday-text-1, #0f172a);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-label {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .crtoday-rate-card-arrow {
    color: var(--crtoday-text-3, #94a3b8);
    font-size: 0.8125rem;
    margin-inline: 0.1875rem;
  }

  /* ── Body: rate value + change ── */

  .crtoday-rate-card-body {
    display: flex;
    align-items: baseline;
    gap: var(--crtoday-space-8, 0.5rem);
  }

  .crtoday-rate-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--crtoday-text-1, #0f172a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-value {
    font-size: 1.25rem;
  }

  .crtoday-rate-card-change {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    line-height: 1.4;
    white-space: nowrap;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-change {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.25rem;
  }

  .crtoday-rate-card-change.crtoday-up {
    color: var(--crtoday-up, #059669);
    background: var(--crtoday-up-bg, rgba(5, 150, 105, 0.08));
  }

  .crtoday-rate-card-change.crtoday-down {
    color: var(--crtoday-down, #dc2626);
    background: var(--crtoday-down-bg, rgba(220, 38, 38, 0.08));
  }

  .crtoday-rate-card-change.crtoday-neutral {
    color: var(--crtoday-neutral, #94a3b8);
    background: var(--crtoday-neutral-bg, rgba(148, 163, 184, 0.08));
  }

  /* ── Bid / Ask primary layout ── */

  .crtoday-rate-card-bidask {
    display: flex;
    flex-direction: column;
    gap: var(--crtoday-space-6, 0.375rem);
  }

  .crtoday-rate-card-bidask-row {
    display: flex;
    align-items: baseline;
    gap: var(--crtoday-space-8, 0.5rem);
  }

  .crtoday-rate-card-bidask-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crtoday-text-3, #94a3b8);
    min-width: 2.25rem;
  }

  .crtoday-rate-card-bidask-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--crtoday-text-1, #0f172a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .crtoday-rate-card-bidask-row .crtoday-rate-card-change {
    flex-shrink: 0;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-bidask-label {
    font-size: 0.5625rem;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-bidask-value {
    font-size: 1rem;
  }

  /* ── No-flags modifier ── */

  .crtoday-rate-card.crtoday-no-flags .crtoday-rate-card-flags {
    display: none;
  }

  /* ── Day's Range bar ── */

  .crtoday-rate-card-range {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: var(--crtoday-space-4, 0.25rem) var(--crtoday-space-20, 1.25rem) var(--crtoday-space-8, 0.5rem);
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-range {
    padding: var(--crtoday-space-4, 0.25rem) var(--crtoday-space-14, 0.875rem) var(--crtoday-space-6, 0.375rem);
  }

  .crtoday-rate-card-range-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crtoday-text-3, #94a3b8);
    margin-block-end: var(--crtoday-space-4, 0.25rem);
  }

  .crtoday-rate-card-range-pct {
    margin-inline-start: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--crtoday-text-3, #94a3b8);
    margin-block-end: var(--crtoday-space-4, 0.25rem);
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-range-label,
  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-range-pct {
    font-size: 0.5625rem;
  }

  .crtoday-rate-card-range-bar-row {
    display: flex;
    align-items: center;
    gap: var(--crtoday-space-6, 0.375rem);
    width: 100%;
  }

  .crtoday-rate-card-range-low,
  .crtoday-rate-card-range-high {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--crtoday-text-2, #475569);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-range-low,
  .crtoday-rate-card.crtoday-compact .crtoday-rate-card-range-high {
    font-size: 0.6875rem;
  }

  .crtoday-rate-card-range-track {
    flex: 1;
    height: 4px;
    background: var(--crtoday-range-track, rgba(148, 163, 184, 0.18));
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
  }

  .crtoday-rate-card-range-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--crtoday-accent-color, #6366f1);
    transition: width 0.3s ease;
  }

  /* ============================================================
   * Sparkline chart
   * ============================================================ */

  .crtoday-chart-wrap {
    position: relative;
    z-index: 1;
    padding: 0;
    margin-block-end: var(--crtoday-space-4, 0.25rem);
  }

  .crtoday-chart-area {
    width: 100%;
    height: 60px;
    transition: opacity 0.2s ease;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-chart-area {
    height: 48px;
  }

  .crtoday-chart-area.crtoday-chart-loading {
    opacity: 0.4;
  }

  .crtoday-chart-area.crtoday-chart-empty {
    display: none;
  }

  /* SVG sparkline */

  .crtoday-sparkline {
    display: block;
    width: 100%;
    height: 100%;
  }

  .crtoday-sparkline-line {
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }

  .crtoday-sparkline-up .crtoday-sparkline-line {
    stroke: var(--crtoday-up, #059669);
  }

  .crtoday-sparkline-up .crtoday-sparkline-grad-start {
    stop-color: var(--crtoday-up, #059669);
    stop-opacity: 0.15;
  }

  .crtoday-sparkline-up .crtoday-sparkline-grad-end {
    stop-color: var(--crtoday-up, #059669);
    stop-opacity: 0;
  }

  .crtoday-sparkline-down .crtoday-sparkline-line {
    stroke: var(--crtoday-down, #dc2626);
  }

  .crtoday-sparkline-down .crtoday-sparkline-grad-start {
    stop-color: var(--crtoday-down, #dc2626);
    stop-opacity: 0.15;
  }

  .crtoday-sparkline-down .crtoday-sparkline-grad-end {
    stop-color: var(--crtoday-down, #dc2626);
    stop-opacity: 0;
  }

  /* Period tabs */

  .crtoday-chart-tabs {
    display: flex;
    gap: var(--crtoday-space-4, 0.25rem);
    margin-block-start: var(--crtoday-space-6, 0.375rem);
  }

  .crtoday-chart-tab {
    all: unset;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    padding: var(--crtoday-space-4, 0.25rem) var(--crtoday-space-8, 0.5rem);
    border-radius: var(--crtoday-space-4, 0.25rem);
    color: var(--crtoday-text-3, #94a3b8);
    transition: color 0.15s ease, background 0.15s ease;
  }

  .crtoday-chart-tab:focus-visible {
    outline: 2px solid var(--crtoday-accent-color, #6366f1);
    outline-offset: 2px;
  }

  .crtoday-chart-tab:hover {
    color: var(--crtoday-text-2, #475569);
    background: var(--crtoday-hover-bg, rgba(0, 0, 0, 0.04));
  }

  .crtoday-chart-tab.crtoday-chart-tab-active {
    color: var(--crtoday-accent-color, #6366f1);
    background: rgb(var(--crtoday-accent-rgb, 99 102 241) / 0.12);
    font-weight: 700;
  }

  .crtoday-rate-card.crtoday-compact .crtoday-chart-tab {
    font-size: 0.5625rem;
    padding: var(--crtoday-space-2, 0.125rem) var(--crtoday-space-6, 0.375rem);
  }