/* TraPay homepage live-rates section. Design-system: brand blue + amber accent, tokens only. */
.tr-rates{
  --brand:var(--colors-primary-DEFAULT);--brand-50:var(--colors-primary-50);
  --accent:var(--colors-semantic-warning-base);--green:var(--colors-semantic-success-base);
  --red:var(--colors-semantic-error-base);--ink:var(--colors-surface-foreground);--muted:var(--colors-neutral-500);
  background:#fff}
.dark .tr-rates{background:#0b1120}

.tr-rates__eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;border-radius:9999px;
  background:var(--brand-50);color:var(--brand)}
.dark .tr-rates__eyebrow{background:color-mix(in srgb,var(--brand) 22%,transparent);color:#cfe0f7}
.tr-rates__dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);animation:tr-pulse 1.8s infinite}
@keyframes tr-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tr-rates__title{color:var(--ink);line-height:1.5}
.dark .tr-rates__title{color:#f8fafc}
.tr-rates__lead{color:var(--muted)}
.dark .tr-rates__lead{color:rgba(248,250,252,.6)}

.tr-rates__card{border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:24px;overflow:hidden;
  box-shadow:0 24px 50px -28px color-mix(in srgb,var(--brand) 22%,transparent);background:#fff}
.dark .tr-rates__card{background:#0f1729;border-color:rgba(255,255,255,.08);box-shadow:0 24px 50px -28px rgba(0,0,0,.6)}

.tr-row{display:grid;grid-template-columns:1.6fr 1fr 1fr .9fr;align-items:center;gap:12px;
  padding:16px 24px;border-top:1px solid color-mix(in srgb,var(--ink) 6%,transparent);transition:background .2s}
.dark .tr-row{border-top-color:rgba(255,255,255,.06)}
.tr-row:first-child{border-top:none}
.tr-row:hover{background:var(--brand-50)}
.dark .tr-row:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.tr-row--head{background:color-mix(in srgb,var(--brand) 4%,white);font-size:.8125rem;font-weight:600;color:var(--muted)}
.dark .tr-row--head{background:rgba(255,255,255,.03);color:rgba(248,250,252,.5)}
.tr-row--head:hover{background:color-mix(in srgb,var(--brand) 4%,white)}
.dark .tr-row--head:hover{background:rgba(255,255,255,.03)}

.tr-coin{display:flex;align-items:center;gap:12px}
.tr-coin__ic{width:38px;height:38px;border-radius:11px;background:var(--brand-50);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dark .tr-coin__ic{background:rgba(255,255,255,.06)}
.tr-coin__ic img{width:26px;height:26px;border-radius:50%}
.tr-coin__name{color:var(--ink)}
.dark .tr-coin__name{color:#f8fafc}
.tr-coin__code{color:var(--muted)}

.tr-price{color:var(--ink)}
.dark .tr-price{color:#f1f5fb}
.tr-price[data-loading]{color:transparent;position:relative;min-width:110px;border-radius:6px;
  background:linear-gradient(90deg,#eef2f8 25%,#e2e8f0 50%,#eef2f8 75%);background-size:200% 100%;animation:tr-shimmer 1.3s ease-in-out infinite}
.dark .tr-price[data-loading]{background:linear-gradient(90deg,#1a2438 25%,#26324c 50%,#1a2438 75%);background-size:200% 100%}
@keyframes tr-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.tr-chip{display:inline-flex;align-items:center;gap:3px;font-size:.8125rem;font-weight:600;padding:.15rem .5rem;border-radius:9999px;direction:ltr;font-variant-numeric:tabular-nums}
.tr-chip.is-up{color:var(--green);background:color-mix(in srgb,var(--green) 12%,white)}
.tr-chip.is-down{color:var(--red);background:color-mix(in srgb,var(--red) 12%,white)}
.dark .tr-chip.is-up{background:color-mix(in srgb,var(--green) 18%,transparent)}
.dark .tr-chip.is-down{background:color-mix(in srgb,var(--red) 18%,transparent)}

.tr-buy{display:inline-flex;align-items:center;justify-content:center;width:130px;max-width:100%;font-size:.8125rem;
  font-weight:600;color:var(--brand);background:var(--brand-50);border-radius:10px;padding:.5rem .75rem;text-decoration:none;
  white-space:nowrap;transition:background .25s,color .25s;min-height:38px;line-height:1.6}
.dark .tr-buy{background:color-mix(in srgb,var(--brand) 22%,transparent);color:#cfe0f7}
.tr-row:hover .tr-buy{background:var(--brand);color:#fff}
.tr-buy:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px}

.tr-all{display:inline-flex;align-items:center;gap:.4rem;color:var(--brand);text-decoration:none}
.dark .tr-all{color:#cfe0f7}
.tr-all:hover{gap:.6rem}

@media (max-width:640px){
  .tr-row{grid-template-columns:1.5fr 1fr .9fr;gap:8px;padding:14px 16px}
  .tr-col-change{display:none}
  .tr-buy{width:100%;padding:.5rem .5rem;font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){.tr-rates__dot,.tr-price[data-loading]{animation:none}}