.performance-history { background: radial-gradient(circle at 78% 12%, rgba(204, 157, 73, .12), transparent 30%), linear-gradient(100deg, #fffaf0 0%, #fffdf8 52%, #f8ecd7 100%); color: #0a204a; }
.performance-history .wrap { padding-top: 68px; padding-bottom: 64px; }
.performance-history__heading { margin-bottom: 30px; text-align: left; }
.performance-history .kicker { color: #0878ed; }
.performance-history h2 { margin: 0; color: #0a204a; font-size: clamp(2.5rem, 4.5vw, 4.65rem); }
.performance-history h2 span { color: #1687fa; }
.performance-history__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.performance-panel { padding: 24px; border: 1px solid #c7e1fb; border-radius: 10px; background: linear-gradient(145deg, #fff, #f4faff); box-shadow: 0 10px 25px rgba(20, 95, 178, .08); }
.performance-panel > h3 { margin: 0 0 20px; color: #0a204a; font-size: 1.35rem; }
.performance-chart + .performance-chart { margin-top: 19px; }
.performance-chart h4 { display: flex; justify-content: space-between; margin: 0 0 9px; color: #244d82; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.performance-chart h4 span { color: #0878ed; font-size: .64rem; }
.performance-bars { position: relative; display: grid; grid-template-columns: repeat(var(--count, 12), minmax(23px, 1fr)); align-items: stretch; min-height: 140px; padding: 10px 4px 20px; border-top: 1px solid #d8eafc; background: repeating-linear-gradient(to bottom, transparent 0 23px, #eaf4fe 24px); }
.performance-bars::after { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #91c5f8; content: ''; }
.performance-bar { position: relative; z-index: 1; min-width: 0; }
.performance-bar i { position: absolute; right: 21%; left: 21%; display: block; border-radius: 3px 3px 0 0; background: #55b8ef; }
.performance-bar.up i { bottom: 50%; height: var(--bar-height); background: linear-gradient(#7ee0ad, #159a58); }
.performance-bar.down i { top: 50%; height: var(--bar-height); border-radius: 0 0 3px 3px; background: linear-gradient(#ff9c8d, #e34e5d); }
.performance-bar b { position: absolute; left: 50%; color: #244d82; font-size: .55rem; font-weight: 800; line-height: 1; transform: translateX(-50%); white-space: nowrap; }
.performance-bar.up b { bottom: calc(50% + var(--bar-height) + 3px); }
.performance-bar.down b { top: calc(50% + var(--bar-height) + 3px); }
.performance-bar small { position: absolute; bottom: -16px; left: 50%; color: #59779f; font-size: .58rem; transform: translateX(-50%); }
.performance-history__note { margin: 20px 0 0; color: #587397; font-size: .76rem; line-height: 1.5; text-align: center; }
@media (max-width: 850px) { .performance-history__grid { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 560px) { .performance-history .wrap { padding-top: 54px; padding-bottom: 52px; } .performance-panel { padding: 18px 14px; overflow-x: auto; } .performance-chart { min-width: 360px; } .performance-bars { min-height: 150px; } .performance-bar b { font-size: .5rem; } }