.utility-pill .points-button { display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 24px; }
.points-page { width: 100%; max-width: 820px; margin: 0 auto; padding: 36px 20px 110px; color: var(--swap-text); --points-muted: #61748e; --points-blue: #0081ff; }
.viewing-points .site-header { position: sticky; top: 24px; z-index: 10; }
.points-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 16px; }
.points-card, .points-season { background: var(--swap-surface); border-radius: 24px; box-shadow: 0 1px 2px #10203822, inset 0 0 0 1px #8ca4be0a; }
.points-card { padding: 14px; min-width: 0; }
.points-leaderboard { min-height: 535px; }
.points-card h1, .points-volume h2 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 4px; font-size: 22px; line-height: 31px; font-weight: 900; }
.points-card h1 { margin-bottom: 12px; }
.points-card h1 svg, .points-volume h2 svg { width: 20px; height: 20px; color: var(--swap-muted); }
.points-table-wrap { padding: 8px; border-radius: 14px; background: var(--swap-white); }
.points-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 20px; text-align: left; }
.points-table tr { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) 1fr 1fr; gap: 12px; padding: 0 12px; align-items: center; }
.points-table th { padding: 0; color: var(--points-muted); text-transform: uppercase; font-size: 11px; line-height: 16px; font-weight: 700; }
.points-table td { padding: 14px 0; font-weight: 800; white-space: nowrap; min-width: 0; }
.points-table td:nth-child(2) { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.points-table td[colspan] { grid-column: 1 / -1; white-space: normal; }
.points-table tbody tr:nth-child(1) td:first-child { color: #a88700; }
.points-table tbody tr:nth-child(2) td:first-child { color: #636a74; }
.points-table tbody tr:nth-child(3) td:first-child { color: #a5652d; }
.points-sidebar { display: grid; gap: 16px; min-width: 0; }
.points-season { overflow: hidden; }
.points-season-banner { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; padding: 20px; color: #fff; background: #0081ff; }
.points-season-banner::before, .points-season-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.points-season-banner::before { background: url('assets/points-season-noise.webp') 0 0 / 64px 64px; opacity: .24; mix-blend-mode: soft-light; }
.points-season-banner::after { border-radius: inherit; border: 1px solid #fff; background: linear-gradient(136.65deg, transparent 64.348%, #ffffff4d 64.348%, #ffffff4d 86.679%, transparent 86.679%); mix-blend-mode: soft-light; }
.points-season-cow { position: absolute; right: 11.5px; bottom: 16px; width: 168px; height: 141px; pointer-events: none; }
.points-season-content { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 160px; }
.points-season-tag { align-self: flex-start; padding: 2px 6px; border: 1px solid #ffffff1a; border-radius: 99px; background: #ffffff26; font-size: 14px; line-height: 20px; font-weight: 800; }
.points-connect { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.points-connect p { margin: 0; text-align: center; font-size: 16px; line-height: 20px; font-weight: 800; }
#points-connect-wallet { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; border: 1px solid #ffffff66; border-radius: 99px; background: #fff; color: var(--points-blue); font-size: 16px; font-weight: 800; }
#points-connect-wallet svg { width: 18px; height: 18px; }
.points-season-description { margin: 0; padding: 8px 16px 12px; font-size: 14px; font-weight: 700; line-height: 20px; }
.points-search { display: flex; flex-direction: column; gap: 12px; }
.points-search-field { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--swap-border); border-radius: 18px; color: var(--swap-muted); }
.points-search-field:focus-within { border-color: var(--points-blue); }
.points-search-field input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--swap-text); font: inherit; font-size: 14px; font-weight: 700; }
.points-search-field input::placeholder { color: var(--swap-muted); opacity: 1; }
.points-search-submit { padding: 0; background: transparent; color: var(--points-blue); }
.points-search-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; height: 156px; padding: 12px; border-radius: 14px; background: var(--swap-white); text-align: center; }
.points-search-empty img { width: 56px; height: 56px; margin-bottom: 4px; }
.points-search-empty h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; }
.points-search-empty p { margin: 0; color: var(--points-muted); font-size: 14px; line-height: 20px; font-weight: 700; }
.points-search-result { min-height: 156px; padding: 14px; border-radius: 14px; background: var(--swap-white); font-size: 14px; }
.points-result-address { overflow-wrap: anywhere; margin: 0 0 12px; font-weight: 700; }
.points-search-result dl { display: grid; gap: 12px; padding-top: 12px; margin: 0; border-top: 1px dashed var(--swap-border); }
.points-search-result dl div { display: flex; justify-content: space-between; gap: 8px; }
.points-search-result dt { color: var(--points-muted); font-weight: 700; }
.points-search-result dd { margin: 0; font-weight: 800; }
.points-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.points-stats > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 16px; min-height: 78px; border: 1px solid #8ca4be0a; border-radius: 18px; background: var(--swap-surface); }
.points-stats h2 { margin: 0; color: var(--points-muted); font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: -.28px; }
.points-stats strong { font-size: 24px; font-weight: 800; line-height: 32px; }
.points-volume { margin-top: 16px; }
.points-volume-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.points-ranges { display: flex; padding: 3px; border-radius: 99px; background: #e1e8f1; }
.points-ranges button { height: 26px; padding: 0 10px; border-radius: 99px; background: transparent; color: var(--swap-muted); font-size: 14px; font-weight: 700; letter-spacing: -.14px; }
.points-ranges button[aria-selected="true"] { background: var(--swap-white); color: var(--swap-text); box-shadow: 0 1px 2px #10203822; }
.points-ranges button:hover { color: var(--swap-text); }
.points-page button:focus-visible, #points-volume-chart:focus-visible { outline: 2px solid var(--points-blue); outline-offset: 2px; }
.points-chart { position: relative; height: 200px; }
#points-volume-chart { display: block; width: 100%; height: 200px; overflow: visible; border-radius: 8px; }
.points-chart-tooltip { position: absolute; z-index: 1; padding: 8px 12px; min-width: 86px; border-radius: 8px; background: var(--swap-text); color: var(--swap-white); box-shadow: 0 8px 16px #10203833; pointer-events: none; }
.points-chart-tooltip strong, .points-chart-tooltip span { display: block; font-size: 14px; font-weight: 800; }
.points-chart-tooltip span { font-size: 12px; font-weight: 700; opacity: .6; }
.points-chart-empty { position: absolute; inset: 50% 0 auto; margin: 0; color: var(--points-muted); text-align: center; font-size: 14px; }
.points-status { margin: 0; color: var(--points-muted); font-size: 12px; font-weight: 700; line-height: 18px; }
.points-data-status { margin-top: 10px; padding: 8px 14px; border-radius: 12px; background: var(--swap-surface); }
body.dark .points-page { --points-muted: #a3b5ce; }
body.dark .points-ranges { background: #2a3b54; }
body.dark .points-table tbody tr:nth-child(1) td:first-child { color: #e0bd50; }
body.dark .points-table tbody tr:nth-child(2) td:first-child { color: #b5c4d7; }
body.dark .points-table tbody tr:nth-child(3) td:first-child { color: #df9c64; }
@media (max-width: 1000px) { .points-top { grid-template-columns: minmax(0, 1fr); } .points-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 640px) { .points-page { padding: 28px 16px 40px; } .points-sidebar { grid-template-columns: minmax(0, 1fr); } .points-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .points-table tr { grid-template-columns: 30px minmax(0, 1.3fr) 1fr 1fr; gap: 8px; padding: 0 4px; } .points-table { font-size: 12px; } .points-card h1 { font-size: 20px; } .viewing-points .site-header { position: relative; top: auto; } }
body.dark .points-page { --points-muted: #cbd5e1; --points-blue: #2c7fff; }
body.dark .points-ranges { background: #334155; }
body.dark .points-ranges button[aria-selected="true"] { background: #1e293b; }
body.dark .points-search-field { background: #141e33; }
body.dark .points-season-banner { background-color: #2c7fff; }
body.dark .points-season-tag { background-color: #26a4ff; }