h1.bonus-heading{font-size:larger}
.cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:25px;margin-top:20px}
.bonus-card{background:white;border-radius:12px;padding:25px;box-shadow:0 8px 16px rgba(0,0,0,0.1);transition:all .3s ease}
.bonus-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px rgba(0,0,0,0.15)}
.card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}
.bonus-title{font-size:1.2rem;font-weight:600;color:#333}
.bonus-amount{font-size:1.5rem;font-weight:700;color:#667eea}
.card-details{margin-bottom:20px}
.detail-row{display:flex;justify-content:space-between;margin-bottom:8px;color:#666;font-size:.9rem}
.detail-label{font-weight:500}
.detail-value{color:#333}
.progress-section{margin-top:20px}
.progress-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.9rem;color:#666}
.progress-bar-container{width:100%;height:12px;background:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.progress-bar{height:100%;background:rgba(0,52,102,1);border-radius:10px;transition:width .5s ease}
.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:600;margin-top:10px}
.status-active{background:#d4edda;color:#155724}
.status-expired{background:#f8d7da;color:#721c24}