.x3-ui-next.x3-people-page.x3-next-wide.elo-detail-page { max-width: 76rem; color: #eef1f2; }
.elo-detail-back { display: inline-flex; align-items: center; min-height: 44px; color: #dce5e2; text-decoration: none; }
.elo-detail-back:hover { color: var(--x3-green, #c8ff00); }
.elo-detail-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1.5rem; margin: .2rem 0 .8rem; }
.elo-detail-header h1 { margin: .1rem 0 0; font-weight: 800; line-height: 1.12; }
.elo-detail-year { display: flex; align-items: end; gap: .45rem; }
.elo-detail-year label { align-self: center; margin: 0; color: #c7d0d2; font-size: .82rem; font-weight: 700; }
.elo-detail-year select { width: 7rem; }
.elo-detail-year .btn { min-height: 44px; }
.elo-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: .7rem; border: 1px solid #34423b; border-radius: .7rem; background: #101617; }
.elo-detail-metric { display: flex; flex-direction: column; min-width: 0; gap: .08rem; padding: .3rem .55rem; border-left: 2px solid #526052; }
.elo-detail-metric.is-accent { border-left-color: var(--x3-green, #c8ff00); }
.elo-detail-metric > span, .elo-detail-stat > span { color: #bfc8c9; font-size: .75rem; line-height: 1.25; }
.elo-detail-metric strong { color: #f4f7f5; font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.2; overflow-wrap: normal; }
.elo-detail-metric.is-accent strong { color: var(--x3-green, #c8ff00); }
.elo-detail-metric strong.is-empty { color: #bfc8c9; font-size: .88rem; font-weight: 500; }
.elo-detail-metric small { color: #aebbb9; font-size: .72rem; }
.elo-detail-page :is(.elo-detail-stats, .elo-history-item) > summary:focus-visible { outline: 3px solid var(--x3-next-focus, #c8ff00); outline-offset: 2px; }
.elo-detail-stats { margin: .55rem 0 .85rem; border: 1px solid #34423b; border-radius: .55rem; background: #12191a; }
.elo-detail-stats > summary { display: flex; align-items: center; min-height: 44px; padding: .5rem .7rem; color: #e7efea; font-weight: 700; cursor: pointer; }
.elo-detail-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: 0 .7rem .7rem; }
.elo-detail-stat { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .6rem; border-top: 1px solid #34423b; }
.elo-detail-stat strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.elo-detail-history { padding: .7rem; border: 1px solid #34423b; border-radius: .7rem; background: #101617; }
.elo-detail-history h2 { margin: 0 0 .5rem; color: #fff; font-size: 1.15rem; font-weight: 800; }
.elo-history-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.elo-history-item { border-bottom: 1px solid #2b3937; }
.elo-history-item > summary { display: grid; grid-template-columns: 8.1rem minmax(9rem,1.15fr) minmax(9rem,1.2fr) minmax(8rem,1fr) 4.5rem 5rem; align-items: center; gap: .4rem; min-height: 52px; padding: .35rem .45rem; color: #edf2ee; cursor: pointer; list-style-position: inside; }
.elo-history-item > summary:hover { background: #192321; }
.elo-history-item > summary > span { min-width: 0; }
.elo-history-date, .elo-history-after, .elo-history-delta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.elo-history-date { color: #c0cbc7; font-size: .78rem; }
.elo-history-context, .elo-history-rivals { font-size: .84rem; overflow-wrap: normal; }
.elo-history-result { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; font-size: .82rem; }
.elo-history-after { color: #e9f4e9; font-size: .82rem; font-weight: 700; }
.elo-history-extra { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; padding: .45rem .65rem .6rem; background: #192321; color: #c6d0cc; font-size: .8rem; }
.elo-history-extra b { color: #e8efe9; }
.elo-detail-page .elo-empty-state { padding: 1rem; }
@media (max-width: 991.98px) {
  .elo-detail-summary, .elo-detail-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elo-history-item > summary { grid-template-columns: 7rem minmax(0,1fr) auto; grid-template-areas: 'date context delta' 'rivals rivals after' 'result result result'; gap: .2rem .5rem; }
  .elo-history-date { grid-area: date; } .elo-history-context { grid-area: context; } .elo-history-rivals { grid-area: rivals; }
  .elo-history-result { grid-area: result; } .elo-history-delta { grid-area: delta; } .elo-history-after { grid-area: after; text-align: right; }
}
@media (max-width: 767.98px) {
  .elo-detail-page { padding-top: .5rem !important; }
  .elo-detail-header { align-items: start; }
  .elo-detail-year { width: 100%; }
  .elo-detail-year select { flex: 1; max-width: 8rem; }
  .elo-detail-summary { gap: .2rem; padding: .4rem; }
  .elo-detail-metric { padding: .3rem .4rem; }
  .elo-detail-stats-grid { gap: .1rem; }
  .elo-detail-history { padding: .45rem; }
  .elo-history-item > summary { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'date delta' 'context context' 'rivals rivals' 'result after'; min-height: 44px; padding: .45rem .25rem; }
  .elo-history-context, .elo-history-rivals { font-size: .82rem; }
  .elo-history-result { align-self: center; }
}
@media (max-width: 380px) { .elo-detail-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }