/*卡片式组件style——Dataset Page*/
/* 容器：让所有卡片横排 */
.card-container {
  display: flex;
  flex-wrap: wrap;          /* 超出时自动换行 */
  
  align-items: flex-start;
  width: 1200px;            /* 总宽度限制 */
  margin: 0 auto;           /* 居中 */
  margin-left: -25px;
  gap: 15px;                /* 卡片之间的间距 */
}

.card-item {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 15px 18px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  width: 280px;     
  height: 140px;    
  overflow: hidden; 
  transition: box-shadow 0.3s ease;
}
.card-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-icon {
  width: 25%;
  height: 100%;
  overflow: hidden;
}
.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
}

.divider {
  width: 1px;
  height: 95%;
  background-color: #ccc;
  margin: 0 16px;
  flex-shrink: 0;
  align-self: center;
}

.card-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 3px;
}
.card-info {
  font-size: 10px;
  line-height: 1.3;
  color: #333;
}

.el-tag {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 5px;
  margin-right: 6px;
  font-weight: 500;
}
.el-tag--warning { background-color: #fff4e5; color: #d48806; }
.el-tag--primary {  background-color: #e6f7ff; color: #096dd9; }
.el-tag--danger  { background-color: #fff1f0; color: #cf1322; }
.el-tag--purple {  background-color: #f9f0ff;   color: #722ed1;}

.card-link {
  display: inline-flex;
  align-items: center;
  color: #e67e22;
  font-weight: 600;
  text-decoration: none;
  margin-top: 8px;
  transition: color 0.2s ease;
  cursor: pointer;
}
.card-link:hover { color: #d35400; }
.card-link i { margin-left: 4px; }