.radar-demo { background: #fff; color: #1b252b; border: 1px solid #c4ccce; border-radius: 6px; overflow: hidden; }
.radar-demo[hidden], .radar-demo-empty[hidden] { display: none; }
.radar-demo-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; }
.radar-demo-heading p { margin: 0 0 6px; font-size: .75rem; color: #54636b; }
.radar-demo-heading h4 { margin: 0; font-size: 1.375rem; }
.radar-demo-heading > span { font-size: .75rem; color: #54636b; }
.radar-demo-filters { display: grid; grid-template-columns: 1.5fr 1fr 1fr 44px; align-items: end; gap: 16px; padding: 24px 28px; border-block: 1px solid #d6dfe1; background: #f6f8f9; }
.radar-demo-filters label { display: grid; gap: 6px; color: #54636b; font-size: .75rem; min-width: 0; }
.radar-demo-filters input, .radar-demo-filters select { width: 100%; min-width: 0; min-height: 44px; color: #1b252b; background: #fff; border: 1px solid #82969d; border-radius: 4px; font-size: .875rem; }
.radar-demo .icon-button { background: #fff; color: #176b7b; border-color: #82969d; min-width: 44px; height: 44px; }
.radar-demo-sort-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 44px 1fr 44px; align-items: end; gap: 12px; }
.radar-demo-count { margin: 0; padding: 18px 28px; font-size: .8125rem; color: #54636b; min-height: 56px; }
.radar-demo-scroll { max-height: 510px; min-height: 180px; overflow: auto; }
.radar-demo table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .875rem; }
.radar-demo th { background: #f0f4f5; position: sticky; top: 0; z-index: 1; }
.radar-demo th, .radar-demo td { border-bottom: 1px solid #d6dfe1; padding: 10px 20px; text-align: right; color: #1b252b; }
.radar-demo th:first-child, .radar-demo td:first-child { text-align: left; width: 48%; }
.radar-demo th button { display: inline-flex; align-items: center; gap: 8px; justify-content: inherit; background: transparent; border: 0; padding: 0; min-height: 44px; color: #40555e; font-size: .75rem; font-weight: 550; }
.radar-demo th button:hover { color: #176b7b; }
.radar-demo th span { white-space: nowrap; }
.radar-demo td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.radar-demo .radar-game-link { display: flex; align-items: center; gap: 12px; min-height: 54px; color: #1b252b; }
.radar-game-link:hover span { text-decoration: underline; }
.radar-game-image { width: 42px; height: 42px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #e9eff0; }
.radar-game-link > span { max-width: 340px; line-height: 1.4; }
.radar-game-link small { display: block; color: #627078; font-size: .6875rem; margin-top: 4px; }
.radar-demo td[data-growth="positive"] { color: #176b7b; }
.radar-demo td[data-growth="negative"] { color: #a63c46; }
.radar-demo-empty { text-align: center; padding: 36px 24px; }
.radar-demo-empty p { color: #54636b; font-size: .875rem; }
.radar-demo-empty button { background: #fff; color: #176b7b; border-color: #82969d; min-height: 44px; }
@media (max-width: 700px) {
    .radar-demo-heading { padding: 20px 16px; flex-wrap: wrap; gap: 10px; }
    .radar-demo-heading h4 { font-size: 1.125rem; }
    .radar-demo-filters { padding: 18px 16px; grid-template-columns: 1fr 1fr 44px; gap: 14px 10px; }
    .radar-demo-search { grid-column: 1 / -1; }
    .radar-demo-sort-fields { grid-template-columns: 1fr 44px; gap: 12px 10px; }
    .radar-demo-count { padding-inline: 16px; }
    .radar-demo table { min-width: 540px; font-size: .8125rem; }
    .radar-demo th, .radar-demo td { padding-inline: 12px; }
    .radar-demo th:first-child, .radar-demo td:first-child { width: 42%; }
    .radar-game-link > span { max-width: 160px; }
}