.upgrade-layout { display: grid; gap: 18px; }
.upgrade-hero .panel-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 22px; align-items: stretch; }
.upgrade-hero-copy, .upgrade-panel .panel-body, .upgrade-empty .panel-body { display: grid; gap: 14px; }
.upgrade-balance, .upgrade-character-card, .upgrade-row { border: 2px solid var(--ink); border-radius: 8px; background: #fff9ea; box-shadow: var(--soft-shadow); }
.upgrade-balance { display: inline-grid; width: fit-content; min-width: 180px; padding: 10px 12px; background: var(--gold); }
.upgrade-balance span, .upgrade-character-card span, .upgrade-stat-value small, .upgrade-row-head span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.upgrade-balance strong, .upgrade-character-card strong { font-size: 24px; line-height: 1.1; }
.upgrade-character-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; }
.upgrade-character-card img { width: 118px; height: 136px; object-fit: contain; border: 2px solid var(--ink); border-radius: 8px; background: var(--surface-alt); }
.upgrade-character-card div { display: grid; gap: 8px; min-width: 0; }
.upgrade-character-card p { margin: 0; color: var(--muted); }
.upgrade-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.upgrade-row { display: grid; grid-template-rows: auto 10px 44px; gap: 10px; min-height: 174px; padding: 12px; }
.upgrade-row-head { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.upgrade-row-head > div:first-child { display: grid; gap: 4px; min-width: 0; }
.upgrade-row-head strong { overflow-wrap: anywhere; font-size: 18px; }
.upgrade-stat-value { display: grid; justify-items: end; align-content: start; min-width: 54px; }
.upgrade-stat-value strong { font-size: 28px; line-height: 1; }
.upgrade-stat-value small { color: var(--success); }
.upgrade-progress { overflow: hidden; height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface-alt); }
.upgrade-progress span { display: block; height: 100%; background: var(--club-live); }
.upgrade-buy-button { width: 100%; }
@media (max-width: 860px) { .upgrade-hero .panel-body { grid-template-columns: 1fr; gap: 14px; } .upgrade-character-card { grid-template-columns: 92px minmax(0, 1fr); } .upgrade-character-card img { width: 92px; height: 106px; } .upgrade-list { grid-template-columns: 1fr; } }