.performance-container { max-width: 1280px; padding: 40px clamp(22px,4vw,64px) 64px; gap: 36px; }
.performance-intro { gap: 30px; }
.performance-heading { align-items: start; }
.performance-heading h1 { font: 400 clamp(34px,3.6vw,52px)/1.1 var(--font-display); max-width: 780px; margin: 18px 0; }
.performance-heading p { font-size: 13px; max-width: 570px; line-height: 1.9; }
.performance-heading .z-badge { background: transparent; color: var(--brand-detail); padding: 0; font-size: 9px; letter-spacing: .2em; border: 0; }
.performance-visit { border: 0; border-radius: 0; padding: 4px 0; font-size: 10px; }
.performance-metrics { gap: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--card); }
.performance-metric { border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 24px; min-height: 170px; background: transparent; }
.performance-metric:last-child { border-right: 0; }
.performance-metric__top { justify-content: space-between; flex-direction: row-reverse; }
.performance-metric .performance-metric__icon { background: transparent; color: var(--brand-detail); width: 22px; height: 22px; flex-basis: 22px; font-size: 19px !important; }
.performance-metric__label { font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.performance-metric__value { font: 400 44px/1.1 var(--font-display); margin-top: 12px; }
.performance-metric__detail { font-size: 11px; }
.performance-intro > .z-card { background: #1b0f0c; color: #fbf7ef; border-color: #3b1e14; border-radius: 4px; }
.performance-intro > .z-card .z-card__content { padding: 28px; }
.performance-callout > .material-symbols-outlined { color: #f5cc5d; background: transparent; }
.performance-callout__title { font: 400 28px/1.2 var(--font-display); color: #fbf7ef; margin-bottom: 8px; }
.performance-callout p { color: #f0e2c9; font-size: 12px; }
.performance-container .z-card { box-shadow: none; }
.performance-container .z-card__title { font: 500 30px/1.2 var(--font-display); }
.performance-container .z-card__description { font-size: 12px; line-height: 1.8; }
.performance-gamification { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.achievement-summary { padding: 24px; background: var(--muted); border-radius: 3px; display: grid; gap: 16px; }
.achievement-eyebrow { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--brand-detail); }
.achievement-score { font: 400 60px/1 var(--font-display); }
.achievement-level { font-size: 12px; color: var(--muted-foreground); }
.achievement-breakdown { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--border); padding-top: 18px; gap: 12px; }
.achievement-breakdown strong { display: block; font: 400 28px/1.2 var(--font-display); }
.achievement-breakdown span { font-size: 10px; color: var(--muted-foreground); }
.achievement-medals { font-size: 11px; color: var(--muted-foreground); }
.achievement-ranking { display: grid; align-content: start; gap: 16px; padding-top: 6px; }
.achievement-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.achievement-position { font: 400 26px/1 var(--font-display); color: var(--brand-detail); }
.achievement-row small { display: block; color: var(--muted-foreground); font-size: 10px; margin-top: 4px; }
@media(max-width:1120px) { .performance-metric:nth-child(2) { border-right: 0; } .performance-metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
@media(max-width:760px) { .performance-gamification { grid-template-columns: 1fr; } .performance-container { padding: 26px 18px 40px; } .performance-metric { padding: 18px; } .performance-metric__value { font-size: 36px; } }