.report { padding: 20rpx;
}
.modes { display: flex; gap: 12rpx; margin-bottom: 14rpx;
}
.mode-tab { flex: 1; text-align: center; padding: 16rpx 0; border-radius: 999rpx; background: #f4f4f4; color: #666; border: 1rpx solid #e9e9e9;
}
.mode-tab.active { background: #1aad19; color: #fff; border-color: #1aad19; font-weight: 700;
}
.toolbar { display: flex; align-items: center; gap: 8rpx; background: #fff; padding: 14rpx 16rpx; border-radius: 12rpx;
}
.date { padding: 10rpx 16rpx; border: 1rpx solid #eee; border-radius: 8rpx;
}
.tabs { display: flex; gap: 16rpx; margin-top: 14rpx;
}
.tab { padding: 12rpx 18rpx; border-radius: 999rpx; background: #f4f4f4; color: #666;
}
.tab.active { background: #1aad19; color: #fff;
}
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8rpx; margin-top: 14rpx;
}
.summary .item { background: #fff; border-radius: 12rpx; padding: 16rpx;
}
.summary .label { font-size: 22rpx; color: #888;
}
.summary .value { display: block; margin-top: 8rpx; font-weight: 700; color: #333;
}
.card { margin-top: 16rpx; background: #fff; border-radius: 12rpx; padding: 16rpx;
}
.row-head { display: flex; align-items: center; gap: 12rpx;
}
.thumb { width: 72rpx; height: 72rpx; border-radius: 8rpx; background: #f2f2f2;
}
.title { font-size: 28rpx; font-weight: 700;
}
.row-body { margin-top: 10rpx; color: #666;
}