/*! Stake-Only | (c) 2026 Kcalb Ltd. All rights reserved. | Powered by KcalbApp | https://kcalbapp.com */
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 22px; }
.metric-card { position: relative; min-width: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-10); background: var(--color-row-hover-bg); overflow: visible; }
.metric-label { display: block; color: var(--color-text-muted); font-size: var(--font-size-10); font-weight: var(--font-weight-850); letter-spacing: .04em; text-transform: uppercase; width: 100%; min-width: 0; }
.metric-label-row { display: grid; grid-template-columns: minmax(0,1fr) 16px; align-items: center; column-gap: 6px; width: 100%; min-width: 0; max-width: 100%; line-height: var(--line-height-1-18); }
.metric-label-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-label-row .metric-tip { justify-self: end; flex: 0 0 auto; margin-left: 0; }
.metric-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-family: var(--font-code); color: var(--color-text); font-size: var(--amount-size); font-weight: var(--amount-weight); overflow-wrap: anywhere; }
.metric-value.apy-one { gap: 2px; flex-wrap: nowrap; }
.apy-one .apy-star { align-self: flex-start; font-size: .6em; line-height: var(--line-height-1); color: var(--color-text-muted); }
.metric-tip.apy-cond { display: inline-block; width: auto; height: auto; margin-top: 5px; font-family: var(--font-body); font-size: var(--font-size-10); font-weight: var(--font-weight-700); line-height: var(--line-height-1-18); text-align: left; white-space: normal; }
.metric-tip { position: relative; z-index: 1000; isolation: isolate; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; color: var(--color-text-muted); background: transparent; border: 0; appearance: none; cursor: pointer; }
.metric-tip svg { display: block; width: 14px; height: 14px; }
.metric-tip:hover { color: var(--color-purple-soft); }
.metric-main { font-family: var(--font-code); font-size: var(--amount-size); font-weight: var(--font-weight-850); color: var(--color-text); white-space: nowrap; }
.metric-value--asset-stack { display: inline-grid; justify-items: start; align-items: start; row-gap: 4px; width: 100%; max-width: 100%; min-width: 0; margin-top: 6px; }
.metric-stack-row { min-width: 0; }
.metric-stack-row--top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; width: 100%; min-width: 0; }
.metric-stack-row--usd { display: grid; grid-template-columns: max-content; align-items: baseline; width: max-content; max-width: 100%; white-space: nowrap; }
.metric-asset-line { display: inline-flex; align-items: baseline; min-width: 0; white-space: nowrap; font-family: var(--font-code); line-height: var(--line-height-1); }
.metric-asset-line--cro .metric-number-main, .metric-asset-line--cro .asset-number-decimal, .metric-asset-line--cro .table-symbol { color: var(--color-text); }
.metric-asset-line--usd, .metric-asset-line--usd .metric-number-main { color: var(--color-text-faint); font-size: var(--amount-small-size); } .metric-asset-line--usd .table-symbol { color: var(--color-text-faint); font-size: var(--amount-decimal-size); }
.metric-number-main { font-family: var(--font-code); color: var(--color-text); font-size: var(--amount-size); font-weight: var(--font-weight-850); letter-spacing: .005em; }
.metric-tooltip-popover { position: fixed; z-index: 9999; opacity: 0; transition: opacity 180ms ease; display: block; white-space: pre-line; word-wrap: break-word; word-break: break-word; text-align: left; font-size: var(--font-size-10); font-weight: var(--font-weight-700); line-height: var(--line-height-1-35); padding: 6px 9px; width: fit-content; max-width: 160px; min-width: 60px; pointer-events: none; background: linear-gradient(135deg,var(--color-border-purple) 0%,var(--background-overlay-strong) 100%),var(--background-overlay-strong); border: 1px solid var(--color-purple-border-medium2); border-radius: var(--radius-8); box-shadow: var(--shadow-card-strong) 0 20px 55px,var(--color-row-bg-soft) 0 1px 0 inset; color: var(--color-text-muted); }
.metric-tooltip-popover[data-show="true"] { opacity: 1; }
@media only screen and (max-width:780px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
}
@media only screen and (max-width:560px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 420px) { .metric-label-row > span { white-space: normal; text-overflow: clip; text-wrap: balance; } }
@media (max-width: 360px) { .metric-label-row > span { letter-spacing: 0; font-size: 9.5px; } }