.hl { background: var(--amber); color: #14100a; padding: 0 .12em; border-radius: 8px }
.row2 { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin-bottom: 18px }
.delta.up { color: var(--green) } .delta.dn { color: #ff6b6b } .delta { font: 700 12px var(--f-mono) }
.share { display: inline-block; width: 90px; height: 6px; border-radius: 99px; background: #151b2c; vertical-align: middle; margin-left: 10px; overflow: hidden } .share i { display: block; height: 100%; background: var(--chalk); opacity: .55 }
.fl { color: var(--purple); font: 700 11px var(--f-mono) }
.h2h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--glass) }
@media (max-width: 760px) { .h2h { grid-template-columns: minmax(0, 1fr) } }
.h2h .side { padding: 22px; display: grid; gap: 4px; align-content: start } .h2h .side h3 { font-size: 40px } .h2h .mid { padding: 22px 16px; border-inline: 1px solid var(--line); display: grid; gap: 2px }
@media (max-width: 760px) { .h2h .mid { border-inline: 0; border-block: 1px solid var(--line) } }
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums } .cmp b { font: 900 24px var(--f-display) } .cmp b:first-child { text-align: right } .cmp span { font: 700 11px var(--f-mono); letter-spacing: 1.1px; color: var(--dim); text-transform: uppercase; text-align: center }
.cmp .win { color: var(--amber) }
svg.chart { width: 100%; height: auto; display: block } svg.chart text { fill: var(--dim); font: 600 11px var(--f-mono) }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 14px } .legend i { display: inline-block; width: 22px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 8px }
.hist li { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); list-style: none } .hist { padding: 0; margin: 0 } .hist .y { font: 900 22px var(--f-display); color: var(--amber) }