/* Mobile Leaderboard layout: compact award cards and full-width investor cards. */
@media (max-width: 760px) {
  html body #leaderboard-section.active {
    box-sizing: border-box !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 10px 10px !important;
    transform: none !important;
  }
  html body #leaderboard-section.active .leaderboard-page-heading {
    display: none !important;
  }
  html body #leaderboard-section.active .leaderboard-page-heading p {
    max-width: none !important;
    color: #9aaeba !important;
    font-size: 13px !important;
    line-height: 1.3;
  }
  html body #leaderboard-section.active .leaderboard-heading-art { display: none !important; }

  html body #leaderboard-section.active .leaderboard-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }
  html body #leaderboard-section.active .leaderboard-summary-grid > .leaderboard-top-cards { display: contents !important; }
  html body #leaderboard-section.active .leaderboard-summary-grid > #leaderboard-popular { grid-column: auto !important; grid-row: auto !important; }
  html body #leaderboard-section.active #leaderboard-card-gold,
  html body #leaderboard-section.active #leaderboard-card-silver,
  html body #leaderboard-section.active #leaderboard-card-bronze,
  html body #leaderboard-section.active #leaderboard-popular { grid-column: auto !important; grid-row: auto !important; }
  html body #leaderboard-section.active .leaderboard-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px !important;
    gap: 7px !important;
    border: 1px solid #344955 !important;
    border-radius: 0 !important;
    color: #dce5eb !important;
    background: #111c23 !important;
    box-shadow: none !important;
  }
  html body #leaderboard-section.active #leaderboard-card-gold { border-color: #89794d !important; }
  html body #leaderboard-section.active #leaderboard-card-silver { border-color: #687987 !important; }
  html body #leaderboard-section.active #leaderboard-card-bronze { border-color: #89664f !important; }
  html body #leaderboard-section.active #leaderboard-popular { border-color: #426b72 !important; }
  html body #leaderboard-section.active .leaderboard-award {
    min-height: 0 !important;
    gap: 7px !important;
  }
  html body #leaderboard-section.active .leaderboard-award-icon {
    flex-basis: 30px !important;
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #aebdc6 !important;
    background: #1b2a33 !important;
    font-size: 19px !important;
  }
  html body #leaderboard-section.active #leaderboard-card-gold .leaderboard-award-icon,
  html body #leaderboard-section.active #leaderboard-card-gold .leaderboard-tier { color: #c4a858 !important; }
  html body #leaderboard-section.active #leaderboard-card-silver .leaderboard-award-icon,
  html body #leaderboard-section.active #leaderboard-card-silver .leaderboard-tier { color: #b7c1c9 !important; }
  html body #leaderboard-section.active #leaderboard-card-bronze .leaderboard-award-icon,
  html body #leaderboard-section.active #leaderboard-card-bronze .leaderboard-tier { color: #c18b62 !important; }
  html body #leaderboard-section.active #leaderboard-popular .leaderboard-award-icon,
  html body #leaderboard-section.active .leaderboard-popular-tag { color: #75b9bd !important; }
  html body #leaderboard-section.active .leaderboard-award > div {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  html body #leaderboard-section.active .leaderboard-tier,
  html body #leaderboard-section.active .leaderboard-popular-tag {
    margin: 0 0 2px !important;
    font-size: 11px !important;
  }
  html body #leaderboard-section.active .leaderboard-tier { filter: saturate(.55); }
  html body #leaderboard-section.active .leaderboard-card-name,
  html body #leaderboard-section.active .leaderboard-popular-name {
    overflow: hidden;
    color: #e1e8ed !important;
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body #leaderboard-section.active .leaderboard-card-stats {
    grid-template-columns: .7fr 1fr .75fr !important;
    padding-top: 6px !important;
    border-top-color: #293b45 !important;
  }
  html body #leaderboard-section.active .leaderboard-card-stats > div {
    padding: 0 5px !important;
    border-right-color: #293b45 !important;
  }
  html body #leaderboard-section.active .leaderboard-card-stats > div:first-child { padding-left: 0 !important; }
  html body #leaderboard-section.active .leaderboard-card-stats > div:last-child { padding-right: 0 !important; border: 0 !important; }
  html body #leaderboard-section.active .leaderboard-card-stats span {
    margin-bottom: 2px !important;
    color: #92a5b0 !important;
    font-size: 9px !important;
  }
  html body #leaderboard-section.active .leaderboard-card-stats strong {
    overflow: hidden;
    color: #dce5eb !important;
    font-size: 11px !important;
    text-overflow: ellipsis;
  }
  html body #leaderboard-section.active .leaderboard-card-stats .leaderboard-card-return,
  html body #leaderboard-section.active .leaderboard-card-stats .leaderboard-popular-return {
    color: #66bd9d !important;
  }

  html body #leaderboard-section.active .leaderboard-table-card {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body #leaderboard-section.active .leaderboard-table-toolbar {
    display: block !important;
    margin: 0 0 9px !important;
  }
  html body #leaderboard-section.active .leaderboard-table-title { display: none !important; }
  html body #leaderboard-section.active .leaderboard-filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }
  html body #leaderboard-section.active .leaderboard-filters > * {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    gap: 4px !important;
    padding: 0 6px !important;
    border-color: #344955 !important;
    border-radius: 9px !important;
    color: #aebdc6 !important;
    background: #111c23 !important;
  }
  html body #leaderboard-section.active .leaderboard-search { grid-column: 1 / 2 !important; }
  html body #leaderboard-section.active .leaderboard-filter:nth-child(2) { grid-column: 2 / 3 !important; }
  html body #leaderboard-section.active .leaderboard-filter:nth-child(3) { grid-column: 3 / 4 !important; }
  html body #leaderboard-section.active .leaderboard-filter > span { font-size: 14px !important; }
  html body #leaderboard-section.active .leaderboard-search input,
  html body #leaderboard-section.active .leaderboard-filter select {
    color: #dce5eb !important;
    font-size: 10px !important;
  }
  html body #leaderboard-section.active .leaderboard-table {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body #leaderboard-section.active .leaderboard-table table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  html body #leaderboard-section.active .leaderboard-table thead { display: none !important; }
  html body #leaderboard-section.active .leaderboard-table tbody {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    background: transparent !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 34px auto auto !important;
    align-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid #2b414d !important;
    border-radius: 0 !important;
    background: #111c23 !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody tr:first-child,
  html body #leaderboard-section.active .leaderboard-table tbody tr:hover {
    background: #111c23 !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody td {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 5px !important;
    border: 0 !important;
    color: #dce5eb !important;
    background: transparent !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; padding-left: 0 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(2) { grid-area: 1 / 2 / 2 / 3 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(3) { grid-area: 1 / 3 / 2 / 4 !important; overflow: hidden; font-size: 12px !important; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(12) { grid-area: 1 / 4 / 2 / 5 !important; justify-content: flex-end !important; padding-right: 0 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(4) { grid-area: 2 / 1 / 3 / 2 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(5) { grid-area: 2 / 2 / 3 / 3 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(6) { grid-area: 2 / 3 / 3 / 4 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(11) { grid-area: 2 / 4 / 3 / 5 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(7) { grid-area: 3 / 1 / 4 / 2 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(8) { grid-area: 3 / 2 / 4 / 3 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(9) { grid-area: 3 / 3 / 4 / 4 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(10) { grid-area: 3 / 4 / 4 / 5 !important; }
  html body #leaderboard-section.active .leaderboard-table tbody td[colspan="12"] {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    padding: 16px 6px !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(4)::before,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(5)::before,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(6)::before,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(11)::before,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(7)::before,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(8)::before,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(9)::before,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(10)::before {
    flex: 0 0 auto;
    margin-right: 4px;
    color: #8499a5;
    font-size: 9px;
    font-weight: 500;
  }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(4)::before { content: "Score"; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(5)::before { content: "Return"; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(6)::before { content: "Months"; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(11)::before { content: "FI"; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(7)::before { content: "Very safe"; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(8)::before { content: "Safe"; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(9)::before { content: "Med."; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(10)::before { content: "High"; }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(7),
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(8),
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(9),
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(10) {
    border-top: 1px solid #293b45 !important;
    color: #b4c2ca !important;
    font-size: 10px !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(5) .leaderboard-pct,
  html body #leaderboard-section.active .leaderboard-table tbody td:nth-child(11) .leaderboard-pct {
    padding: 0 !important;
    color: #68bd9e !important;
    background: transparent !important;
  }
  html body #leaderboard-section.active .leaderboard-medal { width: 30px !important; height: 30px !important; color: #b5a064 !important; }
  html body #leaderboard-section.active .leaderboard-medal--2 { color: #9eabb4 !important; }
  html body #leaderboard-section.active .leaderboard-medal--3 { color: #b27e5a !important; }
  html body #leaderboard-section.active .leaderboard-rank-number { width: 28px !important; height: 28px !important; color: #c5d0d7 !important; background: #263640 !important; font-size: 11px !important; }
  html body #leaderboard-section.active .leaderboard-country { gap: 5px !important; min-width: 0 !important; }
  html body #leaderboard-section.active .leaderboard-country-flag { width: 18px !important; font-size: 14px !important; }
  html body #leaderboard-section.active .leaderboard-like { gap: 5px !important; }
  html body #leaderboard-section.active .leaderboard-like-btn {
    width: 28px !important;
    height: 28px !important;
    border-color: #527c80 !important;
    color: #83c6c3 !important;
    background: #1a3034 !important;
  }
  html body #leaderboard-section.active .leaderboard-like-count { color: #b8c7cd !important; font-size: 11px !important; }
  html body #leaderboard-section.active .leaderboard-pagination-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 8px !important;
  }
  html body #leaderboard-section.active #leaderboard-pagination-wrapper[style*="display: none"] { display: none !important; }
  html body #leaderboard-section.active .leaderboard-pagination-info { font-size: 11px !important; }
  html body #leaderboard-section.active .leaderboard-pagination-right { display: flex !important; gap: 5px !important; }
  html body #leaderboard-section.active .leaderboard-pagination-right .monthly-page-btn {
    min-width: 32px !important;
    min-height: 32px !important;
    border-color: #344955 !important;
    color: #aebdc6 !important;
  }
  html body #leaderboard-section.active .leaderboard-pagination-right .monthly-page-btn.active {
    border-color: #78999b !important;
    color: #b7d0cf !important;
    background: #1a3034 !important;
  }
}
/* Mobile investor cards follow the supplied leaderboard reference. */
@media (max-width: 760px) {
  html body #leaderboard-section.active .leaderboard-card-stats > div:nth-child(2) span,
  html body #leaderboard-section.active .leaderboard-card-stats > div:nth-child(3) span {
    font-size: 0 !important;
  }
  html body #leaderboard-section.active .leaderboard-card-stats > div:nth-child(2) span::after {
    content: "Return";
    color: #92a5b0;
    font-size: 9px;
  }
  html body #leaderboard-section.active .leaderboard-card-stats > div:nth-child(3) span::after {
    content: "Period";
    color: #92a5b0;
    font-size: 9px;
  }
  html body #leaderboard-section.active .leaderboard-table tbody tr {
    display: block !important;
    grid-template: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody tr > td:not(.leaderboard-mobile-card-cell) {
    display: none !important;
  }
  html body #leaderboard-section.active .leaderboard-table tbody td.leaderboard-mobile-card-cell {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body #leaderboard-section.active .leaderboard-mobile-investor-card {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 10px 8px;
    border: 1px solid #2b414d;
    background: #111c23;
    color: #dce5eb;
  }
  html body #leaderboard-section.active .leaderboard-mobile-identity {
    display: grid;
    grid-template-columns: 34px minmax(92px, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding-bottom: 6px;
  }
  html body #leaderboard-section.active .leaderboard-mobile-rank {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: visible;
  }
  html body #leaderboard-section.active .leaderboard-mobile-rank .leaderboard-medal {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
  }
  html body #leaderboard-section.active .leaderboard-mobile-rank .leaderboard-rank-number {
    width: 28px !important;
    height: 28px !important;
  }
  html body #leaderboard-section.active .leaderboard-mobile-country {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #aabac4;
    font-size: 11px;
    white-space: nowrap;
  }
  html body #leaderboard-section.active .leaderboard-mobile-country > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body #leaderboard-section.active .leaderboard-mobile-country > span:first-child {
    font-size: 16px;
  }
  html body #leaderboard-section.active .leaderboard-mobile-name {
    overflow: hidden;
    color: #e1e8ed;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body #leaderboard-section.active .leaderboard-mobile-investor-card .leaderboard-like {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  html body #leaderboard-section.active .leaderboard-mobile-investor-card .leaderboard-like-btn {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #83c6c3 !important;
    background: #1a3034 !important;
  }
  html body #leaderboard-section.active .leaderboard-mobile-investor-card .leaderboard-like-count {
    color: #b8c7cd;
    font-size: 11px;
  }
  html body #leaderboard-section.active .leaderboard-mobile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 0;
    border-top: 1px solid #293b45;
  }
  html body #leaderboard-section.active .leaderboard-mobile-stats > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 0 7px;
    border-right: 1px solid #293b45;
  }
  html body #leaderboard-section.active .leaderboard-mobile-stats > div:first-child { padding-left: 2px; }
  html body #leaderboard-section.active .leaderboard-mobile-stats > div:last-child { border-right: 0; }
  html body #leaderboard-section.active .leaderboard-mobile-stats span {
    color: #91a4af;
    font-size: 9px;
  }
  html body #leaderboard-section.active .leaderboard-mobile-stats strong {
    overflow: hidden;
    color: #dce5eb;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body #leaderboard-section.active .leaderboard-mobile-stats .leaderboard-pct-positive { color: #69bd9e; }
  html body #leaderboard-section.active .leaderboard-mobile-stats .leaderboard-pct-negative { color: #c47b7b; }
  html body #leaderboard-section.active .leaderboard-mobile-risk-bar {
    display: flex;
    width: 100%;
    height: 7px;
    overflow: hidden;
    gap: 2px;
    background: #263640;
  }
  html body #leaderboard-section.active .leaderboard-mobile-risk-bar span { min-width: 0; }
  html body #leaderboard-section.active .leaderboard-mobile-risk-bar .risk-very-safe { background: #45b895; }
  html body #leaderboard-section.active .leaderboard-mobile-risk-bar .risk-safe { background: #5b9dc1; }
  html body #leaderboard-section.active .leaderboard-mobile-risk-bar .risk-medium-safe { background: #c09b57; }
  html body #leaderboard-section.active .leaderboard-mobile-risk-bar .risk-high-risk { background: #bd6868; }
  html body #leaderboard-section.active .leaderboard-mobile-risk-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding-top: 5px;
  }
  html body #leaderboard-section.active .leaderboard-mobile-risk-value {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
  }
  html body #leaderboard-section.active .leaderboard-mobile-risk-value strong {
    color: #d5dfe5;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
  }
  html body #leaderboard-section.active .leaderboard-mobile-risk-value span {
    overflow: hidden;
    color: #92a5b0;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* Final mobile row reset: prevent legacy grid cells from leaking over card content. */
@media (max-width: 760px) {
  html body #leaderboard-section#leaderboard-section.active .leaderboard-table tbody tr {
    display: block !important;
    grid-template: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body #leaderboard-section#leaderboard-section.active .leaderboard-table tbody tr > td:not(.leaderboard-mobile-card-cell) {
    display: none !important;
  }
  html body #leaderboard-section#leaderboard-section.active .leaderboard-table tbody tr > td.leaderboard-mobile-card-cell {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }
}