body {
  background: linear-gradient(135deg, #181d37 0%, #23275a 100%) !important;
}

.loyalty-main {
  max-width: 1600px; 
  margin: 38px auto; 
  padding: 0 34px 40px;
  /* no background, sits on the dark body */
}

.loyalty-title {
  font-size: 2.35em;
  color: #e1e7ff;
  margin-bottom: 34px;
  text-align: center;
  letter-spacing: .03em;
}

.loyalty-dashboard-row {
  display: flex;
  gap: 34px;
  justify-content: center;
  margin-bottom: 36px;
}

.loyalty-card {
  flex: 1;
  background: #262a44;
  border-radius: 15px;
  box-shadow: 0 4px 22px #22234742;
  text-align: center;
  padding: 32px 6px;
  transition: box-shadow 0.19s, transform 0.14s;
}
.loyalty-card:hover {
  box-shadow: 0 14px 40px #4265b382;
  transform: scale(1.065) translateY(-7px);
}
.loyalty-card-label {
  font-size: 15px;
  color: #6f7ad7;
  margin-bottom: 9px;
}
.loyalty-card-value {
  font-size: 36px;
  color: #e2eaff;
  font-weight: 700;
}

.loyalty-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  gap: 37px;
  margin-top: 44px;
}

.loyalty-feature-card {
  background: #21253f;
  border-radius: 18px;
  box-shadow: 0 1px 13px #15173a45;
  padding: 28px 24px 22px 24px;
  transition: box-shadow 0.18s, transform 0.14s;
}
.loyalty-feature-card:hover {
  box-shadow: 0 13px 33px #3739bf85;
  transform: scale(1.032) translateY(-4px);
}

.loyalty-feature-card h2 {
  font-size: 1.2em;
  color: #e7edff;
  margin-bottom: 18px;
  letter-spacing: .01em;
}

.loyalty-tasks-grid {
  display: flex;
  gap: 22px;
  margin-bottom: 18px;
}

.loyalty-task-box {
  flex: 1;
  background: #2d2848;
  color: #bfc3e2;
  border-radius: 11px;
  text-align: center;
  padding: 19px 0;
  box-shadow: 0 2px 13px #27265316;
  transition: box-shadow 0.2s, transform 0.14s;
}
.loyalty-task-box:hover {
  box-shadow: 0 11px 35px #6349898a;
  transform: scale(1.08) translateY(-3px);
}
.loyalty-task-points {
  font-size: 26px;
  font-weight: bold;
  color: #8e82d6;
}
.loyalty-task-label {
  font-size: 13px;
  color: #b1b1de;
}

.loyalty-task-list { list-style: none; padding:0; }
.loyalty-task-list li {
  margin-bottom: 11px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2d2744;
}
.loyalty-task-list li:last-child { border-bottom: none; }

.loyalty-btn, .loyalty-btn.orange {
  background: #3847b8;
  color: #fff;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
  padding: 7px 20px;
  transition: background 0.15s, transform 0.13s, box-shadow 0.13s;
  box-shadow: 0 1.5px 4.5px #2d357a2b;
}
.loyalty-btn.orange { background: #ffe47a; color: #232353; }
.loyalty-btn:hover { background: #5252e6; transform: scale(1.09) translateY(-2px); box-shadow: 0 5px 17px #4056ff88;}
.loyalty-btn.orange:hover { background: #ffd063; color: #232353;}

.loyalty-invite-control {
  display: flex;
  gap: 11px;
  margin-bottom: 10px;
}

.loyalty-invite-input {
  flex: 1;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #44495f;
  padding: 7px;
  background: #282850;
  color: #e2e5ff;
}
.loyalty-invite-input:hover, .loyalty-invite-input:focus {
  box-shadow: 0 5px 18px #34348752;
  outline: none;
}

.loyalty-invite-steps {
  font-size: 14px;
  color: #b7c8ea;
  margin-top: 3px;
}
.loyalty-invite-steps li { margin-bottom: 6px;}

.loyalty-balance-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #23295b;
  color: #dbdef0;
  border-radius: 8px;
  padding: 14px 12px;
  margin-bottom: 11px;
  box-shadow: 0 1px 8px #1e213341;
  transition: box-shadow 0.15s, transform 0.13s;
}
.loyalty-balance-info:hover {
  box-shadow: 0 7px 22px #23276e92;
  transform: scale(1.02) translateY(-2px);
}
.loyalty-transactions {
  background: #242857;
  color: #e2eaff;
  border-radius: 8px;
  padding: 10px 9px;
  box-shadow: 0 1px 8px #1d234033;
  margin-top: 10px;
  transition: box-shadow 0.14s, transform 0.13s;
}
.loyalty-transactions:hover {
  box-shadow: 0 6px 22px #36297a54;
  transform: scale(1.03) translateY(-2px);
}
.loyalty-transactions ul { padding-left: 15px; margin: 0;}
.loyalty-transactions li { font-size: 14px; margin-bottom: 4px;}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3) !important;
    border-color: #8b5cf6;
}

.step-card:hover .step-number {
    transform: scale(1.1);
}

.task-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.tier-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr !important;
    }
    
    .task-grid {
        grid-template-columns: 1fr !important;
    }
    
    .tier-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .current-status {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3) !important;
    border-color: #8b5cf6;
}

.step-card:hover .step-number {
    transform: scale(1.1);
}

.tier-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.discount-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr !important;
    }
    
    .tier-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
    
    .discount-breakdown {
        grid-template-columns: 1fr !important;
    }
    
    .current-status {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.no-codes-state:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

@media (max-width: 768px) {
    .code-display-grid {
        grid-template-columns: 1fr !important;
    }
    
    .usage-instructions div {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tier hover effects */
.tier-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Bronze hover */
.tier-item:nth-child(1):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(120, 119, 198, 0.4);
    border-color: #7877c6 !important;
    background: rgba(120, 119, 198, 0.2) !important;
}

/* Silver hover */
.tier-item:nth-child(2):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(192, 192, 192, 0.4);
    border-color: #c0c0c0 !important;
    background: rgba(192, 192, 192, 0.2) !important;
}

/* Gold hover */
.tier-item:nth-child(3):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    border-color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.2) !important;
}

/* Platinum hover */
.tier-item:nth-child(4):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(229, 228, 226, 0.4);
    border-color: #e5e4e2 !important;
    background: rgba(229, 228, 226, 0.2) !important;
}

/* Elite hover */
.tier-item:nth-child(5):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.4);
    border-color: #8a2be2 !important;
    background: rgba(138, 43, 226, 0.2) !important;
}

/* Whale hover */
.tier-item:nth-child(6):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 20, 147, 0.4);
    border-color: #ff1493 !important;
    background: rgba(255, 20, 147, 0.2) !important;
}