.performance {
  --performance-bg: #e9fbf1;
  --performance-surface: #fff;
  --performance-text: #0d1f16;
  --performance-muted: #6b7f74;
  --performance-accent: #14532d;
  --performance-positive: #16a34a;
  --performance-negative: #c94d36;
  width: min(980px, calc(100% - 24px));
  margin: 18px auto 60px;
  color: var(--performance-text);
}

.performance *, .performance *::before, .performance *::after { box-sizing: border-box; }
.performance a { color: inherit; }
.performance-sparkline { display:block; width:100%; max-width:180px; height:54px; overflow:visible; }
.performance-sparkline__baseline { stroke:rgba(13,85,36,.13); stroke-width:1; }
.performance-sparkline__line { fill:none; stroke:var(--performance-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:500; stroke-dashoffset:500; animation:performance-draw 1s .15s ease-out forwards; }
.performance-sparkline--rising .performance-sparkline__line { stroke:var(--performance-positive); }
.performance-sparkline--falling .performance-sparkline__line { stroke:var(--performance-negative); }
.performance-sparkline__point { fill:var(--performance-bg); stroke:currentColor; stroke-width:1.6; }
.performance-sparkline--rising { color:var(--performance-positive); }
.performance-sparkline--falling { color:var(--performance-negative); }
.performance-reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.performance-reveal.is-visible { opacity:1; transform:none; }

/* Current compact card-based Performance design. */
.performance-v2 { display:flex; flex-direction:column; gap:26px; background:transparent; }
.performance-v2--detail { width:min(900px, calc(100% - 24px)); gap:22px; }
.performance-v2 .performance-card { overflow:hidden; border:1px solid #dbe9e1; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(16,40,26,.04); }

.performance-filters { display:flex; align-items:center; gap:8px; min-width:0; line-height:normal; }
.performance-filters__group { display:flex; flex:0 0 auto; gap:8px; }
.performance-filters__leagues { flex:1 1 auto; min-width:0; }

.performance-v2__heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.performance-v2__heading .page-title { margin:0 0 4px; color:#0d1f16; }
.performance-v2__heading p { margin:0; color:#6b7f74; font-size:14px; }
.performance-v2__freshness { display:flex; align-items:center; gap:7px; color:#6b7f74; font-size:12px; white-space:nowrap; }
.performance-v2__freshness span { width:7px; height:7px; border-radius:50%; background:#16a34a; }

.performance-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); gap:34px; padding:24px; }
.performance-feature__copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.performance-kicker { color:#16a34a; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.performance-status--falling { color:#c94d36; }.performance-status--limited { color:#6b7f74; }
.performance-feature h2 { margin:18px 0 2px; font-size:30px; line-height:1; letter-spacing:-.025em; }
.performance-feature__meta, .performance-feature__reason { margin:0; color:#6b7f74; font-size:13px; }
.performance-feature__rating { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; margin:20px 0 16px; }
.performance-feature__rating strong { grid-row:1 / 3; color:#16a34a; font-size:42px; line-height:1; }
.performance-feature__rating span { color:#6b7f74; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.performance-feature__rating b { justify-self:start; padding:3px 9px; border-radius:999px; background:#e8f7ee; color:#15803d; font-size:11px; }
.performance-feature__reason { margin-bottom:14px; color:#3f5449; font-size:14px; }
.performance-text-link { padding-bottom:2px; border-bottom:1.5px solid #16a34a; color:#14532d !important; font-size:13px; font-weight:700; }
.performance-feature__visual { display:flex; flex-direction:column; gap:10px; }
.performance-chart-card { padding:14px 12px 8px; border:1px solid #e3ece6; border-radius:10px; background:#f3faf6; }
.performance-chart-card .performance-sparkline { max-width:none; height:112px; }
.performance-chart-labels { display:flex; justify-content:space-between; padding:4px 8px 0; color:#9aa8a0; font:10px ui-monospace,monospace; }
.performance-feature__person { display:flex; align-items:center; gap:10px; min-height:64px; padding:8px 12px; border:1px solid #e3ece6; border-radius:10px; background:#f3faf6; }
.performance-feature__person img { width:48px; height:48px; border-radius:8px; object-fit:cover; background:#fff; }
.performance-feature__person > span { display:flex; flex-direction:column; }.performance-feature__person strong { font-size:13px; }.performance-feature__person small { color:#6b7f74; font-size:11px; }

.performance-block { display:flex; flex-direction:column; gap:12px; }
.performance-block__heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.performance-block__heading h2 { margin:0; font-size:21px; letter-spacing:-.015em; }
.performance-block__heading > span { color:#6b7f74; font-size:12px; }
.performance-data-table { overflow:hidden; }
.performance-data-table__head, .performance-data-table__row { display:grid; align-items:center; gap:12px; padding:12px 18px; }
.performance-data-table__head { background:#f8fbf9; color:#6b7f74; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.performance-data-table__row { min-height:62px; border-top:1px solid #eef4f1; transition:background .18s ease, padding .18s ease; }
.performance-data-table__row:hover { padding-inline:22px; background:#f8fbf9; color:inherit !important; }
.performance-data-table__row--players { grid-template-columns:34px minmax(180px,1fr) 72px 110px 78px; }
.performance-data-table__row--team-players { grid-template-columns:30px minmax(160px,1fr) 54px 105px 62px; }
.performance-data-table__head > span:nth-child(n+3), .performance-data-table__row > :nth-child(n+3) { text-align:end; }
.performance-data-table__rank { color:#9aa8a0; font:12px ui-monospace,monospace; }
.performance-person-cell { min-width:0; display:flex; align-items:center; gap:10px; }
.performance-person-cell img { width:32px; height:32px; flex:0 0 32px; border:1px solid #e3ece6; border-radius:50%; object-fit:cover; background:#f0f6f2; }
.performance-person-cell > span { min-width:0; display:flex; flex-direction:column; }
.performance-person-cell strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.performance-person-cell small { overflow:hidden; color:#6b7f74; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.performance-data-table__number { font-size:16px; }
.performance-data-table__key { display:flex; flex-direction:column; }.performance-data-table__key small { color:#6b7f74; font-size:9px; }.performance-data-table__key b { font-size:13px; }
.performance-trend { color:#6b7f74; font-size:12px; }.performance-trend--rising { color:#16a34a; }.performance-trend--falling { color:#c94d36; }

.performance-team-table__row { grid-template-columns:34px minmax(190px,1fr) 110px 170px 95px; }
.performance-team-table .performance-data-table__number, .performance-team-table .performance-trend { text-align:end; }
.performance-team-table .performance-form { justify-content:flex-end; }
.performance-form { display:flex; gap:4px; }.performance-result { width:22px; height:22px; display:inline-grid; place-items:center; border-radius:5px; font-size:9px; font-style:normal; font-weight:800; }
.performance-result--w { background:#16a34a; color:#fff; }.performance-result--d { background:#9aa8a0; color:#fff; }.performance-result--l { background:#d97a7a; color:#fff; }

.performance-xi { padding:22px 24px; }
.performance-xi__pitch { position:relative; min-height:610px; display:grid; grid-template-rows:repeat(4,1fr); gap:10px; padding:42px 18px; overflow:hidden; border:2px solid rgba(255,255,255,.48); border-radius:12px; background-color:#07533d; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 12.5%,rgba(0,0,0,.035) 12.5% 25%); box-shadow:inset 0 0 0 10px rgba(255,255,255,.06); }
.performance-xi__pitch::before { content:""; position:absolute; inset:50% 12px auto; border-top:1px solid rgba(255,255,255,.52); }
.performance-xi__pitch::after { content:""; position:absolute; top:50%; left:50%; width:104px; height:104px; border:1px solid rgba(255,255,255,.52); border-radius:50%; transform:translate(-50%,-50%); }
.performance-xi__box { position:absolute; z-index:0; left:50%; width:220px; height:72px; border:1px solid rgba(255,255,255,.5); transform:translateX(-50%); }.performance-xi__box--top { top:-1px; border-top:0; }.performance-xi__box--bottom { bottom:-1px; border-bottom:0; }
.performance-xi__line { position:relative; z-index:1; display:flex; justify-content:space-around; gap:10px; }
.performance-xi__player { width:92px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; transition:transform .18s ease; }.performance-xi__player:hover { transform:translateY(-3px); }
.performance-xi__player > span { width:52px; height:52px; overflow:hidden; border:2px solid rgba(255,255,255,.92); border-radius:50%; background:#fff; box-shadow:0 5px 12px rgba(0,0,0,.2); }.performance-xi__player img { width:100%; height:100%; object-fit:cover; }
.performance-xi__player strong { max-width:92px; overflow:hidden; color:#fff; font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,.7); text-overflow:ellipsis; white-space:nowrap; }.performance-xi__player small { padding:2px 8px; border-radius:999px; background:#f3f778; color:#123b28; font-size:10px; font-weight:850; box-shadow:0 2px 7px rgba(0,0,0,.15); }

.performance-consistency { overflow:hidden; }
.performance-consistency__row { display:grid; grid-template-columns:minmax(190px,1fr) 160px 92px 52px; align-items:center; gap:16px; min-height:68px; padding:12px 18px; border-top:1px solid #eef4f1; }.performance-consistency__row:first-child { border-top:0; }
.performance-consistency__bars { height:36px; display:flex; align-items:flex-end; gap:4px; }.performance-consistency__bars i { flex:1; min-height:5px; border-radius:3px; background:#7fc79b; }
.performance-consistency__tag { justify-self:start; padding:3px 9px; border-radius:999px; background:#e8f7ee; color:#15803d; font-size:10px; font-weight:700; }.performance-consistency__row > strong { text-align:end; }

.performance-breadcrumbs { display:flex; align-items:center; gap:8px; padding-inline:4px; color:#6b7f74; font-size:13px; }.performance-breadcrumbs strong { color:#0d1f16; }
.performance-identity-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; padding:22px 24px; }
.performance-identity-card__player { width:76px; height:76px; border-radius:12px; object-fit:cover; background:#f0f6f2; }.performance-identity-card__team { width:58px; height:58px; padding:5px; border:1px solid #e3ece6; border-radius:50%; object-fit:contain; background:#f0f6f2; }
.performance-identity-card__copy h1 { margin:0 0 4px; font-size:27px; letter-spacing:-.025em; }.performance-identity-card__copy p { margin:0 0 8px; color:#6b7f74; font-size:13px; }
.performance-identity-card .performance-filters { justify-self:end; }.performance-identity-card .performance-filters__leagues { display:none; }
.performance-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.performance-stat { min-height:112px; display:flex; flex-direction:column; gap:5px; padding:15px 16px; }.performance-stat > span { color:#6b7f74; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.performance-stat strong { margin-top:3px; font-size:25px; }.performance-stat small { color:#6b7f74; font-size:11px; }.performance-stat small:not(.performance-trend) { color:#16a34a; font-weight:700; }
.performance-rating-card { padding:20px 24px; }.performance-rating-card > header { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }.performance-rating-card h2 { margin:0; font-size:19px; }.performance-rating-card header span { color:#6b7f74; font-size:11px; }
.performance-rating-card__chart { margin-top:16px; }.performance-rating-card__chart .performance-sparkline { max-width:none; height:180px; }.performance-rating-card__labels { width:100%; max-width:600px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-inline:auto; color:#6b7f74; font-size:10px; text-align:center; }.performance-rating-card__labels span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.performance-role-skills { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.performance-skill { min-height:138px; display:flex; flex-direction:column; padding:16px; }.performance-skill > span { color:#6b7f74; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.performance-skill > strong { margin:10px 0 6px; font-size:26px; }.performance-skill > small { display:flex; align-items:center; gap:6px; color:#6b7f74; font-size:11px; }.performance-skill > small b { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#eef4f1; }.performance-skill p { margin:auto 0 0; color:#6b7f74; font-size:10px; }.performance-skill--rising > small { color:#16a34a; }.performance-skill--falling > small { color:#c94d36; }.performance-skill__word { font-size:20px !important; }
.performance-best-match { overflow:hidden; }.performance-best-match > header { display:flex; justify-content:space-between; gap:16px; padding:12px 20px; border-bottom:1px solid #eef4f1; background:#f8fbf9; color:#6b7f74; font-size:11px; }.performance-best-match > header b { padding:3px 8px; border-radius:6px; background:#e8f7ee; color:#15803d; }
.performance-best-match__body { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:24px; padding:20px; }.performance-best-match__score { display:flex; align-items:center; gap:10px; }.performance-best-match__score img { width:32px; height:32px; object-fit:contain; }.performance-best-match__score b { font-size:20px; }.performance-best-match__stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }.performance-best-match__stats span { display:flex; flex-direction:column; }.performance-best-match__stats small { color:#6b7f74; font-size:9px; text-transform:uppercase; }.performance-best-match__stats strong { font-size:18px; }.performance-best-match__body p { margin:15px 0 0; color:#3f5449; font-size:12px; }
.performance-best-match__rating { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid #e3ece6; border-radius:10px; background:#f3faf6; }.performance-best-match__rating > strong { color:#16a34a; font-size:44px; line-height:1; }.performance-best-match__rating > span { color:#6b7f74; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.performance-best-match__rating small { margin-top:5px; color:#14532d; font-size:10px; font-weight:700; }
.performance-log { overflow-x:auto; }.performance-log__head, .performance-log__row { min-width:720px; display:grid; align-items:center; gap:12px; padding:12px 18px; }.performance-log__head { background:#f8fbf9; color:#6b7f74; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.performance-log__row { min-height:58px; border-top:1px solid #eef4f1; color:#3f5449; font-size:12px; }.performance-log__row:hover { background:#f8fbf9; color:inherit !important; }.performance-log__player-row { grid-template-columns:110px minmax(190px,1fr) 55px 45px 45px 65px; }.performance-log__team-row { grid-template-columns:110px minmax(220px,1fr) 56px 72px 64px; }.performance-log__head > span:nth-child(n+3), .performance-log__row > :nth-child(n+3) { text-align:end; }.performance-log__match { display:flex; align-items:center; gap:8px; min-width:0; }.performance-log__match img { width:24px; height:24px; object-fit:contain; }.performance-log__match strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.performance-log__match small { margin-inline-start:auto; padding:2px 7px; border-radius:5px; background:#f0f6f2; font-size:9px; }.performance-log__row > .performance-result { justify-self:end; }
.performance-shape { padding:20px 24px; }.performance-shape h2 { margin:0 0 16px; font-size:19px; }.performance-shape__form { display:flex; align-items:center; gap:20px; }.performance-shape__form > i { width:1px; height:28px; background:#eef4f1; }.performance-shape__form p { margin:0; color:#3f5449; font-size:12px; }.performance-shape__metrics { display:flex; flex-direction:column; gap:11px; margin-top:18px; }.performance-shape__metrics > div > span { display:flex; justify-content:space-between; color:#54685d; font-size:11px; }.performance-shape__metrics > div > span strong { color:#0d1f16; }.performance-shape__metrics > div > i { height:6px; display:block; margin-top:5px; overflow:hidden; border-radius:999px; background:#f0f6f2; }.performance-shape__metrics > div > i b { height:100%; display:block; border-radius:999px; background:#16a34a; }
.performance-performers { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:12px; align-items:stretch; }.performance-squad-chart { padding:16px; }.performance-squad-chart h3 { margin:0; font-size:14px; }.performance-squad-chart header span { color:#6b7f74; font-size:10px; }.performance-squad-chart__bars { height:180px; display:flex; align-items:flex-end; gap:8px; margin-top:14px; border-bottom:1px solid #eef4f1; }.performance-squad-chart__bars > span { height:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; }.performance-squad-chart__bars b { font-size:10px; }.performance-squad-chart__bars i { width:100%; min-height:5px; border-radius:4px 4px 0 0; background:#7fc79b; }.performance-squad-chart__bars small { color:#9aa8a0; font:9px ui-monospace,monospace; }
.performance-empty { min-height:300px; display:grid; place-content:center; padding:28px; text-align:center; }.performance-empty__mark { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 14px; border:1px solid #dbe9e1; border-radius:50%; color:#14532d; font-size:24px; }.performance-empty h2 { margin:0; font-size:26px; }.performance-empty p { max-width:520px; color:#6b7f74; }

@keyframes performance-draw { to { stroke-dashoffset:0; } }

@media (max-width:760px) {
  .performance, .performance-v2, .performance-v2--detail { width:min(100% - 16px, 980px); gap:18px; }
  .performance-v2__heading { align-items:flex-start; flex-direction:column; gap:10px; }.performance-v2__heading .page-title { font-size:2rem; }
  .performance-feature { grid-template-columns:1fr; gap:20px; padding:20px; }.performance-feature h2 { font-size:28px; }.performance-feature__visual { min-width:0; }
  .performance-block__heading { align-items:flex-start; flex-direction:column; gap:3px; }
  .performance-data-table__row--players { grid-template-columns:26px minmax(130px,1fr) 48px 62px; }.performance-data-table__row--players > :nth-child(4) { display:none; }.performance-data-table__head, .performance-data-table__row { gap:8px; padding-inline:12px; }
  .performance-team-table__row { grid-template-columns:26px minmax(135px,1fr) 52px 122px; }.performance-team-table__row > :nth-child(5) { display:none; }.performance-team-table .performance-form { justify-content:flex-end; }.performance-team-table .performance-result { width:19px; height:19px; }
  .performance-xi { padding:10px; }.performance-xi__pitch { min-height:540px; padding:34px 2px; }.performance-xi__player { width:64px; }.performance-xi__player > span { width:42px; height:42px; }.performance-xi__player strong { max-width:64px; font-size:9px; }.performance-xi__box { width:150px; height:58px; }
  .performance-consistency__row { grid-template-columns:minmax(150px,1fr) 80px 45px; gap:10px; padding-inline:12px; }.performance-consistency__tag { display:none; }
  .performance-identity-card { grid-template-columns:auto minmax(0,1fr); padding:18px; }.performance-identity-card .performance-filters { grid-column:1/-1; justify-self:stretch; }.performance-identity-card__player { width:64px; height:64px; }.performance-identity-card__copy h1 { font-size:23px; }
  .performance-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.performance-stat { min-height:100px; }
  .performance-rating-card { padding:18px 12px; }.performance-rating-card__chart .performance-sparkline { height:130px; }.performance-rating-card__labels { overflow-x:auto; display:flex; }.performance-rating-card__labels span { flex:0 0 100px; }
  .performance-role-skills { grid-template-columns:1fr; }
  .performance-best-match__body { grid-template-columns:1fr; }.performance-best-match__rating { min-height:130px; }.performance-best-match__score { flex-wrap:wrap; }.performance-best-match__stats { grid-template-columns:repeat(2,1fr); }
  .performance-shape__form { align-items:flex-start; flex-direction:column; gap:10px; }.performance-shape__form > i { display:none; }
  .performance-performers { grid-template-columns:1fr; }.performance-data-table__row--team-players { grid-template-columns:26px minmax(130px,1fr) 46px 56px; }.performance-data-table__row--team-players > :nth-child(4) { display:none; }
  .performance-squad-chart__bars { height:150px; }
}

@media (max-width:420px) {
  .performance-feature { padding:18px 16px; }.performance-feature__rating { grid-template-columns:auto minmax(0,1fr); }.performance-feature__reason { font-size:13px; }
  .performance-stat-grid { gap:8px; }.performance-stat { padding:13px; }.performance-stat strong { font-size:22px; }
  .performance-shape { padding:18px 16px; }
}

@media (prefers-reduced-motion:reduce) {
  .performance *, .performance *::before, .performance *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .performance-reveal { opacity:1; transform:none; }.performance-sparkline__line { stroke-dashoffset:0; }
}

[dir="rtl"] .performance-v2 .performance-data-table__head > span:nth-child(n+3),
[dir="rtl"] .performance-v2 .performance-data-table__row > :nth-child(n+3),
[dir="rtl"] .performance-v2 .performance-log__head > span:nth-child(n+3),
[dir="rtl"] .performance-v2 .performance-log__row > :nth-child(n+3) { text-align:start; }
