/* Life Index Styles
-------------------------------------------------- */
#life-index-container {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs);
}

.life-index-item {
  background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
  border: 1px solid rgba(126, 165, 204, 0.2);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md);
  text-align: center;
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
}

.life-index-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.life-index-icon {
  align-items: center;
  background: linear-gradient(180deg, rgba(104, 173, 255, 0.15) 0%, rgba(67, 202, 255, 0.12) 100%);
  border-radius: 50%;
  display: flex;
  height: 50px;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
  padding: 12px;
  transition: background-color var(--transition-quick);
  width: 50px;
}

.life-index-icon i {
  font-size: 22px;
  transition: transform var(--transition-quick);
}

.life-index-item:hover .life-index-icon i {
  transform: scale(1.1);
}

.life-index-title {
  color: var(--header-bg);
  font-size: 14px;
  font-weight: 700;
  margin: var(--spacing-sm) 0 4px;
}

.life-index-status {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  transition: color var(--transition-quick);
}

.life-index-item:hover .life-index-status {
  color: #24598e;
}